tessl/npm-storybook--channels

Storybook Channel - A deprecated package that provides shims for the internal channels module used for communication between Storybook Manager and Renderer

—

Pending

Overview

Eval results

Files

Factory Functions

Name: tessl/npm-storybook--channels
Author: tessl

Factory functions provide convenient ways to create pre-configured Channel instances for common use cases, particularly browser-based Storybook setups with appropriate transport combinations.

Capabilities

Create Browser Channel

The primary factory function for creating browser-optimized channels with appropriate transports for Storybook Manager and Preview communication.

/**
 * Creates a new browser channel instance with appropriate transports
 * Automatically configures PostMessage transport and optionally WebSocket transport
 * @param options - Configuration options for the channel
 * @returns Configured Channel instance ready for browser use
 */
function createBrowserChannel(options: Options): Channel;

interface Options {
  /** Page identifier - determines transport configuration */
  page: 'manager' | 'preview';
  /** Optional additional transports to include */
  extraTransports?: ChannelTransport[];
}

Usage Examples:

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

// Create channel for Storybook Manager
const managerChannel = createBrowserChannel({ page: 'manager' });

// Create channel for Storybook Preview
const previewChannel = createBrowserChannel({ page: 'preview' });

// Create channel with extra transports
const enhancedChannel = createBrowserChannel({
  page: 'manager',
  extraTransports: [
    new CustomTransport({ endpoint: '/api/events' })
  ]
});

// Use the channel
managerChannel.addListener('story-changed', (data) => {
  console.log('Story changed in manager:', data);
});

managerChannel.emit('request-story-list');

Transport Configuration

The factory function automatically configures appropriate transports based on the page type and environment.

Default Transport Configuration:

For page: 'manager':

PostMessageTransport configured for manager-side communication
WebSocket transport (if available in development mode)

For page: 'preview':

PostMessageTransport configured for preview-side communication
WebSocket transport (if available in development mode)

Environment Detection:

// The factory function detects the environment and configures transports accordingly
// Development mode: PostMessage + WebSocket
// Production mode: PostMessage only
// Custom environments: PostMessage + extraTransports

Advanced Factory Usage

Creating channels with custom transport combinations and configurations.

Custom Transport Integration:

import { createBrowserChannel, WebsocketTransport } from "@storybook/channels";

// Create channel with custom WebSocket configuration
const customChannel = createBrowserChannel({
  page: 'manager',
  extraTransports: [
    new WebsocketTransport({
      url: 'wss://custom-storybook-server.com/ws',
      onError: (error) => console.error('Custom WebSocket error:', error),
      page: 'manager'
    })
  ]
});

Multiple Transport Scenarios:

// Channel with multiple custom transports
const multiTransportChannel = createBrowserChannel({
  page: 'preview',
  extraTransports: [
    new WebsocketTransport({ 
      url: 'ws://localhost:9001',
      onError: (error) => console.error('WebSocket connection error:', error),
      page: 'preview'
    }),
    new CustomHttpTransport({ endpoint: '/events' }),
    new CustomServerSentEventsTransport({ url: '/sse' })
  ]
});

Utility Functions

Event Source URL Detection

Utility function for determining the source URL of postMessage events, used internally by the PostMessage transport.

/**
 * Determines the source URL of a postMessage event
 * Used internally for validating and routing postMessage communications
 * @param event - MessageEvent from postMessage listener
 * @returns Source URL string or null if unable to determine
 */
function getEventSourceUrl(event: MessageEvent): string | null;

Usage Examples:

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

// Used internally by PostMessage transport
window.addEventListener('message', (event) => {
  const sourceUrl = getEventSourceUrl(event);
  
  if (sourceUrl && isAllowedOrigin(sourceUrl)) {
    // Process the message
    handleChannelMessage(event.data);
  }
});

// Custom implementation example
function isAllowedOrigin(url: string): boolean {
  const allowedOrigins = [
    'http://localhost:6006',
    'https://your-storybook.netlify.app'
  ];
  
  return allowedOrigins.some(origin => url.startsWith(origin));
}

Factory Function Benefits

Simplified Setup:

Eliminates boilerplate transport configuration
Provides sensible defaults for browser environments
Handles environment detection automatically

Consistency:

Ensures consistent transport configuration across different parts of Storybook
Reduces configuration errors and inconsistencies
Maintains compatibility with Storybook's internal expectations

Extensibility:

Supports additional transports through extraTransports option
Allows customization while maintaining core functionality
Facilitates testing and development workflows

Environment Adaptation:

Automatically adapts to development vs production environments
Handles transport availability gracefully
Provides fallback mechanisms for constrained environments

Install with Tessl CLI

npx tessl i tessl/npm-storybook--channels

docs