fix: XML Node with title tag nested in any other XML Node breaks document

fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx

@@ -60,7 +60,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 
-  const text = renderToString(
+  let text = renderToString(
     <ReactSdkContext.Provider
       value={{
         imageLoader,
@@ -73,6 +73,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     </ReactSdkContext.Provider>
   );
 
+  // Xml is wrapped with <svg> to prevent React from hoisting elements like <title>, <meta>, and <link> out of their intended scope during rendering.
+  // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
+  text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });

fixtures/webstudio-remix-vercel/.webstudio/data.json

@@ -1,10 +1,10 @@
 {
   "build": {
-    "id": "1710e6a3-6f3b-44c9-8e4f-4176be77673e",
+    "id": "5646b5e6-a161-4fbc-8312-6e2852e1d4b3",
     "projectId": "cddc1d44-af37-4cb6-a430-d300cf6f932d",
-    "version": 341,
-    "createdAt": "2024-10-28T17:19:04.754+00:00",
-    "updatedAt": "2024-10-28T17:19:04.754+00:00",
+    "version": 345,
+    "createdAt": "2024-11-04T04:15:27.144+00:00",
+    "updatedAt": "2024-11-04T04:15:27.144+00:00",
     "pages": {
       "meta": {
         "siteName": "KittyGuardedZone",
@@ -2601,6 +2601,16 @@
           "type": "string",
           "value": "http://www.w3.org/1999/xhtml"
         }
+      ],
+      [
+        "kQb_yRWDNAsug8p2lhSxN",
+        {
+          "id": "kQb_yRWDNAsug8p2lhSxN",
+          "instanceId": "wLYkMGH-OJP4SnFB4F-bs",
+          "name": "tag",
+          "type": "string",
+          "value": "title"
+        }
       ]
     ],
     "dataSources": [
@@ -4075,6 +4085,10 @@
             {
               "type": "id",
               "value": "bBAE2vpcCLzlcin29wQYA"
+            },
+            {
+              "type": "id",
+              "value": "wLYkMGH-OJP4SnFB4F-bs"
             }
           ]
         }
@@ -4124,6 +4138,20 @@
           "component": "XmlNode",
           "children": []
         }
+      ],
+      [
+        "wLYkMGH-OJP4SnFB4F-bs",
+        {
+          "type": "instance",
+          "id": "wLYkMGH-OJP4SnFB4F-bs",
+          "component": "XmlNode",
+          "children": [
+            {
+              "type": "text",
+              "value": "Hello"
+            }
+          ]
+        }
       ]
     ],
     "deployment": {

fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx

@@ -60,7 +60,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 
-  const text = renderToString(
+  let text = renderToString(
     <ReactSdkContext.Provider
       value={{
         imageLoader,
@@ -73,6 +73,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     </ReactSdkContext.Provider>
   );
 
+  // Xml is wrapped with <svg> to prevent React from hoisting elements like <title>, <meta>, and <link> out of their intended scope during rendering.
+  // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
+  text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });

fixtures/webstudio-remix-vercel/package.json

@@ -6,7 +6,7 @@
     "typecheck": "tsc",
     "cli": "NODE_OPTIONS='--conditions=webstudio --import=tsx' webstudio",
     "fixtures:link": "pnpm cli link --link https://p-cddc1d44-af37-4cb6-a430-d300cf6f932d-dot-${BUILDER_HOST:-main.development.webstudio.is}'?authToken=1cdc6026-dd5b-4624-b89b-9bd45e9bcc3d'",
-    "fixtures:sync": "pnpm cli sync --buildId 1710e6a3-6f3b-44c9-8e4f-4176be77673e && pnpm prettier --write ./.webstudio/",
+    "fixtures:sync": "pnpm cli sync --buildId 5646b5e6-a161-4fbc-8312-6e2852e1d4b3 && pnpm prettier --write ./.webstudio/",
     "fixtures:build": "pnpm cli build --template vercel --template internal --preview && pnpm prettier --write ./app/ ./package.json ./tsconfig.json"
   },
   "private": true,

packages/cli/src/prebuild.ts

@@ -550,16 +550,19 @@ export const prebuild = async (options: {
             // In case of xml it's the only component we are supporting
             componentImports = `import { XmlNode } from "@webstudio-is/sdk-components-react";\n`;
 
-            // Passthrough (render children) for Body, do not render all other components
             xmlPresentationComponents += Array.from(componentsSet)
               .map(([shortName, component]) =>
                 scope.getName(component, shortName)
               )
               .filter((scopedName) => scopedName !== "XmlNode")
               .map((scopedName) =>
                 scopedName === "Body"
-                  ? `const ${scopedName} = (props: any) => props.children;`
-                  : `const ${scopedName} = (props: any) => null;`
+                  ? // Using <svg> prevents React from hoisting elements like <title>, <meta>, and <link>
+                    // out of their intended scope during rendering.
+                    // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
+                    `const ${scopedName} = (props: any) => <svg>{props.children}</svg>;`
+                  : // Do not render all other components
+                    `const ${scopedName} = (props: any) => null;`
               )
               .join("\n");
           }

packages/cli/templates/defaults/app/route-templates/xml.tsx

@@ -56,7 +56,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 
-  const text = renderToString(
+  let text = renderToString(
     <ReactSdkContext.Provider
       value={{
         imageLoader,
@@ -69,6 +69,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     </ReactSdkContext.Provider>
   );
 
+  // Xml is wrapped with <svg> to prevent React from hoisting elements like <title>, <meta>, and <link> out of their intended scope during rendering.
+  // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
+  text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });