storybook-solidjs-vite 10.7.2 → 10.7.3

package/dist/index.js

@@ -3,6 +3,34 @@ import { t as defineMain } from "./public-api-BQ4r5wQn.js";
 import { n as createDecorator, r as createJSXDecorator, t as IS_SOLID_JSX_FLAG } from "./public-api-Bp0rfkhU.js";
 import { previewAddon } from "storybook-solidjs-vite/renderer/solid-legacy";
 import { definePreview as definePreview$1 } from "storybook/internal/csf";
+import * as solid from "solid-js";
+import { composeStory } from "storybook/preview-api";
+//#region src/preview/reactive-story-component.ts
+const mergeArgs = "mergeProps" in solid ? solid.mergeProps : solid.merge;
+function toArray(decorators) {
+	if (decorators == null) return [];
+	return Array.isArray(decorators) ? decorators : [decorators];
+}
+function createReactiveStoryComponent(story) {
+	let liveProps;
+	const composed = composeStory({
+		...story.input,
+		decorators: [(storyFn, context) => {
+			if (liveProps) context.args = mergeArgs(context.args ?? {}, liveProps);
+			return storyFn(context);
+		}, ...toArray(story.input.decorators)]
+	}, story.meta.input, void 0, story.meta.preview.composed);
+	const Component = (props) => {
+		liveProps = props;
+		try {
+			return composed();
+		} finally {
+			liveProps = void 0;
+		}
+	};
+	return Object.assign(Component, composed);
+}
+//#endregion
 //#region src/preview/define-preview.ts
 function createSolidDefinePreview(solidAnnotations) {
 	return ((input) => {
@@ -21,7 +49,7 @@ function createSolidDefinePreview(solidAnnotations) {
 			const defineStory = meta.story.bind(meta);
 			meta.story = (__input) => {
 				const story = defineStory(__input);
-				story.Component = story.__compose();
+				story.Component = createReactiveStoryComponent(story);
 				return story;
 			};
 			return meta;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["definePreviewBase","solidDocsAnnotations"],"sources":["../src/preview/define-preview.ts","../src/index.ts"],"sourcesContent":["import { definePreview as definePreviewBase } from 'storybook/internal/csf';\n\nimport * as solidDocsAnnotations from '../renderer/docs';\n\nimport type { AddonTypes, InferTypes, Meta, Preview, PreviewAddon, Story } from 'storybook/internal/csf';\nimport type {\n    Args,\n    ArgsStoryFn,\n    ComponentAnnotations,\n    DecoratorFunction,\n    ProjectAnnotations,\n    Renderer,\n    StoryAnnotations,\n} from 'storybook/internal/types';\nimport type { OmitIndexSignature, SetOptional, Simplify, UnionToIntersection } from 'type-fest';\nimport type { AddMocks, EmptyMetaArgs, SolidComponent, SolidTypes } from './public-api';\n\n/** Extracts and unions all args types from an array of decorators. */\ntype DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<\n    Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown\n>;\n\ntype InferArgs<TArgs, T, Decorators> = Simplify<\n    TArgs & Simplify<OmitIndexSignature<DecoratorsArgs<SolidTypes & T, Decorators>>>\n>;\n\ntype InferSolidTypes<T, TArgs, Decorators> = SolidTypes & T & {\n    args: Simplify<InferArgs<TArgs, T, Decorators>>;\n};\n\nexport type DefinePreviewInput<Addons extends PreviewAddon<never>[] = []> = {\n    addons?: Addons;\n} & ProjectAnnotations<SolidTypes & InferTypes<Addons>>;\n\n/** @ts-expect-error We cannot implement the meta faithfully here, but that is okay. */\nexport interface SolidPreview<T extends AddonTypes> extends Preview<SolidTypes & T> {\n    type: <R>() => SolidPreview<T & R>;\n\n    meta: <\n        TArgs extends Args,\n        Decorators extends DecoratorFunction<SolidTypes & T, any>,\n        TMetaArgs extends Partial<TArgs & T['args']>\n    >(\n        meta: {\n            render?: ArgsStoryFn<SolidTypes & T, TArgs & T['args']>;\n            component?: SolidComponent<TArgs>;\n            decorators?: Decorators | Decorators[];\n            args?: TMetaArgs;\n        } & Omit<\n            ComponentAnnotations<SolidTypes & T, TArgs>,\n            'decorators' | 'component' | 'args' | 'render'\n        >\n    ) => SolidMeta<\n        InferSolidTypes<T, TArgs, Decorators>,\n        Omit<ComponentAnnotations<InferSolidTypes<T, TArgs, Decorators>>, 'args'> & {\n            args: Partial<TArgs> extends TMetaArgs ? EmptyMetaArgs : TMetaArgs;\n        }\n    >;\n}\n\nexport interface SolidMeta<T extends SolidTypes, MetaInput extends ComponentAnnotations<T>>\n    /** @ts-expect-error SolidMeta requires two type parameters, but Meta's constraints differ */\n    extends Meta<T, MetaInput> {\n    story: (<\n        TInput extends\n            | (() => SolidTypes['storyResult'])\n            | (StoryAnnotations<T, T['args']> & {\n                render: () => SolidTypes['storyResult'];\n            })\n    >(\n        story: TInput\n    ) => SolidStory<T, TInput extends () => SolidTypes['storyResult'] ? { render: TInput } : TInput>) & (<\n        TInput extends Simplify<\n            StoryAnnotations<\n                T,\n                AddMocks<T['args'], MetaInput['args']>,\n                SetOptional<T['args'], keyof T['args'] & keyof MetaInput['args']>\n            >\n        >\n    >(\n        story: TInput\n        /** @ts-expect-error hard */\n    ) => SolidStory<T, TInput>) & ((\n        ..._args: Partial<T['args']> extends SetOptional<\n            T['args'],\n            keyof T['args'] & keyof MetaInput['args']\n        >\n            ? []\n            : [never]\n    ) => SolidStory<T, EmptyMetaArgs>);\n}\n\nexport interface SolidStory<T extends SolidTypes, TInput extends StoryAnnotations<T, T['args']>>\n    extends Story<T, TInput> {\n    Component: SolidComponent<Partial<T['args']>>;\n}\n\n/** Stable `definePreview` type for Solid 1 and Solid 2. */\nexport type SolidDefinePreview = <\n    Addons extends PreviewAddon<never>[] = []\n>(\n    input: DefinePreviewInput<Addons>\n) => SolidPreview<SolidTypes & InferTypes<Addons>>;\n\nexport function createSolidDefinePreview(\n    solidAnnotations: PreviewAddon<never>\n): SolidDefinePreview {\n    return (<Addons extends PreviewAddon<never>[] = []>(\n        input: DefinePreviewInput<Addons>\n    ) => {\n        const { addons, ...projectAnnotations } = input;\n\n        const preview = definePreviewBase({\n            ...projectAnnotations,\n            addons: [\n                solidAnnotations,\n                solidDocsAnnotations,\n                ...(addons ?? []),\n            ],\n        });\n\n        const defineMeta = preview.meta.bind(preview);\n\n        preview.meta = (_input) => {\n            const meta = defineMeta(_input);\n            const defineStory = meta.story.bind(meta);\n\n            meta.story = (__input: any) => {\n                const story = defineStory(__input);\n\n                // @ts-expect-error private compose helper used only for JSX story factory\n                story.Component = story.__compose();\n\n                return story;\n            };\n\n            return meta;\n        };\n\n        return preview;\n    }) as unknown as SolidDefinePreview;\n}\n","import { previewAddon } from 'storybook-solidjs-vite/renderer/solid-legacy';\n\nimport { createSolidDefinePreview, type SolidDefinePreview } from './preview/define-preview';\n\nexport * from './framework/public-api';\nexport * from './preview/public-api';\n\nexport const definePreview: SolidDefinePreview = createSolidDefinePreview(previewAddon);\n"],"mappings":";;;;;;AAwGA,SAAgB,yBACZ,kBACkB;CAClB,SACI,UACC;EACD,MAAM,EAAE,QAAQ,GAAG,uBAAuB;EAE1C,MAAM,UAAUA,gBAAkB;GAC9B,GAAG;GACH,QAAQ;IACJ;IACAC;IACA,GAAI,UAAU,CAAC;GACnB;EACJ,CAAC;EAED,MAAM,aAAa,QAAQ,KAAK,KAAK,OAAO;EAE5C,QAAQ,QAAQ,WAAW;GACvB,MAAM,OAAO,WAAW,MAAM;GAC9B,MAAM,cAAc,KAAK,MAAM,KAAK,IAAI;GAExC,KAAK,SAAS,YAAiB;IAC3B,MAAM,QAAQ,YAAY,OAAO;IAGjC,MAAM,YAAY,MAAM,UAAU;IAElC,OAAO;GACX;GAEA,OAAO;EACX;EAEA,OAAO;CACX;AACJ;;;ACtIA,MAAa,gBAAoC,yBAAyB,YAAY"}
+{"version":3,"file":"index.js","names":["definePreviewBase","solidDocsAnnotations"],"sources":["../src/preview/reactive-story-component.ts","../src/preview/define-preview.ts","../src/index.ts"],"sourcesContent":["import * as solid from 'solid-js';\nimport { composeStory } from 'storybook/preview-api';\n\nimport type { ProjectAnnotations } from 'storybook/internal/types';\n\n/**\n * `__compose()` copies props with an object spread before the story function\n * runs. The only hook between that copy and the story is a decorator, so this\n * one puts the original props object back onto `context.args`. Solid's\n * `mergeProps` / `merge` keeps the getters. The story then renders once.\n */\n\ninterface ComposableStory {\n    input: {\n        decorators?: unknown;\n    };\n    meta: {\n        input: Record<string, unknown>;\n        preview: {\n            composed: ProjectAnnotations<any>;\n        };\n    };\n}\n\ntype MergeArgs = (base: object, props: object) => object;\n\nconst mergeArgs: MergeArgs = 'mergeProps' in solid\n    ? solid.mergeProps\n    : (solid as { merge: MergeArgs }).merge;\n\nfunction toArray(decorators: unknown): any[] {\n    if (decorators == null) {\n        return [];\n    }\n\n    return Array.isArray(decorators) ? decorators : [decorators];\n}\n\nexport function createReactiveStoryComponent(story: ComposableStory) {\n    let liveProps: object | undefined;\n\n    const composed = composeStory(\n        {\n            ...story.input,\n            decorators: [\n                (storyFn: (context: { args: object }) => unknown, context: { args?: object }) => {\n                    if (liveProps) {\n                        context.args = mergeArgs(context.args ?? {}, liveProps);\n                    }\n\n                    return storyFn(context as { args: object });\n                },\n                ...toArray(story.input.decorators),\n            ],\n        },\n        story.meta.input,\n        undefined,\n        story.meta.preview.composed,\n    );\n\n    const Component = (props?: object) => {\n        liveProps = props;\n\n        try {\n            return composed();\n        }\n        finally {\n            liveProps = undefined;\n        }\n    };\n\n    return Object.assign(Component, composed);\n}\n","import { definePreview as definePreviewBase } from 'storybook/internal/csf';\n\nimport * as solidDocsAnnotations from '../renderer/docs';\nimport { createReactiveStoryComponent } from './reactive-story-component';\n\nimport type { AddonTypes, InferTypes, Meta, Preview, PreviewAddon, Story } from 'storybook/internal/csf';\nimport type {\n    Args,\n    ArgsStoryFn,\n    ComponentAnnotations,\n    DecoratorFunction,\n    ProjectAnnotations,\n    Renderer,\n    StoryAnnotations,\n} from 'storybook/internal/types';\nimport type { OmitIndexSignature, SetOptional, Simplify, UnionToIntersection } from 'type-fest';\nimport type { AddMocks, EmptyMetaArgs, SolidComponent, SolidTypes } from './public-api';\n\n/** Extracts and unions all args types from an array of decorators. */\ntype DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<\n    Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown\n>;\n\ntype InferArgs<TArgs, T, Decorators> = Simplify<\n    TArgs & Simplify<OmitIndexSignature<DecoratorsArgs<SolidTypes & T, Decorators>>>\n>;\n\ntype InferSolidTypes<T, TArgs, Decorators> = SolidTypes & T & {\n    args: Simplify<InferArgs<TArgs, T, Decorators>>;\n};\n\nexport type DefinePreviewInput<Addons extends PreviewAddon<never>[] = []> = {\n    addons?: Addons;\n} & ProjectAnnotations<SolidTypes & InferTypes<Addons>>;\n\n/** @ts-expect-error We cannot implement the meta faithfully here, but that is okay. */\nexport interface SolidPreview<T extends AddonTypes> extends Preview<SolidTypes & T> {\n    type: <R>() => SolidPreview<T & R>;\n\n    meta: <\n        TArgs extends Args,\n        Decorators extends DecoratorFunction<SolidTypes & T, any>,\n        TMetaArgs extends Partial<TArgs & T['args']>\n    >(\n        meta: {\n            render?: ArgsStoryFn<SolidTypes & T, TArgs & T['args']>;\n            component?: SolidComponent<TArgs>;\n            decorators?: Decorators | Decorators[];\n            args?: TMetaArgs;\n        } & Omit<\n            ComponentAnnotations<SolidTypes & T, TArgs>,\n            'decorators' | 'component' | 'args' | 'render'\n        >\n    ) => SolidMeta<\n        InferSolidTypes<T, TArgs, Decorators>,\n        Omit<ComponentAnnotations<InferSolidTypes<T, TArgs, Decorators>>, 'args'> & {\n            args: Partial<TArgs> extends TMetaArgs ? EmptyMetaArgs : TMetaArgs;\n        }\n    >;\n}\n\nexport interface SolidMeta<T extends SolidTypes, MetaInput extends ComponentAnnotations<T>>\n    /** @ts-expect-error SolidMeta requires two type parameters, but Meta's constraints differ */\n    extends Meta<T, MetaInput> {\n    story: (<\n        TInput extends\n            | (() => SolidTypes['storyResult'])\n            | (StoryAnnotations<T, T['args']> & {\n                render: () => SolidTypes['storyResult'];\n            })\n    >(\n        story: TInput\n    ) => SolidStory<T, TInput extends () => SolidTypes['storyResult'] ? { render: TInput } : TInput>) & (<\n        TInput extends Simplify<\n            StoryAnnotations<\n                T,\n                AddMocks<T['args'], MetaInput['args']>,\n                SetOptional<T['args'], keyof T['args'] & keyof MetaInput['args']>\n            >\n        >\n    >(\n        story: TInput\n        /** @ts-expect-error hard */\n    ) => SolidStory<T, TInput>) & ((\n        ..._args: Partial<T['args']> extends SetOptional<\n            T['args'],\n            keyof T['args'] & keyof MetaInput['args']\n        >\n            ? []\n            : [never]\n    ) => SolidStory<T, EmptyMetaArgs>);\n}\n\nexport interface SolidStory<T extends SolidTypes, TInput extends StoryAnnotations<T, T['args']>>\n    extends Story<T, TInput> {\n    Component: SolidComponent<Partial<T['args']>>;\n}\n\n/** Stable `definePreview` type for Solid 1 and Solid 2. */\nexport type SolidDefinePreview = <\n    Addons extends PreviewAddon<never>[] = []\n>(\n    input: DefinePreviewInput<Addons>\n) => SolidPreview<SolidTypes & InferTypes<Addons>>;\n\nexport function createSolidDefinePreview(\n    solidAnnotations: PreviewAddon<never>\n): SolidDefinePreview {\n    return (<Addons extends PreviewAddon<never>[] = []>(\n        input: DefinePreviewInput<Addons>\n    ) => {\n        const { addons, ...projectAnnotations } = input;\n\n        const preview = definePreviewBase({\n            ...projectAnnotations,\n            addons: [\n                solidAnnotations,\n                solidDocsAnnotations,\n                ...(addons ?? []),\n            ],\n        });\n\n        const defineMeta = preview.meta.bind(preview);\n\n        preview.meta = (_input) => {\n            const meta = defineMeta(_input);\n            const defineStory = meta.story.bind(meta);\n\n            meta.story = (__input: any) => {\n                const story = defineStory(__input);\n\n                // @ts-expect-error factory stories keep input and meta off the public type\n                story.Component = createReactiveStoryComponent(story);\n\n                return story;\n            };\n\n            return meta;\n        };\n\n        return preview;\n    }) as unknown as SolidDefinePreview;\n}\n","import { previewAddon } from 'storybook-solidjs-vite/renderer/solid-legacy';\n\nimport { createSolidDefinePreview, type SolidDefinePreview } from './preview/define-preview';\n\nexport * from './framework/public-api';\nexport * from './preview/public-api';\n\nexport const definePreview: SolidDefinePreview = createSolidDefinePreview(previewAddon);\n"],"mappings":";;;;;;;;AA0BA,MAAM,YAAuB,gBAAgB,QACvC,MAAM,aACL,MAA+B;AAEtC,SAAS,QAAQ,YAA4B;CACzC,IAAI,cAAc,MACd,OAAO,CAAC;CAGZ,OAAO,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC,UAAU;AAC/D;AAEA,SAAgB,6BAA6B,OAAwB;CACjE,IAAI;CAEJ,MAAM,WAAW,aACb;EACI,GAAG,MAAM;EACT,YAAY,EACP,SAAiD,YAA+B;GAC7E,IAAI,WACA,QAAQ,OAAO,UAAU,QAAQ,QAAQ,CAAC,GAAG,SAAS;GAG1D,OAAO,QAAQ,OAA2B;EAC9C,GACA,GAAG,QAAQ,MAAM,MAAM,UAAU,CACrC;CACJ,GACA,MAAM,KAAK,OACX,KAAA,GACA,MAAM,KAAK,QAAQ,QACvB;CAEA,MAAM,aAAa,UAAmB;EAClC,YAAY;EAEZ,IAAI;GACA,OAAO,SAAS;EACpB,UACQ;GACJ,YAAY,KAAA;EAChB;CACJ;CAEA,OAAO,OAAO,OAAO,WAAW,QAAQ;AAC5C;;;ACiCA,SAAgB,yBACZ,kBACkB;CAClB,SACI,UACC;EACD,MAAM,EAAE,QAAQ,GAAG,uBAAuB;EAE1C,MAAM,UAAUA,gBAAkB;GAC9B,GAAG;GACH,QAAQ;IACJ;IACAC;IACA,GAAI,UAAU,CAAC;GACnB;EACJ,CAAC;EAED,MAAM,aAAa,QAAQ,KAAK,KAAK,OAAO;EAE5C,QAAQ,QAAQ,WAAW;GACvB,MAAM,OAAO,WAAW,MAAM;GAC9B,MAAM,cAAc,KAAK,MAAM,KAAK,IAAI;GAExC,KAAK,SAAS,YAAiB;IAC3B,MAAM,QAAQ,YAAY,OAAO;IAGjC,MAAM,YAAY,6BAA6B,KAAK;IAEpD,OAAO;GACX;GAEA,OAAO;EACX;EAEA,OAAO;CACX;AACJ;;;ACvIA,MAAa,gBAAoC,yBAAyB,YAAY"}

package/dist/renderer/solid-legacy.js

@@ -1,7 +1,7 @@
 import { a as createApplyDecorators, i as beforeAll, n as createMount, o as createStoryState, r as createDefaultRender, t as createRenderToCanvas } from "../render-to-canvas-5L3YXi18.js";
 import { definePreviewAddon } from "storybook/internal/csf";
-import { global } from "@storybook/global";
 import { ErrorBoundary, createComponent, onCleanup, onMount } from "solid-js";
+import { global } from "@storybook/global";
 import { createStore, reconcile } from "solid-js/store";
 import { render as render$1 } from "solid-js/web";
 //#region src/renderer/solid-legacy.ts

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "storybook-solidjs-vite",
     "type": "module",
-    "version": "10.7.2",
+    "version": "10.7.3",
     "private": false,
     "packageManager": "bun@1.3.14",
     "description": "SolidJS integration with Storybook",

package/src/preview/define-preview.ts

@@ -1,6 +1,7 @@
 import { definePreview as definePreviewBase } from 'storybook/internal/csf';
 
 import * as solidDocsAnnotations from '../renderer/docs';
+import { createReactiveStoryComponent } from './reactive-story-component';
 
 import type { AddonTypes, InferTypes, Meta, Preview, PreviewAddon, Story } from 'storybook/internal/csf';
 import type {
@@ -128,8 +129,8 @@ export function createSolidDefinePreview(
             meta.story = (__input: any) => {
                 const story = defineStory(__input);
 
-                // @ts-expect-error private compose helper used only for JSX story factory
-                story.Component = story.__compose();
+                // @ts-expect-error factory stories keep input and meta off the public type
+                story.Component = createReactiveStoryComponent(story);
 
                 return story;
             };

package/src/preview/reactive-story-component.ts

@@ -0,0 +1,73 @@
+import * as solid from 'solid-js';
+import { composeStory } from 'storybook/preview-api';
+
+import type { ProjectAnnotations } from 'storybook/internal/types';
+
+/**
+ * `__compose()` copies props with an object spread before the story function
+ * runs. The only hook between that copy and the story is a decorator, so this
+ * one puts the original props object back onto `context.args`. Solid's
+ * `mergeProps` / `merge` keeps the getters. The story then renders once.
+ */
+
+interface ComposableStory {
+    input: {
+        decorators?: unknown;
+    };
+    meta: {
+        input: Record<string, unknown>;
+        preview: {
+            composed: ProjectAnnotations<any>;
+        };
+    };
+}
+
+type MergeArgs = (base: object, props: object) => object;
+
+const mergeArgs: MergeArgs = 'mergeProps' in solid
+    ? solid.mergeProps
+    : (solid as { merge: MergeArgs }).merge;
+
+function toArray(decorators: unknown): any[] {
+    if (decorators == null) {
+        return [];
+    }
+
+    return Array.isArray(decorators) ? decorators : [decorators];
+}
+
+export function createReactiveStoryComponent(story: ComposableStory) {
+    let liveProps: object | undefined;
+
+    const composed = composeStory(
+        {
+            ...story.input,
+            decorators: [
+                (storyFn: (context: { args: object }) => unknown, context: { args?: object }) => {
+                    if (liveProps) {
+                        context.args = mergeArgs(context.args ?? {}, liveProps);
+                    }
+
+                    return storyFn(context as { args: object });
+                },
+                ...toArray(story.input.decorators),
+            ],
+        },
+        story.meta.input,
+        undefined,
+        story.meta.preview.composed,
+    );
+
+    const Component = (props?: object) => {
+        liveProps = props;
+
+        try {
+            return composed();
+        }
+        finally {
+            liveProps = undefined;
+        }
+    };
+
+    return Object.assign(Component, composed);
+}

package/src/spec/preview/story-component.test.ts

@@ -0,0 +1,279 @@
+import { createComponent, createRoot, createSignal } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { definePreviewAddon } from 'storybook/internal/csf';
+import { describe, expect, it } from 'vitest';
+
+import { createSolidDefinePreview } from '../../preview/define-preview';
+import { createApplyDecorators } from '../../renderer/shared/apply-decorators';
+import { createDefaultRender } from '../../renderer/shared/default-render';
+
+const definePreview = createSolidDefinePreview(definePreviewAddon({
+    applyDecorators: createApplyDecorators({
+        storyStore: {
+            isStoryRendered: () => false,
+        },
+    } as any),
+    render: createDefaultRender(createComponent),
+} as any));
+
+describe('Story.Component', () => {
+    it('updates when props change and keeps the component mounted', () => {
+        const preview = definePreview({});
+        let mounts = 0;
+        let readLabel = () => '';
+
+        const Counter = (props: { label?: string }) => {
+            mounts += 1;
+            readLabel = () => props.label ?? '';
+
+            return null;
+        };
+
+        const meta = preview.meta({
+            component: Counter,
+            args: { label: 'from args' },
+        });
+        const Story = meta.story();
+        const [label, setLabel] = createSignal('Label');
+        const props = {
+            get label() {
+                return label();
+            },
+        };
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, props);
+            expect(readLabel()).toBe('Label');
+            expect(mounts).toBe(1);
+
+            setLabel('New label');
+
+            expect(readLabel()).toBe('New label');
+            expect(mounts).toBe(1);
+            dispose();
+        });
+    });
+
+    it('keeps meta args when a prop is omitted', () => {
+        const preview = definePreview({});
+        let readLabel = () => '';
+
+        const Counter = (props: { label?: string }) => {
+            readLabel = () => props.label ?? '';
+
+            return null;
+        };
+
+        const Story = preview.meta({
+            component: Counter,
+            args: { label: 'from args' },
+        }).story();
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, {});
+            expect(readLabel()).toBe('from args');
+            dispose();
+        });
+    });
+
+    it('tracks props for each mounted instance', () => {
+        const preview = definePreview({});
+        const readLabel: Array<() => string> = [];
+
+        const Counter = (props: { label?: string }) => {
+            readLabel.push(() => props.label ?? '');
+
+            return null;
+        };
+
+        const Story = preview.meta({ component: Counter }).story();
+        const [first, setFirst] = createSignal('one');
+        const [second, setSecond] = createSignal('two');
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, {
+                get label() {
+                    return first();
+                },
+            });
+            createComponent(Story.Component, {
+                get label() {
+                    return second();
+                },
+            });
+
+            expect(readLabel.map(read => read())).toEqual(['one', 'two']);
+
+            setFirst('one-b');
+
+            expect(readLabel.map(read => read())).toEqual(['one-b', 'two']);
+
+            setSecond('two-b');
+
+            expect(readLabel.map(read => read())).toEqual(['one-b', 'two-b']);
+            dispose();
+        });
+    });
+
+    it('still runs story decorators and follows props through them', () => {
+        const preview = definePreview({});
+        let readLabel = () => '';
+        let decoratorRuns = 0;
+        const userDecorator = (storyFn: (context: { args: { label?: string } }) => unknown, context: { args: { label?: string } }) => {
+            decoratorRuns += 1;
+
+            return storyFn(context);
+        };
+        const annotations = {
+            decorators: [userDecorator],
+        };
+        const Story = preview.meta({
+            component: (props: { label?: string }) => {
+                readLabel = () => props.label ?? '';
+
+                return null;
+            },
+        }).story(annotations as never);
+
+        expect(annotations.decorators).toEqual([userDecorator]);
+        const [label, setLabel] = createSignal('Label');
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, {
+                get label() {
+                    return label();
+                },
+            });
+
+            expect(decoratorRuns).toBe(1);
+            expect(readLabel()).toBe('Label');
+
+            setLabel('New label');
+
+            expect(readLabel()).toBe('New label');
+            expect(decoratorRuns).toBe(1);
+            dispose();
+        });
+    });
+
+    it('reads args from a custom render when those args change', () => {
+        const preview = definePreview({});
+        let readLabel = () => '';
+        const Story = preview.meta({
+            args: { label: 'from args' },
+        }).story({
+            render: (args: { label?: string }) => {
+                readLabel = () => args.label ?? '';
+
+                return null;
+            },
+        });
+        const [label, setLabel] = createSignal('Label');
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, {
+                get label() {
+                    return label();
+                },
+            });
+
+            expect(readLabel()).toBe('Label');
+
+            setLabel('New label');
+
+            expect(readLabel()).toBe('New label');
+            dispose();
+        });
+    });
+
+    it('lets story args override meta args and keeps the rest from meta', () => {
+        const preview = definePreview({});
+        let readLabel = () => '';
+        let readHint = () => '';
+
+        const Story = preview.meta({
+            component: (props: { label?: string; hint?: string }) => {
+                readLabel = () => props.label ?? '';
+                readHint = () => props.hint ?? '';
+
+                return null;
+            },
+            args: { label: 'from meta', hint: 'meta hint' },
+        }).story({
+            args: { label: 'from story' },
+        });
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, {});
+
+            expect(readLabel()).toBe('from story');
+            expect(readHint()).toBe('meta hint');
+            dispose();
+        });
+    });
+
+    it('lets component props override story args', () => {
+        const preview = definePreview({});
+        let readLabel = () => '';
+        let readHint = () => '';
+        const Story = preview.meta({
+            component: (props: { label?: string; hint?: string }) => {
+                readLabel = () => props.label ?? '';
+                readHint = () => props.hint ?? '';
+
+                return null;
+            },
+            args: { hint: 'meta hint' },
+        }).story({
+            args: { label: 'from story', hint: 'story hint' },
+        });
+        const [label, setLabel] = createSignal('from component');
+
+        createRoot((dispose) => {
+            createComponent(Story.Component, {
+                get label() {
+                    return label();
+                },
+            });
+
+            expect(readLabel()).toBe('from component');
+            expect(readHint()).toBe('story hint');
+
+            setLabel('updated');
+
+            expect(readLabel()).toBe('updated');
+            expect(readHint()).toBe('story hint');
+            dispose();
+        });
+    });
+
+    it('snapshots args from meta.story and ignores later changes', () => {
+        const preview = definePreview({});
+        let readLabel = () => '';
+        const Counter = (props: { label?: string }) => {
+            readLabel = () => props.label ?? '';
+
+            return null;
+        };
+        const storyArgs = { label: 'original' };
+        const plain = preview.meta({ component: Counter }).story({ args: storyArgs });
+
+        storyArgs.label = 'changed';
+
+        const [storeArgs, setStoreArgs] = createStore({ label: 'from store' });
+        const stored = preview.meta({ component: Counter }).story({ args: storeArgs });
+
+        createRoot((dispose) => {
+            createComponent(plain.Component, {});
+            expect(readLabel()).toBe('original');
+
+            createComponent(stored.Component, {});
+            expect(readLabel()).toBe('from store');
+
+            setStoreArgs({ label: 'updated' });
+
+            expect(readLabel()).toBe('from store');
+            dispose();
+        });
+    });
+});