Skip to content

Commit b8bb5ba

Browse files
eps1loneps1lon
committed
Publish experimental_renderToHTML
1 parent 3b6d41d commit b8bb5ba

File tree

6 files changed

+51
-29
lines changed

6 files changed

+51
-29
lines changed

‎packages/react-markup/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ npm install react react-markup
1111
## Usage
1212

1313
```js
14-
import { renderToHTML } from 'react-markup';
14+
import { experimental_renderToHTML as renderToHTML } from 'react-markup';
1515
import EmailTemplate from './my-email-template-component.js'
1616

1717
async function action(email, name) {

‎packages/react-markup/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
* @flow
88
*/
99

10-
export * from './src/ReactMarkupClient';
10+
export {renderToHTML as experimental_renderToHTML} from './src/ReactMarkupClient';

‎packages/react-markup/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"name": "react-markup",
33
"version": "19.0.0",
4-
"private": true,
54
"description": "React package generating embedded HTML markup such as e-mails using Server Components.",
65
"main": "index.js",
76
"repository": {

‎packages/react-markup/react-markup.react-server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
* @flow
88
*/
99

10-
export * from './src/ReactMarkupServer';
10+
export {renderToHTML as experimental_renderToHTML} from './src/ReactMarkupServer';

‎packages/react-markup/src/__tests__/ReactMarkupClient-test.js‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ if (!__EXPERIMENTAL__) {
4343
return <div>hello world</div>;
4444
}
4545

46-
const html = await ReactMarkup.renderToHTML(<Component />);
46+
const html = await ReactMarkup.experimental_renderToHTML(<Component />);
4747
expect(html).toBe('<div>hello world</div>');
4848
});
4949

@@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) {
5252
return <div>{'hello '.repeat(200)}world</div>;
5353
}
5454

55-
const html = await ReactMarkup.renderToHTML(
55+
const html = await ReactMarkup.experimental_renderToHTML(
5656
React.createElement(Component),
5757
);
5858
expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
5959
});
6060

6161
it('should prefix html tags with a doctype', async () => {
62-
const html = await ReactMarkup.renderToHTML(
62+
const html = await ReactMarkup.experimental_renderToHTML(
6363
<html>
6464
<body>hello</body>
6565
</html>,
@@ -76,8 +76,10 @@ if (!__EXPERIMENTAL__) {
7676
}
7777

7878
await expect(async () => {
79-
await ReactMarkup.renderToHTML(<Component />);
80-
}).rejects.toThrow();
79+
await ReactMarkup.experimental_renderToHTML(<Component />);
80+
}).rejects.toThrow(
81+
'Cannot use state or effect Hooks in renderToHTML because this component will never be hydrated.',
82+
);
8183
});
8284

8385
it('should error on refs passed to host components', async () => {
@@ -87,8 +89,10 @@ if (!__EXPERIMENTAL__) {
8789
}
8890

8991
await expect(async () => {
90-
await ReactMarkup.renderToHTML(<Component />);
91-
}).rejects.toThrow();
92+
await ReactMarkup.experimental_renderToHTML(<Component />);
93+
}).rejects.toThrow(
94+
'Cannot pass ref in renderToHTML because they will never be hydrated.',
95+
);
9296
});
9397

9498
it('should error on callbacks passed to event handlers', async () => {
@@ -100,8 +104,10 @@ if (!__EXPERIMENTAL__) {
100104
}
101105

102106
await expect(async () => {
103-
await ReactMarkup.renderToHTML(<Component />);
104-
}).rejects.toThrow();
107+
await ReactMarkup.experimental_renderToHTML(<Component />);
108+
}).rejects.toThrow(
109+
'Cannot pass event handlers (onClick) in renderToHTML because the HTML will never be hydrated so they can never get called.',
110+
);
105111
});
106112

107113
it('supports the useId Hook', async () => {
@@ -142,7 +148,7 @@ if (!__EXPERIMENTAL__) {
142148
);
143149
}
144150

145-
const html = await ReactMarkup.renderToHTML(<Component />);
151+
const html = await ReactMarkup.experimental_renderToHTML(<Component />);
146152
const container = document.createElement('div');
147153
container.innerHTML = html;
148154

@@ -176,7 +182,7 @@ if (!__EXPERIMENTAL__) {
176182
);
177183
}
178184

179-
const html = await ReactMarkup.renderToHTML(<Component />);
185+
const html = await ReactMarkup.experimental_renderToHTML(<Component />);
180186
expect(html).toBe('<div>01</div>');
181187
});
182188

@@ -199,7 +205,7 @@ if (!__EXPERIMENTAL__) {
199205
}
200206

201207
await expect(async () => {
202-
await ReactMarkup.renderToHTML(
208+
await ReactMarkup.experimental_renderToHTML(
203209
<div>
204210
<Foo />
205211
</div>,

‎packages/react-markup/src/__tests__/ReactMarkupServer-test.js‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ if (!__EXPERIMENTAL__) {
6464
return React.createElement('div', null, 'hello world');
6565
}
6666

67-
const html = await ReactMarkup.renderToHTML(
67+
const html = await ReactMarkup.experimental_renderToHTML(
6868
React.createElement(Component),
6969
);
7070
expect(html).toBe('<div>hello world</div>');
@@ -76,15 +76,14 @@ if (!__EXPERIMENTAL__) {
7676
return React.createElement('div', null, 'hello '.repeat(200) + 'world');
7777
}
7878

79-
const html = await ReactMarkup.renderToHTML(
79+
const html = await ReactMarkup.experimental_renderToHTML(
8080
React.createElement(Component),
8181
);
8282
expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
8383
});
8484

8585
it('should prefix html tags with a doctype', async () => {
86-
const html = await ReactMarkup.renderToHTML(
87-
// We can't use JSX because that's client-JSX in our tests.
86+
const html = await ReactMarkup.experimental_renderToHTML(
8887
React.createElement(
8988
'html',
9089
null,
@@ -104,8 +103,10 @@ if (!__EXPERIMENTAL__) {
104103
}
105104

106105
await expect(async () => {
107-
await ReactMarkup.renderToHTML(React.createElement(Component));
108-
}).rejects.toThrow();
106+
await ReactMarkup.experimental_renderToHTML(
107+
React.createElement(Component),
108+
);
109+
}).rejects.toThrow('React.useState is not a function');
109110
});
110111

111112
it('should error on refs passed to host components', async () => {
@@ -116,8 +117,12 @@ if (!__EXPERIMENTAL__) {
116117
}
117118

118119
await expect(async () => {
119-
await ReactMarkup.renderToHTML(React.createElement(Component));
120-
}).rejects.toThrow();
120+
await ReactMarkup.experimental_renderToHTML(
121+
React.createElement(Component),
122+
);
123+
}).rejects.toThrow(
124+
'Refs cannot be used in Server Components, nor passed to Client Components.',
125+
);
121126
});
122127

123128
it('should error on callbacks passed to event handlers', async () => {
@@ -130,8 +135,20 @@ if (!__EXPERIMENTAL__) {
130135
}
131136

132137
await expect(async () => {
133-
await ReactMarkup.renderToHTML(React.createElement(Component));
134-
}).rejects.toThrow();
138+
await ReactMarkup.experimental_renderToHTML(
139+
React.createElement(Component),
140+
);
141+
}).rejects.toThrowError(
142+
__DEV__
143+
? `Event handlers cannot be passed to Client Component props.\n` +
144+
' <div onClick={function onClick}>\n' +
145+
' ^^^^^^^^^^^^^^^^^^\n' +
146+
'If you need interactivity, consider converting part of this to a Client Component.'
147+
: `Event handlers cannot be passed to Client Component props.\n` +
148+
' {onClick: function onClick}\n' +
149+
' ^^^^^^^^^^^^^^^^\n' +
150+
'If you need interactivity, consider converting part of this to a Client Component.',
151+
);
135152
});
136153

137154
it('supports the useId Hook', async () => {
@@ -173,7 +190,7 @@ if (!__EXPERIMENTAL__) {
173190
);
174191
}
175192

176-
const html = await ReactMarkup.renderToHTML(
193+
const html = await ReactMarkup.experimental_renderToHTML(
177194
React.createElement(Component),
178195
);
179196
const container = document.createElement('div');
@@ -204,7 +221,7 @@ if (!__EXPERIMENTAL__) {
204221
return React.createElement('div', null, a, b);
205222
}
206223

207-
const html = await ReactMarkup.renderToHTML(
224+
const html = await ReactMarkup.experimental_renderToHTML(
208225
React.createElement(Component),
209226
);
210227
expect(html).toBe('<div>00</div>');
@@ -225,7 +242,7 @@ if (!__EXPERIMENTAL__) {
225242
}
226243

227244
await expect(async () => {
228-
await ReactMarkup.renderToHTML(
245+
await ReactMarkup.experimental_renderToHTML(
229246
React.createElement('div', null, React.createElement(Foo)),
230247
{
231248
onError(error, errorInfo) {

0 commit comments

Comments
 (0)