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>

1 files changed, 38 insertions, 0 deletions

diff --git a/packages/integrations/react/vnode-children.js b/packages/integrations/react/vnode-children.js
new file mode 100644
index 000000000..0c9d5e08d
--- /dev/null
+++ b/packages/integrations/react/vnode-children.js
@@ -0,0 +1,38 @@
+import { parse, walkSync, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
+import { createElement, Fragment } from 'react';
+
+export default function convert(children) {
+    const nodeMap = new WeakMap();
+    let doc = parse(children.toString().trim());
+    let root = createElement(Fragment, { children: [] });
+
+    walkSync(doc, (node, parent, index) => {
+        let newNode = {};
+        if (node.type === DOCUMENT_NODE) {
+            nodeMap.set(node, root);
+        } else if (node.type === ELEMENT_NODE) {
+            const { class: className, ...props } = node.attributes;
+            newNode = createElement(node.name, { ...props, className, children: [] });
+            nodeMap.set(node, newNode);
+            if (parent) {
+                const newParent = nodeMap.get(parent);
+                newParent.props.children[index] = newNode;
+                
+            }
+        } else if (node.type === TEXT_NODE) {
+            newNode = node.value.trim();
+            if (newNode.trim()) {
+                if (parent) {
+                    const newParent = nodeMap.get(parent);
+                    if (parent.children.length === 1) {
+                        newParent.props.children[0] = newNode;
+                    } else {
+                        newParent.props.children[index] = newNode;
+                    }
+                }
+            }
+        }
+    });
+
+    return root.props.children;
+}