alternative implementation of reactive Svelte Stories (using seperate…

… context entries to store args and global context during rendertime

src/components/RenderContext.svelte

@@ -3,17 +3,15 @@
    * @component
    * @wrapper
    */
-  import { createRenderContext } from './context';
-  import { tick } from 'svelte';
+  import { createRenderContext, setStoryRenderContext } from './context';
 
   export let Stories;
-  let exporttime = 0;
+  export let args = {};
+  export let storyContext = {};
 
-  $: {
-    createRenderContext($$props);
-  }
+  createRenderContext($$props);
+
+  $: setStoryRenderContext(args, storyContext);
 </script>
 
-{#key $$props.args}
-  <svelte:component this={Stories} />
-{/key}
+<svelte:component this={Stories} />

src/components/Story.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { useContext } from './context';
+  import { getStoryRenderContext, useContext } from './context';
 
   const context = useContext();
 
@@ -12,14 +12,16 @@
 
   context.register({
     name,
-    ...$$restProps, 
+    ...$$restProps,
     template: template != null ? template : !$$slots.default ? 'default' : null,
   });
 
   $: render = context.render && !context.templateName && context.storyName == name;
-
+  const ctx = getStoryRenderContext();
+  const args = ctx.argsStore;
+  const storyContext = ctx.storyContextStore;
 </script>
 
 {#if render}
-  <slot {...context.args} context={context.storyContext} args={context.args}/>
+  <slot {...$args} context={$storyContext} args={$args} />
 {/if}

src/components/Template.svelte

@@ -1,15 +1,18 @@
 <script>
-  import { useContext } from './context';
+  import { useContext, getStoryRenderContext } from './context';
 
   const context = useContext();
 
   export let id = 'default';
 
-  context.register({id, isTemplate: true});
+  context.register({ id, isTemplate: true });
 
   $: render = context.render && context.templateId === id;
+  const ctx = getStoryRenderContext();
+  const args = ctx.argsStore;
+  const storyContext = ctx.storyContextStore;
 </script>
 
 {#if render}
-  <slot {...context.args} context={context.storyContext} args={context.args}/>
+  <slot {...$args} context={$storyContext} args={$args} />
 {/if}

src/components/context.ts

@@ -1,6 +1,8 @@
-import { getContext, hasContext, setContext } from "svelte";
+import { getContext, hasContext, setContext } from 'svelte';
+import { writable, Writable } from 'svelte/store';
 
-const CONTEXT_KEY = "storybook-registration-context";
+const CONTEXT_KEY = 'storybook-registration-context';
+const CONTEXT_KEY_COMPONENT = 'storybook-registration-context-component';
 
 export function createRenderContext(props: any = {}) {
   setContext(CONTEXT_KEY, {
@@ -32,3 +34,18 @@ export function useContext() {
   }
   return getContext(CONTEXT_KEY);
 }
+export function getStoryRenderContext(): {
+  argsStore: Writable<Record<string, unknown>>;
+  storyContextStore: Writable<Record<string, unknown>>;
+} {
+  if (!hasContext(CONTEXT_KEY_COMPONENT)) {
+    setContext(CONTEXT_KEY_COMPONENT, { argsStore: writable({}), storyContextStore: writable({}) });
+  }
+  return getContext(CONTEXT_KEY_COMPONENT);
+}
+
+export function setStoryRenderContext(args, storyContext) {
+  const ctx = getStoryRenderContext();
+  ctx.argsStore.set(args);
+  ctx.storyContextStore.set(storyContext);
+}