@storybook/vue3 0.0.0-pr-23609-sha-f47ef339

package/README.md

@@ -0,0 +1 @@
+# Storybook Vue3 renderer

package/dist/chunk-SRVBJOBI.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,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn);},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext));},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement);}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=createApp({setup(){storyContext.args=reactive(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:reactive(args)};return map.set(canvasElement,appState),()=>h(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement);}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>{let slotValue=context.args[key];return [key,typeof slotValue=="function"?slotValue:()=>slotValue]});return reactive(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&isVNode(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=isReactive(reactiveArgs)?reactiveArgs:reactive(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key];}),Object.assign(currentArgs,nextArgs);}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement);}
+
+export { decorateStory, render, renderToCanvas, setup };

package/dist/config.d.ts

@@ -0,0 +1,13 @@
+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 'vue';
+
+declare const decorators: Addon_DecoratorFunction<unknown>[];
+declare const argTypesEnhancers: ArgTypesEnhancer[];
+
+declare function decorateStory(storyFn: LegacyStoryFn<VueRenderer>, decorators: DecoratorFunction<VueRenderer>[]): LegacyStoryFn<VueRenderer>;
+
+declare const parameters: {};
+
+export { decorateStory as applyDecorators, argTypesEnhancers, decorators, parameters };

package/dist/config.js

@@ -0,0 +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(`
+`)}</script>`}function getTemplateComponents(renderFn,context){try{let originalStoryFn=renderFn,storyFn=originalStoryFn?originalStoryFn(context==null?void 0:context.args,context):context==null?void 0:context.component,story=typeof storyFn=="function"?storyFn():storyFn,{template}=story;return template?getComponents(template):[(0,import_vue.h)(story,context==null?void 0:context.args)]}catch(e){return console.log("error",e),[]}}function getComponents(template){let ast=(0,import_compiler_core.baseParse)(template),components=ast==null?void 0:ast.children;return components||[]}function generateTemplateSource(componentOrNodes,{args,argTypes},byRef=!1){let isElementNode=node=>node&&node.type===1,isInterpolationNode=node=>node&&node.type===5,isTextNode=node=>node&&node.type===2,generateComponentSource=componentOrNode=>{var _a,_b;if(isElementNode(componentOrNode)){let{tag:name,props:attributes,children}=componentOrNode,childSources=typeof children=="string"?children:children.map(child=>generateComponentSource(child)).join(""),props=generateAttributesSource(attributes,args,argTypes,byRef);return childSources===""?`<${name} ${props} />`:`<${name} ${props}>${childSources}</${name}>`}if(isTextNode(componentOrNode)){let{content:content2}=componentOrNode;return content2}if(isInterpolationNode(componentOrNode)){let{content}=componentOrNode,expValue=evalExp(content.loc.source,args);return expValue===content.loc.source?`{{${expValue}}}`:eval(expValue)}if((0,import_vue.isVNode)(componentOrNode)){let vnode=componentOrNode,{props,type,children}=vnode,slotsProps=typeof children=="string"?void 0:children,componentSlots=(_a=type==null?void 0:type.__docgenInfo)==null?void 0:_a.slots,attrsProps=slotsProps?Object.fromEntries(Object.entries(props??{}).filter(([key,value])=>!slotsProps[key]&&!["class","style"].includes(key)).map(([key,value])=>[key,value])):props,attributes=mapAttributesAndDirectives(attrsProps??{}),slotArgs=Object.fromEntries(Object.entries(props??{}).filter(([key,value])=>slotsProps==null?void 0:slotsProps[key])),childSources=children?typeof children=="string"?children:mapSlots(slotArgs,generateComponentSource,componentSlots??[]).map(child=>child.content).join(""):"";console.log(" vnode ",vnode," childSources ",childSources," attributes ",attributes);let name=typeof type=="string"?type:type.name||type.__name||((_b=type.__docgenInfo)==null?void 0:_b.displayName),propsSource=generateAttributesSource(attributes,args,argTypes,byRef);return childSources.trim()===""?`<${name} ${propsSource}/>`:`<${name} ${propsSource}>${childSources}</${name}>`}return null},componentsOrNodes=Array.isArray(componentOrNodes)?componentOrNodes:[componentOrNodes],source=componentsOrNodes.map(componentOrNode2=>generateComponentSource(componentOrNode2)).join(" ");return source||null}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn();return(0,import_vue.watch)(()=>context.args,()=>{skip||generateSource(context)},{immediate:!0,deep:!0}),story};function generateSource(context){var _a,_b,_c;let channel=import_preview_api.addons.getChannel(),{args:args2={},argTypes:argTypes2={},id}=context||{},storyComponents=getTemplateComponents(context==null?void 0:context.originalStoryFn,context),withScript=((_c=(_b=(_a=context==null?void 0:context.parameters)==null?void 0:_a.docs)==null?void 0:_b.source)==null?void 0:_c.withScriptSetup)||!1,generatedScript=withScript?generateScriptSetup(args2,argTypes2,storyComponents):"",generatedTemplate=generateTemplateSource(storyComponents,context,withScript);if(generatedTemplate){let source2=`${generatedScript}
+ <template>
+ ${generatedTemplate} 
+</template>`;return channel.emit(import_docs_tools2.SNIPPET_RENDERED,{id,args:args2,source:source2,format:"vue"}),source2}return null}var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription:import_docs_tools3.extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[import_docs_tools3.enhanceArgTypes];var import_vue2=require("vue"),render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return()=>(0,import_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set;var runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args2=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args2),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args2=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args2)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes:argTypes2}=context,slots=Object.entries(argTypes2).filter(([key,value])=>{var _a,_b;return((_b=(_a=argTypes2[key])==null?void 0:_a.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.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

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

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+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 { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
+
+interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
+    configure(loader: Addon_Loadable, module: NodeModule): void;
+    forceReRender(): void;
+    raw: () => any;
+    load: (...args: any[]) => void;
+    app: App;
+}
+declare const storiesOf: ClientApi['storiesOf'];
+declare const configure: ClientApi['configure'];
+declare const forceReRender: () => void;
+declare const raw: ((...args: any[]) => never) | (() => _storybook_types.BoundStory<VueRenderer>[] | undefined);
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
+    render?: ArgsStoryFn<VueRenderer, any>;
+    component?: infer Component;
+    args?: infer DefaultArgs;
+} ? Simplify<ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
+type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;
+type AllowNonFunctionSlots<Slots> = {
+    [K in keyof Slots]: Slots[K] | VNodeChild;
+};
+type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs extends FunctionalComponent<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs;
+/**
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type Story<TArgs = Args> = StoryFn<TArgs>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
+type Preview = ProjectAnnotations<VueRenderer>;
+
+export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer, configure, forceReRender, raw, storiesOf };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=require("vue"),import_preview_api=require("@storybook/preview-api");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue.h)(story))},context=>prepare(storyFn(context)))}var import_vue2=require("vue"),render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return()=>(0,import_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn)},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.reactive)(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp==null||storybookApp.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import { renderToCanvas, decorateStory, render } from './chunk-SRVBJOBI.mjs';
+export { setup } from './chunk-SRVBJOBI.mjs';
+import { global } from '@storybook/global';
+import { start } from '@storybook/preview-api';
+
+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();
+
+export { configure, forceReRender, raw, storiesOf };

package/dist/render-32b7dd3f.d.ts

@@ -0,0 +1,148 @@
+import { ConcreteComponent, App } from 'vue';
+import { WebRenderer, ArgsStoryFn as ArgsStoryFn$1, RenderContext } from '@storybook/types';
+
+type StoryFnVueReturnType = ConcreteComponent<any>;
+interface VueRenderer extends WebRenderer {
+    component: Omit<ConcreteComponent<this['T']>, 'props'>;
+    storyResult: StoryFnVueReturnType;
+}
+
+interface SBBaseType {
+    required?: boolean;
+    raw?: string;
+}
+type SBScalarType = SBBaseType & {
+    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+type SBArrayType = SBBaseType & {
+    name: 'array';
+    value: SBType;
+};
+type SBObjectType = SBBaseType & {
+    name: 'object';
+    value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+    name: 'enum';
+    value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+    name: 'intersection';
+    value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+    name: 'union';
+    value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+    name: 'other';
+    value: string;
+};
+type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
+
+type StoryId = string;
+type ComponentId = string;
+type ComponentTitle = string;
+type StoryName = string;
+type Tag = string;
+interface StoryIdentifier {
+    componentId: ComponentId;
+    title: ComponentTitle;
+    /** @deprecated */
+    kind: ComponentTitle;
+    id: StoryId;
+    name: StoryName;
+    /** @deprecated */
+    story: StoryName;
+    tags: Tag[];
+}
+interface Parameters {
+    [name: string]: any;
+}
+type ConditionalTest = {
+    truthy?: boolean;
+} | {
+    exists: boolean;
+} | {
+    eq: any;
+} | {
+    neq: any;
+};
+type ConditionalValue = {
+    arg: string;
+} | {
+    global: string;
+};
+type Conditional = ConditionalValue & ConditionalTest;
+interface InputType {
+    name?: string;
+    description?: string;
+    defaultValue?: any;
+    type?: SBType | SBScalarType['name'];
+    if?: Conditional;
+    [key: string]: any;
+}
+interface StrictInputType extends InputType {
+    name: string;
+    type?: SBType;
+}
+interface Args {
+    [name: string]: any;
+}
+type StrictArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: StrictInputType;
+};
+type Globals = {
+    [name: string]: any;
+};
+type Renderer = {
+    /** What is the type of the `component` annotation in this renderer? */
+    component: unknown;
+    /** What does the story function return in this renderer? */
+    storyResult: unknown;
+    /** What type of element does this renderer render to? */
+    canvasElement: unknown;
+    T?: unknown;
+};
+type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryIdentifier & {
+    component?: (TRenderer & {
+        T: any;
+    })['component'];
+    subcomponents?: Record<string, (TRenderer & {
+        T: any;
+    })['component']>;
+    parameters: Parameters;
+    initialArgs: TArgs;
+    argTypes: StrictArgTypes<TArgs>;
+};
+type StoryContextUpdate<TArgs = Args> = {
+    args?: TArgs;
+    globals?: Globals;
+    [key: string]: any;
+};
+type ViewMode = 'story' | 'docs';
+type StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForEnhancers<TRenderer, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+    hooks: unknown;
+    viewMode: ViewMode;
+    originalStoryFn: StoryFn<TRenderer>;
+};
+type StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForLoaders<TRenderer, TArgs> & {
+    loaded: Record<string, any>;
+    abortSignal: AbortSignal;
+    canvasElement: TRenderer['canvasElement'];
+};
+type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
+    T: TArgs;
+})['storyResult'];
+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;
+
+export { VueRenderer as V, renderToCanvas as a, render as r, setup as s };

package/jest.config.js

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

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@storybook/vue3",
+  "version": "0.0.0-pr-23609-sha-f47ef339",
+  "description": "Storybook Vue 3 renderer",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/renderers/vue3",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/renderers/vue3"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./preview": {
+      "types": "./dist/config.d.ts",
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "vue-tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/core-client": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/docs-tools": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/global": "^5.0.0",
+    "@storybook/preview-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/types": "0.0.0-pr-23609-sha-f47ef339",
+    "lodash": "^4.17.21",
+    "ts-dedent": "^2.0.0",
+    "type-fest": "~2.19",
+    "vue-component-type-helpers": "latest"
+  },
+  "devDependencies": {
+    "@digitak/esrun": "^3.2.2",
+    "@types/prettier": "2.7.2",
+    "@vue/compiler-core": "^3.3.4",
+    "@vue/vue3-jest": "29",
+    "typescript": "~4.9.3",
+    "vue": "^3.2.47",
+    "vue-tsc": "latest"
+  },
+  "peerDependencies": {
+    "@vue/compiler-core": "^3.0.0",
+    "vue": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/config.ts"
+    ],
+    "platform": "browser"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/config.mjs';

package/src/typings.d.ts

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

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

@@ -0,0 +1,48 @@
+import MyButton from './Button.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+    onClick: {},
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/js/Button.vue

@@ -0,0 +1,52 @@
+<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/cli/js/Header.stories.js

@@ -0,0 +1,41 @@
+import MyHeader from './Header.vue';
+
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: {
+      MyHeader,
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      // Story args can be spread into the returned object
+      return {
+        ...args,
+      };
+    },
+    // Then, the spread values can be accessed directly in the template
+    template: '<my-header :user="user" />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {
+  args: {
+    user: null,
+  },
+};

package/template/cli/js/Header.vue

@@ -0,0 +1,59 @@
+<template>
+  <header>
+    <div class="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <span class="welcome" v-if="user"
+          >Welcome, <b>{{ user.name }}</b
+          >!</span
+        >
+        <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
+        <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
+        <my-button
+          primary
+          size="small"
+          @click="$emit('createAccount')"
+          label="Sign up"
+          v-if="!user"
+        />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import './header.css';
+import MyButton from './Button.vue';
+
+export default {
+  name: 'my-header',
+
+  components: { MyButton },
+
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+
+  emits: ['login', 'logout', 'createAccount'],
+};
+</script>