webstudio 0.267.0 → 0.269.0

package/templates/react-router/app/route-templates/text.tsx

@@ -0,0 +1,107 @@
+import { type LoaderFunctionArgs, redirect } from "react-router";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
+import { projectDomain } from "__CLIENT__";
+import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
+import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+const authenticateProductionRequest = (request: Request) => {
+  const host =
+    request.headers.get("x-forwarded-host") ||
+    request.headers.get("host") ||
+    "";
+
+  const requestHost = host.split(":")[0];
+  if (
+    projectDomain !== undefined &&
+    (requestHost === projectDomain ||
+      requestHost.startsWith(`${projectDomain}.`))
+  ) {
+    return;
+  }
+
+  return authenticateRequest(request, authRoutes);
+};
+
+const customFetch: typeof fetch = (input, init) => {
+  if (typeof input !== "string") {
+    return fetch(input, init);
+  }
+
+  if (isLocalResource(input, "sitemap.xml")) {
+    const response = new Response(JSON.stringify(sitemap));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1,
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "assets")) {
+    const response = new Response(JSON.stringify(assets));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  return fetch(input, init);
+};
+
+export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
+  const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
+  const params = getRemixParams(arg.params);
+
+  const system = {
+    params,
+    search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
+    pathname: url.pathname,
+  };
+
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
+  const pageMeta = getPageMeta({ system, resources });
+
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    return redirect(pageMeta.redirect, status);
+  }
+
+  return new Response(pageMeta.content ?? "", {
+    status: pageMeta.status,
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control":
+        authRoute === undefined ? "public, max-age=600" : "private, no-store",
+    },
+  });
+};

package/templates/react-router/app/route-templates/xml.tsx

@@ -1,15 +1,35 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "react-router";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   xmlNodeTagSuffix,
 } from "@webstudio-is/react-sdk/runtime";
-import { Page, breakpoints } from "__CLIENT__";
+import { Page, breakpoints, projectDomain } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
 import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+const authenticateProductionRequest = (request: Request) => {
+  const host =
+    request.headers.get("x-forwarded-host") ||
+    request.headers.get("host") ||
+    "";
+
+  const requestHost = host.split(":")[0];
+  if (
+    projectDomain !== undefined &&
+    (requestHost === projectDomain ||
+      requestHost.startsWith(`${projectDomain}.`))
+  ) {
+    return;
+  }
+
+  return authenticateRequest(request, authRoutes);
+};
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -51,6 +71,8 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
   const url = new URL(arg.request.url);
   const host =
     arg.request.headers.get("x-forwarded-host") ||
@@ -108,6 +130,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   text = text.replaceAll(xmlNodeTagSuffix, "");
 
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
-    headers: { "Content-Type": "application/xml" },
+    headers: {
+      "Content-Type": "application/xml",
+      "Cache-Control":
+        authRoute === undefined ? "public, max-age=600" : "private, no-store",
+    },
   });
 };

package/templates/react-router/package.json

@@ -10,13 +10,14 @@
   "dependencies": {
     "@react-router/dev": "^7.5.3",
     "@react-router/fs-routes": "^7.5.3",
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/sdk-components-animation": "0.267.0",
-    "@webstudio-is/sdk-components-react-radix": "0.267.0",
-    "@webstudio-is/sdk-components-react-router": "0.267.0",
-    "@webstudio-is/sdk-components-react": "0.267.0",
+    "@webstudio-is/image": "0.269.0",
+    "@webstudio-is/react-sdk": "0.269.0",
+    "@webstudio-is/sdk": "0.269.0",
+    "@webstudio-is/sdk-components-animation": "0.269.0",
+    "@webstudio-is/sdk-components-react-radix": "0.269.0",
+    "@webstudio-is/sdk-components-react-router": "0.269.0",
+    "@webstudio-is/sdk-components-react": "0.269.0",
+    "@webstudio-is/wsauth": "0.269.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/react-router-cloudflare/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
+    "@webstudio-is/wsauth": "0.269.0",
     "wrangler": "^4.14.1"
   }
 }

package/templates/ssg/app/route-templates/html/+Page.tsx

@@ -1,26 +1,49 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import type { PageContext } from "vike/types";
 import {
   PageSettingsMeta,
   PageSettingsTitle,
   ReactSdkContext,
 } from "@webstudio-is/react-sdk/runtime";
+import { LinkCurrentUrlContext } from "@webstudio-is/sdk-components-react";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { Page, breakpoints, siteName } from "__CLIENT__";
 
+const getPageKey = (url: string) => {
+  const { origin, pathname, search } = new URL(url);
+  return `${origin}${pathname}${search}`;
+};
+
+const PageBoundary = memo(
+  ({ pageKey, system }: ComponentProps<typeof Page> & { pageKey: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={pageKey} system={system} />;
+  },
+  // Vike can rerender the current page during client-side navigation and
+  // hash-only URL updates. Keep the generated page out of that render path,
+  // but let actual page URL changes remount it.
+  (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey
+);
+
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url, pageMeta } = data;
+  const pageKey = getPageKey(url);
+  const sdkContext = useMemo(
+    () => ({
+      imageLoader,
+      assetBaseUrl,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        imageLoader,
-        assetBaseUrl,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
-      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-      <Page key={url} system={system} />
+    <ReactSdkContext.Provider value={sdkContext}>
+      <LinkCurrentUrlContext.Provider value={url}>
+        <PageBoundary pageKey={pageKey} system={system} />
+      </LinkCurrentUrlContext.Provider>
       <PageSettingsMeta
         url={url}
         pageMeta={pageMeta}

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/sdk-components-react": "0.267.0",
-    "@webstudio-is/sdk-components-animation": "0.267.0",
-    "@webstudio-is/sdk-components-react-radix": "0.267.0",
+    "@webstudio-is/image": "0.269.0",
+    "@webstudio-is/react-sdk": "0.269.0",
+    "@webstudio-is/sdk": "0.269.0",
+    "@webstudio-is/sdk-components-react": "0.269.0",
+    "@webstudio-is/sdk-components-animation": "0.269.0",
+    "@webstudio-is/sdk-components-react-radix": "0.269.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"

package/templates/ssg/renderer/+onRenderClient.tsx

@@ -1,4 +1,4 @@
-import { type Root, createRoot } from "react-dom/client";
+import { type Root, hydrateRoot } from "react-dom/client";
 import type { OnRenderClientSync } from "vike/types";
 
 let root: Root;
@@ -19,7 +19,8 @@ export const onRenderClient: OnRenderClientSync = (pageContext) => {
     </>
   );
   if (root === undefined) {
-    root = createRoot(document.documentElement);
+    root = hydrateRoot(document.documentElement, htmlContent);
+    return;
   }
   document.documentElement.lang = lang;
   root.render(htmlContent);