Allow web socket based refresh in middleware mode

.changeset/green-arachnid-crossing.md

@@ -0,0 +1,5 @@
+---
+"@web/storybook-builder": patch
+---
+
+Pass Storybook server into middleware mode to enable live refresh

.changeset/orange-octopus-murmurs.md

@@ -0,0 +1,5 @@
+---
+"@web/dev-server-core": patch
+---
+
+Allow web socket based refresh in middleware mode, by accepting the source `server` as an option for the `middlewareMode` config property

packages/dev-server-core/src/server/DevServer.ts

@@ -27,7 +27,7 @@ export class DevServer {
       this.logger,
       this.config,
       this.fileWatcher,
-      config.middlewareMode,
+      !!config.middlewareMode,
     );
     this.koaApp = app;
     if (server) {
@@ -39,6 +39,11 @@ export class DevServer {
           this.connections.delete(connection);
         });
       });
+    } else if (
+      typeof this.config.middlewareMode === 'object' &&
+      this.config.middlewareMode.server
+    ) {
+      this.webSockets = new WebSocketsManager(this.config.middlewareMode.server);
     }
   }
 

packages/dev-server-core/src/server/DevServerCoreConfig.ts

@@ -1,5 +1,6 @@
 import { Middleware } from 'koa';
 import { Plugin } from '../plugins/Plugin';
+import { Server } from 'net';
 
 export type MimeTypeMappings = Record<string, string>;
 
@@ -21,7 +22,7 @@ export interface DevServerCoreConfig {
   /**
    * Whether to run server or not and allow to use as a middleware connected to another server.
    */
-  middlewareMode?: boolean;
+  middlewareMode?: boolean | { server: Server };
   basePath?: string;
   /**
    * The app's index.html file. When set, serves the index.html for non-file requests. Use this to enable SPA routing

packages/storybook-builder/src/index.ts

@@ -53,7 +53,7 @@ export const bail: WdsBuilder['bail'] = async () => {
   await wdsServer?.stop();
 };
 
-export const start: WdsBuilder['start'] = async ({ startTime, options, router }) => {
+export const start: WdsBuilder['start'] = async ({ startTime, options, router, server }) => {
   const previewDirOrigin = join(getNodeModuleDir('@storybook/preview'), 'dist');
   router.use('/sb-preview', express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
   router.use(`/${PREBUNDLED_MODULES_DIR}`, express.static(resolve(`./${PREBUNDLED_MODULES_DIR}`)));
@@ -103,7 +103,9 @@ export const start: WdsBuilder['start'] = async ({ startTime, options, router })
   }
 
   // setup middleware mode
-  wdsFinalConfig.middlewareMode = true;
+  wdsFinalConfig.middlewareMode = {
+    server,
+  };
   wdsFinalConfig.port = undefined;
   wdsFinalConfig.hostname = undefined;