refactor functions

storybookjs · Aug 21, 2023 · be7d7a0 · be7d7a0
1 parent f3ae06f
commit be7d7a0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 22 deletions.
diff --git 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
@@ -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<VueRenderer> = (props, context) => {
   const { id, component: Component } = context;
@@ -16,22 +17,19 @@ export const render: ArgsStoryFn<VueRenderer> = (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<VueRenderer>) => 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<VueRenderer>) => void) => {
-  setupFunctions.add(fn);
+export const setup = (fn: (app: App, storyContext?: StoryContext<VueRenderer>) => unknown) => {
+  globalWindow.PLUGINS_SETUP_FUNCTIONS ||= [];
+  globalWindow.PLUGINS_SETUP_FUNCTIONS.add(fn);
 };
 
 const runSetupFunctions = async (
   app: App,
   storyContext: StoryContext<VueRenderer>
 ): Promise<any> => {
-  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<any>, context: StoryContext<VueRenderer>) => 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<any>, storyContext: StoryContext<VueRenderer>) {
-  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
@@ -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<any>;
 
 export type StoryContext = StoryContextBase<VueRenderer>;
 
+export type StorybookVueApp = { vueApp: App<any>; storyContext: StoryContext };
+
 /**
  * @deprecated Use `VueRenderer` instead.
  */

diff --git 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<any>;
+declare var PLUGINS_SETUP_FUNCTIONS: Set<StorybookVueApp> = new Set();