diff --git a/code/renderers/vue3/src/globals.ts b/code/renderers/vue3/src/globals.ts index 58d62a43b4b6..adb3949bd3e1 100644 --- a/code/renderers/vue3/src/globals.ts +++ b/code/renderers/vue3/src/globals.ts @@ -1,5 +1,10 @@ import { global } from '@storybook/global'; +import type { App } from 'vue'; +import type { StoryContext } from './public-types'; const { window: globalWindow } = global; globalWindow.STORYBOOK_ENV = 'vue3'; +globalWindow.PLUGINS_SETUP_FUNCTIONS ||= new Set< + (app: App, context: StoryContext) => unknown +>(); diff --git a/code/renderers/vue3/src/index.ts b/code/renderers/vue3/src/index.ts index 0c37ede8d826..6987cefb0c8e 100644 --- a/code/renderers/vue3/src/index.ts +++ b/code/renderers/vue3/src/index.ts @@ -6,4 +6,10 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -if (typeof module !== 'undefined') module?.hot?.decline(); +try { + if (module?.hot?.decline) { + module.hot.decline(); + } +} catch (e) { + /* do nothing */ +} diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index a8873bb67772..cf27f67357c8 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,3 +1,4 @@ +/* eslint-disable local-rules/no-uncategorized-errors */ /* eslint-disable no-param-reassign */ import type { App } from 'vue'; import { createApp, h, reactive, isVNode, isReactive } from 'vue'; @@ -16,18 +17,17 @@ 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) => { + globalThis.PLUGINS_SETUP_FUNCTIONS ??= new Set(); + globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn); }; -const runSetupFunctions = (app: App, storyContext: StoryContext) => { - setupFunctions.forEach((fn) => fn(app, storyContext)); +const runSetupFunctions = async ( + app: App, + storyContext: StoryContext +): Promise => { + if (globalThis && globalThis.PLUGINS_SETUP_FUNCTIONS) + await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map((fn) => fn(app, storyContext))); }; const map = new Map< @@ -38,7 +38,7 @@ const map = new Map< } >(); -export function renderToCanvas( +export async function renderToCanvas( { storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext, canvasElement: VueRenderer['canvasElement'] ) { @@ -80,7 +80,7 @@ export function renderToCanvas( }); vueApp.config.errorHandler = (e: unknown) => showException(e as Error); - runSetupFunctions(vueApp, storyContext); + await runSetupFunctions(vueApp, storyContext); vueApp.mount(canvasElement); showMain(); 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 f4beceae1d63..d477e85e2a29 100644 --- a/code/renderers/vue3/src/typings.d.ts +++ b/code/renderers/vue3/src/typings.d.ts @@ -1 +1,2 @@ declare var STORYBOOK_ENV: 'vue3'; +declare var PLUGINS_SETUP_FUNCTIONS = new Set<(app, context) => unknown>();