@storybook/svelte 9.0.0-alpha.8 → 9.0.0-beta.0

package/dist/chunk-2IXN2SLZ.mjs

@@ -0,0 +1,11 @@
+import { __export } from './chunk-CEH6MNVV.mjs';
+import { RESET_STORY_ARGS } from 'storybook/internal/core-events';
+import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
+import { createReactiveProps } from '@storybook/svelte/internal/createReactiveProps';
+import { addons, sanitizeStoryContextUpdate } from 'storybook/preview-api';
+import * as svelte from 'svelte';
+import DecoratorHandler from '@storybook/svelte/internal/DecoratorHandler.svelte';
+
+var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var storyIdsToRemountFromResetArgsEvent=new Set;addons.getChannel().on(RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId);});var componentsByDomElement=new Map;function renderToCanvas({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElement.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElement.delete(canvasElementToUnmount));}let existingComponent=componentsByDomElement.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=createReactiveProps({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(PreviewRender,{target:canvasElement,props});componentsByDomElement.set(canvasElement,{mountedComponent,props});}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement);}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return {Component,props:args}};function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return !story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:DecoratorHandler,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte"};
+
+export { decorateStory, entry_preview_exports, mount2 as mount, parameters, render, renderToCanvas };

package/dist/components/AddStorybookIdDecorator.svelte

@@ -1,7 +1,7 @@
 <script>
-  export let storyId;
+  const { storyId, children } = $props();
 </script>
 
 <div data-story="true" id={storyId}>
-  <slot />
-</div>
+  {@render children()}
+</div>

package/dist/components/DecoratorHandler.svelte

@@ -0,0 +1,20 @@
+<script>
+  const { decorator, Component, props } = $props();
+
+  /*
+    Svelte Docgen will create argTypes for events with the name 'event_eventName'
+    The Actions addon will convert these to args because they are type: 'action'
+    We need to filter these args out so they are not passed to the component
+  */
+  let propsWithoutDocgenEvents = $derived(
+    Object.fromEntries(Object.entries(props).filter(([key]) => !key.startsWith('event_')))
+  );
+</script>
+
+{#if decorator}
+  <decorator.Component {...decorator.props}>
+    <Component {...propsWithoutDocgenEvents} />
+  </decorator.Component>
+{:else}
+  <Component {...propsWithoutDocgenEvents} />
+{/if}

package/dist/components/PreviewRender.svelte

@@ -1,56 +1,29 @@
 <script>
-  import SlotDecorator from './SlotDecorator.svelte';
+  import DecoratorHandler from './DecoratorHandler.svelte';
   import { dedent } from 'ts-dedent';
 
-  export let name;
-  export let title;
-  export let storyFn;
-  export let showError;
-  export let storyContext;
+  const { name, title, storyFn, showError } = $props();
 
   let {
-    /** @type {SvelteComponent} */
+    /** @type {import('svelte').SvelteComponent} */
     Component,
-    /** @type {any} */
     props = {},
-    /** @type {{[string]: () => {}}} Attach svelte event handlers */
-    on,
-    /** @type {any} whether this level of the decorator chain is the last, ie. the actual story */
-    argTypes,
-  } = storyFn();
-
-  let firstTime = true;
-
-  // the first time we don't want to call storyFn two times so we just return the values
-  // we already have from the previous call. If storyFn changes this function will run
-  // again but this time firstTime will be false
-  function getStoryFnValue(storyFn) {
-    if (firstTime) {
-      firstTime = false;
-      return {
-        Component,
-        props,
-        on,
-        argTypes,
-      };
-    }
+  } = $derived.by(() => {
     return storyFn();
-  }
+  });
 
-  // reactive, re-render on storyFn change
-  $: ({ Component, props = {}, on, argTypes } = getStoryFnValue(storyFn));
-
-  // set the argTypes context, read by the last SlotDecorator that renders the original story
-  if (!Component) {
-    showError({
-      title: `Expecting a Svelte component from the story: "${name}" of "${title}".`,
-      description: dedent`
+  $effect(() => {
+    if (!Component) {
+      showError({
+        title: `Expecting a Svelte component from the story: "${name}" of "${title}".`,
+        description: dedent`
         Did you forget to return the Svelte component configuration from the story?
         Use "() => ({ Component: YourComponent, props: {} })"
         when defining the story.
       `,
-    });
-  }
+      });
+    }
+  });
 </script>
 
-<SlotDecorator {Component} {props} {on} {argTypes} />
+<DecoratorHandler {Component} {props} />

package/dist/{createSvelte5Props.svelte.js → createReactiveProps.svelte.js}

@@ -7,7 +7,7 @@
  * @param {TProps} data - The data to create Svelte 5 props from.
  * @returns {TProps} - The created Svelte 5 props.
  */
-export const createSvelte5Props = (data) => {
+export const createReactiveProps = (data) => {
   const props = $state(data);
   return props;
 };

package/dist/entry-preview-docs.js

@@ -4,4 +4,4 @@
   ${propsArray.join(`
   `)}`:`<${name} ${props}`;return slotValue?`${srcStart}>
     ${slotValue}
-</${name}>`:`${srcStart}/>`}function getWrapperProperties(component){let{__docgen}=component||{};return __docgen?__docgen.keywords?.find(kw=>kw.name==="wrapper")?{wrapper:!0,slotProperty:__docgen.data?.find(prop=>prop.keywords.find(kw=>kw.name==="slot"))?.name}:{wrapper:!1}:{wrapper:!1}}var sourceDecorator=(storyFn,context)=>{let channel=import_preview_api.addons.getChannel(),skip=skipSourceRender(context),story=storyFn(),source;if((0,import_preview_api.useEffect)(()=>{if(!skip&&source){let{id,unmappedArgs}=context;channel.emit(import_docs_tools.SNIPPET_RENDERED,{id,args:unmappedArgs,source})}}),skip)return story;let{parameters:parameters2={},args={},component:ctxComponent}=context||{},{Component:component}=context.originalStoryFn(args,context),{wrapper,slotProperty}=getWrapperProperties(component);wrapper&&(parameters2.component&&(0,import_client_logger2.deprecate)("parameters.component is deprecated. Using context.component instead."),component=ctxComponent);let generated=generateSvelteSource(component,args,context?.argTypes,slotProperty);return generated&&(source=generated),story};var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});
+</${name}>`:`${srcStart}/>`}function getWrapperProperties(component){let{__docgen}=component||{};return __docgen?__docgen.keywords?.find(kw=>kw.name==="wrapper")?{wrapper:!0,slotProperty:__docgen.data?.find(prop=>prop.keywords.find(kw=>kw.name==="slot"))?.name}:{wrapper:!1}:{wrapper:!1}}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn(),source=(0,import_preview_api.useRef)(void 0);return(0,import_preview_api.useEffect)(()=>{if(skip)return;let{parameters:parameters2={},args={},component:ctxComponent}=context||{},{Component:component}=context.originalStoryFn(args,context),{wrapper,slotProperty}=getWrapperProperties(component);wrapper&&(parameters2.component&&(0,import_client_logger2.deprecate)("parameters.component is deprecated. Using context.component instead."),component=ctxComponent);let generated=generateSvelteSource(component,args,context?.argTypes,slotProperty);generated&&source.current!==generated&&((0,import_preview_api.emitTransformCode)(generated,context),source.current=generated)}),story};var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});

package/dist/entry-preview-docs.mjs

@@ -1,7 +1,7 @@
 import './chunk-CEH6MNVV.mjs';
-import { enhanceArgTypes, SNIPPET_RENDERED, SourceType } from 'storybook/internal/docs-tools';
+import { enhanceArgTypes, SourceType } from 'storybook/internal/docs-tools';
 import { logger, deprecate } from 'storybook/internal/client-logger';
-import { addons, useEffect } from 'storybook/preview-api';
+import { useRef, useEffect, emitTransformCode } from 'storybook/preview-api';
 
 function hasKeyword(keyword,keywords){return keywords?keywords.find(k=>k.name===keyword)!=null:!1}var extractArgTypes=component=>{try{let docgen=component.__docgen;if(docgen)return createArgTypes(docgen)}catch(err){logger.log(`Error extracting argTypes: ${err}`);}return {}},createArgTypes=docgen=>{let results={};return docgen.data&&docgen.data.forEach(item=>{results[item.name]={...parseTypeToControl(item.type),name:item.name,description:item.description||void 0,type:{required:hasKeyword("required",item.keywords||[]),name:item.type?.text==="{}"?"object":item.type?.text},table:{type:{summary:item.type?.text},defaultValue:{summary:item.defaultValue},category:"properties"}};}),docgen.events&&docgen.events.forEach(item=>{results[`event_${item.name}`]={name:item.name,action:item.name,control:!1,...item.description?{description:item.description}:{},table:{category:"events"}};}),docgen.slots&&docgen.slots.forEach(item=>{results[`slot_${item.name}`]={name:item.name,control:!1,description:[item.description,item.params?.map(p=>`\`${p.name}\``).join(" ")].filter(p=>p).join(`
 
@@ -9,6 +9,6 @@ function hasKeyword(keyword,keywords){return keywords?keywords.find(k=>k.name===
   ${propsArray.join(`
   `)}`:`<${name} ${props}`;return slotValue?`${srcStart}>
     ${slotValue}
-</${name}>`:`${srcStart}/>`}function getWrapperProperties(component){let{__docgen}=component||{};return __docgen?__docgen.keywords?.find(kw=>kw.name==="wrapper")?{wrapper:!0,slotProperty:__docgen.data?.find(prop=>prop.keywords.find(kw=>kw.name==="slot"))?.name}:{wrapper:!1}:{wrapper:!1}}var sourceDecorator=(storyFn,context)=>{let channel=addons.getChannel(),skip=skipSourceRender(context),story=storyFn(),source;if(useEffect(()=>{if(!skip&&source){let{id,unmappedArgs}=context;channel.emit(SNIPPET_RENDERED,{id,args:unmappedArgs,source});}}),skip)return story;let{parameters:parameters2={},args={},component:ctxComponent}=context||{},{Component:component}=context.originalStoryFn(args,context),{wrapper,slotProperty}=getWrapperProperties(component);wrapper&&(parameters2.component&&deprecate("parameters.component is deprecated. Using context.component instead."),component=ctxComponent);let generated=generateSvelteSource(component,args,context?.argTypes,slotProperty);return generated&&(source=generated),story};var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[enhanceArgTypes];
+</${name}>`:`${srcStart}/>`}function getWrapperProperties(component){let{__docgen}=component||{};return __docgen?__docgen.keywords?.find(kw=>kw.name==="wrapper")?{wrapper:!0,slotProperty:__docgen.data?.find(prop=>prop.keywords.find(kw=>kw.name==="slot"))?.name}:{wrapper:!1}:{wrapper:!1}}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn(),source=useRef(void 0);return useEffect(()=>{if(skip)return;let{parameters:parameters2={},args={},component:ctxComponent}=context||{},{Component:component}=context.originalStoryFn(args,context),{wrapper,slotProperty}=getWrapperProperties(component);wrapper&&(parameters2.component&&deprecate("parameters.component is deprecated. Using context.component instead."),component=ctxComponent);let generated=generateSvelteSource(component,args,context?.argTypes,slotProperty);generated&&source.current!==generated&&(emitTransformCode(generated,context),source.current=generated);}),story};var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[enhanceArgTypes];
 
 export { argTypesEnhancers, decorators, parameters };

package/dist/entry-preview.d.ts

@@ -2,7 +2,7 @@ import { RenderContext, ArgsStoryFn, BaseAnnotations } from 'storybook/internal/
 import { S as SvelteRenderer } from './types-b7d0039b.js';
 import 'svelte';
 
-declare function renderToCanvas(renderContext: RenderContext<SvelteRenderer>, canvasElement: SvelteRenderer['canvasElement']): () => void;
+declare function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }: RenderContext<SvelteRenderer>, canvasElement: SvelteRenderer['canvasElement']): () => void;
 declare const render: ArgsStoryFn<SvelteRenderer>;
 
 declare function decorateStory(storyFn: any, decorators: any[]): any;

package/dist/entry-preview.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_core_events=require("storybook/internal/core-events"),import_PreviewRender=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createSvelte5Props=require("@storybook/svelte/internal/createSvelte5Props"),import_preview_api=require("storybook/preview-api"),svelte=__toESM(require("svelte"));var import_compiler=require("svelte/compiler"),IS_SVELTE_V4=Number(import_compiler.VERSION[0])<=4;function renderToCanvas(renderContext,canvasElement){return IS_SVELTE_V4?renderToCanvasV4(renderContext,canvasElement):renderToCanvasV5(renderContext,canvasElement)}var storyIdsToRemountFromResetArgsEvent=new Set;import_preview_api.addons.getChannel().on(import_core_events.RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId)});var componentsByDomElementV4=new Map;function renderToCanvasV4({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){componentsByDomElementV4.has(canvasElementToUnmount)&&(componentsByDomElementV4.get(canvasElementToUnmount).$destroy(),componentsByDomElementV4.delete(canvasElementToUnmount),canvasElementToUnmount.innerHTML="")}let existingComponent=componentsByDomElementV4.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let mountedComponent=new import_PreviewRender.default({target:canvasElement,props:{storyFn,storyContext,name,title,showError}});componentsByDomElementV4.set(canvasElement,mountedComponent)}else existingComponent.$set({storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var componentsByDomElementV5=new Map;function renderToCanvasV5({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElementV5.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElementV5.delete(canvasElementToUnmount))}let existingComponent=componentsByDomElementV5.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=(0,import_createSvelte5Props.createSvelte5Props)({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(import_PreviewRender.default,{target:canvasElement,props});componentsByDomElementV5.set(canvasElement,{mountedComponent,props})}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return{Component,props:args}};var import_SlotDecorator=__toESM(require("@storybook/svelte/internal/SlotDecorator.svelte")),import_preview_api2=require("storybook/preview-api");function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return!story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:import_SlotDecorator.default,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api2.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte"};0&&(module.exports={applyDecorators,mount,parameters,render,renderToCanvas});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_core_events=require("storybook/internal/core-events"),import_PreviewRender=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createReactiveProps=require("@storybook/svelte/internal/createReactiveProps"),import_preview_api=require("storybook/preview-api"),svelte=__toESM(require("svelte")),storyIdsToRemountFromResetArgsEvent=new Set;import_preview_api.addons.getChannel().on(import_core_events.RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId)});var componentsByDomElement=new Map;function renderToCanvas({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElement.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElement.delete(canvasElementToUnmount))}let existingComponent=componentsByDomElement.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=(0,import_createReactiveProps.createReactiveProps)({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(import_PreviewRender.default,{target:canvasElement,props});componentsByDomElement.set(canvasElement,{mountedComponent,props})}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return{Component,props:args}};var import_DecoratorHandler=__toESM(require("@storybook/svelte/internal/DecoratorHandler.svelte")),import_preview_api2=require("storybook/preview-api");function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return!story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:import_DecoratorHandler.default,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api2.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte"};0&&(module.exports={applyDecorators,mount,parameters,render,renderToCanvas});

package/dist/entry-preview.mjs

@@ -1,2 +1,2 @@
-export { decorateStory as applyDecorators, mount, parameters, render, renderToCanvas } from './chunk-XMMNDRKT.mjs';
+export { decorateStory as applyDecorators, mount, parameters, render, renderToCanvas } from './chunk-2IXN2SLZ.mjs';
 import './chunk-CEH6MNVV.mjs';

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{INTERNAL_DEFAULT_PROJECT_ANNOTATIONS:()=>INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations});module.exports=__toCommonJS(index_exports);globalThis.STORYBOOK_ENV="svelte";var import_PreviewRender2=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createSvelte5Props2=require("@storybook/svelte/internal/createSvelte5Props"),import_preview_api3=require("storybook/preview-api");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var import_core_events=require("storybook/internal/core-events"),import_PreviewRender=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createSvelte5Props=require("@storybook/svelte/internal/createSvelte5Props"),import_preview_api=require("storybook/preview-api"),svelte=__toESM(require("svelte"));var import_compiler=require("svelte/compiler"),IS_SVELTE_V4=Number(import_compiler.VERSION[0])<=4;function renderToCanvas(renderContext,canvasElement){return IS_SVELTE_V4?renderToCanvasV4(renderContext,canvasElement):renderToCanvasV5(renderContext,canvasElement)}var storyIdsToRemountFromResetArgsEvent=new Set;import_preview_api.addons.getChannel().on(import_core_events.RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId)});var componentsByDomElementV4=new Map;function renderToCanvasV4({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){componentsByDomElementV4.has(canvasElementToUnmount)&&(componentsByDomElementV4.get(canvasElementToUnmount).$destroy(),componentsByDomElementV4.delete(canvasElementToUnmount),canvasElementToUnmount.innerHTML="")}let existingComponent=componentsByDomElementV4.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let mountedComponent=new import_PreviewRender.default({target:canvasElement,props:{storyFn,storyContext,name,title,showError}});componentsByDomElementV4.set(canvasElement,mountedComponent)}else existingComponent.$set({storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var componentsByDomElementV5=new Map;function renderToCanvasV5({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElementV5.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElementV5.delete(canvasElementToUnmount))}let existingComponent=componentsByDomElementV5.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=(0,import_createSvelte5Props.createSvelte5Props)({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(import_PreviewRender.default,{target:canvasElement,props});componentsByDomElementV5.set(canvasElement,{mountedComponent,props})}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return{Component,props:args}};var import_SlotDecorator=__toESM(require("@storybook/svelte/internal/SlotDecorator.svelte")),import_preview_api2=require("storybook/preview-api");function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return!story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:import_SlotDecorator.default,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api2.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte"};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api3.setDefaultProjectAnnotations)(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS),(0,import_preview_api3.setProjectAnnotations)(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyFn,storyContext:{testingLibraryRender:render2}}=renderContext,{Component,props}=storyFn(),{unmount:unmount2}=render2(Component,{props,target:canvasElement});return unmount2}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=(0,import_preview_api3.composeStory)(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,exportsName),props={storyFn:composedStory,storyContext:{...composedStory},name:composedStory.storyName,title:composedStory.id,showError:()=>{}};IS_SVELTE_V4||(props=(0,import_createSvelte5Props2.createSvelte5Props)(props));let renderable={Component:import_PreviewRender2.default,props};return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api3.composeStories)(csfExports,projectAnnotations,composeStory)}typeof module<"u"&&module?.hot?.decline();0&&(module.exports={INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,composeStories,composeStory,setProjectAnnotations});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{INTERNAL_DEFAULT_PROJECT_ANNOTATIONS:()=>INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations});module.exports=__toCommonJS(index_exports);globalThis.STORYBOOK_ENV="svelte";var import_PreviewRender2=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createReactiveProps2=require("@storybook/svelte/internal/createReactiveProps"),import_preview_api3=require("storybook/preview-api");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var import_core_events=require("storybook/internal/core-events"),import_PreviewRender=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createReactiveProps=require("@storybook/svelte/internal/createReactiveProps"),import_preview_api=require("storybook/preview-api"),svelte=__toESM(require("svelte")),storyIdsToRemountFromResetArgsEvent=new Set;import_preview_api.addons.getChannel().on(import_core_events.RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId)});var componentsByDomElement=new Map;function renderToCanvas({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElement.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElement.delete(canvasElementToUnmount))}let existingComponent=componentsByDomElement.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=(0,import_createReactiveProps.createReactiveProps)({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(import_PreviewRender.default,{target:canvasElement,props});componentsByDomElement.set(canvasElement,{mountedComponent,props})}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return{Component,props:args}};var import_DecoratorHandler=__toESM(require("@storybook/svelte/internal/DecoratorHandler.svelte")),import_preview_api2=require("storybook/preview-api");function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return!story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:import_DecoratorHandler.default,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api2.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte"};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api3.setDefaultProjectAnnotations)(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS),(0,import_preview_api3.setProjectAnnotations)(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyFn,storyContext:{testingLibraryRender:render2}}=renderContext,{Component,props}=storyFn(),{unmount:unmount2}=render2(Component,{props,target:canvasElement});return unmount2}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=(0,import_preview_api3.composeStory)(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,exportsName),props=(0,import_createReactiveProps2.createReactiveProps)({storyFn:composedStory,storyContext:{...composedStory},name:composedStory.storyName,title:composedStory.id,showError:()=>{}}),renderable={Component:import_PreviewRender2.default,props};return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api3.composeStories)(csfExports,projectAnnotations,composeStory)}0&&(module.exports={INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,composeStories,composeStory,setProjectAnnotations});

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { entry_preview_exports, renderToCanvas, IS_SVELTE_V4 } from './chunk-XMMNDRKT.mjs';
+import { entry_preview_exports, renderToCanvas } from './chunk-2IXN2SLZ.mjs';
 import './chunk-CEH6MNVV.mjs';
 import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
-import { createSvelte5Props } from '@storybook/svelte/internal/createSvelte5Props';
+import { createReactiveProps } from '@storybook/svelte/internal/createReactiveProps';
 import { setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from 'storybook/preview-api';
 
-globalThis.STORYBOOK_ENV="svelte";function setProjectAnnotations(projectAnnotations){return setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS),setProjectAnnotations$1(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyFn,storyContext:{testingLibraryRender:render}}=renderContext,{Component,props}=storyFn(),{unmount}=render(Component,{props,target:canvasElement});return unmount}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=composeStory$1(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,exportsName),props={storyFn:composedStory,storyContext:{...composedStory},name:composedStory.storyName,title:composedStory.id,showError:()=>{}};IS_SVELTE_V4||(props=createSvelte5Props(props));let renderable={Component:PreviewRender,props};return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}typeof module<"u"&&module?.hot?.decline();
+globalThis.STORYBOOK_ENV="svelte";function setProjectAnnotations(projectAnnotations){return setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS),setProjectAnnotations$1(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyFn,storyContext:{testingLibraryRender:render}}=renderContext,{Component,props}=storyFn(),{unmount}=render(Component,{props,target:canvasElement});return unmount}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=composeStory$1(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,exportsName),props=createReactiveProps({storyFn:composedStory,storyContext:{...composedStory},name:composedStory.storyName,title:composedStory.id,showError:()=>{}}),renderable={Component:PreviewRender,props};return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}
 
 export { INTERNAL_DEFAULT_PROJECT_ANNOTATIONS, composeStories, composeStory, setProjectAnnotations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-beta.0",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
@@ -35,9 +35,9 @@
     "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json",
     "./internal/PreviewRender.svelte": "./dist/components/PreviewRender.svelte",
-    "./internal/SlotDecorator.svelte": "./dist/components/SlotDecorator.svelte",
+    "./internal/DecoratorHandler.svelte": "./dist/components/DecoratorHandler.svelte",
     "./internal/AddStorybookIdDecorator.svelte": "./dist/components/AddStorybookIdDecorator.svelte",
-    "./internal/createSvelte5Props": "./dist/createSvelte5Props.svelte.js"
+    "./internal/createReactiveProps": "./dist/createReactiveProps.svelte.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -55,7 +55,6 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.12",
     "@storybook/global": "^5.0.0",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.0.0",
@@ -65,17 +64,17 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/svelte": "^5.2.4",
     "expect-type": "^1.1.0",
-    "svelte": "^5.19.2",
+    "svelte": "^5.20.5",
     "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
-    "vite": "^6.0.11"
+    "vite": "^6.2.5"
   },
   "peerDependencies": {
-    "storybook": "^9.0.0-alpha.8",
-    "svelte": "^4.0.0 || ^5.0.0"
+    "storybook": "^9.0.0-beta.0",
+    "svelte": "^5.0.0"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/{svelte-5-ts-4-9 → js}/Button.stories.svelte

@@ -16,7 +16,7 @@
       },
     },
     args: {
-      onClick: fn(),
+      onclick: fn(),
     }
   });
 </script>

package/template/cli/js/Button.svelte

@@ -2,35 +2,26 @@
   import './button.css';
 
   /**
-   * Is this the principal call to action on the page?
+   * @typedef {Object} Props
+   * @property {boolean} [primary] Is this the principal call to action on the page?
+   * @property {string} [backgroundColor] What background color to use
+   * @property {'small' | 'medium' | 'large'} [size] How large should the button be?
+   * @property {string} label Button contents
+   * @property {() => void} [onclick] The onclick event handler
    */
-  export let primary = false;
 
-  /**
-   * @type {string} What background color to use
-   */
-  export let backgroundColor = undefined;
-
-  /**
-   * @type {'small' | 'medium' | 'large'} How large should the button be?
-   */
-  export let size = 'medium';
-
-  /**
-   * @type {string} Button contents
-   */
-  export let label;
-
-  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  /** @type {Props} */
+  const { primary = false, backgroundColor, size = 'medium', label, ...props } = $props();
 
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
+  let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
 </script>
 
 <button
   type="button"
   class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
   {style}
-  on:click
+  {...props}
 >
   {label}
 </button>

package/template/cli/js/Header.svelte

@@ -2,21 +2,16 @@
   import './header.css';
   import Button from './Button.svelte';
 
-  import { createEventDispatcher } from 'svelte';
+  /**
+   * @typedef {Object} Props
+   * @property {{name: string}} [user] The user object
+   * @property {() => void} [onLogin] The login event handler
+   * @property {() => void} [onLogout] The logout event handler
+   * @property {() => void} [onCreateAccount] The account creation event handler
+   */
 
-  export let user = null;
-
-  const dispatch = createEventDispatcher();
-
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
+  /** @type {Props} */
+  const { user, onLogin, onLogout, onCreateAccount } = $props();
 </script>
 
 <header>
@@ -42,10 +37,10 @@
         <span class="welcome">
           Welcome, <b>{user.name}</b>!
         </span>
-        <Button size="small" on:click={onLogout} label="Log out" />
+        <Button size="small" onclick={onLogout} label="Log out" />
       {:else}
-        <Button size="small" on:click={onLogin} label="Log in" />
-        <Button primary size="small" on:click={onCreateAccount} label="Sign up" />
+        <Button size="small" onclick={onLogin} label="Log in" />
+        <Button primary size="small" onclick={onCreateAccount} label="Sign up" />
       {/if}
     </div>
   </div>

package/template/cli/js/Page.svelte

@@ -2,15 +2,15 @@
   import './page.css';
   import Header from './Header.svelte';
 
-  let user = null;
+  let user = $state(null);
 </script>
 
 <article>
   <Header
     {user}
-    on:login={() => (user = { name: 'Jane Doe' })}
-    on:logout={() => (user = null)}
-    on:createAccount={() => (user = { name: 'Jane Doe' })}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = null)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
   />
 
   <section class="storybook-page">

package/template/cli/{svelte-5-js → ts}/Button.stories.svelte

@@ -16,7 +16,7 @@
       },
     },
     args: {
-      onClick: fn(),
+      onclick: fn(),
     }
   });
 </script>

package/template/cli/{svelte-5-ts-3-8 → ts}/Button.svelte

@@ -11,19 +11,20 @@
     /** Button contents */
     label: string;
     /** The onclick event handler */
-    onClick?: () => void;
+    onclick?: () => void;
   }
+
+  const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
   
-  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
+  let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
 </script>
 
 <button
   type="button"
-  class={['storybook-button', `storybook-button--${size}`].join(' ')}
-  class:storybook-button--primary={primary}
-  class:storybook-button--secondary={!primary}
-  style:background-color={backgroundColor}
-  onclick={onClick}
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  {...props}
 >
   {label}
 </button>

package/template/cli/{svelte-5-ts-4-9 → ts}/Header.svelte

@@ -35,10 +35,10 @@
         <span class="welcome">
           Welcome, <b>{user.name}</b>!
         </span>
-        <Button size="small" onClick={onLogout} label="Log out" />
+        <Button size="small" onclick={onLogout} label="Log out" />
       {:else}
-        <Button size="small" onClick={onLogin} label="Log in" />
-        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+        <Button size="small" onclick={onLogin} label="Log in" />
+        <Button primary size="small" onclick={onCreateAccount} label="Sign up" />
       {/if}
     </div>
   </div>

package/template/stories/args.stories.js

@@ -7,14 +7,14 @@ import {
 import { addons } from 'storybook/preview-api';
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import ButtonView from './views/ButtonJavaScript.svelte';
+import Button from './Button.svelte';
 
 export default {
-  component: ButtonView,
+  component: Button,
   tags: ['!vitest'],
 };
 
-export const RemountOnResetStoryArgs = {
+export const UpdatingArgs = {
   play: async ({ canvasElement, id, step }) => {
     const canvas = await within(canvasElement);
     const channel = addons.getChannel();
@@ -25,14 +25,16 @@ export const RemountOnResetStoryArgs = {
       await new Promise((resolve) => {
         channel.once(STORY_RENDERED, resolve);
       });
+      await expect(await canvas.getByRole('button')).toHaveTextContent('You clicked: 0');
     });
-    const button = await canvas.getByRole('button');
-    await expect(button).toHaveTextContent('You clicked: 0');
 
-    await userEvent.click(button);
+    const button = await canvas.getByRole('button');
+    await step('Change state', async () => {
+      await userEvent.click(button);
 
-    await waitFor(async () => {
-      await expect(button).toHaveTextContent('You clicked: 1');
+      await waitFor(async () => {
+        await expect(button).toHaveTextContent('You clicked: 1');
+      });
     });
 
     await step("Update story args with { text: 'Changed' }", async () => {
@@ -40,15 +42,24 @@ export const RemountOnResetStoryArgs = {
       await new Promise((resolve) => {
         channel.once(STORY_RENDERED, resolve);
       });
+      await expect(button).toHaveTextContent('Changed: 1');
     });
-    await expect(button).toHaveTextContent('Changed: 1');
+  },
+};
+
+export const RemountOnResetStoryArgs = {
+  play: async (playContext) => {
+    const { canvas, id, step } = playContext;
+    await UpdatingArgs.play(playContext);
+
+    const channel = addons.getChannel();
 
     // expect that all state and args are reset after RESET_STORY_ARGS because Svelte needs to remount the component
     // most other renderers would have 'You clicked: 1' here because they don't remount the component
     // if this doesn't fully remount it would be 'undefined: 1' because undefined args are used as is in Svelte, and the state is kept
     await step('Reset story args', () => channel.emit(RESET_STORY_ARGS, { storyId: id }));
     await waitFor(async () =>
-      expect(await within(canvasElement).getByRole('button')).toHaveTextContent('You clicked: 0')
+      expect(await canvas.getByRole('button')).toHaveTextContent('You clicked: 0')
     );
   },
 };

package/template/stories/{slot-decorators.stories.js → decorators.stories.js}

@@ -1,14 +1,13 @@
-import BorderDecoratorBlue from './views/BorderDecoratorBlue.svelte';
-import BorderDecoratorProps from './views/BorderDecoratorProps.svelte';
-import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
-import ButtonView from './views/ButtonJavaScript.svelte';
+import { expect, fn } from 'storybook/test';
+
+import BorderDecoratorBlue from './BorderDecoratorBlue.svelte';
+import BorderDecoratorProps from './BorderDecoratorProps.svelte';
+import BorderDecoratorRed from './BorderDecoratorRed.svelte';
+import Button from './Button.svelte';
 
 export default {
-  component: ButtonView,
+  component: Button,
   decorators: [() => BorderDecoratorRed],
-  args: {
-    primary: true,
-  },
   tags: ['autodocs'],
 };
 
@@ -41,3 +40,17 @@ export const WithArgsBasedBorder = {
   ...WithArgsBasedBorderUnset,
   args: { color: 'lightblue' },
 };
+
+const decoratorCalled = fn();
+
+export const DecoratorsRunOnce = {
+  decorators: [
+    (Story) => {
+      decoratorCalled();
+      return Story();
+    },
+  ],
+  play: async () => {
+    expect(decoratorCalled).toHaveBeenCalledTimes(1);
+  },
+};

package/dist/chunk-XMMNDRKT.mjs

@@ -1,12 +0,0 @@
-import { __export } from './chunk-CEH6MNVV.mjs';
-import { RESET_STORY_ARGS } from 'storybook/internal/core-events';
-import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
-import { createSvelte5Props } from '@storybook/svelte/internal/createSvelte5Props';
-import { addons, sanitizeStoryContextUpdate } from 'storybook/preview-api';
-import * as svelte from 'svelte';
-import { VERSION } from 'svelte/compiler';
-import SlotDecorator from '@storybook/svelte/internal/SlotDecorator.svelte';
-
-var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var IS_SVELTE_V4=Number(VERSION[0])<=4;function renderToCanvas(renderContext,canvasElement){return IS_SVELTE_V4?renderToCanvasV4(renderContext,canvasElement):renderToCanvasV5(renderContext,canvasElement)}var storyIdsToRemountFromResetArgsEvent=new Set;addons.getChannel().on(RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId);});var componentsByDomElementV4=new Map;function renderToCanvasV4({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){componentsByDomElementV4.has(canvasElementToUnmount)&&(componentsByDomElementV4.get(canvasElementToUnmount).$destroy(),componentsByDomElementV4.delete(canvasElementToUnmount),canvasElementToUnmount.innerHTML="");}let existingComponent=componentsByDomElementV4.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let mountedComponent=new PreviewRender({target:canvasElement,props:{storyFn,storyContext,name,title,showError}});componentsByDomElementV4.set(canvasElement,mountedComponent);}else existingComponent.$set({storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement);}}var componentsByDomElementV5=new Map;function renderToCanvasV5({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElementV5.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElementV5.delete(canvasElementToUnmount));}let existingComponent=componentsByDomElementV5.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=createSvelte5Props({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(PreviewRender,{target:canvasElement,props});componentsByDomElementV5.set(canvasElement,{mountedComponent,props});}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement);}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return {Component,props:args}};function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return !story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:SlotDecorator,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte"};
-
-export { IS_SVELTE_V4, decorateStory, entry_preview_exports, mount2 as mount, parameters, render, renderToCanvas };