webstudio 0.267.0 → 0.269.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.267.0",
+  "version": "0.269.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -43,8 +43,8 @@
     "warn-once": "^0.1.1",
     "yargs": "^17.7.2",
     "zod": "^3.24.2",
-    "@webstudio-is/project-migrations": "0.267.0",
-    "@webstudio-is/trpc-interface": "0.267.0"
+    "@webstudio-is/project-migrations": "0.269.0",
+    "@webstudio-is/trpc-interface": "0.269.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
@@ -74,17 +74,18 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.267.0",
-    "@webstudio-is/http-client": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0",
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/sdk-components-animation": "0.267.0",
-    "@webstudio-is/sdk-components-react": "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-remix": "0.267.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/http-client": "0.269.0",
+    "@webstudio-is/image": "0.269.0",
+    "@webstudio-is/react-sdk": "0.269.0",
+    "@webstudio-is/sdk-components-animation": "0.269.0",
+    "@webstudio-is/css-engine": "0.269.0",
+    "@webstudio-is/sdk": "0.269.0",
+    "@webstudio-is/sdk-components-react": "0.269.0",
+    "@webstudio-is/sdk-components-react-radix": "0.269.0",
+    "@webstudio-is/sdk-components-react-remix": "0.269.0",
+    "@webstudio-is/sdk-components-react-router": "0.269.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/wsauth": "0.269.0"
   },
   "scripts": {
     "typecheck": "tsgo --noEmit",

package/templates/cloudflare/package.json

@@ -12,6 +12,7 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
+    "@webstudio-is/wsauth": "0.269.0",
     "@remix-run/cloudflare": "2.16.5",
     "@remix-run/cloudflare-pages": "2.16.5"
   },

package/templates/defaults/app/redirect-url.ts

@@ -0,0 +1,21 @@
+import { createPath, generatePath, parsePath } from "@remix-run/react";
+
+/**
+ * Expands route params in local redirect targets.
+ * External and protocol-relative URLs are returned unchanged because route params
+ * only apply to app paths.
+ */
+export const generateRedirectUrl = (
+  url: string,
+  params: Record<string, string | undefined>
+) => {
+  if (url.startsWith("/") === false || url.startsWith("//")) {
+    return url;
+  }
+
+  const path = parsePath(url);
+  return createPath({
+    ...path,
+    pathname: generatePath(path.pathname ?? "/", params),
+  });
+};

package/templates/defaults/app/root.tsx

@@ -1,10 +1,19 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
 import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+import type { HeadersFunction } from "@remix-run/server-runtime";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
+  return {};
+};
+
 const Root = () => {
   // Get language from matches
   const matches = useMatches();

package/templates/defaults/app/route-templates/html.tsx

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import {
   type ServerRuntimeMetaFunction as MetaFunction,
   type LinksFunction,
@@ -17,6 +18,7 @@ import {
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   PageSettingsMeta,
@@ -25,6 +27,7 @@ import {
 } from "@webstudio-is/react-sdk/runtime";
 import {
   projectId,
+  projectDomain,
   Page,
   siteName,
   favIconAsset,
@@ -42,6 +45,25 @@ import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 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") {
@@ -83,6 +105,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") ||
@@ -133,13 +157,18 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     {
       status: pageMeta.status,
       headers: {
-        "Cache-Control": "public, max-age=600",
+        "Cache-Control":
+          authRoute === undefined ? "public, max-age=600" : "private, no-store",
       },
     }
   );
 };
 
-export const headers: HeadersFunction = () => {
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
   };
@@ -220,6 +249,8 @@ export const action = async ({
 }: ActionFunctionArgs): Promise<
   { success: true } | { success: false; errors: string[] }
 > => {
+  authenticateProductionRequest(request);
+
   try {
     const url = new URL(request.url);
     url.host = getRequestHost(request);
@@ -298,20 +329,33 @@ export const action = async ({
   }
 };
 
+const PageBoundary = memo(
+  ({ url, system }: ComponentProps<typeof Page> & { url: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={url} system={system} />;
+  },
+  // React Router can rerender the current route while the next route loaders are
+  // still pending. Keep the generated page out of that pending-navigation render
+  // path, but let URL changes remount it.
+  (prevProps, nextProps) => prevProps.url === nextProps.url
+);
+
 const Outlet = () => {
   const { system, resources, url, pageMeta, host } =
     useLoaderData<typeof loader>();
+  const sdkContext = useMemo(
+    () => ({
+      ...constants,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        ...constants,
-        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}>
+      <PageBoundary url={url} system={system} />
       <PageSettingsMeta
         url={url}
         pageMeta={pageMeta}

package/templates/defaults/app/route-templates/redirect.tsx

@@ -1,6 +1,7 @@
-import { redirect } from "@remix-run/server-runtime";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { generateRedirectUrl } from "../redirect-url";
 import { url, status } from "__REDIRECT__";
 
-export const loader = () => {
-  return redirect(url, status);
+export const loader = (arg: LoaderFunctionArgs) => {
+  return redirect(generateRedirectUrl(url, arg.params), status);
 };

package/templates/defaults/app/route-templates/text.tsx

@@ -0,0 +1,107 @@
+import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+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/defaults/app/route-templates/xml.tsx

@@ -1,15 +1,35 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 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") ||
@@ -104,6 +126,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/defaults/package.json

@@ -11,13 +11,14 @@
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@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/sdk-components-react-remix": "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",
+    "@webstudio-is/sdk-components-react-remix": "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/internal/package.json

@@ -6,6 +6,7 @@
     "@webstudio-is/sdk-components-animation": "workspace:*",
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
-    "@webstudio-is/sdk-components-react-remix": "workspace:*"
+    "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "@webstudio-is/wsauth": "workspace:*"
   }
 }

package/templates/react-router/app/redirect-url.ts

@@ -0,0 +1,21 @@
+import { createPath, generatePath, parsePath } from "react-router";
+
+/**
+ * Expands route params in local redirect targets.
+ * External and protocol-relative URLs are returned unchanged because route params
+ * only apply to app paths.
+ */
+export const generateRedirectUrl = (
+  url: string,
+  params: Record<string, string | undefined>
+) => {
+  if (url.startsWith("/") === false || url.startsWith("//")) {
+    return url;
+  }
+
+  const path = parsePath(url);
+  return createPath({
+    ...path,
+    pathname: generatePath(path.pathname ?? "/", params),
+  });
+};

package/templates/react-router/app/root.tsx

@@ -1,10 +1,24 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-import { Links, Meta, Outlet, useMatches } from "react-router";
+import {
+  type HeadersFunction,
+  Links,
+  Meta,
+  Outlet,
+  useMatches,
+} from "react-router";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
+  return {};
+};
+
 const Root = () => {
   // Get language from matches
   const matches = useMatches();

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

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import {
   type MetaFunction,
   type LinksFunction,
@@ -17,6 +18,7 @@ import {
   formBotFieldName,
   cachedFetch,
 } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   PageSettingsMeta,
@@ -24,6 +26,7 @@ import {
 } from "@webstudio-is/react-sdk/runtime";
 import {
   projectId,
+  projectDomain,
   Page,
   siteName,
   favIconAsset,
@@ -41,6 +44,25 @@ import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 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") {
@@ -82,6 +104,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") ||
@@ -132,13 +156,18 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     {
       status: pageMeta.status,
       headers: {
-        "Cache-Control": "public, max-age=600",
+        "Cache-Control":
+          authRoute === undefined ? "public, max-age=600" : "private, no-store",
       },
     }
   );
 };
 
-export const headers: HeadersFunction = () => {
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
   };
@@ -219,6 +248,8 @@ export const action = async ({
 }: ActionFunctionArgs): Promise<
   { success: true } | { success: false; errors: string[] }
 > => {
+  authenticateProductionRequest(request);
+
   try {
     const url = new URL(request.url);
     url.host = getRequestHost(request);
@@ -297,20 +328,33 @@ export const action = async ({
   }
 };
 
+const PageBoundary = memo(
+  ({ url, system }: ComponentProps<typeof Page> & { url: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={url} system={system} />;
+  },
+  // React Router can rerender the current route while the next route loaders are
+  // still pending. Keep the generated page out of that pending-navigation render
+  // path, but let URL changes remount it.
+  (prevProps, nextProps) => prevProps.url === nextProps.url
+);
+
 const Outlet = () => {
   const { system, resources, url, pageMeta, host } =
     useLoaderData<typeof loader>();
+  const sdkContext = useMemo(
+    () => ({
+      ...constants,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        ...constants,
-        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}>
+      <PageBoundary url={url} system={system} />
       <PageSettingsMeta
         url={url}
         pageMeta={pageMeta}

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

@@ -1,6 +1,7 @@
-import { redirect } from "react-router";
+import { type LoaderFunctionArgs, redirect } from "react-router";
+import { generateRedirectUrl } from "../redirect-url";
 import { url, status } from "__REDIRECT__";
 
-export const loader = () => {
-  throw redirect(url, status);
+export const loader = (arg: LoaderFunctionArgs) => {
+  throw redirect(generateRedirectUrl(url, arg.params), status);
 };