storybook-solidjs-vite 10.7.2 → 10.7.4

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/{render-to-canvas-5L3YXi18.js → render-to-canvas-CUzXHGXU.js}

@@ -105,7 +105,7 @@ function createDefaultRender(createComponent) {
 //#endregion
 //#region src/renderer/shared/mount.ts
 /** Play/mount API: sync reactive args and globals, then render via `renderToCanvas`. */
-function createMount({ storyStore }) {
+function createMount({ storyStore, flush }) {
 	return (context) => {
 		const storyId = getStoryId(context);
 		const { forceRemount } = context;
@@ -115,6 +115,7 @@ function createMount({ storyStore }) {
 			if (forceRemount) storyStore.disposeStory(storyId);
 			if (!storyStore.isStoryRendered(storyId) || forceRemount) storyStore.resetStory(storyId);
 			storyStore.makeContextReactive(context);
+			flush?.();
 			await context.renderToCanvas();
 			return context.canvas;
 		};
@@ -152,4 +153,4 @@ function createRenderToCanvas(options) {
 //#endregion
 export { createApplyDecorators as a, beforeAll as i, createMount as n, createStoryState as o, createDefaultRender as r, createRenderToCanvas as t };
 
-//# sourceMappingURL=render-to-canvas-5L3YXi18.js.map
+//# sourceMappingURL=render-to-canvas-CUzXHGXU.js.map

package/dist/{render-to-canvas-5L3YXi18.js.map → render-to-canvas-CUzXHGXU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"render-to-canvas-5L3YXi18.js","names":[],"sources":["../src/renderer/shared/story-store.ts","../src/renderer/shared/apply-decorators.ts","../src/renderer/shared/before-all.ts","../src/renderer/shared/default-render.ts","../src/renderer/shared/mount.ts","../src/renderer/shared/render-to-canvas.ts"],"sourcesContent":["import type { Args, Globals, StoryContext as InternalStoryContext } from 'storybook/internal/types';\nimport type { SolidRenderer } from '../../preview/public-api';\n\n/** Update store via `(prev) => next` (version layer applies reconcile/draft setter). */\ntype SetStoreFn<T extends object> = (update: (prev: T) => T) => void;\n\n/** Reactive store tuple returned by `createStore` (state + setter). */\ntype SolidStore<T extends object> = readonly [\n    state: T,\n    setState: SetStoreFn<T>\n];\n\ntype CreateStoreFn = <T extends object>(initial: T) => SolidStore<T>;\n\nexport interface StoryStateStore {\n    isStoryRendered: (storyId: string) => boolean;\n    resetStory: (storyId: string) => void;\n    setRendered: (storyId: string, rendered: boolean) => void;\n    setDisposeFn: (storyId: string, disposeFn: (() => void) | null) => void;\n    makeContextReactive: (context: InternalStoryContext<SolidRenderer, Args>) => void;\n    disposeStory: (storyId: string) => void;\n}\n\nexport function getStoryId(context: { id?: string; canvasElement?: { id?: string } }): string | undefined {\n    const canvasId = context.canvasElement?.id;\n\n    if (!canvasId || canvasId === 'storybook-root') {\n        return context.id;\n    }\n\n    return canvasId;\n}\n\nexport function createStoryState(createStore: CreateStoreFn): StoryStateStore {\n    const [globals, setGlobals] = createStore<Globals>({});\n    const renderedStories = new Set<string>();\n    const argsStores = new Map<string, SolidStore<Args>>();\n    const disposers = new Map<string, () => void>();\n\n    const getArgsStore = (storyId: string): SolidStore<Args> => {\n        let store = argsStores.get(storyId);\n\n        if (!store) {\n            store = createStore({} as Args);\n            argsStores.set(storyId, store);\n        }\n\n        return store;\n    };\n\n    return {\n        isStoryRendered(storyId) {\n            return renderedStories.has(storyId);\n        },\n\n        resetStory(storyId) {\n            renderedStories.delete(storyId);\n            disposers.delete(storyId);\n            argsStores.delete(storyId);\n        },\n\n        setRendered(storyId, isRendered) {\n            if (isRendered) {\n                renderedStories.add(storyId);\n            }\n            else {\n                renderedStories.delete(storyId);\n            }\n        },\n\n        setDisposeFn(storyId, disposeFn) {\n            if (disposeFn) {\n                disposers.set(storyId, disposeFn);\n            }\n            else {\n                disposers.delete(storyId);\n            }\n        },\n\n        makeContextReactive(context) {\n            const storyId = getStoryId(context);\n\n            if (!storyId) {\n                throw new Error('Story ID is required');\n            }\n\n            const [args, setArgs] = getArgsStore(storyId);\n\n            // Update reactive stores with the new values\n            setArgs(() => context.args);\n            setGlobals(() => context.globals);\n\n            // Sync the reactive stores to the context\n            context.args = args;\n            context.globals = globals;\n        },\n\n        disposeStory(storyId) {\n            disposers.get(storyId)?.();\n            disposers.delete(storyId);\n        },\n    };\n}\n","import { defaultDecorateStory } from 'storybook/preview-api';\n\nimport { IS_SOLID_JSX_FLAG, type Decorator, type SolidRenderer } from '../../preview/public-api';\nimport { getStoryId } from './story-store';\n\nimport type { LegacyStoryFn } from 'storybook/internal/types';\nimport type { StoryStateStore } from './story-store';\n\nexport function createApplyDecorators({\n    storyStore,\n}: {\n    storyStore: StoryStateStore;\n}): (\n    storyFn: LegacyStoryFn<SolidRenderer>,\n    rawDecorators: Decorator[]\n) => LegacyStoryFn<SolidRenderer> {\n    return (storyFn, rawDecorators) => {\n        const decorators = rawDecorators.map(\n            (decorator): Decorator => {\n                const originalFn = (decorator as Decorator & { originalFn?: Decorator }).originalFn;\n                const isJSX = Boolean(\n                    decorator[IS_SOLID_JSX_FLAG] || originalFn?.[IS_SOLID_JSX_FLAG]\n                );\n\n                return (StoryFn, context) => {\n                    if (isJSX) {\n                        const storyId = getStoryId(context);\n\n                        if (storyId && storyStore.isStoryRendered(storyId)) {\n                            return StoryFn(context);\n                        }\n                    }\n\n                    return decorator(StoryFn, context);\n                };\n            }\n        );\n\n        return defaultDecorateStory((context) => {\n            const storyId = getStoryId(context);\n\n            if (storyId && storyStore.isStoryRendered(storyId)) {\n                return null;\n            }\n\n            return storyFn(context);\n        }, decorators);\n    };\n}\n","import { configure } from 'storybook/test';\n\n/** Configures `storybook/test` wrappers so Solid updates flush after async play steps. */\nexport async function beforeAll() {\n    try {\n        configure({\n            unstable_advanceTimersWrapper: (cb: () => any) => cb(),\n            asyncWrapper: async(cb: () => any) => {\n                const result = await cb();\n\n                await new Promise<void>((resolve) => {\n                    setTimeout(resolve, 0);\n\n                    // @ts-expect-error global jest\n                    if (typeof jest !== 'undefined' && jest != null && ((setTimeout as any)._isMockFunction === true || Object.hasOwn(setTimeout, 'clock'))) {\n                        // @ts-expect-error global jest\n                        jest!.advanceTimersByTime(0);\n                    }\n                });\n\n                return result;\n            },\n            eventWrapper: (cb: () => any) => cb(),\n        });\n    }\n    catch {\n        // storybook/test might not be available; noop\n    }\n}\n","import type { ArgsStoryFn } from 'storybook/internal/types';\nimport type { SolidRenderer } from '../../preview/public-api';\nimport type { SolidRuntimeCreateComponent } from './render-to-canvas';\n\n/** Default render for meta/stories with `component` + `args` and no custom `render` (CSF 3+). */\nexport function createDefaultRender(createComponent: SolidRuntimeCreateComponent): ArgsStoryFn<SolidRenderer> {\n    return (_, context) => {\n        if (!context.component) {\n            throw new Error(\n                `Unable to render story ${ context.id } as the component annotation is missing from the default export`\n            );\n        }\n\n        return createComponent(context.component, context.args);\n    };\n}\n","import { getStoryId } from './story-store';\n\nimport type { Args } from 'storybook/internal/types';\nimport type { StoryContext, StoryFnReturnType } from '../../preview/public-api';\nimport type { StoryStateStore } from './story-store';\n\n/** Play/mount API: sync reactive args and globals, then render via `renderToCanvas`. */\nexport function createMount({ storyStore }: { storyStore: StoryStateStore }) {\n    return (context: StoryContext<Args>) => {\n        const storyId = getStoryId(context);\n        const { forceRemount } = context;\n\n        if (!storyId) {\n            throw new Error('Story ID is required');\n        }\n\n        return async(ui?: StoryFnReturnType) => {\n            if (ui != null) {\n                context.originalStoryFn = () => ui;\n            }\n\n            if (forceRemount) {\n                storyStore.disposeStory(storyId);\n            }\n\n            if (!storyStore.isStoryRendered(storyId) || forceRemount) {\n                storyStore.resetStory(storyId);\n            }\n\n            storyStore.makeContextReactive(context);\n\n            await context.renderToCanvas();\n\n            return context.canvas;\n        };\n    };\n}\n","import { getStoryId } from './story-store';\n\nimport type { RenderContext, SolidComponent, SolidRenderer } from '../../preview/public-api';\nimport type { StoryStateStore } from './story-store';\n\nexport type SolidRuntimeCreateComponent = (\n    component: SolidComponent,\n    props: object\n) => SolidRenderer['storyResult'];\n\nexport interface SolidRendererRuntime {\n    storyStore: StoryStateStore;\n    createComponent: SolidRuntimeCreateComponent;\n    render: (\n        renderFn: () => SolidRenderer['storyResult'],\n        canvasElement: SolidRenderer['canvasElement']\n    ) => () => void;\n}\n\nexport type StoryThunk = () => SolidRenderer['storyResult'];\n\nexport interface StoryAppContext {\n    Story: StoryThunk;\n    storyContext: RenderContext['storyContext'];\n    showMain: RenderContext['showMain'];\n    showException: RenderContext['showException'];\n    storyId: string;\n}\n\ntype RenderToCanvasOptions = SolidRendererRuntime & {\n    createStoryApp: (context: StoryAppContext) => SolidComponent;\n};\n\n/** Mounts or updates the story in the preview canvas. Returns cleanup when the story changes. */\nexport function createRenderToCanvas(options: RenderToCanvasOptions) {\n    const { storyStore, createComponent, render, createStoryApp } = options;\n\n    return async(\n        renderContext: RenderContext,\n        canvasElement: SolidRenderer['canvasElement']\n    ) => {\n        const storyId = getStoryId({ ...renderContext, canvasElement });\n\n        if (!storyId) {\n            throw new Error('Story ID is required');\n        }\n\n        const { storyContext, storyFn: StoryFn, showMain, showException } = renderContext;\n\n        if (!storyStore.isStoryRendered(storyId)) {\n            const App = createStoryApp({\n                Story: StoryFn,\n                storyContext,\n                showMain,\n                showException,\n                storyId,\n            });\n\n            const disposeFn = render(() => createComponent(App, {}), canvasElement);\n\n            storyStore.setDisposeFn(storyId, disposeFn);\n        }\n        else {\n            StoryFn();\n        }\n\n        return () => {\n            storyStore.disposeStory(storyId);\n            storyStore.resetStory(storyId);\n        };\n    };\n}\n"],"mappings":"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"}
+{"version":3,"file":"render-to-canvas-CUzXHGXU.js","names":[],"sources":["../src/renderer/shared/story-store.ts","../src/renderer/shared/apply-decorators.ts","../src/renderer/shared/before-all.ts","../src/renderer/shared/default-render.ts","../src/renderer/shared/mount.ts","../src/renderer/shared/render-to-canvas.ts"],"sourcesContent":["import type { Args, Globals, StoryContext as InternalStoryContext } from 'storybook/internal/types';\nimport type { SolidRenderer } from '../../preview/public-api';\n\n/** Update store via `(prev) => next` (version layer applies reconcile/draft setter). */\ntype SetStoreFn<T extends object> = (update: (prev: T) => T) => void;\n\n/** Reactive store tuple returned by `createStore` (state + setter). */\ntype SolidStore<T extends object> = readonly [\n    state: T,\n    setState: SetStoreFn<T>\n];\n\ntype CreateStoreFn = <T extends object>(initial: T) => SolidStore<T>;\n\nexport interface StoryStateStore {\n    isStoryRendered: (storyId: string) => boolean;\n    resetStory: (storyId: string) => void;\n    setRendered: (storyId: string, rendered: boolean) => void;\n    setDisposeFn: (storyId: string, disposeFn: (() => void) | null) => void;\n    makeContextReactive: (context: InternalStoryContext<SolidRenderer, Args>) => void;\n    disposeStory: (storyId: string) => void;\n}\n\nexport function getStoryId(context: { id?: string; canvasElement?: { id?: string } }): string | undefined {\n    const canvasId = context.canvasElement?.id;\n\n    if (!canvasId || canvasId === 'storybook-root') {\n        return context.id;\n    }\n\n    return canvasId;\n}\n\nexport function createStoryState(createStore: CreateStoreFn): StoryStateStore {\n    const [globals, setGlobals] = createStore<Globals>({});\n    const renderedStories = new Set<string>();\n    const argsStores = new Map<string, SolidStore<Args>>();\n    const disposers = new Map<string, () => void>();\n\n    const getArgsStore = (storyId: string): SolidStore<Args> => {\n        let store = argsStores.get(storyId);\n\n        if (!store) {\n            store = createStore({} as Args);\n            argsStores.set(storyId, store);\n        }\n\n        return store;\n    };\n\n    return {\n        isStoryRendered(storyId) {\n            return renderedStories.has(storyId);\n        },\n\n        resetStory(storyId) {\n            renderedStories.delete(storyId);\n            disposers.delete(storyId);\n            argsStores.delete(storyId);\n        },\n\n        setRendered(storyId, isRendered) {\n            if (isRendered) {\n                renderedStories.add(storyId);\n            }\n            else {\n                renderedStories.delete(storyId);\n            }\n        },\n\n        setDisposeFn(storyId, disposeFn) {\n            if (disposeFn) {\n                disposers.set(storyId, disposeFn);\n            }\n            else {\n                disposers.delete(storyId);\n            }\n        },\n\n        makeContextReactive(context) {\n            const storyId = getStoryId(context);\n\n            if (!storyId) {\n                throw new Error('Story ID is required');\n            }\n\n            const [args, setArgs] = getArgsStore(storyId);\n\n            // Update reactive stores with the new values\n            setArgs(() => context.args);\n            setGlobals(() => context.globals);\n\n            // Sync the reactive stores to the context\n            context.args = args;\n            context.globals = globals;\n        },\n\n        disposeStory(storyId) {\n            disposers.get(storyId)?.();\n            disposers.delete(storyId);\n        },\n    };\n}\n","import { defaultDecorateStory } from 'storybook/preview-api';\n\nimport { IS_SOLID_JSX_FLAG, type Decorator, type SolidRenderer } from '../../preview/public-api';\nimport { getStoryId } from './story-store';\n\nimport type { LegacyStoryFn } from 'storybook/internal/types';\nimport type { StoryStateStore } from './story-store';\n\nexport function createApplyDecorators({\n    storyStore,\n}: {\n    storyStore: StoryStateStore;\n}): (\n    storyFn: LegacyStoryFn<SolidRenderer>,\n    rawDecorators: Decorator[]\n) => LegacyStoryFn<SolidRenderer> {\n    return (storyFn, rawDecorators) => {\n        const decorators = rawDecorators.map(\n            (decorator): Decorator => {\n                const originalFn = (decorator as Decorator & { originalFn?: Decorator }).originalFn;\n                const isJSX = Boolean(\n                    decorator[IS_SOLID_JSX_FLAG] || originalFn?.[IS_SOLID_JSX_FLAG]\n                );\n\n                return (StoryFn, context) => {\n                    if (isJSX) {\n                        const storyId = getStoryId(context);\n\n                        if (storyId && storyStore.isStoryRendered(storyId)) {\n                            return StoryFn(context);\n                        }\n                    }\n\n                    return decorator(StoryFn, context);\n                };\n            }\n        );\n\n        return defaultDecorateStory((context) => {\n            const storyId = getStoryId(context);\n\n            if (storyId && storyStore.isStoryRendered(storyId)) {\n                return null;\n            }\n\n            return storyFn(context);\n        }, decorators);\n    };\n}\n","import { configure } from 'storybook/test';\n\n/** Configures `storybook/test` wrappers so Solid updates flush after async play steps. */\nexport async function beforeAll() {\n    try {\n        configure({\n            unstable_advanceTimersWrapper: (cb: () => any) => cb(),\n            asyncWrapper: async(cb: () => any) => {\n                const result = await cb();\n\n                await new Promise<void>((resolve) => {\n                    setTimeout(resolve, 0);\n\n                    // @ts-expect-error global jest\n                    if (typeof jest !== 'undefined' && jest != null && ((setTimeout as any)._isMockFunction === true || Object.hasOwn(setTimeout, 'clock'))) {\n                        // @ts-expect-error global jest\n                        jest!.advanceTimersByTime(0);\n                    }\n                });\n\n                return result;\n            },\n            eventWrapper: (cb: () => any) => cb(),\n        });\n    }\n    catch {\n        // storybook/test might not be available; noop\n    }\n}\n","import type { ArgsStoryFn } from 'storybook/internal/types';\nimport type { SolidRenderer } from '../../preview/public-api';\nimport type { SolidRuntimeCreateComponent } from './render-to-canvas';\n\n/** Default render for meta/stories with `component` + `args` and no custom `render` (CSF 3+). */\nexport function createDefaultRender(createComponent: SolidRuntimeCreateComponent): ArgsStoryFn<SolidRenderer> {\n    return (_, context) => {\n        if (!context.component) {\n            throw new Error(\n                `Unable to render story ${ context.id } as the component annotation is missing from the default export`\n            );\n        }\n\n        return createComponent(context.component, context.args);\n    };\n}\n","import { getStoryId } from './story-store';\n\nimport type { Args } from 'storybook/internal/types';\nimport type { StoryContext, StoryFnReturnType } from '../../preview/public-api';\nimport type { StoryStateStore } from './story-store';\n\n/** Play/mount API: sync reactive args and globals, then render via `renderToCanvas`. */\nexport function createMount({\n    storyStore,\n    flush,\n}: {\n    storyStore: StoryStateStore;\n    /**\n     * Solid 2 commits store writes on `flush`. Call it once, after both args\n     * and globals are updated, so a new reader does not observe the empty store.\n     */\n    flush?: () => void;\n}) {\n    return (context: StoryContext<Args>) => {\n        const storyId = getStoryId(context);\n        const { forceRemount } = context;\n\n        if (!storyId) {\n            throw new Error('Story ID is required');\n        }\n\n        return async(ui?: StoryFnReturnType) => {\n            if (ui != null) {\n                context.originalStoryFn = () => ui;\n            }\n\n            if (forceRemount) {\n                storyStore.disposeStory(storyId);\n            }\n\n            if (!storyStore.isStoryRendered(storyId) || forceRemount) {\n                storyStore.resetStory(storyId);\n            }\n\n            storyStore.makeContextReactive(context);\n            flush?.();\n\n            await context.renderToCanvas();\n\n            return context.canvas;\n        };\n    };\n}\n","import { getStoryId } from './story-store';\n\nimport type { RenderContext, SolidComponent, SolidRenderer } from '../../preview/public-api';\nimport type { StoryStateStore } from './story-store';\n\nexport type SolidRuntimeCreateComponent = (\n    component: SolidComponent,\n    props: object\n) => SolidRenderer['storyResult'];\n\nexport interface SolidRendererRuntime {\n    storyStore: StoryStateStore;\n    createComponent: SolidRuntimeCreateComponent;\n    render: (\n        renderFn: () => SolidRenderer['storyResult'],\n        canvasElement: SolidRenderer['canvasElement']\n    ) => () => void;\n}\n\nexport type StoryThunk = () => SolidRenderer['storyResult'];\n\nexport interface StoryAppContext {\n    Story: StoryThunk;\n    storyContext: RenderContext['storyContext'];\n    showMain: RenderContext['showMain'];\n    showException: RenderContext['showException'];\n    storyId: string;\n}\n\ntype RenderToCanvasOptions = SolidRendererRuntime & {\n    createStoryApp: (context: StoryAppContext) => SolidComponent;\n};\n\n/** Mounts or updates the story in the preview canvas. Returns cleanup when the story changes. */\nexport function createRenderToCanvas(options: RenderToCanvasOptions) {\n    const { storyStore, createComponent, render, createStoryApp } = options;\n\n    return async(\n        renderContext: RenderContext,\n        canvasElement: SolidRenderer['canvasElement']\n    ) => {\n        const storyId = getStoryId({ ...renderContext, canvasElement });\n\n        if (!storyId) {\n            throw new Error('Story ID is required');\n        }\n\n        const { storyContext, storyFn: StoryFn, showMain, showException } = renderContext;\n\n        if (!storyStore.isStoryRendered(storyId)) {\n            const App = createStoryApp({\n                Story: StoryFn,\n                storyContext,\n                showMain,\n                showException,\n                storyId,\n            });\n\n            const disposeFn = render(() => createComponent(App, {}), canvasElement);\n\n            storyStore.setDisposeFn(storyId, disposeFn);\n        }\n        else {\n            StoryFn();\n        }\n\n        return () => {\n            storyStore.disposeStory(storyId);\n            storyStore.resetStory(storyId);\n        };\n    };\n}\n"],"mappings":"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"}

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 { a as createApplyDecorators, i as beforeAll, n as createMount, o as createStoryState, r as createDefaultRender, t as createRenderToCanvas } from "../render-to-canvas-CUzXHGXU.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/dist/renderer/solid-next.js

@@ -1,8 +1,8 @@
-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 { a as createApplyDecorators, i as beforeAll, n as createMount, o as createStoryState, r as createDefaultRender, t as createRenderToCanvas } from "../render-to-canvas-CUzXHGXU.js";
 import { definePreviewAddon } from "storybook/internal/csf";
 import { global } from "@storybook/global";
 import { render as render$1 } from "@solidjs/web";
-import { Errored, createComponent, createMemo, createStore, onSettled } from "solid-js";
+import { Errored, createComponent, createMemo, createStore, flush, onSettled } from "solid-js";
 //#region src/renderer/solid-next.ts
 const SOLID_RENDERER_ID = "solid-next";
 if (global.window) global.window.STORYBOOK_ENV = SOLID_RENDERER_ID;
@@ -23,7 +23,10 @@ const runtime = {
 	createComponent
 };
 const applyDecorators = createApplyDecorators({ storyStore });
-const mount = createMount(runtime);
+const mount = createMount({
+	storyStore,
+	flush
+});
 const render = createDefaultRender(runtime.createComponent);
 const renderToCanvas = createRenderToCanvas({
 	...runtime,

package/dist/renderer/solid-next.js.map

@@ -1 +1 @@
-{"version":3,"file":"solid-next.js","names":["solidRender"],"sources":["../../src/renderer/solid-next.ts"],"sourcesContent":["import { render as solidRender } from '@solidjs/web';\nimport { global } from '@storybook/global';\nimport {\n    createComponent,\n    createMemo,\n    createStore,\n    Errored,\n    onSettled,\n} from 'solid-js-next';\nimport { definePreviewAddon } from 'storybook/internal/csf';\n\nimport { createApplyDecorators } from './shared/apply-decorators';\nimport { beforeAll } from './shared/before-all';\nimport { createDefaultRender } from './shared/default-render';\nimport { createMount } from './shared/mount';\nimport { createRenderToCanvas } from './shared/render-to-canvas';\nimport { createStoryState } from './shared/story-store';\n\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\nimport type { SolidComponent, SolidRenderer } from '../preview/public-api';\nimport type { SolidRendererRuntime, StoryThunk } from './shared/render-to-canvas';\n\nconst SOLID_RENDERER_ID = 'solid-next' as const;\n\nif (global.window) {\n    global.window.STORYBOOK_ENV = SOLID_RENDERER_ID;\n}\n\nconst parameters = {\n    renderer: SOLID_RENDERER_ID,\n};\n\nfunction trackStory(story: StoryThunk): SolidRenderer['storyResult'] {\n    return createMemo(story) as unknown as SolidRenderer['storyResult'];\n}\n\nconst storyStore = createStoryState((initial: any) => {\n    const [state, setStore] = createStore(initial);\n\n    const setState = (update: (prev: any) => any) => {\n        setStore(() => update(state));\n    };\n\n    return [state, setState];\n});\n\nconst runtime: SolidRendererRuntime = {\n    storyStore,\n    render: solidRender,\n    createComponent: createComponent as SolidRendererRuntime['createComponent'],\n};\n\nconst applyDecorators = createApplyDecorators({ storyStore });\nconst mount = createMount(runtime);\nconst render = createDefaultRender(runtime.createComponent);\nconst renderToCanvas = createRenderToCanvas({\n    ...runtime,\n    createStoryApp: ({ Story, storyContext, showMain, showException, storyId }) => {\n        const renderStory = () => createComponent(() => trackStory(Story), {});\n\n        return (() => {\n            onSettled(() => {\n                showMain();\n                storyStore.setRendered(storyId, true);\n\n                return () => {\n                    storyStore.setRendered(storyId, false);\n                };\n            });\n\n\n            if (storyContext?.parameters?.['__isPortableStory']) {\n                return renderStory();\n            }\n\n            return createComponent(Errored, {\n                fallback: (err: () => unknown, _reset: () => void) => {\n                    const error = err() as Error;\n\n                    showException(error);\n\n                    return error as any;\n                },\n                children: renderStory(),\n            });\n        }) as SolidComponent;\n    },\n});\n\nconst previewAddon = definePreviewAddon({\n    applyDecorators,\n    beforeAll,\n    mount,\n    parameters,\n    render,\n    renderToCanvas,\n} as unknown as ProjectAnnotations<Renderer>);\n\nexport {\n    applyDecorators,\n    beforeAll,\n    mount,\n    parameters,\n    previewAddon,\n    render,\n    renderToCanvas,\n};\n"],"mappings":";;;;;;AAsBA,MAAM,oBAAoB;AAE1B,IAAI,OAAO,QACP,OAAO,OAAO,gBAAgB;AAGlC,MAAM,aAAa,EACf,UAAU,kBACd;AAEA,SAAS,WAAW,OAAiD;CACjE,OAAO,WAAW,KAAK;AAC3B;AAEA,MAAM,aAAa,kBAAkB,YAAiB;CAClD,MAAM,CAAC,OAAO,YAAY,YAAY,OAAO;CAE7C,MAAM,YAAY,WAA+B;EAC7C,eAAe,OAAO,KAAK,CAAC;CAChC;CAEA,OAAO,CAAC,OAAO,QAAQ;AAC3B,CAAC;AAED,MAAM,UAAgC;CAClC;CACA,QAAQA;CACS;AACrB;AAEA,MAAM,kBAAkB,sBAAsB,EAAE,WAAW,CAAC;AAC5D,MAAM,QAAQ,YAAY,OAAO;AACjC,MAAM,SAAS,oBAAoB,QAAQ,eAAe;AAC1D,MAAM,iBAAiB,qBAAqB;CACxC,GAAG;CACH,iBAAiB,EAAE,OAAO,cAAc,UAAU,eAAe,cAAc;EAC3E,MAAM,oBAAoB,sBAAsB,WAAW,KAAK,GAAG,CAAC,CAAC;EAErE,cAAc;GACV,gBAAgB;IACZ,SAAS;IACT,WAAW,YAAY,SAAS,IAAI;IAEpC,aAAa;KACT,WAAW,YAAY,SAAS,KAAK;IACzC;GACJ,CAAC;GAGD,IAAI,cAAc,aAAa,sBAC3B,OAAO,YAAY;GAGvB,OAAO,gBAAgB,SAAS;IAC5B,WAAW,KAAoB,WAAuB;KAClD,MAAM,QAAQ,IAAI;KAElB,cAAc,KAAK;KAEnB,OAAO;IACX;IACA,UAAU,YAAY;GAC1B,CAAC;EACL;CACJ;AACJ,CAAC;AAED,MAAM,eAAe,mBAAmB;CACpC;CACA;CACA;CACA;CACA;CACA;AACJ,CAA4C"}
+{"version":3,"file":"solid-next.js","names":["solidRender"],"sources":["../../src/renderer/solid-next.ts"],"sourcesContent":["import { render as solidRender } from '@solidjs/web';\nimport { global } from '@storybook/global';\nimport {\n    createComponent,\n    createMemo,\n    createStore,\n    Errored,\n    flush,\n    onSettled,\n} from 'solid-js-next';\nimport { definePreviewAddon } from 'storybook/internal/csf';\n\nimport { createApplyDecorators } from './shared/apply-decorators';\nimport { beforeAll } from './shared/before-all';\nimport { createDefaultRender } from './shared/default-render';\nimport { createMount } from './shared/mount';\nimport { createRenderToCanvas } from './shared/render-to-canvas';\nimport { createStoryState } from './shared/story-store';\n\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\nimport type { SolidComponent, SolidRenderer } from '../preview/public-api';\nimport type { SolidRendererRuntime, StoryThunk } from './shared/render-to-canvas';\n\nconst SOLID_RENDERER_ID = 'solid-next' as const;\n\nif (global.window) {\n    global.window.STORYBOOK_ENV = SOLID_RENDERER_ID;\n}\n\nconst parameters = {\n    renderer: SOLID_RENDERER_ID,\n};\n\nfunction trackStory(story: StoryThunk): SolidRenderer['storyResult'] {\n    return createMemo(story) as unknown as SolidRenderer['storyResult'];\n}\n\nconst storyStore = createStoryState((initial: any) => {\n    const [state, setStore] = createStore(initial);\n\n    const setState = (update: (prev: any) => any) => {\n        setStore(() => update(state));\n    };\n\n    return [state, setState];\n});\n\nconst runtime: SolidRendererRuntime = {\n    storyStore,\n    render: solidRender,\n    createComponent: createComponent as SolidRendererRuntime['createComponent'],\n};\n\nconst applyDecorators = createApplyDecorators({ storyStore });\nconst mount = createMount({ storyStore, flush });\nconst render = createDefaultRender(runtime.createComponent);\nconst renderToCanvas = createRenderToCanvas({\n    ...runtime,\n    createStoryApp: ({ Story, storyContext, showMain, showException, storyId }) => {\n        const renderStory = () => createComponent(() => trackStory(Story), {});\n\n        return (() => {\n            onSettled(() => {\n                showMain();\n                storyStore.setRendered(storyId, true);\n\n                return () => {\n                    storyStore.setRendered(storyId, false);\n                };\n            });\n\n\n            if (storyContext?.parameters?.['__isPortableStory']) {\n                return renderStory();\n            }\n\n            return createComponent(Errored, {\n                fallback: (err: () => unknown, _reset: () => void) => {\n                    const error = err() as Error;\n\n                    showException(error);\n\n                    return error as any;\n                },\n                children: renderStory(),\n            });\n        }) as SolidComponent;\n    },\n});\n\nconst previewAddon = definePreviewAddon({\n    applyDecorators,\n    beforeAll,\n    mount,\n    parameters,\n    render,\n    renderToCanvas,\n} as unknown as ProjectAnnotations<Renderer>);\n\nexport {\n    applyDecorators,\n    beforeAll,\n    mount,\n    parameters,\n    previewAddon,\n    render,\n    renderToCanvas,\n};\n"],"mappings":";;;;;;AAuBA,MAAM,oBAAoB;AAE1B,IAAI,OAAO,QACP,OAAO,OAAO,gBAAgB;AAGlC,MAAM,aAAa,EACf,UAAU,kBACd;AAEA,SAAS,WAAW,OAAiD;CACjE,OAAO,WAAW,KAAK;AAC3B;AAEA,MAAM,aAAa,kBAAkB,YAAiB;CAClD,MAAM,CAAC,OAAO,YAAY,YAAY,OAAO;CAE7C,MAAM,YAAY,WAA+B;EAC7C,eAAe,OAAO,KAAK,CAAC;CAChC;CAEA,OAAO,CAAC,OAAO,QAAQ;AAC3B,CAAC;AAED,MAAM,UAAgC;CAClC;CACA,QAAQA;CACS;AACrB;AAEA,MAAM,kBAAkB,sBAAsB,EAAE,WAAW,CAAC;AAC5D,MAAM,QAAQ,YAAY;CAAE;CAAY;AAAM,CAAC;AAC/C,MAAM,SAAS,oBAAoB,QAAQ,eAAe;AAC1D,MAAM,iBAAiB,qBAAqB;CACxC,GAAG;CACH,iBAAiB,EAAE,OAAO,cAAc,UAAU,eAAe,cAAc;EAC3E,MAAM,oBAAoB,sBAAsB,WAAW,KAAK,GAAG,CAAC,CAAC;EAErE,cAAc;GACV,gBAAgB;IACZ,SAAS;IACT,WAAW,YAAY,SAAS,IAAI;IAEpC,aAAa;KACT,WAAW,YAAY,SAAS,KAAK;IACzC;GACJ,CAAC;GAGD,IAAI,cAAc,aAAa,sBAC3B,OAAO,YAAY;GAGvB,OAAO,gBAAgB,SAAS;IAC5B,WAAW,KAAoB,WAAuB;KAClD,MAAM,QAAQ,IAAI;KAElB,cAAc,KAAK;KAEnB,OAAO;IACX;IACA,UAAU,YAAY;GAC1B,CAAC;EACL;CACJ;AACJ,CAAC;AAED,MAAM,eAAe,mBAAmB;CACpC;CACA;CACA;CACA;CACA;CACA;AACJ,CAA4C"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "storybook-solidjs-vite",
     "type": "module",
-    "version": "10.7.2",
+    "version": "10.7.4",
     "private": false,
     "packageManager": "bun@1.3.14",
     "description": "SolidJS integration with Storybook",
@@ -133,7 +133,7 @@
         "@changesets/cli": "^3.0.1",
         "@commitlint/cli": "^21.2.2",
         "@commitlint/config-conventional": "^21.2.2",
-        "@solidjs/web": "2.0.0-rc.6",
+        "@solidjs/web": "2.0.0-rc.15",
         "@tsconfig/strictest": "^2.0.8",
         "@types/node": "^25.9.5",
         "@types/semver": "^7.8.0",
@@ -144,7 +144,7 @@
         "lint-staged": "^16.4.0",
         "simple-git-hooks": "^2.13.1",
         "solid-js": "^1.9.15",
-        "solid-js-next": "npm:solid-js@2.0.0-rc.6",
+        "solid-js-next": "npm:solid-js@2.0.0-rc.15",
         "storybook": "^10.6.0",
         "tsdown": "^0.23.0",
         "type-fest": "^5.8.0",

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/renderer/shared/mount.ts

@@ -5,7 +5,17 @@ import type { StoryContext, StoryFnReturnType } from '../../preview/public-api';
 import type { StoryStateStore } from './story-store';
 
 /** Play/mount API: sync reactive args and globals, then render via `renderToCanvas`. */
-export function createMount({ storyStore }: { storyStore: StoryStateStore }) {
+export function createMount({
+    storyStore,
+    flush,
+}: {
+    storyStore: StoryStateStore;
+    /**
+     * Solid 2 commits store writes on `flush`. Call it once, after both args
+     * and globals are updated, so a new reader does not observe the empty store.
+     */
+    flush?: () => void;
+}) {
     return (context: StoryContext<Args>) => {
         const storyId = getStoryId(context);
         const { forceRemount } = context;
@@ -28,6 +38,7 @@ export function createMount({ storyStore }: { storyStore: StoryStateStore }) {
             }
 
             storyStore.makeContextReactive(context);
+            flush?.();
 
             await context.renderToCanvas();
 

package/src/renderer/solid-next.ts

@@ -5,6 +5,7 @@ import {
     createMemo,
     createStore,
     Errored,
+    flush,
     onSettled,
 } from 'solid-js-next';
 import { definePreviewAddon } from 'storybook/internal/csf';
@@ -51,7 +52,7 @@ const runtime: SolidRendererRuntime = {
 };
 
 const applyDecorators = createApplyDecorators({ storyStore });
-const mount = createMount(runtime);
+const mount = createMount({ storyStore, flush });
 const render = createDefaultRender(runtime.createComponent);
 const renderToCanvas = createRenderToCanvas({
     ...runtime,

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();
+        });
+    });
+});

package/src/spec/renderer/solid-next-mount.test.ts

@@ -0,0 +1,37 @@
+import { createMemo, createRoot } from 'solid-js-next';
+import { describe, expect, it, vi } from 'vitest';
+
+import { mount } from '../../renderer/solid-next';
+
+// `@solidjs/web` imports `solid-js`, which is Solid 1 in this package.
+vi.mock('@solidjs/web', () => ({
+    render: () => () => {},
+}));
+
+describe('Solid 2 mount', () => {
+    it('shows story args and globals to a reactive reader on first render', async() => {
+        let seen = '';
+        const context = {
+            id: 'repro-args--basic',
+            args: { user: { name: 'Ada' } },
+            globals: { theme: 'dark' },
+            forceRemount: false,
+            canvas: 'canvas',
+            renderToCanvas: async() => {
+                createRoot((dispose) => {
+                    try {
+                        const label = createMemo(() => `${context.args.user.name}/${context.globals.theme}`);
+
+                        seen = label();
+                    }
+                    finally {
+                        dispose();
+                    }
+                });
+            },
+        } as any;
+
+        await expect(mount(context)()).resolves.toBe('canvas');
+        expect(seen).toBe('Ada/dark');
+    });
+});