From 1ea59a44ac7935680ab6c6998cb6263f7d41c266 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 14 Aug 2024 10:19:58 +0200 Subject: [PATCH] Publish experimental_renderToHTML --- packages/react-markup/README.md | 2 +- packages/react-markup/index.js | 2 +- packages/react-markup/package.json | 1 - .../react-markup/react-markup.react-server.js | 2 +- .../src/__tests__/ReactMarkupClient-test.js | 30 +++++++++------ .../src/__tests__/ReactMarkupServer-test.js | 38 ++++++++++++------- 6 files changed, 46 insertions(+), 29 deletions(-) diff --git a/packages/react-markup/README.md b/packages/react-markup/README.md index 103e656f8aa1e..5629c155483f8 100644 --- a/packages/react-markup/README.md +++ b/packages/react-markup/README.md @@ -11,7 +11,7 @@ npm install react react-markup ## Usage ```js -import { renderToHTML } from 'react-markup'; +import { experimental_renderToHTML as renderToHTML } from 'react-markup'; import EmailTemplate from './my-email-template-component.js' async function action(email, name) { diff --git a/packages/react-markup/index.js b/packages/react-markup/index.js index 1e53a27a69614..0c4d09cf1f3ca 100644 --- a/packages/react-markup/index.js +++ b/packages/react-markup/index.js @@ -7,4 +7,4 @@ * @flow */ -export * from './src/ReactMarkupClient'; +export {renderToHTML as experimental_renderToHTML} from './src/ReactMarkupClient'; diff --git a/packages/react-markup/package.json b/packages/react-markup/package.json index f0b98c7a8ab67..9bc548b9f7da2 100644 --- a/packages/react-markup/package.json +++ b/packages/react-markup/package.json @@ -1,7 +1,6 @@ { "name": "react-markup", "version": "19.0.0", - "private": true, "description": "React package generating embedded HTML markup such as e-mails using Server Components.", "main": "index.js", "repository": { diff --git a/packages/react-markup/react-markup.react-server.js b/packages/react-markup/react-markup.react-server.js index 4b74acd707c14..aab4f038674b0 100644 --- a/packages/react-markup/react-markup.react-server.js +++ b/packages/react-markup/react-markup.react-server.js @@ -7,4 +7,4 @@ * @flow */ -export * from './src/ReactMarkupServer'; +export {renderToHTML as experimental_renderToHTML} from './src/ReactMarkupServer'; diff --git a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js index a9193474234bb..e1e8eab4068e2 100644 --- a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js +++ b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js @@ -43,7 +43,7 @@ if (!__EXPERIMENTAL__) { return
hello world
; } - const html = await ReactMarkup.renderToHTML(); + const html = await ReactMarkup.experimental_renderToHTML(); expect(html).toBe('
hello world
'); }); @@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) { return
{'hello '.repeat(200)}world
; } - const html = await ReactMarkup.renderToHTML( + const html = await ReactMarkup.experimental_renderToHTML( React.createElement(Component), ); expect(html).toBe('
' + ('hello '.repeat(200) + 'world') + '
'); }); it('should prefix html tags with a doctype', async () => { - const html = await ReactMarkup.renderToHTML( + const html = await ReactMarkup.experimental_renderToHTML( hello , @@ -76,8 +76,10 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML(); - }).rejects.toThrow(); + await ReactMarkup.experimental_renderToHTML(); + }).rejects.toThrow( + 'Cannot use state or effect Hooks in renderToHTML because this component will never be hydrated.', + ); }); it('should error on refs passed to host components', async () => { @@ -87,8 +89,10 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML(); - }).rejects.toThrow(); + await ReactMarkup.experimental_renderToHTML(); + }).rejects.toThrow( + 'Cannot pass ref in renderToHTML because they will never be hydrated.', + ); }); it('should error on callbacks passed to event handlers', async () => { @@ -100,8 +104,10 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML(); - }).rejects.toThrow(); + await ReactMarkup.experimental_renderToHTML(); + }).rejects.toThrow( + 'Cannot pass event handlers (onClick) in renderToHTML because the HTML will never be hydrated so they can never get called.', + ); }); it('supports the useId Hook', async () => { @@ -142,7 +148,7 @@ if (!__EXPERIMENTAL__) { ); } - const html = await ReactMarkup.renderToHTML(); + const html = await ReactMarkup.experimental_renderToHTML(); const container = document.createElement('div'); container.innerHTML = html; @@ -176,7 +182,7 @@ if (!__EXPERIMENTAL__) { ); } - const html = await ReactMarkup.renderToHTML(); + const html = await ReactMarkup.experimental_renderToHTML(); expect(html).toBe('
01
'); }); @@ -199,7 +205,7 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML( + await ReactMarkup.experimental_renderToHTML(
, diff --git a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js index 169c4ba5e6c5b..e329e32c84dac 100644 --- a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js +++ b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js @@ -64,7 +64,7 @@ if (!__EXPERIMENTAL__) { return React.createElement('div', null, 'hello world'); } - const html = await ReactMarkup.renderToHTML( + const html = await ReactMarkup.experimental_renderToHTML( React.createElement(Component), ); expect(html).toBe('
hello world
'); @@ -76,15 +76,14 @@ if (!__EXPERIMENTAL__) { return React.createElement('div', null, 'hello '.repeat(200) + 'world'); } - const html = await ReactMarkup.renderToHTML( + const html = await ReactMarkup.experimental_renderToHTML( React.createElement(Component), ); expect(html).toBe('
' + ('hello '.repeat(200) + 'world') + '
'); }); it('should prefix html tags with a doctype', async () => { - const html = await ReactMarkup.renderToHTML( - // We can't use JSX because that's client-JSX in our tests. + const html = await ReactMarkup.experimental_renderToHTML( React.createElement( 'html', null, @@ -104,8 +103,10 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML(React.createElement(Component)); - }).rejects.toThrow(); + await ReactMarkup.experimental_renderToHTML( + React.createElement(Component), + ); + }).rejects.toThrow('React.useState is not a function'); }); it('should error on refs passed to host components', async () => { @@ -116,8 +117,12 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML(React.createElement(Component)); - }).rejects.toThrow(); + await ReactMarkup.experimental_renderToHTML( + React.createElement(Component), + ); + }).rejects.toThrow( + 'Refs cannot be used in Server Components, nor passed to Client Components.', + ); }); it('should error on callbacks passed to event handlers', async () => { @@ -130,8 +135,15 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML(React.createElement(Component)); - }).rejects.toThrow(); + await ReactMarkup.experimental_renderToHTML( + React.createElement(Component), + ); + }).rejects.toThrowError( + `Event handlers cannot be passed to Client Component props.\n` + + '
\n' + + ' ^^^^^^^^^^^^^^^^^^\n' + + 'If you need interactivity, consider converting part of this to a Client Component.', + ); }); it('supports the useId Hook', async () => { @@ -173,7 +185,7 @@ if (!__EXPERIMENTAL__) { ); } - const html = await ReactMarkup.renderToHTML( + const html = await ReactMarkup.experimental_renderToHTML( React.createElement(Component), ); const container = document.createElement('div'); @@ -204,7 +216,7 @@ if (!__EXPERIMENTAL__) { return React.createElement('div', null, a, b); } - const html = await ReactMarkup.renderToHTML( + const html = await ReactMarkup.experimental_renderToHTML( React.createElement(Component), ); expect(html).toBe('
00
'); @@ -225,7 +237,7 @@ if (!__EXPERIMENTAL__) { } await expect(async () => { - await ReactMarkup.renderToHTML( + await ReactMarkup.experimental_renderToHTML( React.createElement('div', null, React.createElement(Foo)), { onError(error, errorInfo) {