feat: Create xml-time component to convert time to iso string in xml documents

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

@@ -1,10 +1,10 @@
 {
   "build": {
-    "id": "00bc4703-0722-4929-9647-fbe0ae091b94",
+    "id": "0ff71ecc-db91-41d0-ba52-26d2fc6c196d",
     "projectId": "cddc1d44-af37-4cb6-a430-d300cf6f932d",
-    "version": 392,
-    "createdAt": "2024-12-02T14:50:20.265+00:00",
-    "updatedAt": "2024-12-02T14:50:20.265+00:00",
+    "version": 396,
+    "createdAt": "2024-12-05T12:47:15.161+00:00",
+    "updatedAt": "2024-12-05T12:47:15.161+00:00",
     "pages": {
       "meta": {
         "siteName": "KittyGuardedZone",
@@ -2857,6 +2857,16 @@
           "type": "string",
           "value": "title"
         }
+      ],
+      [
+        "q2FTulKKH-VEhZpaVqYoj",
+        {
+          "id": "q2FTulKKH-VEhZpaVqYoj",
+          "instanceId": "NBRETFGlP8H6t_1ZLbJ5J",
+          "name": "datetime",
+          "type": "string",
+          "value": "1733402818245"
+        }
       ]
     ],
     "dataSources": [
@@ -4370,8 +4380,8 @@
           "component": "XmlNode",
           "children": [
             {
-              "type": "text",
-              "value": "2020-10-10"
+              "type": "id",
+              "value": "NBRETFGlP8H6t_1ZLbJ5J"
             }
           ]
         }
@@ -4823,6 +4833,15 @@
           "label": "Templates",
           "children": []
         }
+      ],
+      [
+        "NBRETFGlP8H6t_1ZLbJ5J",
+        {
+          "type": "instance",
+          "id": "NBRETFGlP8H6t_1ZLbJ5J",
+          "component": "XmlTime",
+          "children": []
+        }
       ]
     ],
     "deployment": {

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 00bc4703-0722-4929-9647-fbe0ae091b94 && pnpm prettier --write ./.webstudio/",
+    "fixtures:sync": "pnpm cli sync --buildId 0ff71ecc-db91-41d0-ba52-26d2fc6c196d && 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

@@ -548,13 +548,16 @@ export const prebuild = async (options: {
         case "xml":
           {
             // In case of xml it's the only component we are supporting
-            componentImports = `import { XmlNode } from "@webstudio-is/sdk-components-react";\n`;
+            componentImports = `import { XmlNode, XmlTime } from "@webstudio-is/sdk-components-react";\n`;
 
             xmlPresentationComponents += Array.from(componentsSet)
               .map(([shortName, component]) =>
                 scope.getName(component, shortName)
               )
-              .filter((scopedName) => scopedName !== "XmlNode")
+              .filter(
+                (scopedName) =>
+                  scopedName !== "XmlNode" && scopedName !== "XmlTime"
+              )
               .map((scopedName) =>
                 scopedName === "Body"
                   ? // Using <svg> prevents React from hoisting elements like <title>, <meta>, and <link>

packages/sdk-components-react/src/components.ts

@@ -33,6 +33,7 @@ export { VimeoPreviewImage } from "./vimeo-preview-image";
 export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";
 export { XmlNode } from "./xml-node";
+export { XmlTime } from "./xml-time";
 export { Time } from "./time";
 export { Select } from "./select";
 export { Option } from "./option";

packages/sdk-components-react/src/metas.ts

@@ -34,6 +34,7 @@ export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { meta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { meta as XmlNode } from "./xml-node.ws";
+export { meta as XmlTime } from "./xml-time.ws";
 export { meta as Time } from "./time.ws";
 export { meta as Select } from "./select.ws";
 export { meta as Option } from "./option.ws";

packages/sdk-components-react/src/props.ts

@@ -33,6 +33,7 @@ export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { propsMeta as XmlNode } from "./xml-node.ws";
+export { propsMeta as XmlTime } from "./xml-time.ws";
 export { propsMeta as Time } from "./time.ws";
 export { propsMeta as Select } from "./select.ws";
 export { propsMeta as Option } from "./option.ws";

packages/sdk-components-react/src/xml-time.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, useContext, type ElementRef } from "react";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+
+const DEFAULT_DATE_STYLE = "short";
+const INITIAL_DATE_STRING = "dateTime attribute is not set";
+const INVALID_DATE_STRING = "";
+
+type XmlTimeProps = {
+  dateStyle?: "long" | "short";
+  datetime: string;
+};
+
+const parseDate = (datetimeString: string) => {
+  if (datetimeString === "") {
+    return;
+  }
+  let date = new Date(datetimeString);
+
+  // Check if the date already in valid format, e.g. "2024"
+  if (Number.isNaN(date.getTime()) === false) {
+    return date;
+  }
+
+  // If its a number, we assume it's a timestamp and we may need to normalize it
+  if (/^\d+$/.test(datetimeString)) {
+    let timestamp = Number(datetimeString);
+    // Normalize a 10-digit timestamp to 13-digit
+    if (datetimeString.length === 10) {
+      timestamp *= 1000;
+    }
+    date = new Date(timestamp);
+  }
+
+  if (Number.isNaN(date.getTime()) === false) {
+    return date;
+  }
+};
+
+export const XmlTime = forwardRef<ElementRef<"time">, XmlTimeProps>(
+  ({ dateStyle = DEFAULT_DATE_STYLE, datetime = INITIAL_DATE_STRING }, ref) => {
+    const { renderer } = useContext(ReactSdkContext);
+
+    const datetimeString =
+      datetime === null ? INVALID_DATE_STRING : datetime.toString();
+
+    const date = parseDate(datetimeString);
+
+    let formattedDate = datetimeString;
+    if (date) {
+      formattedDate = date.toISOString();
+      if (dateStyle === "short") {
+        formattedDate = formattedDate.split("T")[0];
+      }
+    }
+
+    if (renderer === undefined) {
+      return formattedDate;
+    }
+
+    return <time ref={ref}>{formattedDate}</time>;
+  }
+);

packages/sdk-components-react/src/xml-time.ws.ts

@@ -0,0 +1,22 @@
+import { CalendarIcon } from "@webstudio-is/icons/svg";
+
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+
+import { props } from "./__generated__/xml-time.props";
+
+export const meta: WsComponentMeta = {
+  category: "xml",
+  type: "container",
+  description: "Converts machine-readable date and time to ISO format.",
+  icon: CalendarIcon,
+  stylable: false,
+  order: 7,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["datetime", "dateStyle"],
+};