webstudio 0.269.0 → 0.271.0

package/package.json

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

package/templates/cloudflare/package.json

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

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

@@ -1,4 +1,21 @@
-import { createPath, generatePath, parsePath } from "@remix-run/react";
+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.
@@ -9,13 +26,142 @@ export const generateRedirectUrl = (
   url: string,
   params: Record<string, string | undefined>
 ) => {
-  if (url.startsWith("/") === false || url.startsWith("//")) {
+  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);
-  return createPath({
-    ...path,
-    pathname: generatePath(path.pathname ?? "/", params),
-  });
+  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/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.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",
+    "@webstudio-is/image": "0.271.0",
+    "@webstudio-is/react-sdk": "0.271.0",
+    "@webstudio-is/sdk": "0.271.0",
+    "@webstudio-is/sdk-components-react": "0.271.0",
+    "@webstudio-is/sdk-components-animation": "0.271.0",
+    "@webstudio-is/sdk-components-react-radix": "0.271.0",
+    "@webstudio-is/sdk-components-react-remix": "0.271.0",
+    "@webstudio-is/wsauth": "0.271.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

@@ -1,4 +1,21 @@
-import { createPath, generatePath, parsePath } from "react-router";
+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.
@@ -9,13 +26,142 @@ export const generateRedirectUrl = (
   url: string,
   params: Record<string, string | undefined>
 ) => {
-  if (url.startsWith("/") === false || url.startsWith("//")) {
+  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);
-  return createPath({
-    ...path,
-    pathname: generatePath(path.pathname ?? "/", params),
-  });
+  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/package.json

@@ -10,14 +10,14 @@
   "dependencies": {
     "@react-router/dev": "^7.5.3",
     "@react-router/fs-routes": "^7.5.3",
-    "@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",
+    "@webstudio-is/image": "0.271.0",
+    "@webstudio-is/react-sdk": "0.271.0",
+    "@webstudio-is/sdk": "0.271.0",
+    "@webstudio-is/sdk-components-animation": "0.271.0",
+    "@webstudio-is/sdk-components-react-radix": "0.271.0",
+    "@webstudio-is/sdk-components-react-router": "0.271.0",
+    "@webstudio-is/sdk-components-react": "0.271.0",
+    "@webstudio-is/wsauth": "0.271.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.269.0",
+    "@webstudio-is/wsauth": "0.271.0",
     "wrangler": "^4.14.1"
   }
 }

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
-    "@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/image": "0.271.0",
+    "@webstudio-is/react-sdk": "0.271.0",
+    "@webstudio-is/sdk": "0.271.0",
+    "@webstudio-is/sdk-components-react": "0.271.0",
+    "@webstudio-is/sdk-components-animation": "0.271.0",
+    "@webstudio-is/sdk-components-react-radix": "0.271.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"

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

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

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

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