@storybook/vue3 7.1.0-alpha.8 → 7.1.0-beta.0

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=require("vue"),import_preview_api=require("@storybook/preview-api");function makeMap(str,expectsLowerCase){let map2=Object.create(null),list=str.split(",");for(let i=0;i<list.length;i++)map2[list[i]]=!0;return expectsLowerCase?val=>!!map2[val.toLowerCase()]:val=>!!map2[val]}var specialBooleanAttrs="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";var isBooleanAttr=makeMap(specialBooleanAttrs+",async,autofocus,autoplay,controls,default,defer,disabled,hidden,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected");function looseCompareArrays(a,b){if(a.length!==b.length)return!1;let equal=!0;for(let i=0;equal&&i<a.length;i++)equal=looseEqual(a[i],b[i]);return equal}function looseEqual(a,b){if(a===b)return!0;let aValidType=isDate(a),bValidType=isDate(b);if(aValidType||bValidType)return aValidType&&bValidType?a.getTime()===b.getTime():!1;if(aValidType=isSymbol(a),bValidType=isSymbol(b),aValidType||bValidType)return a===b;if(aValidType=isArray(a),bValidType=isArray(b),aValidType||bValidType)return aValidType&&bValidType?looseCompareArrays(a,b):!1;if(aValidType=isObject(a),bValidType=isObject(b),aValidType||bValidType){if(!aValidType||!bValidType)return!1;let aKeysCount=Object.keys(a).length,bKeysCount=Object.keys(b).length;if(aKeysCount!==bKeysCount)return!1;for(let key in a){let aHasKey=a.hasOwnProperty(key),bHasKey=b.hasOwnProperty(key);if(aHasKey&&!bHasKey||!aHasKey&&bHasKey||!looseEqual(a[key],b[key]))return!1}}return String(a)===String(b)}var EMPTY_OBJ=process.env.NODE_ENV!=="production"?Object.freeze({}):{},EMPTY_ARR=process.env.NODE_ENV!=="production"?Object.freeze([]):[];var isArray=Array.isArray;var isDate=val=>toTypeString(val)==="[object Date]";var isSymbol=val=>typeof val=="symbol",isObject=val=>val!==null&&typeof val=="object";var objectToString=Object.prototype.toString,toTypeString=value=>objectToString.call(value);var cacheStringFunction=fn=>{let cache=Object.create(null);return str=>cache[str]||(cache[str]=fn(str))},camelizeRE=/-(\w)/g,camelize=cacheStringFunction(str=>str.replace(camelizeRE,(_,c)=>c?c.toUpperCase():"")),hyphenateRE=/\B([A-Z])/g,hyphenate=cacheStringFunction(str=>str.replace(hyphenateRE,"-$1").toLowerCase()),capitalize=cacheStringFunction(str=>str.charAt(0).toUpperCase()+str.slice(1)),toHandlerKey=cacheStringFunction(str=>str?`on${capitalize(str)}`:"");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){let updatedArgs;return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api.sanitizeStoryContextUpdate)(update)}),update&&update.args&&!looseEqual(update.args,context.args)&&(updatedArgs??=update.args),story),context);return context.args=updatedArgs??context.args,story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue.h)(story,context.args))},context=>prepare(storyFn(context)))}var import_vue2=require("vue"),slotsMap=new Map,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,createOrUpdateSlots(context))},setupFunction=_app=>{},setup=fn=>{setupFunction=fn},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,appState.reactiveArgs)}});return vueApp.config.errorHandler=e=>showException(e),setupFunction(vueApp),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)}function createOrUpdateSlots(context){let{id:storyID,component}=context,slots=generateSlots(context);if(slotsMap.has(storyID)){let app=slotsMap.get(storyID);return app!=null&&app.reactiveSlots&&updateArgs(app.reactiveSlots,slots),app==null?void 0:app.reactiveSlots}return slotsMap.set(storyID,{component,reactiveSlots:slots}),slots}var RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=require("vue"),import_preview_api=require("@storybook/preview-api");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue.h)(story))},context=>prepare(storyFn(context)))}var import_vue2=require("vue"),render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return()=>(0,import_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn)},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.reactive)(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp==null||storybookApp.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});

package/dist/index.mjs

@@ -1 +1,8 @@
-import{decorateStory,render,renderToCanvas,setup}from"./chunk-7CGPMEMZ.mjs";import{global}from"@storybook/global";var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";import{start}from"@storybook/preview-api";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,setup,storiesOf};
+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/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.1.0-alpha.8",
+  "version": "7.1.0-beta.0",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/vue3",
+  "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": "renderers/vue3"
+    "directory": "code/renderers/vue3"
   },
   "funding": {
     "type": "opencollective",
@@ -21,15 +21,15 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./preview": {
+      "types": "./dist/config.d.ts",
       "require": "./dist/config.js",
-      "import": "./dist/config.mjs",
-      "types": "./dist/config.d.ts"
+      "import": "./dist/config.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -48,23 +48,27 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.1.0-alpha.8",
-    "@storybook/docs-tools": "7.1.0-alpha.8",
+    "@storybook/core-client": "7.1.0-beta.0",
+    "@storybook/docs-tools": "7.1.0-beta.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.8",
-    "@storybook/types": "7.1.0-alpha.8",
+    "@storybook/preview-api": "7.1.0-beta.0",
+    "@storybook/types": "7.1.0-beta.0",
+    "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
-    "type-fest": "2.19.0"
+    "type-fest": "^3.11.0",
+    "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": "^1.2.0"
+    "vue-tsc": "latest"
   },
   "peerDependencies": {
+    "@vue/compiler-core": "^3.0.0",
     "vue": "^3.0.0"
   },
   "engines": {
@@ -80,5 +84,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "ae73d1c8065f7d614cfe6f3462ae7ca55a0c4e6b"
-}
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

package/src/typings.d.ts

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

package/template/cli/js/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <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">

package/template/cli/js/Page.vue

@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @createAccount="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

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

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <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">

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

@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a>
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
+          >Storybook tutorials</a
+        >
         . Read more in the
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a" fill="#999" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <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">

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

@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a>
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
+          >Storybook tutorials</a
+        >
         . Read more in the
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a" fill="#999" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>

package/template/components/Form.vue

@@ -2,7 +2,7 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input type="text" data-testid="value" v-model="value" required />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +27,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {

package/template/stories/preview.js

@@ -2,12 +2,37 @@ import { global as globalThis } from '@storybook/global';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { setup } from '@storybook/vue3';
 
-// TODO: I'd like to be able to export rather than imperatively calling an imported function
-// export const setup = (app) => {
-//   app.component('GlobalButton', Button);
-// };
+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`
+      return options.greetings[key];
+    };
+  },
+};
+const someColor = 'someColor';
 
+// add components to global scope
 setup((app) => {
   // This adds a component that can be used globally in stories
   app.component('GlobalButton', globalThis.Components.Button);
 });
+
+// this adds a plugin to vue app that can be used globally in stories
+setup((app, context) => {
+  app.use(somePlugin, {
+    greetings: {
+      hello: `Hello Story! from some plugin your name is ${context?.name}!`,
+      welcome: `Welcome Story! from some plugin your name is ${context?.name}!`,
+      hi: `Hi Story! from some plugin your name is ${context?.name}!`,
+    },
+  });
+});
+
+// additonal setup to provide some propriety  to the app
+setup((app, context) => {
+  app.provide(someColor, 'green');
+});

package/template/{stories → stories_vue3-vite-default-ts}/CustomRenderFunctionalComponent.stories.ts

@@ -27,8 +27,6 @@ export {
   NoDecorators,
   DecoratorFunctionalComponent,
   DecoratorFunctionalComponentArgsFromContext,
-  DecoratorFunctionalComponentArgsFromProps,
   DecoratorComponentOptions,
   DecoratorComponentOptionsArgsFromData,
-  DecoratorComponentOptionsArgsFromProps,
 } from './ReactiveDecorators.stories';

package/template/{stories → stories_vue3-vite-default-ts}/CustomRenderOptionsArgsFromData.stories.ts

@@ -40,8 +40,6 @@ export {
   NoDecorators,
   DecoratorFunctionalComponent,
   DecoratorFunctionalComponentArgsFromContext,
-  DecoratorFunctionalComponentArgsFromProps,
   DecoratorComponentOptions,
   DecoratorComponentOptionsArgsFromData,
-  DecoratorComponentOptionsArgsFromProps,
 } from './ReactiveDecorators.stories';

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

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

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

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

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

@@ -0,0 +1,3 @@
+<template>
+  <global-button />
+</template>

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

@@ -10,7 +10,7 @@ const icons = {
   },
 };
 
-export default {
+const meta = {
   component: OverrideArgs,
   argTypes: {
     // To show that other props are passed through
@@ -39,4 +39,6 @@ export default {
   },
 };
 
+export default meta;
+
 export const TestOne = {};

package/template/{stories → stories_vue3-vite-default-ts}/ReactiveArgs.stories.ts

@@ -88,10 +88,12 @@ export const ReactiveHtmlWrapper: Story = {
 };
 
 // to test that Simple html Decorators in CSF2 format are applied correctly in reactive mode
-const ReactiveCSF2WrapperTempl: StoryFn = (args, { argTypes }) => ({
+const ReactiveCSF2WrapperTempl: StoryFn = (args) => ({
   components: { ReactiveArgs },
-  props: Object.keys(argTypes),
-  template: '<ReactiveArgs v-bind="$props" />',
+  setup() {
+    return { args };
+  },
+  template: '<ReactiveArgs v-bind="args" />',
 });
 
 export const ReactiveCSF2Wrapper = ReactiveCSF2WrapperTempl.bind({});

package/template/{stories → stories_vue3-vite-default-ts}/ReactiveDecorators.stories.ts

@@ -51,7 +51,7 @@ export const DecoratorFunctionalComponent: Story = {
   decorators: [
     (storyFn, context) => {
       const story = storyFn();
-      return () => h('div', [h('h2', ['Decorator not using args']), [h(story, context.args)]]);
+      return () => h('div', [h('h2', ['Decorator not using args']), [h(story)]]);
     },
   ],
 };
@@ -61,20 +61,7 @@ export const DecoratorFunctionalComponentArgsFromContext: Story = {
     (storyFn, context) => {
       const story = storyFn();
       return () =>
-        h('div', [
-          h('h2', ['Decorator using args.label: ', context.args.label]),
-          [h(story, context.args)],
-        ]);
-    },
-  ],
-};
-
-export const DecoratorFunctionalComponentArgsFromProps: Story = {
-  decorators: [
-    (storyFn, context) => {
-      const story = storyFn();
-      return (args) =>
-        h('div', [h('h2', `Decorator using args.label: ${args.label}`), h(story, context.args)]);
+        h('div', [h('h2', ['Decorator using args.label: ', context.args.label]), [h(story)]]);
     },
   ],
 };
@@ -99,14 +86,3 @@ export const DecoratorComponentOptionsArgsFromData: Story = {
     },
   ],
 };
-
-export const DecoratorComponentOptionsArgsFromProps: Story = {
-  decorators: [
-    (storyFn, context) => {
-      return {
-        props: ['label'],
-        template: '<div><h2>Decorator using label: {{label}}</h2><story /></div>',
-      };
-    },
-  ],
-};

package/template/{stories → stories_vue3-vite-default-ts}/ScopedSlots.stories.ts

@@ -60,7 +60,7 @@ export const CustomRender: Story = {
     setup() {
       return { args };
     },
-    template: `<MySlotComponent :label="args.label" v-slot="slotProps">
+    template: `<MySlotComponent v-bind="args" v-slot="slotProps">
   	              {{ slotProps.text }}, {{ slotProps.year }}
               </MySlotComponent>`,
   }),
@@ -73,7 +73,7 @@ export const CustomRenderUsingFunctionSlot: Story = {
     setup() {
       return { args };
     },
-    template: `<MySlotComponent :label="args.label" v-slot="slotProps">
+    template: `<MySlotComponent v-bind="args" v-slot="slotProps">
   	            {{args.default(slotProps)}}
               </MySlotComponent>`,
   }),