From 7005536f93288b90aec10e74e1277018dbfb614d Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 4 Jul 2023 08:53:34 -0500
Subject: [PATCH] fix: improve React node resolver

---
 src/react/index.js  | 16 ++++++++++++++--
 src/react/render.js | 35 ++++++++++++++++++-----------------
 src/server.js       |  1 +
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/react/index.js b/src/react/index.js
index 94dcbfd..43edcf2 100644
--- a/src/react/index.js
+++ b/src/react/index.js
@@ -55,7 +55,10 @@ function resolve(children, result = []) {
 
   for (let node of children) {
 
-    if (typeof node.type === 'string') {
+    if (typeof node === 'string') {
+      result.push(node);
+
+    } else if (typeof node.type === 'string') {
       let copy = { ...node, props: { ...node.props } };
       if (copy.props.children) copy.props.children = [];
 
@@ -63,7 +66,16 @@ function resolve(children, result = []) {
       result.push(copy);
 
     } else if (typeof node.type === 'function') {
-      resolve(node.type(node.props), result);
+
+      if (/^\s*class\s+/.test(node.type.toString())) {
+        // Class component
+        const comp = new node.type(node.props);
+        const vnode = comp.render();
+        resolve(vnode, result);
+      } else {
+        // Function component
+        resolve(node.type(node.props), result);
+      }
 
     } else if (typeof node.type === 'object' && typeof node.type.render === 'function') {
       resolve(node.type.render(node.props), result);
diff --git a/src/react/render.js b/src/react/render.js
index b1d7ca2..89520a3 100644
--- a/src/react/render.js
+++ b/src/react/render.js
@@ -33,25 +33,26 @@ function renderChildren(children, domNode) {
 
             if (dom.shadowRoot) {
 
-              for (let style of dom.shadowRoot.querySelectorAll('style')) {
-                style.textContent = minimizeCss(style.textContent);
-              }
-
-              const templateShadowRoot = createElement('template', {
-                shadowrootmode: dom.shadowRoot.mode ?? 'open',
-                dangerouslySetInnerHTML: {
-                  __html: dom.shadowRoot.innerHTML,
-                },
-              });
-
-              if (node.props.children) {
-                node.props.children.unshift(templateShadowRoot);
-              } else {
-                node.props.children = [templateShadowRoot];
-              }
-
               // Some web components defer updates. Add a timeout larger than micro task.
               setTimeout(() => {
+
+                for (let style of dom.shadowRoot.querySelectorAll('style')) {
+                  style.textContent = minimizeCss(style.textContent);
+                }
+
+                const templateShadowRoot = createElement('template', {
+                  shadowrootmode: dom.shadowRoot.mode ?? 'open',
+                  dangerouslySetInnerHTML: {
+                    __html: dom.shadowRoot.innerHTML,
+                  },
+                });
+
+                if (node.props.children) {
+                  node.props.children.unshift(templateShadowRoot);
+                } else {
+                  node.props.children = [templateShadowRoot];
+                }
+
                 Object.assign(node.props, attributesToProps(dom.attributes));
 
                 if (typeof node.props.style === 'string') {
diff --git a/src/server.js b/src/server.js
index 81db8e8..42e0e65 100644
--- a/src/server.js
+++ b/src/server.js
@@ -59,6 +59,7 @@ export function shim() {
     getComputedStyle: function getComputedStyle() { return new CSSStyleDeclaration(); },
     requestAnimationFrame: function requestAnimationFrame() {},
     cancelAnimationFrame: function cancelAnimationFrame() {},
+    navigator: {},
   };
 
   preshimGlobalThis = {};