@storybook/vue3 7.6.0 → 8.0.0-alpha.0

package/dist/chunk-OTMFLEOE.mjs

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

package/dist/entry-preview.mjs

@@ -1,5 +1,7 @@
-export { decorateStory as applyDecorators, render, renderToCanvas } from './chunk-UXHY756F.mjs';
+export { render, renderToCanvas } from './chunk-OTMFLEOE.mjs';
+import { h } from 'vue';
+import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
 
-var parameters={renderer:"vue3"};
+function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return h(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=sanitizeStoryContextUpdate(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>h(story))},context=>prepare(storyFn(context)))}var parameters={renderer:"vue3"};
 
-export { parameters };
+export { decorateStory as applyDecorators, parameters };

package/dist/index.d.ts

@@ -1,23 +1,10 @@
-import * as _storybook_types from '@storybook/types';
-import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
+export { s as setup } from './render-18d12fa7.js';
+import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { App, FunctionalComponent, VNodeChild } from 'vue';
-import { V as VueRenderer } from './types-ad933ac1.js';
 import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
+import { FunctionalComponent, VNodeChild } from 'vue';
 import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
-export { s as setup } from './render-18d12fa7.js';
-
-interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
-    configure(loader: Addon_Loadable, module: NodeModule): void;
-    forceReRender(): void;
-    raw: () => any;
-    load: (...args: any[]) => void;
-    app: App;
-}
-declare const storiesOf: ClientApi['storiesOf'];
-declare const configure: ClientApi['configure'];
-declare const forceReRender: () => void;
-declare const raw: ((...args: any[]) => never) | (() => _storybook_types.BoundStory<VueRenderer>[] | undefined);
+import { V as VueRenderer } from './types-ad933ac1.js';
 
 /**
  * Metadata to configure the stories for a component.
@@ -62,4 +49,4 @@ type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
 type Preview = ProjectAnnotations<VueRenderer>;
 
-export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer, configure, forceReRender, raw, storiesOf };
+export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer };

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";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;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,getSlots(props,context))},setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)},runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)))},map=new Map;async function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_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),await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return 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;try{(_a=module==null?void 0:module.hot)!=null&&_a.decline&&module.hot.decline()}catch{}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,{setup:()=>setup});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var import_vue=require("vue");var setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)};var _a;try{(_a=module==null?void 0:module.hot)!=null&&_a.decline&&module.hot.decline()}catch{}0&&(module.exports={setup});

package/dist/index.mjs

@@ -1,8 +1,4 @@
-import { renderToCanvas, decorateStory, render } from './chunk-UXHY756F.mjs';
-export { setup } from './chunk-UXHY756F.mjs';
+export { setup } from './chunk-OTMFLEOE.mjs';
 import { global } from '@storybook/global';
-import { start } from '@storybook/preview-api';
 
-var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;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;try{module?.hot?.decline&&module.hot.decline();}catch{}
-
-export { configure, forceReRender, raw, storiesOf };
+var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;try{module?.hot?.decline&&module.hot.decline();}catch{}

package/dist/preset.d.ts

@@ -1,5 +1,5 @@
-import { StorybookConfig } from '@storybook/types';
+import { PresetProperty } from '@storybook/types';
 
-declare const previewAnnotations: StorybookConfig['previewAnnotations'];
+declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
 
 export { previewAnnotations };

package/dist/preset.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 preset_exports={};__export(preset_exports,{previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_path=require("path"),previewAnnotations=async(input,options)=>{let docsEnabled=Object.keys(await options.presets.apply("docs",{},options)).length>0;return[].concat(input).concat([(0,import_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={previewAnnotations});
+"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 preset_exports={};__export(preset_exports,{previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_path=require("path"),previewAnnotations=async(input=[],options)=>{let docsEnabled=Object.keys(await options.presets.apply("docs",{},options)).length>0;return[].concat(input).concat([(0,import_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={previewAnnotations});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.6.0",
+  "version": "8.0.0-alpha.0",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -47,11 +47,10 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.6.0",
-    "@storybook/docs-tools": "7.6.0",
+    "@storybook/docs-tools": "8.0.0-alpha.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.6.0",
-    "@storybook/types": "7.6.0",
+    "@storybook/preview-api": "8.0.0-alpha.0",
+    "@storybook/types": "8.0.0-alpha.0",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19",
@@ -63,7 +62,7 @@
     "@vue/compiler-core": "^3.3.4",
     "@vue/vue3-jest": "29",
     "babel-jest": "^29.7.0",
-    "typescript": "~4.9.3",
+    "typescript": "^5.3.2",
     "vue": "^3.2.47",
     "vue-tsc": "latest"
   },

package/dist/chunk-UXHY756F.mjs

@@ -1,6 +0,0 @@
-import { h, createApp, reactive, isVNode, isReactive } from 'vue';
-import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
-
-function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return h(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=sanitizeStoryContextUpdate(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>h(story))},context=>prepare(storyFn(context)))}var render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return ()=>h(Component,props,getSlots(props,context))},setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn);},runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)));},map=new Map;async function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement);}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=createApp({setup(){storyContext.args=reactive(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:reactive(args)};return map.set(canvasElement,appState),()=>h(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement);}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&isVNode(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=isReactive(reactiveArgs)?reactiveArgs:reactive(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key];}),Object.assign(currentArgs,nextArgs);}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement);}
-
-export { decorateStory, render, renderToCanvas, setup };