@storybook/vue3 8.0.0-rc.3 → 8.0.0-rc.4
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/index.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 src_exports={};__export(src_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations,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"),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))},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_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_preview_api2=require("@storybook/preview-api"),import_vue3=require("vue");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});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"};
|
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,{composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations,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"),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))},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_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_preview_api2=require("@storybook/preview-api"),import_vue3=require("vue");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});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"};function setProjectAnnotations(projectAnnotations){(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=(0,import_preview_api2.composeStory)(story,componentAnnotations,projectAnnotations,entry_preview_exports,exportsName),renderable=(...args)=>(0,import_vue3.h)(composedStory(...args));return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api2.composeStories)(csfExports,projectAnnotations,composeStory)}try{module?.hot?.decline&&module.hot.decline()}catch{}0&&(module.exports={composeStories,composeStory,setProjectAnnotations,setup});
|
package/dist/index.mjs
CHANGED
@@ -2,9 +2,9 @@ import { entry_preview_exports } from './chunk-VZ2C53DE.mjs';
|
|
2
2
|
export { setup } from './chunk-VZ2C53DE.mjs';
|
3
3
|
import './chunk-JSBTCGGE.mjs';
|
4
4
|
import { global } from '@storybook/global';
|
5
|
-
import {
|
5
|
+
import { setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from '@storybook/preview-api';
|
6
6
|
import { h } from 'vue';
|
7
7
|
|
8
|
-
var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;
|
8
|
+
var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;function setProjectAnnotations(projectAnnotations){setProjectAnnotations$1(projectAnnotations);}function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=composeStory$1(story,componentAnnotations,projectAnnotations,entry_preview_exports,exportsName),renderable=(...args)=>h(composedStory(...args));return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}try{module?.hot?.decline&&module.hot.decline();}catch{}
|
9
9
|
|
10
10
|
export { composeStories, composeStory, setProjectAnnotations };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@storybook/vue3",
|
3
|
-
"version": "8.0.0-rc.
|
3
|
+
"version": "8.0.0-rc.4",
|
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-rc.
|
50
|
+
"@storybook/docs-tools": "8.0.0-rc.4",
|
51
51
|
"@storybook/global": "^5.0.0",
|
52
|
-
"@storybook/preview-api": "8.0.0-rc.
|
53
|
-
"@storybook/types": "8.0.0-rc.
|
52
|
+
"@storybook/preview-api": "8.0.0-rc.4",
|
53
|
+
"@storybook/types": "8.0.0-rc.4",
|
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 MyHeader from './Header.vue';
|
2
3
|
|
3
4
|
export default {
|
@@ -24,6 +25,11 @@ export default {
|
|
24
25
|
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
25
26
|
layout: 'fullscreen',
|
26
27
|
},
|
28
|
+
args: {
|
29
|
+
onLogin: fn(),
|
30
|
+
onLogout: fn(),
|
31
|
+
onCreateAccount: fn(),
|
32
|
+
},
|
27
33
|
};
|
28
34
|
|
29
35
|
export const LoggedIn = {
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { fn } from '@storybook/test';
|
1
2
|
import type { Meta, StoryObj } from '@storybook/vue3';
|
2
3
|
|
3
4
|
import MyHeader from './Header.vue';
|
@@ -21,6 +22,11 @@ const meta: Meta<typeof MyHeader> = {
|
|
21
22
|
layout: 'fullscreen',
|
22
23
|
},
|
23
24
|
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
|
25
|
+
args: {
|
26
|
+
onLogin: fn(),
|
27
|
+
onLogout: fn(),
|
28
|
+
onCreateAccount: fn(),
|
29
|
+
},
|
24
30
|
tags: ['autodocs'],
|
25
31
|
};
|
26
32
|
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/vue3';
|
2
|
+
import { fn } from '@storybook/test';
|
2
3
|
|
3
4
|
import MyHeader from './Header.vue';
|
4
5
|
|
@@ -20,6 +21,11 @@ const meta = {
|
|
20
21
|
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
21
22
|
layout: 'fullscreen',
|
22
23
|
},
|
24
|
+
args: {
|
25
|
+
onLogin: fn(),
|
26
|
+
onLogout: fn(),
|
27
|
+
onCreateAccount: fn(),
|
28
|
+
},
|
23
29
|
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
|
24
30
|
tags: ['autodocs'],
|
25
31
|
} satisfies Meta<typeof MyHeader>;
|