@storybook/vue 7.6.0 → 8.0.0-alpha.0

package/dist/entry-preview.mjs

@@ -1,5 +1,10 @@
-export { decorateStory as applyDecorators, render, renderToCanvas } from './chunk-DOPQCPG5.mjs';
+import { dedent } from 'ts-dedent';
+import Vue from 'vue';
+import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
 
-var parameters={renderer:"vue"};
+var COMPONENT="STORYBOOK_COMPONENT",VALUES="STORYBOOK_VALUES",map=new Map,getRoot=canvasElement=>{let cachedInstance=map.get(canvasElement);if(cachedInstance!=null)return cachedInstance;let target=document.createElement("div");canvasElement.appendChild(target);let instance=new Vue({beforeDestroy(){map.delete(canvasElement);},data(){return {[COMPONENT]:void 0,[VALUES]:{}}},render(h){return map.set(canvasElement,instance),this[COMPONENT]?[h(this[COMPONENT])]:void 0}});return instance},render=(args,context)=>{let{id,component:Component,argTypes}=context,component=Component;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let componentName="component";component.name?componentName=Vue.config.isReservedTag&&Vue.config.isReservedTag(component.name)?`sb-${component.name}`:component.name:component.__docgenInfo?.displayName&&(componentName=component.__docgenInfo?.displayName);let eventsBinding="",eventProps=Object.values(argTypes).filter(argType=>argType?.table?.category==="events").map(argType=>argType.name),camelCase=str=>str.replace(/-([a-z])/g,g=>g[1].toUpperCase());return eventProps.length&&(eventsBinding=eventProps.map(name=>`@${name}="$props['${camelCase(name)}']"`).join(" ")),{props:Object.keys(argTypes),components:{[componentName]:component},template:`<${componentName} ${eventsBinding} v-bind="filterOutEventProps($props)" />`,methods:{filterOutEventProps(props){return Object.fromEntries(Object.entries(props).filter(([key])=>!eventProps.includes(key)))}}}};function renderToCanvas({title,name,storyFn,showMain,showError,showException,forceRemount},canvasElement){let root=getRoot(canvasElement);Vue.config.errorHandler=showException;let element=storyFn(),mountTarget;if(canvasElement.hasChildNodes()?mountTarget=canvasElement.firstElementChild:(mountTarget=document.createElement("div"),canvasElement.appendChild(mountTarget)),!element){showError({title:`Expecting a Vue component from the story: "${name}" of "${title}".`,description:dedent`
+        Did you forget to return the Vue component from the story?
+        Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
+      `});return}(!root[COMPONENT]||forceRemount)&&(root[COMPONENT]=element),root[VALUES]={...element.options[VALUES]},map.has(canvasElement)||root.$mount(mountTarget??void 0),showMain();}function getType(fn){let match=fn&&fn.toString().match(/^\s*function (\w+)/);return match?match[1]:""}function resolveDefault({type,default:def}){return typeof def=="function"&&getType(type)!=="Function"?def.call():def}function extractProps(component){return Object.entries(component.options.props||{}).map(([name,prop])=>({[name]:resolveDefault(prop)})).reduce((wrap,prop)=>({...wrap,...prop}),{})}var WRAPS="STORYBOOK_WRAPS";function prepare(rawStory,innerStory,context){let story;if(typeof rawStory=="string")story={template:rawStory};else if(rawStory!=null)story=rawStory;else return null;if(!story._isVue)innerStory&&(story.components={...story.components||{},story:innerStory}),story=Vue.extend(story);else if(story.options[WRAPS])return story;return Vue.extend({[WRAPS]:story,[VALUES]:{...innerStory?innerStory.options[VALUES]:{},...extractProps(story),...context?.args||{}},functional:!0,render(h,{data,parent,children}){return h(story,{...data,props:{...data.props||{},...parent.$root[VALUES]}},children)}})}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,story)},context=>prepare(storyFn(context),void 0,context))}var parameters={renderer:"vue"};
 
-export { parameters };
+export { decorateStory as applyDecorators, parameters, render, renderToCanvas };

package/dist/index.d.ts

@@ -1,20 +1,9 @@
-import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, StoryAnnotations, ArgsFromMeta, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
+import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, StoryAnnotations, ArgsFromMeta, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { V as VueRenderer } from './types-317e5359.js';
 import { Simplify, SetOptional } from 'type-fest';
 import { Component } from 'vue';
 import { ExtendedVue } from 'vue/types/vue';
-
-interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
-    configure(loader: Addon_Loadable, module: NodeModule): void;
-    forceReRender(): void;
-    raw: () => any;
-    load: (...args: any[]) => void;
-}
-declare const storiesOf: ClientApi['storiesOf'];
-declare const configure: ClientApi['configure'];
-declare const forceReRender: ClientApi['forceReRender'];
-declare const raw: ClientApi['raw'];
+import { V as VueRenderer } from './types-317e5359.js';
 
 /**
  * Metadata to configure the stories for a component.
@@ -55,4 +44,4 @@ type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
 type Preview = ProjectAnnotations<VueRenderer>;
 
-export { Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer, configure, forceReRender, raw, storiesOf };
+export { Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer };

package/dist/index.js

@@ -1,4 +1 @@
-"use strict";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 __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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue";var import_preview_api2=require("@storybook/preview-api");var import_ts_dedent=require("ts-dedent"),import_vue=__toESM(require("vue")),COMPONENT="STORYBOOK_COMPONENT",VALUES="STORYBOOK_VALUES",map=new Map,getRoot=canvasElement=>{let cachedInstance=map.get(canvasElement);if(cachedInstance!=null)return cachedInstance;let target=document.createElement("div");canvasElement.appendChild(target);let instance=new import_vue.default({beforeDestroy(){map.delete(canvasElement)},data(){return{[COMPONENT]:void 0,[VALUES]:{}}},render(h){return map.set(canvasElement,instance),this[COMPONENT]?[h(this[COMPONENT])]:void 0}});return instance},render=(args,context)=>{var _a2,_b;let{id,component:Component,argTypes}=context,component=Component;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let componentName="component";component.name?componentName=import_vue.default.config.isReservedTag&&import_vue.default.config.isReservedTag(component.name)?`sb-${component.name}`:component.name:(_a2=component.__docgenInfo)!=null&&_a2.displayName&&(componentName=(_b=component.__docgenInfo)==null?void 0:_b.displayName);let eventsBinding="",eventProps=Object.values(argTypes).filter(argType=>{var _a3;return((_a3=argType==null?void 0:argType.table)==null?void 0:_a3.category)==="events"}).map(argType=>argType.name),camelCase=str=>str.replace(/-([a-z])/g,g=>g[1].toUpperCase());return eventProps.length&&(eventsBinding=eventProps.map(name=>`@${name}="$props['${camelCase(name)}']"`).join(" ")),{props:Object.keys(argTypes),components:{[componentName]:component},template:`<${componentName} ${eventsBinding} v-bind="filterOutEventProps($props)" />`,methods:{filterOutEventProps(props){return Object.fromEntries(Object.entries(props).filter(([key])=>!eventProps.includes(key)))}}}};function renderToCanvas({title,name,storyFn,showMain,showError,showException,forceRemount},canvasElement){let root=getRoot(canvasElement);import_vue.default.config.errorHandler=showException;let element=storyFn(),mountTarget;if(canvasElement.hasChildNodes()?mountTarget=canvasElement.firstElementChild:(mountTarget=document.createElement("div"),canvasElement.appendChild(mountTarget)),!element){showError({title:`Expecting a Vue component from the story: "${name}" of "${title}".`,description:import_ts_dedent.dedent`
-        Did you forget to return the Vue component from the story?
-        Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
-      `});return}(!root[COMPONENT]||forceRemount)&&(root[COMPONENT]=element),root[VALUES]={...element.options[VALUES]},map.has(canvasElement)||root.$mount(mountTarget??void 0),showMain()}var import_vue2=__toESM(require("vue")),import_preview_api=require("@storybook/preview-api");function getType(fn){let match=fn&&fn.toString().match(/^\s*function (\w+)/);return match?match[1]:""}function resolveDefault({type,default:def}){return typeof def=="function"&&getType(type)!=="Function"?def.call():def}function extractProps(component){return Object.entries(component.options.props||{}).map(([name,prop])=>({[name]:resolveDefault(prop)})).reduce((wrap,prop)=>({...wrap,...prop}),{})}var WRAPS="STORYBOOK_WRAPS";function prepare(rawStory,innerStory,context){let story;if(typeof rawStory=="string")story={template:rawStory};else if(rawStory!=null)story=rawStory;else return null;if(!story._isVue)innerStory&&(story.components={...story.components||{},story:innerStory}),story=import_vue2.default.extend(story);else if(story.options[WRAPS])return story;return import_vue2.default.extend({[WRAPS]:story,[VALUES]:{...innerStory?innerStory.options[VALUES]:{},...extractProps(story),...(context==null?void 0:context.args)||{}},functional:!0,render(h,{data,parent,children}){return h(story,{...data,props:{...data.props||{},...parent.$root[VALUES]}},children)}})}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,story)},context=>prepare(storyFn(context),void 0,context))}var RENDERER="vue",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.forceReRender,raw=api.clientApi.raw;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,storiesOf});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue";var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());

package/dist/index.mjs

@@ -1,7 +1,3 @@
-import { renderToCanvas, decorateStory, render } from './chunk-DOPQCPG5.mjs';
 import { global } from '@storybook/global';
-import { start } from '@storybook/preview-api';
 
-var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue";var RENDERER="vue",api=start(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;typeof module<"u"&&module?.hot?.decline();
-
-export { configure, forceReRender, raw, storiesOf };
+var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue";typeof module<"u"&&module?.hot?.decline();

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/vue",
-  "version": "7.6.0",
+  "version": "8.0.0-alpha.0",
   "description": "Storybook Vue renderer",
   "keywords": [
     "storybook"
@@ -47,17 +47,16 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.6.0",
-    "@storybook/core-client": "7.6.0",
-    "@storybook/docs-tools": "7.6.0",
+    "@storybook/client-logger": "8.0.0-alpha.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",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19"
   },
   "devDependencies": {
-    "typescript": "~4.9.3",
+    "typescript": "^5.3.2",
     "vue": "2.6.14",
     "vue-tsc": "latest"
   },

package/dist/chunk-DOPQCPG5.mjs

@@ -1,10 +0,0 @@
-import { dedent } from 'ts-dedent';
-import Vue from 'vue';
-import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
-
-var COMPONENT="STORYBOOK_COMPONENT",VALUES="STORYBOOK_VALUES",map=new Map,getRoot=canvasElement=>{let cachedInstance=map.get(canvasElement);if(cachedInstance!=null)return cachedInstance;let target=document.createElement("div");canvasElement.appendChild(target);let instance=new Vue({beforeDestroy(){map.delete(canvasElement);},data(){return {[COMPONENT]:void 0,[VALUES]:{}}},render(h){return map.set(canvasElement,instance),this[COMPONENT]?[h(this[COMPONENT])]:void 0}});return instance},render=(args,context)=>{let{id,component:Component,argTypes}=context,component=Component;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let componentName="component";component.name?componentName=Vue.config.isReservedTag&&Vue.config.isReservedTag(component.name)?`sb-${component.name}`:component.name:component.__docgenInfo?.displayName&&(componentName=component.__docgenInfo?.displayName);let eventsBinding="",eventProps=Object.values(argTypes).filter(argType=>argType?.table?.category==="events").map(argType=>argType.name),camelCase=str=>str.replace(/-([a-z])/g,g=>g[1].toUpperCase());return eventProps.length&&(eventsBinding=eventProps.map(name=>`@${name}="$props['${camelCase(name)}']"`).join(" ")),{props:Object.keys(argTypes),components:{[componentName]:component},template:`<${componentName} ${eventsBinding} v-bind="filterOutEventProps($props)" />`,methods:{filterOutEventProps(props){return Object.fromEntries(Object.entries(props).filter(([key])=>!eventProps.includes(key)))}}}};function renderToCanvas({title,name,storyFn,showMain,showError,showException,forceRemount},canvasElement){let root=getRoot(canvasElement);Vue.config.errorHandler=showException;let element=storyFn(),mountTarget;if(canvasElement.hasChildNodes()?mountTarget=canvasElement.firstElementChild:(mountTarget=document.createElement("div"),canvasElement.appendChild(mountTarget)),!element){showError({title:`Expecting a Vue component from the story: "${name}" of "${title}".`,description:dedent`
-        Did you forget to return the Vue component from the story?
-        Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
-      `});return}(!root[COMPONENT]||forceRemount)&&(root[COMPONENT]=element),root[VALUES]={...element.options[VALUES]},map.has(canvasElement)||root.$mount(mountTarget??void 0),showMain();}function getType(fn){let match=fn&&fn.toString().match(/^\s*function (\w+)/);return match?match[1]:""}function resolveDefault({type,default:def}){return typeof def=="function"&&getType(type)!=="Function"?def.call():def}function extractProps(component){return Object.entries(component.options.props||{}).map(([name,prop])=>({[name]:resolveDefault(prop)})).reduce((wrap,prop)=>({...wrap,...prop}),{})}var WRAPS="STORYBOOK_WRAPS";function prepare(rawStory,innerStory,context){let story;if(typeof rawStory=="string")story={template:rawStory};else if(rawStory!=null)story=rawStory;else return null;if(!story._isVue)innerStory&&(story.components={...story.components||{},story:innerStory}),story=Vue.extend(story);else if(story.options[WRAPS])return story;return Vue.extend({[WRAPS]:story,[VALUES]:{...innerStory?innerStory.options[VALUES]:{},...extractProps(story),...context?.args||{}},functional:!0,render(h,{data,parent,children}){return h(story,{...data,props:{...data.props||{},...parent.$root[VALUES]}},children)}})}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,story)},context=>prepare(storyFn(context),void 0,context))}
-
-export { decorateStory, render, renderToCanvas };