Merge pull request #17 from codeskills-dev/feat/generic

feat(repo): rewrite to generic jsx
codeskills-dev · Oct 2, 2023 · a12868d · a12868d
2 parents a3a592a + b6f11cc
commit a12868d
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 861 deletions.
diff --git a/.changeset/rude-experts-appear.md b/.changeset/rude-experts-appear.md
@@ -0,0 +1,10 @@
+---
+"md-to-react-email": major
+---
+
+Rename exports to be generic
+
+### Removed
+
+- remove `data-id` attributes from components, utils and types
+- `react-email` peer and dev dependency
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Read the documentation [here](https://md2re.codeskills.dev/)
 
 ## Description
 
-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.
+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.
 
 **Note**: Starting from `version 4`, `md-to-react-email` uses [`Marked`](https://marked.js.org/) for markdown transformation. see all changes [here](/CHANGELOG.md)
 
@@ -36,25 +36,25 @@ npm install md-to-react-email
 
 - `camelToKebabCase`: converts strings from camelcase ['thisIsCamelCase'] to kebab case ['this-is-kebab-case']
 - `parseCssInJsToInlineCss`: converts css styles from css-in-js to inline css e.g fontSize: "18px" => font-size: 18px;
-- `parseMarkdownToReactEmailJSX`: parses markdown to valid react-email JSX for the client (i.e the browser)
+- `parseMarkdownToJSX`: parses markdown to valid JSX for the client (i.e the browser)
 
 ### Components:
 
-- `ReactEmailMarkdown`: a react-email component that takes in markdown input and parses it directly in your code base
+- `EmailMarkdown`: a react component that takes in markdown input and parses it directly in your code base
 
 ## Usage:
 
-- Directly as [`React-email`](https://react.email) component
+- Directly as [`React-email`](https://react.email) or [`JSX-email`](https://jsx.email) component
 
         ```
-        import {ReactEmailMarkdown} from "md-to-react-email"
+        import {EmailMarkdown} from "md-to-react-email"
 
         export default function EmailTemplate() {
         return (
                 <Email>
                         <Head />
                         <Section>
-                        <ReactEmailMarkdown markdown={`# Hello, World!`} />
+                        <EmailMarkdown markdown={`# Hello, World!`} />
                         </Section>
                 </Email>
         )
@@ -64,20 +64,17 @@ npm install md-to-react-email
 - Directly into react-email template
 
         ```
-        import {parseMarkdownToReactEmailJSX} from "md-to-react-email"
+        import {parseMarkdownToJSX} from "md-to-react-email"
 
         const markdown = `# Hello World`
-        const parsedReactMail = parseMarkdownToReactEmailJSX({markdown})
-        const parsedReactMailWithDataAttributes = parseMarkdownToReactEmailJSX({markdown, withDataAttr: true})
+        const parsedReactMail = parseMarkdownToJSX({markdown})
 
         console.log(parsedReactMail) // `<h1 style="...valid inline CSS...">Hello, World!</h1>`
-        console.log(parsedReactMailWithDataAttributes) // `<h1 data-id="react-email-heading" style="...valid inline CSS...">Hello, World!</h1>`
-
         ```
 
 ## Components
 
-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.
+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.
 
 The following components are available for customization:
 
@@ -95,7 +92,7 @@ The following components are available for customization:
 
 ## Supported Email Clients
 
-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.
+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.
 
 The following email clients are known to be supported:
 

diff --git a/__tests__/reactEmailMarkdown.test.tsx → __tests__/emailMarkdown.test.tsx b/__tests__/reactEmailMarkdown.test.tsx → __tests__/emailMarkdown.test.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 import { render } from "@react-email/render";
-import { ReactEmailMarkdown } from "../src";
+import { EmailMarkdown } from "../src";
 
 describe("ReactEmailMarkdown component renders correctly", () => {
   it("renders the markdown in the correct format for browsers", () => {
-    const actualOutput = render(
-      <ReactEmailMarkdown markdown={`# Hello, World!`} />
-    );
+    const actualOutput = render(<EmailMarkdown markdown={`# Hello, World!`} />);
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!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>"`
+      `"<!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>"`
     );
   });
 });
diff --git a/...ts__/parseMarkdownToReactEmailJSX.test.ts → __tests__/parseMarkdownToJSX.test.ts b/...ts__/parseMarkdownToReactEmailJSX.test.ts → __tests__/parseMarkdownToJSX.test.ts
@@ -1,6 +1,6 @@
-import { parseMarkdownToReactEmailJSX } from "../src";
+import { parseMarkdownToJSX } from "../src";
 
-describe("Markdown to React Mail JSX Parser", () => {
+describe("Markdown to JSX Parser", () => {
   it("handles markdown correctly", () => {
     const markdown = `# Markdown Test Document
 
@@ -77,7 +77,7 @@ console.log(\`Hello, $\{name\}!\`);
 </code></pre>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -87,7 +87,7 @@ console.log(\`Hello, $\{name\}!\`);
     const markdown = "";
     const expected = ``;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -103,7 +103,7 @@ console.log(\`Hello, $\{name\}!\`);
 `;
     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>`;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -119,7 +119,7 @@ This is two
 <p>This is two</p>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -134,7 +134,7 @@ This is ~~striked~~ text and \`inline code\``;
 <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>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -166,7 +166,7 @@ Here is an ordered list:
 </ol>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -199,7 +199,7 @@ Here is an ordered list:
 </tbody></table>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -224,7 +224,7 @@ greet("World")
 </code></pre>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -242,7 +242,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </blockquote>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -256,7 +256,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 <img src="https://example.com/image.jpg" alt="Image description"></p>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);
@@ -270,7 +270,7 @@ Here's a link to [OpenAI\'s website](https://openai.com/).`;
 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>
 `;
 
-    const rendered = parseMarkdownToReactEmailJSX({
+    const rendered = parseMarkdownToJSX({
       markdown,
     });
     expect(rendered).toBe(expected);

diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "md-to-react-email",
   "version": "4.1.0",
-  "description": "A simple Markdown parser for React-email written in typescript.",
+  "description": "A simple Markdown to jsx parser for email templates written in typescript.",
   "keywords": [
     "markdown",
     "react-email",
+    "jsx-email",
     "md",
     "email",
     "jsx"
@@ -39,15 +40,13 @@
     "@types/react": "18.2.8",
     "jest": "29.5.0",
     "react": "18.2.0",
-    "react-email": "1.9.3",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
     "tsup": "6.7.0",
     "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "react": "18.x",
-    "react-email": ">1.9.3"
+    "react": "18.x"
   },
   "dependencies": {
     "marked": "7.0.4"