refactor to createBrowserChannel

Author: ndelangen

code/builders/builder-vite/src/codegen-set-addon-channel.ts

@@ -1,9 +1,9 @@
 export async function generateAddonSetupCode() {
   return `
-    import { createPostMessageChannel } from '@storybook/channels';
+    import { createBrowserChannel } from '@storybook/channels';
     import { addons } from '@storybook/preview-api';
 
-    const channel = createPostMessageChannel({ page: 'preview' });
+    const channel = createBrowserChannel({ page: 'preview' });
     addons.setChannel(channel);
     window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
     

code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars

@@ -1,14 +1,14 @@
 import { global } from '@storybook/global';
 
 import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api';
-import { createPostMessageChannel } from '@storybook/channels';
+import { createBrowserChannel } from '@storybook/channels';
 
 import { importFn } from './{{storiesFilename}}';
 
 const getProjectAnnotations = () =>
   composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]);
 
-const channel = createPostMessageChannel({ page: 'preview' });
+const channel = createBrowserChannel({ page: 'preview' });
 addons.setChannel(channel);
 
 if (global.CONFIG_TYPE === 'DEVELOPMENT'){

code/lib/channels/src/index.ts

@@ -2,10 +2,40 @@
 /// <reference path="./typings.d.ts" />
 
 import { Channel } from './main';
+import { PostMessageTransport } from './postmessage';
+import type { ChannelTransport, Config } from './types';
+import { WebsocketTransport } from './websocket';
 
 export * from './main';
 
 export default Channel;
 
-export { createChannel as createPostMessageChannel } from './postmessage';
-export { createChannel as createWebSocketChannel } from './websocket';
+export { createChannel as createPostMessageChannel, PostMessageTransport } from './postmessage';
+export { createChannel as createWebSocketChannel, WebsocketTransport } from './websocket';
+
+type Options = Config & {
+  extraTransports?: ChannelTransport[];
+};
+
+/**
+ * Creates a new browser channel instance.
+ * @param {Options} options - The options object.
+ * @param {Page} options.page - The puppeteer page instance.
+ * @param {ChannelTransport[]} [options.extraTransports=[]] - An optional array of extra channel transports.
+ * @returns {Channel} - The new channel instance.
+ */
+export function createBrowserChannel({ page, extraTransports = [] }: Options): Channel {
+  const transports: ChannelTransport[] = [new PostMessageTransport({ page }), ...extraTransports];
+
+  if (CONFIG_TYPE === 'DEVELOPMENT') {
+    const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss';
+    const { hostname, port } = window.location;
+    const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`;
+
+    transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} }));
+  }
+
+  return new Channel({ transports });
+}
+
+export type { Listener, ChannelEvent, ChannelTransport, ChannelHandler } from './types';

code/lib/channels/src/main.ts

@@ -1,35 +1,14 @@
 /// <reference types="node" />
 
-export type ChannelHandler = (event: ChannelEvent) => void;
-
-export interface ChannelTransport {
-  send(event: ChannelEvent, options?: any): void;
-  setHandler(handler: ChannelHandler): void;
-}
-
-export interface ChannelEvent {
-  type: string; // eventName
-  from: string;
-  args: any[];
-}
-
-export interface Listener {
-  (...args: any[]): void;
-}
-
-interface EventsKeyValue {
-  [key: string]: Listener[];
-}
-
-type ChannelArgs = ChannelArgsSingle | ChannelArgsMulti;
-interface ChannelArgsSingle {
-  transport?: ChannelTransport;
-  async?: boolean;
-}
-interface ChannelArgsMulti {
-  transports: ChannelTransport[];
-  async?: boolean;
-}
+import type {
+  ChannelArgs,
+  ChannelArgsMulti,
+  EventsKeyValue,
+  ChannelTransport,
+  ChannelArgsSingle,
+  Listener,
+  ChannelEvent,
+} from './types';
 
 const isMulti = (args: ChannelArgs): args is ChannelArgsMulti => {
   // @ts-expect-error (we guard against this right here)

code/lib/channels/src/postmessage/getEventSourceUrl.ts

@@ -0,0 +1,44 @@
+import { logger } from '@storybook/client-logger';
+
+export const getEventSourceUrl = (event: MessageEvent) => {
+  const frames: HTMLIFrameElement[] = Array.from(
+    document.querySelectorAll('iframe[data-is-storybook]')
+  );
+  // try to find the originating iframe by matching it's contentWindow
+  // This might not be cross-origin safe
+  const [frame, ...remainder] = frames.filter((element) => {
+    try {
+      return element.contentWindow === event.source;
+    } catch (err) {
+      // continue
+    }
+
+    const src = element.getAttribute('src');
+    let origin;
+
+    try {
+      if (!src) {
+        return false;
+      }
+
+      ({ origin } = new URL(src, document.location.toString()));
+    } catch (err) {
+      return false;
+    }
+    return origin === event.origin;
+  });
+
+  const src = frame?.getAttribute('src');
+  if (src && remainder.length === 0) {
+    const { protocol, host, pathname } = new URL(src, document.location.toString());
+    return `${protocol}//${host}${pathname}`;
+  }
+
+  if (remainder.length > 0) {
+    // If we found multiple matches, there's going to be trouble
+    logger.error('found multiple candidates for event source');
+  }
+
+  // If we found no frames of matches
+  return null;
+};

code/lib/channels/src/postmessage/index.ts

@@ -7,21 +7,17 @@ import { logger, pretty } from '@storybook/client-logger';
 import { isJSON, parse, stringify } from 'telejson';
 import qs from 'qs';
 import invariant from 'tiny-invariant';
-import { WebsocketTransport } from '../websocket/index';
-import type { ChannelHandler, ChannelEvent, ChannelTransport } from '../main';
 import { Channel } from '../main';
+import type {
+  ChannelTransport,
+  BufferedEvent,
+  ChannelHandler,
+  Config,
+  ChannelEvent,
+} from '../types';
+import { getEventSourceUrl } from './getEventSourceUrl';
 
-const { document, location, CONFIG_TYPE } = global;
-
-interface Config {
-  page: 'manager' | 'preview';
-}
-
-interface BufferedEvent {
-  event: ChannelEvent;
-  resolve: (value?: any) => void;
-  reject: (reason?: any) => void;
-}
+const { document, location } = global;
 
 export const KEY = 'storybook-channel';
 
@@ -31,7 +27,7 @@ const defaultEventOptions = { allowFunction: true, maxDepth: 25 };
 // that way we can send postMessage to child windows as well, not just iframe
 // https://stackoverflow.com/questions/6340160/how-to-get-the-references-of-all-already-opened-child-windows
 
-export class PostmsgTransport implements ChannelTransport {
+export class PostMessageTransport implements ChannelTransport {
   private buffer: BufferedEvent[];
 
   private handler?: ChannelHandler;
@@ -246,65 +242,24 @@ export class PostmsgTransport implements ChannelTransport {
   }
 }
 
-const getEventSourceUrl = (event: MessageEvent) => {
-  const frames: HTMLIFrameElement[] = Array.from(
-    document.querySelectorAll('iframe[data-is-storybook]')
-  );
-  // try to find the originating iframe by matching it's contentWindow
-  // This might not be cross-origin safe
-  const [frame, ...remainder] = frames.filter((element) => {
-    try {
-      return element.contentWindow === event.source;
-    } catch (err) {
-      // continue
-    }
-
-    const src = element.getAttribute('src');
-    let origin;
-
-    try {
-      if (!src) {
-        return false;
-      }
-
-      ({ origin } = new URL(src, document.location.toString()));
-    } catch (err) {
-      return false;
-    }
-    return origin === event.origin;
-  });
-
-  const src = frame?.getAttribute('src');
-  if (src && remainder.length === 0) {
-    const { protocol, host, pathname } = new URL(src, document.location.toString());
-    return `${protocol}//${host}${pathname}`;
-  }
-
-  if (remainder.length > 0) {
-    // If we found multiple matches, there's going to be trouble
-    logger.error('found multiple candidates for event source');
-  }
-
-  // If we found no frames of matches
-  return null;
-};
+/**
+ * @deprecated This export is deprecated. Use `PostMessageTransport` instead. This API will be removed in 8.0.
+ */
+export const PostmsgTransport = PostMessageTransport;
 
 /**
- * Creates a channel which communicates with an iframe or child window.
+ * @deprecated This function is deprecated. Use the `createBrowserChannel` factory function from `@storybook/channels` instead. This API will be removed in 8.0.
+ * @param {Config} config - The configuration object.
+ * @returns {Channel} The channel instance.
  */
 export function createChannel({ page }: Config): Channel {
-  const transports: ChannelTransport[] = [new PostmsgTransport({ page })];
-
-  if (CONFIG_TYPE === 'DEVELOPMENT') {
-    const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss';
-    const { hostname, port } = window.location;
-    const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`;
-
-    transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} }));
-  }
-
-  return new Channel({ transports });
+  const transport = new PostmsgTransport({ page });
+  return new Channel({ transport });
 }
 
-// backwards compat with builder-vite
+/**
+ * @deprecated This function is deprecated. Use the `createBrowserChannel` factory function from `@storybook/channels` instead. This API will be removed in 8.0.
+ * @param {Config} config - The configuration object.
+ * @returns {Channel} The channel instance.
+ */
 export default createChannel;

code/lib/channels/src/types.ts

@@ -0,0 +1,40 @@
+export interface Config {
+  page: 'manager' | 'preview';
+}
+
+export interface BufferedEvent {
+  event: ChannelEvent;
+  resolve: (value?: any) => void;
+  reject: (reason?: any) => void;
+}
+
+export type ChannelHandler = (event: ChannelEvent) => void;
+
+export interface ChannelTransport {
+  send(event: ChannelEvent, options?: any): void;
+  setHandler(handler: ChannelHandler): void;
+}
+
+export interface ChannelEvent {
+  type: string; // eventName
+  from: string;
+  args: any[];
+}
+
+export interface Listener {
+  (...args: any[]): void;
+}
+
+export interface EventsKeyValue {
+  [key: string]: Listener[];
+}
+
+export type ChannelArgs = ChannelArgsSingle | ChannelArgsMulti;
+export interface ChannelArgsSingle {
+  transport?: ChannelTransport;
+  async?: boolean;
+}
+export interface ChannelArgsMulti {
+  transports: ChannelTransport[];
+  async?: boolean;
+}

code/lib/channels/src/websocket/index.ts

@@ -5,10 +5,8 @@ import { global } from '@storybook/global';
 import { logger } from '@storybook/client-logger';
 import { isJSON, parse, stringify } from 'telejson';
 import invariant from 'tiny-invariant';
-import type { ChannelHandler, ChannelTransport } from '../main';
 import { Channel } from '../main';
-
-const { CONFIG_TYPE } = global;
+import type { ChannelTransport, ChannelHandler } from '../types';
 
 const { WebSocket } = global;
 
@@ -25,12 +23,12 @@ interface CreateChannelArgs {
   onError?: OnError;
 }
 
-export class WebsocketTransport {
-  private socket: WebSocket;
+export class WebsocketTransport implements ChannelTransport {
+  private buffer: string[] = [];
 
   private handler?: ChannelHandler;
 
-  private buffer: string[] = [];
+  private socket: WebSocket;
 
   private isReady = false;
 
@@ -80,28 +78,28 @@ export class WebsocketTransport {
   }
 }
 
+/**
+ * @deprecated This function is deprecated. Use the `createBrowserChannel` factory function from `@storybook/channels` instead. This API will be removed in 8.0.
+ * @param {CreateChannelArgs} options - The options for creating the channel.
+ * @param {string} [options.url] - The URL of the WebSocket server to connect to.
+ * @param {boolean} [options.async=false] - Whether the channel should be asynchronous.
+ * @param {OnError} [options.onError] - A function to handle errors that occur during the channel's lifetime.
+ * @returns {Channel} - The newly created channel.
+ */
 export function createChannel({
   url,
   async = false,
   onError = (err) => logger.warn(err),
 }: CreateChannelArgs) {
-  const transports: ChannelTransport[] = [];
-
-  if (url) {
-    transports.push(new WebsocketTransport({ url, onError }));
-  }
-
-  const isUrlServerChannel = !!url?.includes('storybook-server-channel');
-
-  if (CONFIG_TYPE === 'DEVELOPMENT' && isUrlServerChannel === false) {
+  let channelUrl = url;
+  if (!channelUrl) {
     const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss';
     const { hostname, port } = window.location;
-    const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`;
-
-    transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} }));
+    channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`;
   }
 
-  return new Channel({ transports, async });
+  const transport = new WebsocketTransport({ url: channelUrl, onError });
+  return new Channel({ transport, async });
 }
 
 // backwards compat with builder-vite