Svelte: Fix docs rendering

code/renderers/svelte/src/render.ts

@@ -1,36 +1,31 @@
-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
 import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 
 import type { SvelteFramework } from './types';
 
-const { document } = global;
-
-let previousComponent: SvelteComponentTyped | null = null;
+const componentsByDomElementId = new Map<string, SvelteComponentTyped>();
 
-function cleanUpPreviousStory() {
-  if (!previousComponent) {
+function cleanupExistingComponent(domElementKey: string) {
+  if (!componentsByDomElementId.has(domElementKey)) {
     return;
   }
-  previousComponent.$destroy();
-  previousComponent = null;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it exists because we just checked
+  componentsByDomElementId.get(domElementKey)!.$destroy();
+  componentsByDomElementId.delete(domElementKey);
 }
 
 export function renderToDOM(
   { storyFn, kind, name, showMain, showError, storyContext }: Store_RenderContext<SvelteFramework>,
   domElement: Element
 ) {
-  cleanUpPreviousStory();
-
-  const target = domElement || document.getElementById('storybook-root');
-
-  target.innerHTML = '';
+  // in docs mode we're rendering multiple stories to the DOM, so we need to key by the story id
+  const domElementKey = storyContext.viewMode === 'docs' ? storyContext.id : 'storybook-root';
+  cleanupExistingComponent(domElementKey);
 
-  previousComponent = new PreviewRender({
-    target,
+  const renderedComponent = new PreviewRender({
+    target: domElement,
     props: {
       storyFn,
       storyContext,
@@ -39,6 +34,7 @@ export function renderToDOM(
       showError,
     },
   });
+  componentsByDomElementId.set(domElementKey, renderedComponent);
 
   showMain();
 }

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?
    */

code/renderers/vue3/src/render.ts

@@ -20,20 +20,31 @@ export const setup = (fn: (app: any) => void) => {
   setupFunction = fn;
 };
 
-const map = new Map<Element, ReturnType<typeof createApp>>();
+const componentsByDomElementId = new Map<string, ReturnType<typeof createApp>>();
 
 export function renderToDOM(
-  { title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueFramework>,
+  {
+    title,
+    name,
+    storyFn,
+    showMain,
+    showError,
+    showException,
+    storyContext,
+  }: Store_RenderContext<VueFramework>,
   domElement: Element
 ) {
+  // in docs mode we're rendering multiple stories to the DOM, so we need to key by the story id
+  const domElementKey = storyContext.viewMode === 'docs' ? storyContext.id : 'storybook-root';
+
   // TODO: explain cyclical nature of these app => story => mount
   let element: StoryFnVueReturnType;
   const storybookApp = createApp({
     unmounted() {
-      map.delete(domElement);
+      componentsByDomElementId.delete(domElementKey);
     },
     render() {
-      map.set(domElement, storybookApp);
+      componentsByDomElementId.set(domElementKey, storybookApp);
       setupFunction(storybookApp);
       return h(element);
     },
@@ -54,7 +65,7 @@ export function renderToDOM(
 
   showMain();
 
-  map.get(domElement)?.unmount();
+  componentsByDomElementId.get(domElementKey)?.unmount();
 
   storybookApp.mount(domElement);
 }

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>
-```
+```