Replies: 2 comments 2 replies
-
|
Nice idea! The problem is getting the compatibility with types, I'll have to take a deeper look on that. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! Let me know if theres any way I can help. The nice thing about preact is that the types are exported directly and work a lot nicer than React in non-node envs like Deno and Bun. |
Beta Was this translation helpful? Give feedback.
-
|
were you able to run react-email with preact? |
Beta Was this translation helpful? Give feedback.
-
|
I was able to make it work, I had to change the '@react-email/render' function to not use the readStream, but to transform to string using preact's renderToString directly: import { convert } from "html-to-text";
import { Suspense, React } from "preact/compat";
import { pretty } from "../shared/utils/pretty";
import { plainTextSelectors } from "../shared/plain-text-selectors";
import type { Options } from "../shared/options";
import { readStream } from "./read-stream";
export const render = async (
element: React.ReactElement,
options?: Options,
) => {
const suspendedElement = <Suspense>{element}</Suspense>;
const reactDOMServer = await import("preact/compat/server");
let html!: string;
if (Object.hasOwn(reactDOMServer, "renderToString")) {
html = await reactDOMServer.renderToString(suspendedElement);
} else 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;
};And that's it! It works very well and very fast. I actually think this could be a good improvement, as for emails you don't need any special React features. |
Beta Was this translation helpful? Give feedback.
-
Goals
Background
This might already work, I need to dig in more but using react-emails with preact would be amazing.
Currently my team uses react-emails with Deno and its notoriously hard to work with types from React.
We are adding a "pragma"
// @deno-types="npm:@types/react"at the start of every file.If you use preact (usually a drop in replacement) they actually export the types properly and all the silliness goes away.
Proposal
Document an example usage with preact and its limitations.
Im sure 100% of features may not work and I also think thats ok!
Considering these render to static HTML and not async, suspenseful, Next-js style web apps I would be very happy to have some features just not work.
Beta Was this translation helpful? Give feedback.
All reactions