@storybook/addon-svelte-csf 3.0.1 → 3.0.3

package/dist/cjs/components/RenderContext.svelte

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

package/dist/cjs/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}

package/dist/cjs/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}

package/dist/cjs/components/context.js

@@ -1,5 +1,7 @@
-import { getContext, hasContext, setContext } from "svelte";
-const CONTEXT_KEY = "storybook-registration-context";
+import { getContext, hasContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+const CONTEXT_KEY = 'storybook-registration-context';
+const CONTEXT_KEY_COMPONENT = 'storybook-registration-context-component';
 export function createRenderContext(props = {}) {
   setContext(CONTEXT_KEY, {
     render: true,
@@ -27,4 +29,18 @@ export function useContext() {
     createRenderContext();
   }
   return getContext(CONTEXT_KEY);
+}
+export function getStoryRenderContext() {
+  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);
 }

package/dist/esm/components/RenderContext.svelte

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

package/dist/esm/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}

package/dist/esm/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}

package/dist/esm/components/context.js

@@ -1,5 +1,7 @@
-import { getContext, hasContext, setContext } from "svelte";
-const CONTEXT_KEY = "storybook-registration-context";
+import { getContext, hasContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+const CONTEXT_KEY = 'storybook-registration-context';
+const CONTEXT_KEY_COMPONENT = 'storybook-registration-context-component';
 export function createRenderContext(props = {}) {
   setContext(CONTEXT_KEY, {
     render: true,
@@ -27,4 +29,18 @@ export function useContext() {
     createRenderContext();
   }
   return getContext(CONTEXT_KEY);
+}
+export function getStoryRenderContext() {
+  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);
 }

package/index.d.ts

@@ -1,13 +1,13 @@
 import type { SvelteComponentTyped, SvelteComponent } from 'svelte';
-import type { Addon_BaseMeta as BaseMeta, Addon_BaseAnnotations as BaseAnnotations, StoryContext } from '@storybook/types';
+import type { Addon_BaseMeta as BaseMeta, Addon_BaseAnnotations as BaseAnnotations, StoryContext, WebRenderer } from '@storybook/types';
 
 
-type DecoratorReturnType = void|SvelteComponent|{
+type DecoratorReturnType = void | SvelteComponent | {
     Component: any,
     props?: any
 }
 
-interface StoryProps extends BaseAnnotations<any, DecoratorReturnType> {
+interface StoryProps extends BaseAnnotations<any, DecoratorReturnType, WebRenderer> {
     /**
      * Id of the story.
      * 
@@ -32,7 +32,7 @@ interface StoryProps extends BaseAnnotations<any, DecoratorReturnType> {
      * If source is true, then the source of the story will be used instead.
      * If source is a string, it replaces the source of the story.
      */
-    source?: boolean|string
+    source?: boolean | string
 }
 
 interface TemplateProps extends BaseAnnotations<any, DecoratorReturnType> {
@@ -54,7 +54,7 @@ interface Slots {
 /**
  * Meta.
  */
-export class Meta extends SvelteComponentTyped<BaseMeta<any> & BaseAnnotations<any, DecoratorReturnType>> {}
+export class Meta extends SvelteComponentTyped<BaseMeta<any> & BaseAnnotations<any, DecoratorReturnType>> { }
 /**
  * Story.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Allows to write stories in Svelte syntax",
   "keywords": [
     "storybook-addons",
@@ -57,6 +57,7 @@
     "@storybook/svelte": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
     "@storybook/svelte-webpack5": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
     "@storybook/testing-library": "^0.0.13",
+    "@storybook/types": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
     "auto": "^10.43.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^8.1.0",