Storybook Channel PostMessage

import { createChannel } from "@storybook/channel-postmessage";

const { createChannel } = require("@storybook/channel-postmessage");

import { createPostMessageChannel } from "@storybook/channels";

import { createChannel } from "@storybook/channel-postmessage";

// Create a channel for manager context
const managerChannel = createChannel({ page: 'manager' });

// Create a channel for preview context  
const previewChannel = createChannel({ page: 'preview' });

// Listen for events
managerChannel.on('story-changed', (event) => {
  console.log('Story changed:', event);
});

// Emit events
managerChannel.emit('request-story', { storyId: 'example' });

/**
 * Creates a channel instance with PostMessage transport
 * @deprecated Use createPostMessageChannel from @storybook/channels instead
 * @param config - Configuration specifying the page context
 * @returns Channel instance for event communication
 */
function createChannel(config: Config): Channel;

interface Config {
  /** Specifies whether this is running in manager or preview context */
  page: 'manager' | 'preview';
}

/**
 * Transport implementation for postMessage-based communication
 * Handles buffering, frame detection, and message routing
 */
class PostMessageTransport implements ChannelTransport {
  constructor(config: Config);
  
  /** Sets the event handler for incoming messages */
  setHandler(handler: ChannelHandler): void;
  
  /** Sends event to associated window, buffering if window not available */
  send(event: ChannelEvent, options?: any): Promise<any>;
}

/**
 * @deprecated Use PostMessageTransport instead
 */
class PostmsgTransport extends PostMessageTransport {}

/**
 * Core channel class for event communication
 * Provides EventEmitter-like interface with transport abstraction
 */
class Channel {
  constructor(input: ChannelArgs);
  
  /** Whether channel operates asynchronously */
  readonly isAsync: boolean;
  
  /** Whether channel has transport configured */
  get hasTransport(): boolean;
  
  /** Add event listener */
  addListener(eventName: string, listener: Listener): void;
  
  /** Emit event to all listeners and transports */
  emit(eventName: string, ...args: any): void;
  
  /** Get data from last event of given type */
  last(eventName: string): any;
  
  /** Get all registered event names */
  eventNames(): string[];
  
  /** Get number of listeners for event */
  listenerCount(eventName: string): number;
  
  /** Get listeners array for event */
  listeners(eventName: string): Listener[] | undefined;
  
  /** Add one-time event listener */
  once(eventName: string, listener: Listener): void;
  
  /** Remove all listeners for event or all events */
  removeAllListeners(eventName?: string): void;
  
  /** Remove specific listener */
  removeListener(eventName: string, listener: Listener): void;
  
  /** Alias for addListener */
  on(eventName: string, listener: Listener): void;
  
  /** Alias for removeListener */
  off(eventName: string, listener: Listener): void;
}

/**
 * Determines the source URL of a message event from iframe elements
 * @param event - MessageEvent to analyze
 * @returns Source URL or null if unable to determine
 */
function getEventSourceUrl(event: MessageEvent): string | null;

/** Transport interface for channel communication */
interface ChannelTransport {
  send(event: ChannelEvent, options?: any): void;
  setHandler(handler: ChannelHandler): void;
}

/** Channel event structure */
interface ChannelEvent {
  /** Event name/type */
  type: string;
  /** Event sender identifier */
  from: string;
  /** Event arguments */
  args: any[];
}

/** Event handler function type */
type ChannelHandler = (event: ChannelEvent) => void;

/** Event listener function type */
interface Listener {
  (...args: any[]): void;
}

/** Event buffering structure for disconnected state */
interface BufferedEvent {
  event: ChannelEvent;
  resolve: (value?: any) => void;
  reject: (reason?: any) => void;
}

/** Channel constructor arguments - single transport */
interface ChannelArgsSingle {
  transport?: ChannelTransport;
  async?: boolean;
}

/** Channel constructor arguments - multiple transports */  
interface ChannelArgsMulti {
  transports: ChannelTransport[];
  async?: boolean;
}

/** Union type for channel constructor arguments */
type ChannelArgs = ChannelArgsSingle | ChannelArgsMulti;

/** Map of event names to listener arrays */
interface EventsKeyValue {
  [key: string]: Listener[];
}

/** Message key identifier for Storybook channel messages */
const KEY: string = 'storybook-channel';

import { createChannel } from '@storybook/channel-postmessage';
const channel = createChannel({ page: 'manager' });

import { createPostMessageChannel } from '@storybook/channels';
const channel = createPostMessageChannel({ page: 'manager' });