fix: refresh asset resource fixtures

fixtures/react-router-cloudflare/.template/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@webstudio-is/asset-resource": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",

fixtures/react-router-cloudflare/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "f565d527-32e7-4731-bc71-aca9e9574587";
+export const assetQueryManifest = [];

fixtures/react-router-cloudflare/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/react-router-cloudflare/app/routes/[another-page]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-cloudflare/app/routes/_index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-cloudflare/package.json

@@ -34,7 +34,8 @@
     "wrangler": "^4.14.1",
     "@webstudio-is/wsauth": "workspace:*",
     "@react-router/node": "^7.5.3",
-    "@react-router/serve": "^7.5.3"
+    "@react-router/serve": "^7.5.3",
+    "@webstudio-is/asset-resource": "workspace:*"
   },
   "type": "module",
   "private": true,

fixtures/react-router-docker/.template/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@webstudio-is/asset-resource": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",

fixtures/react-router-docker/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "f565d527-32e7-4731-bc71-aca9e9574587";
+export const assetQueryManifest = [];

fixtures/react-router-docker/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/react-router-docker/app/routes/[another-page]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-docker/app/routes/_index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-docker/package.json

@@ -30,7 +30,8 @@
     "react-router": "^7.5.3",
     "vite": "^6.3.4",
     "webstudio": "workspace:*",
-    "@webstudio-is/wsauth": "workspace:*"
+    "@webstudio-is/wsauth": "workspace:*",
+    "@webstudio-is/asset-resource": "workspace:*"
   },
   "private": true,
   "sideEffects": false,

fixtures/react-router-netlify/.template/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@webstudio-is/asset-resource": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",

fixtures/react-router-netlify/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "f565d527-32e7-4731-bc71-aca9e9574587";
+export const assetQueryManifest = [];

fixtures/react-router-netlify/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/react-router-netlify/app/routes/[another-page]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-netlify/app/routes/_index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-netlify/package.json

@@ -31,7 +31,8 @@
     "vite": "^6.3.4",
     "webstudio": "workspace:*",
     "@webstudio-is/wsauth": "workspace:*",
-    "@react-router/serve": "^7.5.3"
+    "@react-router/serve": "^7.5.3",
+    "@webstudio-is/asset-resource": "workspace:*"
   },
   "type": "module",
   "private": true,

fixtures/react-router-vercel/.template/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@webstudio-is/asset-resource": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",

fixtures/react-router-vercel/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "f565d527-32e7-4731-bc71-aca9e9574587";
+export const assetQueryManifest = [];

fixtures/react-router-vercel/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/react-router-vercel/app/routes/[another-page]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-vercel/app/routes/_index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/react-router-vercel/package.json

@@ -31,7 +31,8 @@
     "vite": "^6.3.4",
     "webstudio": "workspace:*",
     "@webstudio-is/wsauth": "workspace:*",
-    "@react-router/serve": "^7.5.3"
+    "@react-router/serve": "^7.5.3",
+    "@webstudio-is/asset-resource": "workspace:*"
   },
   "private": true,
   "type": "module",

fixtures/ssg-cloudflare-pages/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "a2e8de30-03d5-4514-a3a6-406b3266a3af";
+export const assetQueryManifest = [];

fixtures/ssg-cloudflare-pages/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/ssg-cloudflare-pages/app/asset-resource-fetch.ts

@@ -0,0 +1,91 @@
+import { open } from "node:fs/promises";
+import { resolve, sep } from "node:path";
+import { createPublishedAssetResourceFetch } from "@webstudio-is/asset-resource";
+
+const resolvePublicAsset = (path: string) => {
+  const publicDirectory = resolve("public");
+  const pathname = new URL(path, "https://webstudio.local").pathname;
+  const filePath = resolve(publicDirectory, `.${pathname}`);
+  if (filePath.startsWith(`${publicDirectory}${sep}`) === false) {
+    throw new Error("Static asset path is outside the public directory");
+  }
+  return filePath;
+};
+
+const getByteRange = (header: string | null, size: number) => {
+  if (header?.startsWith("bytes=") !== true) {
+    return { offset: 0, length: size, partial: false };
+  }
+  const values = header.slice("bytes=".length).split("-");
+  const offset = Number(values[0]);
+  const requestedEnd = Number(values[1]);
+  if (
+    values.length !== 2 ||
+    Number.isSafeInteger(offset) === false ||
+    Number.isSafeInteger(requestedEnd) === false ||
+    offset < 0 ||
+    requestedEnd < offset ||
+    offset >= size
+  ) {
+    return;
+  }
+  const end = Math.min(requestedEnd, size - 1);
+  return { offset, length: end - offset + 1, partial: true };
+};
+
+export const fetchSsgPublicAsset = async (path: string, init?: RequestInit) => {
+  let file;
+  try {
+    file = await open(resolvePublicAsset(path), "r");
+  } catch (error) {
+    if (
+      typeof error === "object" &&
+      error !== null &&
+      Reflect.get(error, "code") === "ENOENT"
+    ) {
+      return new Response("Not found", { status: 404 });
+    }
+    throw error;
+  }
+  try {
+    const { size } = await file.stat();
+    const range = getByteRange(new Headers(init?.headers).get("range"), size);
+    if (range === undefined) {
+      return new Response("Range not satisfiable", {
+        status: 416,
+        headers: { "content-range": `bytes */${size}` },
+      });
+    }
+    const body = range.partial
+      ? await file
+          .read(new Uint8Array(range.length), 0, range.length, range.offset)
+          .then(({ buffer, bytesRead }) => buffer.subarray(0, bytesRead))
+      : await file.readFile();
+    const headers = new Headers({ "content-length": String(body.length) });
+    if (range.partial) {
+      headers.set(
+        "content-range",
+        `bytes ${range.offset}-${range.offset + body.length - 1}/${size}`
+      );
+    }
+    return new Response(Uint8Array.from(body).buffer, {
+      status: range.partial ? 206 : 200,
+      headers,
+    });
+  } finally {
+    await file.close();
+  }
+};
+
+export const createSsgAssetResourceFetch = ({
+  deploymentId,
+  manifest,
+}: {
+  deploymentId: string;
+  manifest: Parameters<typeof createPublishedAssetResourceFetch>[0]["manifest"];
+}) =>
+  createPublishedAssetResourceFetch({
+    deploymentId,
+    manifest,
+    fetchAsset: fetchSsgPublicAsset,
+  });

fixtures/ssg-cloudflare-pages/package.json

@@ -42,6 +42,7 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229",
-    "@webstudio-is/wsauth": "workspace:*"
+    "@webstudio-is/wsauth": "workspace:*",
+    "@webstudio-is/asset-resource": "workspace:*"
   }
 }

fixtures/ssg-cloudflare-pages/pages/another-page/+data.ts

@@ -5,8 +5,22 @@ import {
   getResources,
 } from "../../app/__generated__/[another-page]._index.server";
 import { assets } from "../../app/__generated__/$resources.assets";
+import {
+  assetQueryDeploymentId,
+  assetQueryManifest,
+} from "../../app/__generated__/$resources.asset-query-manifest";
+import { createSsgAssetResourceFetch } from "../../app/asset-resource-fetch";
 
-const customFetch: typeof fetch = (input, init) => {
+const fetchAssetResource = createSsgAssetResourceFetch({
+  deploymentId: assetQueryDeploymentId,
+  manifest: assetQueryManifest,
+});
+
+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);
   }
@@ -26,13 +40,13 @@ 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);
+    return 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);
@@ -55,7 +69,8 @@ export const data = async (pageContext: PageContextServer) => {
 
   const resources = await loadResources(
     customFetch,
-    getResources({ system }).data
+    getResources({ system }).data,
+    url
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/ssg-cloudflare-pages/pages/index/+data.ts

@@ -5,8 +5,22 @@ import {
   getResources,
 } from "../../app/__generated__/_index.server";
 import { assets } from "../../app/__generated__/$resources.assets";
+import {
+  assetQueryDeploymentId,
+  assetQueryManifest,
+} from "../../app/__generated__/$resources.asset-query-manifest";
+import { createSsgAssetResourceFetch } from "../../app/asset-resource-fetch";
 
-const customFetch: typeof fetch = (input, init) => {
+const fetchAssetResource = createSsgAssetResourceFetch({
+  deploymentId: assetQueryDeploymentId,
+  manifest: assetQueryManifest,
+});
+
+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);
   }
@@ -26,13 +40,13 @@ 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);
+    return 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);
@@ -55,7 +69,8 @@ export const data = async (pageContext: PageContextServer) => {
 
   const resources = await loadResources(
     customFetch,
-    getResources({ system }).data
+    getResources({ system }).data,
+    url
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/ssg-cloudflare-pages/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"],
     },
   },
 });

fixtures/ssg-netlify-by-project-id/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "8f0fdff2-e76b-4f86-9203-ea7df5f1143c";
+export const assetQueryManifest = [];

fixtures/ssg-netlify-by-project-id/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/ssg-netlify-by-project-id/app/asset-resource-fetch.ts

@@ -0,0 +1,91 @@
+import { open } from "node:fs/promises";
+import { resolve, sep } from "node:path";
+import { createPublishedAssetResourceFetch } from "@webstudio-is/asset-resource";
+
+const resolvePublicAsset = (path: string) => {
+  const publicDirectory = resolve("public");
+  const pathname = new URL(path, "https://webstudio.local").pathname;
+  const filePath = resolve(publicDirectory, `.${pathname}`);
+  if (filePath.startsWith(`${publicDirectory}${sep}`) === false) {
+    throw new Error("Static asset path is outside the public directory");
+  }
+  return filePath;
+};
+
+const getByteRange = (header: string | null, size: number) => {
+  if (header?.startsWith("bytes=") !== true) {
+    return { offset: 0, length: size, partial: false };
+  }
+  const values = header.slice("bytes=".length).split("-");
+  const offset = Number(values[0]);
+  const requestedEnd = Number(values[1]);
+  if (
+    values.length !== 2 ||
+    Number.isSafeInteger(offset) === false ||
+    Number.isSafeInteger(requestedEnd) === false ||
+    offset < 0 ||
+    requestedEnd < offset ||
+    offset >= size
+  ) {
+    return;
+  }
+  const end = Math.min(requestedEnd, size - 1);
+  return { offset, length: end - offset + 1, partial: true };
+};
+
+export const fetchSsgPublicAsset = async (path: string, init?: RequestInit) => {
+  let file;
+  try {
+    file = await open(resolvePublicAsset(path), "r");
+  } catch (error) {
+    if (
+      typeof error === "object" &&
+      error !== null &&
+      Reflect.get(error, "code") === "ENOENT"
+    ) {
+      return new Response("Not found", { status: 404 });
+    }
+    throw error;
+  }
+  try {
+    const { size } = await file.stat();
+    const range = getByteRange(new Headers(init?.headers).get("range"), size);
+    if (range === undefined) {
+      return new Response("Range not satisfiable", {
+        status: 416,
+        headers: { "content-range": `bytes */${size}` },
+      });
+    }
+    const body = range.partial
+      ? await file
+          .read(new Uint8Array(range.length), 0, range.length, range.offset)
+          .then(({ buffer, bytesRead }) => buffer.subarray(0, bytesRead))
+      : await file.readFile();
+    const headers = new Headers({ "content-length": String(body.length) });
+    if (range.partial) {
+      headers.set(
+        "content-range",
+        `bytes ${range.offset}-${range.offset + body.length - 1}/${size}`
+      );
+    }
+    return new Response(Uint8Array.from(body).buffer, {
+      status: range.partial ? 206 : 200,
+      headers,
+    });
+  } finally {
+    await file.close();
+  }
+};
+
+export const createSsgAssetResourceFetch = ({
+  deploymentId,
+  manifest,
+}: {
+  deploymentId: string;
+  manifest: Parameters<typeof createPublishedAssetResourceFetch>[0]["manifest"];
+}) =>
+  createPublishedAssetResourceFetch({
+    deploymentId,
+    manifest,
+    fetchAsset: fetchSsgPublicAsset,
+  });

fixtures/ssg-netlify-by-project-id/package.json

@@ -42,6 +42,7 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229",
-    "@webstudio-is/wsauth": "workspace:*"
+    "@webstudio-is/wsauth": "workspace:*",
+    "@webstudio-is/asset-resource": "workspace:*"
   }
 }

fixtures/ssg-netlify-by-project-id/pages/index/+data.ts

@@ -5,8 +5,22 @@ import {
   getResources,
 } from "../../app/__generated__/_index.server";
 import { assets } from "../../app/__generated__/$resources.assets";
+import {
+  assetQueryDeploymentId,
+  assetQueryManifest,
+} from "../../app/__generated__/$resources.asset-query-manifest";
+import { createSsgAssetResourceFetch } from "../../app/asset-resource-fetch";
 
-const customFetch: typeof fetch = (input, init) => {
+const fetchAssetResource = createSsgAssetResourceFetch({
+  deploymentId: assetQueryDeploymentId,
+  manifest: assetQueryManifest,
+});
+
+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);
   }
@@ -26,13 +40,13 @@ 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);
+    return 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);
@@ -55,7 +69,8 @@ export const data = async (pageContext: PageContextServer) => {
 
   const resources = await loadResources(
     customFetch,
-    getResources({ system }).data
+    getResources({ system }).data,
+    url
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/ssg-netlify-by-project-id/pages/redirect/+data.ts

@@ -5,8 +5,22 @@ import {
   getResources,
 } from "../../app/__generated__/[redirect]._index.server";
 import { assets } from "../../app/__generated__/$resources.assets";
+import {
+  assetQueryDeploymentId,
+  assetQueryManifest,
+} from "../../app/__generated__/$resources.asset-query-manifest";
+import { createSsgAssetResourceFetch } from "../../app/asset-resource-fetch";
 
-const customFetch: typeof fetch = (input, init) => {
+const fetchAssetResource = createSsgAssetResourceFetch({
+  deploymentId: assetQueryDeploymentId,
+  manifest: assetQueryManifest,
+});
+
+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);
   }
@@ -26,13 +40,13 @@ 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);
+    return 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);
@@ -55,7 +69,8 @@ export const data = async (pageContext: PageContextServer) => {
 
   const resources = await loadResources(
     customFetch,
-    getResources({ system }).data
+    getResources({ system }).data,
+    url
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/ssg-netlify-by-project-id/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"],
     },
   },
 });

fixtures/webstudio-cloudflare-template/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "a2e8de30-03d5-4514-a3a6-406b3266a3af";
+export const assetQueryManifest = [];

fixtures/webstudio-cloudflare-template/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx

@@ -46,6 +46,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -123,9 +124,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-cloudflare-template/app/routes/_index.tsx

@@ -46,6 +46,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -123,9 +124,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-cloudflare-template/package.json

@@ -46,7 +46,8 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "webstudio": "workspace:*",
     "worktop": "0.8.0-next.18",
-    "zod": "^4.4.3"
+    "zod": "^4.4.3",
+    "@webstudio-is/asset-resource": "workspace:*"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",

fixtures/webstudio-features/.template/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@webstudio-is/asset-resource": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",

fixtures/webstudio-features/app/__generated__/$resources.asset-query-manifest.ts

@@ -0,0 +1,2 @@
+export const assetQueryDeploymentId = "1b66ee06-8ea5-4420-9a0e-e0d3a67aca32";
+export const assetQueryManifest = [];

fixtures/webstudio-features/app/__generated__/$resources.asset-query-runtime.ts

@@ -0,0 +1,7 @@
+export const createGeneratedAssetResourceFetch = async ({
+  fallback,
+}: {
+  request: Request;
+  context: unknown;
+  fallback: typeof fetch;
+}): Promise<typeof fetch> => fallback;

fixtures/webstudio-features/app/routes/[_route_with_symbols_]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[animations]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[assets1]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[class-names]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[content-block]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[duration]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[expressions]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[form]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[head-tag]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[heading-with-id]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[nested].[nested-page]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[radix]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[resources]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[sitemap.xml]._index.tsx

@@ -20,6 +20,7 @@ import { assetBaseUrl, imageLoader } from "../constants.mjs";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -98,9 +99,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/[text-duration]._index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/app/routes/_index.tsx

@@ -45,6 +45,7 @@ import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
 import { assets } from "../__generated__/$resources.assets";
 import { authRoutes } from "../__generated__/$resources.wsauth.server";
+import { createGeneratedAssetResourceFetch } from "../__generated__/$resources.asset-query-runtime";
 
 const authenticateProductionRequest = (request: Request) => {
   const host =
@@ -122,9 +123,15 @@ 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
   );
   const pageMeta = getPageMeta({ system, resources });
 

fixtures/webstudio-features/package.json

@@ -32,7 +32,8 @@
     "vite": "^6.3.4",
     "webstudio": "workspace:*",
     "@webstudio-is/wsauth": "workspace:*",
-    "@react-router/serve": "^7.5.3"
+    "@react-router/serve": "^7.5.3",
+    "@webstudio-is/asset-resource": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",

packages/asset-resource/scripts/benchmark-scale.mjs

@@ -79,8 +79,7 @@ const listingQuery = `*[
   "slug": properties.slug,
   excerpt
 }`;
-const detailQuery =
-  `*[properties.slug == $slug][0]{_id, revision, contentRef, "title": properties.title}`;
+const detailQuery = `*[properties.slug == $slug][0]{_id, revision, contentRef, "title": properties.title}`;
 const buildIndex = (query = listingQuery) =>
   buildAssetResourceIndex({ projectId, resourceId, query, entries });
 
@@ -173,10 +172,12 @@ const detailAndHydration = await measure(50, async () => {
       if (file === undefined) {
         throw new Error("Scale fixture content is missing");
       }
-      const bytes = encoder.encode(file.source).subarray(
-        range?.offset ?? 0,
-        range === undefined ? undefined : range.offset + range.length
-      );
+      const bytes = encoder
+        .encode(file.source)
+        .subarray(
+          range?.offset ?? 0,
+          range === undefined ? undefined : range.offset + range.length
+        );
       return {
         data: {
           async *[Symbol.asyncIterator]() {
@@ -189,7 +190,9 @@ const detailAndHydration = await measure(50, async () => {
 });
 
 const workerBundle = await bundle({
-  entryPoints: [new URL("../src/published-runtime.ts", import.meta.url).pathname],
+  entryPoints: [
+    new URL("../src/published-runtime.ts", import.meta.url).pathname,
+  ],
   bundle: true,
   format: "esm",
   minify: true,

packages/asset-resource/src/candidate-selection.test.ts

@@ -68,9 +68,7 @@ describe("asset resource candidate selection", () => {
 
   test("does not split a parameter-dependent disjunction", async () => {
     const selection = await selectAssetResourceCandidates({
-      tree: parse(
-        `*[properties.locale == "en" || properties.slug == $slug]`
-      ),
+      tree: parse(`*[properties.locale == "en" || properties.slug == $slug]`),
       documents,
     });
 

packages/cli/templates/internal/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@webstudio-is/asset-resource": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",

pnpm-lock.yaml

@@ -528,6 +528,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.5.3
         version: 7.5.3(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@7.0.2)
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -598,6 +601,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.5.3
         version: 7.5.3(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@7.0.2)
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -674,6 +680,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.5.3
         version: 7.5.3(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@7.0.2)
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -744,6 +753,9 @@ importers:
       '@vercel/react-router':
         specifier: ^1.1.0
         version: 1.1.0(@react-router/dev@7.5.3(@react-router/serve@7.5.3(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@7.0.2))(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.31.1)(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(tsx@4.19.3)(typescript@7.0.2)(vite@6.3.4(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.31.1)(tsx@4.19.3)(yaml@2.9.0))(wrangler@4.14.1)(yaml@2.9.0))(@react-router/node@7.5.3(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@7.0.2))(isbot@5.1.25)(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -799,6 +811,9 @@ importers:
 
   fixtures/ssg-cloudflare-pages:
     dependencies:
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -854,6 +869,9 @@ importers:
 
   fixtures/ssg-netlify-by-project-id:
     dependencies:
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -924,6 +942,9 @@ importers:
       '@remix-run/server-runtime':
         specifier: 2.16.5
         version: 2.16.5(typescript@7.0.2)
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image
@@ -1009,6 +1030,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.5.3
         version: 7.5.3(react-router@7.5.3(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@7.0.2)
+      '@webstudio-is/asset-resource':
+        specifier: workspace:*
+        version: link:../../packages/asset-resource
       '@webstudio-is/image':
         specifier: workspace:*
         version: link:../../packages/image