@storybook/vue3 7.2.0-canary-22285-1690367272-d07bfc52.0 → 7.2.0

package/dist/{chunk-CKUIH7TX.mjs → chunk-SRVBJOBI.mjs}

@@ -1,6 +1,6 @@
 import { h, createApp, reactive, isVNode, isReactive } from 'vue';
 import { sanitizeStoryContextUpdate } from '@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 h(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=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,()=>h(story))},context=>prepare(storyFn(context)))}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,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn);},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext));},map=new Map;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),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement);}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>{let slotValue=context.args[key];return [key,typeof slotValue=="function"?slotValue:()=>slotValue]});return reactive(Object.fromEntries(slots))}function getArgs(element,storyContext){return (element&&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);}
+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 h(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=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,()=>h(story))},context=>prepare(storyFn(context)))}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,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn);},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext));},map=new Map;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),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement);}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>{let slotValue=context.args[key];return [key,typeof slotValue=="function"?slotValue:()=>slotValue]});return reactive(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 { decorateStory, render, renderToCanvas, setup };

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 import { Addon_DecoratorFunction, ArgTypesEnhancer, LegacyStoryFn, DecoratorFunction } from '@storybook/types';
-import { V as VueRenderer } from './render-210e2c92.js';
-export { r as render, a as renderToCanvas } from './render-210e2c92.js';
+import { V as VueRenderer } from './render-32b7dd3f.js';
+export { r as render, a as renderToCanvas } from './render-32b7dd3f.js';
 import 'vue';
 
 declare const decorators: Addon_DecoratorFunction<unknown>[];

package/dist/config.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 config_exports={};__export(config_exports,{applyDecorators:()=>decorateStory,argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(config_exports);var import_docs_tools3=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),ARG_TYPE_SECTIONS=["props","events","slots","exposed"],extractArgTypes=component=>{if(!(0,import_docs_tools.hasDocgen)(component))return null;let argTypes2={};return ARG_TYPE_SECTIONS.forEach(section=>{(0,import_docs_tools.extractComponentProps)(component,section).forEach(({docgenInfo,propDef})=>{let{name,description,type,default:defaultSummary,required,tags=[],global}=docgenInfo;if(argTypes2[name]||global)return;let sbType=section==="props"?convert(docgenInfo):{name:type==null?void 0:type.toString()},definedTypes=`${(type?type.name||type.toString():" ").replace(" | undefined","")}`,descriptions=`${tags.length?`${tags.map(tag=>`@${tag.name}: ${tag.text}`).join("<br>")}<br><br>`:""}${description}`;argTypes2[name]={name,description:descriptions.replace("undefined",""),defaultValue:{summary:defaultSummary},type:{required,...sbType},table:{type:{summary:definedTypes},jsDocTags:tags,defaultValue:{summary:defaultSummary},category:section},control:{disable:!["props","slots"].includes(section)}}})}),argTypes2},convert=({schema:schemaType})=>{if(typeof schemaType=="object"&&schemaType.kind==="enum"&&Array.isArray(schemaType.schema)){let values=schemaType.schema.filter(item=>item!=="undefined"&&(item!==null&&typeof item=="object"&&item.kind!=="array"||typeof item=="string")).map(item=>typeof item!="string"?item.schema.toString():item).map(item=>item.replace(/'/g,'"'))||[],isSingle=values.length===1,isBoolean=values.length===2&&values.every(item=>item==="true"||item==="false"),isLateralUnion=values.length>1&&values.every(item=>item.startsWith('"')&&item.endsWith('"')),isEnum=values.length>1&&values.every(item=>!item.startsWith('"')&&typeof item=="string"&&item.includes(".")),sbType={name:"enum",value:values.map(item=>item.replace(/"/g,""))};return isSingle?{name:values[0]}:isBoolean?{...sbType,name:"boolean"}:isLateralUnion||isEnum?{...sbType,name:"enum"}:{name:values.length?values[0]:"array"}}if(typeof schemaType=="object"&&schemaType.kind==="object"&&typeof schemaType.schema=="object"){let schemaObject=schemaType.schema;return{name:"object",value:Object.fromEntries(Object.entries(schemaObject).map(([key,value])=>[key,value]))}}return{name:schemaType}};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=="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{return[]}}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 config_exports={};__export(config_exports,{applyDecorators:()=>decorateStory,argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(config_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=="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(""):"";console.log(" vnode ",vnode," childSources ",childSources," attributes ",attributes);let 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}
  <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];var import_vue2=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_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set;var runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args2=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args2),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args2=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args2)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes:argTypes2}=context,slots=Object.entries(argTypes2).filter(([key,value])=>{var _a,_b;return((_b=(_a=argTypes2[key])==null?void 0:_a.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return(element&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args)??{}}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.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_vue3=require("vue"),import_preview_api2=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_vue3.h)(story)}}}function decorateStory(storyFn,decorators2){return decorators2.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api2.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_vue3.h)(story))},context=>prepare(storyFn(context)))}var parameters2={renderer:"vue3",...parameters};0&&(module.exports={applyDecorators,argTypesEnhancers,decorators,parameters,render,renderToCanvas});
+</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];var import_vue2=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_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set;var runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args2=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args2),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args2=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args2)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes:argTypes2}=context,slots=Object.entries(argTypes2).filter(([key,value])=>{var _a,_b;return((_b=(_a=argTypes2[key])==null?void 0:_a.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.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_vue3=require("vue"),import_preview_api2=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_vue3.h)(story)}}}function decorateStory(storyFn,decorators2){return decorators2.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api2.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_vue3.h)(story))},context=>prepare(storyFn(context)))}var parameters2={renderer:"vue3",...parameters};0&&(module.exports={applyDecorators,argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -1,12 +1,12 @@
-export { decorateStory as applyDecorators, render, renderToCanvas } from './chunk-CKUIH7TX.mjs';
-import { enhanceArgTypes, SNIPPET_RENDERED, extractComponentDescription, hasDocgen, extractComponentProps, SourceType } from '@storybook/docs-tools';
+export { decorateStory as applyDecorators, render, renderToCanvas } from './chunk-SRVBJOBI.mjs';
+import { enhanceArgTypes, SNIPPET_RENDERED, extractComponentDescription, hasDocgen, extractComponentProps, convert, SourceType } from '@storybook/docs-tools';
 import { addons } from '@storybook/preview-api';
 import { baseParse } from '@vue/compiler-core';
 import { watch, h, isVNode } from 'vue';
 import { kebabCase } from 'lodash';
 
-var ARG_TYPE_SECTIONS=["props","events","slots","exposed"],extractArgTypes=component=>{if(!hasDocgen(component))return null;let argTypes2={};return ARG_TYPE_SECTIONS.forEach(section=>{extractComponentProps(component,section).forEach(({docgenInfo,propDef})=>{let{name,description,type,default:defaultSummary,required,tags=[],global}=docgenInfo;if(argTypes2[name]||global)return;let sbType=section==="props"?convert(docgenInfo):{name:type?.toString()},definedTypes=`${(type?type.name||type.toString():" ").replace(" | undefined","")}`,descriptions=`${tags.length?`${tags.map(tag=>`@${tag.name}: ${tag.text}`).join("<br>")}<br><br>`:""}${description}`;argTypes2[name]={name,description:descriptions.replace("undefined",""),defaultValue:{summary:defaultSummary},type:{required,...sbType},table:{type:{summary:definedTypes},jsDocTags:tags,defaultValue:{summary:defaultSummary},category:section},control:{disable:!["props","slots"].includes(section)}};});}),argTypes2},convert=({schema:schemaType})=>{if(typeof schemaType=="object"&&schemaType.kind==="enum"&&Array.isArray(schemaType.schema)){let values=schemaType.schema.filter(item=>item!=="undefined"&&(item!==null&&typeof item=="object"&&item.kind!=="array"||typeof item=="string")).map(item=>typeof item!="string"?item.schema.toString():item).map(item=>item.replace(/'/g,'"'))||[],isSingle=values.length===1,isBoolean=values.length===2&&values.every(item=>item==="true"||item==="false"),isLateralUnion=values.length>1&&values.every(item=>item.startsWith('"')&&item.endsWith('"')),isEnum=values.length>1&&values.every(item=>!item.startsWith('"')&&typeof item=="string"&&item.includes(".")),sbType={name:"enum",value:values.map(item=>item.replace(/"/g,""))};return isSingle?{name:values[0]}:isBoolean?{...sbType,name:"boolean"}:isLateralUnion||isEnum?{...sbType,name:"enum"}:{name:values.length?values[0]:"array"}}if(typeof schemaType=="object"&&schemaType.kind==="object"&&typeof schemaType.schema=="object"){let schemaObject=schemaType.schema;return {name:"object",value:Object.fromEntries(Object.entries(schemaObject).map(([key,value])=>[key,value]))}}return {name:schemaType}};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===SourceType.DYNAMIC?!1:!isDocsViewMode||!isArgsStory||sourceParams?.code||sourceParams?.type===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: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=="function"&&(slotContent=generateExpression(slot)),isVNode(slot)&&(slotContent=generateComponentSource2(slot)),typeof slot=="object"&&!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):[h(story,context?.args)]}catch{return []}}function getComponents(template){let components=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(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 watch(()=>context.args,()=>{skip||generateSource(context);},{immediate:!0,deep:!0}),story};function generateSource(context){let channel=addons.getChannel(),{args:args2={},argTypes:argTypes2={},id}=context||{},storyComponents=getTemplateComponents(context?.originalStoryFn,context),withScript=context?.parameters?.docs?.source?.withScriptSetup||!1,generatedScript=withScript?generateScriptSetup(args2):"",generatedTemplate=generateTemplateSource(storyComponents,context,withScript);if(generatedTemplate){let source2=`${generatedScript}
+var SECTIONS=["props","events","slots","methods"],extractArgTypes=component=>{if(!hasDocgen(component))return null;let results={};return SECTIONS.forEach(section=>{extractComponentProps(component,section).forEach(({propDef,docgenInfo,jsDocTags})=>{let{name,type,description,defaultValue:defaultSummary,required}=propDef,sbType=section==="props"?convert(docgenInfo):{name:"void"};results[name]={name,description,type:{required,...sbType},table:{type,jsDocTags,defaultValue:defaultSummary,category:section}};});}),results};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===SourceType.DYNAMIC?!1:!isDocsViewMode||!isArgsStory||sourceParams?.code||sourceParams?.type===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: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=="function"&&(slotContent=generateExpression(slot)),isVNode(slot)&&(slotContent=generateComponentSource2(slot)),typeof slot=="object"&&!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):[h(story,context?.args)]}catch(e){return console.log("error",e),[]}}function getComponents(template){let components=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(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(""):"";console.log(" vnode ",vnode," childSources ",childSources," attributes ",attributes);let 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 watch(()=>context.args,()=>{skip||generateSource(context);},{immediate:!0,deep:!0}),story};function generateSource(context){let channel=addons.getChannel(),{args:args2={},argTypes:argTypes2={},id}=context||{},storyComponents=getTemplateComponents(context?.originalStoryFn,context),withScript=context?.parameters?.docs?.source?.withScriptSetup||!1,generatedScript=withScript?generateScriptSetup(args2):"",generatedTemplate=generateTemplateSource(storyComponents,context,withScript);if(generatedTemplate){let source2=`${generatedScript}
  <template>
  ${generatedTemplate} 
 </template>`;return channel.emit(SNIPPET_RENDERED,{id,args:args2,source:source2,format:"vue"}),source2}return null}var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[enhanceArgTypes];var parameters2={renderer:"vue3",...parameters};

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as _storybook_types from '@storybook/types';
 import { Addon_ClientStoryApi, Addon_Loadable, 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 { App, FunctionalComponent, VNodeChild } from 'vue';
-import { V as VueRenderer } from './render-210e2c92.js';
-export { s as setup } from './render-210e2c92.js';
+import { V as VueRenderer } from './render-32b7dd3f.js';
+export { s as setup } from './render-32b7dd3f.js';
 import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
 import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
 

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,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=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_vue.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_vue.h)(story))},context=>prepare(storyFn(context)))}var import_vue2=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_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn)},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;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_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return(element&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args)??{}}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.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 RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});
+"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,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=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_vue.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_vue.h)(story))},context=>prepare(storyFn(context)))}var import_vue2=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_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn)},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;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_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.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 RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { renderToCanvas, decorateStory, render } from './chunk-CKUIH7TX.mjs';
-export { setup } from './chunk-CKUIH7TX.mjs';
+import { renderToCanvas, decorateStory, render } from './chunk-SRVBJOBI.mjs';
+export { setup } from './chunk-SRVBJOBI.mjs';
 import { global } from '@storybook/global';
 import { start } from '@storybook/preview-api';
 

package/dist/{render-210e2c92.d.ts → render-32b7dd3f.d.ts}

@@ -1,9 +1,9 @@
-import { Component, DefineComponent, App } from 'vue';
+import { ConcreteComponent, App } from 'vue';
 import { WebRenderer, ArgsStoryFn as ArgsStoryFn$1, RenderContext } from '@storybook/types';
 
-type StoryFnVueReturnType = DefineComponent<any> | Component<any> | JSX.Element;
+type StoryFnVueReturnType = ConcreteComponent<any>;
 interface VueRenderer extends WebRenderer {
-    component: Component<any>;
+    component: Omit<ConcreteComponent<this['T']>, 'props'>;
     storyResult: StoryFnVueReturnType;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.2.0-canary-22285-1690367272-d07bfc52.0",
+  "version": "7.2.0",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -48,35 +48,28 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.2.0-canary-22285-1690367272-d07bfc52.0",
-    "@storybook/docs-tools": "7.2.0-canary-22285-1690367272-d07bfc52.0",
+    "@storybook/core-client": "7.2.0",
+    "@storybook/docs-tools": "7.2.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.2.0-canary-22285-1690367272-d07bfc52.0",
-    "@storybook/types": "7.2.0-canary-22285-1690367272-d07bfc52.0",
+    "@storybook/preview-api": "7.2.0",
+    "@storybook/types": "7.2.0",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19",
-    "vue": "3.3.4",
     "vue-component-type-helpers": "latest"
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
     "@types/prettier": "2.7.2",
+    "@vue/compiler-core": "^3.3.4",
     "@vue/vue3-jest": "29",
     "typescript": "~4.9.3",
+    "vue": "^3.2.47",
     "vue-tsc": "latest"
   },
   "peerDependencies": {
-    "@vue/compiler-core": "^3.2.47",
-    "vue": "^3.2.47"
-  },
-  "peerDependenciesMeta": {
-    "@vue/compiler-core": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
+    "@vue/compiler-core": "^3.0.0",
+    "vue": "^3.0.0"
   },
   "engines": {
     "node": ">=16.0.0"

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

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
 </template>
 
 <script lang="ts" setup>

package/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts

@@ -5,7 +5,6 @@ import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { within } from '@storybook/testing-library';
 import { inject } from 'vue';
-import type { PlayFunctionContext } from '@storybook/csf';
 import GlobalSetup from './GlobalSetup.vue';
 
 const meta: Meta = {
@@ -32,7 +31,7 @@ export const Primary: Story = {
     primary: true,
     label: 'someColor injected from .storybook/preview.ts',
   },
-  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id }) => {
     const canvas = within(canvasElement);
 
     const button = await canvas.getByRole('button');

package/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts

@@ -1,14 +1,11 @@
 import { expect } from '@storybook/jest';
-import { global } from '@storybook/global';
+import { global as globalThis } from '@storybook/global';
 import type { Meta, StoryObj, StoryFn } from '@storybook/vue3';
 import { within, userEvent } from '@storybook/testing-library';
 import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
 
-import type { PlayFunctionContext } from '@storybook/csf';
 import ReactiveArgs from './ReactiveArgs.vue';
 
-const globalThis = global as any;
-
 const meta = {
   component: ReactiveArgs,
   argTypes: {
@@ -26,7 +23,7 @@ export const ReactiveTest: Story = {
     label: 'Button',
   },
   // test that args are updated correctly in rective mode
-  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id }) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     const canvas = within(canvasElement);
 
@@ -114,7 +111,7 @@ ReactiveCSF2Wrapper.decorators = [
   }),
 ];
 
-ReactiveCSF2Wrapper.play = async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+ReactiveCSF2Wrapper.play = async ({ canvasElement, id }) => {
   const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
   const canvas = within(canvasElement);
 

package/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts

@@ -3,8 +3,6 @@ import { userEvent, within } from '@storybook/testing-library';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { h } from 'vue';
 import { RESET_STORY_ARGS, STORY_ARGS_UPDATED, UPDATE_STORY_ARGS } from '@storybook/core-events';
-import type { PlayFunctionContext } from '@storybook/csf';
-
 import Reactivity from './Reactivity.vue';
 
 const meta = {
@@ -20,7 +18,7 @@ const meta = {
     header: 'If you see this, the header slot was not reactive.', // this can be useless if you have custom render function that overrides the slot
     footer: 'If you see this, the footer slot was not reactive.',
   },
-  play: async ({ canvasElement, id, args }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id, args }) => {
     const channel = (globalThis as any).__STORYBOOK_ADDONS_CHANNEL__;
 
     const canvas = within(canvasElement);
@@ -51,7 +49,7 @@ export const NoDecorators: Story = {};
 
 export const DecoratorFunctionalComponent: Story = {
   decorators: [
-    (storyFn: () => any) => {
+    (storyFn, context) => {
       const story = storyFn();
       return () => h('div', [h('h2', ['Decorator not using args']), [h(story)]]);
     },
@@ -70,7 +68,7 @@ export const DecoratorFunctionalComponentArgsFromContext: Story = {
 
 export const DecoratorComponentOptions: Story = {
   decorators: [
-    (storyFn: any, context: any) => {
+    (storyFn, context) => {
       return {
         template: '<div><h2>Decorator not using args</h2><story/></div>',
       };

package/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts

@@ -1,14 +1,11 @@
 import { expect } from '@storybook/jest';
-import { global } from '@storybook/global';
+import { global as globalThis } from '@storybook/global';
 import { within } from '@storybook/testing-library';
 import { STORY_ARGS_UPDATED, RESET_STORY_ARGS, UPDATE_STORY_ARGS } from '@storybook/core-events';
 import { h } from 'vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
-import type { PlayFunctionContext } from '@storybook/csf';
 import BaseLayout from './BaseLayout.vue';
 
-const globalThis = global as any;
-
 const meta = {
   component: BaseLayout,
   args: {
@@ -29,7 +26,7 @@ export const SimpleSlotTest: Story = {
     default: () => 'Default Text Slot',
     footer: h('p', 'Footer VNode Slot'),
   },
-  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id }) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     const canvas = within(canvasElement);
 
@@ -67,7 +64,7 @@ export const NamedSlotTest: Story = {
     footer: h('p', 'Footer VNode Slot'),
   },
   // test that args are updated correctly in rective mode
-  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id }) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     const canvas = within(canvasElement);
 
@@ -107,7 +104,7 @@ export const SlotWithRenderFn: Story = {
     default: () => 'Default Text Slot',
     footer: h('p', 'Footer VNode Slot'),
   },
-  render: (args: any) => ({
+  render: (args) => ({
     components: { BaseLayout },
     setup() {
       return { args };
@@ -117,7 +114,7 @@ export const SlotWithRenderFn: Story = {
                 <template #header="{ title }"><h1>{{args.header({title})}}</h1></template>
               </BaseLayout>`,
   }),
-  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id }) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     const canvas = within(canvasElement);
 

package/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts

@@ -1,12 +1,16 @@
 import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import type { Channel } from '@storybook/channels';
 import { within } from '@storybook/testing-library';
 import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
 
 import type { Meta, StoryObj } from '@storybook/vue3';
-import type { PlayFunctionContext } from '@storybook/csf';
 import MySlotComponent from './MySlotComponent.vue';
 
-const globalThis = global as any;
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top,@typescript-eslint/naming-convention
+  var __STORYBOOK_ADDONS_CHANNEL__: Channel;
+}
 
 const meta = {
   component: MySlotComponent,
@@ -23,7 +27,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   // test that args are updated correctly in reactive mode
-  play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, id }) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     const canvas = within(canvasElement);
 

package/template/stories_vue3-vite-default-ts/component-meta/OptionApi.stories.ts

@@ -1,19 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-
-import Component from './options-api/component';
-
-const meta = {
-  component: Component,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Component>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-
-export const Default: Story = {
-  args: {
-    numberDefault: 12,
-    objectDefault: { bar: 'foo' },
-    arrayDefault: [1, 2, 3],
-    complexDefault: [1, 2, 3, 4, 5],
-  },
-};

package/template/stories_vue3-vite-default-ts/component-meta/ReferenceTypeEvents.stories.ts

@@ -1,11 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-import Component from './reference-type-events/component.vue';
-
-const meta = {
-  component: Component,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Component>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-
-export const ReferenceTypeEvents: Story = {};

package/template/stories_vue3-vite-default-ts/component-meta/ReferenceTypeExposed.stories.ts

@@ -1,11 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-import Component from './reference-type-exposed/component.vue';
-
-const meta = {
-  component: Component,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Component>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-
-export const ReferenceTypeExposed: Story = {};

package/template/stories_vue3-vite-default-ts/component-meta/ReferenceTypeProps.stories.ts

@@ -1,31 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-import Component from './reference-type-props/component.vue';
-
-const meta = {
-  component: Component,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Component>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-enum MyEnum {
-  Small,
-  Medium,
-  Large,
-}
-
-export const ReferenceTypeProps: Story = {
-  args: {
-    foo: 'Foo',
-    baz: true,
-    stringArray: ['Foo', 'Bar', 'Baz'],
-    bar: 1,
-    unionOptional: 'Foo',
-    union: 'Foo',
-    inlined: { foo: 'Foo' },
-    nested: { nestedProp: 'Nested Prop' },
-    nestedIntersection: { nestedProp: 'Nested Prop', additionalProp: 'Additional Prop' },
-    array: [{ nestedProp: 'Nested Prop' }],
-    literalFromContext: 'Uncategorized',
-    enumValue: MyEnum.Small,
-  },
-};

package/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts

@@ -1,18 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-
-import Component from './template-slots/component.vue';
-
-const meta = {
-  component: Component,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Component>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-
-export const Default: Story = {
-  args: {
-    default: ({ num }) => `Default slot { num=${num} }`,
-    named: ({ str }) => `Named slot { str=${str} }`,
-    vbind: ({ num, str }) => `Named v-bind slot { num=${num}, str=${str} }`,
-  },
-};

package/template/stories_vue3-vite-default-ts/component-meta/TsComponent.stories.ts

@@ -1,12 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-
-import Component from './ts-component/component';
-
-const meta = {
-  component: Component,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Component>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-
-export const Default: Story = { args: { foo: 'bar', bar: 20 } };

package/template/stories_vue3-vite-default-ts/component-meta/TsNameExport.stories.ts

@@ -1,12 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/vue3';
-
-import { ComponentA } from './ts-named-export/component';
-
-const meta = {
-  component: ComponentA,
-  tags: ['autodocs'],
-} satisfies Meta<typeof ComponentA>;
-type Story = StoryObj<typeof meta>;
-export default meta;
-
-export const Default: Story = { args: { size: 'large', backgroundColor: 'blue' } };

package/template/stories_vue3-vite-default-ts/component-meta/class-slots/component.vue

@@ -1,10 +0,0 @@
-<script lang="ts">
-import { VNode } from 'vue';
-
-export default {} as new () => {
-	$slots: {
-		default(_: { num: number; }): VNode[];
-		foo(_: { str: string; }): VNode[];
-	};
-};
-</script>

package/template/stories_vue3-vite-default-ts/component-meta/empty-component/component.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const internalProp = 42;
-</script>
-
-<template>
-	{{ internalProp }}
-</template>

package/template/stories_vue3-vite-default-ts/component-meta/options-api/component.ts

@@ -1,65 +0,0 @@
-import { defineComponent, h } from 'vue';
-
-interface SubmitPayload {
-  /**
-   * email of user
-   */
-  email: string;
-  /**
-   * password of same user
-   */
-  password: string;
-}
-
-export default defineComponent({
-  emits: {
-    // Validate submit event
-    submit: ({ email, password }: SubmitPayload) => {
-      if (email && password) {
-        return true;
-      }
-
-      return false;
-    },
-  },
-  props: {
-    /**
-     * Number prop with default
-     */
-    numberDefault: {
-      type: Number,
-      default: 42,
-    },
-    /**
-     * Object prop with default
-     */
-    objectDefault: {
-      type: Object,
-      default: () => ({
-        foo: 'bar',
-      }),
-    },
-    /**
-     * Array prop with default
-     */
-    arrayDefault: {
-      type: Array,
-      default: () => [1, 2, 3],
-    },
-    /**
-     * Default function more complex
-     */
-    complexDefault: {
-      type: Array,
-      default: (props: any) => {
-        if (props.arrayDefault.length > props.numberDefault) {
-          return [];
-        }
-        return undefined;
-      },
-    },
-  },
-  render() {
-    return h('pre', JSON.stringify(this.$props, null, 2));
-  },
-});

package/template/stories_vue3-vite-default-ts/component-meta/reference-type-events/component.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-
-/**
- * Emitted when the foo property is changed.
- */
-type MyEventsFoo = /** Emitted when the foo property is changed. */ 'foo';
-interface MyEvents {
-  (event: MyEventsFoo, data?: { foo: string }): void;
-  (event: 'bar', value: { year: number; title?: any }): void;
-  (e: 'baz'): void;
-}
-
-const emit = defineEmits<MyEvents>();
-</script>
-<template>
-  <div>
-    foo:
-    <button @click="emit('bar', { year: 2023, title: 'Storybook' })">
-      event: 'bar', value: {year: 2023, title:'Storybook' }
-    </button>
-  </div>
-  <div>bar:
-    <button @click="emit('baz')">event: 'baz'</button>
-  </div>
-  <div>foo:
-    <button @click="emit('foo', { foo: 'foo' })">
-      event: 'foo', data: {foo: 'foo'}
-    </button>
-  </div>
-</template>

package/template/stories_vue3-vite-default-ts/component-meta/reference-type-exposed/component.vue

@@ -1,22 +0,0 @@
-<template>
-	<Pre>{{ JSON.stringify({ label, count }, null, 2) }} </Pre>
-</template>
-<script setup lang="ts">
-
-import { ref } from 'vue';
-
-const label = ref('Button')
-const count = ref(100)
-
-defineExpose({
-	/**
-	 * a label string
-	 */
-	label,
-	/**
-	 * a count number
-	 */
-	count
-});
-
-</script>

package/template/stories_vue3-vite-default-ts/component-meta/reference-type-props/component-js-setup.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import { StringEmpty, StringRequired, StringUndefined } from './my-props';
-
-defineProps({
-  /**
-   * The foo property is required.
-   * @since v1.0.0
-   * @deprecated v1.1.0
-   * @description This is a description of the foo property.
-   */
-  foo: {
-    type: String,
-    required: true
-  },
-  /**
-   * The bar property has default value
-   */
-  bar: {
-    type: String,
-    default: 'BAR'
-  },
-  /**
-   * The baz property is optional.
-   */
-  baz: {
-    type: String
-  },
-  /** 
-   * The xfoo property is required.
-   */
-  xfoo: StringRequired,
-  /**
-   * The xbar property is empty.
-   */
-  xbar: StringEmpty,
-  /**
-   * The xbaz property is undefined.
-   */
-  xbaz: StringUndefined,
-  /**
-   * The hello property.
-   *
-   * @since v1.0.0
-   */
-  hello: {
-    type: String,
-    default: 'Hello'
-  },
-  numberOrStringProp: {
-    type: [Number, String],
-    default: 42
-  },
-  arrayProps: {
-    type: Array,
-    default: () => [42, 43, 44]
-  }
-})
-</script>

package/template/stories_vue3-vite-default-ts/component-meta/reference-type-props/component-js.vue

@@ -1,42 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { StringEmpty, StringRequired, StringUndefined } from './my-props';
-
-export default defineComponent({
-	props: {
-		/**
-		 * foo description, required prop
-		 * @required
-		 */
-		foo: {
-			type: String,
-			required: true
-		},
-		/**
-		 * bar description, default value BAR
-		 */
-		bar: {
-			type: String,
-			default: 'BAR',
-		},
-		/**
-		 * baz description, optional prop
-		 */
-		baz: {
-			type: String
-		},
-		/** 
-		 * xfoo description, required string prop
-		 */
-		xfoo: StringRequired,
-		/**
-		 * xbar description, empty string prop
-		 */
-		xbar: StringEmpty,
-		xbaz: StringUndefined,
-	}
-})
-</script>
-<template>
-	<pre> {{ $props }}</pre>
-</template>

package/template/stories_vue3-vite-default-ts/component-meta/reference-type-props/component.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-export interface MyNestedProps {
-	/**
-	 * nested prop documentation
-	 */
-	nestedProp: string;
-}
-
-interface MyIgnoredNestedProps {
-	nestedProp: string;
-}
-
-interface MyNestedRecursiveProps {
-	recursive: MyNestedRecursiveProps
-}
-
-enum MyEnum {
-	Small,
-	Medium,
-	Large,
-}
-
-const categories = [
-	'Uncategorized',
-	'Content',
-	'Interaction',
-	'Display',
-	'Forms',
-	'Addons',
-] as const;
-
-type MyCategories = typeof categories[number];
-
-interface MyProps {
-	/**
-	 * string foo
-	 *
-	 * @default "rounded"
-	 * @since v1.0.0
-	 * @see https://vuejs.org/
-	 * @deprecated v1.1.0
-	 */
-	foo: string,
-	/**
-	 * description bar is optional number 
-	 */
-	bar?: number,
-	/**
-	 * description baz is required boolean
-	 */
-	baz: boolean,
-	/**
-	 * description stringArray is string array 
-	 */
-	stringArray?: string[],
-	/**
-	 * description union is required union type
-	 */
-	union: string | number,
-	/**
-	 * description unionOptional is optional union type
-	 */
-	unionOptional?: string | number | boolean,
-	/**
-	 * description nested is required nested object
-	 */
-	nested: MyNestedProps,
-	/**
-	 * description required nested object with intersection
-	 */
-	nestedIntersection: MyNestedProps & {
-		/**
-		 * description required additional property
-		 */
-		additionalProp: string;
-	},
-	/**
-	 * description optional nested object
-	 */
-	nestedOptional?: MyNestedProps | MyIgnoredNestedProps,
-	/**
-	 * description required array object
-	 */
-	array: MyNestedProps[],
-	/**
-	 * description optional array object
-	 */
-	arrayOptional?: MyNestedProps[],
-	/**
-	 * description enum value
-	 */
-	enumValue: MyEnum,
-	/**
-	 * description literal type alias that require context
-	 */
-	literalFromContext: MyCategories,
-	inlined: { foo: string; },
-	recursive?: MyNestedRecursiveProps
-}
-
-
-withDefaults(defineProps<MyProps>(), {
-	bar: 1,
-	stringArray: () => ['foo', 'bar'],
-});
-</script>
-<template>
-	<pre>{{ JSON.stringify($props, null, 2) }}</pre>
-</template>

package/template/stories_vue3-vite-default-ts/component-meta/reference-type-props/my-props.ts

@@ -1,113 +0,0 @@
-export interface MyNestedProps {
-  /**
-   * nested prop documentation
-   */
-  nestedProp: string;
-}
-
-export interface MyIgnoredNestedProps {
-  nestedProp: string;
-}
-
-export interface MyNestedRecursiveProps {
-  recursive: MyNestedRecursiveProps;
-}
-
-enum MyEnum {
-  Small,
-  Medium,
-  Large,
-}
-
-const categories = [
-  'Uncategorized',
-  'Content',
-  'Interaction',
-  'Display',
-  'Forms',
-  'Addons',
-] as const;
-
-type MyCategories = typeof categories[number];
-
-export interface MyProps {
-  /**
-   * string foo
-   *
-   * @default "rounded"
-   * @since v1.0.0
-   * @see https://vuejs.org/
-   * @example
-   * ```vue
-   * <template>
-   *   <component foo="straight" />
-   * </template>
-   * ```
-   */
-  foo: string;
-  /**
-   * optional number bar
-   */
-  bar?: number;
-  /**
-   * string array baz
-   */
-  baz?: string[];
-  /**
-   * required union type
-   */
-  union: string | number;
-  /**
-   * optional union type
-   */
-  unionOptional?: string | number;
-  /**
-   * required nested object
-   */
-  nested: MyNestedProps;
-  /**
-   * required nested object with intersection
-   */
-  nestedIntersection: MyNestedProps & {
-    /**
-     * required additional property
-     */
-    additionalProp: string;
-  };
-  /**
-   * optional nested object
-   */
-  nestedOptional?: MyNestedProps | MyIgnoredNestedProps;
-  /**
-   * required array object
-   */
-  array: MyNestedProps[];
-  /**
-   * optional array object
-   */
-  arrayOptional?: MyNestedProps[];
-  /**
-   * enum value
-   */
-  enumValue: MyEnum;
-  /**
-   * literal type alias that require context
-   */
-  literalFromContext: MyCategories;
-  inlined: { foo: string };
-  recursive: MyNestedRecursiveProps;
-}
-
-export const StringRequired = {
-  type: String,
-  required: true,
-} as const;
-
-export const StringEmpty = {
-  type: String,
-  value: '',
-} as const;
-
-export const StringUndefined = {
-  type: String,
-} as const;

package/template/stories_vue3-vite-default-ts/component-meta/template-slots/component-no-script.vue

@@ -1,6 +0,0 @@
-<template>
-	<slot name="no-bind"></slot>
-	<slot :num="123"></slot>
-	<slot name="named-slot" str="str"></slot>
-	<slot name="vbind" v-bind="{ num: 123, str: 'str' }"></slot>
-</template>

package/template/stories_vue3-vite-default-ts/component-meta/template-slots/component.vue

@@ -1,12 +0,0 @@
-<template>
-	<slot name="no-bind"></slot>
-	<br>
-	<slot :num="123"></slot>
-	<br>
-	<slot name="named" str="str"></slot>
-	<br>
-	<slot name="vbind" v-bind="{ num: 123, str: 'str' }"></slot>
-</template>
-
-<script setup lang="ts">
-</script>

package/template/stories_vue3-vite-default-ts/component-meta/ts-component/PropDefinitions.ts

@@ -1,10 +0,0 @@
-export interface MyProps {
-  /**
-   * string foo
-   */
-  foo: string;
-  /**
-   * optional number bar
-   */
-  bar?: number;
-}

package/template/stories_vue3-vite-default-ts/component-meta/ts-component/component.ts

@@ -1,17 +0,0 @@
-import { h, defineComponent } from 'vue';
-// import type { MyProps } from './PropDefinitions';  this works on vue@3.3.0
-
-interface MyProps {
-  /**
-   * string foo
-   */
-  foo: string;
-  /**
-   * optional number bar
-   */
-  bar?: number;
-}
-
-export default defineComponent((props: MyProps) => () => h('Pre', `${JSON.stringify(props)}`), {
-  props: ['foo', 'bar'],
-});

package/template/stories_vue3-vite-default-ts/component-meta/ts-named-export/component.ts

@@ -1,52 +0,0 @@
-import type { PropType } from 'vue';
-import { defineComponent, h } from 'vue';
-
-export const ComponentA = defineComponent({
-  name: 'MyCompo1',
-  props: {
-    /**
-     * This is a description of the prop
-     * @values 'small', 'medium', 'large'
-     * @defaultValue 'medium'
-     * @control select
-     * @group Size
-     * */
-    size: {
-      type: String as PropType<'small' | 'medium' | 'large'>,
-      default: 'medium',
-    },
-    /**
-     * This is a description of the prop
-     * @defaultValue false
-     * @control color
-     * @group Style
-     * */
-    backgroundColor: {
-      type: String,
-      default: 'red',
-    },
-  },
-  setup(props: any) {
-    return () => h('pre', JSON.stringify(props, null, 2));
-  },
-});
-
-export const ComponentB = defineComponent({
-  name: 'MyCompo2',
-  props: {
-    /**
-     * This is a description of the prop
-     * @values true, false
-     * @defaultValue false
-     * @control boolean
-     * @group Size
-     * */
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props: any) {
-    return () => h('pre', JSON.stringify(props, null, 2));
-  },
-});