@storybook/vue3 8.0.0-alpha.9 → 8.0.0-beta.1

package/dist/chunk-2MJOESH7.mjs

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

package/dist/chunk-FH7K3Q3U.mjs

@@ -0,0 +1,3 @@
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};
+
+export { __export };

package/dist/entry-preview-docs.js

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

package/dist/entry-preview-docs.mjs

@@ -1,10 +1,11 @@
+import './chunk-FH7K3Q3U.mjs';
 import { extractComponentDescription, enhanceArgTypes, hasDocgen, extractComponentProps, convert, SNIPPET_RENDERED, 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=="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(`
+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.toLowerCase().startsWith("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(""):"",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/entry-preview.mjs

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

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
+export { s as setup } from './render-18d12fa7.js';
+import * as _storybook_types from '@storybook/types';
+import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
 import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
 import { FunctionalComponent, VNodeChild } from 'vue';
 import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
 import { V as VueRenderer } from './types-ad933ac1.js';
-export { s as setup } from './render-18d12fa7.js';
 
 /**
  * Metadata to configure the stories for a component.
@@ -39,4 +40,75 @@ type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
 type Preview = ProjectAnnotations<VueRenderer>;
 
-export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, VueRenderer };
+/** Function that sets the globalConfig of your Storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/vue3';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
+ */
+declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<VueRenderer> | ProjectAnnotations<VueRenderer>[]): void;
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/vue';
+ * import { composeStory } from '@storybook/vue3';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(Primary({label: "Hello world"}));
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<VueRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<VueRenderer>, exportsName?: string): _storybook_types.ComposedStoryFn<VueRenderer, Partial<TArgs>>;
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/vue';
+ * import { composeStories } from '@storybook/vue3';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(Primary({label: "Hello world"}));
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+declare function composeStories<TModule extends Store_CSFExports<VueRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<VueRenderer>): Omit<StoriesWithPartialProps<VueRenderer, TModule>, keyof Store_CSFExports>;
+
+export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, VueRenderer, composeStories, composeStory, setProjectAnnotations };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{setup:()=>setup});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var import_vue=require("vue");var setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)};try{module?.hot?.decline&&module.hot.decline()}catch{}0&&(module.exports={setup});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations,setup:()=>setup});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var render_exports={};__export(render_exports,{render:()=>render,renderToCanvas:()=>renderToCanvas,setup:()=>setup,updateArgs:()=>updateArgs});var import_vue=require("vue"),render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return()=>(0,import_vue.h)(Component,props,getSlots(props,context))},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_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.h)(rootElement)}});return vueApp.config.errorHandler=(e,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):showException(e)},await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.reactive)(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var import_preview_api=require("@storybook/preview-api");function setProjectAnnotations(projectAnnotations){(0,import_preview_api.setProjectAnnotations)(projectAnnotations)}function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return(0,import_preview_api.composeStory)(story,componentAnnotations,projectAnnotations,render_exports,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api.composeStories)(csfExports,projectAnnotations,composeStory)}try{module?.hot?.decline&&module.hot.decline()}catch{}0&&(module.exports={composeStories,composeStory,setProjectAnnotations,setup});

package/dist/index.mjs

@@ -1,4 +1,9 @@
-export { setup } from './chunk-VTQTCWGM.mjs';
+import { render_exports } from './chunk-2MJOESH7.mjs';
+export { setup } from './chunk-2MJOESH7.mjs';
+import './chunk-FH7K3Q3U.mjs';
 import { global } from '@storybook/global';
+import { setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from '@storybook/preview-api';
 
-var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;try{module?.hot?.decline&&module.hot.decline();}catch{}
+var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;function setProjectAnnotations(projectAnnotations){setProjectAnnotations$1(projectAnnotations);}function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return composeStory$1(story,componentAnnotations,projectAnnotations,render_exports,exportsName)}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}try{module?.hot?.decline&&module.hot.decline();}catch{}
+
+export { composeStories, composeStory, setProjectAnnotations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.0.0-alpha.9",
+  "version": "8.0.0-beta.1",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/docs-tools": "8.0.0-alpha.9",
+    "@storybook/docs-tools": "8.0.0-beta.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "8.0.0-alpha.9",
-    "@storybook/types": "8.0.0-alpha.9",
+    "@storybook/preview-api": "8.0.0-beta.1",
+    "@storybook/types": "8.0.0-beta.1",
     "@vue/compiler-core": "^3.0.0",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
@@ -59,7 +59,8 @@
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
-    "@types/prettier": "2.7.2",
+    "@testing-library/vue": "^8.0.0",
+    "@types/prettier": "^3.0.0",
     "@vitejs/plugin-vue": "^4.4.0",
     "typescript": "^5.3.2",
     "vue": "^3.2.47",

package/template/stories/preview.js

@@ -5,7 +5,7 @@ import { setup } from '@storybook/vue3';
 const somePlugin = {
   install: (app, options) => {
     // inject a globally available $greetingText() method
-    // eslint-disable-next-line no-param-reassign
+
     app.config.globalProperties.$greetingMessage = (key) => {
       // retrieve a nested property in `options`
       // using `key`

package/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js

@@ -25,7 +25,7 @@ const meta = {
   render: (args) => {
     // Individual properties can be overridden by spreading the args
     // and the replacing the key-values that need to be updated
-    args = { ...args, icon: icons[args.icon || 'Primary'] }; // eslint-disable-line no-param-reassign
+    args = { ...args, icon: icons[args.icon || 'Primary'] };
     return {
       // Components used in your story `template` are defined in the `components` object
       components: { OverrideArgs },

package/dist/chunk-VTQTCWGM.mjs

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