fix: improve React node resolver

luwes · Jul 4, 2023 · 7005536 · 7005536
1 parent a7c78c4
commit 7005536
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/src/react/index.js b/src/react/index.js
@@ -55,15 +55,27 @@ 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 = [];
 
       resolve(node.props.children, copy.props.children);
       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
@@ -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
@@ -59,6 +59,7 @@ export function shim() {
     getComputedStyle: function getComputedStyle() { return new CSSStyleDeclaration(); },
     requestAnimationFrame: function requestAnimationFrame() {},
     cancelAnimationFrame: function cancelAnimationFrame() {},
+    navigator: {},
   };
 
   preshimGlobalThis = {};