@storybook/vue3 7.1.0-alpha.10 → 7.1.0-alpha.12

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=>(story=decorated({...context,...(0,import_preview_api.sanitizeStoryContextUpdate)(update)}),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-MXT6TDY3.mjs';
+export { setup } from './chunk-MXT6TDY3.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.10",
+  "version": "7.1.0-alpha.12",
   "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,11 +48,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.1.0-alpha.10",
-    "@storybook/docs-tools": "7.1.0-alpha.10",
+    "@storybook/core-client": "7.1.0-alpha.12",
+    "@storybook/docs-tools": "7.1.0-alpha.12",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.10",
-    "@storybook/types": "7.1.0-alpha.10",
+    "@storybook/preview-api": "7.1.0-alpha.12",
+    "@storybook/types": "7.1.0-alpha.12",
     "ts-dedent": "^2.0.0",
     "type-fest": "2.19.0"
   },
@@ -80,5 +80,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "e7c833e690dd0d2966ffb7fb806a3bda89a508c8"
+  "gitHead": "8de6963fca74d5952f5cb5737e34fb4e1ddfd0f6"
 }

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_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/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';