@storybook/svelte
- Version 8.5.3
- Published
- 95.5 kB
- 8 dependencies
- MIT license
Install
npm i @storybook/svelte
yarn add @storybook/svelte
pnpm add @storybook/svelte
Overview
Storybook Svelte renderer
Index
Variables
variable INTERNAL_DEFAULT_PROJECT_ANNOTATIONS
const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations< SvelteRenderer<SvelteComponent>>;
Functions
function composeStories
composeStories: < TModule extends Store_CSFExports<SvelteRenderer<SvelteComponent>, any>>( csfExports: TModule, projectAnnotations?: ProjectAnnotations<SvelteRenderer<SvelteComponent>>) => Omit< MapToComposed< StoriesWithPartialProps< SvelteRenderer<svelte.SvelteComponent<Record<string, any>, any, any>>, 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<SvelteComponent>, TArgs>, componentAnnotations: ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>, projectAnnotations?: ProjectAnnotations<SvelteRenderer<SvelteComponent>>, 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<SvelteComponent>>;
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
orcomposeStory
.Example:
// setup-file.jsimport { setProjectAnnotations } from '@storybook/svelte';import projectAnnotations from './.storybook/preview';setProjectAnnotations(projectAnnotations);Parameter projectAnnotations
E.g. (import projectAnnotations from '../.storybook/preview')
Interfaces
interface SvelteRenderer
interface SvelteRenderer<C extends SvelteComponent = SvelteComponent> extends WebRenderer {}
property component
component: ComponentType< this['T'] extends Record<string, any> ? this['T'] : any>;
property mount
mount: ( Component?: ComponentType, options?: Record<string, any> & { props: Record<string, any>; }) => Promise<Canvas>;
property storyResult
storyResult: this['T'] extends Record<string, any> ? SvelteStoryResult<this['T'], ComponentEvents<C>> : SvelteStoryResult;
Type Aliases
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 SvelteComponent<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 SvelteComponent<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?: ComponentType<infer Component>; args?: infer DefaultArgs;} ? Simplify< ComponentProps<Component> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs> > extends infer TArgs ? StoryAnnotations< SvelteRenderer<Component>, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>> > : never : MetaOrCmpOrArgs extends SvelteComponent ? 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)
Package Files (2)
Dependencies (8)
Dev Dependencies (6)
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/svelte
.
- Markdown[](https://www.jsdocs.io/package/@storybook/svelte)
- HTML<a href="https://www.jsdocs.io/package/@storybook/svelte"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 1641 ms. - Missing or incorrect documentation? Open an issue for this package.