Skip to content

Commit

Permalink
update Story - add template prop & children becomes static
Browse files Browse the repository at this point in the history
  • Loading branch information
xeho91 committed Nov 8, 2024
1 parent 6d88cf6 commit bb1c0f1
Showing 1 changed file with 51 additions and 23 deletions.
74 changes: 51 additions & 23 deletions src/runtime/Story.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,15 @@
import { storyNameToExportName } from '../utils/identifier-utils';
import type { Cmp, StoryAnnotations } from '../types';
type TemplateSnippet = Snippet<
[StoryRendererContext<TCmp>['args'], StoryRendererContext<TCmp>['storyContext']]
>;
type Props = Partial<StoryAnnotations<TCmp>> & {
/**
* @deprecated
* Use `exportName` instead.
*/
id?: never;
/**
* The content to render in the story, either as:
* 1. A snippet taking args and storyContext as parameters
* 2. Static markup
*
* Can be omitted if a default template is set with [`setTemplate()`](https://github.com/storybookjs/addon-svelte-csf/blob/main/README.md#default-snippet)
*/
children?: Snippet<
/* prettier ignore */
[StoryRendererContext<TCmp>['args'], StoryRendererContext<TCmp>['storyContext']]
>;
/**
* Name of the story. Can be omitted if `exportName` is provided.
*/
Expand Down Expand Up @@ -70,16 +62,42 @@
*/
name: string;
}
) &
(
| {
/**
* The content to render in the story as **static** markup.
*
* NOTE: Can be omitted if a default template is set with [`setTemplate()`](https://github.com/storybookjs/addon-svelte-csf/blob/main/README.md#default-snippet)
*/
children?: Snippet;
template?: never;
}
| {
children?: never;
/**
* The content to render in the story with a snippet taking `args` and `storyContext` as parameters
*
* NOTE: Can be omitted if a default template is set with [`setTemplate()`](https://github.com/storybookjs/addon-svelte-csf/blob/main/README.md#default-snippet)
*/
template?: TemplateSnippet;
}
);
const { children, name, exportName: exportNameProp, play, ...restProps }: Props = $props();
let {
children,
name,
exportName: exportNameProp,
play,
template,
...restProps
}: Props = $props();
const exportName = exportNameProp ?? storyNameToExportName(name!);
const extractor = useStoriesExtractor<TCmp>();
const renderer = useStoryRenderer<TCmp>();
const template = useStoriesTemplate<TCmp>();
let extractor = useStoriesExtractor<TCmp>();
let renderer = useStoryRenderer<TCmp>();
let storiesTemplate = useStoriesTemplate<TCmp>();
const isCurrentlyViewed = $derived(
let isCurrentlyViewed = $derived(
!extractor.isExtracting && renderer.currentStoryExportName === exportName
);
Expand All @@ -98,6 +116,12 @@
}
}
// TODO: Svelte maintainers is still discussing internally if they want to implement official typeguard function.
// Keep a pulse on this case and then this can be replaced.
function isSnippet<T extends unknown[]>(value: unknown): value is Snippet<T> {
return typeof value === 'function';
}
$effect(() => {
if (isCurrentlyViewed) {
injectIntoPlayFunction(renderer.storyContext, play);
Expand All @@ -106,17 +130,21 @@
</script>

{#if isCurrentlyViewed}
{#if children}
{@render children(renderer.args, renderer.storyContext)}
{:else if template}
{#if template && isSnippet(template)}
{@render template(renderer.args, renderer.storyContext)}
{:else if children && isSnippet(children)}
{@render children()}
{:else if storiesTemplate}
{@render storiesTemplate(renderer.args, renderer.storyContext)}
{:else if renderer.storyContext.component}
<renderer.storyContext.component {...renderer.args} />
{:else}
<p>
No story rendered. See <a
href="https://github.com/storybookjs/addon-svelte-csf#defining-stories"
target="_blank">the docs</a
<!-- TODO: Remove this -->
{'@dominikg gave up...'}
No story rendered. See
<a href="https://github.com/storybookjs/addon-svelte-csf#defining-stories" target="_blank"
>the docs</a
> on how to define stories.
</p>
{/if}
Expand Down

0 comments on commit bb1c0f1

Please sign in to comment.