@storybook/vue3 8.0.0-alpha.6 → 8.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-OTMFLEOE.mjs → chunk-VTQTCWGM.mjs} +1 -1
- package/dist/entry-preview.js +1 -1
- package/dist/entry-preview.mjs +1 -1
- package/dist/index.d.ts +1 -11
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
- package/template/cli/js/Button.stories.js +5 -10
- package/template/cli/ts-3-8/Button.stories.ts +6 -3
- package/template/cli/ts-4-9/Button.stories.ts +6 -3
@@ -1,5 +1,5 @@
|
|
1
1
|
import { h, createApp, reactive, isVNode, isReactive } from 'vue';
|
2
2
|
|
3
|
-
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);}
|
3
|
+
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,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):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);}
|
4
4
|
|
5
5
|
export { render, renderToCanvas, setup };
|
package/dist/entry-preview.js
CHANGED
@@ -1 +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 entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_vue=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_vue.h)(Component,props,getSlots(props,context))};var 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_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.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&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.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)}var import_vue2=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_vue2.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_vue2.h)(story))},context=>prepare(storyFn(context)))}var parameters={renderer:"vue3"};0&&(module.exports={applyDecorators,parameters,render,renderToCanvas});
|
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 entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_vue=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_vue.h)(Component,props,getSlots(props,context))};var 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_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.h)(rootElement)}});return vueApp.config.errorHandler=(e,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):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&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.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)}var import_vue2=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_vue2.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_vue2.h)(story))},context=>prepare(storyFn(context)))}var parameters={renderer:"vue3"};0&&(module.exports={applyDecorators,parameters,render,renderToCanvas});
|
package/dist/entry-preview.mjs
CHANGED
package/dist/index.d.ts
CHANGED
@@ -34,19 +34,9 @@ type AllowNonFunctionSlots<Slots> = {
|
|
34
34
|
};
|
35
35
|
type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
|
36
36
|
type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs extends FunctionalComponent<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs;
|
37
|
-
/**
|
38
|
-
* @deprecated Use `StoryFn` instead.
|
39
|
-
* Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
|
40
|
-
* You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
|
41
|
-
*
|
42
|
-
* Story function that represents a CSFv2 component example.
|
43
|
-
*
|
44
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
45
|
-
*/
|
46
|
-
type Story<TArgs = Args> = StoryFn<TArgs>;
|
47
37
|
type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
|
48
38
|
type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
|
49
39
|
type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
|
50
40
|
type Preview = ProjectAnnotations<VueRenderer>;
|
51
41
|
|
52
|
-
export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview,
|
42
|
+
export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, VueRenderer };
|
package/dist/index.mjs
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export { setup } from './chunk-
|
1
|
+
export { setup } from './chunk-VTQTCWGM.mjs';
|
2
2
|
import { global } from '@storybook/global';
|
3
3
|
|
4
4
|
var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;try{module?.hot?.decline&&module.hot.decline();}catch{}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@storybook/vue3",
|
3
|
-
"version": "8.0.0-alpha.
|
3
|
+
"version": "8.0.0-alpha.8",
|
4
4
|
"description": "Storybook Vue 3 renderer",
|
5
5
|
"keywords": [
|
6
6
|
"storybook"
|
@@ -47,10 +47,10 @@
|
|
47
47
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
|
48
48
|
},
|
49
49
|
"dependencies": {
|
50
|
-
"@storybook/docs-tools": "8.0.0-alpha.
|
50
|
+
"@storybook/docs-tools": "8.0.0-alpha.8",
|
51
51
|
"@storybook/global": "^5.0.0",
|
52
|
-
"@storybook/preview-api": "8.0.0-alpha.
|
53
|
-
"@storybook/types": "8.0.0-alpha.
|
52
|
+
"@storybook/preview-api": "8.0.0-alpha.8",
|
53
|
+
"@storybook/types": "8.0.0-alpha.8",
|
54
54
|
"@vue/compiler-core": "^3.0.0",
|
55
55
|
"lodash": "^4.17.21",
|
56
56
|
"ts-dedent": "^2.0.0",
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { fn } from '@storybook/test';
|
1
2
|
import MyButton from './Button.vue';
|
2
3
|
|
3
4
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
@@ -6,17 +7,11 @@ export default {
|
|
6
7
|
component: MyButton,
|
7
8
|
tags: ['autodocs'],
|
8
9
|
argTypes: {
|
9
|
-
|
10
|
-
|
11
|
-
},
|
12
|
-
onClick: {},
|
13
|
-
size: {
|
14
|
-
control: {
|
15
|
-
type: 'select',
|
16
|
-
},
|
17
|
-
options: ['small', 'medium', 'large'],
|
18
|
-
},
|
10
|
+
size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] },
|
11
|
+
backgroundColor: { control: 'color' },
|
19
12
|
},
|
13
|
+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
14
|
+
args: { onClick: fn() },
|
20
15
|
};
|
21
16
|
|
22
17
|
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/vue3';
|
2
|
-
|
2
|
+
import { fn } from '@storybook/test';
|
3
3
|
import Button from './Button.vue';
|
4
4
|
|
5
5
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
@@ -11,9 +11,12 @@ const meta: Meta<typeof Button> = {
|
|
11
11
|
argTypes: {
|
12
12
|
size: { control: 'select', options: ['small', 'medium', 'large'] },
|
13
13
|
backgroundColor: { control: 'color' },
|
14
|
-
onClick: { action: 'clicked' },
|
15
14
|
},
|
16
|
-
args: {
|
15
|
+
args: {
|
16
|
+
primary: false,
|
17
|
+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
18
|
+
onClick: fn(),
|
19
|
+
},
|
17
20
|
};
|
18
21
|
|
19
22
|
export default meta;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/vue3';
|
2
|
-
|
2
|
+
import { fn } from '@storybook/test';
|
3
3
|
import Button from './Button.vue';
|
4
4
|
|
5
5
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
@@ -11,9 +11,12 @@ const meta = {
|
|
11
11
|
argTypes: {
|
12
12
|
size: { control: 'select', options: ['small', 'medium', 'large'] },
|
13
13
|
backgroundColor: { control: 'color' },
|
14
|
-
onClick: { action: 'clicked' },
|
15
14
|
},
|
16
|
-
args: {
|
15
|
+
args: {
|
16
|
+
primary: false,
|
17
|
+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
18
|
+
onClick: fn(),
|
19
|
+
},
|
17
20
|
} satisfies Meta<typeof Button>;
|
18
21
|
|
19
22
|
export default meta;
|