feat(render): Add render-slim package

packages/render-slim/CHANGELOG.md

@@ -0,0 +1,133 @@
+# @react-email/render
+
+## 1.0.5
+
+### Patch Changes
+
+- caa49b3: Fix extra `<` characters being kept when rendering if mso comments under certain conditions
+- 337ac4e: Fix pretty option breaking button components
+- b44c937: Fix unstable rendering when prettifying with the Preview component
+
+## 1.0.5-canary.1
+
+### Patch Changes
+
+- dfc49b5: Fix extra `<` characters being kept when rendering if mso comments under certain conditions
+- 301f54b: Fix unstable rendering when prettifying with the Preview component
+
+## 1.0.5-canary.0
+
+### Patch Changes
+
+- ed2fa33: Fix pretty option breaking button components
+
+## 1.0.4
+
+### Patch Changes
+
+- 1ff196a: Update prettier dependency.
+
+## 1.0.3
+
+### Patch Changes
+
+- 467af4e: Use peerDependencies for react and react-dom
+- b34aa90: Move react and react-dom to just dependencies for better DX
+- da3e719: Use prettier's stadalone API instead of js-beautify
+- fd3b9de: Remove uncessary destructuring of react-dom/server
+
+## 1.0.3-canary.3
+
+### Patch Changes
+
+- 467af4e: Use peerDependencies for react and react-dom
+
+## 1.0.3-canary.2
+
+### Patch Changes
+
+- 2ebf17f: Use prettier's stadalone API instead of js-beautify
+
+## 1.0.3-canary.1
+
+### Patch Changes
+
+- 0f32e50: Remove uncessary destructuring of react-dom/server
+
+## 1.0.3-canary.0
+
+### Patch Changes
+
+- f7833da: Move react and react-dom to just dependencies for better DX
+
+## 1.0.2
+
+### Patch Changes
+
+- 4627675: Fix null characters in between chunks when using high-density characters
+
+## 1.0.2-canary.0
+
+### Patch Changes
+
+- 0fab161: Fix null characters in between chunks when using high-density characters
+
+## 1.0.1
+
+### Patch Changes
+
+- 7481b12: Add a wrapping Suspense to all email templates before rendering
+
+## 1.0.0
+
+### Major Changes
+
+- f9483ec: Deprecated `renderAsync` and made `render` itself always async
+
+  ## Why
+
+  Three reasons:
+
+  1. Better support of NextJS's latest versions
+  2. Being ready for future React API deprecations
+  3. Support for Suspense which allows for using async inside components
+
+  See https://github.com/resend/react-email/discussions/1144 for more info.
+
+  ## How to upgrade
+
+  If you are using the old `render`, you will need to now treat the Promise
+  that comes out of it, as it is now async. If you are using `renderAsync`,
+  you can replace it with `render` and things should work the same.
+
+### Patch Changes
+
+- 3caaf53: Updated peer dependencies to allow for React 19 release candidated and React 19 itself
+
+## 1.0.0-canary.1
+
+### Major Changes
+
+- 3f67038: Deprecated `renderAsync` and made `render` itself always async
+
+  ## Why
+
+  Three reasons:
+
+  1. Better support of NextJS's latest versions
+  2. Being ready for future React API deprecations
+  3. Support for Suspense which allows for using async inside components
+
+  See https://github.com/resend/react-email/discussions/1144 for more info.
+
+  ## How to upgrade
+
+  If you are using the old `render`, you will need to now treat the Promise
+  that comes out of it, as it is now async. If you are using `renderAsync`,
+  you can replace it with `render` and things should work the same.
+
+## 0.0.18-canary.0
+
+### Patch Changes
+
+- a1c016b: Updated peer dependencies to allow for React 19 release candidated and React 19 itself

packages/render-slim/license.md

@@ -0,0 +1,7 @@
+Copyright 2024 Plus Five Five, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/render-slim/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@react-email/render",
+  "version": "1.0.5",
+  "description": "Transform React components into HTML email templates",
+  "sideEffects": false,
+  "main": "./dist/browser/index.js",
+  "module": "./dist/browser/index.mjs",
+  "types": "./dist/browser/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    ".": {
+      "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"
+        }
+      },
+      "deno": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.mjs"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.ts",
+          "default": "./dist/browser/index.js"
+        }
+      },
+      "worker": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.mjs"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.ts",
+          "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"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.mjs"
+        },
+        "require": {
+          "types": "./dist/node/index.d.ts",
+          "default": "./dist/node/index.js"
+        }
+      }
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup-node",
+    "clean": "rm -rf dist",
+    "dev": "tsup-node --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/resend/react-email.git",
+    "directory": "packages/render"
+  },
+  "keywords": [
+    "react",
+    "email"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "html-to-text": "9.0.5",
+    "react-promise-suspense": "0.3.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "devDependencies": {
+    "@edge-runtime/vm": "3.1.8",
+    "@types/html-to-text": "9.0.4",
+    "@types/prettier": "3.0.0",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
+    "jsdom": "23.0.1",
+    "tsconfig": "workspace:*",
+    "tsup": "7.2.0",
+    "typescript": "5.1.6",
+    "vitest": "1.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/render-slim/readme.md

@@ -0,0 +1,43 @@
+![React Email button cover](https://react.email/static/covers/render.png)
+
+<div align="center"><strong>@react-email/render-slim</strong></div>
+<div align="center">Transform React components into HTML email templates.</div>
+<br />
+<div align="center">
+<a href="https://react.email">Website</a> 
+<span> · </span>
+<a href="https://github.com/resend/react-email">GitHub</a> 
+<span> · </span>
+<a href="https://react.email/discord">Discord</a>
+</div>
+
+## Install
+
+Install component from your command line.
+
+#### With yarn
+
+```sh
+yarn add @react-email/render-slim -E
+```
+
+#### With npm
+
+```sh
+npm install @react-email/render-slim -E
+```
+
+## Getting started
+
+Convert React components into a HTML string.
+
+```jsx
+import { MyTemplate } from "../components/MyTemplate";
+import { render } from "@react-email/render-slim";
+
+const html = await render(<MyTemplate firstName="Jim" />);
+```
+
+## License
+
+MIT License

packages/render-slim/src/browser/__snapshots__/render-async-web.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renderAsync on the browser environment > 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><!--/$-->"`;

packages/render-slim/src/browser/__snapshots__/render-web.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`render on the browser environment > 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><!--/$-->"`;

packages/render-slim/src/browser/index.ts

@@ -0,0 +1,5 @@
+export * from './render';
+export * from './render-async';
+
+export * from '../shared/options';
+export * from '../shared/plain-text-selectors';

packages/render-slim/src/browser/read-stream.ts

@@ -0,0 +1,44 @@
+import type {
+  PipeableStream,
+  ReactDOMServerReadableStream,
+} from 'react-dom/server.browser';
+
+const decoder = new TextDecoder('utf-8');
+
+export 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);
+};