@react-email/render 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +6 -1
- package/dist/index.js +45 -3
- package/dist/index.mjs +43 -2
- package/package.json +5 -6
- package/readme.md +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -4,4 +4,9 @@ interface Options {
|
|
|
4
4
|
}
|
|
5
5
|
declare const render: (component: React.ReactElement, options?: Options) => string;
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
declare const renderAsync: (component: React.ReactElement, options?: {
|
|
8
|
+
pretty?: boolean;
|
|
9
|
+
plainText?: boolean;
|
|
10
|
+
}) => Promise<string>;
|
|
11
|
+
|
|
12
|
+
export { Options, render, renderAsync };
|
package/dist/index.js
CHANGED
|
@@ -26,7 +26,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
26
26
|
// src/index.ts
|
|
27
27
|
var src_exports = {};
|
|
28
28
|
__export(src_exports, {
|
|
29
|
-
render: () => render
|
|
29
|
+
render: () => render,
|
|
30
|
+
renderAsync: () => renderAsync
|
|
30
31
|
});
|
|
31
32
|
module.exports = __toCommonJS(src_exports);
|
|
32
33
|
|
|
@@ -48,10 +49,51 @@ var render = (component, options) => {
|
|
|
48
49
|
};
|
|
49
50
|
var renderAsPlainText = (component, _options) => {
|
|
50
51
|
return (0, import_html_to_text.convert)(ReactDomServer.renderToStaticMarkup(component), {
|
|
51
|
-
selectors: [
|
|
52
|
+
selectors: [
|
|
53
|
+
{ selector: "img", format: "skip" },
|
|
54
|
+
{ selector: "#__react-email-preview", format: "skip" }
|
|
55
|
+
]
|
|
52
56
|
});
|
|
53
57
|
};
|
|
58
|
+
|
|
59
|
+
// src/renderAsync.ts
|
|
60
|
+
var import_html_to_text2 = require("html-to-text");
|
|
61
|
+
var import_pretty2 = __toESM(require("pretty"));
|
|
62
|
+
var import_server = require("react-dom/server");
|
|
63
|
+
async function renderToString(children) {
|
|
64
|
+
const stream = await (0, import_server.renderToReadableStream)(children);
|
|
65
|
+
const html = await readableStreamToString(
|
|
66
|
+
stream
|
|
67
|
+
);
|
|
68
|
+
return html.replace(/^<!DOCTYPE html>/, "").replace(/<!-- -->/g, "");
|
|
69
|
+
}
|
|
70
|
+
async function readableStreamToString(readableStream) {
|
|
71
|
+
let result = "";
|
|
72
|
+
const decoder = new TextDecoder();
|
|
73
|
+
for await (const chunk of readableStream) {
|
|
74
|
+
result += decoder.decode(chunk);
|
|
75
|
+
}
|
|
76
|
+
return result;
|
|
77
|
+
}
|
|
78
|
+
var renderAsync = async (component, options) => {
|
|
79
|
+
const markup = typeof import_server.renderToStaticMarkup === "undefined" ? await renderToString(component) : (0, import_server.renderToStaticMarkup)(component);
|
|
80
|
+
if (options == null ? void 0 : options.plainText) {
|
|
81
|
+
return (0, import_html_to_text2.convert)(markup, {
|
|
82
|
+
selectors: [
|
|
83
|
+
{ selector: "img", format: "skip" },
|
|
84
|
+
{ selector: "#__react-email-preview", format: "skip" }
|
|
85
|
+
]
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
89
|
+
const document = `${doctype}${markup}`;
|
|
90
|
+
if (options == null ? void 0 : options.pretty) {
|
|
91
|
+
return (0, import_pretty2.default)(document);
|
|
92
|
+
}
|
|
93
|
+
return document;
|
|
94
|
+
};
|
|
54
95
|
// Annotate the CommonJS export names for ESM import in node:
|
|
55
96
|
0 && (module.exports = {
|
|
56
|
-
render
|
|
97
|
+
render,
|
|
98
|
+
renderAsync
|
|
57
99
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -16,9 +16,50 @@ var render = (component, options) => {
|
|
|
16
16
|
};
|
|
17
17
|
var renderAsPlainText = (component, _options) => {
|
|
18
18
|
return convert(ReactDomServer.renderToStaticMarkup(component), {
|
|
19
|
-
selectors: [
|
|
19
|
+
selectors: [
|
|
20
|
+
{ selector: "img", format: "skip" },
|
|
21
|
+
{ selector: "#__react-email-preview", format: "skip" }
|
|
22
|
+
]
|
|
20
23
|
});
|
|
21
24
|
};
|
|
25
|
+
|
|
26
|
+
// src/renderAsync.ts
|
|
27
|
+
import { convert as convert2 } from "html-to-text";
|
|
28
|
+
import pretty2 from "pretty";
|
|
29
|
+
import { renderToReadableStream, renderToStaticMarkup as renderToStaticMarkup2 } from "react-dom/server";
|
|
30
|
+
async function renderToString(children) {
|
|
31
|
+
const stream = await renderToReadableStream(children);
|
|
32
|
+
const html = await readableStreamToString(
|
|
33
|
+
stream
|
|
34
|
+
);
|
|
35
|
+
return html.replace(/^<!DOCTYPE html>/, "").replace(/<!-- -->/g, "");
|
|
36
|
+
}
|
|
37
|
+
async function readableStreamToString(readableStream) {
|
|
38
|
+
let result = "";
|
|
39
|
+
const decoder = new TextDecoder();
|
|
40
|
+
for await (const chunk of readableStream) {
|
|
41
|
+
result += decoder.decode(chunk);
|
|
42
|
+
}
|
|
43
|
+
return result;
|
|
44
|
+
}
|
|
45
|
+
var renderAsync = async (component, options) => {
|
|
46
|
+
const markup = typeof renderToStaticMarkup2 === "undefined" ? await renderToString(component) : renderToStaticMarkup2(component);
|
|
47
|
+
if (options == null ? void 0 : options.plainText) {
|
|
48
|
+
return convert2(markup, {
|
|
49
|
+
selectors: [
|
|
50
|
+
{ selector: "img", format: "skip" },
|
|
51
|
+
{ selector: "#__react-email-preview", format: "skip" }
|
|
52
|
+
]
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
56
|
+
const document = `${doctype}${markup}`;
|
|
57
|
+
if (options == null ? void 0 : options.pretty) {
|
|
58
|
+
return pretty2(document);
|
|
59
|
+
}
|
|
60
|
+
return document;
|
|
61
|
+
};
|
|
22
62
|
export {
|
|
23
|
-
render
|
|
63
|
+
render,
|
|
64
|
+
renderAsync
|
|
24
65
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-email/render",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "Transform React components into HTML email templates",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"clean": "rm -rf dist",
|
|
18
18
|
"test": "jest",
|
|
19
19
|
"test:watch": "jest --watch",
|
|
20
|
-
"format:check": "prettier --
|
|
21
|
-
"format": "prettier --
|
|
20
|
+
"format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
|
|
21
|
+
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
@@ -41,16 +41,15 @@
|
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@babel/preset-react": "7.18.6",
|
|
43
43
|
"@types/html-to-text": "9.0.0",
|
|
44
|
-
"@types/jest": "
|
|
44
|
+
"@types/jest": "29.5.0",
|
|
45
45
|
"@types/pretty": "2.0.1",
|
|
46
46
|
"@types/react": "18.0.20",
|
|
47
47
|
"@types/react-dom": "18.0.6",
|
|
48
48
|
"babel-jest": "28.1.3",
|
|
49
49
|
"eslint": "8.23.1",
|
|
50
|
-
"eslint-config-custom": "*",
|
|
51
50
|
"jest": "28.1.3",
|
|
51
|
+
"prettier": "2.8.4",
|
|
52
52
|
"ts-jest": "28.0.8",
|
|
53
|
-
"tsconfig": "*",
|
|
54
53
|
"tsup": "6.2.3",
|
|
55
54
|
"typescript": "4.8.3"
|
|
56
55
|
},
|
package/readme.md
CHANGED
|
@@ -32,8 +32,8 @@ npm install @react-email/render -E
|
|
|
32
32
|
Convert React components into a HTML string.
|
|
33
33
|
|
|
34
34
|
```jsx
|
|
35
|
-
import { MyTemplate } from
|
|
36
|
-
import { render } from
|
|
35
|
+
import { MyTemplate } from "../components/MyTemplate";
|
|
36
|
+
import { render } from "@react-email/render";
|
|
37
37
|
|
|
38
38
|
const html = render(<MyTemplate firstName="Jim" />);
|
|
39
39
|
```
|