@storybook/vue3 7.3.2 → 7.4.0-alpha.1

package/dist/chunk-UXHY756F.mjs

@@ -0,0 +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,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);}
+
+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-32b7dd3f.js';
-export { r as render, a as renderToCanvas } from './render-32b7dd3f.js';
+import { V as VueRenderer } from './render-ddbe18a8.js';
+export { r as render, a as renderToCanvas } from './render-ddbe18a8.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"),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(`
+"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=="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(""):"";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,getSlots(props,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 getSlots(props,context){let{argTypes:argTypes2}=context,slots=Object.entries(props).filter(([key])=>{var _a,_b;return((_b=(_a=argTypes2[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_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,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(),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),await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes:argTypes2}=context,slots=Object.entries(props).filter(([key])=>{var _a,_b;return((_b=(_a=argTypes2[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_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,11 +1,11 @@
-export { decorateStory as applyDecorators, render, renderToCanvas } from './chunk-35B2DQBU.mjs';
+export { decorateStory as applyDecorators, render, renderToCanvas } from './chunk-UXHY756F.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 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(`
+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=="string"?slotContent=slot: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} 

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-32b7dd3f.js';
-export { s as setup } from './render-32b7dd3f.js';
+import { V as VueRenderer } from './render-ddbe18a8.js';
+export { s as setup } from './render-ddbe18a8.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,getSlots(props,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 getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.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_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";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;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,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=(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),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 _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.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_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;try{(_a=module==null?void 0:module.hot)!=null&&_a.decline&&module.hot.decline()}catch{}0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { renderToCanvas, decorateStory, render } from './chunk-35B2DQBU.mjs';
-export { setup } from './chunk-35B2DQBU.mjs';
+import { renderToCanvas, decorateStory, render } from './chunk-UXHY756F.mjs';
+export { setup } from './chunk-UXHY756F.mjs';
 import { global } from '@storybook/global';
 import { start } from '@storybook/preview-api';
 
-var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";var RENDERER="vue3",api=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;typeof module<"u"&&module?.hot?.decline();
+var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var RENDERER="vue3",api=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;try{module?.hot?.decline&&module.hot.decline();}catch{}
 
 export { configure, forceReRender, raw, storiesOf };

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

@@ -138,11 +138,7 @@ type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: T
 type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
 
 declare const render: ArgsStoryFn$1<VueRenderer>;
-/** add a setup function to set that will be call when story is created a d
- *
- * @param fn
- */
-declare const setup: (fn: (app: App, storyContext?: StoryContext<VueRenderer>) => void) => void;
-declare function renderToCanvas({ storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): () => void;
+declare const setup: (fn: (app: App, storyContext?: StoryContext<VueRenderer>) => unknown) => void;
+declare function renderToCanvas({ storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): Promise<() => void>;
 
 export { VueRenderer as V, renderToCanvas as a, render as r, setup as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.3.2",
+  "version": "7.4.0-alpha.1",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -38,21 +38,22 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "template/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "vue-tsc --noEmit",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.3.2",
-    "@storybook/docs-tools": "7.3.2",
+    "@storybook/core-client": "7.4.0-alpha.1",
+    "@storybook/docs-tools": "7.4.0-alpha.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.3.2",
-    "@storybook/types": "7.3.2",
+    "@storybook/preview-api": "7.4.0-alpha.1",
+    "@storybook/types": "7.4.0-alpha.1",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19",

package/dist/chunk-35B2DQBU.mjs

@@ -1,6 +0,0 @@
-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,getSlots(props,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 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 { decorateStory, render, renderToCanvas, setup };

package/src/typings.d.ts

@@ -1 +0,0 @@
-declare var STORYBOOK_ENV: 'vue3';

package/template/components/Button.vue

@@ -1,52 +0,0 @@
-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script>
-import './button.css';
-import { reactive, computed } from 'vue';
-
-export default {
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1;
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        'storybook-button': true,
-        'storybook-button--primary': props.primary,
-        'storybook-button--secondary': !props.primary,
-        [`storybook-button--${props.size || 'medium'}`]: true,
-      })),
-      style: computed(() => ({
-        backgroundColor: props.backgroundColor,
-      })),
-      onClick() {
-        emit('click');
-      },
-    };
-  },
-};
-</script>

package/template/components/Form.vue

@@ -1,41 +0,0 @@
-<template>
-  <form id="interaction-test-form" @submit.prevent="onSubmit">
-    <label>
-      Enter Value
-      <input type="text" data-testid="value" v-model="value" required />
-    </label>
-    <button type="submit">Submit</button>
-    <p v-if="complete">Completed!!</p>
-  </form>
-</template>
-
-<script>
-export default {
-  name: 'my-form',
-
-  props: {
-    onSuccess: {
-      type: Function,
-    },
-  },
-
-  data() {
-    return {
-      value: '',
-      complete: false,
-    };
-  },
-
-  methods: {
-    onSubmit() {
-      this.onSuccess(this.value);
-      setTimeout(() => {
-        this.complete = true;
-      }, 500);
-      setTimeout(() => {
-        this.complete = false;
-      }, 1500);
-    },
-  },
-};
-</script>

package/template/components/Html.vue

@@ -1,18 +0,0 @@
-<template>
-  <div v-html="content"></div>
-</template>
-
-<script>
-export default {
-  name: 'my-html',
-
-  props: {
-    content: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup() {},
-};
-</script>

package/template/components/Pre.vue

@@ -1,34 +0,0 @@
-<template>
-  <pre data-testid="pre" :style="style">{{ finalText }}</pre>
-</template>
-
-<script>
-import { reactive, computed } from 'vue';
-
-export default {
-  name: 'my-pre',
-
-  props: {
-    // deepscan-disable-next-line
-    style: {
-      type: Object,
-    },
-    object: {
-      type: Object,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-  },
-
-  setup(props, { emit }) {
-    props = reactive(props);
-    return {
-      finalText: computed(() =>
-        props.object ? JSON.stringify(props.object, null, 2) : props.text
-      ),
-    };
-  },
-};
-</script>

package/template/components/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}

package/template/stories/vue3-mdx.stories.mdx

@@ -1,46 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-<Meta title="stories/renderers/vue3/vue3-mdx" />
-
-# Vue3-specific MDX Stories
-
-export const Button = globalThis.Components.Button;
-
-export const Template = (args, { argTypes }) => ({
-  components: { MyButton: Button },
-  template: '<my-button v-bind="args" />',
-  setup() {
-    return { args };
-  },
-});
-
-## Primary
-
-<Canvas>
-  <Story name="Primary">
-    {{
-      components: { MyButton: Button },
-      template: '<my-button :primary="true" label="Primary button" />',
-    }}
-  </Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-  <Story name="Secondary">
-    {{
-      components: { MyButton: Button },
-      template: '<my-button :primary="false" label="Secondary button" />',
-    }}
-  </Story>
-</Canvas>
-
-## From template
-
-<Canvas>
-  <Story name="From Template" args={{ label: 'From template' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/template/stories_vue3-vite-default-ts/BaseLayout.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  label: String,
-});
-</script>
-<template>
-  <div>
-    <header data-testid="header-slot">
-      <slot name="header" title="Header title from the slot"></slot>
-    </header>
-    <main data-testid="default-slot">
-      <slot></slot>
-    </main>
-    <footer data-testid="footer-slot">
-      <slot name="footer"></slot>
-    </footer>
-  </div>
-</template>

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

@@ -1,32 +0,0 @@
-import type { Meta } from '@storybook/vue3';
-import { h } from 'vue';
-import Reactivity from './Reactivity.vue';
-import * as ReactiveDecorators from './ReactiveDecorators.stories';
-
-const meta = {
-  ...ReactiveDecorators.default,
-  component: Reactivity,
-  // storybook render function is not a functional component. it returns a functional component or a component options
-  render: (args) => {
-    // create the slot contents as a functional components
-    const header = ({ title }: { title: string }) => h('h3', `${args.header} - Title: ${title}`);
-    const defaultSlot = () => h('p', `${args.default}`);
-    const footer = () => h('p', `${args.footer}`);
-    // vue render function is a functional components
-    return () =>
-      h('div', [
-        `Custom render uses a functional component, and passes slots to the component:`,
-        h(Reactivity, args, { header, default: defaultSlot, footer }),
-      ]);
-  },
-} satisfies Meta<typeof Reactivity>;
-
-export default meta;
-
-export {
-  NoDecorators,
-  DecoratorFunctionalComponent,
-  DecoratorFunctionalComponentArgsFromContext,
-  DecoratorComponentOptions,
-  DecoratorComponentOptionsArgsFromData,
-} from './ReactiveDecorators.stories';

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

@@ -1,45 +0,0 @@
-import type { Meta } from '@storybook/vue3';
-import { defineComponent, shallowReactive } from 'vue';
-import Reactivity from './Reactivity.vue';
-import * as ReactiveDecorators from './ReactiveDecorators.stories';
-
-// when you use custom render, you can use any vue api to create your story and garanti reactivity, otherwise i can ease kill the reactivity.
-const state = shallowReactive<{ header: any; default: any; footer: any }>({
-  header: '',
-  default: '',
-  footer: '',
-}); // or reactive
-
-const meta = {
-  ...ReactiveDecorators.default,
-  component: Reactivity,
-  render: (args, { argTypes }) => {
-    state.header = args.header;
-    state.default = args.default;
-    state.footer = args.footer;
-    // return a component options
-    return defineComponent({
-      data: () => ({ args, header: state.header, default: state.default, footer: state.footer }),
-      components: {
-        Reactivity,
-      },
-      template: `<div>Custom render uses options api and binds args to data: 
-                    <Reactivity v-bind="args">
-                      <template #header="{title}"><h3>{{ args.header }} - Title: {{ title }}</h3></template>
-                      <template #default>{{ args.default }}</template>
-                      <template #footer>{{ args.footer }} </template>
-                    </Reactivity>
-                  </div>`,
-    });
-  },
-} satisfies Meta<typeof Reactivity>;
-
-export default meta;
-
-export {
-  NoDecorators,
-  DecoratorFunctionalComponent,
-  DecoratorFunctionalComponentArgsFromContext,
-  DecoratorComponentOptions,
-  DecoratorComponentOptionsArgsFromData,
-} from './ReactiveDecorators.stories';

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

@@ -1,55 +0,0 @@
-/// <reference types="jest" />
-/// <reference types="testing-library__jest-dom" />
-
-import { expect } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { within } from '@storybook/testing-library';
-import { inject } from 'vue';
-import GlobalSetup from './GlobalSetup.vue';
-
-const meta: Meta = {
-  component: GlobalSetup,
-  argTypes: {},
-  render: (args: any) => ({
-    // Components used in your story `template` are defined in the `components` object
-    components: { GlobalUsage: GlobalSetup },
-    // The story's `args` need to be mapped into the template through the `setup()` method
-    setup() {
-      const color = inject('someColor', 'red'); // <-- this is the global setup from .storybook/preview.ts
-      return { args: { ...args, backgroundColor: color } };
-    },
-    // And then the `args` are bound to your component with `v-bind="args"`
-    template: '<global-usage v-bind="args" />',
-  }),
-} satisfies Meta<typeof GlobalSetup>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'someColor injected from .storybook/preview.ts',
-  },
-  play: async ({ canvasElement, id }) => {
-    const canvas = within(canvasElement);
-
-    const button = await canvas.getByRole('button');
-    await expect(button).toHaveStyle('background-color: rgb(0, 128, 0)'); // <-- this provide themeColor = green from .storybook/preview.ts
-
-    const h2 = await canvas.getByRole('heading', { level: 2 });
-    await expect(h2).toHaveTextContent('Hi Story! from some plugin your name is Primary!');
-
-    const h3 = await canvas.getByRole('heading', { level: 3 });
-    await expect(h3).toHaveTextContent('Hello Story! from some plugin your name is Primary!');
-
-    const h4 = await canvas.getByRole('heading', { level: 4 });
-    await expect(h4).toHaveTextContent('Welcome Story! from some plugin your name is Primary!');
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'someColor injected from .storybook/preview.ts',
-  },
-};

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

@@ -1,6 +0,0 @@
-<template>
-  <global-button v-bind="$attrs"> </global-button>
-  <h2> Hi message: {{ $greetingMessage('hi') }}</h2>
-  <h3> Hello message: {{ $greetingMessage('hello') }}</h3>
-  <h4> Welcome message: {{ $greetingMessage('welcome') }}</h4>
-</template>