@storybook/svelte

Variables

• INTERNAL_DEFAULT_PROJECT_ANNOTATIONS

Functions

• composeStories()
• composeStory()
• setProjectAnnotations()

Interfaces

• SvelteRenderer

  • component
  • mount
  • storyResult

Type Aliases

• Decorator
• Loader
• Meta
• Preview
• StoryContext
• StoryFn
• StoryObj

variable INTERNAL_DEFAULT_PROJECT_ANNOTATIONS

const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<
    SvelteRenderer<Component<any, any, any>>
>;

function composeStories

composeStories: <
    TModule extends Store_CSFExports<SvelteRenderer<Component<any, any, any>>, any>
>(
    csfExports: TModule,
    projectAnnotations?: ProjectAnnotations<SvelteRenderer<Component<any, any, any>>>
) => Omit<
    MapToComposed<StoriesWithPartialProps<SvelteRenderer, TModule>>,
    keyof Store_CSFExports
>;

• Function that will receive a stories import (e.g. import * as stories from './Button.stories') and optionally projectAnnotations (e.g. import * from '../.storybook/preview) and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.

  It's very useful for reusing stories in scenarios outside of Storybook like unit testing.

  Example:

  import { render } from '@testing-library/svelte';
  import { composeStories } from '@storybook/svelte';
  import * as stories from './Button.stories';
  
  const { Primary, Secondary } = composeStories(stories);
  
  test('renders primary button with Hello World', () => {
    const { getByText } = render(Primary, { label: 'Hello world' });
    expect(getByText(/Hello world/i)).not.toBeNull();
  });

  Parameter csfExports

  E.g. (import * as stories from './Button.stories')

  Parameter projectAnnotations

  E.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

function composeStory

composeStory: <TArgs extends Args = Args>(
    story: StoryAnnotationsOrFn<SvelteRenderer<Component<any, any, any>>, TArgs>,
    componentAnnotations: ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>,
    projectAnnotations?: ProjectAnnotations<
        SvelteRenderer<Component<any, any, any>>
    >,
    exportsName?: string
) => ComposedStory<TArgs>;

• Function that will receive a story along with meta (e.g. a default export from a .stories file) and optionally projectAnnotations e.g. (import * from '../.storybook/preview) and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.

  It's very useful for reusing a story in scenarios outside of Storybook like unit testing.

  Example:

  import { render } from '@testing-library/svelte';
  import { composeStory } from '@storybook/svelte';
  import Meta, { Primary as PrimaryStory } from './Button.stories';
  
  const Primary = composeStory(PrimaryStory, Meta);
  
  test('renders primary button with Hello World', () => {
    const { getByText } = render(Primary, { label: 'Hello world' });
    expect(getByText(/Hello world/i)).not.toBeNull();
  });

  Parameter story

  Parameter componentAnnotations

  E.g. (import Meta from './Button.stories')

  Parameter projectAnnotations

  E.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

  Parameter exportsName

  In case your story does not contain a name and you want it to have a name.

function setProjectAnnotations

setProjectAnnotations: (
    projectAnnotations:
        | NamedOrDefaultProjectAnnotations<any>
        | NamedOrDefaultProjectAnnotations<any>[]
) => NormalizedProjectAnnotations<SvelteRenderer<Component<any, any, any>>>;

• Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.

  It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using composeStories or composeStory.

  Example:

  // setup-file.js
  import { setProjectAnnotations } from '@storybook/svelte';
  import projectAnnotations from './.storybook/preview';
  
  setProjectAnnotations(projectAnnotations);

  Parameter projectAnnotations

  E.g. (import projectAnnotations from '../.storybook/preview')

type Decorator

type Decorator<TArgs = StrictArgs> = DecoratorFunction<SvelteRenderer, TArgs>;

type Loader

type Loader<TArgs = StrictArgs> = LoaderFunction<SvelteRenderer, TArgs>;

type Meta

type Meta<CmpOrArgs = Args> = CmpOrArgs extends Component<infer Props>
    ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>
    : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;

• Metadata to configure the stories for a component.

  See Also

  • [Default export](https://storybook.js.org/docs/api/csf#default-export)

type Preview

type Preview = ProjectAnnotations<SvelteRenderer>;

type StoryContext

type StoryContext<TArgs = StrictArgs> = StoryContext$1<SvelteRenderer, TArgs>;

type StoryFn

type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends Component<infer Props>
    ? AnnotatedStoryFn<SvelteRenderer, Props>
    : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;

• Story function that represents a CSFv2 component example.

  See Also

  • [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)

type StoryObj

type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
    render?: ArgsStoryFn<SvelteRenderer, any>;
    component: infer Comp;
    args?: infer DefaultArgs;
}
    ? Simplify<
          ComponentProps<Comp extends Component<any, any, any> ? Comp : never> &
              ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>
      > extends infer TArgs
        ? StoryAnnotations<
              SvelteRenderer<Comp extends Component<any, any, any> ? Comp : never>,
              TArgs,
              SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
          >
        : never
    : MetaOrCmpOrArgs extends Component<any, any, any>
    ? StoryAnnotations<
          SvelteRenderer<MetaOrCmpOrArgs>,
          ComponentProps<MetaOrCmpOrArgs>
      >
    : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;

• Story object that represents a CSFv3 component example.

  See Also

  • [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)