Merge branch 'main' into release-03-11-2025.staging

Author: kof

apps/builder/app/builder/features/pages/page-utils.test.ts

@@ -37,6 +37,7 @@ registerContainers();
 const initialSystem = {
   origin: "https://undefined.wstd.work",
   params: {},
+  pathname: "/",
   search: {},
 };
 
@@ -586,6 +587,7 @@ test("page root scope should provide page system variable value", () => {
       $ws$dataSource$systemId: {
         origin: "https://undefined.wstd.work",
         params: {},
+        pathname: "/",
         search: {},
       },
     },
@@ -594,6 +596,7 @@ test("page root scope should provide page system variable value", () => {
         "systemId",
         {
           params: {},
+          pathname: "/",
           search: {},
           origin: "https://undefined.wstd.work",
         },
@@ -608,6 +611,7 @@ test("page root scope should provide page system variable value", () => {
     scope: {
       $ws$dataSource$systemId: {
         params: { slug: "my-post" },
+        pathname: "/",
         search: {},
         origin: "https://undefined.wstd.work",
       },
@@ -617,6 +621,7 @@ test("page root scope should provide page system variable value", () => {
         "systemId",
         {
           params: { slug: "my-post" },
+          pathname: "/",
           search: {},
           origin: "https://undefined.wstd.work",
         },

apps/builder/app/builder/features/settings-panel/resource-panel.tsx

@@ -25,7 +25,11 @@ import {
   SYSTEM_VARIABLE_ID,
   systemParameter,
 } from "@webstudio-is/sdk";
-import { serializeValue, sitemapResourceUrl } from "@webstudio-is/sdk/runtime";
+import {
+  serializeValue,
+  sitemapResourceUrl,
+  currentDateResourceUrl,
+} from "@webstudio-is/sdk/runtime";
 import {
   Box,
   Flex,
@@ -989,6 +993,12 @@ export const SystemResourceForm = forwardRef<
       value: JSON.stringify(sitemapResourceUrl),
       description: "Resource that loads the sitemap data of the current site.",
     },
+    {
+      label: "Current Date",
+      value: JSON.stringify(currentDateResourceUrl),
+      description:
+        "Provides current date information (year, month, day) normalized to midnight UTC. Time components are set to 00:00:00 to prevent React hydration errors.",
+    },
   ];
 
   const [localResource, setLocalResource] = useState(() => {

apps/builder/app/routes/rest.resources-loader.ts

@@ -3,6 +3,7 @@ import { type ActionFunctionArgs, data } from "@remix-run/server-runtime";
 import { ResourceRequest } from "@webstudio-is/sdk";
 import { isLocalResource, loadResource } from "@webstudio-is/sdk/runtime";
 import { loader as siteMapLoader } from "../shared/$resources/sitemap.xml.server";
+import { loader as currentDateLoader } from "../shared/$resources/current-date.server";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";
 import { checkCsrf } from "~/services/csrf-session.server";
 import { getResourceKey } from "~/shared/resources";
@@ -21,6 +22,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       return siteMapLoader({ request });
     }
 
+    if (isLocalResource(input, "current-date")) {
+      return currentDateLoader({ request });
+    }
+
     return fetch(input, init);
   };
 

apps/builder/app/shared/$resources/current-date.server.ts

@@ -0,0 +1,39 @@
+import { json } from "@remix-run/server-runtime";
+import { parseBuilderUrl } from "@webstudio-is/http-client";
+import { isBuilder } from "../router-utils";
+
+/**
+ * System Resource that provides current date information.
+ * This prevents React hydration errors when displaying dynamic dates
+ * (e.g., copyright years in footers) by ensuring server and client
+ * render the same date.
+ *
+ * All values are normalized to midnight UTC (00:00:00.000Z) to ensure
+ * consistency throughout the entire day, preventing hydration mismatches.
+ */
+export const loader = async ({ request }: { request: Request }) => {
+  if (isBuilder(request) === false) {
+    throw new Error("Only builder requests are allowed");
+  }
+
+  const { projectId } = parseBuilderUrl(request.url);
+
+  if (projectId === undefined) {
+    throw new Error("projectId is required");
+  }
+
+  const now = new Date();
+
+  // Normalize to midnight UTC to prevent hydration mismatches
+  const startOfDay = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+  );
+
+  return json({
+    iso: startOfDay.toISOString(),
+    year: startOfDay.getUTCFullYear(),
+    month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+    day: startOfDay.getUTCDate(),
+    timestamp: startOfDay.getTime(),
+  });
+};

apps/builder/app/shared/nano-states/props.test.tsx

@@ -36,6 +36,7 @@ import { $resourcesCache, getResourceKey } from "../resources";
 const initialSystem = {
   origin: "https://undefined.wstd.work",
   params: {},
+  pathname: "/",
   search: {},
 };
 
@@ -917,6 +918,7 @@ test("provide page system variable value", () => {
       ?.get(systemId)
   ).toEqual({
     params: { slug: "my-post" },
+    pathname: "/",
     search: {},
     origin: "https://undefined.wstd.work",
   });
@@ -948,6 +950,7 @@ test("provide global system variable value", () => {
   });
   const updatedSystem = {
     params: { slug: "my-post" },
+    pathname: "/",
     search: {},
     origin: "https://undefined.wstd.work",
   };

apps/builder/app/shared/system.ts

@@ -34,16 +34,20 @@ export const $currentSystem = computed(
     const system: System = {
       search: {},
       params: {},
+      pathname: "/",
       origin,
     };
     if (page === undefined) {
       return system;
     }
     const systemData = systemByPage.get(page.id);
     const extractedParams = extractParams(page.path, page.history?.[0]);
+    const params = { ...extractedParams, ...systemData?.params };
+    const pathname = compilePath(page.path, params) || "/";
     return {
       search: { ...system.search, ...systemData?.search },
-      params: { ...extractedParams, ...systemData?.params },
+      params,
+      pathname,
       origin,
     };
   }

fixtures/react-router-cloudflare/app/routes/[another-page]._index.tsx

@@ -70,6 +70,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(
@@ -203,6 +204,7 @@ export const action = async ({
       params: {},
       search: {},
       origin: url.origin,
+      pathname: url.pathname,
     };
 
     const resourceName = formData.get(formIdFieldName);

fixtures/react-router-cloudflare/app/routes/_index.tsx

@@ -70,6 +70,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(
@@ -203,6 +204,7 @@ export const action = async ({
       params: {},
       search: {},
       origin: url.origin,
+      pathname: url.pathname,
     };
 
     const resourceName = formData.get(formIdFieldName);

fixtures/react-router-docker/app/routes/[another-page]._index.tsx

@@ -70,6 +70,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(
@@ -203,6 +204,7 @@ export const action = async ({
       params: {},
       search: {},
       origin: url.origin,
+      pathname: url.pathname,
     };
 
     const resourceName = formData.get(formIdFieldName);

fixtures/react-router-docker/app/routes/_index.tsx

@@ -70,6 +70,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     params,
     search: Object.fromEntries(url.searchParams),
     origin: url.origin,
+    pathname: url.pathname,
   };
 
   const resources = await loadResources(
@@ -203,6 +204,7 @@ export const action = async ({
       params: {},
       search: {},
       origin: url.origin,
+      pathname: url.pathname,
     };
 
     const resourceName = formData.get(formIdFieldName);