CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--manager-webpack5

Builder implemented with webpack5 and webpack5-compatible loaders/plugins/config, used by @storybook/core-server to build the manager UI

—

Pending
Overview
Eval results
Files

prebuilt-manager.mddocs/

Prebuilt Manager

Support for using prebuilt manager bundles when the Storybook configuration meets certain criteria, providing optimal performance for standard configurations.

Capabilities

Prebuilt Directory Detection

Determines if a prebuilt manager can be used based on configuration analysis.

/**
 * Get path to prebuilt manager or false if not available
 * @param options - Storybook configuration options
 * @returns Promise resolving to prebuilt directory path or false
 */
function getPrebuiltDir(options: Options): Promise<string | false>;

interface Options {
  /** Path to Storybook configuration directory */
  configDir: string;
  /** Smoke test mode flag - disables prebuilt manager */
  smokeTest?: boolean;
  /** Manager cache flag - must be enabled for prebuilt manager */
  managerCache?: boolean;
}

Usage Examples:

import { getPrebuiltDir } from "@storybook/manager-webpack5/utils/prebuilt-manager";

const prebuiltPath = await getPrebuiltDir({
  configDir: '.storybook',
  managerCache: true,
  smokeTest: false,
});

if (prebuiltPath) {
  console.log('Using prebuilt manager from:', prebuiltPath);
  // Serve static files from prebuilt directory
} else {
  console.log('Building manager from source');
  // Proceed with webpack build
}

Prebuilt Manager Criteria

The prebuilt manager can only be used when ALL of the following conditions are met:

  1. Manager cache is enabled (managerCache !== false)
  2. Not in smoke test mode (smokeTest !== true)
  3. Prebuilt files exist (index.html exists in prebuilt directory)
  4. No custom manager configuration (no .storybook/manager.js file)
  5. Standard main configuration (main config file exists and is standard)
  6. Only default addons (uses only standard addons)
  7. No custom webpack configuration (no managerWebpack in main config)
  8. No custom babel configuration (no managerBabel in main config)
  9. No composition refs (no refs in config and no auto-discovered refs)
  10. No custom features (no features configuration)

Default Addons

Standard addons that are automatically installed with sb init and compatible with prebuilt manager.

/**
 * List of default addons installed with sb init
 */
const DEFAULT_ADDONS: string[] = [
  '@storybook/addon-links',
  '@storybook/addon-essentials'
];

Usage Examples:

import { DEFAULT_ADDONS } from "@storybook/manager-webpack5/utils/prebuilt-manager";

// Check if configuration only uses default addons
const configAddons = ['@storybook/addon-links', '@storybook/addon-essentials'];
const onlyDefaultAddons = configAddons.every(addon => DEFAULT_ADDONS.includes(addon));

Ignored Addons

Addons that don't affect the manager build and can be safely ignored when determining prebuilt manager eligibility.

/**
 * Addons that don't affect manager build and can be ignored
 */
const IGNORED_ADDONS: string[] = [
  '@storybook/preset-create-react-app',
  '@storybook/preset-scss', 
  '@storybook/preset-typescript',
  '@storybook/addon-links',
  '@storybook/addon-essentials'
];

Usage Examples:

import { IGNORED_ADDONS } from "@storybook/manager-webpack5/utils/prebuilt-manager";

// Filter out addons that don't affect manager
const managerAffectingAddons = allAddons.filter(addon => 
  !IGNORED_ADDONS.includes(addon)
);

if (managerAffectingAddons.length === 0) {
  console.log('No manager-affecting addons, prebuilt manager eligible');
}

Configuration Analysis

The prebuilt manager system analyzes the Storybook configuration to determine compatibility:

Main Configuration Analysis

Examines the main configuration file for:

interface MainConfig {
  /** Array of addon names/paths */
  addons?: string[];
  /** Composition references */
  refs?: Record<string, any>;
  /** Custom manager webpack configuration */
  managerWebpack?: Function;
  /** Custom manager babel configuration */
  managerBabel?: Function;
  /** Feature flags */
  features?: Record<string, any>;
}

Auto-Ref Detection

Checks for automatic composition references by:

  1. Scanning package.json dependencies
  2. Looking for packages with storybook.url configuration
  3. Verifying reference accessibility

Example of auto-discovered ref:

{
  "name": "@company/design-system",
  "storybook": {
    "url": "https://design-system.company.com"
  }
}

Performance Benefits

Using prebuilt manager provides significant performance improvements:

  • Zero Build Time: No webpack compilation needed
  • Instant Startup: Manager loads immediately from static files
  • Reduced Dependencies: No webpack or loader dependencies needed
  • Memory Efficiency: Lower memory usage during development
  • CI Optimization: Faster CI builds when prebuilt manager is available

Fallback Behavior

When prebuilt manager cannot be used, the system gracefully falls back to:

  1. Cache Check: Look for cached manager build
  2. Fresh Build: Compile manager from source using webpack
  3. Error Handling: Provide clear feedback about why prebuilt manager wasn't used

Debugging Prebuilt Manager

To debug why prebuilt manager isn't being used:

import { getPrebuiltDir, DEFAULT_ADDONS, IGNORED_ADDONS } from "@storybook/manager-webpack5/utils/prebuilt-manager";
import { getAutoRefs } from "@storybook/manager-webpack5/manager-config";

async function debugPrebuiltEligibility(options: Options) {
  const prebuiltDir = await getPrebuiltDir(options);
  
  if (!prebuiltDir) {
    // Check each condition individually
    console.log('Prebuilt manager not available. Checking conditions:');
    
    // Check for auto refs
    const autoRefs = await getAutoRefs(options);
    console.log('Auto refs found:', autoRefs.length);
    
    // Check other conditions...
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-storybook--manager-webpack5

docs

builder-functions.md

caching.md

index.md

prebuilt-manager.md

webpack-config.md

tile.json