Publish experimental_renderToHTML

facebook · Aug 14, 2024 · 1ea59a4 · 1ea59a4
1 parent 0b0012e
commit 1ea59a4
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -43,7 +43,7 @@ if (!__EXPERIMENTAL__) {
         return <div>hello world</div>;
       }
 
-      const html = await ReactMarkup.renderToHTML(<Component />);
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
       expect(html).toBe('<div>hello world</div>');
     });
 
@@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) {
         return <div>{'hello '.repeat(200)}world</div>;
       }
 
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         <html>
           <body>hello</body>
         </html>,
@@ -76,8 +76,10 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(<Component />);
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).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(<Component />);
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).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(<Component />);
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).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(<Component />);
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
       const container = document.createElement('div');
       container.innerHTML = html;
 
@@ -176,7 +182,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToHTML(<Component />);
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
       expect(html).toBe('<div>01</div>');
     });
 
@@ -199,7 +205,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(
+        await ReactMarkup.experimental_renderToHTML(
           <div>
             <Foo />
           </div>,

diff --git 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('<div>hello world</div>');
@@ -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('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     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` +
+          '  <div onClick={function onClick}>\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('<div>00</div>');
@@ -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) {