fix: hasSetRoot not work

clChenLiang · clChenLiang · commit 8daff43cc036 · 2026-03-31T15:21:44.000+08:00
diff --git a/packages/runtime/plugin-runtime/src/document/Html.tsx b/packages/runtime/plugin-runtime/src/document/Html.tsx
@@ -3,6 +3,7 @@ import React, { type ReactElement } from 'react';
 import { Body } from './Body';
 import { DocumentStructureContext } from './DocumentStructureContext';
 import { Head } from './Head';
+import { Root } from './Root';
 
 /**
  * get the directly son element by name
@@ -21,6 +22,31 @@ function findTargetChildByComponent(
   return children.find(item => item?.type === component);
 }
 
+/**
+ * get the children(grandChild included) with target component reference
+ * @param component the component reference
+ * @param children son element
+ * @returns target element
+ */
+function findTargetElementByComponent(
+  component: unknown,
+  children: ReactElement<any>[],
+): ReactElement<{ children?: ReactElement<any> }> | null {
+  if (children.length === 0) {
+    return null;
+  }
+  let nextChildren: ReactElement<{ children: ReactElement<any> }>[] = [];
+  for (const item of children) {
+    if (item?.type === component) {
+      return item;
+    }
+    if (item?.props?.children) {
+      nextChildren = nextChildren.concat(item.props.children);
+    }
+  }
+  return findTargetElementByComponent(component, nextChildren);
+}
+
 /**
  * get the type of react element
  */
@@ -70,7 +96,10 @@ export function Html(
     findTargetChildByComponent(Body, children) ||
       findTargetChildByName('Body', children),
   );
-  const hasSetRoot = Boolean(findTargetElement('Root', children));
+  const hasSetRoot = Boolean(
+    findTargetElementByComponent(Root, children) ||
+      findTargetChildByName('Root', children),
+  );
   const hasSetTitle = Boolean(findTargetElement('title', children));
   const notMissMustChild = [
     hasSetHead,
diff --git a/packages/runtime/plugin-runtime/tests/document/debug.test.tsx b/packages/runtime/plugin-runtime/tests/document/debug.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDomServer from 'react-dom/server';
+import { Body, Head, Html, Root } from '../../src/document';
+
+describe('debug Root component type', () => {
+  it('should have correct type name', () => {
+    const rootElement = <Root rootId="custom" />;
+
+    console.log('=== Root Element Type Info ===');
+    console.log('type:', (rootElement as any).type);
+    console.log('type.name:', (rootElement as any).type?.name);
+    console.log('typeof type:', typeof (rootElement as any).type);
+  });
+
+  it('should render document with Root', () => {
+    const document = (
+      <Html>
+        <Head />
+        <Body>
+          <Root rootId="custom" />
+        </Body>
+      </Html>
+    );
+
+    const docHtml = ReactDomServer.renderToString(document);
+
+    console.log('=== HTML OUTPUT ===');
+    console.log(docHtml);
+
+    const hasCustomId = docHtml.includes('id="custom"');
+    const hasRootId = docHtml.includes('id="root"');
+
+    console.log('Has custom id:', hasCustomId);
+    console.log('Has root id:', hasRootId);
+
+    // If both are true, it means there are 2 Root divs (bug!)
+    expect(hasCustomId && hasRootId).toBe(false);
+  });
+});
