@storybook/react-native 10.1.11 → 10.2.0-beta.1

package/dist/index.d.ts

@@ -76,6 +76,8 @@ declare class View {
         storySpecifier: string;
         viewMode: string;
     }>;
+    _getHost: (params?: Partial<Params>) => any;
+    __getPort: (params?: Partial<Params>) => any;
     _getServerChannel: (params?: Partial<Params>) => Channel;
     createPreparedStoryMapping: () => Promise<void>;
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
@@ -113,6 +115,13 @@ declare function updateView(viewInstance: View, annotations: any[], normalizedSt
     req: any;
 })[], options?: ReactNativeOptions): void;
 
+declare const RN_STORYBOOK_STORAGE_KEY = "lastOpenedStory";
+declare const RN_STORYBOOK_EVENTS: {
+    RN_GET_INDEX: string;
+    RN_GET_INDEX_RESPONSE: string;
+};
+declare const STORYBOOK_STORY_ID_PARAM = "STORYBOOK_STORY_ID";
+
 interface StorybookConfig {
     stories: StorybookConfig$1['stories'];
     addons: Array<string | {
@@ -123,4 +132,4 @@ interface StorybookConfig {
     framework?: '@storybook/react-native';
 }
 
-export { type InitialSelection, type Params, type Storage, type StorybookConfig, type ThemePartial, View, getProjectAnnotations, prepareStories, start, updateView };
+export { type InitialSelection, type Params, RN_STORYBOOK_EVENTS, RN_STORYBOOK_STORAGE_KEY, STORYBOOK_STORY_ID_PARAM, type Storage, type StorybookConfig, type ThemePartial, View, getProjectAnnotations, prepareStories, start, updateView };

package/dist/index.js

@@ -29,6 +29,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  RN_STORYBOOK_EVENTS: () => RN_STORYBOOK_EVENTS,
+  RN_STORYBOOK_STORAGE_KEY: () => RN_STORYBOOK_STORAGE_KEY,
+  STORYBOOK_STORY_ID_PARAM: () => STORYBOOK_STORY_ID_PARAM,
   darkTheme: () => import_react_native_theming3.darkTheme,
   getProjectAnnotations: () => getProjectAnnotations,
   prepareStories: () => prepareStories,
@@ -857,54 +860,16 @@ var StoryView = ({ useWrapper = true }) => {
 };
 var StoryView_default = import_react3.default.memo(StoryView);
 
-// src/rn-host-detect.js
-function getByRemoteConfig(hostname) {
-  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
-  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
-    return { hostname, passed: false };
-  }
-  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
-  if (constants) {
-    var serverHost = constants.ServerHost || hostname;
-    return { hostname: serverHost.split(":")[0], passed: true };
-  }
-  return { hostname, passed: false };
-}
-function getConstants(config) {
-  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
-}
-function getByRNRequirePolyfill(hostname) {
-  var NativeModules;
-  var PlatformConstants;
-  var AndroidConstants;
-  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
-  // TODO: Get NativeModules for RN >= 0.56
-  window.require.name === "metroRequire") {
-    return hostname;
-  }
-  NativeModules = window.require("NativeModules");
-  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
-    return hostname;
-  }
-  PlatformConstants = NativeModules.PlatformConstants;
-  AndroidConstants = NativeModules.AndroidConstants;
-  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
-  return serverHost.split(":")[0];
-}
-function getHost(hostname) {
-  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
-    return hostname;
-  }
-  var result = getByRemoteConfig(hostname);
-  if (result.passed) {
-    return result.hostname;
-  }
-  return getByRNRequirePolyfill(hostname);
-}
+// src/constants.ts
+var RN_STORYBOOK_STORAGE_KEY = "lastOpenedStory";
+var RN_STORYBOOK_EVENTS = {
+  RN_GET_INDEX: "RN_GET_INDEX",
+  RN_GET_INDEX_RESPONSE: "RN_GET_INDEX_RESPONSE"
+};
+var STORYBOOK_STORY_ID_PARAM = "STORYBOOK_STORY_ID";
 
 // src/View.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var STORAGE_KEY = "lastOpenedStory";
 var View3 = class {
   _storyIndex;
   _setStory = () => {
@@ -943,7 +908,7 @@ var View3 = class {
       try {
         let value = this._asyncStorageStoryId;
         if (!value && this._storage != null) {
-          value = await this._storage.getItem(STORAGE_KEY);
+          value = await this._storage.getItem(RN_STORYBOOK_STORAGE_KEY);
           this._asyncStorageStoryId = value;
         }
         const exists = value && this._storyIdExists(value);
@@ -955,9 +920,27 @@ var View3 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
+  _getHost = (params = {}) => {
+    if (params.host) {
+      return params.host;
+    }
+    if (globalThis.STORYBOOK_WEBSOCKET?.host) {
+      return globalThis.STORYBOOK_WEBSOCKET.host;
+    }
+    return import_react_native3.Platform.OS === "android" ? "10.0.2.2" : "localhost";
+  };
+  __getPort = (params = {}) => {
+    if (params.port) {
+      return params.port;
+    }
+    if (globalThis.STORYBOOK_WEBSOCKET?.port) {
+      return globalThis.STORYBOOK_WEBSOCKET.port;
+    }
+    return 7007;
+  };
   _getServerChannel = (params = {}) => {
-    const host = getHost(params.host || "localhost");
-    const port = `:${params.port || 7007}`;
+    const host = this._getHost(params);
+    const port = `:${this.__getPort(params)}`;
     const query = params.query || "";
     const websocketType = params.secured ? "wss" : "ws";
     const url = `${websocketType}://${host}${port}/${query}`;
@@ -1015,6 +998,9 @@ var View3 = class {
       channel.emit(import_core_events.CHANNEL_CREATED);
       this._preview.ready().then(() => this._preview.onStoryIndexChanged());
     }
+    this._channel.on(RN_STORYBOOK_EVENTS.RN_GET_INDEX, () => {
+      this._channel.emit(RN_STORYBOOK_EVENTS.RN_GET_INDEX_RESPONSE, { index: this._storyIndex });
+    });
     import_manager_api.addons.loadAddons({
       store: () => ({
         fromId: (id) => {
@@ -1044,7 +1030,7 @@ var View3 = class {
         const listener = import_react_native3.Linking.addEventListener("url", ({ url }) => {
           if (typeof url === "string") {
             const urlObj = new URL(url);
-            const storyId = urlObj.searchParams.get("STORYBOOK_STORY_ID");
+            const storyId = urlObj.searchParams.get(STORYBOOK_STORY_ID_PARAM);
             const hasStoryId = storyId && typeof storyId === "string";
             const storyExists = hasStoryId && self._storyIdExists(storyId);
             if (storyExists && self._ready) {
@@ -1069,7 +1055,7 @@ var View3 = class {
           return import_react_native3.Linking.getInitialURL().then((url) => {
             if (url && typeof url === "string") {
               const urlObj = new URL(url);
-              const storyId = urlObj.searchParams.get("STORYBOOK_STORY_ID");
+              const storyId = urlObj.searchParams.get(STORYBOOK_STORY_ID_PARAM);
               const hasStoryId = storyId && typeof storyId === "string";
               const storyExists = hasStoryId && self._storyIdExists(storyId);
               if (hasStoryId && !storyExists) {
@@ -1112,7 +1098,7 @@ var View3 = class {
             `);
           }
           if (shouldPersistSelection && !!self._storage) {
-            self._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+            self._storage.setItem(RN_STORYBOOK_STORAGE_KEY, newStory.id).catch((e) => {
               console.warn("storybook-log: error writing to async storage", e);
             });
           }
@@ -1412,6 +1398,9 @@ function updateView(viewInstance, annotations, normalizedStories, options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  RN_STORYBOOK_EVENTS,
+  RN_STORYBOOK_STORAGE_KEY,
+  STORYBOOK_STORY_ID_PARAM,
   darkTheme,
   getProjectAnnotations,
   prepareStories,

package/dist/metro/withStorybook.d.ts

@@ -24,7 +24,7 @@ interface WithStorybookOptions {
     /**
      * WebSocket configuration for syncing storybook instances or sending events to storybook.
      */
-    websockets?: WebsocketsOptions;
+    websockets?: WebsocketsOptions | 'auto';
     /**
      * Whether to use JavaScript files for Storybook configuration instead of TypeScript. Defaults to false.
      */

package/dist/metro/withStorybook.js

@@ -33,9 +33,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var require_common = __commonJS({
   "scripts/common.js"(exports2, module2) {
     var { globToRegexp } = require("storybook/internal/common");
-    var path2 = require("path");
+    var path3 = require("path");
     var fs = require("fs");
-    var cwd = process.cwd();
+    var cwd2 = process.cwd();
     var toRequireContext = (specifier) => {
       const { directory, files } = specifier;
       const match = globToRegexp(`./${files}`);
@@ -48,14 +48,23 @@ var require_common = __commonJS({
     var supportedExtensions = ["js", "jsx", "ts", "tsx", "cjs", "mjs"];
     function getFilePathExtension({ configPath }, fileName) {
       for (const ext of supportedExtensions) {
-        const filePath = path2.resolve(cwd, configPath, `${fileName}.${ext}`);
+        const filePath = path3.resolve(cwd2, configPath, `${fileName}.${ext}`);
         if (fs.existsSync(filePath)) {
           return ext;
         }
       }
       return null;
     }
-    function ensureRelativePathHasDot(relativePath) {
+    function getFilePathWithExtension2({ configPath }, fileName) {
+      for (const ext of supportedExtensions) {
+        const filePath = path3.resolve(cwd2, configPath, `${fileName}.${ext}`);
+        if (fs.existsSync(filePath)) {
+          return filePath;
+        }
+      }
+      return null;
+    }
+    function ensureRelativePathHasDot2(relativePath) {
       return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
     }
     function getPreviewExists({ configPath }) {
@@ -97,10 +106,11 @@ var require_common = __commonJS({
     module2.exports = {
       toRequireContext,
       getFilePathExtension,
-      ensureRelativePathHasDot,
+      ensureRelativePathHasDot: ensureRelativePathHasDot2,
       getPreviewExists,
       resolveAddonFile,
-      getAddonName
+      getAddonName,
+      getFilePathWithExtension: getFilePathWithExtension2
     };
   }
 });
@@ -142,25 +152,26 @@ var require_generate = __commonJS({
   "scripts/generate.js"(exports2, module2) {
     var {
       toRequireContext,
-      ensureRelativePathHasDot,
+      ensureRelativePathHasDot: ensureRelativePathHasDot2,
       getPreviewExists,
       resolveAddonFile,
       getAddonName
     } = require_common();
-    var { normalizeStories, globToRegexp, loadMainConfig } = require("storybook/internal/common");
+    var { normalizeStories: normalizeStories2, globToRegexp, loadMainConfig: loadMainConfig2 } = require("storybook/internal/common");
     var { interopRequireDefault } = require_require_interop();
     var fs = require("fs");
-    var path2 = require("path");
-    var cwd = process.cwd();
-    var loadMain = async ({ configPath, cwd: cwd2 }) => {
+    var { networkInterfaces } = require("os");
+    var path3 = require("path");
+    var cwd2 = process.cwd();
+    var loadMain = async ({ configPath, cwd: cwd3 }) => {
       try {
-        const main = await loadMainConfig({ configDir: configPath, cwd: cwd2 });
+        const main = await loadMainConfig2({ configDir: configPath, cwd: cwd3 });
         return main;
       } catch {
         console.error("Error loading main config, trying fallback");
       }
-      const mainPathTs = path2.resolve(cwd2, configPath, `main.ts`);
-      const mainPathJs = path2.resolve(cwd2, configPath, `main.js`);
+      const mainPathTs = path3.resolve(cwd3, configPath, `main.ts`);
+      const mainPathJs = path3.resolve(cwd3, configPath, `main.js`);
       if (fs.existsSync(mainPathTs)) {
         return interopRequireDefault(mainPathTs);
       } else if (fs.existsSync(mainPathJs)) {
@@ -169,26 +180,40 @@ var require_generate = __commonJS({
         throw new Error(`Main config file not found at ${mainPathTs} or ${mainPathJs}`);
       }
     };
+    function getLocalIPAddress() {
+      const nets = networkInterfaces();
+      for (const name of Object.keys(nets)) {
+        for (const net of nets[name]) {
+          const familyV4Value = typeof net.family === "string" ? "IPv4" : 4;
+          if (net.family === familyV4Value && !net.internal) {
+            return net.address;
+          }
+        }
+      }
+      return "0.0.0.0";
+    }
     async function generate2({
       configPath,
-      /* absolute = false, */
       useJs = false,
-      docTools = true
+      docTools = true,
+      host = void 0,
+      port = 7007
     }) {
-      const storybookRequiresLocation = path2.resolve(
-        cwd,
+      const channelHost = host === "auto" ? getLocalIPAddress() : host;
+      const storybookRequiresLocation = path3.resolve(
+        cwd2,
         configPath,
         `storybook.requires.${useJs ? "js" : "ts"}`
       );
-      const main = await loadMain({ configPath, cwd });
-      const storiesSpecifiers = normalizeStories(main.stories, {
+      const main = await loadMain({ configPath, cwd: cwd2 });
+      const storiesSpecifiers = normalizeStories2(main.stories, {
         configDir: configPath,
-        workingDir: cwd
+        workingDir: cwd2
       });
       const normalizedStories = storiesSpecifiers.map((specifier) => {
         const reg = globToRegexp(`./${specifier.files}`);
         const { path: p, recursive: r, match: m } = toRequireContext(specifier);
-        const pathToStory = ensureRelativePathHasDot(path2.posix.relative(configPath, p));
+        const pathToStory = ensureRelativePathHasDot2(path3.posix.relative(configPath, p));
         return `{
     titlePrefix: "${specifier.titlePrefix}",
     directory: "${specifier.directory}",
@@ -249,6 +274,7 @@ var require_generate = __commonJS({
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
+  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
 }
 `;
       const fileContent = `/* do not change this file, it is auto generated by storybook. */
@@ -264,24 +290,25 @@ ${useJs ? "" : globalTypes}
 
 const annotations = ${annotations};
 
-global.STORIES = normalizedStories;
+globalThis.STORIES = normalizedStories;
+${channelHost ? `globalThis.STORYBOOK_WEBSOCKET = { host: '${channelHost}', port: ${port ?? 7007} };` : ""}
 
 ${useJs ? "" : "// @ts-ignore"}
 module?.hot?.accept?.();
 
 ${optionsVar}
 
-if (!global.view) {
-  global.view = start({
+if (!globalThis.view) {
+  globalThis.view = start({
     annotations,
     storyEntries: normalizedStories,
 ${options ? `    ${options},` : ""}
   });
 } else {
-  updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ""});
+  updateView(globalThis.view, annotations, normalizedStories${options ? `, ${options}` : ""});
 }
 
-export const view${useJs ? "" : ": View"} = global.view;
+export const view${useJs ? "" : ": View"} = globalThis.view;
 `;
       fs.writeFileSync(storybookRequiresLocation, fileContent, {
         encoding: "utf8",
@@ -300,27 +327,213 @@ __export(withStorybook_exports, {
   withStorybook: () => withStorybook
 });
 module.exports = __toCommonJS(withStorybook_exports);
-var path = __toESM(require("path"));
+var path2 = __toESM(require("path"));
 var import_generate = __toESM(require_generate());
+var import_common3 = require("storybook/internal/common");
+var import_telemetry = require("storybook/internal/telemetry");
+
+// src/metro/channelServer.ts
 var import_ws = require("ws");
+var import_node_http = require("http");
+
+// src/metro/buildIndex.ts
 var import_common = require("storybook/internal/common");
-var import_telemetry = require("storybook/internal/telemetry");
+var import_node_fs = require("fs");
+var import_glob = require("glob");
+var import_path = __toESM(require("path"));
+var import_csf_tools = require("storybook/internal/csf-tools");
+var import_csf = require("storybook/internal/csf");
+var import_preview_api = require("storybook/internal/preview-api");
+var import_common2 = __toESM(require_common());
+var cwd = process.cwd();
+var makeTitle = (fileName, specifier, userTitle) => {
+  const title = (0, import_preview_api.userOrAutoTitleFromSpecifier)(fileName, specifier, userTitle);
+  if (title) {
+    return title.replace("./", "");
+  } else if (userTitle) {
+    return userTitle.replace("./", "");
+  } else {
+    console.error("Could not generate title!!");
+    process.exit(1);
+  }
+};
+function ensureRelativePathHasDot(relativePath) {
+  return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+}
+async function buildIndex({ configPath }) {
+  const main = await (0, import_common.loadMainConfig)({ configDir: configPath, cwd });
+  if (!main.stories || !Array.isArray(main.stories)) {
+    throw new Error("No stories found");
+  }
+  const storiesSpecifiers = (0, import_common.normalizeStories)(main.stories, {
+    configDir: configPath,
+    workingDir: cwd
+  });
+  const specifierStoryPaths = storiesSpecifiers.map((specifier) => {
+    return (0, import_glob.sync)(specifier.files, {
+      cwd: import_path.default.resolve(process.cwd(), specifier.directory),
+      absolute: true,
+      // default to always ignore (exclude) anything in node_modules
+      ignore: ["**/node_modules"]
+    }).map((storyPath) => {
+      const normalizePathForWindows = (str) => import_path.default.sep === "\\" ? str.replace(/\\/g, "/") : str;
+      return normalizePathForWindows(storyPath);
+    });
+  });
+  const csfStories = specifierStoryPaths.reduce(
+    (acc, specifierStoryPathList, specifierIndex) => {
+      const paths = specifierStoryPathList.map((storyPath) => {
+        const code = (0, import_node_fs.readFileSync)(storyPath, { encoding: "utf-8" }).toString();
+        const relativePath = ensureRelativePathHasDot(import_path.default.posix.relative(cwd, storyPath));
+        return {
+          result: (0, import_csf_tools.loadCsf)(code, {
+            fileName: storyPath,
+            makeTitle: (userTitle) => makeTitle(relativePath, storiesSpecifiers[specifierIndex], userTitle)
+          }).parse(),
+          specifier: storiesSpecifiers[specifierIndex],
+          fileName: relativePath
+        };
+      });
+      return [...acc, ...paths];
+    },
+    new Array()
+  );
+  const index = {
+    v: 5,
+    entries: {}
+  };
+  for (const { result, specifier, fileName } of csfStories) {
+    const { meta, stories } = result;
+    if (stories && stories.length > 0) {
+      for (const story of stories) {
+        const id = (0, import_csf.toId)(meta.title, story.name);
+        index.entries[id] = {
+          type: "story",
+          subtype: "story",
+          id,
+          name: story.name,
+          title: meta.title,
+          importPath: `${specifier.directory}/${import_path.default.posix.relative(specifier.directory, fileName)}`,
+          tags: ["story"]
+        };
+      }
+    } else {
+      console.log(`No stories found for ${fileName}`);
+    }
+  }
+  try {
+    const previewPath = (0, import_common2.getFilePathWithExtension)({ configPath }, "preview");
+    const previewSourceCode = (0, import_node_fs.readFileSync)(previewPath, { encoding: "utf-8" }).toString();
+    const storySort = (0, import_csf_tools.getStorySortParameter)(previewSourceCode);
+    const sortableStories = Object.values(index.entries);
+    (0, import_preview_api.sortStoriesV7)(
+      sortableStories,
+      storySort,
+      sortableStories.map((entry) => entry.importPath)
+    );
+    const sorted = sortableStories.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    );
+    return { v: 5, entries: sorted };
+  } catch {
+    console.warn("Failed to sort stories, using unordered index");
+    return index;
+  }
+}
+
+// src/metro/channelServer.ts
+function createChannelServer({
+  port = 7007,
+  host = void 0,
+  configPath
+}) {
+  const httpServer = (0, import_node_http.createServer)(async (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    if (req.method === "GET" && req.url === "/index.json") {
+      try {
+        const index = await buildIndex({ configPath });
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify(index));
+      } catch (error) {
+        console.error("Failed to build index:", error);
+        res.writeHead(500, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Failed to build story index" }));
+      }
+      return;
+    }
+    if (req.method === "POST" && req.url === "/send-event") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk.toString();
+      });
+      req.on("end", () => {
+        try {
+          const json = JSON.parse(body);
+          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ success: true }));
+        } catch (error) {
+          console.error("Failed to parse event:", error);
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ success: false, error: "Invalid JSON" }));
+        }
+      });
+      return;
+    }
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Not found" }));
+  });
+  const wss = new import_ws.WebSocketServer({ server: httpServer });
+  setInterval(function ping() {
+    wss.clients.forEach(function each(client) {
+      if (client.readyState === import_ws.WebSocket.OPEN) {
+        client.send(JSON.stringify({ type: "ping", args: [] }));
+      }
+    });
+  }, 1e4);
+  wss.on("connection", function connection(ws) {
+    console.log("WebSocket connection established");
+    ws.on("error", console.error);
+    ws.on("message", function message(data) {
+      try {
+        const json = JSON.parse(data.toString());
+        wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+      } catch (error) {
+        console.error(error);
+      }
+    });
+  });
+  httpServer.listen(port, host, () => {
+    console.log(`WebSocket server listening on ${host ?? "localhost"}:${port}`);
+  });
+  return wss;
+}
+
+// src/metro/withStorybook.ts
 function withStorybook(config, options = {
   useJs: false,
   enabled: true,
   docTools: true,
   liteMode: false,
-  configPath: path.resolve(process.cwd(), "./.rnstorybook")
+  configPath: path2.resolve(process.cwd(), "./.rnstorybook")
 }) {
   const {
-    configPath = path.resolve(process.cwd(), "./.rnstorybook"),
+    configPath = path2.resolve(process.cwd(), "./.rnstorybook"),
     websockets,
     useJs = false,
     enabled = true,
     docTools = true,
     liteMode = false
   } = options;
-  const disableTelemetry = (0, import_common.optionalEnvToBoolean)(process.env.STORYBOOK_DISABLE_TELEMETRY);
+  const disableTelemetry = (0, import_common3.optionalEnvToBoolean)(process.env.STORYBOOK_DISABLE_TELEMETRY);
   if (!disableTelemetry && enabled) {
     const event = process.env.NODE_ENV === "production" ? "build" : "dev";
     (0, import_telemetry.telemetry)(event, {}).catch((e) => {
@@ -346,7 +559,7 @@ function withStorybook(config, options = {
           const resolved = resolveFunction(context, moduleName, platform);
           if (resolved.filePath?.includes?.(`${configPath}/index.tsx`)) {
             return {
-              filePath: path.resolve(__dirname, "../stub.js"),
+              filePath: path2.resolve(__dirname, "../stub.js"),
               type: "sourceFile"
             };
           }
@@ -359,27 +572,23 @@ function withStorybook(config, options = {
     };
   }
   if (websockets) {
-    const port = websockets.port ?? 7007;
-    const host = websockets.host ?? "localhost";
-    const wss = new import_ws.WebSocketServer({ port, host });
-    wss.on("connection", function connection(ws) {
-      console.log("WebSocket connection established");
-      ws.on("error", console.error);
-      ws.on("message", function message(data) {
-        try {
-          const json = JSON.parse(data.toString());
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
-        } catch (error) {
-          console.error(error);
-        }
-      });
+    const port = websockets === "auto" ? 7007 : websockets.port ?? 7007;
+    const host = websockets === "auto" ? "auto" : websockets.host;
+    createChannelServer({ port, host: host === "auto" ? void 0 : host, configPath });
+    (0, import_generate.generate)({
+      configPath,
+      useJs,
+      docTools,
+      host,
+      port
+    });
+  } else {
+    (0, import_generate.generate)({
+      configPath,
+      useJs,
+      docTools
     });
   }
-  (0, import_generate.generate)({
-    configPath,
-    useJs,
-    docTools
-  });
   return {
     ...config,
     transformer: {

package/dist/node.d.ts

@@ -0,0 +1,40 @@
+import { WebSocketServer } from 'ws';
+import { StoryIndex } from 'storybook/internal/types';
+
+/**
+ * Options for creating a channel server.
+ */
+interface ChannelServerOptions {
+    /**
+     * The port the server will listen on.
+     */
+    port?: number;
+    /**
+     * The host the server will bind to.
+     */
+    host?: string;
+    /**
+     * The path to the Storybook config folder.
+     */
+    configPath: string;
+}
+/**
+ * Creates a channel server for syncing storybook instances and sending events.
+ * The server provides both WebSocket and REST endpoints:
+ * - WebSocket: broadcasts all received messages to all connected clients
+ * - POST /send-event: sends an event to all WebSocket clients
+ * - GET /index.json: returns the story index built from story files
+ *
+ * @param options - Configuration options for the channel server.
+ * @param options.port - The port to listen on.
+ * @param options.host - The host to bind to.
+ * @param options.configPath - The path to the Storybook config folder.
+ * @returns The created WebSocketServer instance.
+ */
+declare function createChannelServer({ port, host, configPath, }: ChannelServerOptions): WebSocketServer;
+
+declare function buildIndex({ configPath }: {
+    configPath: string;
+}): Promise<StoryIndex>;
+
+export { buildIndex, createChannelServer };