Merge pull request storybookjs#2 from eirslett/add-react-refresh-vite…

…-plugin Dynamic vite plugins import based on framework
eirslett · Apr 5, 2021 · cbb9fdc · cbb9fdc
2 parents c1b7b04 + eb6c012
commit cbb9fdc
Show file tree

Hide file tree

Showing 44 changed files with 132 additions and 121 deletions.
diff --git a/addons/a11y/src/a11yRunner.ts b/addons/a11y/src/a11yRunner.ts
@@ -1,4 +1,4 @@
-import { document, window } from 'global';
+import { document, window as globalWindow } from 'global';
 import axe from 'axe-core';
 import addons from '@storybook/addons';
 import { EVENTS } from './constants';
@@ -66,7 +66,7 @@ const run = async (storyId: string) => {
 
 /** Returns story parameters or default ones. */
 const getParams = (storyId: string): A11yParameters => {
-  const { parameters } = window.__STORYBOOK_STORY_STORE__.fromId(storyId) || {};
+  const { parameters } = globalWindow.__STORYBOOK_STORY_STORE__.fromId(storyId) || {};
   return (
     parameters.a11y || {
       config: {},

diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect } from 'react';
-import { document, window } from 'global';
+import { document, window as globalWindow } from 'global';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 import { MDXProvider } from '@mdx-js/react';
@@ -46,7 +46,7 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context,
   useEffect(() => {
     let url;
     try {
-      url = new URL(window.parent.location);
+      url = new URL(globalWindow.parent.location);
     } catch (err) {
       return;
     }

diff --git a/addons/google-analytics/src/register.ts b/addons/google-analytics/src/register.ts
@@ -1,11 +1,11 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 import { addons } from '@storybook/addons';
 import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events';
 
 import ReactGA from 'react-ga';
 
 addons.register('storybook/google-analytics', (api) => {
-  ReactGA.initialize(window.STORYBOOK_GA_ID, window.STORYBOOK_REACT_GA_OPTIONS);
+  ReactGA.initialize(globalWindow.STORYBOOK_GA_ID, globalWindow.STORYBOOK_REACT_GA_OPTIONS);
 
   api.on(STORY_CHANGED, () => {
     const { path } = api.getUrlState();

diff --git a/app/angular/src/client/preview/globals.ts b/app/angular/src/client/preview/globals.ts
@@ -1,5 +1,5 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
 import './angular-polyfills';
 
-window.STORYBOOK_ENV = 'angular';
+globalWindow.STORYBOOK_ENV = 'angular';
diff --git a/app/aurelia/src/client/preview/globals.ts b/app/aurelia/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'aurelia';
+globalWindow.STORYBOOK_ENV = 'aurelia';
diff --git a/app/ember/src/client/preview/globals.ts b/app/ember/src/client/preview/globals.ts
@@ -1,4 +1,4 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
-window.STORYBOOK_ENV = 'ember';
+globalWindow.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
+globalWindow.STORYBOOK_ENV = 'ember';
diff --git a/app/ember/src/client/preview/render.ts b/app/ember/src/client/preview/render.ts
@@ -1,13 +1,13 @@
-import { window, document } from 'global';
+import { window as globalWindow, document } from 'global';
 import dedent from 'ts-dedent';
 import { RenderContext, ElementArgs, OptionsArgs } from './types';
 
 declare let Ember: any;
 
 const rootEl = document.getElementById('root');
 
-const config = window.require(`${window.STORYBOOK_NAME}/config/environment`);
-const app = window.require(`${window.STORYBOOK_NAME}/app`).default.create({
+const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
+const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({
   autoboot: false,
   rootElement: rootEl,
   ...config.APP,

diff --git a/app/html/src/client/preview/globals.ts b/app/html/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'HTML';
+globalWindow.STORYBOOK_ENV = 'HTML';
diff --git a/app/marionette/src/client/preview/globals.ts b/app/marionette/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'marionette';
+globalWindow.STORYBOOK_ENV = 'marionette';
diff --git a/app/marko/src/client/preview/globals.ts b/app/marko/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'marko';
+globalWindow.STORYBOOK_ENV = 'marko';
diff --git a/app/mithril/src/client/preview/globals.ts b/app/mithril/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'mithril';
+globalWindow.STORYBOOK_ENV = 'mithril';
diff --git a/app/preact/src/client/preview/globals.ts b/app/preact/src/client/preview/globals.ts
@@ -1,5 +1,5 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-if (window) {
-  window.STORYBOOK_ENV = 'preact';
+if (globalWindow) {
+  globalWindow.STORYBOOK_ENV = 'preact';
 }
diff --git a/app/rax/src/client/preview/globals.ts b/app/rax/src/client/preview/globals.ts
@@ -1,5 +1,5 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-if (window) {
-  window.STORYBOOK_ENV = 'rax';
+if (globalWindow) {
+  globalWindow.STORYBOOK_ENV = 'rax';
 }
diff --git a/app/react/src/client/preview/globals.ts b/app/react/src/client/preview/globals.ts
@@ -1,5 +1,5 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-if (window) {
-  window.STORYBOOK_ENV = 'react';
+if (globalWindow) {
+  globalWindow.STORYBOOK_ENV = 'react';
 }
diff --git a/app/riot/src/client/preview/globals.ts b/app/riot/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'riot';
+globalWindow.STORYBOOK_ENV = 'riot';
diff --git a/app/server/src/client/preview/globals.ts b/app/server/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'SERVER';
+globalWindow.STORYBOOK_ENV = 'SERVER';
diff --git a/app/svelte/src/client/preview/globals.ts b/app/svelte/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'svelte';
+globalWindow.STORYBOOK_ENV = 'svelte';
diff --git a/app/vue/src/client/preview/globals.ts b/app/vue/src/client/preview/globals.ts
@@ -1,4 +1,4 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_REACT_CLASSES = {};
-window.STORYBOOK_ENV = 'vue';
+globalWindow.STORYBOOK_REACT_CLASSES = {};
+globalWindow.STORYBOOK_ENV = 'vue';
diff --git a/app/vue3/src/client/preview/globals.ts b/app/vue3/src/client/preview/globals.ts
@@ -1,4 +1,4 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_REACT_CLASSES = {};
-window.STORYBOOK_ENV = 'vue3';
+globalWindow.STORYBOOK_REACT_CLASSES = {};
+globalWindow.STORYBOOK_ENV = 'vue3';
diff --git a/app/web-components/src/client/preview/globals.ts b/app/web-components/src/client/preview/globals.ts
@@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
-window.STORYBOOK_ENV = 'web-components';
+globalWindow.STORYBOOK_ENV = 'web-components';
diff --git a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx
@@ -1,6 +1,6 @@
 ```ts
 // vue/src/client/preview/globals.ts
 
-import { window } from 'global';
-window.STORYBOOK_ENV = 'vue';
+import { window as globalWindow } from 'global';
+globalWindow.STORYBOOK_ENV = 'vue';
 ```
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { window, File } from 'global';
+import { window as globalWindow, File } from 'global';
 import React, { Fragment } from 'react';
 import { action, actions, configureActions } from '@storybook/addon-actions';
 import { Form } from '@storybook/components';
@@ -122,7 +122,7 @@ export const AllTypes = () => {
             null,
             undefined,
             { foo: 'bar' },
-            window
+            globalWindow
           )
         }
       >
@@ -143,7 +143,7 @@ export const AllTypes = () => {
       <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
       <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
       <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
-      <Button onClick={() => action('window')(window)}>Window</Button>
+      <Button onClick={() => action('window')(globalWindow)}>Window</Button>
     </Fragment>
   );
 };

diff --git a/lib/addons/src/hooks.ts b/lib/addons/src/hooks.ts
@@ -1,4 +1,4 @@
-import window from 'global';
+import { window as globalWindow } from 'global';
 import { logger } from '@storybook/client-logger';
 import {
   FORCE_RE_RENDER,
@@ -140,10 +140,10 @@ const hookify = (fn: AbstractFunction) => (...args: any[]) => {
   }
   hooks.nextHookIndex = 0;
 
-  const prevContext = window.STORYBOOK_HOOKS_CONTEXT;
-  window.STORYBOOK_HOOKS_CONTEXT = hooks;
+  const prevContext = globalWindow.STORYBOOK_HOOKS_CONTEXT;
+  globalWindow.STORYBOOK_HOOKS_CONTEXT = hooks;
   const result = fn(...args);
-  window.STORYBOOK_HOOKS_CONTEXT = prevContext;
+  globalWindow.STORYBOOK_HOOKS_CONTEXT = prevContext;
 
   if (hooks.currentPhase === 'UPDATE' && hooks.getNextHook() != null) {
     throw new Error(
@@ -196,7 +196,7 @@ const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
 function getHooksContextOrNull(): HooksContext | null {
-  return window.STORYBOOK_HOOKS_CONTEXT || null;
+  return globalWindow.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
 function getHooksContextOrThrow(): HooksContext {

diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
@@ -3,7 +3,7 @@ import { NAVIGATE_URL, STORY_ARGS_UPDATED, SET_CURRENT_STORY } from '@storybook/
 import { queryFromLocation, navigate as queryNavigate, buildArgsParam } from '@storybook/router';
 import { toId, sanitize } from '@storybook/csf';
 import deepEqual from 'fast-deep-equal';
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 
 import { ModuleArgs, ModuleFn } from '../index';
 import { PanelPositions } from './layout';
@@ -163,9 +163,9 @@ export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...r
 
     let handleOrId: any;
     fullAPI.on(STORY_ARGS_UPDATED, ({ args }) => {
-      if ('requestIdleCallback' in window) {
-        if (handleOrId) window.cancelIdleCallback(handleOrId);
-        handleOrId = window.requestIdleCallback(() => updateArgsParam(args), { timeout: 1000 });
+      if ('requestIdleCallback' in globalWindow) {
+        if (handleOrId) globalWindow.cancelIdleCallback(handleOrId);
+        handleOrId = globalWindow.requestIdleCallback(() => updateArgsParam(args), { timeout: 1000 });
       } else {
         if (handleOrId) clearTimeout(handleOrId);
         setTimeout(updateArgsParam, 100, args);

diff --git a/lib/builder-vite/package.json b/lib/builder-vite/package.json
@@ -43,6 +43,7 @@
     "@storybook/core-common": "*",
     "@types/node": "^14.0.10",
     "@vitejs/plugin-vue": "^1.2.1",
+    "@vitejs/plugin-react-refresh": "^1.3.2",
     "ejs": "^3.1.6",
     "glob-promise": "^4.1.0",
     "vite": "^2.1.5"

diff --git a/lib/builder-vite/src/iframe.ts b/lib/builder-vite/src/iframe.ts
@@ -25,7 +25,7 @@ export const iframeMiddleware = async ({
       return;
     }
     res.send(
-      await server.transformIndexHtml('/iframe.html', template({
+      await server.transformIndexHtml(req.url, template({
         options: {},
         files: {
           css: [],

diff --git a/lib/builder-vite/src/server.ts b/lib/builder-vite/src/server.ts
@@ -1,12 +1,22 @@
 import { Server } from "http";
 import path from 'path';
-import { createServer, ViteDevServer } from 'vite';
-import vue from '@vitejs/plugin-vue';
+import { createServer, ViteDevServer } from "vite";
+import type { Plugin } from 'vite';
 import type { CLIOptions, LoadOptions } from "@storybook/core-common";
 import { optimizeDeps } from './utils/optimizeDeps';
 import { mockCoreJs } from './utils/mockCoreJs';
 
-export async function createViteServer({ configDir, port }: LoadOptions & CLIOptions, devServer: Server): Promise<ViteDevServer> {
+export async function createViteServer({ configDir, port, framework }: LoadOptions & CLIOptions, devServer: Server): Promise<ViteDevServer> {
+  // Lazy-load the proper Vite plugins, depending on which framework we use
+  const plugins: Plugin[] = [mockCoreJs()];
+  if (framework === 'vue') {
+    const vuePlugin = await import('@vitejs/plugin-vue').then(plugin => plugin.default());
+    plugins.push(vuePlugin);
+  } else if (framework === 'react') {
+    const reactPlugin = await import('@vitejs/plugin-react-refresh').then(plugin => plugin.default());
+    plugins.push(reactPlugin);
+  }
+
   const server = await createServer({
     configFile: false,
     root: path.resolve(configDir, '..'),
@@ -23,7 +33,7 @@ export async function createViteServer({ configDir, port }: LoadOptions & CLIOpt
       },
     },
     optimizeDeps,
-    plugins: [mockCoreJs(), vue()],
+    plugins,
   });
 
   return server;

diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
@@ -1,4 +1,4 @@
-import { window, document, location } from 'global';
+import { window as globalWindow, document, location } from 'global';
 import * as EVENTS from '@storybook/core-events';
 import Channel, { ChannelEvent, ChannelHandler } from '@storybook/channels';
 import { logger, pretty } from '@storybook/client-logger';
@@ -31,7 +31,7 @@ export class PostmsgTransport {
   constructor(private readonly config: Config) {
     this.buffer = [];
     this.handler = null;
-    window.addEventListener('message', this.handleEvent.bind(this), false);
+    globalWindow.addEventListener('message', this.handleEvent.bind(this), false);
 
     // Check whether the config.page parameter has a valid value
     if (config.page !== 'manager' && config.page !== 'preview') {
@@ -129,8 +129,8 @@ export class PostmsgTransport {
 
       return list.length ? list : this.getCurrentFrames();
     }
-    if (window && window.parent && window.parent !== window) {
-      return [window.parent];
+    if (globalWindow && globalWindow.parent && globalWindow.parent !== globalWindow) {
+      return [globalWindow.parent];
     }
 
     return [];
@@ -143,8 +143,8 @@ export class PostmsgTransport {
       ];
       return list.map((e) => e.contentWindow);
     }
-    if (window && window.parent) {
-      return [window.parent];
+    if (globalWindow && globalWindow.parent) {
+      return [globalWindow.parent];
     }
 
     return [];
@@ -155,8 +155,8 @@ export class PostmsgTransport {
       const list: HTMLIFrameElement[] = [...document.querySelectorAll('#storybook-preview-iframe')];
       return list.map((e) => e.contentWindow);
     }
-    if (window && window.parent) {
-      return [window.parent];
+    if (globalWindow && globalWindow.parent) {
+      return [globalWindow.parent];
     }
 
     return [];

diff --git a/lib/components/src/Zoom/Zoom.tsx b/lib/components/src/Zoom/Zoom.tsx
@@ -1,10 +1,10 @@
-import window from 'global';
+import { window as globalWindow } from 'global';
 import { ZoomElement as Element } from './ZoomElement';
 import { ZoomIFrame as IFrame } from './ZoomIFrame';
 
 export const browserSupportsCssZoom = (): boolean => {
   try {
-    return window.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
+    return globalWindow.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
   } catch (error) {
     return false;
   }

diff --git a/lib/components/src/Zoom/browserSupportsCssZoom.ts b/lib/components/src/Zoom/browserSupportsCssZoom.ts
@@ -1,8 +1,8 @@
-import window from 'global';
+import { window as globalWindow } from 'global';
 
 export function browserSupportsCssZoom(): boolean {
   try {
-    return window.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
+    return globalWindow.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
   } catch (error) {
     return false;
   }