fix: Fix asset resource on published sites (#5565)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

.github/copilot-instructions.md

@@ -13,6 +13,7 @@
 - Never use the `function` keyword - always use arrow functions (`const name = () => {}`) or function expressions with arrow syntax
 - Functions must never have more than 3 parameters - use an object parameter instead
 - Never alias the same type or variable to different names (e.g., `type AliasName = OriginalName`) - always use the original name consistently throughout the codebase
+- Spreading `undefined` works fine in JavaScript/TypeScript - the spread operator skips it. Never return empty objects `{}` when you can just `return` (or omit return for `undefined`). Example: `return { ...obj, ...maybeUndefined }` works correctly.
 
 ## Running Checks
 

.github/workflows/main.yml

@@ -135,7 +135,7 @@ jobs:
             const results = [
               await assertSize('./fixtures/ssg/dist/client', 356),
               await assertSize('./fixtures/react-router-netlify/build/client', 376),
-              await assertSize('./fixtures/webstudio-features/build/client', 1056),
+              await assertSize('./fixtures/webstudio-features/build/client', 3312),
             ]
             for (const result of results) {
               if (result.passed) {

apps/builder/app/builder/shared/assets/asset-utils.test.ts

@@ -269,7 +269,7 @@ describe("uploadingFileDataToAsset", () => {
       id: "test-id",
       name: "video.mp4",
       format: "mp4",
-      type: "image", // Videos are treated as images for now
+      type: "file",
     });
   });
 

apps/builder/app/builder/shared/assets/asset-utils.ts

@@ -118,21 +118,17 @@ export const uploadingFileDataToAsset = (
   const assetType = detectAssetType(fileName);
 
   if (assetType === "video") {
-    // Use image type for now
-    const asset: ImageAsset = {
+    // Videos should be file type, not image type
+    const asset: Asset = {
       id: fileData.assetId,
       name: fileName,
       format,
-      type: "image",
+      type: "file",
       description: "",
       createdAt: "",
       projectId: "",
       size: 0,
-
-      meta: {
-        width: Number.NaN,
-        height: Number.NaN,
-      },
+      meta: {},
     };
 
     return asset;

apps/builder/app/shared/$resources/assets.server.ts

@@ -1,9 +1,9 @@
 import { json } from "@remix-run/server-runtime";
 import { parseBuilderUrl } from "@webstudio-is/http-client";
 import { loadAssetsByProject } from "@webstudio-is/asset-uploader/index.server";
+import { toRuntimeAsset } from "@webstudio-is/sdk";
 import { isBuilder } from "../router-utils";
 import { createContext } from "../context.server";
-import { getAssetUrl } from "~/builder/shared/assets/asset-utils";
 
 /**
  * System Resource that provides the list of assets for the current project.
@@ -31,15 +31,10 @@ export const loader = async ({ request }: { request: Request }) => {
   const requestUrl = new URL(request.url);
   const origin = `${requestUrl.protocol}//${requestUrl.host}`;
 
-  // Convert array to object with asset IDs as keys and add URL to each asset
+  // Convert array to object with asset IDs as keys
+  // Use /cgi/ endpoint URLs (relative paths)
   const assetsById = Object.fromEntries(
-    assets.map((asset) => [
-      asset.id,
-      {
-        ...asset,
-        url: getAssetUrl(asset, origin).href,
-      },
-    ])
+    assets.map((asset) => [asset.id, toRuntimeAsset(asset, origin)])
   );
 
   return json(assetsById);

apps/builder/app/shared/db/canvas.server.ts

@@ -63,10 +63,11 @@ export const loadProductionCanvasData = async (
     }
   }
 
-  // Filter unused font assets
+  // Filter unused font assets but include all other asset types (images, videos, audio, documents)
   const assets = allAssets.filter(
     (asset) =>
       asset.type === "image" ||
+      asset.type === "file" ||
       (asset.type === "font" && fontFamilySet.has(asset.meta.family))
   );
 

fixtures/README.md

@@ -0,0 +1,86 @@
+# Webstudio Fixtures
+
+Fixtures are test projects that ensure the CLI and build process work correctly across different deployment targets.
+
+### Updating Fixtures After Changes
+
+```bash
+# From repository root - updates all fixtures
+pnpm fixtures
+```
+
+This command will:
+
+1. Link all fixtures to their respective projects
+2. Sync the latest data from the development environment
+3. Build all fixtures with the latest code
+
+### Working with Individual Fixtures
+
+```bash
+# Go to fixture folder
+cd fixtures/webstudio-features
+
+# Link to project
+pnpm fixtures:link
+
+# Sync latest data
+pnpm fixtures:sync
+
+# Build fixture
+pnpm fixtures:build
+
+# Start it
+pnpm run dev
+```
+
+## Adding Assets to Fixtures
+
+To add a new asset (image, video, audio, etc.) to a fixture:
+
+1. **Publish to staging**
+
+   - Make your changes in the builder
+   - Publish to the staging environment
+
+2. **Get the build ID from CI**
+
+   - After publishing, check the CI logs
+   - Find the build ID that was created
+
+3. **Update the fixture's build ID**
+
+   - Edit `fixtures/[fixture-name]/package.json`
+   - Update the `--buildId` parameter in the `fixtures:sync` script
+
+   ```json
+   "fixtures:sync": "pnpm cli sync --buildId NEW_BUILD_ID_HERE && pnpm prettier --write ./.webstudio/"
+   ```
+
+4. **Sync with the correct environment**
+
+   ```bash
+   # Go to fixture folder
+   cd fixtures/webstudio-features
+
+   # Sync from staging environment (replace with your branch)
+   BUILDER_HOST=fix-assets.staging.webstudio.is pnpm run fixtures
+   ```
+
+5. **Fix the origin URL**
+
+   - After syncing, edit `.webstudio/data.json`
+   - Change the origin back to:
+
+   ```json
+   "origin": "https://main.development.webstudio.is"
+   ```
+
+   - This is necessary because sync changes it to the current branch
+
+6. **Commit the changes**
+   ```bash
+   git add fixtures/
+   git commit -m "chore: update fixtures with new assets"
+   git push
+   ```

fixtures/react-router-cloudflare/app/__generated__/$resources.assets.ts

@@ -40,6 +40,7 @@ import {
 import * as constants from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
+import { assets } from "../__generated__/$resources.assets";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -71,6 +72,12 @@ 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);
 };
 

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

@@ -40,6 +40,7 @@ import {
 import * as constants from "../constants.mjs";
 import css from "../__generated__/index.css?url";
 import { sitemap } from "../__generated__/$resources.sitemap.xml";
+import { assets } from "../__generated__/$resources.assets";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -71,6 +72,12 @@ 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);
 };