From 9904cb12d55270610a34f69b2218b0dce658c184 Mon Sep 17 00:00:00 2001
From: Stefan Marx <stefan@marx-merten.de>
Date: Wed, 5 Apr 2023 08:09:11 -0400
Subject: [PATCH 1/2] Wrapped rendered Story Component and reset context
 Information on change to rebuild/rerender Component when Args changed

---
 src/components/RenderContext.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/RenderContext.svelte b/src/components/RenderContext.svelte
index 27c5e1c..0bf740e 100644
--- a/src/components/RenderContext.svelte
+++ b/src/components/RenderContext.svelte
@@ -4,10 +4,16 @@
    * @wrapper
    */
   import { createRenderContext } from './context';
+  import { tick } from 'svelte';
 
   export let Stories;
+  let exporttime = 0;
 
-  createRenderContext($$props);
+  $: {
+    createRenderContext($$props);
+  }
 </script>
 
-<svelte:component this={Stories}/>
\ No newline at end of file
+{#key $$props.args}
+  <svelte:component this={Stories} />
+{/key}

From 06257032339834bc3581e1052a8f4844031a7fe9 Mon Sep 17 00:00:00 2001
From: Stefan Marx <stefan@marx-merten.de>
Date: Wed, 5 Apr 2023 12:19:02 -0400
Subject: [PATCH 2/2] alternative implementation of reactive Svelte Stories
 (using seperate context entries to store args and global context during
 rendertime

---
 src/components/RenderContext.svelte | 16 +++++++---------
 src/components/Story.svelte         | 10 ++++++----
 src/components/Template.svelte      |  9 ++++++---
 src/components/context.ts           | 21 +++++++++++++++++++--
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/components/RenderContext.svelte b/src/components/RenderContext.svelte
index 0bf740e..53921f3 100644
--- a/src/components/RenderContext.svelte
+++ b/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} />
diff --git a/src/components/Story.svelte b/src/components/Story.svelte
index a770d13..a67e5c8 100644
--- a/src/components/Story.svelte
+++ b/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}
diff --git a/src/components/Template.svelte b/src/components/Template.svelte
index 143f1dd..e0bcc26 100644
--- a/src/components/Template.svelte
+++ b/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}
diff --git a/src/components/context.ts b/src/components/context.ts
index b5f8ba6..bd17197 100644
--- a/src/components/context.ts
+++ b/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);
+}