diff --git a/code/renderers/vue3/src/globals.ts b/code/renderers/vue3/src/globals.ts index 89f2e5ea1a97..557a7649e2cd 100644 --- a/code/renderers/vue3/src/globals.ts +++ b/code/renderers/vue3/src/globals.ts @@ -1,7 +1,8 @@ import { global } from '@storybook/global'; -const { window: globalWindow } = global; +const { window: globalWindow } = global as any; globalWindow.STORYBOOK_ENV = 'vue3'; -globalWindow.STORYBOOK_VUE_GLOBAL_PLUGINS ||= []; -globalWindow.STORYBOOK_VUE_GLOBAL_MIXINS ||= []; +globalWindow.PLUGINS_SETUP_FUNCTIONS ||= []; + +export { globalWindow }; diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 2cacfb5f2d7f..6b450f9500cc 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -4,6 +4,7 @@ import { createApp, h, reactive, isVNode, isReactive } from 'vue'; import type { ArgsStoryFn, RenderContext } from '@storybook/types'; import type { Args, StoryContext } from '@storybook/csf'; import type { StoryFnVueReturnType, StoryID, VueRenderer } from './types'; +import { globalWindow } from './globals'; export const render: ArgsStoryFn = (props, context) => { const { id, component: Component } = context; @@ -16,22 +17,19 @@ export const render: ArgsStoryFn = (props, context) => { return () => h(Component, props, getSlots(props, context)); }; -// set of setup functions that will be called when story is created -const setupFunctions = new Set<(app: App, storyContext?: StoryContext) => void>(); -/** add a setup function to set that will be call when story is created a d - * - * @param fn - */ -export const setup = (fn: (app: App, storyContext?: StoryContext) => void) => { - setupFunctions.add(fn); +export const setup = (fn: (app: App, storyContext?: StoryContext) => unknown) => { + globalWindow.PLUGINS_SETUP_FUNCTIONS ||= []; + globalWindow.PLUGINS_SETUP_FUNCTIONS.add(fn); }; const runSetupFunctions = async ( app: App, storyContext: StoryContext ): Promise => { - setupFunctions.forEach((fn) => fn(app, storyContext)); - await installGlobalPlugins(app, storyContext); + if (globalWindow && globalWindow.PLUGINS_SETUP_FUNCTIONS) + await globalWindow.PLUGINS_SETUP_FUNCTIONS.forEach( + (fn: (app: App, context: StoryContext) => any) => fn(app, storyContext) + ); }; const map = new Map< @@ -149,9 +147,3 @@ function teardown( storybookApp?.unmount(); if (map.has(canvasElement)) map.delete(canvasElement); } - -async function installGlobalPlugins(app: App, storyContext: StoryContext) { - if (window.APPLY_PLUGINS_FUNC) { - await window.APPLY_PLUGINS_FUNC(app, storyContext); - } -} diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts index 8526a6035165..1094f6780625 100644 --- a/code/renderers/vue3/src/types.ts +++ b/code/renderers/vue3/src/types.ts @@ -1,5 +1,5 @@ -import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types'; -import type { ConcreteComponent } from 'vue'; +import { type StoryContext as StoryContextBase, type WebRenderer } from '@storybook/types'; +import type { App, ConcreteComponent } from 'vue'; export type { RenderContext } from '@storybook/types'; @@ -14,6 +14,8 @@ export type StoryFnVueReturnType = ConcreteComponent; export type StoryContext = StoryContextBase; +export type StorybookVueApp = { vueApp: App; storyContext: StoryContext }; + /** * @deprecated Use `VueRenderer` instead. */ diff --git a/code/renderers/vue3/src/typings.d.ts b/code/renderers/vue3/src/typings.d.ts index 000cf71d70b7..dacc2c913b34 100644 --- a/code/renderers/vue3/src/typings.d.ts +++ b/code/renderers/vue3/src/typings.d.ts @@ -1,2 +1,4 @@ +import type { StorybookVueApp } from './types'; + declare var STORYBOOK_ENV: 'vue3'; -declare var APPLY_PLUGINS_FUNC: (app: any, storyContext: any) => Promise; +declare var PLUGINS_SETUP_FUNCTIONS: Set = new Set();