fix(svelte): dynamic source, fix #344

histoire-dev · Nov 12, 2022 · 11e0432 · 11e0432
1 parent c199ad4
commit 11e0432
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/examples/svelte3/src/BaseButton.story.svelte b/examples/svelte3/src/BaseButton.story.svelte
@@ -7,9 +7,19 @@
 
   let disabled = false
   let size = 'medium'
+
+  let source;
+
+  $: {
+    source = `<BaseButton`;
+    if (disabled) {
+      source += ` disabled`;
+    }
+    source += `>Click me !</BaseButton>`;
+  }
 </script>
 
-<Hst.Story title="BaseButton">
+<Hst.Story title="BaseButton" {source}>
   <BaseButton {disabled} {size} on:click={event => logEvent('click', event)}>
     Click me!
   </BaseButton>

diff --git a/packages/histoire-plugin-svelte/src/client/RenderStory.svelte b/packages/histoire-plugin-svelte/src/client/RenderStory.svelte
@@ -1,12 +1,23 @@
 <script lang="ts">
-import { Story } from '@histoire/shared'
+import type { Story, Variant } from '@histoire/shared'
 import { getContext, setContext } from 'svelte'
 
 const story: Story = getContext('__hstStory')
+const currentVariant: Variant = getContext('__hstVariant')
 const slotName: string = getContext('__hstSlot')
 
 let index = { value: 0 }
 setContext('__hstIndex', index)
+
+export let source: string = null
+
+$: {
+  if (source != null) {
+    Object.assign(currentVariant, {
+      source,
+    })
+  }
+}
 </script>
 
 {#if slotName === 'controls'}

diff --git a/packages/histoire-plugin-svelte/src/client/RenderVariant.svelte b/packages/histoire-plugin-svelte/src/client/RenderVariant.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-import { Story } from '@histoire/shared'
+import type { Story, Variant } from '@histoire/shared'
 import { getContext } from 'svelte'
-import Variant from '../collect/Variant.svelte';
 
 const story: Story = getContext('__hstStory')
 const currentVariant: Variant = getContext('__hstVariant')
@@ -12,6 +11,16 @@ const variant = story.variants[index.value]
 index.value++
 
 $: shouldRender = currentVariant.id === variant.id
+
+export let source: string = null
+
+$: {
+  if (source != null) {
+    Object.assign(currentVariant, {
+      source,
+    })
+  }
+}
 </script>
 
 {#if shouldRender}