webstudio-is · istarkov · Jan 4, 2025 · Jan 4, 2025
diff --git a/fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx
@@ -1,7 +1,10 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  xmlNodeTagSuffix,
+} from "@webstudio-is/react-sdk/runtime";
 import { Page } from "../__generated__/[sitemap.xml]._index";
 import {
   getPageMeta,
@@ -76,6 +79,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // 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, "");
 
+  // React has issues rendering certain elements, such as errors when a <link> element has children.
+  // To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
+  text = text.replaceAll(xmlNodeTagSuffix, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });

diff --git a/fixtures/webstudio-remix-vercel/.webstudio/data.json b/fixtures/webstudio-remix-vercel/.webstudio/data.json
@@ -1,10 +1,10 @@
 {
   "build": {
-    "id": "0ff71ecc-db91-41d0-ba52-26d2fc6c196d",
+    "id": "63389378-e2a2-4e25-8c98-3e408bcfc4c4",
     "projectId": "cddc1d44-af37-4cb6-a430-d300cf6f932d",
-    "version": 396,
-    "createdAt": "2024-12-05T12:47:15.161+00:00",
-    "updatedAt": "2024-12-05T12:47:15.161+00:00",
+    "version": 401,
+    "createdAt": "2025-01-04T10:58:00.47+00:00",
+    "updatedAt": "2025-01-04T10:58:00.47+00:00",
     "pages": {
       "meta": {
         "siteName": "KittyGuardedZone",
@@ -2867,6 +2867,16 @@
           "type": "string",
           "value": "1733402818245"
         }
+      ],
+      [
+        "wb8XS5grnnYTgGAotvCfZ",
+        {
+          "id": "wb8XS5grnnYTgGAotvCfZ",
+          "instanceId": "WCz4oAOyt2V-prz3LIAes",
+          "name": "tag",
+          "type": "string",
+          "value": "link"
+        }
       ]
     ],
     "dataSources": [
@@ -4354,6 +4364,10 @@
             {
               "type": "id",
               "value": "wLYkMGH-OJP4SnFB4F-bs"
+            },
+            {
+              "type": "id",
+              "value": "WCz4oAOyt2V-prz3LIAes"
             }
           ]
         }
@@ -4842,6 +4856,20 @@
           "component": "XmlTime",
           "children": []
         }
+      ],
+      [
+        "WCz4oAOyt2V-prz3LIAes",
+        {
+          "type": "instance",
+          "id": "WCz4oAOyt2V-prz3LIAes",
+          "component": "XmlNode",
+          "children": [
+            {
+              "type": "text",
+              "value": "https://webstudio.is"
+            }
+          ]
+        }
       ]
     ],
     "deployment": {

diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/$resources.sitemap.xml.ts b/fixtures/webstudio-remix-vercel/app/__generated__/$resources.sitemap.xml.ts
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx
@@ -1,7 +1,10 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  xmlNodeTagSuffix,
+} from "@webstudio-is/react-sdk/runtime";
 import { Page } from "../__generated__/[sitemap.xml]._index";
 import {
   getPageMeta,
@@ -76,6 +79,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // 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, "");
 
+  // React has issues rendering certain elements, such as errors when a <link> element has children.
+  // To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
+  text = text.replaceAll(xmlNodeTagSuffix, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });

diff --git a/fixtures/webstudio-remix-vercel/package.json b/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 0ff71ecc-db91-41d0-ba52-26d2fc6c196d && pnpm prettier --write ./.webstudio/",
+    "fixtures:sync": "pnpm cli sync --buildId 63389378-e2a2-4e25-8c98-3e408bcfc4c4 && pnpm prettier --write ./.webstudio/",
     "fixtures:build": "pnpm cli build --template vercel --template internal && pnpm prettier --write ./app/ ./package.json ./tsconfig.json"
   },
   "private": true,

diff --git a/packages/cli/templates/defaults/app/route-templates/xml.tsx b/packages/cli/templates/defaults/app/route-templates/xml.tsx
@@ -1,7 +1,10 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  xmlNodeTagSuffix,
+} from "@webstudio-is/react-sdk/runtime";
 import { Page } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
@@ -72,6 +75,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   // 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, "");
 
+  // React has issues rendering certain elements, such as errors when a <link> element has children.
+  // To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
+  text = text.replaceAll(xmlNodeTagSuffix, "");
+
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
     headers: { "Content-Type": "application/xml" },
   });

diff --git a/packages/react-sdk/src/runtime.ts b/packages/react-sdk/src/runtime.ts
@@ -2,6 +2,13 @@ export * from "./context";
 export * from "./hook";
 export * from "./variable-state";
 
+/**
+ * React has issues rendering certain elements, such as errors when a <link> element has children.
+ * To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
+ */
+export const xmlNodeTagSuffix =
+  "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
+
 export const getIndexWithinAncestorFromComponentProps = (
   props: Record<string, unknown>
 ) => {

diff --git a/packages/sdk-components-react/src/xml-node.tsx b/packages/sdk-components-react/src/xml-node.tsx
@@ -1,4 +1,7 @@
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  ReactSdkContext,
+  xmlNodeTagSuffix,
+} from "@webstudio-is/react-sdk/runtime";
 import {
   Children,
   createElement,
@@ -33,22 +36,27 @@ export const XmlNode = forwardRef<ElementRef<"div">, Props>(
       .filter(([key]) => key !== "tabIndex")
       .filter(([, value]) => typeof value !== "function");
 
+    const elementName = tag
+      // Must start from letter or underscore
+      .replace(/^[^\p{L}_]+/u, "")
+      // Clear all non letter, number, underscore, dot, and dash
+      .replaceAll(/[^\p{L}\p{N}\-._:]+/gu, "")
+      .trim();
+
     if (renderer === undefined) {
       const attrProps = Object.fromEntries(attributeEntries);
-      return createElement(tag, attrProps, children);
+      return createElement(
+        `${elementName}${xmlNodeTagSuffix}`,
+        attrProps,
+        children
+      );
     }
 
     const childrenArray = Children.toArray(children);
     const isTextChild =
       childrenArray.length > 0 &&
       childrenArray.every((child) => typeof child === "string");
 
-    const elementName = tag
-      // Must start from letter or underscore
-      .replace(/^[^\p{L}_]+/u, "")
-      // Clear all non letter, number, underscore, dot, and dash
-      .replaceAll(/[^\p{L}\p{N}\-._:]+/gu, "");
-
     const attributes = attributeEntries.map(
       ([key, value]) => `${key}=${JSON.stringify(value)}`
     );