feat(render): edge & cf worker support

Author: MendyLanda

packages/render/src/browser/index.ts

@@ -1,5 +1,6 @@
-import type { Options } from '../shared/options';
-import { render } from './render';
+import type { Options } from "../shared/options";
+import "../shared/utils/edge-polyfill";
+import { render } from "./render";
 
 /**
  * @deprecated use {@link render}
@@ -8,7 +9,7 @@ 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';
+export * from "../shared/options";
+export * from "../shared/plain-text-selectors";
+export * from "../shared/utils/pretty";
+export * from "./render";

packages/render/src/node/index.ts

@@ -1,5 +1,6 @@
-import type { Options } from '../shared/options';
-import { render } from './render';
+import type { Options } from "../shared/options";
+import "../shared/utils/edge-polyfill";
+import { render } from "./render";
 
 /**
  * @deprecated use {@link render}
@@ -8,7 +9,7 @@ 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';
+export * from "../shared/options";
+export * from "../shared/plain-text-selectors";
+export * from "../shared/utils/pretty";
+export * from "./render";

packages/render/src/shared/utils/edge-polyfill.ts

@@ -0,0 +1,37 @@
+/**
+ * MessageChannel is not supported in Edge, but it's not needed to successfully render.
+ * This polyfill is used to avoid errors when importing the package in an vercel edge and cf worker runtimes.
+ *
+ * @see https://github.com/resend/react-email/issues/1630#issuecomment-2773421899
+ *
+ * We can remove this once MessageChannel is supported on all runtimes.
+ */
+
+if (typeof MessageChannel === "undefined") {
+  class MockMessagePort {
+    onmessage: ((ev: MessageEvent) => void) | undefined;
+    onmessageerror: ((ev: MessageEvent) => void) | undefined;
+
+    close() {}
+    postMessage(_message: unknown, _transfer: Transferable[] = []) {}
+    start() {}
+    addEventListener() {}
+    removeEventListener() {}
+    dispatchEvent(_event: Event): boolean {
+      return false;
+    }
+  }
+
+  class MockMessageChannel {
+    port1: MockMessagePort;
+    port2: MockMessagePort;
+
+    constructor() {
+      this.port1 = new MockMessagePort();
+      this.port2 = new MockMessagePort();
+    }
+  }
+
+  globalThis.MessageChannel =
+    MockMessageChannel as unknown as typeof MessageChannel;
+}