From 16a3fdf93165a1a0404c1db0973871345b2c591b Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Wed, 16 Aug 2023 13:40:57 -0400
Subject: Add experimentalReactChildren option to React integration (#8082)

* wip: support true react vnodes in renderer

* Add new experimentalReactChildren option to React integration

* Update the test

* Add docs

* Update packages/integrations/react/server.js

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update with a better test

* Update .changeset/yellow-snakes-jam.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/react/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/react/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .../src/components/ArrowFunction.jsx               |  5 +++
 .../src/components/CloneElement.jsx                |  6 ++++
 .../src/components/ForgotImport.jsx                |  3 ++
 .../react-component/src/components/GetSearch.jsx   |  7 ++++
 .../react-component/src/components/Goodbye.vue     | 11 ++++++
 .../react-component/src/components/Hello.jsx       |  5 +++
 .../src/components/ImportsThrowsAnError.jsx        |  7 ++++
 .../src/components/LazyComponent.jsx               |  9 +++++
 .../src/components/PragmaComment.jsx               |  5 +++
 .../src/components/PragmaCommentTypeScript.tsx     |  5 +++
 .../react-component/src/components/PropsSpread.jsx |  5 +++
 .../react-component/src/components/Pure.jsx        | 13 +++++++
 .../react-component/src/components/Research.jsx    |  7 ++++
 .../react-component/src/components/Suspense.jsx    | 14 ++++++++
 .../src/components/ThrowsAnError.jsx               | 15 ++++++++
 .../src/components/TypeScriptComponent.tsx         |  5 +++
 .../src/components/WithChildren.jsx                | 10 ++++++
 .../react-component/src/components/WithId.jsx      |  6 ++++
 .../react-component/src/pages/children.astro       | 14 ++++++++
 .../src/pages/error-rendering.astro                | 11 ++++++
 .../fixtures/react-component/src/pages/index.astro | 41 ++++++++++++++++++++++
 .../react-component/src/pages/pragma-comment.astro | 14 ++++++++
 .../react-component/src/pages/suspense.astro       | 17 +++++++++
 .../src/skipped-pages/forgot-import.astro          | 12 +++++++
 .../react-component/src/skipped-pages/window.astro |  8 +++++
 25 files changed, 255 insertions(+)
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/pages/children.astro
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/pages/index.astro
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro
 create mode 100644 packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro

(limited to 'packages/integrations/react/test/fixtures/react-component/src')

diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx
new file mode 100644
index 000000000..16fac5bb6
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/ArrowFunction.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return <div id="arrow-fn-component"></div>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx
new file mode 100644
index 000000000..809ac4aa4
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/CloneElement.jsx
@@ -0,0 +1,6 @@
+import { cloneElement } from 'react';
+
+const ClonedWithProps = (element) => (props) =>
+  cloneElement(element, props);
+
+export default ClonedWithProps(<div id="cloned">Cloned With Props</div>);
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx
new file mode 100644
index 000000000..9ee27faca
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/ForgotImport.jsx
@@ -0,0 +1,3 @@
+export default function ({}) {
+  return <h2>oops</h2>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx
new file mode 100644
index 000000000..d3fee2f9a
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/GetSearch.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function GetSearch() {
+  return (<div>{window.location.search}</div>);
+}
+
+export default GetSearch
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue b/packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue
new file mode 100644
index 000000000..430dfdb71
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/Goodbye.vue
@@ -0,0 +1,11 @@
+<template>
+  <h2 id="vue-h2">Hasta la vista, {{ name }}</h2>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+  },
+};
+</script>
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx
new file mode 100644
index 000000000..4c241162d
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/Hello.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ({ name, unused }) {
+  return <h2 id={`react-${name}`}>Hello {name}!</h2>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx
new file mode 100644
index 000000000..d6ff21dc3
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx
@@ -0,0 +1,7 @@
+import ThrowsAnError from "./ThrowsAnError";
+
+export default function() {
+	return <>
+		<ThrowsAnError />
+	</>
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx
new file mode 100644
index 000000000..b43aa36be
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/LazyComponent.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const LazyComponent = () => {
+  return (
+    <span id="lazy">inner content</span>
+  );
+};
+
+export default LazyComponent;
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx
new file mode 100644
index 000000000..d8ea77810
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaComment.jsx
@@ -0,0 +1,5 @@
+/** @jsxImportSource react */
+
+export default function() {
+  return <div className="pragma-comment">Hello world</div>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx
new file mode 100644
index 000000000..9f2256fbf
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/PragmaCommentTypeScript.tsx
@@ -0,0 +1,5 @@
+/** @jsxImportSource react */
+
+export default function({}: object) {
+  return <div className="pragma-comment">Hello world</div>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx
new file mode 100644
index 000000000..044c2a019
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/PropsSpread.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default (props) => {
+  return <div id="component-spread-props">{props.text}</div>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx
new file mode 100644
index 000000000..6fae8613b
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/Pure.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default class StaticComponent extends React.PureComponent {
+
+    render() {
+        return (
+            <div id="pure">
+                <h1>Static component</h1>
+            </div>
+        )
+    }
+
+}
\ No newline at end of file
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx
new file mode 100644
index 000000000..9ab83e5f3
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/Research.jsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export function Research2() {
+  const [value] = React.useState(1)
+
+  return <div id="research">foo bar {value}</div>
+}
\ No newline at end of file
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx
new file mode 100644
index 000000000..87dc82625
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/Suspense.jsx
@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react';
+const LazyComponent = React.lazy(() => import('./LazyComponent.jsx'));
+
+export const ParentComponent = () => {
+  return (
+    <div id="outer">
+      <Suspense>
+        <LazyComponent />
+      </Suspense>
+    </div>
+  );
+};
+
+export default ParentComponent;
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx
new file mode 100644
index 000000000..cf970e38c
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export default function() {
+	let player = undefined;
+	// This is tested in dev mode, so make it work during the build to prevent
+	// breaking other tests.
+	if(import.meta.env.MODE === 'production') {
+		player = {};
+	}
+	const [] = useState(player.currentTime || null);
+
+	return (
+		<div>Should have thrown</div>
+	)
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx b/packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx
new file mode 100644
index 000000000..bde96da84
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/TypeScriptComponent.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function({}) {
+  return <div className="ts-component">Hello world</div>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx
new file mode 100644
index 000000000..500c0c694
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/WithChildren.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ({ children }) {
+	return (
+		<div>
+			<div className="with-children">{children}</div>
+			<div className="with-children-count">{children.length}</div>
+		</div>
+	);
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx
new file mode 100644
index 000000000..0abe91c72
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/components/WithId.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function () {
+	const id = React.useId();
+  return <p className='react-use-id' id={id}>{id}</p>;
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/children.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/children.astro
new file mode 100644
index 000000000..59595c266
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/pages/children.astro
@@ -0,0 +1,14 @@
+---
+import WithChildren from '../components/WithChildren';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<WithChildren>
+			<div>child 1</div><div>child 2</div>
+		</WithChildren>
+  </body>
+</html>
diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro
new file mode 100644
index 000000000..6984a6da5
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/pages/error-rendering.astro
@@ -0,0 +1,11 @@
+---
+import ImportsThrowsAnError from '../components/ImportsThrowsAnError';
+---
+<html>
+<head>
+	<title>Testing</title>
+</head>
+<body>
+	<ImportsThrowsAnError />
+</body>
+</html>
diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/index.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/index.astro
new file mode 100644
index 000000000..3afd8233f
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/pages/index.astro
@@ -0,0 +1,41 @@
+---
+import Hello from '../components/Hello.jsx';
+import Later from '../components/Goodbye.vue';
+import ArrowFunction from '../components/ArrowFunction.jsx';
+import PropsSpread from '../components/PropsSpread.jsx';
+import {Research2} from '../components/Research.jsx';
+import Pure from '../components/Pure.jsx';
+import TypeScriptComponent from '../components/TypeScriptComponent';
+import CloneElement from '../components/CloneElement';
+import WithChildren from '../components/WithChildren';
+import WithId from '../components/WithId';
+
+const someProps = {
+  text: 'Hello world!',
+};
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <Hello name="static" />
+    <Hello name="load" client:load />
+    <!-- Test island deduplication, i.e. same UID as the component above. -->
+    <Hello name="load" client:load />
+    <!-- Test island deduplication account for non-render affecting props. -->
+    <Hello name="load" unused="" client:load />
+    <Later name="baby" />
+    <ArrowFunction />
+    <PropsSpread {...someProps}/>
+    <Research2 client:idle />
+    <TypeScriptComponent client:load />
+    <Pure />
+		<CloneElement />
+		<WithChildren client:load>test</WithChildren>
+		<WithChildren client:load children="test" />
+		<WithId client:idle />
+		<WithId client:idle />
+  </body>
+</html>
diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro
new file mode 100644
index 000000000..b3ddba639
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/pages/pragma-comment.astro
@@ -0,0 +1,14 @@
+---
+import PragmaComponent from '../components/PragmaComment.jsx';
+import PragmaComponentTypeScript from '../components/PragmaCommentTypeScript.tsx';
+---
+
+<html>
+<head>
+  <title>React component works with Pragma comment</title>
+</head>
+<body>
+  <PragmaComponent client:load/>
+  <PragmaComponentTypeScript client:load/>
+</body>
+</html>
diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro
new file mode 100644
index 000000000..5a9d15644
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/pages/suspense.astro
@@ -0,0 +1,17 @@
+---
+import Suspense from '../components/Suspense.jsx';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<div id="client">
+			<Suspense client:load />
+		</div>
+    <div id="server">
+			<Suspense />
+		</div>
+  </body>
+</html>
diff --git a/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro
new file mode 100644
index 000000000..de5d319d9
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/forgot-import.astro
@@ -0,0 +1,12 @@
+---
+import ForgotImport from '../components/ForgotImport.jsx';
+---
+
+<html>
+<head>
+  <title>Here we are</title>
+</head>
+<body>
+  <ForgotImport />
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro
new file mode 100644
index 000000000..e780f3c44
--- /dev/null
+++ b/packages/integrations/react/test/fixtures/react-component/src/skipped-pages/window.astro
@@ -0,0 +1,8 @@
+---
+import GetSearch from '../components/GetSearch.jsx';
+---
+<html>
+<body>
+  <GetSearch />
+</body>
+</html>
-- 
cgit v1.2.3