webstudio 0.282.1 → 0.284.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.282.1",
+  "version": "0.284.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,9 +44,9 @@
     "warn-once": "^0.1.1",
     "yargs": "^17.7.2",
     "zod": "^4.4.3",
-    "@webstudio-is/project-migrations": "0.282.1",
-    "@webstudio-is/protocol": "0.282.1",
-    "@webstudio-is/http-client": "0.282.1",
+    "@webstudio-is/http-client": "0.284.0",
+    "@webstudio-is/project-migrations": "0.284.0",
+    "@webstudio-is/protocol": "0.284.0",
     "@webstudio-is/sync-client": "0.0.0"
   },
   "devDependencies": {
@@ -85,26 +85,31 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/fonts": "0.282.1",
-    "@webstudio-is/image": "0.282.1",
-    "@webstudio-is/css-engine": "0.282.1",
+    "@webstudio-is/css-engine": "0.284.0",
+    "@webstudio-is/content-engine": "0.284.0",
+    "@webstudio-is/fonts": "0.284.0",
+    "@webstudio-is/expression": "0.284.0",
+    "@webstudio-is/image": "0.284.0",
     "@webstudio-is/project-build": "0.0.0",
-    "@webstudio-is/sdk": "0.282.1",
-    "@webstudio-is/sdk-components-animation": "0.282.1",
-    "@webstudio-is/sdk-components-react": "0.282.1",
-    "@webstudio-is/react-sdk": "0.282.1",
-    "@webstudio-is/sdk-components-react-router": "0.282.1",
-    "@webstudio-is/sdk-components-react-radix": "0.282.1",
+    "@webstudio-is/query-builder": "0.284.0",
+    "@webstudio-is/react-sdk": "0.284.0",
+    "@webstudio-is/sdk": "0.284.0",
+    "@webstudio-is/sdk-components-animation": "0.284.0",
+    "@webstudio-is/sdk-components-react": "0.284.0",
+    "@webstudio-is/sdk-components-react-radix": "0.284.0",
+    "@webstudio-is/sdk-components-react-remix": "0.284.0",
+    "@webstudio-is/sdk-components-registry": "0.284.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-registry": "0.282.1",
-    "@webstudio-is/wsauth": "0.282.1",
-    "@webstudio-is/sdk-components-react-remix": "0.282.1"
+    "@webstudio-is/sdk-components-react-router": "0.284.0",
+    "@webstudio-is/wsauth": "0.284.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "generate-docs": "tsx scripts/generate-docs.ts && oxfmt src/docs.generated.ts",
-    "build": "pnpm generate-docs && rm -rf lib && vite build",
-    "evaluations": "tsx --conditions=webstudio evaluations/high-impact/run-local-agent.ts",
+    "build:content-runtime": "esbuild @webstudio-is/content-engine/runtime --bundle --format=esm --platform=browser --target=es2022 --conditions=webstudio --minify --outfile=lib/content-runtime.js",
+    "build": "pnpm generate-docs && rm -rf lib && vite build && pnpm build:content-runtime",
+    "pretest": "mkdir -p lib && pnpm build:content-runtime",
+    "evaluations": "tsx --import ../../scripts/register-react-global.ts --conditions=webstudio evaluations/high-impact/run-local-agent.ts",
     "test": "vitest run",
     "test:release-smoke": "pnpm build && tsx --conditions=webstudio scripts/release-smoke.ts",
     "test:release-smoke:model": "WEBSTUDIO_RELEASE_SMOKE_MODEL_EVAL_REQUIRED=1 pnpm test:release-smoke",

package/templates/cloudflare/package.json

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

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

@@ -44,8 +44,8 @@ import {
 import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
-import { assets } from "__ASSETS__";
 import { authRoutes } from "__AUTH__";
+import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -95,12 +95,6 @@ const customFetch: typeof fetch = (input, init) => {
     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 cachedFetch(projectId, input, init);
 };
 
@@ -123,9 +117,16 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pathname: url.pathname,
   };
 
+  const generatedFetch = await createGeneratedAssetResourceFetch({
+    request: arg.request,
+    context: arg.context,
+    fallback: customFetch,
+  });
   const resources = await loadResources(
-    customFetch,
-    getResources({ system }).data
+    generatedFetch,
+    getResources({ system }).data,
+    url,
+    { signal: arg.request.signal }
   );
   const pageMeta = getPageMeta({ system, resources });
 

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

@@ -4,8 +4,8 @@ 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__";
+import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -53,12 +53,6 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 
@@ -82,9 +76,16 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pathname: url.pathname,
   };
 
+  const generatedFetch = await createGeneratedAssetResourceFetch({
+    request: arg.request,
+    context: arg.context,
+    fallback: customFetch,
+  });
   const resources = await loadResources(
-    customFetch,
-    getResources({ system }).data
+    generatedFetch,
+    getResources({ system }).data,
+    url,
+    { signal: arg.request.signal }
   );
   const pageMeta = getPageMeta({ system, resources });
 

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

@@ -10,8 +10,8 @@ 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__";
+import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -61,12 +61,6 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 
@@ -90,9 +84,16 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pathname: url.pathname,
   };
 
+  const generatedFetch = await createGeneratedAssetResourceFetch({
+    request: arg.request,
+    context: arg.context,
+    fallback: customFetch,
+  });
   const resources = await loadResources(
-    customFetch,
-    getResources({ system }).data
+    generatedFetch,
+    getResources({ system }).data,
+    url,
+    { signal: arg.request.signal }
   );
   const pageMeta = getPageMeta({ system, resources });
 

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.282.1",
-    "@webstudio-is/react-sdk": "0.282.1",
-    "@webstudio-is/sdk": "0.282.1",
-    "@webstudio-is/sdk-components-react": "0.282.1",
-    "@webstudio-is/sdk-components-animation": "0.282.1",
-    "@webstudio-is/sdk-components-react-radix": "0.282.1",
-    "@webstudio-is/sdk-components-react-remix": "0.282.1",
-    "@webstudio-is/wsauth": "0.282.1",
+    "@webstudio-is/image": "0.284.0",
+    "@webstudio-is/react-sdk": "0.284.0",
+    "@webstudio-is/sdk": "0.284.0",
+    "@webstudio-is/sdk-components-react": "0.284.0",
+    "@webstudio-is/sdk-components-animation": "0.284.0",
+    "@webstudio-is/sdk-components-react-radix": "0.284.0",
+    "@webstudio-is/sdk-components-react-remix": "0.284.0",
+    "@webstudio-is/wsauth": "0.284.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/route-templates/html.tsx

@@ -43,8 +43,8 @@ import {
 import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
-import { assets } from "__ASSETS__";
 import { authRoutes } from "__AUTH__";
+import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -94,12 +94,6 @@ const customFetch: typeof fetch = (input, init) => {
     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 cachedFetch(projectId, input, init);
 };
 
@@ -122,9 +116,16 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pathname: url.pathname,
   };
 
+  const generatedFetch = await createGeneratedAssetResourceFetch({
+    request: arg.request,
+    context: arg.context,
+    fallback: customFetch,
+  });
   const resources = await loadResources(
-    customFetch,
-    getResources({ system }).data
+    generatedFetch,
+    getResources({ system }).data,
+    url,
+    { signal: arg.request.signal }
   );
   const pageMeta = getPageMeta({ system, resources });
 

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

@@ -4,8 +4,8 @@ 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__";
+import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -53,12 +53,6 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 
@@ -82,9 +76,16 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pathname: url.pathname,
   };
 
+  const generatedFetch = await createGeneratedAssetResourceFetch({
+    request: arg.request,
+    context: arg.context,
+    fallback: customFetch,
+  });
   const resources = await loadResources(
-    customFetch,
-    getResources({ system }).data
+    generatedFetch,
+    getResources({ system }).data,
+    url,
+    { signal: arg.request.signal }
   );
   const pageMeta = getPageMeta({ system, resources });
 

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

@@ -10,8 +10,8 @@ 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__";
+import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -61,12 +61,6 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 
@@ -90,9 +84,16 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pathname: url.pathname,
   };
 
+  const generatedFetch = await createGeneratedAssetResourceFetch({
+    request: arg.request,
+    context: arg.context,
+    fallback: customFetch,
+  });
   const resources = await loadResources(
-    customFetch,
-    getResources({ system }).data
+    generatedFetch,
+    getResources({ system }).data,
+    url,
+    { signal: arg.request.signal }
   );
   const pageMeta = getPageMeta({ system, resources });
 

package/templates/react-router/package.json

@@ -13,14 +13,14 @@
     "@react-router/fs-routes": "^7.5.3",
     "@react-router/node": "^7.5.3",
     "@react-router/serve": "^7.5.3",
-    "@webstudio-is/image": "0.282.1",
-    "@webstudio-is/react-sdk": "0.282.1",
-    "@webstudio-is/sdk": "0.282.1",
-    "@webstudio-is/sdk-components-animation": "0.282.1",
-    "@webstudio-is/sdk-components-react-radix": "0.282.1",
-    "@webstudio-is/sdk-components-react-router": "0.282.1",
-    "@webstudio-is/sdk-components-react": "0.282.1",
-    "@webstudio-is/wsauth": "0.282.1",
+    "@webstudio-is/image": "0.284.0",
+    "@webstudio-is/react-sdk": "0.284.0",
+    "@webstudio-is/sdk": "0.284.0",
+    "@webstudio-is/sdk-components-animation": "0.284.0",
+    "@webstudio-is/sdk-components-react-radix": "0.284.0",
+    "@webstudio-is/sdk-components-react-router": "0.284.0",
+    "@webstudio-is/sdk-components-react": "0.284.0",
+    "@webstudio-is/wsauth": "0.284.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

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

@@ -13,6 +13,7 @@ export default defineConfig({
     conditions: [...sourceConditions, "browser", "development|production"],
   },
   ssr: {
+    noExternal: ["nanoid"],
     resolve: {
       conditions: [...sourceConditions, "node", "development|production"],
     },

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

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

package/templates/ssg/app/asset-resource-fetch.ts

@@ -0,0 +1,22 @@
+// Generated only for projects whose SSG build uses an Assets query.
+// @ts-expect-error The CLI template is typechecked before the generated module exists.
+import { createPublishedAssetResourceFetch } from "./__generated__/$resources.asset-query-vendor.js";
+
+export const createSsgAssetResourceFetch = ({
+  deploymentId,
+  artifact,
+  runtimeAssets,
+}: {
+  deploymentId: string;
+  artifact: unknown;
+  runtimeAssets: Record<
+    string,
+    { url: string; contentRef?: string; width?: number; height?: number }
+  >;
+}) =>
+  createPublishedAssetResourceFetch({
+    baseUrl: "https://webstudio.local",
+    deploymentId,
+    artifact,
+    runtimeAssets,
+  });

package/templates/ssg/app/route-templates/html/+data.ts

@@ -2,8 +2,26 @@ import type { PageContextServer } from "vike/types";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { getPageMeta, getResources } from "__SERVER__";
 import { assets } from "__ASSETS__";
+import {
+  assetQueryDeploymentId,
+  assetQueryDatabase,
+} from "__ASSET_QUERY_MANIFEST__";
+import { createSsgAssetResourceFetch } from "__ASSET_RESOURCE_FETCH__";
 
-const customFetch: typeof fetch = (input, init) => {
+const fetchAssetResource =
+  assetQueryDatabase === undefined
+    ? undefined
+    : createSsgAssetResourceFetch({
+        deploymentId: assetQueryDeploymentId,
+        artifact: assetQueryDatabase,
+        runtimeAssets: assets,
+      });
+
+const customFetch: typeof fetch = async (input, init) => {
+  const assetResourceResponse = await fetchAssetResource?.(input, init);
+  if (assetResourceResponse !== undefined) {
+    return assetResourceResponse;
+  }
   if (typeof input !== "string") {
     return fetch(input, init);
   }
@@ -23,13 +41,7 @@ const customFetch: typeof fetch = (input, init) => {
     };
     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 response;
   }
 
   return fetch(input, init);
@@ -52,7 +64,8 @@ export const data = async (pageContext: PageContextServer) => {
 
   const resources = await loadResources(
     customFetch,
-    getResources({ system }).data
+    getResources({ system }).data,
+    url
   );
   const pageMeta = getPageMeta({ system, resources });
 

package/templates/ssg/package.json

@@ -9,12 +9,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.282.1",
-    "@webstudio-is/react-sdk": "0.282.1",
-    "@webstudio-is/sdk": "0.282.1",
-    "@webstudio-is/sdk-components-react": "0.282.1",
-    "@webstudio-is/sdk-components-animation": "0.282.1",
-    "@webstudio-is/sdk-components-react-radix": "0.282.1",
+    "@webstudio-is/image": "0.284.0",
+    "@webstudio-is/react-sdk": "0.284.0",
+    "@webstudio-is/sdk": "0.284.0",
+    "@webstudio-is/sdk-components-react": "0.284.0",
+    "@webstudio-is/sdk-components-animation": "0.284.0",
+    "@webstudio-is/sdk-components-react-radix": "0.284.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"

package/templates/ssg/vite.config.ts

@@ -2,14 +2,17 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import vike from "vike/plugin";
 
+const sourceConditions =
+  process.env.WEBSTUDIO_LOCAL_CLI_BOOTSTRAPPED === "1" ? ["webstudio"] : [];
+
 export default defineConfig({
   plugins: [react(), vike()],
   resolve: {
-    conditions: ["browser", "development|production"],
+    conditions: [...sourceConditions, "browser", "development|production"],
   },
   ssr: {
     resolve: {
-      conditions: ["node", "development|production"],
+      conditions: [...sourceConditions, "node", "development|production"],
     },
   },
 });