From 92ce5a342f257f891e04bb7ec08b0b3515d48b5d Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Sat, 18 Oct 2025 00:10:23 +0200 Subject: [PATCH] Add auto-reload for HTML artifacts when dependencies change HTML artifacts can read other artifacts via getArtifact() and attachments. When any artifact is created, updated, rewritten, or deleted, all HTML artifacts now automatically reload to reflect the latest data. Changes: - Add reloadAllHtmlArtifacts() method to ArtifactsPanel - Call reload after all artifact mutations (create/update/rewrite/delete) - Make HtmlArtifact.sandboxIframeRef and executeContent() public - Update runtime providers before re-executing HTML content This ensures HTML artifacts always display current data from their dependencies. --- .../src/tools/artifacts/HtmlArtifact.ts | 4 ++-- .../web-ui/src/tools/artifacts/artifacts.ts | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts index 81f5370f..2b2c6cb3 100644 --- a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts +++ b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts @@ -23,7 +23,7 @@ export class HtmlArtifact extends ArtifactElement { private logs: Array<{ type: "log" | "error"; text: string }> = []; // Refs for DOM elements - private sandboxIframeRef: Ref = createRef(); + public sandboxIframeRef: Ref = createRef(); private consoleRef: Ref = createRef(); @state() private viewMode: "preview" | "code" = "preview"; @@ -76,7 +76,7 @@ export class HtmlArtifact extends ArtifactElement { } } - private executeContent(html: string) { + public executeContent(html: string) { const sandbox = this.sandboxIframeRef.value; if (!sandbox) return; diff --git a/packages/web-ui/src/tools/artifacts/artifacts.ts b/packages/web-ui/src/tools/artifacts/artifacts.ts index b8d1713f..17b86e29 100644 --- a/packages/web-ui/src/tools/artifacts/artifacts.ts +++ b/packages/web-ui/src/tools/artifacts/artifacts.ts @@ -451,6 +451,18 @@ export class ArtifactsPanel extends LitElement { }); } + // Reload all HTML artifacts (called when any artifact changes) + private reloadAllHtmlArtifacts() { + this.artifactElements.forEach((element) => { + if (element instanceof HtmlArtifact && element.sandboxIframeRef.value) { + // Update runtime providers with latest artifact state + element.runtimeProviders = this.getHtmlArtifactRuntimeProviders(); + // Re-execute the HTML content + element.executeContent(element.content); + } + }); + } + private async createArtifact( params: ArtifactsParams, options: { skipWait?: boolean; silent?: boolean } = {}, @@ -479,6 +491,9 @@ export class ArtifactsPanel extends LitElement { this.requestUpdate(); } + // Reload all HTML artifacts since they might depend on this new artifact + this.reloadAllHtmlArtifacts(); + // For HTML files, wait for execution let result = `Created file ${params.filename}`; if (this.getFileType(params.filename) === "html" && !options.skipWait) { @@ -520,6 +535,9 @@ export class ArtifactsPanel extends LitElement { // Show the artifact this.showArtifact(params.filename); + // Reload all HTML artifacts since they might depend on this updated artifact + this.reloadAllHtmlArtifacts(); + // For HTML files, wait for execution let result = `Updated file ${params.filename}`; if (this.getFileType(params.filename) === "html" && !options.skipWait) { @@ -557,6 +575,9 @@ export class ArtifactsPanel extends LitElement { // Show the artifact this.showArtifact(params.filename); + // Reload all HTML artifacts since they might depend on this rewritten artifact + this.reloadAllHtmlArtifacts(); + // For HTML files, wait for execution let result = ""; if (this.getFileType(params.filename) === "html" && !options.skipWait) { @@ -608,6 +629,9 @@ export class ArtifactsPanel extends LitElement { this.onArtifactsChange?.(); this.requestUpdate(); + // Reload all HTML artifacts since they might have depended on this deleted artifact + this.reloadAllHtmlArtifacts(); + return `Deleted file ${params.filename}`; }