Merge pull request #23772 from storybookjs/chaks/vue3-global-app-install

Vue3: Add support for Global Apps install
storybookjs · Aug 23, 2023 · fd9aa21 · fd9aa21
2 parents 0f41c77 + 6d53c68
commit fd9aa21
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 15 deletions.
diff --git 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<any>, context: StoryContext) => unknown
+>();
diff --git 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
@@ -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<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) => {
+  globalThis.PLUGINS_SETUP_FUNCTIONS ??= new Set();
+  globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn);
 };
 
-const runSetupFunctions = (app: App, storyContext: StoryContext<VueRenderer>) => {
-  setupFunctions.forEach((fn) => fn(app, storyContext));
+const runSetupFunctions = async (
+  app: App,
+  storyContext: StoryContext<VueRenderer>
+): Promise<void> => {
+  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<VueRenderer>,
   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
@@ -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 +1,2 @@
 declare var STORYBOOK_ENV: 'vue3';
+declare var PLUGINS_SETUP_FUNCTIONS = new Set<(app, context) => unknown>();