webstudio 0.282.0 → 0.283.0

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.0",
-    "@webstudio-is/react-sdk": "0.282.0",
-    "@webstudio-is/sdk": "0.282.0",
-    "@webstudio-is/sdk-components-animation": "0.282.0",
-    "@webstudio-is/sdk-components-react-radix": "0.282.0",
-    "@webstudio-is/sdk-components-react-router": "0.282.0",
-    "@webstudio-is/sdk-components-react": "0.282.0",
-    "@webstudio-is/wsauth": "0.282.0",
+    "@webstudio-is/image": "0.283.0",
+    "@webstudio-is/react-sdk": "0.283.0",
+    "@webstudio-is/sdk": "0.283.0",
+    "@webstudio-is/sdk-components-animation": "0.283.0",
+    "@webstudio-is/sdk-components-react-radix": "0.283.0",
+    "@webstudio-is/sdk-components-react-router": "0.283.0",
+    "@webstudio-is/sdk-components-react": "0.283.0",
+    "@webstudio-is/wsauth": "0.283.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.282.0",
+    "@webstudio-is/wsauth": "0.283.0",
     "wrangler": "^4.14.1"
   }
 }

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

@@ -0,0 +1,19 @@
+// 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; 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.0",
-    "@webstudio-is/react-sdk": "0.282.0",
-    "@webstudio-is/sdk": "0.282.0",
-    "@webstudio-is/sdk-components-react": "0.282.0",
-    "@webstudio-is/sdk-components-animation": "0.282.0",
-    "@webstudio-is/sdk-components-react-radix": "0.282.0",
+    "@webstudio-is/image": "0.283.0",
+    "@webstudio-is/react-sdk": "0.283.0",
+    "@webstudio-is/sdk": "0.283.0",
+    "@webstudio-is/sdk-components-react": "0.283.0",
+    "@webstudio-is/sdk-components-animation": "0.283.0",
+    "@webstudio-is/sdk-components-react-radix": "0.283.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"],
     },
   },
 });