webstudio 0.268.0 → 0.270.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.268.0",
+  "version": "0.270.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/trpc-interface": "0.268.0",
-    "@webstudio-is/project-migrations": "0.268.0"
+    "@webstudio-is/project-migrations": "0.270.0",
+    "@webstudio-is/trpc-interface": "0.270.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
@@ -74,18 +74,18 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.268.0",
-    "@webstudio-is/http-client": "0.268.0",
-    "@webstudio-is/image": "0.268.0",
-    "@webstudio-is/react-sdk": "0.268.0",
-    "@webstudio-is/sdk": "0.268.0",
-    "@webstudio-is/sdk-components-animation": "0.268.0",
-    "@webstudio-is/sdk-components-react-radix": "0.268.0",
-    "@webstudio-is/sdk-components-react-remix": "0.268.0",
-    "@webstudio-is/sdk-components-react-router": "0.268.0",
-    "@webstudio-is/sdk-components-react": "0.268.0",
-    "@webstudio-is/wsauth": "0.268.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/css-engine": "0.270.0",
+    "@webstudio-is/image": "0.270.0",
+    "@webstudio-is/http-client": "0.270.0",
+    "@webstudio-is/react-sdk": "0.270.0",
+    "@webstudio-is/sdk": "0.270.0",
+    "@webstudio-is/sdk-components-animation": "0.270.0",
+    "@webstudio-is/sdk-components-react": "0.270.0",
+    "@webstudio-is/sdk-components-react-radix": "0.270.0",
+    "@webstudio-is/sdk-components-react-remix": "0.270.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk-components-react-router": "0.270.0",
+    "@webstudio-is/wsauth": "0.270.0"
   },
   "scripts": {
     "typecheck": "tsgo --noEmit",

package/templates/cloudflare/package.json

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

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

@@ -0,0 +1,167 @@
+import {
+  createPath,
+  generatePath,
+  matchPath,
+  parsePath,
+} from "@remix-run/react";
+import { redirect } from "@remix-run/server-runtime";
+
+type RedirectItem = {
+  old: string;
+  new: string;
+  status?: number | string;
+};
+
+type MatchedRedirect = {
+  url: string;
+  status: number;
+};
+
+/**
+ * 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 (
+    /^[a-zA-Z][a-zA-Z\d+.-]*:/.test(url) ||
+    url.startsWith("//") ||
+    url.startsWith("?") ||
+    url.startsWith("#")
+  ) {
+    return url;
+  }
+
+  const targetParams = Object.fromEntries(
+    Object.entries(params).map(([name, value]) => [
+      name,
+      name === "*" ? value : value?.replaceAll("/", "%2F"),
+    ])
+  );
+  const path = parsePath(url);
+  try {
+    return createPath({
+      ...path,
+      pathname: generatePath(path.pathname ?? "/", targetParams),
+    });
+  } catch {
+    return url;
+  }
+};
+
+const stripHash = (source: string) => {
+  const hashIndex = source.indexOf("#");
+  return hashIndex === -1 ? source : source.slice(0, hashIndex);
+};
+
+const getRedirectStatus = (status: RedirectItem["status"]) => {
+  return Number(status) === 302 ? 302 : 301;
+};
+
+const decodePathname = (pathname: string) => {
+  try {
+    return decodeURI(pathname);
+  } catch {
+    return pathname;
+  }
+};
+
+const getPathnameVariants = (pathname: string) => {
+  return Array.from(new Set([pathname, decodePathname(pathname)]));
+};
+
+const isOptionalSegmentMarker = (source: string, index: number) => {
+  const nextChar = source[index + 1];
+  if (nextChar !== undefined && nextChar !== "/") {
+    return false;
+  }
+
+  const segmentStart = source.lastIndexOf("/", index - 1);
+  const segment = source.slice(segmentStart + 1, index);
+  return segment !== "";
+};
+
+const getSourceSearchIndex = (source: string) => {
+  for (let index = 0; index < source.length; index += 1) {
+    if (
+      source[index] === "?" &&
+      isOptionalSegmentMarker(source, index) === false
+    ) {
+      return index;
+    }
+  }
+  return -1;
+};
+
+const isRedirectPattern = (source: string) => {
+  return (
+    /(^|\/):[^/]+/.test(source) ||
+    /(^|\/)\*(?=\/|$)/.test(source) ||
+    /(^|\/)[^/]+\?(?=\/|$)/.test(source)
+  );
+};
+
+export const matchRedirect = (
+  requestUrl: string,
+  redirects: RedirectItem[]
+): MatchedRedirect | undefined => {
+  const url = new URL(requestUrl);
+  const requestPathnames = getPathnameVariants(url.pathname);
+
+  for (const redirect of redirects) {
+    const source = stripHash(redirect.old);
+    if (getSourceSearchIndex(source) !== -1) {
+      const exactMatch = requestPathnames.some(
+        (requestPathname) => source === `${requestPathname}${url.search}`
+      );
+      if (exactMatch) {
+        return {
+          url: generateRedirectUrl(redirect.new, {}),
+          status: getRedirectStatus(redirect.status),
+        };
+      }
+      continue;
+    }
+
+    if (isRedirectPattern(source) === false) {
+      if (requestPathnames.includes(source)) {
+        return {
+          url: generateRedirectUrl(redirect.new, {}),
+          status: getRedirectStatus(redirect.status),
+        };
+      }
+      continue;
+    }
+
+    const match = requestPathnames
+      .map((requestPathname) =>
+        matchPath(
+          { path: source, caseSensitive: true, end: true },
+          requestPathname
+        )
+      )
+      .find((match) => match !== null);
+    if (match === undefined) {
+      continue;
+    }
+
+    return {
+      url: generateRedirectUrl(redirect.new, match.params),
+      status: getRedirectStatus(redirect.status),
+    };
+  }
+};
+
+export const redirectRequest = (
+  request: Request,
+  redirects: RedirectItem[]
+): Response | undefined => {
+  const matchedRedirect = matchRedirect(request.url, redirects);
+  if (matchedRedirect === undefined) {
+    return;
+  }
+  return redirect(matchedRedirect.url, matchedRedirect.status);
+};

package/templates/defaults/app/root.tsx

@@ -1,10 +1,25 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
 import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
-import type { HeadersFunction } from "@remix-run/server-runtime";
+import type {
+  HeadersFunction,
+  LoaderFunctionArgs,
+} from "@remix-run/server-runtime";
+import { redirectRequest } from "./redirect-url";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
+// @ts-ignore
+import { redirects } from "./__generated__/$resources.redirects";
+
+export const loader = ({ request }: LoaderFunctionArgs) => {
+  const redirectResponse = redirectRequest(request, redirects);
+  if (redirectResponse !== undefined) {
+    return redirectResponse;
+  }
+
+  return null;
+};
 
 export const headers: HeadersFunction = ({ errorHeaders }) => {
   if (errorHeaders) {

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,
@@ -328,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/package.json

@@ -11,14 +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.268.0",
-    "@webstudio-is/react-sdk": "0.268.0",
-    "@webstudio-is/sdk": "0.268.0",
-    "@webstudio-is/sdk-components-react": "0.268.0",
-    "@webstudio-is/sdk-components-animation": "0.268.0",
-    "@webstudio-is/sdk-components-react-radix": "0.268.0",
-    "@webstudio-is/sdk-components-react-remix": "0.268.0",
-    "@webstudio-is/wsauth": "0.268.0",
+    "@webstudio-is/image": "0.270.0",
+    "@webstudio-is/react-sdk": "0.270.0",
+    "@webstudio-is/sdk": "0.270.0",
+    "@webstudio-is/sdk-components-react": "0.270.0",
+    "@webstudio-is/sdk-components-animation": "0.270.0",
+    "@webstudio-is/sdk-components-react-radix": "0.270.0",
+    "@webstudio-is/sdk-components-react-remix": "0.270.0",
+    "@webstudio-is/wsauth": "0.270.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

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

@@ -0,0 +1,167 @@
+import {
+  createPath,
+  generatePath,
+  matchPath,
+  parsePath,
+  redirect,
+} from "react-router";
+
+type RedirectItem = {
+  old: string;
+  new: string;
+  status?: number | string;
+};
+
+type MatchedRedirect = {
+  url: string;
+  status: number;
+};
+
+/**
+ * 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 (
+    /^[a-zA-Z][a-zA-Z\d+.-]*:/.test(url) ||
+    url.startsWith("//") ||
+    url.startsWith("?") ||
+    url.startsWith("#")
+  ) {
+    return url;
+  }
+
+  const targetParams = Object.fromEntries(
+    Object.entries(params).map(([name, value]) => [
+      name,
+      name === "*" ? value : value?.replaceAll("/", "%2F"),
+    ])
+  );
+  const path = parsePath(url);
+  try {
+    return createPath({
+      ...path,
+      pathname: generatePath(path.pathname ?? "/", targetParams),
+    });
+  } catch {
+    return url;
+  }
+};
+
+const stripHash = (source: string) => {
+  const hashIndex = source.indexOf("#");
+  return hashIndex === -1 ? source : source.slice(0, hashIndex);
+};
+
+const getRedirectStatus = (status: RedirectItem["status"]) => {
+  return Number(status) === 302 ? 302 : 301;
+};
+
+const decodePathname = (pathname: string) => {
+  try {
+    return decodeURI(pathname);
+  } catch {
+    return pathname;
+  }
+};
+
+const getPathnameVariants = (pathname: string) => {
+  return Array.from(new Set([pathname, decodePathname(pathname)]));
+};
+
+const isOptionalSegmentMarker = (source: string, index: number) => {
+  const nextChar = source[index + 1];
+  if (nextChar !== undefined && nextChar !== "/") {
+    return false;
+  }
+
+  const segmentStart = source.lastIndexOf("/", index - 1);
+  const segment = source.slice(segmentStart + 1, index);
+  return segment !== "";
+};
+
+const getSourceSearchIndex = (source: string) => {
+  for (let index = 0; index < source.length; index += 1) {
+    if (
+      source[index] === "?" &&
+      isOptionalSegmentMarker(source, index) === false
+    ) {
+      return index;
+    }
+  }
+  return -1;
+};
+
+const isRedirectPattern = (source: string) => {
+  return (
+    /(^|\/):[^/]+/.test(source) ||
+    /(^|\/)\*(?=\/|$)/.test(source) ||
+    /(^|\/)[^/]+\?(?=\/|$)/.test(source)
+  );
+};
+
+export const matchRedirect = (
+  requestUrl: string,
+  redirects: RedirectItem[]
+): MatchedRedirect | undefined => {
+  const url = new URL(requestUrl);
+  const requestPathnames = getPathnameVariants(url.pathname);
+
+  for (const redirect of redirects) {
+    const source = stripHash(redirect.old);
+    if (getSourceSearchIndex(source) !== -1) {
+      const exactMatch = requestPathnames.some(
+        (requestPathname) => source === `${requestPathname}${url.search}`
+      );
+      if (exactMatch) {
+        return {
+          url: generateRedirectUrl(redirect.new, {}),
+          status: getRedirectStatus(redirect.status),
+        };
+      }
+      continue;
+    }
+
+    if (isRedirectPattern(source) === false) {
+      if (requestPathnames.includes(source)) {
+        return {
+          url: generateRedirectUrl(redirect.new, {}),
+          status: getRedirectStatus(redirect.status),
+        };
+      }
+      continue;
+    }
+
+    const match = requestPathnames
+      .map((requestPathname) =>
+        matchPath(
+          { path: source, caseSensitive: true, end: true },
+          requestPathname
+        )
+      )
+      .find((match) => match !== null);
+    if (match === undefined) {
+      continue;
+    }
+
+    return {
+      url: generateRedirectUrl(redirect.new, match.params),
+      status: getRedirectStatus(redirect.status),
+    };
+  }
+};
+
+export const redirectRequest = (
+  request: Request,
+  redirects: RedirectItem[]
+): Response | undefined => {
+  const matchedRedirect = matchRedirect(request.url, redirects);
+  if (matchedRedirect === undefined) {
+    return;
+  }
+  return redirect(matchedRedirect.url, matchedRedirect.status);
+};

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

@@ -2,14 +2,27 @@
 
 import {
   type HeadersFunction,
+  type LoaderFunctionArgs,
   Links,
   Meta,
   Outlet,
   useMatches,
 } from "react-router";
+import { redirectRequest } from "./redirect-url";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
+// @ts-ignore
+import { redirects } from "./__generated__/$resources.redirects";
+
+export const loader = ({ request }: LoaderFunctionArgs) => {
+  const redirectResponse = redirectRequest(request, redirects);
+  if (redirectResponse !== undefined) {
+    return redirectResponse;
+  }
+
+  return null;
+};
 
 export const headers: HeadersFunction = ({ errorHeaders }) => {
   if (errorHeaders) {

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,
@@ -327,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/package.json

@@ -10,14 +10,14 @@
   "dependencies": {
     "@react-router/dev": "^7.5.3",
     "@react-router/fs-routes": "^7.5.3",
-    "@webstudio-is/image": "0.268.0",
-    "@webstudio-is/react-sdk": "0.268.0",
-    "@webstudio-is/sdk": "0.268.0",
-    "@webstudio-is/sdk-components-animation": "0.268.0",
-    "@webstudio-is/sdk-components-react-radix": "0.268.0",
-    "@webstudio-is/sdk-components-react-router": "0.268.0",
-    "@webstudio-is/sdk-components-react": "0.268.0",
-    "@webstudio-is/wsauth": "0.268.0",
+    "@webstudio-is/image": "0.270.0",
+    "@webstudio-is/react-sdk": "0.270.0",
+    "@webstudio-is/sdk": "0.270.0",
+    "@webstudio-is/sdk-components-animation": "0.270.0",
+    "@webstudio-is/sdk-components-react-radix": "0.270.0",
+    "@webstudio-is/sdk-components-react-router": "0.270.0",
+    "@webstudio-is/sdk-components-react": "0.270.0",
+    "@webstudio-is/wsauth": "0.270.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,7 +7,7 @@
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
-    "@webstudio-is/wsauth": "0.268.0",
+    "@webstudio-is/wsauth": "0.270.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.268.0",
-    "@webstudio-is/react-sdk": "0.268.0",
-    "@webstudio-is/sdk": "0.268.0",
-    "@webstudio-is/sdk-components-react": "0.268.0",
-    "@webstudio-is/sdk-components-animation": "0.268.0",
-    "@webstudio-is/sdk-components-react-radix": "0.268.0",
+    "@webstudio-is/image": "0.270.0",
+    "@webstudio-is/react-sdk": "0.270.0",
+    "@webstudio-is/sdk": "0.270.0",
+    "@webstudio-is/sdk-components-react": "0.270.0",
+    "@webstudio-is/sdk-components-animation": "0.270.0",
+    "@webstudio-is/sdk-components-react-radix": "0.270.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"