fix: render empty page when xml is empty (#4966)

Author: TrySound

packages/cli/src/prebuild.ts

@@ -498,12 +498,9 @@ export const prebuild = async (options: {
       // treat first body child as root
       const bodyInstance = instances.get(rootInstanceId);
       // @todo test empty xml
-      if (
-        bodyInstance &&
-        bodyInstance.children.length > 0 &&
-        bodyInstance.children[0].type === "id"
-      ) {
-        rootInstanceId = bodyInstance.children[0].value;
+      const firstChild = bodyInstance?.children.at(0);
+      if (firstChild?.type === "id") {
+        rootInstanceId = firstChild.value;
       }
       // remove all unexpected components
       for (const instance of instances.values()) {

packages/react-sdk/src/component-generator.test.tsx

@@ -1250,3 +1250,25 @@ test("ignore ws:block-template when generate index attribute", () => {
     )
   );
 });
+
+test("render empty component when no instances found", () => {
+  expect(
+    generateWebstudioComponent({
+      classesMap: new Map(),
+      scope: createScope(),
+      name: "Page",
+      rootInstanceId: "",
+      parameters: [],
+      metas: new Map(),
+      ...renderData(<$.Body ws:id="bodyId"></$.Body>),
+    })
+  ).toEqual(
+    validateJSX(
+      clear(`
+      const Page = () => {
+      return <></>
+      }
+    `)
+    )
+  );
+});

packages/react-sdk/src/component-generator.ts

@@ -407,34 +407,35 @@ export const generateWebstudioComponent = ({
   metas: Map<Instance["component"], WsComponentMeta>;
 }) => {
   const instance = instances.get(rootInstanceId);
-  if (instance === undefined) {
-    return "";
-  }
   const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
     rootInstanceId,
   ]);
 
   const usedDataSources: DataSources = new Map();
-  const generatedJsx = generateJsxElement({
-    context: "expression",
-    scope,
-    instance,
-    props,
-    dataSources,
-    usedDataSources,
-    indexesWithinAncestors,
-    classesMap,
-    children: generateJsxChildren({
+  let generatedJsx = "<></>\n";
+  // instance can be missing when generate xml
+  if (instance) {
+    generatedJsx = generateJsxElement({
+      context: "expression",
       scope,
-      children: instance.children,
-      instances,
+      instance,
       props,
       dataSources,
       usedDataSources,
       indexesWithinAncestors,
       classesMap,
-    }),
-  });
+      children: generateJsxChildren({
+        scope,
+        children: instance.children,
+        instances,
+        props,
+        dataSources,
+        usedDataSources,
+        indexesWithinAncestors,
+        classesMap,
+      }),
+    });
+  }
 
   let generatedProps = "";
   let generatedParameters = "";