From 66ed3219b1307e652c41ccff6e4bb0a59d1d043d Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 10:36:54 -0300
Subject: [PATCH 01/13] feat(render): Use `react-dom/server.edge` in a new
 `edge-light` export

---
 packages/render/package.json                  |  10 ++
 packages/render/src/browser/render.tsx        |  45 +------
 packages/render/src/edge-light/index.ts       |  14 ++
 .../render/src/edge-light/render.spec.tsx     | 120 ++++++++++++++++++
 packages/render/src/edge-light/render.tsx     |  55 ++++++++
 packages/render/src/react-internals.d.ts      |   3 +
 .../read-stream.browser.ts}                   |   2 +-
 packages/render/tsup.config.ts                |   6 +
 8 files changed, 210 insertions(+), 45 deletions(-)
 create mode 100644 packages/render/src/edge-light/index.ts
 create mode 100644 packages/render/src/edge-light/render.spec.tsx
 create mode 100644 packages/render/src/edge-light/render.tsx
 rename packages/render/src/{browser/read-stream.ts => shared/read-stream.browser.ts} (93%)

diff --git a/packages/render/package.json b/packages/render/package.json
index ed821c9f6b..d460f2e808 100644
--- a/packages/render/package.json
+++ b/packages/render/package.json
@@ -51,6 +51,16 @@
           "default": "./dist/browser/index.js"
         }
       },
+      "edge-light": {
+        "import": {
+          "types": "./dist/edge-light/index.d.mts",
+          "default": "./dist/edge-light/index.mjs"
+        },
+        "require": {
+          "types": "./dist/edge-light/index.d.ts",
+          "default": "./dist/edge-light/index.js"
+        }
+      },
       "default": {
         "import": {
           "types": "./dist/node/index.d.mts",
diff --git a/packages/render/src/browser/render.tsx b/packages/render/src/browser/render.tsx
index 9beb4cb3df..d0e7b0ed3d 100644
--- a/packages/render/src/browser/render.tsx
+++ b/packages/render/src/browser/render.tsx
@@ -1,52 +1,9 @@
 import { convert } from 'html-to-text';
 import { Suspense } from 'react';
-import type {
-  PipeableStream,
-  ReactDOMServerReadableStream,
-} from 'react-dom/server';
 import { pretty } from '../node';
 import type { Options } from '../shared/options';
 import { plainTextSelectors } from '../shared/plain-text-selectors';
-
-const decoder = new TextDecoder('utf-8');
-
-const readStream = async (
-  stream: PipeableStream | ReactDOMServerReadableStream,
-) => {
-  const chunks: Uint8Array[] = [];
-
-  if ('pipeTo' in stream) {
-    // means it's a readable stream
-    const writableStream = new WritableStream({
-      write(chunk: Uint8Array) {
-        chunks.push(chunk);
-      },
-    });
-    await stream.pipeTo(writableStream);
-  } else {
-    throw new Error(
-      'For some reason, the Node version of `react-dom/server` has been imported instead of the browser one.',
-      {
-        cause: {
-          stream,
-        },
-      },
-    );
-  }
-
-  let length = 0;
-  chunks.forEach((item) => {
-    length += item.length;
-  });
-  const mergedChunks = new Uint8Array(length);
-  let offset = 0;
-  chunks.forEach((item) => {
-    mergedChunks.set(item, offset);
-    offset += item.length;
-  });
-
-  return decoder.decode(mergedChunks);
-};
+import { readStream } from '../shared/read-stream.browser';
 
 export const render = async (node: React.ReactNode, options?: Options) => {
   const suspendedElement = <Suspense>{node}</Suspense>;
diff --git a/packages/render/src/edge-light/index.ts b/packages/render/src/edge-light/index.ts
new file mode 100644
index 0000000000..3d930a1cf7
--- /dev/null
+++ b/packages/render/src/edge-light/index.ts
@@ -0,0 +1,14 @@
+import type { Options } from '../shared/options';
+import { render } from './render';
+
+/**
+ * @deprecated use {@link render}
+ */
+export const renderAsync = (element: React.ReactElement, options?: Options) => {
+  return render(element, options);
+};
+
+export * from '../shared/options';
+export * from '../shared/plain-text-selectors';
+export * from '../shared/utils/pretty';
+export * from './render';
diff --git a/packages/render/src/edge-light/render.spec.tsx b/packages/render/src/edge-light/render.spec.tsx
new file mode 100644
index 0000000000..a907d70114
--- /dev/null
+++ b/packages/render/src/edge-light/render.spec.tsx
@@ -0,0 +1,120 @@
+import { Preview } from '../shared/utils/preview';
+import { Template } from '../shared/utils/template';
+import { render } from './render';
+
+type Import = typeof import('react-dom/server') & {
+  default: typeof import('react-dom/server');
+};
+
+describe('render on the edge', () => {
+  beforeAll(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-extraneous-class
+    global.MessageChannel = class {
+      constructor() {
+        throw new Error('MessageChannel is not supported');
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+  });
+
+  it('converts a React component into HTML with Next 14 error stubs', async () => {
+    vi.mock('react-dom/server', async () => {
+      const ReactDOMServer = await vi.importActual<Import>('react-dom/server');
+      const ERROR_MESSAGE =
+        'Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.';
+
+      return {
+        ...ReactDOMServer,
+        default: {
+          ...ReactDOMServer.default,
+          renderToString() {
+            throw new Error(ERROR_MESSAGE);
+          },
+          renderToStaticMarkup() {
+            throw new Error(ERROR_MESSAGE);
+          },
+        },
+        renderToString() {
+          throw new Error(ERROR_MESSAGE);
+        },
+        renderToStaticMarkup() {
+          throw new Error(ERROR_MESSAGE);
+        },
+      };
+    });
+
+    const actualOutput = await render(<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"><link rel="preload" as="image" href="img/test.png"/><!--$--><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><!--/$-->"`,
+    );
+
+    vi.resetAllMocks();
+  });
+
+  // This is a test to ensure we have no regressions for https://github.com/resend/react-email/issues/1667
+  it('should handle characters with a higher byte count gracefully in React 18', async () => {
+    const actualOutput = await render(
+      <>
+        <p>Test Normal 情報Ⅰコース担当者様</p>
+        <p>
+          平素よりお世話になっております。 情報Ⅰサポートチームです。
+          情報Ⅰ本講座につきまして仕様変更のためご連絡させていただきました。{' '}
+        </p>
+        今後ジクタス上の講座につきましては、8回分の授業をひとまとまりとしてパート分けされた状態で公開されてまいります。
+        <p>
+          伴いまして、画面上の表示に一部変更がありますのでお知らせいたします。
+          ご登録いただいた各生徒の受講ペースに応じて公開パートが増えてまいります。
+          具体的な表示イメージは下記ページをご確認ください。
+        </p>
+        <p>
+          2024年8月末時点で情報Ⅰ本講座を受講していたアカウントにつきましては、
+          今まで公開していた第１～９回までの講座一覧に加え、パート分けされた講座が追加で公開されてまりいます。
+          第1～9回の表示はそのまま引き継がれますが、Webドリルの進捗表示はパート分けの講座には適用されません。ご了承くださいませ。
+          仕様変更に伴い、現在教室長もしくは講師に生徒アカウントログインをお願いしておりますが、今後は生徒自身にてログインをしていただいて問題ございません。
+        </p>
+        <p>
+          また、生徒が自宅等にてログインし復習に取り組むことも問題ございませんので、教室にてご指示いただければと存じます。
+          （実際にご指示いただくかは教室判断に委ねさせていただきます。）
+        </p>
+        <p>
+          受講ペースが変更したり、増コマが発生したりする場合などは、公開ペースを本部にて調整いたしますので、下記より必ずご連絡くださいませ。
+          また本件に関して不明な点がございましたら、同フォームよりお問い合わせください。
+          以上、引き続きよろしくお願い申し上げます。 情報Ⅰサポートチーム
+        </p>
+      </>,
+    );
+
+    expect(actualOutput).toMatchSnapshot();
+  });
+
+  it('converts a React component into HTML', async () => {
+    const actualOutput = await render(<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"><link rel="preload" as="image" href="img/test.png"/><!--$--><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><!--/$-->"`,
+    );
+  });
+
+  it('converts a React component into PlainText', async () => {
+    const actualOutput = await render(<Template firstName="Jim" />, {
+      plainText: true,
+    });
+
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "WELCOME, JIM!
+
+      Thanks for trying our product. We're thrilled to have you on board!"
+    `);
+  });
+
+  it('converts to plain text and removes reserved ID', async () => {
+    const actualOutput = await render(<Preview />, {
+      plainText: true,
+    });
+
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"THIS SHOULD BE RENDERED IN PLAIN TEXT"`,
+    );
+  });
+});
diff --git a/packages/render/src/edge-light/render.tsx b/packages/render/src/edge-light/render.tsx
new file mode 100644
index 0000000000..42b953f5e1
--- /dev/null
+++ b/packages/render/src/edge-light/render.tsx
@@ -0,0 +1,55 @@
+import { convert } from 'html-to-text';
+import { Suspense } from 'react';
+import { pretty } from '../node';
+import type { Options } from '../shared/options';
+import { plainTextSelectors } from '../shared/plain-text-selectors';
+import { readStream } from '../shared/read-stream.browser';
+
+export const render = async (
+  element: React.ReactElement,
+  options?: Options,
+) => {
+  const suspendedElement = <Suspense>{element}</Suspense>;
+  const reactDOMServer = await import('react-dom/server.edge');
+  await import('react-dom/server').then(
+    // This is beacuse react-dom/server is CJS
+    (m) => m.default,
+  );
+
+  let html!: string;
+  if (Object.hasOwn(reactDOMServer, 'renderToReadableStream')) {
+    html = await readStream(
+      await reactDOMServer.renderToReadableStream(suspendedElement),
+    );
+  } else {
+    await new Promise<void>((resolve, reject) => {
+      const stream = reactDOMServer.renderToPipeableStream(suspendedElement, {
+        async onAllReady() {
+          html = await readStream(stream);
+          resolve();
+        },
+        onError(error) {
+          reject(error as Error);
+        },
+      });
+    });
+  }
+
+  if (options?.plainText) {
+    return convert(html, {
+      selectors: plainTextSelectors,
+      ...options.htmlToTextOptions,
+    });
+  }
+
+  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}${html.replace(/<!DOCTYPE.*?>/, '')}`;
+
+  if (options?.pretty) {
+    return pretty(document);
+  }
+
+  return document;
+};
diff --git a/packages/render/src/react-internals.d.ts b/packages/render/src/react-internals.d.ts
index d15d3ded51..0f0855a206 100644
--- a/packages/render/src/react-internals.d.ts
+++ b/packages/render/src/react-internals.d.ts
@@ -1,3 +1,6 @@
 declare module "react-dom/server.browser" {
   export * from "react-dom/server";
 }
+declare module "react-dom/server.edge" {
+  export * from "react-dom/server";
+}
diff --git a/packages/render/src/browser/read-stream.ts b/packages/render/src/shared/read-stream.browser.ts
similarity index 93%
rename from packages/render/src/browser/read-stream.ts
rename to packages/render/src/shared/read-stream.browser.ts
index 20a84c4fed..7ec415ae55 100644
--- a/packages/render/src/browser/read-stream.ts
+++ b/packages/render/src/shared/read-stream.browser.ts
@@ -20,7 +20,7 @@ export const readStream = async (
     await stream.pipeTo(writableStream);
   } else {
     throw new Error(
-      'For some reason, the Node version of `react-dom/server` has been imported instead of the browser one.',
+      'For some reason, the Node version of `react-dom/server` has been imported and was read by a browser stream reading function.',
       {
         cause: {
           stream,
diff --git a/packages/render/tsup.config.ts b/packages/render/tsup.config.ts
index da400f8668..1ba6f86223 100644
--- a/packages/render/tsup.config.ts
+++ b/packages/render/tsup.config.ts
@@ -13,4 +13,10 @@ export default defineConfig([
     outDir: './dist/browser',
     format: ['cjs', 'esm'],
   },
+  {
+    dts: true,
+    entry: ['./src/edge-light/index.ts'],
+    outDir: './dist/edge-light',
+    format: ['cjs', 'esm'],
+  },
 ]);

From ab507bc32eeb5cee91c9fe33c24792591b1286d6 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 10:43:34 -0300
Subject: [PATCH 02/13] update test

---
 .../render/src/edge-light/render.spec.tsx     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/render/src/edge-light/render.spec.tsx b/packages/render/src/edge-light/render.spec.tsx
index a907d70114..f1507b2d98 100644
--- a/packages/render/src/edge-light/render.spec.tsx
+++ b/packages/render/src/edge-light/render.spec.tsx
@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
 import { render } from './render';
@@ -8,25 +12,29 @@ type Import = typeof import('react-dom/server') & {
 
 describe('render on the edge', () => {
   beforeAll(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-extraneous-class
     global.MessageChannel = class {
       constructor() {
         throw new Error('MessageChannel is not supported');
       }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any;
   });
 
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
   it('converts a React component into HTML with Next 14 error stubs', async () => {
-    vi.mock('react-dom/server', async () => {
-      const ReactDOMServer = await vi.importActual<Import>('react-dom/server');
+    vi.mock('react-dom/server', async (_importOriginal) => {
+      const ReactDOMServerBrowser = await vi.importActual<Import>(
+        'react-dom/server.browser',
+      );
       const ERROR_MESSAGE =
         'Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.';
 
       return {
-        ...ReactDOMServer,
+        ...ReactDOMServerBrowser,
         default: {
-          ...ReactDOMServer.default,
+          ...ReactDOMServerBrowser,
           renderToString() {
             throw new Error(ERROR_MESSAGE);
           },
@@ -48,12 +56,10 @@ describe('render on the edge', () => {
     expect(actualOutput).toMatchInlineSnapshot(
       `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><link rel="preload" as="image" href="img/test.png"/><!--$--><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><!--/$-->"`,
     );
-
-    vi.resetAllMocks();
   });
 
   // This is a test to ensure we have no regressions for https://github.com/resend/react-email/issues/1667
-  it('should handle characters with a higher byte count gracefully in React 18', async () => {
+  it('should handle characters with a higher byte count gracefully', async () => {
     const actualOutput = await render(
       <>
         <p>Test Normal 情報Ⅰコース担当者様</p>

From c155f651e48c2765c9b5b8c43fcf74558a423923 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 10:47:42 -0300
Subject: [PATCH 03/13] fix import

---
 packages/render/src/edge-light/render.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/render/src/edge-light/render.tsx b/packages/render/src/edge-light/render.tsx
index 42b953f5e1..8946459843 100644
--- a/packages/render/src/edge-light/render.tsx
+++ b/packages/render/src/edge-light/render.tsx
@@ -10,9 +10,7 @@ export const render = async (
   options?: Options,
 ) => {
   const suspendedElement = <Suspense>{element}</Suspense>;
-  const reactDOMServer = await import('react-dom/server.edge');
-  await import('react-dom/server').then(
-    // This is beacuse react-dom/server is CJS
+  const reactDOMServer = await import('react-dom/server.edge').then(
     (m) => m.default,
   );
 

From 8b7885a8209036aaaf49c63824a3346ac4453296 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 11:03:50 -0300
Subject: [PATCH 04/13] update snapshots

---
 .../render/src/edge-light/__snapshots__/render.spec.tsx.snap   | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/render/src/edge-light/__snapshots__/render.spec.tsx.snap

diff --git a/packages/render/src/edge-light/__snapshots__/render.spec.tsx.snap b/packages/render/src/edge-light/__snapshots__/render.spec.tsx.snap
new file mode 100644
index 0000000000..baa09f38a6
--- /dev/null
+++ b/packages/render/src/edge-light/__snapshots__/render.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`render on the edge > should handle characters with a higher byte count gracefully 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p>Test Normal 情報Ⅰコース担当者様</p><p>平素よりお世話になっております。 情報Ⅰサポートチームです。 情報Ⅰ本講座につきまして仕様変更のためご連絡させていただきました。<!-- --> </p>今後ジクタス上の講座につきましては、8回分の授業をひとまとまりとしてパート分けされた状態で公開されてまいります。<p>伴いまして、画面上の表示に一部変更がありますのでお知らせいたします。 ご登録いただいた各生徒の受講ペースに応じて公開パートが増えてまいります。 具体的な表示イメージは下記ページをご確認ください。</p><p>2024年8月末時点で情報Ⅰ本講座を受講していたアカウントにつきましては、 今まで公開していた第１～９回までの講座一覧に加え、パート分けされた講座が追加で公開されてまりいます。 第1～9回の表示はそのまま引き継がれますが、Webドリルの進捗表示はパート分けの講座には適用されません。ご了承くださいませ。 仕様変更に伴い、現在教室長もしくは講師に生徒アカウントログインをお願いしておりますが、今後は生徒自身にてログインをしていただいて問題ございません。</p><p>また、生徒が自宅等にてログインし復習に取り組むことも問題ございませんので、教室にてご指示いただければと存じます。 （実際にご指示いただくかは教室判断に委ねさせていただきます。）</p><p>受講ペースが変更したり、増コマが発生したりする場合などは、公開ペースを本部にて調整いたしますので、下記より必ずご連絡くださいませ。 また本件に関して不明な点がございましたら、同フォームよりお問い合わせください。 以上、引き続きよろしくお願い申し上げます。 情報Ⅰサポートチーム</p><!--/$-->"`;

From fce68b0178ae7c7dd43ff62272317febf1c213fc Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 11:06:56 -0300
Subject: [PATCH 05/13] update snaps

---
 .../__snapshots__/render-node.spec.tsx.snap   | 50 -------------------
 1 file changed, 50 deletions(-)

diff --git a/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap b/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap
index c97cf084a3..9e30fc764e 100644
--- a/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap
+++ b/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap
@@ -1,53 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`render on node environments > should handle characters with a higher byte count gracefully in React 18 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p>Test Normal 情報Ⅰコース担当者様</p><p>平素よりお世話になっております。 情報Ⅰサポートチームです。 情報Ⅰ本講座につきまして仕様変更のためご連絡させていただきました。<!-- --> </p>今後ジクタス上の講座につきましては、8回分の授業をひとまとまりとしてパート分けされた状態で公開されてまいります。<p>伴いまして、画面上の表示に一部変更がありますのでお知らせいたします。 ご登録いただいた各生徒の受講ペースに応じて公開パートが増えてまいります。 具体的な表示イメージは下記ページをご確認ください。</p><p>2024年8月末時点で情報Ⅰ本講座を受講していたアカウントにつきましては、 今まで公開していた第１～９回までの講座一覧に加え、パート分けされた講座が追加で公開されてまりいます。 第1～9回の表示はそのまま引き継がれますが、Webドリルの進捗表示はパート分けの講座には適用されません。ご了承くださいませ。 仕様変更に伴い、現在教室長もしくは講師に生徒アカウントログインをお願いしておりますが、今後は生徒自身にてログインをしていただいて問題ございません。</p><p>また、生徒が自宅等にてログインし復習に取り組むことも問題ございませんので、教室にてご指示いただければと存じます。 （実際にご指示いただくかは教室判断に委ねさせていただきます。）</p><p>受講ペースが変更したり、増コマが発生したりする場合などは、公開ペースを本部にて調整いたしますので、下記より必ずご連絡くださいませ。 また本件に関して不明な点がございましたら、同フォームよりお問い合わせください。 以上、引き続きよろしくお願い申し上げます。 情報Ⅰサポートチーム</p><!--/$-->"`;
-
-exports[`render on node environments > that it properly waits for Suepsense boundaries to resolve before resolving 1`] = `
-"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><!--$--><div><!doctype html>
-<html>
-<head>
-    <title>Example Domain</title>
-
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type="text/css">
-    body {
-        background-color: #f0f0f2;
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        
-    }
-    div {
-        width: 600px;
-        margin: 5em auto;
-        padding: 2em;
-        background-color: #fdfdff;
-        border-radius: 0.5em;
-        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
-    }
-    a:link, a:visited {
-        color: #38488f;
-        text-decoration: none;
-    }
-    @media (max-width: 700px) {
-        div {
-            margin: 0 auto;
-            width: auto;
-        }
-    }
-    </style>    
-</head>
-
-<body>
-<div>
-    <h1>Example Domain</h1>
-    <p>This domain is for use in illustrative examples in documents. You may use this
-    domain in literature without prior coordination or asking for permission.</p>
-    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
-</div>
-</body>
-</html>
-</div><!--/$--><!--/$-->"
-`;

From e8eed62421902ae2c0b1f96c289dc09deb4fb381 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 11:08:12 -0300
Subject: [PATCH 06/13] update anps

---
 .../__snapshots__/render-node.spec.tsx.snap   | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap b/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap
index 9e30fc764e..c97cf084a3 100644
--- a/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap
+++ b/packages/render/src/node/__snapshots__/render-node.spec.tsx.snap
@@ -1,3 +1,53 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`render on node environments > should handle characters with a higher byte count gracefully in React 18 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><p>Test Normal 情報Ⅰコース担当者様</p><p>平素よりお世話になっております。 情報Ⅰサポートチームです。 情報Ⅰ本講座につきまして仕様変更のためご連絡させていただきました。<!-- --> </p>今後ジクタス上の講座につきましては、8回分の授業をひとまとまりとしてパート分けされた状態で公開されてまいります。<p>伴いまして、画面上の表示に一部変更がありますのでお知らせいたします。 ご登録いただいた各生徒の受講ペースに応じて公開パートが増えてまいります。 具体的な表示イメージは下記ページをご確認ください。</p><p>2024年8月末時点で情報Ⅰ本講座を受講していたアカウントにつきましては、 今まで公開していた第１～９回までの講座一覧に加え、パート分けされた講座が追加で公開されてまりいます。 第1～9回の表示はそのまま引き継がれますが、Webドリルの進捗表示はパート分けの講座には適用されません。ご了承くださいませ。 仕様変更に伴い、現在教室長もしくは講師に生徒アカウントログインをお願いしておりますが、今後は生徒自身にてログインをしていただいて問題ございません。</p><p>また、生徒が自宅等にてログインし復習に取り組むことも問題ございませんので、教室にてご指示いただければと存じます。 （実際にご指示いただくかは教室判断に委ねさせていただきます。）</p><p>受講ペースが変更したり、増コマが発生したりする場合などは、公開ペースを本部にて調整いたしますので、下記より必ずご連絡くださいませ。 また本件に関して不明な点がございましたら、同フォームよりお問い合わせください。 以上、引き続きよろしくお願い申し上げます。 情報Ⅰサポートチーム</p><!--/$-->"`;
+
+exports[`render on node environments > that it properly waits for Suepsense boundaries to resolve before resolving 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><!--$--><div><!doctype html>
+<html>
+<head>
+    <title>Example Domain</title>
+
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        
+    }
+    div {
+        width: 600px;
+        margin: 5em auto;
+        padding: 2em;
+        background-color: #fdfdff;
+        border-radius: 0.5em;
+        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
+    }
+    a:link, a:visited {
+        color: #38488f;
+        text-decoration: none;
+    }
+    @media (max-width: 700px) {
+        div {
+            margin: 0 auto;
+            width: auto;
+        }
+    }
+    </style>    
+</head>
+
+<body>
+<div>
+    <h1>Example Domain</h1>
+    <p>This domain is for use in illustrative examples in documents. You may use this
+    domain in literature without prior coordination or asking for permission.</p>
+    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
+</div>
+</body>
+</html>
+</div><!--/$--><!--/$-->"
+`;

From b972a442d028dca06de3ff5dd51aaaac08cc370a Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 11:08:16 -0300
Subject: [PATCH 07/13] add comment

---
 packages/render/src/edge-light/render.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/render/src/edge-light/render.tsx b/packages/render/src/edge-light/render.tsx
index 8946459843..c6bff3f812 100644
--- a/packages/render/src/edge-light/render.tsx
+++ b/packages/render/src/edge-light/render.tsx
@@ -11,6 +11,7 @@ export const render = async (
 ) => {
   const suspendedElement = <Suspense>{element}</Suspense>;
   const reactDOMServer = await import('react-dom/server.edge').then(
+    // This is beacuse react-dom/server is CJS
     (m) => m.default,
   );
 

From bb0049a3668a81a58108bec2650b4a23d2f7cdd5 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Wed, 7 May 2025 11:20:53 -0300
Subject: [PATCH 08/13] fix order of edge-light export

---
 packages/render/package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/render/package.json b/packages/render/package.json
index d460f2e808..56a77551a9 100644
--- a/packages/render/package.json
+++ b/packages/render/package.json
@@ -41,16 +41,6 @@
           "default": "./dist/browser/index.js"
         }
       },
-      "browser": {
-        "import": {
-          "types": "./dist/browser/index.d.mts",
-          "default": "./dist/browser/index.mjs"
-        },
-        "require": {
-          "types": "./dist/browser/index.d.ts",
-          "default": "./dist/browser/index.js"
-        }
-      },
       "edge-light": {
         "import": {
           "types": "./dist/edge-light/index.d.mts",
@@ -61,6 +51,16 @@
           "default": "./dist/edge-light/index.js"
         }
       },
+      "browser": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.mjs"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.ts",
+          "default": "./dist/browser/index.js"
+        }
+      },
       "default": {
         "import": {
           "types": "./dist/node/index.d.mts",

From 4ec01d7bbf225b96d17702db9859392a1a1d0b59 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 2 Jun 2025 09:53:03 -0300
Subject: [PATCH 09/13] change edge-light to edge and use it on workerd as well

---
 packages/render/package.json                  | 20 ++++++++++++++-----
 .../__snapshots__/render.spec.tsx.snap        |  0
 .../render/src/{edge-light => edge}/index.ts  |  0
 .../src/{edge-light => edge}/render.spec.tsx  |  0
 .../src/{edge-light => edge}/render.tsx       |  0
 packages/render/tsup.config.ts                |  4 ++--
 6 files changed, 17 insertions(+), 7 deletions(-)
 rename packages/render/src/{edge-light => edge}/__snapshots__/render.spec.tsx.snap (100%)
 rename packages/render/src/{edge-light => edge}/index.ts (100%)
 rename packages/render/src/{edge-light => edge}/render.spec.tsx (100%)
 rename packages/render/src/{edge-light => edge}/render.tsx (100%)

diff --git a/packages/render/package.json b/packages/render/package.json
index 56a77551a9..edd082cf72 100644
--- a/packages/render/package.json
+++ b/packages/render/package.json
@@ -11,14 +11,14 @@
   ],
   "exports": {
     ".": {
-      "node": {
+      "workerd": {
         "import": {
-          "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.mjs"
+          "types": "./dist/edge/index.d.mts",
+          "default": "./dist/edge/index.mjs"
         },
         "require": {
-          "types": "./dist/node/index.d.ts",
-          "default": "./dist/node/index.js"
+          "types": "./dist/edge/index.d.ts",
+          "default": "./dist/edge/index.js"
         }
       },
       "deno": {
@@ -41,6 +41,16 @@
           "default": "./dist/browser/index.js"
         }
       },
+      "node": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.mjs"
+        },
+        "require": {
+          "types": "./dist/node/index.d.ts",
+          "default": "./dist/node/index.js"
+        }
+      },
       "edge-light": {
         "import": {
           "types": "./dist/edge-light/index.d.mts",
diff --git a/packages/render/src/edge-light/__snapshots__/render.spec.tsx.snap b/packages/render/src/edge/__snapshots__/render.spec.tsx.snap
similarity index 100%
rename from packages/render/src/edge-light/__snapshots__/render.spec.tsx.snap
rename to packages/render/src/edge/__snapshots__/render.spec.tsx.snap
diff --git a/packages/render/src/edge-light/index.ts b/packages/render/src/edge/index.ts
similarity index 100%
rename from packages/render/src/edge-light/index.ts
rename to packages/render/src/edge/index.ts
diff --git a/packages/render/src/edge-light/render.spec.tsx b/packages/render/src/edge/render.spec.tsx
similarity index 100%
rename from packages/render/src/edge-light/render.spec.tsx
rename to packages/render/src/edge/render.spec.tsx
diff --git a/packages/render/src/edge-light/render.tsx b/packages/render/src/edge/render.tsx
similarity index 100%
rename from packages/render/src/edge-light/render.tsx
rename to packages/render/src/edge/render.tsx
diff --git a/packages/render/tsup.config.ts b/packages/render/tsup.config.ts
index 1ba6f86223..e3246f3c1d 100644
--- a/packages/render/tsup.config.ts
+++ b/packages/render/tsup.config.ts
@@ -15,8 +15,8 @@ export default defineConfig([
   },
   {
     dts: true,
-    entry: ['./src/edge-light/index.ts'],
-    outDir: './dist/edge-light',
+    entry: ['./src/edge/index.ts'],
+    outDir: './dist/edge',
     format: ['cjs', 'esm'],
   },
 ]);

From 5f522b087efee7aae834b818c1fa07a3a97fce97 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 2 Jun 2025 10:06:31 -0300
Subject: [PATCH 10/13] fallback to default import when failing to import
 react-dom/server.edge

---
 packages/render/package.json                  | 10 ----------
 packages/render/src/edge/import-react-dom.tsx |  7 +++++++
 packages/render/src/edge/render.tsx           |  3 ++-
 3 files changed, 9 insertions(+), 11 deletions(-)
 create mode 100644 packages/render/src/edge/import-react-dom.tsx

diff --git a/packages/render/package.json b/packages/render/package.json
index edd082cf72..e4ac2b549d 100644
--- a/packages/render/package.json
+++ b/packages/render/package.json
@@ -51,16 +51,6 @@
           "default": "./dist/node/index.js"
         }
       },
-      "edge-light": {
-        "import": {
-          "types": "./dist/edge-light/index.d.mts",
-          "default": "./dist/edge-light/index.mjs"
-        },
-        "require": {
-          "types": "./dist/edge-light/index.d.ts",
-          "default": "./dist/edge-light/index.js"
-        }
-      },
       "browser": {
         "import": {
           "types": "./dist/browser/index.d.mts",
diff --git a/packages/render/src/edge/import-react-dom.tsx b/packages/render/src/edge/import-react-dom.tsx
new file mode 100644
index 0000000000..3002204a5e
--- /dev/null
+++ b/packages/render/src/edge/import-react-dom.tsx
@@ -0,0 +1,7 @@
+export const importReactDOM = async () => {
+  try {
+    return await import('react-dom/server.edge');
+  } catch (_exception) {
+    return await import('react-dom/server');
+  }
+}
diff --git a/packages/render/src/edge/render.tsx b/packages/render/src/edge/render.tsx
index c6bff3f812..23c11a048b 100644
--- a/packages/render/src/edge/render.tsx
+++ b/packages/render/src/edge/render.tsx
@@ -4,13 +4,14 @@ import { pretty } from '../node';
 import type { Options } from '../shared/options';
 import { plainTextSelectors } from '../shared/plain-text-selectors';
 import { readStream } from '../shared/read-stream.browser';
+import { importReactDOM } from './import-react-dom';
 
 export const render = async (
   element: React.ReactElement,
   options?: Options,
 ) => {
   const suspendedElement = <Suspense>{element}</Suspense>;
-  const reactDOMServer = await import('react-dom/server.edge').then(
+  const reactDOMServer = await importReactDOM().then(
     // This is beacuse react-dom/server is CJS
     (m) => m.default,
   );

From aaa3848feaf936d17135cc234425d6064d7aab48 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 2 Jun 2025 10:06:57 -0300
Subject: [PATCH 11/13] add edge-light back again

---
 packages/render/package.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/render/package.json b/packages/render/package.json
index e4ac2b549d..e82dd7346c 100644
--- a/packages/render/package.json
+++ b/packages/render/package.json
@@ -41,6 +41,16 @@
           "default": "./dist/browser/index.js"
         }
       },
+      "edge-light": {
+        "import": {
+          "types": "./dist/edge-light/index.d.mts",
+          "default": "./dist/edge-light/index.mjs"
+        },
+        "require": {
+          "types": "./dist/edge-light/index.d.ts",
+          "default": "./dist/edge-light/index.js"
+        }
+      },
       "node": {
         "import": {
           "types": "./dist/node/index.d.mts",

From 9b5ffee4c3b86f3b89343cc6a6e8e36e51536d85 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 2 Jun 2025 10:16:33 -0300
Subject: [PATCH 12/13] lint

---
 packages/render/src/edge/import-react-dom.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/render/src/edge/import-react-dom.tsx b/packages/render/src/edge/import-react-dom.tsx
index 3002204a5e..e6a84410d2 100644
--- a/packages/render/src/edge/import-react-dom.tsx
+++ b/packages/render/src/edge/import-react-dom.tsx
@@ -4,4 +4,4 @@ export const importReactDOM = async () => {
   } catch (_exception) {
     return await import('react-dom/server');
   }
-}
+};

From 72bfa8107d16da90bfaf63156d47bb280cc5d40e Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 2 Jun 2025 11:29:41 -0300
Subject: [PATCH 13/13] fix edge-light export

---
 packages/render/package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/render/package.json b/packages/render/package.json
index e82dd7346c..55eceef8cf 100644
--- a/packages/render/package.json
+++ b/packages/render/package.json
@@ -43,12 +43,12 @@
       },
       "edge-light": {
         "import": {
-          "types": "./dist/edge-light/index.d.mts",
-          "default": "./dist/edge-light/index.mjs"
+          "types": "./dist/edge/index.d.mts",
+          "default": "./dist/edge/index.mjs"
         },
         "require": {
-          "types": "./dist/edge-light/index.d.ts",
-          "default": "./dist/edge-light/index.js"
+          "types": "./dist/edge/index.d.ts",
+          "default": "./dist/edge/index.js"
         }
       },
       "node": {