Merge branch 'main' into feat/vs-code-preview-ext

gabrielmfern · gabrielmfern · commit 50b191444ef2 · 2023-11-01T13:15:46.000-03:00
diff --git a/client/package.json b/client/package.json
@@ -24,7 +24,7 @@
     "@react-email/render": "0.0.7",
     "classnames": "2.3.2",
     "framer-motion": "8.5.5",
-    "next": "13.4.10",
+    "next": "13.5.0",
     "prism-react-renderer": "1.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/docs/changelog.mdx b/docs/changelog.mdx
@@ -3,9 +3,19 @@ title: "Changelog"
 sidebarTitle: "Changelog"
 description: "New features, bug fixes, and improvements made to each package."
 "og:image": "https://react.email/static/covers/react-email.png"
-icon: 'list-check'
+icon: "list-check"
 ---
 
+## Nov 01, 2023
+
+**Components `0.0.11`**
+
+- Upgrade `@react-email/render` to `v0.0.9`
+
+**Render `0.0.9`**
+
+- Fix `renderAsync` function to support Next.js 14
+
 ## April 05. 2023
 
 **Button `0.0.8`**
diff --git a/examples/resend/package.json b/examples/resend/package.json
@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "13.4.4",
+    "next": "13.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "resend": "0.15.1"
diff --git a/examples/scaleway/next/package.json b/examples/scaleway/next/package.json
@@ -13,7 +13,7 @@
     "@react-email/components": "0.0.4",
     "@react-email/render": "0.0.6",
     "@scaleway/sdk": "1.5.0",
-    "next": "13.2.3",
+    "next": "13.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/components",
-  "version": "0.0.7",
+  "version": "0.0.11",
   "description": "All react-email components",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -41,23 +41,23 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@react-email/body": "0.0.2",
-    "@react-email/button": "0.0.9",
-    "@react-email/column": "0.0.7",
-    "@react-email/container": "0.0.8",
-    "@react-email/font": "0.0.2",
-    "@react-email/head": "0.0.5",
-    "@react-email/heading": "0.0.8",
-    "@react-email/hr": "0.0.5",
-    "@react-email/html": "0.0.4",
-    "@react-email/img": "0.0.5",
-    "@react-email/link": "0.0.5",
-    "@react-email/preview": "0.0.6",
-    "@react-email/render": "0.0.7",
-    "@react-email/row": "0.0.5",
-    "@react-email/section": "0.0.9",
-    "@react-email/tailwind": "0.0.8",
-    "@react-email/text": "0.0.5"
+    "@react-email/body": "0.0.4",
+    "@react-email/button": "0.0.11",
+    "@react-email/column": "0.0.8",
+    "@react-email/container": "0.0.10",
+    "@react-email/font": "0.0.4",
+    "@react-email/head": "0.0.6",
+    "@react-email/heading": "0.0.9",
+    "@react-email/hr": "0.0.6",
+    "@react-email/html": "0.0.6",
+    "@react-email/img": "0.0.6",
+    "@react-email/link": "0.0.6",
+    "@react-email/preview": "0.0.7",
+    "@react-email/render": "0.0.9",
+    "@react-email/row": "0.0.6",
+    "@react-email/section": "0.0.10",
+    "@react-email/tailwind": "0.0.12",
+    "@react-email/text": "0.0.6"
   },
   "peerDependencies": {
     "react": "18.2.0"
diff --git a/packages/render/package.json b/packages/render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/render",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Transform React components into HTML email templates",
   "sideEffects": false,
   "main": "./dist/index.js",
diff --git a/packages/render/src/render-async.spec.tsx b/packages/render/src/render-async.spec.tsx
@@ -7,7 +7,7 @@ describe("renderAsync using renderToStaticMarkup", () => {
     const actualOutput = await renderAsync(<Template firstName="Jim" />);
 
     expect(actualOutput).toMatchInlineSnapshot(
-      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><h1>Welcome, Jim!</h1><img alt=\\"test\\" src=\\"img/test.png\\"/><p>Thanks for trying our product. We&#x27;re thrilled to have you on board!</p>"',
+      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><h1>Welcome, <!-- -->Jim<!-- -->!</h1><img alt=\\"test\\" src=\\"img/test.png\\"/><p>Thanks for trying our product. We&#x27;re thrilled to have you on board!</p>"',
     );
   });
 
@@ -39,7 +39,7 @@ describe("renderAsync using renderToReadableStream", () => {
     const actualOutput = await renderAsync(<Template firstName="Jim" />);
 
     expect(actualOutput).toMatchInlineSnapshot(
-      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><h1>Welcome, Jim!</h1><img alt=\\"test\\" src=\\"img/test.png\\"/><p>Thanks for trying our product. We&#x27;re thrilled to have you on board!</p>"',
+      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><h1>Welcome, <!-- -->Jim<!-- -->!</h1><img alt=\\"test\\" src=\\"img/test.png\\"/><p>Thanks for trying our product. We&#x27;re thrilled to have you on board!</p>"',
     );
   });
 
diff --git a/packages/render/src/render-async.ts b/packages/render/src/render-async.ts
@@ -1,48 +1,26 @@
-import { type ReadableStream } from "node:stream/web";
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { convert } from "html-to-text";
 import pretty from "pretty";
-import { type ReactNode } from "react";
-import react from "react-dom/server";
-
-const { renderToStaticMarkup } = react;
-
-// Note: only available in platforms that support WebStreams
-// https://react.dev/reference/react-dom/server/renderToString#alternatives
-const renderToStream =
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  react.renderToReadableStream || react.renderToPipeableStream;
-
-export default async function renderToString(children: ReactNode) {
-  const stream = await renderToStream(children);
-
-  const html = await readableStreamToString(
-    // ReactDOMServerReadableStream behaves like ReadableStream
-    // in modern edge runtimes but the types are not compatible
-    stream as unknown as ReadableStream<Uint8Array>,
-  );
-
-  return (
-    html
-      // Remove leading doctype becuase we add it manually
-      .replace(/^<!DOCTYPE html>/, "")
-      // Remove empty comments to match the output of renderToStaticMarkup
-      .replace(/<!-- -->/g, "")
-  );
-}
-
-async function readableStreamToString(
-  readableStream: ReadableStream<Uint8Array>,
-) {
-  let result = "";
-
-  const decoder = new TextDecoder();
-
-  for await (const chunk of readableStream) {
-    result += decoder.decode(chunk);
+import type { ReactDOMServerReadableStream } from "react-dom/server";
+
+const readStream = async (readableStream: ReactDOMServerReadableStream) => {
+  const reader = readableStream.getReader();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const chunks: any[] = [];
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, no-constant-condition
+  while (true) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, no-await-in-loop
+    const { value, done } = await reader.read();
+    if (done) {
+      break;
+    }
+    chunks.push(value);
   }
 
-  return result;
-}
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  return chunks.map((chunk) => new TextDecoder("utf-8").decode(chunk)).join("");
+};
 
 export const renderAsync = async (
   component: React.ReactElement,
@@ -51,24 +29,31 @@ export const renderAsync = async (
     plainText?: boolean;
   },
 ) => {
-  const markup =
-    typeof renderToStaticMarkup === "undefined"
-      ? await renderToString(component)
-      : renderToStaticMarkup(component);
+  const reactDOMServer = (await import("react-dom/server")).default;
+  const renderToStream =
+    reactDOMServer.renderToReadableStream ||
+    reactDOMServer.renderToString ||
+    reactDOMServer.renderToPipeableStream;
+
+  const doctype =
+    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
+
+  const readableStream = await renderToStream(component);
+  const html =
+    typeof readableStream === "string"
+      ? readableStream
+      : await readStream(readableStream);
 
   if (options?.plainText) {
-    return convert(markup, {
+    return convert(html, {
       selectors: [
         { selector: "img", format: "skip" },
         { selector: "#__react-email-preview", format: "skip" },
       ],
     });
   }
 
-  const doctype =
-    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-
-  const document = `${doctype}${markup}`;
+  const document = `${doctype}${html}`;
 
   if (options?.pretty) {
     return pretty(document);
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-email/tailwind",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A React component to wrap emails with Tailwind CSS",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -46,7 +46,7 @@
   "dependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tw-to-css": "0.0.11"
+    "tw-to-css": "0.0.12"
   },
   "peerDependencies": {
     "react": "18.2.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@react-email/render",`
`3`		`- "version": "0.0.8",`
	`3`	`+ "version": "0.0.9",`
`4`	`4`	`"description": "Transform React components into HTML email templates",`
`5`	`5`	`"sideEffects": false,`
`6`	`6`	`"main": "./dist/index.js",`