@storybook/vue3 8.0.0-alpha.0 → 8.0.0-alpha.10

package/dist/{chunk-OTMFLEOE.mjs → chunk-VTQTCWGM.mjs}

@@ -1,5 +1,5 @@
 import { h, createApp, reactive, isVNode, isReactive } from 'vue';
 
-var render=(props,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 ()=>h(Component,props,getSlots(props,context))},setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn);},runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)));},map=new Map;async function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement);}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=createApp({setup(){storyContext.args=reactive(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:reactive(args)};return map.set(canvasElement,appState),()=>h(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement);}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&isVNode(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=isReactive(reactiveArgs)?reactiveArgs:reactive(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key];}),Object.assign(currentArgs,nextArgs);}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement);}
+var render=(props,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 ()=>h(Component,props,getSlots(props,context))},setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn);},runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)));},map=new Map;async function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement);}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=createApp({setup(){storyContext.args=reactive(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:reactive(args)};return map.set(canvasElement,appState),()=>h(rootElement)}});return vueApp.config.errorHandler=(e,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):showException(e);},await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement);}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&isVNode(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=isReactive(reactiveArgs)?reactiveArgs:reactive(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key];}),Object.assign(currentArgs,nextArgs);}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement);}
 
 export { render, renderToCanvas, setup };

package/dist/entry-preview-docs.js

@@ -1,5 +1,5 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools3=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),SECTIONS=["props","events","slots","methods"],extractArgTypes=component=>{if(!(0,import_docs_tools.hasDocgen)(component))return null;let results={};return SECTIONS.forEach(section=>{(0,import_docs_tools.extractComponentProps)(component,section).forEach(({propDef,docgenInfo,jsDocTags})=>{let{name,type,description,defaultValue:defaultSummary,required}=propDef,sbType=section==="props"?(0,import_docs_tools.convert)(docgenInfo):{name:"void"};results[name]={name,description,type:{required,...sbType},table:{type,jsDocTags,defaultValue:defaultSummary,category:section}}})}),results};var import_preview_api=require("@storybook/preview-api"),import_docs_tools2=require("@storybook/docs-tools"),import_compiler_core=require("@vue/compiler-core"),import_vue=require("vue"),import_lodash=require("lodash");var omitEvent=args2=>args2?Object.fromEntries(Object.entries(args2).filter(([key,value])=>!key.startsWith("on"))):{},displayObject=obj=>obj&&typeof obj=="object"?`{${Object.keys(obj).map(key=>`${key}:${displayObject(obj[key])}`).join(",")}}`:typeof obj=="string"?`'${obj}'`:obj==null?void 0:obj.toString(),htmlEventAttributeToVueEventAttribute=key=>/^on[A-Za-z]/.test(key)?key.replace(/^on/,"v-on:").toLowerCase():key,directiveSource=(key,value)=>key.includes("on")?`${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`:`${key}="${value}"`,attributeSource=(key,value,dynamic)=>["boolean","number","object"].includes(typeof value)||dynamic&&["style","class"].includes(key)?`:${key}="${displayObject(value)}"`:directiveSource(key,value),evalExp=(argExpValue,args2)=>{let evalVal=argExpValue;return evalVal&&/v-bind="(\w+)"/.test(evalVal)?evalVal.replace(/"(\w+)"/g,`"${displayObject(args2)}"`):(Object.keys(args2).forEach(akey=>{let regexMatch=new RegExp(`(\\w+)\\.${akey}`,"g"),regexTarget=new RegExp(`(\\w+)\\.${akey}`,"g");regexMatch.test(evalVal)&&(evalVal=evalVal.replace(regexTarget,displayObject(args2[akey])))}),evalVal)},replaceValueWithRef=(source2,args2,ref)=>{let value=ref?args2[ref]:"args",bindValue=()=>{let argsRef=Object.fromEntries(Object.entries(args2).map(([key])=>[key,key]));return displayObject(argsRef).replace(/'/g,"")},regexMatch=new RegExp(`="${value}"`,"g");return source2.replace(regexMatch,`="${ref??bindValue()}"`)};function generateExpression(slot){let body=slot.toString().split("=>")[1].trim().replace("return","").trim();return body.startsWith("{")&&body.endsWith("}")&&(body=body.substring(1,body.length-1).trim()),`{{${body}}}`}var skipSourceRender=context=>{var _a;let sourceParams=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory,isDocsViewMode=(context==null?void 0:context.viewMode)==="docs";return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools2.SourceType.DYNAMIC?!1:!isDocsViewMode||!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools2.SourceType.CODE};function generateAttributesSource(tempArgs,args2,argTypes2,byRef2){return Object.keys(tempArgs).map(key=>{var _a;let source2=tempArgs[key].loc.source.replace(/\$props/g,"args"),argKey=(_a=tempArgs[key].arg)==null?void 0:_a.loc.source;return byRef2&&argKey?replaceValueWithRef(source2,args2,argKey):evalExp(source2,omitEvent(args2))}).join(" ")}function mapAttributesAndDirectives(props){let tranformKey=key=>key.startsWith("on")?key:(0,import_lodash.kebabCase)(key);return Object.keys(props).map(key=>({name:"bind",type:["v-","@","v-on"].includes(key)?7:6,arg:{content:tranformKey(key),loc:{source:tranformKey(key)}},loc:{source:attributeSource(tranformKey(key),props[key])},exp:{isStatic:!1,loc:{source:props[key]}},modifiers:[""]}))}function mapSlots(slotsArgs,generateComponentSource2,slots){return Object.keys(slotsArgs).map(key=>{var _a,_b;let slot=slotsArgs[key],slotContent="",scropedArgs=(_b=(_a=slots.find(s=>s.name===key&&s.scoped))==null?void 0:_a.bindings)==null?void 0:_b.map(b=>b.name).join(",");typeof slot=="string"?slotContent=slot:typeof slot=="function"?slotContent=generateExpression(slot):(0,import_vue.isVNode)(slot)?slotContent=generateComponentSource2(slot):typeof slot=="object"&&!(0,import_vue.isVNode)(slot)&&(slotContent=JSON.stringify(slot));let bindingsString=scropedArgs?`="{${scropedArgs}}"`:"";return slotContent=slot?`<template #${key}${bindingsString}>${slotContent}</template>`:"",{type:2,content:slotContent,loc:{source:slotContent,start:{offset:0,line:1,column:0},end:{offset:0,line:1,column:0}}}})}function generateScriptSetup(args2,argTypes2,components){let scriptLines=Object.keys(args2).map(key=>`const ${key} = ${typeof args2[key]=="function"?"()=>{}":`ref(${JSON.stringify(args2[key])});`}`);return scriptLines.unshift('import { ref } from "vue";'),`<script lang='ts' setup>${scriptLines.join(`
-`)}</script>`}function getTemplateComponents(renderFn,context){try{let originalStoryFn=renderFn,storyFn=originalStoryFn?originalStoryFn(context==null?void 0:context.args,context):context==null?void 0:context.component,story=typeof storyFn=="function"?storyFn():storyFn,{template}=story;return template?getComponents(template):[(0,import_vue.h)(story,context==null?void 0:context.args)]}catch(e){return console.log("error",e),[]}}function getComponents(template){let ast=(0,import_compiler_core.baseParse)(template),components=ast==null?void 0:ast.children;return components||[]}function generateTemplateSource(componentOrNodes,{args,argTypes},byRef=!1){let isElementNode=node=>node&&node.type===1,isInterpolationNode=node=>node&&node.type===5,isTextNode=node=>node&&node.type===2,generateComponentSource=componentOrNode=>{var _a,_b;if(isElementNode(componentOrNode)){let{tag:name,props:attributes,children}=componentOrNode,childSources=typeof children=="string"?children:children.map(child=>generateComponentSource(child)).join(""),props=generateAttributesSource(attributes,args,argTypes,byRef);return childSources===""?`<${name} ${props} />`:`<${name} ${props}>${childSources}</${name}>`}if(isTextNode(componentOrNode)){let{content:content2}=componentOrNode;return content2}if(isInterpolationNode(componentOrNode)){let{content}=componentOrNode,expValue=evalExp(content.loc.source,args);return expValue===content.loc.source?`{{${expValue}}}`:eval(expValue)}if((0,import_vue.isVNode)(componentOrNode)){let vnode=componentOrNode,{props,type,children}=vnode,slotsProps=typeof children=="string"?void 0:children,componentSlots=(_a=type==null?void 0:type.__docgenInfo)==null?void 0:_a.slots,attrsProps=slotsProps?Object.fromEntries(Object.entries(props??{}).filter(([key,value])=>!slotsProps[key]&&!["class","style"].includes(key)).map(([key,value])=>[key,value])):props,attributes=mapAttributesAndDirectives(attrsProps??{}),slotArgs=Object.fromEntries(Object.entries(props??{}).filter(([key,value])=>slotsProps==null?void 0:slotsProps[key])),childSources=children?typeof children=="string"?children:mapSlots(slotArgs,generateComponentSource,componentSlots??[]).map(child=>child.content).join(""):"",name=typeof type=="string"?type:type.name||type.__name||((_b=type.__docgenInfo)==null?void 0:_b.displayName),propsSource=generateAttributesSource(attributes,args,argTypes,byRef);return childSources.trim()===""?`<${name} ${propsSource}/>`:`<${name} ${propsSource}>${childSources}</${name}>`}return null},componentsOrNodes=Array.isArray(componentOrNodes)?componentOrNodes:[componentOrNodes],source=componentsOrNodes.map(componentOrNode2=>generateComponentSource(componentOrNode2)).join(" ");return source||null}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn();return(0,import_vue.watch)(()=>context.args,()=>{skip||generateSource(context)},{immediate:!0,deep:!0}),story};function generateSource(context){var _a,_b,_c;let channel=import_preview_api.addons.getChannel(),{args:args2={},argTypes:argTypes2={},id}=context||{},storyComponents=getTemplateComponents(context==null?void 0:context.originalStoryFn,context),withScript=((_c=(_b=(_a=context==null?void 0:context.parameters)==null?void 0:_a.docs)==null?void 0:_b.source)==null?void 0:_c.withScriptSetup)||!1,generatedScript=withScript?generateScriptSetup(args2,argTypes2,storyComponents):"",generatedTemplate=generateTemplateSource(storyComponents,context,withScript);if(generatedTemplate){let source2=`${generatedScript}
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools3=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),SECTIONS=["props","events","slots","methods"],extractArgTypes=component=>{if(!(0,import_docs_tools.hasDocgen)(component))return null;let results={};return SECTIONS.forEach(section=>{(0,import_docs_tools.extractComponentProps)(component,section).forEach(({propDef,docgenInfo,jsDocTags})=>{let{name,type,description,defaultValue:defaultSummary,required}=propDef,sbType=section==="props"?(0,import_docs_tools.convert)(docgenInfo):{name:"void"};results[name]={name,description,type:{required,...sbType},table:{type,jsDocTags,defaultValue:defaultSummary,category:section}}})}),results};var import_preview_api=require("@storybook/preview-api"),import_docs_tools2=require("@storybook/docs-tools"),import_compiler_core=require("@vue/compiler-core"),import_vue=require("vue"),import_lodash=require("lodash");var omitEvent=args2=>args2?Object.fromEntries(Object.entries(args2).filter(([key,value])=>!key.startsWith("on"))):{},displayObject=obj=>obj&&typeof obj=="object"?`{${Object.keys(obj).map(key=>`${key}:${displayObject(obj[key])}`).join(",")}}`:typeof obj=="string"?`'${obj}'`:obj?.toString(),htmlEventAttributeToVueEventAttribute=key=>/^on[A-Za-z]/.test(key)?key.replace(/^on/,"v-on:").toLowerCase():key,directiveSource=(key,value)=>key.includes("on")?`${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`:`${key}="${value}"`,attributeSource=(key,value,dynamic)=>["boolean","number","object"].includes(typeof value)||dynamic&&["style","class"].includes(key)?`:${key}="${displayObject(value)}"`:directiveSource(key,value),evalExp=(argExpValue,args2)=>{let evalVal=argExpValue;return evalVal&&/v-bind="(\w+)"/.test(evalVal)?evalVal.replace(/"(\w+)"/g,`"${displayObject(args2)}"`):(Object.keys(args2).forEach(akey=>{let regexMatch=new RegExp(`(\\w+)\\.${akey}`,"g"),regexTarget=new RegExp(`(\\w+)\\.${akey}`,"g");regexMatch.test(evalVal)&&(evalVal=evalVal.replace(regexTarget,displayObject(args2[akey])))}),evalVal)},replaceValueWithRef=(source2,args2,ref)=>{let value=ref?args2[ref]:"args",bindValue=()=>{let argsRef=Object.fromEntries(Object.entries(args2).map(([key])=>[key,key]));return displayObject(argsRef).replace(/'/g,"")},regexMatch=new RegExp(`="${value}"`,"g");return source2.replace(regexMatch,`="${ref??bindValue()}"`)};function generateExpression(slot){let body=slot.toString().split("=>")[1].trim().replace("return","").trim();return body.startsWith("{")&&body.endsWith("}")&&(body=body.substring(1,body.length-1).trim()),`{{${body}}}`}var skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory,isDocsViewMode=context?.viewMode==="docs";return sourceParams?.type===import_docs_tools2.SourceType.DYNAMIC?!1:!isDocsViewMode||!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools2.SourceType.CODE};function generateAttributesSource(tempArgs,args2,argTypes2,byRef2){return Object.keys(tempArgs).map(key=>{let source2=tempArgs[key].loc.source.replace(/\$props/g,"args"),argKey=tempArgs[key].arg?.loc.source;return byRef2&&argKey?replaceValueWithRef(source2,args2,argKey):evalExp(source2,omitEvent(args2))}).join(" ")}function mapAttributesAndDirectives(props){let tranformKey=key=>key.startsWith("on")?key:(0,import_lodash.kebabCase)(key);return Object.keys(props).map(key=>({name:"bind",type:["v-","@","v-on"].includes(key)?7:6,arg:{content:tranformKey(key),loc:{source:tranformKey(key)}},loc:{source:attributeSource(tranformKey(key),props[key])},exp:{isStatic:!1,loc:{source:props[key]}},modifiers:[""]}))}function mapSlots(slotsArgs,generateComponentSource2,slots){return Object.keys(slotsArgs).map(key=>{let slot=slotsArgs[key],slotContent="",scropedArgs=slots.find(s=>s.name===key&&s.scoped)?.bindings?.map(b=>b.name).join(",");typeof slot=="string"?slotContent=slot:typeof slot=="function"?slotContent=generateExpression(slot):(0,import_vue.isVNode)(slot)?slotContent=generateComponentSource2(slot):typeof slot=="object"&&!(0,import_vue.isVNode)(slot)&&(slotContent=JSON.stringify(slot));let bindingsString=scropedArgs?`="{${scropedArgs}}"`:"";return slotContent=slot?`<template #${key}${bindingsString}>${slotContent}</template>`:"",{type:2,content:slotContent,loc:{source:slotContent,start:{offset:0,line:1,column:0},end:{offset:0,line:1,column:0}}}})}function generateScriptSetup(args2,argTypes2,components){let scriptLines=Object.keys(args2).map(key=>`const ${key} = ${typeof args2[key]=="function"?"()=>{}":`ref(${JSON.stringify(args2[key])});`}`);return scriptLines.unshift('import { ref } from "vue";'),`<script lang='ts' setup>${scriptLines.join(`
+`)}</script>`}function getTemplateComponents(renderFn,context){try{let originalStoryFn=renderFn,storyFn=originalStoryFn?originalStoryFn(context?.args,context):context?.component,story=typeof storyFn=="function"?storyFn():storyFn,{template}=story;return template?getComponents(template):[(0,import_vue.h)(story,context?.args)]}catch(e){return console.log("error",e),[]}}function getComponents(template){let components=(0,import_compiler_core.baseParse)(template)?.children;return components||[]}function generateTemplateSource(componentOrNodes,{args,argTypes},byRef=!1){let isElementNode=node=>node&&node.type===1,isInterpolationNode=node=>node&&node.type===5,isTextNode=node=>node&&node.type===2,generateComponentSource=componentOrNode=>{if(isElementNode(componentOrNode)){let{tag:name,props:attributes,children}=componentOrNode,childSources=typeof children=="string"?children:children.map(child=>generateComponentSource(child)).join(""),props=generateAttributesSource(attributes,args,argTypes,byRef);return childSources===""?`<${name} ${props} />`:`<${name} ${props}>${childSources}</${name}>`}if(isTextNode(componentOrNode)){let{content:content2}=componentOrNode;return content2}if(isInterpolationNode(componentOrNode)){let{content}=componentOrNode,expValue=evalExp(content.loc.source,args);return expValue===content.loc.source?`{{${expValue}}}`:eval(expValue)}if((0,import_vue.isVNode)(componentOrNode)){let vnode=componentOrNode,{props,type,children}=vnode,slotsProps=typeof children=="string"?void 0:children,componentSlots=type?.__docgenInfo?.slots,attrsProps=slotsProps?Object.fromEntries(Object.entries(props??{}).filter(([key,value])=>!slotsProps[key]&&!["class","style"].includes(key)).map(([key,value])=>[key,value])):props,attributes=mapAttributesAndDirectives(attrsProps??{}),slotArgs=Object.fromEntries(Object.entries(props??{}).filter(([key,value])=>slotsProps?.[key])),childSources=children?typeof children=="string"?children:mapSlots(slotArgs,generateComponentSource,componentSlots??[]).map(child=>child.content).join(""):"",name=typeof type=="string"?type:type.name||type.__name||type.__docgenInfo?.displayName,propsSource=generateAttributesSource(attributes,args,argTypes,byRef);return childSources.trim()===""?`<${name} ${propsSource}/>`:`<${name} ${propsSource}>${childSources}</${name}>`}return null},componentsOrNodes=Array.isArray(componentOrNodes)?componentOrNodes:[componentOrNodes],source=componentsOrNodes.map(componentOrNode2=>generateComponentSource(componentOrNode2)).join(" ");return source||null}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn();return(0,import_vue.watch)(()=>context.args,()=>{skip||generateSource(context)},{immediate:!0,deep:!0}),story};function generateSource(context){let channel=import_preview_api.addons.getChannel(),{args:args2={},argTypes:argTypes2={},id}=context||{},storyComponents=getTemplateComponents(context?.originalStoryFn,context),withScript=context?.parameters?.docs?.source?.withScriptSetup||!1,generatedScript=withScript?generateScriptSetup(args2,argTypes2,storyComponents):"",generatedTemplate=generateTemplateSource(storyComponents,context,withScript);if(generatedTemplate){let source2=`${generatedScript}
  <template>
  ${generatedTemplate} 
 </template>`;return channel.emit(import_docs_tools2.SNIPPET_RENDERED,{id,args:args2,source:source2,format:"vue"}),source2}return null}var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription:import_docs_tools3.extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[import_docs_tools3.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});

package/dist/entry-preview.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_vue=require("vue"),render=(props,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()=>(0,import_vue.h)(Component,props,getSlots(props,context))};var runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)))},map=new Map;async function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>{var _a,_b;return((_b=(_a=argTypes[key])==null?void 0:_a.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.reactive)(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp==null||storybookApp.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var import_vue2=require("vue"),import_preview_api=require("@storybook/preview-api");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue2.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue2.h)(story))},context=>prepare(storyFn(context)))}var parameters={renderer:"vue3"};0&&(module.exports={applyDecorators,parameters,render,renderToCanvas});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_vue=require("vue"),render=(props,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()=>(0,import_vue.h)(Component,props,getSlots(props,context))};var runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)))},map=new Map;async function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.h)(rootElement)}});return vueApp.config.errorHandler=(e,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):showException(e)},await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.reactive)(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var import_vue2=require("vue"),import_preview_api=require("@storybook/preview-api");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue2.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue2.h)(story))},context=>prepare(storyFn(context)))}var parameters={renderer:"vue3"};0&&(module.exports={applyDecorators,parameters,render,renderToCanvas});

package/dist/entry-preview.mjs

@@ -1,4 +1,4 @@
-export { render, renderToCanvas } from './chunk-OTMFLEOE.mjs';
+export { render, renderToCanvas } from './chunk-VTQTCWGM.mjs';
 import { h } from 'vue';
 import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
 

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-export { s as setup } from './render-18d12fa7.js';
 import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
 import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
 import { FunctionalComponent, VNodeChild } from 'vue';
 import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
 import { V as VueRenderer } from './types-ad933ac1.js';
+export { s as setup } from './render-18d12fa7.js';
 
 /**
  * Metadata to configure the stories for a component.
@@ -19,7 +19,7 @@ type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsO
  */
 type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
 /**
- * Story function that represents a CSFv3 component example.
+ * Story object that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
@@ -34,19 +34,9 @@ type AllowNonFunctionSlots<Slots> = {
 };
 type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
 type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs extends FunctionalComponent<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs;
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-type Story<TArgs = Args> = StoryFn<TArgs>;
 type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
 type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
 type Preview = ProjectAnnotations<VueRenderer>;
 
-export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer };
+export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, VueRenderer };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{setup:()=>setup});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var import_vue=require("vue");var setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)};var _a;try{(_a=module==null?void 0:module.hot)!=null&&_a.decline&&module.hot.decline()}catch{}0&&(module.exports={setup});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{setup:()=>setup});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var import_vue=require("vue");var setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)};try{module?.hot?.decline&&module.hot.decline()}catch{}0&&(module.exports={setup});

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { setup } from './chunk-OTMFLEOE.mjs';
+export { setup } from './chunk-VTQTCWGM.mjs';
 import { global } from '@storybook/global';
 
 var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;try{module?.hot?.decline&&module.hot.decline();}catch{}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.10",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -47,10 +47,11 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/docs-tools": "8.0.0-alpha.0",
+    "@storybook/docs-tools": "8.0.0-alpha.10",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "8.0.0-alpha.0",
-    "@storybook/types": "8.0.0-alpha.0",
+    "@storybook/preview-api": "8.0.0-alpha.10",
+    "@storybook/types": "8.0.0-alpha.10",
+    "@vue/compiler-core": "^3.0.0",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19",
@@ -58,20 +59,17 @@
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
-    "@types/prettier": "2.7.2",
-    "@vue/compiler-core": "^3.3.4",
-    "@vue/vue3-jest": "29",
-    "babel-jest": "^29.7.0",
+    "@types/prettier": "^3.0.0",
+    "@vitejs/plugin-vue": "^4.4.0",
     "typescript": "^5.3.2",
     "vue": "^3.2.47",
     "vue-tsc": "latest"
   },
   "peerDependencies": {
-    "@vue/compiler-core": "^3.0.0",
     "vue": "^3.0.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/js/Button.stories.js

@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import MyButton from './Button.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -6,17 +7,11 @@ export default {
   component: MyButton,
   tags: ['autodocs'],
   argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-    onClick: {},
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium', 'large'],
-    },
+    size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] },
+    backgroundColor: { control: 'color' },
   },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args

package/template/cli/ts-3-8/Button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-
+import { fn } from '@storybook/test';
 import Button from './Button.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -11,9 +11,12 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
     backgroundColor: { control: 'color' },
-    onClick: { action: 'clicked' },
   },
-  args: { primary: false }, // default value
+  args: {
+    primary: false,
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    onClick: fn(),
+  },
 };
 
 export default meta;

package/template/cli/ts-4-9/Button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-
+import { fn } from '@storybook/test';
 import Button from './Button.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -11,9 +11,12 @@ const meta = {
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
     backgroundColor: { control: 'color' },
-    onClick: { action: 'clicked' },
   },
-  args: { primary: false }, // default value
+  args: {
+    primary: false,
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    onClick: fn(),
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/jest.config.js

@@ -1,11 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../jest.config.browser');
-
-module.exports = {
-  ...baseConfig,
-  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
-  transform: {
-    ...baseConfig.transform,
-    '^.+\\.vue$': '@vue/vue3-jest',
-  },
-};