feat: When asset is deleted or uploaded - refresh asset resource (#5568)

## Description

When user is using asset resource and binding it on canvas, for example
video file bound to video tag to the src attribute and then deletes the
asset, it is expected that canvas reflects the deleted asset as well as
the variable.

## 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

@@ -39,21 +39,93 @@
 
 ## Testing
 
-- Test utilities, not components
 - Every bug fix must have a test to prevent regression
+- Write tests for pure functions - avoid mocking whenever possible
+- Extract testable pure logic from side-effect code (I/O, network, DOM, React hooks)
+- **CRITICAL: Never define functions in test files that belong in implementation code**
+- If a test requires a pure function, that function must be exported from the implementation and imported in the test
 
-### Exporting Utilities for Testing
+### When to Test
 
-When testing internal utilities, export via `__testing__`:
+**DO test:**
+
+- Complex business logic with edge cases
+- Pure functions with non-trivial computation (algorithms, parsing, calculations)
+- Functions with multiple branches or conditions
+- Bug fixes (regression prevention)
+
+**DON'T test:**
+
+- Trivial wrappers around library/language features (e.g., `map.delete()`)
+- Simple data transformations with no logic
+- Coordination code that only orchestrates side effects
+- Direct framework integrations (DOM/React/hooks)
+
+### Writing Testable Code
+
+**WRONG** - Never define implementation logic in tests:
 
 ```typescript
-export const __testing__ = { internalUtility };
+// ❌ BAD: Function defined in test file
+const computeKey = (props: { assetId?: string }) => {
+  return props.assetId ?? "default";
+};
+
+test("computes key", () => {
+  expect(computeKey({ assetId: "123" })).toBe("123");
+});
 ```
 
-Import in tests:
+**CORRECT** - Extract to implementation, export, and test:
 
 ```typescript
-const { internalUtility } = __testing__;
+// implementation.ts
+export const computeKey = (props: {
+  assetId?: string;
+  src?: string;
+  defaultValue?: unknown;
+}) => {
+  return (
+    props.assetId?.toString() ??
+    (props.defaultValue != null ? String(props.defaultValue) : undefined) ??
+    (props.src != null ? String(props.src) : undefined)
+  );
+};
+
+// implementation.test.ts
+import { computeKey } from "./implementation";
+
+test("computes key", () => {
+  expect(computeKey({ assetId: "123" })).toBe("123");
+});
+```
+
+This ensures:
+
+- Implementation code is reusable and in the right place
+- Tests verify actual production code, not duplicates
+- No logic duplication between implementation and tests
+
+### Exporting for Tests
+
+**If the function is ALREADY used in production code:**
+
+- Use regular export: `export const utilityFn = ...`
+- The function has real production value beyond testing
+
+**If the function is ONLY needed for tests (internal utility not used elsewhere):**
+
+- Use `__testing__` export to signal it's for testing only:
+
+```typescript
+// implementation.ts
+const internalHelper = (x: number) => x * 2;
+
+export const __testing__ = { internalHelper };
+
+// implementation.test.ts
+import { __testing__ } from "./implementation";
+const { internalHelper } = __testing__;
 ```
 
 Don't create separate utility files just for testing.

apps/builder/app/builder/shared/assets/delete-assets.ts

@@ -1,11 +1,18 @@
 import type { Asset } from "@webstudio-is/sdk";
 import { $assets } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync/sync-stores";
+import { onNextTransactionComplete } from "~/shared/sync/project-queue";
+import { invalidateAssets } from "~/shared/resources";
 
 export const deleteAssets = (assetIds: Asset["id"][]) => {
   serverSyncStore.createTransaction([$assets], (assets) => {
     for (const assetId of assetIds) {
       assets.delete(assetId);
     }
   });
+
+  // Wait for server to confirm transaction, then invalidate cache
+  onNextTransactionComplete(() => {
+    invalidateAssets();
+  });
 };

apps/builder/app/builder/shared/assets/upload-assets.tsx

@@ -16,6 +16,8 @@ import {
   type UploadingFileData,
 } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync/sync-stores";
+import { onNextTransactionComplete } from "~/shared/sync/project-queue";
+import { invalidateAssets } from "~/shared/resources";
 import {
   formatAssetName,
   getFileName,
@@ -38,6 +40,10 @@ const safeDeleteAssets = (assetIds: Asset["id"][], projectId: string) => {
       assets.delete(assetId);
     }
   });
+
+  onNextTransactionComplete(() => {
+    invalidateAssets();
+  });
 };
 
 const safeSetAsset = (asset: Asset, projectId: string) => {
@@ -52,6 +58,10 @@ const safeSetAsset = (asset: Asset, projectId: string) => {
   serverSyncStore.createTransaction([$assets], (assets) => {
     assets.set(asset.id, asset);
   });
+
+  onNextTransactionComplete(() => {
+    invalidateAssets();
+  });
 };
 
 const getFilesData = async <T extends File | URL>(

apps/builder/app/canvas/features/webstudio-component/webstudio-component.test.tsx

@@ -0,0 +1,81 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, test, expect } from "vitest";
+import { __testing__ } from "./webstudio-component";
+
+const { computeComponentKey } = __testing__;
+
+describe("computeComponentKey - key generation logic", () => {
+  test("prioritizes assetId over other props", () => {
+    expect(
+      computeComponentKey({
+        $webstudio$canvasOnly$assetId: "asset-123",
+        src: "/image.jpg",
+        defaultValue: "default",
+      })
+    ).toBe("asset-123");
+  });
+
+  test("falls back to defaultValue when no assetId", () => {
+    expect(
+      computeComponentKey({
+        src: "/image.jpg",
+        defaultValue: "default-value",
+      })
+    ).toBe("default-value");
+  });
+
+  test("uses src when no assetId or defaultValue", () => {
+    expect(
+      computeComponentKey({
+        src: "/path/to/video.mp4",
+      })
+    ).toBe("/path/to/video.mp4");
+  });
+
+  test("returns undefined when no relevant props", () => {
+    expect(computeComponentKey({})).toBeUndefined();
+  });
+
+  test("handles null and undefined values", () => {
+    expect(
+      computeComponentKey({
+        src: null,
+        defaultValue: undefined,
+      })
+    ).toBeUndefined();
+  });
+
+  test("coerces defaultValue to string", () => {
+    expect(computeComponentKey({ defaultValue: 42 })).toBe("42");
+    expect(computeComponentKey({ defaultValue: true })).toBe("true");
+    expect(computeComponentKey({ defaultValue: 0 })).toBe("0");
+  });
+
+  test("coerces src to string", () => {
+    expect(computeComponentKey({ src: "string-src" })).toBe("string-src");
+    expect(computeComponentKey({ src: 123 })).toBe("123");
+    expect(computeComponentKey({ src: undefined })).toBeUndefined();
+  });
+
+  test("different assetIds produce different keys", () => {
+    const key1 = computeComponentKey({
+      $webstudio$canvasOnly$assetId: "asset-123",
+      src: "/image.jpg",
+    });
+    const key2 = computeComponentKey({
+      $webstudio$canvasOnly$assetId: "asset-456",
+      src: "/image.jpg",
+    });
+
+    expect(key1).not.toBe(key2);
+  });
+
+  test("different src values produce different keys", () => {
+    const key1 = computeComponentKey({ src: "/assets/video1.mp4" });
+    const key2 = computeComponentKey({ src: "/assets/video2.mp4" });
+
+    expect(key1).not.toBe(key2);
+  });
+});

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -41,6 +41,21 @@ import {
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";
 import { Input, Select, Textarea } from "@webstudio-is/sdk-components-react";
+
+const computeComponentKey = (props: Record<string, unknown>) => {
+  const assetId = props.$webstudio$canvasOnly$assetId;
+  const src = props.src;
+  const defaultValue = props.defaultValue;
+
+  return (
+    (typeof assetId === "string" ? assetId : undefined) ??
+    (defaultValue != null ? String(defaultValue) : undefined) ??
+    (src != null ? String(src) : undefined)
+  );
+};
+
+export const __testing__ = { computeComponentKey };
+
 import {
   $propValuesByInstanceSelectorWithMemoryProps,
   getIndexedInstanceId,
@@ -557,8 +572,9 @@ export const WebstudioComponentCanvas = forwardRef<
 
   // React ignores defaultValue changes after first render.
   // Key prop forces re-creation to reflect updates on canvas.
-  const key =
-    props.defaultValue != null ? props.defaultValue.toString() : undefined;
+  // Also use assetId to recreate component when asset changes (e.g., deleted, replaced)
+  // For expressions that resolve to asset URLs (via assets resource), use the src value itself
+  const key = computeComponentKey(props);
 
   const instanceElement = (
     <>

apps/builder/app/shared/resource-utils.ts

@@ -0,0 +1,21 @@
+import hash from "@emotion/hash";
+import type { ResourceRequest } from "@webstudio-is/sdk";
+
+export const getResourceKey = (resource: ResourceRequest) => {
+  try {
+    return hash(
+      JSON.stringify([
+        // explicitly list all fields to keep hash stable
+        resource.name,
+        resource.method,
+        resource.url,
+        resource.searchParams,
+        resource.headers,
+        resource.body,
+      ])
+    );
+  } catch {
+    // guard from invalid resources
+    return "";
+  }
+};