react-email 6.0.0 → 6.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-email
 
+## 6.0.2
+
+### Patch Changes
+
+- 63b6e71: Fix Markdown component crashing on CommonMark loose lists with paragraph continuations
+
+## 6.0.1
+
+### Patch Changes
+
+- 599b8c5: fix type issues in starter template and in react-email
+
 ## 6.0.0
 
 ### Major Changes
@@ -8,7 +20,7 @@
 
   All components (previously in `@react-email/components` or individual packages like `@react-email/button`) and rendering utilities (previously in `@react-email/render`) are now exported directly from `react-email`. This unifies the install and import experience into a single package.
 
-  We're going to deprecate all packages except `@react-email/render` and `@react-email/preview-server`, and they will not be updated anymore.
+  We're going to deprecate all packages except `@react-email/render` and `@react-email/ui`, and they will not be updated anymore.
 
   ### Breaking change
 
@@ -19,22 +31,25 @@
   Having separate packages for components (`@react-email/components`), and the CLI (`react-email`) created unnecessary confusion, and a maintenance burden for us.
 
   ### How to migrate
-  1. **Update your dependencies** -- remove `@react-email/components`, keep `react-email`:
+  1. Remove `@react-email/components`:
 
      ```diff
-     - npm install @react-email/components react-email @react-email/preview-server
-     + npm install react-email @react-email/preview-server
+     npm remove @react-email/components
      ```
 
-  2. **Update your imports**:
+  2. Update `react-email`, and move it over to `dependencies`:
+
+     ```diff
+     npm install react-email@latest
+     ```
+
+  3. **Update your imports**:
 
      ```diff
      - import { Button, Html, Head, render } from "@react-email/components";
      + import { Button, Html, Head, render } from "react-email";
      ```
 
-  3. The `@react-email/preview-server` and `@react-email/editor` packages are not included in `react-email`
-
 ### Patch Changes
 
 - a3a15ea: replace deprecated `url.parse()` with WHATWG URL API in the preview dev server.

package/dist/cli/index.mjs

@@ -6522,15 +6522,17 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.0.0",
+	version: "6.0.2",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
+	types: "./dist/index.d.mts",
 	scripts: {
 		"build": "tsdown",
 		"build:watch": "tsdown --watch src",
 		"clean": "rm -rf dist",
 		"test": "vitest run",
+		"test:e2e": "vitest run --config vitest.e2e.config.ts",
 		"test:watch": "vitest",
 		"typecheck": "tsc --noEmit"
 	},
@@ -6584,12 +6586,15 @@ var package_default = {
 		"@types/css-tree": "catalog:",
 		"@types/mime-types": "catalog:",
 		"@types/prompts": "2.4.9",
+		"@types/shelljs": "0.10.0",
 		"next": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
+		"shelljs": "0.10.0",
 		"shlex": "3.0.0",
 		"tsx": "catalog:",
-		"typescript": "catalog:"
+		"typescript": "catalog:",
+		"yalc": "catalog:"
 	}
 };
 //#endregion

package/dist/index.cjs

@@ -17810,8 +17810,9 @@ const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdown
 		const text = renderer.parser.parseInline(tokens);
 		return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
 	};
-	renderer.listitem = ({ tokens }) => {
-		const text = tokens.some((token) => token.type === "list") ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
+	renderer.listitem = ({ tokens, loose }) => {
+		const hasNestedList = tokens.some((token) => token.type === "list");
+		const text = loose || hasNestedList ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
 		return `<li${parseCssInJsToInlineCss(finalStyles.li) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.li)}"` : ""}>${text}</li>\n`;
 	};
 	renderer.list = ({ items, ordered, start }) => {

package/dist/index.mjs

@@ -17789,8 +17789,9 @@ const Markdown = React$1.forwardRef(({ children, markdownContainerStyles, markdo
 		const text = renderer.parser.parseInline(tokens);
 		return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
 	};
-	renderer.listitem = ({ tokens }) => {
-		const text = tokens.some((token) => token.type === "list") ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
+	renderer.listitem = ({ tokens, loose }) => {
+		const hasNestedList = tokens.some((token) => token.type === "list");
+		const text = loose || hasNestedList ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens);
 		return `<li${parseCssInJsToInlineCss(finalStyles.li) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.li)}"` : ""}>${text}</li>\n`;
 	};
 	renderer.list = ({ items, ordered, start }) => {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-email",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
   },
   "type": "module",
+  "types": "./dist/index.d.mts",
   "license": "MIT",
   "exports": {
     "import": {
@@ -38,14 +39,14 @@
     "conf": "^15.0.2",
     "css-tree": "3.2.1",
     "debounce": "^2.0.0",
-    "esbuild": "0.27.5",
+    "esbuild": "0.28.0",
     "glob": "^13.0.6",
     "jiti": "2.4.2",
     "log-symbols": "^7.0.0",
     "marked": "^15.0.12",
     "mime-types": "^3.0.0",
     "normalize-path": "^3.0.0",
-    "nypm": "0.6.5",
+    "nypm": "0.6.6",
     "ora": "^8.0.0",
     "prismjs": "^1.30.0",
     "prompts": "2.4.2",
@@ -60,12 +61,15 @@
     "@types/css-tree": "2.3.11",
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
+    "@types/shelljs": "0.10.0",
     "next": "16.2.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "shelljs": "0.10.0",
     "shlex": "3.0.0",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
+    "yalc": "1.0.0-pre.53",
     "@react-email/render": "2.0.7"
   },
   "scripts": {
@@ -73,6 +77,7 @@
     "build:watch": "tsdown --watch src",
     "clean": "rm -rf dist",
     "test": "vitest run",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   }

package/src/components/markdown/markdown.spec.tsx

@@ -153,6 +153,28 @@ console.log(\`Hello, $\{name}!\`);
     `);
   });
 
+  it('renders loose lists with paragraph continuations without crashing', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`- item1
+
+  paragraph continuation
+
+- item2`}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><ul>
+      <li><p>item1</p>
+      <p>paragraph continuation</p>
+      </li>
+      <li><p>item2</p>
+      </li>
+      </ul>
+      </div><!--/$-->"
+    `);
+  });
+
   it('renders nested lists in the correct format for browsers', async () => {
     const actualOutput = await render(
       <Markdown>

package/src/components/markdown/markdown.tsx

@@ -118,11 +118,12 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
       }>${text}</a>`;
     };
 
-    renderer.listitem = ({ tokens }) => {
+    renderer.listitem = ({ tokens, loose }) => {
       const hasNestedList = tokens.some((token) => token.type === 'list');
-      const text = hasNestedList
-        ? renderer.parser.parse(tokens)
-        : renderer.parser.parseInline(tokens);
+      const text =
+        loose || hasNestedList
+          ? renderer.parser.parse(tokens)
+          : renderer.parser.parseInline(tokens);
 
       return `<li${
         parseCssInJsToInlineCss(finalStyles.li) !== ''

package/src/components/tailwind/e2e/integrations.spec.ts

@@ -19,8 +19,8 @@ const $ = (command: string, cwd: string = path.resolve(__dirname, '..')) => {
 
 describe('integrations', () => {
   beforeAll(() => {
-    const packageLocation = path.resolve(__dirname, '../');
-    $('yalc installations clean @react-email/tailwind', packageLocation);
+    const packageLocation = path.resolve(__dirname, '../../../..');
+    $('yalc installations clean react-email', packageLocation);
     $('yalc publish', packageLocation);
   });
 

package/src/components/tailwind/e2e/nextjs/emails/vercel-invite-user.tsx

@@ -12,9 +12,9 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
-} from '@react-email/components';
-import { Tailwind } from '@react-email/tailwind';
+} from 'react-email';
 
 interface VercelInviteUserEmailProps {
   username?: string;

package/src/components/tailwind/e2e/nextjs/next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compress: false,
-  swcMinify: false,
 };
 
 export default nextConfig;

package/src/components/tailwind/e2e/nextjs/package.json

@@ -6,11 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "preinstall": "yalc add @react-email/tailwind"
+    "preinstall": "yalc add react-email"
   },
   "dependencies": {
-    "@react-email/components": "0.0.36",
-    "@react-email/tailwind": "file:.yalc/@react-email/tailwind",
+    "react-email": "file:.yalc/react-email",
     "next": "^15",
     "react": "^19",
     "react-dom": "^19"

package/src/components/tailwind/e2e/nextjs/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-email/components';
+import { render } from 'react-email';
 import { VercelInviteUserEmail } from '../../emails/vercel-invite-user';
 
 export default async function Home() {

package/src/components/tailwind/e2e/vite/emails/vercel-invite-user.tsx

@@ -12,9 +12,9 @@ import {
   Preview,
   Row,
   Section,
+  Tailwind,
   Text,
-} from '@react-email/components';
-import { Tailwind } from '@react-email/tailwind';
+} from 'react-email';
 
 interface VercelInviteUserEmailProps {
   username?: string;

package/src/components/tailwind/e2e/vite/package.json

@@ -6,12 +6,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preinstall": "yalc add @react-email/tailwind",
+    "preinstall": "yalc add react-email",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-email/components": "0.0.36",
-    "@react-email/tailwind": "file:.yalc/@react-email/tailwind",
+    "react-email": "file:.yalc/react-email",
     "react": "^19",
     "react-dom": "^19"
   },

package/src/components/tailwind/e2e/vite/src/App.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-email/components';
+import { render } from 'react-email';
 import { VercelInviteUserEmail } from '../emails/vercel-invite-user';
 
 function App() {

package/vitest.e2e.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    include: ['**/e2e/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    exclude: ['**/node_modules/**'],
+  },
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        jsx: 'react-jsx',
+      },
+    },
+  },
+});