support rendering stories without explicit or implicit templates

storybookjs · May 30, 2024 · eef9618 · eef9618
1 parent 9e91fc1
commit eef9618
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/src/runtime/Story.svelte b/src/runtime/Story.svelte
@@ -74,12 +74,18 @@
       injectIntoPlayFunction(renderer.storyContext, play);
     }
   });
+  $inspect(renderer.storyContext).with(console.log)
 </script>
 
 {#if isCurrentlyViewed}
   {#if children}
     {@render children(renderer.args, renderer.storyContext)}
   {:else if template}
     {@render template(renderer.args, renderer.storyContext)}
+  {:else if renderer.storyContext.component}
+    <!-- TODO: there's a risk here that this discards decorators -->
+    <svelte:component this={renderer.storyContext.component} {...renderer.args} />
+  {:else}
+    <p>Warning: no story rendered. improve this message</p>
   {/if}
 {/if}
diff --git a/stories/Controls.stories.svelte b/stories/Controls.stories.svelte
@@ -14,21 +14,32 @@
       interactions: { disable: true },
     },
     tags: ['autodocs'],
+    args: {
+      sampleRequiredBoolean: true,
+      sampleRequiredString: 'I agree',
+      sampleRequiredNumber: 10,
+      sampleRequiredArray: ['I', 'like', 'Svelte', 'and', 'Storybook'],
+      sampleRequiredEnum: 'storybook',
+      sampleRequiredObject: { tool: 'storybook', rating: 10 },
+    },
   });
 </script>
 
+<Story name="Default" />
+
 <Story
   name="Playground"
   args={{
-    sampleRequiredBoolean: true,
-    sampleRequiredString: 'I agree',
+    sampleRequiredBoolean: false,
+    sampleRequiredString: 'Different',
     sampleRequiredNumber: 10,
-    sampleRequiredArray: ['I', 'like', 'Svelte', 'and', 'Storybook'],
+    sampleRequiredArray: ['I', 'like', 'Storybook', 'and', 'Svelte'],
     sampleRequiredEnum: 'storybook',
-    sampleRequiredObject: { tool: 'storybook', rating: 10 },
+    sampleRequiredObject: { tool: 'storybook', rating: 11 },
   }}
 >
   {#snippet children(args)}
     <Controls {...args} />
   {/snippet}
 </Story>
+
diff --git a/stories/RequiredSnippet.stories.svelte b/stories/RequiredSnippet.stories.svelte
@@ -14,10 +14,10 @@
 <!-- <Story name="Case 1" /> -->
 
 {#snippet children()}
-<p>This works</p>
+  <p>This works</p>
 {/snippet}
 
-<!-- Works, as expected TODO: does not actually work, renders nothing-->
+<!-- Works, as expected -->
 <Story name="Case 2" args={{ children }} />
 
 <!-- Works, as expected, but TypeScript is not happy -->