Merge pull request #19705 from storybookjs/jeppe/fix-svelte-in-docs

Svelte: Fix docs rendering

code/lib/store/template/stories/rendering.stories.ts

@@ -31,13 +31,9 @@ export const ChangeArgs = {
     await expect(button).toHaveFocus();
 
     // Vue3: https://github.com/storybookjs/storybook/issues/13913
-    // Svelte: https://github.com/storybookjs/storybook/issues/19205
     // Web-components: https://github.com/storybookjs/storybook/issues/19415
     // Preact: https://github.com/storybookjs/storybook/issues/19504
-    if (
-      ['vue3', 'svelte', 'web-components', 'html', 'preact'].includes(globalThis.storybookRenderer)
-    )
-      return;
+    if (['vue3', 'web-components', 'html', 'preact'].includes(globalThis.storybookRenderer)) return;
 
     // When we change the args to the button, it should not rerender
     await channel.emit('updateStoryArgs', { storyId: id, updatedArgs: { label: 'New Text' } });

code/renderers/svelte/src/render.ts

@@ -1,5 +1,3 @@
-import global from 'global';
-
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { SvelteComponentTyped } from 'svelte';
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -7,40 +5,66 @@ import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 
 import type { SvelteFramework } from './types';
 
-const { document } = global;
+const componentsByDomElement = new Map<Element, SvelteComponentTyped>();
 
-let previousComponent: SvelteComponentTyped | null = null;
-
-function cleanUpPreviousStory() {
-  if (!previousComponent) {
+function teardown(domElement: Element) {
+  if (!componentsByDomElement.has(domElement)) {
     return;
   }
-  previousComponent.$destroy();
-  previousComponent = null;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it exists because we just checked
+  componentsByDomElement.get(domElement)!.$destroy();
+
+  // eslint-disable-next-line no-param-reassign -- this is on purpose
+  domElement.innerHTML = '';
+  componentsByDomElement.delete(domElement);
 }
 
 export function renderToDOM(
-  { storyFn, kind, name, showMain, showError, storyContext }: Store_RenderContext<SvelteFramework>,
+  {
+    storyFn,
+    kind,
+    name,
+    showMain,
+    showError,
+    storyContext,
+    forceRemount,
+  }: Store_RenderContext<SvelteFramework>,
   domElement: Element
 ) {
-  cleanUpPreviousStory();
+  const existingComponent = componentsByDomElement.get(domElement);
 
-  const target = domElement || document.getElementById('storybook-root');
+  if (forceRemount) {
+    teardown(domElement);
+  }
 
-  target.innerHTML = '';
-
-  previousComponent = new PreviewRender({
-    target,
-    props: {
+  if (!existingComponent || forceRemount) {
+    const createdComponent = new PreviewRender({
+      target: domElement,
+      props: {
+        storyFn,
+        storyContext,
+        name,
+        kind,
+        showError,
+      },
+    }) as SvelteComponentTyped;
+    componentsByDomElement.set(domElement, createdComponent);
+  } else {
+    existingComponent.$set({
       storyFn,
       storyContext,
       name,
       kind,
       showError,
-    },
-  });
+    });
+  }
 
   showMain();
+
+  // teardown the component when the story changes
+  return () => {
+    teardown(domElement);
+  };
 }
 
 export const render: ArgsStoryFn<SvelteFramework> = (args, context) => {

code/renderers/svelte/template/cli/Button.svelte

@@ -9,7 +9,7 @@
   /**
    * What background color to use
    */
-  export let backgroundColor;
+  export let backgroundColor = undefined;
   /**
    * How large should the button be?
    */
@@ -19,9 +19,9 @@
    */
   export let label = '';
 
-  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
-  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 
   const dispatch = createEventDispatcher();
 

code/renderers/svelte/template/components/Button.svelte

@@ -21,9 +21,9 @@
    */
   export let label = '';
 
-  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
-  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 
   const dispatch = createEventDispatcher();
 

code/renderers/svelte/templates/PreviewRender.svelte

@@ -8,7 +8,7 @@
   export let showError;
   export let storyContext;
 
-  const {
+  let {
     /** @type {SvelteComponent} */
     Component,
     /** @type {any} */
@@ -19,11 +19,16 @@
     WrapperData = {},
   } = storyFn();
 
-   const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
-      .filter(([k, v]) => v.action && props[k] != null)
-      .map(([k, v]) => [v.action, props[k]]));
+  // reactive, re-render on storyFn change
+  $: ({ Component, props = {}, on, Wrapper, WrapperData = {} } = storyFn());
 
-  const events = {...eventsFromArgTypes, ...on};
+  const eventsFromArgTypes = Object.fromEntries(
+    Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && props[k] != null)
+      .map(([k, v]) => [v.action, props[k]])
+  );
+
+  const events = { ...eventsFromArgTypes, ...on };
 
   if (!Component) {
     showError({
@@ -36,9 +41,11 @@
     });
   }
 </script>
+
 <SlotDecorator
   decorator={Wrapper}
   decoratorProps={WrapperData}
   component={Component}
-  props={props}
-  on={events}/>
+  {props}
+  on={events}
+/>

code/renderers/svelte/templates/SlotDecorator.svelte

@@ -21,10 +21,11 @@
     });
   }
 </script>
+
 {#if decorator}
   <svelte:component this={decorator} {...decoratorProps} bind:this={decoratorInstance}>
-    <svelte:component this={component} {...props} bind:this={instance}/>
+    <svelte:component this={component} {...props} bind:this={instance} />
   </svelte:component>
 {:else}
-  <svelte:component this={component} {...props} bind:this={instance}/>
-{/if}
+  <svelte:component this={component} {...props} bind:this={instance} />
+{/if}

code/workspace.json

@@ -181,11 +181,6 @@
       "root": "lib/core-server",
       "type": "library"
     },
-    "@storybook/core-vite": {
-      "implicitDependencies": [],
-      "root": "lib/core-vite",
-      "type": "library"
-    },
     "@storybook/core-webpack": {
       "implicitDependencies": [],
       "root": "lib/core-webpack",

docs/snippets/svelte/button-implementation.js.mdx

@@ -11,7 +11,7 @@
   /**
    * What background color to use
    */
-  export let backgroundColor;
+  export let backgroundColor = undefined;
   /**
    * How large should the button be?
    */
@@ -34,4 +34,4 @@
 </script>
 
 <button type="button" {style} on:click="{onClick}">{label}</button>
-```
+```