Skip to content

Commit a12868d

Browse files
lordelogoslordelogos
authored
Merge pull request #17 from codeskills-dev/feat/generic
feat(repo): rewrite to generic jsx
2 parents a3a592a + b6f11cc commit a12868d

File tree

14 files changed

+62
-861
lines changed

14 files changed

+62
-861
lines changed

‎.changeset/rude-experts-appear.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"md-to-react-email": major
3+
---
4+
5+
Rename exports to be generic
6+
7+
### Removed
8+
9+
- remove `data-id` attributes from components, utils and types
10+
- `react-email` peer and dev dependency

‎README.md‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Read the documentation [here](https://md2re.codeskills.dev/)
44

55
## Description
66

7-
md-to-react-email is a lightweight utility for converting [Markdown](https://www.markdownguide.org/) into valid [React-email](https://react.email) templates. This tool simplifies the process of creating responsive and customizable email templates by leveraging the power of React and Markdown.
7+
md-to-react-email is a lightweight utility for converting [Markdown](https://www.markdownguide.org/) into valid JSX that can be used in [React-email](https://react.email) or [JSX-email](https://jsx.email) templates. This tool simplifies the process of creating responsive and customizable email templates by leveraging the power of React and Markdown.
88

99
**Note**: Starting from `version 4`, `md-to-react-email` uses [`Marked`](https://marked.js.org/) for markdown transformation. see all changes [here](/CHANGELOG.md)
1010

@@ -36,25 +36,25 @@ npm install md-to-react-email
3636

3737
- `camelToKebabCase`: converts strings from camelcase ['thisIsCamelCase'] to kebab case ['this-is-kebab-case']
3838
- `parseCssInJsToInlineCss`: converts css styles from css-in-js to inline css e.g fontSize: "18px" => font-size: 18px;
39-
- `parseMarkdownToReactEmailJSX`: parses markdown to valid react-email JSX for the client (i.e the browser)
39+
- `parseMarkdownToJSX`: parses markdown to valid JSX for the client (i.e the browser)
4040

4141
### Components:
4242

43-
- `ReactEmailMarkdown`: a react-email component that takes in markdown input and parses it directly in your code base
43+
- `EmailMarkdown`: a react component that takes in markdown input and parses it directly in your code base
4444

4545
## Usage:
4646

47-
- Directly as [`React-email`](https://react.email) component
47+
- Directly as [`React-email`](https://react.email) or [`JSX-email`](https://jsx.email) component
4848

4949
```
50-
import {ReactEmailMarkdown} from "md-to-react-email"
50+
import {EmailMarkdown} from "md-to-react-email"
5151

5252
export default function EmailTemplate() {
5353
return (
5454
<Email>
5555
<Head />
5656
<Section>
57-
<ReactEmailMarkdown markdown={`# Hello, World!`} />
57+
<EmailMarkdown markdown={`# Hello, World!`} />
5858
</Section>
5959
</Email>
6060
)
@@ -64,20 +64,17 @@ npm install md-to-react-email
6464
- Directly into react-email template
6565

6666
```
67-
import {parseMarkdownToReactEmailJSX} from "md-to-react-email"
67+
import {parseMarkdownToJSX} from "md-to-react-email"
6868

6969
const markdown = `# Hello World`
70-
const parsedReactMail = parseMarkdownToReactEmailJSX({markdown})
71-
const parsedReactMailWithDataAttributes = parseMarkdownToReactEmailJSX({markdown, withDataAttr: true})
70+
const parsedReactMail = parseMarkdownToJSX({markdown})
7271

7372
console.log(parsedReactMail) // `<h1 style="...valid inline CSS...">Hello, World!</h1>`
74-
console.log(parsedReactMailWithDataAttributes) // `<h1 data-id="react-email-heading" style="...valid inline CSS...">Hello, World!</h1>`
75-
7673
```
7774

7875
## Components
7976

80-
md-to-react-email contains pre-defined react-email and html components for the email template structure and styling. You can modify these components to customize the look and feel of your email template.
77+
md-to-react-email contains pre-defined react and html components for the email template structure and styling. You can modify these components to customize the look and feel of your email template.
8178

8279
The following components are available for customization:
8380

@@ -95,7 +92,7 @@ The following components are available for customization:
9592

9693
## Supported Email Clients
9794

98-
The provided React-email components and default styling are designed to work well across various email clients and providers. However, due to the inconsistent support for modern web standards in different email clients, it's recommended to test your email templates in multiple clients to ensure compatibility.
95+
The provided React components and default styling are designed to work well across various email clients and providers. However, due to the inconsistent support for modern web standards in different email clients, it's recommended to test your email templates in multiple clients to ensure compatibility.
9996

10097
The following email clients are known to be supported:
10198

‎__tests__/reactEmailMarkdown.test.tsx‎ renamed to ‎__tests__/emailMarkdown.test.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from "react";
22
import { render } from "@react-email/render";
3-
import { ReactEmailMarkdown } from "../src";
3+
import { EmailMarkdown } from "../src";
44

55
describe("ReactEmailMarkdown component renders correctly", () => {
66
it("renders the markdown in the correct format for browsers", () => {
7-
const actualOutput = render(
8-
<ReactEmailMarkdown markdown={`# Hello, World!`} />
9-
);
7+
const actualOutput = render(<EmailMarkdown markdown={`# Hello, World!`} />);
108
expect(actualOutput).toMatchInlineSnapshot(
11-
`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><h1 style="font-weight:500;padding-top:20px;font-size:2.5rem" data-id="react-email-heading">Hello, World!</h1></div>"`
9+
`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><h1 style="font-weight:500;padding-top:20px;font-size:2.5rem">Hello, World!</h1></div>"`
1210
);
1311
});
1412
});

‎__tests__/parseMarkdownToReactEmailJSX.test.ts‎ renamed to ‎__tests__/parseMarkdownToJSX.test.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { parseMarkdownToReactEmailJSX } from "../src";
1+
import { parseMarkdownToJSX } from "../src";
22

3-
describe("Markdown to React Mail JSX Parser", () => {
3+
describe("Markdown to JSX Parser", () => {
44
it("handles markdown correctly", () => {
55
const markdown = `# Markdown Test Document
66
@@ -77,7 +77,7 @@ console.log(\`Hello, $\{name\}!\`);
7777
</code></pre>
7878
`;
7979

80-
const rendered = parseMarkdownToReactEmailJSX({
80+
const rendered = parseMarkdownToJSX({
8181
markdown,
8282
});
8383
expect(rendered).toBe(expected);
@@ -87,7 +87,7 @@ console.log(\`Hello, $\{name\}!\`);
8787
const markdown = "";
8888
const expected = ``;
8989

90-
const rendered = parseMarkdownToReactEmailJSX({
90+
const rendered = parseMarkdownToJSX({
9191
markdown,
9292
});
9393
expect(rendered).toBe(expected);
@@ -103,7 +103,7 @@ console.log(\`Hello, $\{name\}!\`);
103103
`;
104104
const expected = `<h1 style="font-weight:500;padding-top:20px;font-size:2.5rem">Header 1</h1><h2 style="font-weight:500;padding-top:20px;font-size:2rem">Header 2</h2><h3 style="font-weight:500;padding-top:20px;font-size:1.75rem">Header 3</h3><h4 style="font-weight:500;padding-top:20px;font-size:1.5rem">Header 4</h4><h5 style="font-weight:500;padding-top:20px;font-size:1.25rem">Header 5</h5><h6 style="font-weight:500;padding-top:20px;font-size:1rem">Header 6</h6>`;
105105

106-
const rendered = parseMarkdownToReactEmailJSX({
106+
const rendered = parseMarkdownToJSX({
107107
markdown,
108108
});
109109
expect(rendered).toBe(expected);
@@ -119,7 +119,7 @@ This is two
119119
<p>This is two</p>
120120
`;
121121

122-
const rendered = parseMarkdownToReactEmailJSX({
122+
const rendered = parseMarkdownToJSX({
123123
markdown,
124124
});
125125
expect(rendered).toBe(expected);
@@ -134,7 +134,7 @@ This is ~~striked~~ text and \`inline code\``;
134134
<p>This is <del>striked</del> text and <code style="color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;word-wrap:break-word">inline code</code></p>
135135
`;
136136

137-
const rendered = parseMarkdownToReactEmailJSX({
137+
const rendered = parseMarkdownToJSX({
138138
markdown,
139139
});
140140
expect(rendered).toBe(expected);
@@ -166,7 +166,7 @@ Here is an ordered list:
166166
</ol>
167167
`;
168168

169-
const rendered = parseMarkdownToReactEmailJSX({
169+
const rendered = parseMarkdownToJSX({
170170
markdown,
171171
});
172172
expect(rendered).toBe(expected);
@@ -199,7 +199,7 @@ Here is an ordered list:
199199
</tbody></table>
200200
`;
201201

202-
const rendered = parseMarkdownToReactEmailJSX({
202+
const rendered = parseMarkdownToJSX({
203203
markdown,
204204
});
205205
expect(rendered).toBe(expected);
@@ -224,7 +224,7 @@ greet("World")
224224
</code></pre>
225225
`;
226226

227-
const rendered = parseMarkdownToReactEmailJSX({
227+
const rendered = parseMarkdownToJSX({
228228
markdown,
229229
});
230230
expect(rendered).toBe(expected);
@@ -242,7 +242,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
242242
</blockquote>
243243
`;
244244

245-
const rendered = parseMarkdownToReactEmailJSX({
245+
const rendered = parseMarkdownToJSX({
246246
markdown,
247247
});
248248
expect(rendered).toBe(expected);
@@ -256,7 +256,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
256256
<img src="https://example.com/image.jpg" alt="Image description"></p>
257257
`;
258258

259-
const rendered = parseMarkdownToReactEmailJSX({
259+
const rendered = parseMarkdownToJSX({
260260
markdown,
261261
});
262262
expect(rendered).toBe(expected);
@@ -270,7 +270,7 @@ Here's a link to [OpenAI\'s website](https://openai.com/).`;
270270
Here&#39;s a link to <a href="https://openai.com/" target="_blank" style="color:#007bff;text-decoration:underline;background-color:transparent">OpenAI&#39;s website</a>.</p>
271271
`;
272272

273-
const rendered = parseMarkdownToReactEmailJSX({
273+
const rendered = parseMarkdownToJSX({
274274
markdown,
275275
});
276276
expect(rendered).toBe(expected);

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "md-to-react-email",
33
"version": "4.1.0",
4-
"description": "A simple Markdown parser for React-email written in typescript.",
4+
"description": "A simple Markdown to jsx parser for email templates written in typescript.",
55
"keywords": [
66
"markdown",
77
"react-email",
8+
"jsx-email",
89
"md",
910
"email",
1011
"jsx"
@@ -39,15 +40,13 @@
3940
"@types/react": "18.2.8",
4041
"jest": "29.5.0",
4142
"react": "18.2.0",
42-
"react-email": "1.9.3",
4343
"ts-jest": "29.1.0",
4444
"ts-node": "10.9.1",
4545
"tsup": "6.7.0",
4646
"typescript": "5.1.3"
4747
},
4848
"peerDependencies": {
49-
"react": "18.x",
50-
"react-email": ">1.9.3"
49+
"react": "18.x"
5150
},
5251
"dependencies": {
5352
"marked": "7.0.4"

0 commit comments

Comments
 (0)