webstudio 0.0.0-588fe22 → 0.0.0-7cb4145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.0.0-588fe22",
+  "version": "0.0.0-7cb4145",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -26,58 +26,61 @@
     "node": ">=20.12"
   },
   "dependencies": {
-    "@clack/prompts": "^0.9.1",
+    "@clack/prompts": "^0.10.0",
     "@emotion/hash": "^0.9.2",
-    "acorn": "^8.14.0",
+    "acorn": "^8.14.1",
     "acorn-walk": "^8.3.4",
     "change-case": "^5.4.4",
     "deepmerge": "^4.3.1",
     "env-paths": "^3.0.0",
-    "nanoid": "^5.0.9",
+    "nanoid": "^5.1.5",
     "p-limit": "^6.2.0",
-    "parse5": "7.2.1",
+    "parse5": "7.3.0",
     "picocolors": "^1.1.1",
     "reserved-identifiers": "^1.0.0",
     "tinyexec": "^0.3.2",
     "yargs": "^17.7.2",
-    "zod": "^3.22.4"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@netlify/remix-adapter": "^2.5.1",
-    "@netlify/remix-edge-adapter": "3.4.2",
-    "@react-router/dev": "^7.1.3",
-    "@react-router/fs-routes": "^7.1.3",
-    "@remix-run/cloudflare": "^2.15.2",
-    "@remix-run/cloudflare-pages": "^2.15.2",
-    "@remix-run/dev": "^2.15.2",
-    "@remix-run/node": "^2.15.2",
-    "@remix-run/react": "^2.15.2",
-    "@remix-run/server-runtime": "^2.15.2",
+    "@cloudflare/vite-plugin": "^1.1.0",
+    "@netlify/vite-plugin-react-router": "^1.0.1",
+    "@react-router/dev": "^7.5.3",
+    "@react-router/fs-routes": "^7.5.3",
+    "@remix-run/cloudflare": "^2.16.5",
+    "@remix-run/cloudflare-pages": "^2.16.5",
+    "@remix-run/dev": "^2.16.5",
+    "@remix-run/node": "^2.16.5",
+    "@remix-run/react": "^2.16.5",
+    "@remix-run/server-runtime": "^2.16.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
-    "@vitejs/plugin-react": "^4.3.4",
-    "h3": "^1.14.0",
-    "ipx": "^3.0.1",
-    "prettier": "3.4.2",
+    "@vercel/react-router": "^1.1.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "h3": "^1.15.1",
+    "ipx": "^3.0.3",
+    "isbot": "^5.1.25",
+    "prettier": "3.5.3",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.1.3",
+    "react-router": "^7.5.3",
     "ts-expect": "^1.3.0",
-    "vike": "^0.4.219",
-    "vite": "^5.4.11",
-    "vitest": "^3.0.2",
+    "vike": "^0.4.229",
+    "vite": "^6.3.4",
+    "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/http-client": "0.0.0-588fe22",
-    "@webstudio-is/react-sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk": "0.0.0-588fe22",
-    "@webstudio-is/image": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-animation": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-remix": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-router": "0.0.0-588fe22",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/http-client": "0.0.0-7cb4145",
+    "@webstudio-is/image": "0.0.0-7cb4145",
+    "@webstudio-is/css-engine": "0.0.0-7cb4145",
+    "@webstudio-is/sdk": "0.0.0-7cb4145",
+    "@webstudio-is/react-sdk": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-animation": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react-remix": "0.0.0-7cb4145",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk-components-react-router": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react": "0.0.0-7cb4145"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/cloudflare/package.json

@@ -12,8 +12,8 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.15.2",
-    "@remix-run/cloudflare-pages": "2.15.2"
+    "@remix-run/cloudflare": "2.16.5",
+    "@remix-run/cloudflare-pages": "2.16.5"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",

package/templates/cloudflare/vite.config.ts

@@ -18,4 +18,12 @@ export default defineConfig(({ mode }) => ({
       },
     }),
   ].filter(Boolean),
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 }));

package/templates/defaults/app/root.tsx

@@ -3,7 +3,7 @@
 import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
-import { CustomCode } from "./__generated__/_index";
+import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
 const Root = () => {
   // Get language from matches
@@ -19,7 +19,11 @@ const Root = () => {
   const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
 
   return (
-    <html lang={lang}>
+    <html
+      lang={lang}
+      data-ws-project={projectId}
+      data-ws-last-published={lastPublished}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />

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

@@ -23,17 +23,18 @@ import {
   PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
+  projectId,
   Page,
   siteName,
   favIconAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
+  breakpoints,
 } from "__CLIENT__";
 import {
   getResources,
   getPageMeta,
   getRemixParams,
-  projectId,
   contactEmail,
 } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
@@ -151,7 +152,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: `${assetBaseUrl}${favIconAsset.name}`,
+        src: `${assetBaseUrl}${favIconAsset}`,
         // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
         width: 144,
         height: 144,
@@ -166,7 +167,7 @@ export const links: LinksFunction = () => {
   for (const asset of pageFontAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${asset.name}`,
+      href: `${assetBaseUrl}${asset}`,
       as: "font",
       crossOrigin: "anonymous",
     });
@@ -175,7 +176,7 @@ export const links: LinksFunction = () => {
   for (const backgroundImageAsset of pageBackgroundImageAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${backgroundImageAsset.name}`,
+      href: `${assetBaseUrl}${backgroundImageAsset}`,
       as: "image",
     });
   }
@@ -232,10 +233,6 @@ export const action = async ({
     formData.delete(formBotFieldName);
 
     if (resource) {
-      resource.headers.push({
-        name: "Content-Type",
-        value: "application/json",
-      });
       resource.body = Object.fromEntries(formData);
     } else {
       if (contactEmail === undefined) {
@@ -277,6 +274,8 @@ const Outlet = () => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
@@ -287,6 +286,7 @@ const Outlet = () => {
         host={host}
         siteName={siteName}
         imageLoader={imageLoader}
+        assetBaseUrl={assetBaseUrl}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
       <PageSettingsCanonicalLink href={url} />

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

@@ -5,7 +5,7 @@ import {
   ReactSdkContext,
   xmlNodeTagSuffix,
 } from "@webstudio-is/react-sdk/runtime";
-import { Page } from "__CLIENT__";
+import { Page, breakpoints } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
@@ -65,16 +65,14 @@ export const loader = async (arg: LoaderFunctionArgs) => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
+        onError: console.error,
       }}
     >
       <Page system={system} />
     </ReactSdkContext.Provider>
   );
 
-  // Xml is wrapped with <svg> to prevent React from hoisting elements like <title>, <meta>, and <link> out of their intended scope during rendering.
-  // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
-  text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
-
   // React has issues rendering certain elements, such as errors when a <link> element has children.
   // To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
   text = text.replaceAll(xmlNodeTagSuffix, "");

package/templates/defaults/package.json

@@ -8,26 +8,26 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.15.2",
-    "@remix-run/react": "2.15.2",
-    "@remix-run/server-runtime": "2.15.2",
-    "@webstudio-is/image": "0.0.0-588fe22",
-    "@webstudio-is/react-sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-animation": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-radix": "0.0.0-588fe22",
-    "@webstudio-is/sdk-components-react-remix": "0.0.0-588fe22",
-    "isbot": "^5.1.21",
+    "@remix-run/node": "2.16.5",
+    "@remix-run/react": "2.16.5",
+    "@remix-run/server-runtime": "2.16.5",
+    "@webstudio-is/image": "0.0.0-7cb4145",
+    "@webstudio-is/react-sdk": "0.0.0-7cb4145",
+    "@webstudio-is/sdk": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-animation": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react-remix": "0.0.0-7cb4145",
+    "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.15.2",
+    "@remix-run/dev": "2.16.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "typescript": "5.7.3",
-    "vite": "^5.4.11"
+    "typescript": "5.8.2",
+    "vite": "^6.3.4"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/defaults/vite.config.ts

@@ -13,4 +13,12 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
 });

package/templates/{react-router-docker → react-router}/app/root.tsx

@@ -3,7 +3,7 @@
 import { Links, Meta, Outlet, useMatches } from "react-router";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
-import { CustomCode } from "./__generated__/_index";
+import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
 const Root = () => {
   // Get language from matches
@@ -19,7 +19,11 @@ const Root = () => {
   const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
 
   return (
-    <html lang={lang}>
+    <html
+      lang={lang}
+      data-ws-project={projectId}
+      data-ws-last-published={lastPublished}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />

package/templates/{react-router-docker → react-router}/app/route-templates/html.tsx

@@ -22,17 +22,18 @@ import {
   PageSettingsTitle,
 } from "@webstudio-is/react-sdk/runtime";
 import {
+  projectId,
   Page,
   siteName,
   favIconAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
+  breakpoints,
 } from "__CLIENT__";
 import {
   getResources,
   getPageMeta,
   getRemixParams,
-  projectId,
   contactEmail,
 } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
@@ -150,7 +151,7 @@ export const links: LinksFunction = () => {
     result.push({
       rel: "icon",
       href: imageLoader({
-        src: `${assetBaseUrl}${favIconAsset.name}`,
+        src: `${assetBaseUrl}${favIconAsset}`,
         // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
         width: 144,
         height: 144,
@@ -165,7 +166,7 @@ export const links: LinksFunction = () => {
   for (const asset of pageFontAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${asset.name}`,
+      href: `${assetBaseUrl}${asset}`,
       as: "font",
       crossOrigin: "anonymous",
     });
@@ -174,7 +175,7 @@ export const links: LinksFunction = () => {
   for (const backgroundImageAsset of pageBackgroundImageAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${backgroundImageAsset.name}`,
+      href: `${assetBaseUrl}${backgroundImageAsset}`,
       as: "image",
     });
   }
@@ -231,10 +232,6 @@ export const action = async ({
     formData.delete(formBotFieldName);
 
     if (resource) {
-      resource.headers.push({
-        name: "Content-Type",
-        value: "application/json",
-      });
       resource.body = Object.fromEntries(formData);
     } else {
       if (contactEmail === undefined) {
@@ -276,6 +273,8 @@ const Outlet = () => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
@@ -286,6 +285,7 @@ const Outlet = () => {
         host={host}
         siteName={siteName}
         imageLoader={imageLoader}
+        assetBaseUrl={assetBaseUrl}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
     </ReactSdkContext.Provider>

package/templates/{react-router-docker → react-router}/app/route-templates/xml.tsx

@@ -5,7 +5,7 @@ import {
   ReactSdkContext,
   xmlNodeTagSuffix,
 } from "@webstudio-is/react-sdk/runtime";
-import { Page } from "__CLIENT__";
+import { Page, breakpoints } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
@@ -65,6 +65,8 @@ export const loader = async (arg: LoaderFunctionArgs) => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
+        onError: console.error,
       }}
     >
       <Page system={system} />

package/templates/react-router/package.json

@@ -0,0 +1,34 @@
+{
+  "type": "module",
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@react-router/dev": "^7.5.3",
+    "@react-router/fs-routes": "^7.5.3",
+    "@webstudio-is/image": "0.0.0-7cb4145",
+    "@webstudio-is/react-sdk": "0.0.0-7cb4145",
+    "@webstudio-is/sdk": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-animation": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react-radix": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react-router": "0.0.0-7cb4145",
+    "@webstudio-is/sdk-components-react": "0.0.0-7cb4145",
+    "isbot": "^5.1.25",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "react-router": "^7.5.3",
+    "vite": "^6.3.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.8.2"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/templates/react-router/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import { reactRouter } from "@react-router/dev/vite";
+
+export default defineConfig({
+  plugins: [reactRouter()],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
+});

package/templates/react-router-cloudflare/app/constants.mjs

@@ -0,0 +1,21 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (import.meta.env.DEV) {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // @todo https://developers.cloudflare.com/images/transform-images/transform-via-url/
+  return props.src;
+};

package/templates/react-router-cloudflare/app/entry.server.tsx

@@ -0,0 +1,43 @@
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext
+) {
+  let shellRendered = false;
+  const userAgent = request.headers.get("user-agent");
+
+  const body = await renderToReadableStream(
+    <ServerRouter context={routerContext} url={request.url} />,
+    {
+      onError(error: unknown) {
+        responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
+      },
+    }
+  );
+  shellRendered = true;
+
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

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

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "typecheck": "wrangler types && tsc",
+    "typegen": "wrangler types",
+    "preview": "react-router build && vite preview",
+    "deploy": "react-router build && wrangler deploy"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "^1.1.0",
+    "wrangler": "^4.14.1"
+  }
+}

package/templates/react-router-cloudflare/react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  future: {
+    unstable_viteEnvironmentApi: true,
+  },
+} satisfies Config;

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

@@ -0,0 +1,23 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [
+      "./worker-configuration.d.ts",
+      "vite/client",
+      "@webstudio-is/react-sdk/placeholder"
+    ],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "customConditions": ["webstudio"]
+  }
+}

package/templates/react-router-cloudflare/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { reactRouter } from "@react-router/dev/vite";
+
+export default defineConfig({
+  plugins: [cloudflare({ viteEnvironment: { name: "ssr" } }), reactRouter()],
+  resolve: {
+    conditions: ["browser", "development|production"],
+  },
+  ssr: {
+    resolve: {
+      conditions: ["node", "development|production"],
+    },
+  },
+});

package/templates/react-router-cloudflare/workers/app.ts

@@ -0,0 +1,26 @@
+import { createRequestHandler } from "react-router";
+
+declare module "react-router" {
+  export interface AppLoadContext {
+    cloudflare: {
+      env: Env;
+      ctx: ExecutionContext;
+    };
+  }
+}
+
+const requestHandler = createRequestHandler(
+  // @ts-ignore
+  () => import("virtual:react-router/server-build"),
+  import.meta.env.MODE
+);
+
+export default {
+  async fetch(request, env, ctx) {
+    return requestHandler(request, {
+      EXCLUDE_FROM_SEARCH: false,
+      getDefaultActionResource: undefined,
+      cloudflare: { env, ctx },
+    });
+  },
+} satisfies ExportedHandler<Env>;

package/templates/react-router-cloudflare/wrangler.jsonc

@@ -0,0 +1,6 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "webstudio-app",
+  "compatibility_date": "2025-04-28",
+  "main": "./workers/app.ts"
+}