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

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))},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,appState.reactiveArgs)}});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)}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-3MGVBGQN.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/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.1.0-alpha.9",
+  "version": "7.1.0-beta.1",
   "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.9",
-    "@storybook/docs-tools": "7.1.0-alpha.9",
+    "@storybook/core-client": "7.1.0-beta.1",
+    "@storybook/docs-tools": "7.1.0-beta.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.9",
-    "@storybook/types": "7.1.0-alpha.9",
+    "@storybook/preview-api": "7.1.0-beta.1",
+    "@storybook/types": "7.1.0-beta.1",
+    "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": "ec112401efaae6d3d4996c790a30301177570da9"
-}
+  "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.ts → preview.js}

@@ -1,25 +1,12 @@
-import type { App, Plugin } from 'vue';
-import type { StoryContext } from '@storybook/csf';
 import { global as globalThis } from '@storybook/global';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { setup, type VueRenderer } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $greetingMessage: (key: string) => string;
-  }
-}
-
-declare global {
-  // eslint-disable-next-line no-var,vars-on-top
-  var Components: Record<string, any>;
-}
-
-const somePlugin: Plugin = {
-  install: (app: App, options) => {
+const somePlugin = {
+  install: (app, options) => {
     // inject a globally available $greetingText() method
     // eslint-disable-next-line no-param-reassign
-    app.config.globalProperties.$greetingMessage = (key: string) => {
+    app.config.globalProperties.$greetingMessage = (key) => {
       // retrieve a nested property in `options`
       // using `key`
       return options.greetings[key];
@@ -29,13 +16,13 @@ const somePlugin: Plugin = {
 const someColor = 'someColor';
 
 // add components to global scope
-setup((app: App) => {
+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: App, context?: StoryContext<VueRenderer>) => {
+setup((app, context) => {
   app.use(somePlugin, {
     greetings: {
       hello: `Hello Story! from some plugin your name is ${context?.name}!`,
@@ -46,6 +33,6 @@ setup((app: App, context?: StoryContext<VueRenderer>) => {
 });
 
 // additonal setup to provide some propriety  to the app
-setup((app: App, context) => {
+setup((app, context) => {
   app.provide(someColor, 'green');
 });

package/template/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_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 → stories_vue3-vite-default-ts}/GlobalSetup.stories.ts

@@ -1,5 +1,8 @@
+/// <reference types="jest" />
+/// <reference types="testing-library__jest-dom" />
+
 import { expect } from '@storybook/jest';
-import type { Meta, StoryObj } from 'renderers/vue3/src';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import { within } from '@storybook/testing-library';
 import { inject } from 'vue';
 import GlobalSetup from './GlobalSetup.vue';

package/template/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_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_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>`,
   }),

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import GlobalUsage from './GlobalUsage.vue';
+import GlobalSetup from './GlobalSetup.vue';
+
+const meta: Meta = {
+  component: GlobalUsage,
+  argTypes: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof GlobalUsage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MultiComponents: Story = {
+  args: {
+    label: 'Button',
+    size: 'large',
+    backgroundColor: '#aa00ff',
+    btn1Args: { label: 'Button 10', size: 'small', backgroundColor: '#aa00ff' },
+  },
+  render(args: any) {
+    return {
+      components: { GlobalUsage, GlobalSetup },
+      setup() {
+        return { args };
+      },
+      template: `<div style="background-color:pink;opacity:0.9;padding:20px" >
+                  
+                  <div style="display:flex;gap:10px">
+                    <img src="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png" width="200" />  
+                    <GlobalUsage v-bind="args.btn1Args" />&nbsp;
+                  </div>
+                  <h2>Complex Story Custom template </h2> <br/> <hr/>
+                
+                <GlobalSetup  :label="args.label" />
+                <div style="margin:8px"><span style="font-size:28px;color:green">Multiple </span>
+                <span style="background-color:magenta;opacity:0.9;padding:8px"><i>Components</i></span></div>
+                <div style="display:flex;gap:10px">
+                  <GlobalUsage v-bind="args" />
+                  <GlobalUsage label="Static Label Dynamic color" :background-color="args.backgroundColor"/>  
+                </div>   
+               </div>`,
+    };
+  },
+};

package/template/stories_vue3-vite-default-ts/preview.ts

@@ -0,0 +1,12 @@
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $greetingMessage: (key: string) => string;
+  }
+}
+
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top
+  var Components: Record<string, any>;
+}
+
+export default {};

package/dist/chunk-3MGVBGQN.mjs

@@ -1 +0,0 @@
-var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));import{h}from"vue";import{sanitizeStoryContextUpdate}from"@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=Object.freeze({}),EMPTY_ARR=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 h(story)}}}function decorateStory(storyFn,decorators){let updatedArgs;return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...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,()=>h(story,context.args))},context=>prepare(storyFn(context)))}import{createApp,h as h2,reactive,isVNode,isReactive}from"vue";var 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 h2(Component,props,createOrUpdateSlots(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),()=>h2(rootElement,appState.reactiveArgs)}});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)}function createOrUpdateSlots(context){let{id:storyID,component}=context,slots=generateSlots(context);if(slotsMap.has(storyID)){let app=slotsMap.get(storyID);return app?.reactiveSlots&&updateArgs(app.reactiveSlots,slots),app?.reactiveSlots}return slotsMap.set(storyID,{component,reactiveSlots:slots}),slots}export{__commonJS,__toESM,isArray,decorateStory,render,setup,renderToCanvas};

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

@@ -1,33 +0,0 @@
-import type { Meta } from '@storybook/vue3';
-import { defineComponent } from 'vue';
-import Reactivity from './Reactivity.vue';
-import * as ReactiveDecorators from './ReactiveDecorators.stories';
-
-const meta = {
-  ...ReactiveDecorators.default,
-  component: Reactivity,
-  render: (args, { argTypes }) => {
-    return defineComponent({
-      props: Object.keys(argTypes),
-      components: { Reactivity },
-      template: `<div>Custom render uses options api and binds args to props: <Reactivity v-bind="$props">
-         <template #header="{title}"><h3>{{ header }} - Title: {{ title }}</h3></template>
-         {{ $props.default }}
-         <template #footer>{{ footer }}</template>
-         </Reactivity>
-        </div>`,
-    });
-  },
-} satisfies Meta<typeof Reactivity>;
-
-export default meta;
-
-export {
-  NoDecorators,
-  DecoratorFunctionalComponent,
-  DecoratorFunctionalComponentArgsFromContext,
-  DecoratorFunctionalComponentArgsFromProps,
-  DecoratorComponentOptions,
-  DecoratorComponentOptionsArgsFromData,
-  DecoratorComponentOptionsArgsFromProps,
-} from './ReactiveDecorators.stories';