From 25ccad51efb818ec63e79c50f15d3a74aa7c3823 Mon Sep 17 00:00:00 2001
From: cgradusov <77288439+cgradusov@users.noreply.github.com>
Date: Fri, 15 May 2026 17:53:07 +0300
Subject: [PATCH 1/4] fix(svelte): repaint PreviewRender on non-Vite builder
 HMR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Svelte 5's `$.hmr(Component)` returns an identity-stable proxy across
hot-updates. PreviewRender's `$derived.by(() => storyFn())` compared
the returned `{ Component, props }` by identity, saw the same proxy
reference, and never re-fired — so on any non-Vite builder
(webpack5, Rspack) the renderer froze on the pre-HMR component code.
State was preserved on the mounted instance, but the new code never
reached the DOM.

Track HMR cycles in a `<script module>` store fed by both
`vite:afterUpdate` (Vite) and `addStatusHandler('idle')`
(webpack/Rspack), feature-detected so the module stays builder-
agnostic. Touch the tick inside `$derived.by` and wrap the
DecoratorHandler in `{#key tick}` so the inner story subtree is torn
down and re-created at the end of each HMR cycle.

No public API changes; the store is module-local.
---
 .../svelte/static/PreviewRender.svelte        | 56 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/code/renderers/svelte/static/PreviewRender.svelte b/code/renderers/svelte/static/PreviewRender.svelte
index 2525312c2910..c29480be4bdd 100644
--- a/code/renderers/svelte/static/PreviewRender.svelte
+++ b/code/renderers/svelte/static/PreviewRender.svelte
@@ -1,3 +1,48 @@
+<script module>
+  import { writable } from 'svelte/store';
+
+  /**
+   * HMR cycle counter. Increments on every hot-update so any `$derived`
+   * that reads it is forced to re-evaluate, and any `{#key}` block keyed
+   * on it tears down and re-creates its children.
+   *
+   * Why this is necessary: Svelte 5's `$.hmr(Component)` returns an
+   * identity-stable proxy across updates. `$derived.by(() => storyFn())`
+   * compares the returned `{ Component, props }` by identity, sees the
+   * same proxy reference, and never re-fires — so the renderer freezes
+   * on the pre-HMR component code on any non-Vite builder. Under Vite,
+   * `vite-plugin-svelte` papers over this with private coordination
+   * channels; under webpack/Rspack there is no such bridge.
+   *
+   * Both the Vite event API and the webpack/Rspack status-handler API
+   * are feature-detected so a single PreviewRender module works on
+   * every builder without import-time errors.
+   */
+  const hmrTick = writable(0);
+
+  if (typeof import.meta !== 'undefined' && import.meta.hot) {
+    const hot = import.meta.hot;
+    // Vite: fires after every HMR cycle completes.
+    if (typeof hot.on === 'function') {
+      hot.on('vite:afterUpdate', () => hmrTick.update((n) => n + 1));
+    }
+    // webpack / Rspack: status transitions to 'idle' once apply finishes.
+    if (typeof hot.addStatusHandler === 'function') {
+      let inCycle = false;
+      hot.addStatusHandler((status) => {
+        if (status === 'check' || status === 'prepare') {
+          inCycle = true;
+          return;
+        }
+        if (status === 'idle' && inCycle) {
+          inCycle = false;
+          hmrTick.update((n) => n + 1);
+        }
+      });
+    }
+  }
+</script>
+
 <script>
   /*
   ! DO NOT change this DecoratorHandler import to a relative path, it will break it.
@@ -8,11 +53,18 @@
 
   const { name, title, storyFn, showError } = $props();
 
+  // Touch `hmrTick` so the derivation re-runs on every HMR cycle. Without
+  // this, `$derived.by` short-circuits when `storyFn()` returns the same
+  // (identity-stable) Svelte HMR proxy reference, and new component code
+  // never reaches the DOM.
+  const tick = $derived($hmrTick);
+
   let {
     /** @type {import('svelte').SvelteComponent} */
     Component,
     props = {},
   } = $derived.by(() => {
+    void tick;
     return storyFn();
   });
 
@@ -34,5 +86,7 @@
   {#snippet pending()}
     <div id="sb-pending-async-component-notice">Pending async component...</div>
   {/snippet}
-  <DecoratorHandler {Component} {props} />
+  {#key tick}
+    <DecoratorHandler {Component} {props} />
+  {/key}
 </svelte:boundary>

From f60dccbb3fcf897c0c08f6805fe29a3389a2c42e Mon Sep 17 00:00:00 2001
From: cgradusov <77288439+cgradusov@users.noreply.github.com>
Date: Fri, 22 May 2026 11:14:03 +0300
Subject: [PATCH 2/4] fix(svelte): scope HMR repaint to webpack/Rspack, not
 Vite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit fed the `hmrTick` store from both `vite:afterUpdate`
(Vite) and `addStatusHandler('idle')` (webpack/Rspack). Under Vite this
is both unnecessary and harmful: `vite-plugin-svelte` already performs
fine-grained, state-preserving HMR, and forcing a full `{#key tick}`
remount on every `vite:afterUpdate` tears down the subtree and discards
that preserved state.

Drop the `vite:afterUpdate` listener and keep the tick only on the
webpack/Rspack status-handler path — the builders that actually freeze
on the identity-stable `$.hmr()` proxy. Vite now keeps its native HMR
behavior untouched; webpack/Rspack still get a full repaint at the end
of each hot-update cycle.
---
 .../svelte/static/PreviewRender.svelte        | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/code/renderers/svelte/static/PreviewRender.svelte b/code/renderers/svelte/static/PreviewRender.svelte
index c29480be4bdd..7b9e41c1970c 100644
--- a/code/renderers/svelte/static/PreviewRender.svelte
+++ b/code/renderers/svelte/static/PreviewRender.svelte
@@ -10,23 +10,25 @@
    * identity-stable proxy across updates. `$derived.by(() => storyFn())`
    * compares the returned `{ Component, props }` by identity, sees the
    * same proxy reference, and never re-fires — so the renderer freezes
-   * on the pre-HMR component code on any non-Vite builder. Under Vite,
-   * `vite-plugin-svelte` papers over this with private coordination
-   * channels; under webpack/Rspack there is no such bridge.
+   * on the pre-HMR component code on any non-Vite builder.
    *
-   * Both the Vite event API and the webpack/Rspack status-handler API
-   * are feature-detected so a single PreviewRender module works on
-   * every builder without import-time errors.
+   * This is scoped to webpack/Rspack on purpose. Under Vite,
+   * `vite-plugin-svelte` papers over the proxy issue with its own
+   * private coordination channels and performs fine-grained HMR that
+   * preserves component state. Forcing a full `{#key}` remount there
+   * would defeat that state preservation, so we deliberately do NOT
+   * listen to `vite:afterUpdate` and let Vite's native HMR handle it.
+   *
+   * The webpack/Rspack status-handler API is feature-detected so a
+   * single PreviewRender module works on every builder without
+   * import-time errors.
    */
   const hmrTick = writable(0);
 
   if (typeof import.meta !== 'undefined' && import.meta.hot) {
     const hot = import.meta.hot;
-    // Vite: fires after every HMR cycle completes.
-    if (typeof hot.on === 'function') {
-      hot.on('vite:afterUpdate', () => hmrTick.update((n) => n + 1));
-    }
     // webpack / Rspack: status transitions to 'idle' once apply finishes.
+    // Vite is intentionally excluded (see comment above).
     if (typeof hot.addStatusHandler === 'function') {
       let inCycle = false;
       hot.addStatusHandler((status) => {

From fdc33df7d678055697177378f26bc9eb7be938dc Mon Sep 17 00:00:00 2001
From: Constantine <77288439+cgradusov@users.noreply.github.com>
Date: Wed, 27 May 2026 05:37:58 +0300
Subject: [PATCH 3/4] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 code/renderers/svelte/static/PreviewRender.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/renderers/svelte/static/PreviewRender.svelte b/code/renderers/svelte/static/PreviewRender.svelte
index 7b9e41c1970c..26136334e94c 100644
--- a/code/renderers/svelte/static/PreviewRender.svelte
+++ b/code/renderers/svelte/static/PreviewRender.svelte
@@ -25,11 +25,11 @@
    */
   const hmrTick = writable(0);
 
-  if (typeof import.meta !== 'undefined' && import.meta.hot) {
-    const hot = import.meta.hot;
+  if (typeof import.meta !== 'undefined') {
+    const hot = import.meta.webpackHot ?? import.meta.hot;
     // webpack / Rspack: status transitions to 'idle' once apply finishes.
     // Vite is intentionally excluded (see comment above).
-    if (typeof hot.addStatusHandler === 'function') {
+    if (hot && typeof hot.addStatusHandler === 'function') {
       let inCycle = false;
       hot.addStatusHandler((status) => {
         if (status === 'check' || status === 'prepare') {

From 1c2a718fa374aff1ca641d0e2ac3d285c97fdb53 Mon Sep 17 00:00:00 2001
From: cgradusov <77288439+cgradusov@users.noreply.github.com>
Date: Fri, 29 May 2026 03:50:54 +0300
Subject: [PATCH 4/4] test(svelte): update portable-stories snapshots for
 {#key} HMR remount anchor

---
 .../__snapshots__/portable-stories.test.ts.snap  | 16 ++++++++++++++++
 .../stories/__snapshots__/Button.test.ts.snap    | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index d1b76d20d8cd..f40277120a7e 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -6,6 +6,7 @@ exports[`Renders CSF2Secondary story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -20,6 +21,7 @@ exports[`Renders CSF2Secondary story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -32,6 +34,7 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
@@ -56,6 +59,7 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -66,6 +70,7 @@ exports[`Renders CSF3Button story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -80,6 +85,7 @@ exports[`Renders CSF3Button story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -90,6 +96,7 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div>
       <p
         data-testid="custom-render"
@@ -113,6 +120,7 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -123,6 +131,7 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <input
       data-testid="input"
     />
@@ -132,6 +141,7 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -142,6 +152,7 @@ exports[`Renders CSF3Primary story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--large storybook-button--primary"
       style=""
@@ -156,6 +167,7 @@ exports[`Renders CSF3Primary story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -166,6 +178,7 @@ exports[`Renders LoaderStory story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div>
       <div
         data-testid="loaded-data"
@@ -185,6 +198,7 @@ exports[`Renders LoaderStory story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
@@ -197,6 +211,7 @@ exports[`Renders NewStory story 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
@@ -221,6 +236,7 @@ exports[`Renders NewStory story 1`] = `
     
     
     
+    
   </div>
 </body>
 `;
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
index 4fb950f42dab..31165bbe1962 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
@@ -17,6 +17,8 @@ exports[`Renders CSF2Secondary story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -50,6 +52,8 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -72,6 +76,8 @@ exports[`Renders CSF3Button story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -103,6 +109,8 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -120,6 +128,8 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -142,6 +152,8 @@ exports[`Renders CSF3Primary story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -169,6 +181,8 @@ exports[`Renders LoaderStory story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>
@@ -202,6 +216,8 @@ exports[`Renders NewStory story 1`] = `
     
     <!---->
     
+    <!---->
+    
     
   </div>
 </body>