Merge pull request storybookjs#1 from eirslett/vite-hmr-support

feat: add HMR support to builder-vite
eirslett · Apr 3, 2021 · c1b7b04 · c1b7b04
2 parents 1a9c373 + b6f5bb2
commit c1b7b04
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/lib/builder-vite/src/iframe.ts b/lib/builder-vite/src/iframe.ts
@@ -3,12 +3,13 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { RequestHandler } from 'express';
 import { LoadOptions, StorybookConfigOptions } from '@storybook/core-common';
+import { ViteDevServer } from "vite";
 
 export const iframeMiddleware = async ({
   presets,
   framework,
-  packageJson,
-}: StorybookConfigOptions & LoadOptions): Promise<RequestHandler> => {
+  packageJson
+}: StorybookConfigOptions & LoadOptions, server: ViteDevServer): Promise<RequestHandler> => {
   const headHtmlSnippet = await presets.apply<string>('previewHeadTemplate');
   const bodyHtmlSnippet = await presets.apply<string>('previewBodyTemplate');
   const logLevel = await presets.apply('logLevel', undefined);
@@ -18,13 +19,13 @@ export const iframeMiddleware = async ({
     (await fs.promises.readFile(path.resolve(__dirname, './templates/index.ejs'))).toString()
   );
 
-  return (req, res, next) => {
+  return async (req, res, next) => {
     if (!req.url.match(/^\/iframe.html($|\?)/)) {
       next();
       return;
     }
     res.send(
-      template({
+      await server.transformIndexHtml('/iframe.html', template({
         options: {},
         files: {
           css: [],
@@ -43,6 +44,6 @@ export const iframeMiddleware = async ({
           FRAMEWORK_OPTIONS: frameworkOptions,
         },
       })
-    );
+    ));
   };
 };
diff --git a/lib/builder-vite/src/index.ts b/lib/builder-vite/src/index.ts
@@ -13,10 +13,10 @@ export const getConfig = () => ({});
 
 export const build: ViteBuilder['build'] = async ({ options }) => {};
 
-export const start: ViteBuilder['start'] = async ({ startTime, options, router }) => {
-  const server = await createViteServer(options);
+export const start: ViteBuilder['start'] = async ({ startTime, options, router, server: devServer }) => {
+  const server = await createViteServer(options, devServer);
 
-  router.use(await iframeMiddleware(options));
+  router.use(await iframeMiddleware(options, server));
   router.use(await viteAppMiddleware(options));
 
   router.use((req, res, next) => server.middlewares.handle(req, res, next));

diff --git a/lib/builder-vite/src/server.ts b/lib/builder-vite/src/server.ts
@@ -1,16 +1,21 @@
+import { Server } from "http";
 import path from 'path';
 import { createServer, ViteDevServer } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import type { LoadOptions } from '@storybook/core-common';
+import type { CLIOptions, LoadOptions } from "@storybook/core-common";
 import { optimizeDeps } from './utils/optimizeDeps';
 import { mockCoreJs } from './utils/mockCoreJs';
 
-export async function createViteServer({ configDir }: LoadOptions): Promise<ViteDevServer> {
+export async function createViteServer({ configDir, port }: LoadOptions & CLIOptions, devServer: Server): Promise<ViteDevServer> {
   const server = await createServer({
     configFile: false,
     root: path.resolve(configDir, '..'),
     server: {
       middlewareMode: true,
+      hmr: {
+        port,
+        server: devServer,
+      },
     },
     resolve: {
       alias: {

diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts
@@ -169,6 +169,7 @@ export interface Builder<Config, Stats> {
     options: Options;
     startTime: ReturnType<typeof process.hrtime>;
     router: Router;
+    server: Server;
   }) => Promise<void | {
     stats: Stats;
     totalTime: ReturnType<typeof process.hrtime>;

diff --git a/lib/core-server/src/dev-server.ts b/lib/core-server/src/dev-server.ts
@@ -59,12 +59,14 @@ export async function storybookDevServer(options: Options) {
         startTime,
         options,
         router,
+        server,
       });
 
   const manager = managerBuilder.start({
     startTime,
     options,
     router,
+    server,
   });
 
   const [previewResult, managerResult] = await Promise.all([