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

builder-functions.mddocs/

Core Builder Functions

Primary builder interface implementing webpack5-based builds for the Storybook manager UI with development server integration and production optimization.

Capabilities

Start Development Server

Starts a development server with webpack dev middleware for hot reloading during development.

/**
 * Start development server with webpack dev middleware
 * @param options - Build options including configuration and router
 * @returns Promise resolving to build result with stats and bail function
 */
function start(options: BuilderStartOptions): Promise<BuilderStartResult>;

interface BuilderStartOptions {
  /** High-resolution start time for performance tracking */
  startTime?: [number, number];
  /** Storybook configuration options */
  options: Options;
  /** Express router for middleware attachment */
  router: Router;
}

interface BuilderStartResult {
  /** Function to stop the build process and cleanup */
  bail: () => Promise<void>;
  /** Webpack compilation statistics */
  stats: Stats;
  /** Total build time */
  totalTime: [number, number];
}

Usage Examples:

import { start } from "@storybook/manager-webpack5";
import express from "express";

const app = express();
const router = express.Router();

const result = await start({
  startTime: process.hrtime(),
  options: {
    configDir: '.storybook',
    outputDir: './storybook-static',
    presets: presetCollection,
    cache: cacheProvider,
    managerCache: true,
  },
  router,
});

// The router now has webpack dev middleware attached
app.use(router);

// Stop the build if needed
await result.bail();

Production Build

Builds the manager for production with optimization and asset generation.

/**
 * Build manager for production with optimization
 * @param options - Build options for production compilation
 * @returns Promise resolving to webpack Stats object
 */
function build(options: BuilderStartOptions): Promise<BuilderBuildResult>;

interface BuilderBuildResult extends Stats {
  // Webpack Stats object with compilation results
}

Usage Examples:

import { build } from "@storybook/manager-webpack5";

const stats = await build({
  startTime: process.hrtime(),
  options: {
    configDir: '.storybook',
    outputDir: './storybook-static',
    presets: presetCollection,
  },
});

if (stats.hasErrors()) {
  console.error('Build failed with errors:', stats.toJson().errors);
} else {
  console.log('Build completed successfully');
}

Get Webpack Configuration

Generates the complete webpack configuration for the manager build.

/**
 * Generate webpack configuration for manager build
 * @param options - Storybook configuration options
 * @returns Promise resolving to webpack Configuration object
 */
function getConfig(options: Options): Promise<Configuration>;

Usage Examples:

import { getConfig } from "@storybook/manager-webpack5";
import webpack from "webpack";

const config = await getConfig({
  configDir: '.storybook',
  outputDir: './storybook-static',
  presets: presetCollection,
});

// Use the configuration with webpack directly
const compiler = webpack(config);

Bail Build Process

Stops the build process and performs cleanup of resources.

/**
 * Stop build process and cleanup resources
 * @returns Promise that resolves when cleanup is complete
 */
function bail(): Promise<void>;

Usage Examples:

import { bail, start } from "@storybook/manager-webpack5";

// Start a build
const buildPromise = start(options);

// Stop it if needed (e.g., on process signal)
process.on('SIGINT', async () => {
  await bail();
  process.exit(0);
});

Webpack Executor

Provides access to the webpack instance with version validation.

interface ExecutorInterface {
  /**
   * Get webpack instance with version validation
   * @param options - Storybook options for webpack resolution
   * @returns Promise resolving to webpack function
   */
  get(options: Options): Promise<typeof webpack>;
}

const executor: ExecutorInterface;

Usage Examples:

import { executor } from "@storybook/manager-webpack5";

const webpackInstance = await executor.get(options);
const compiler = webpackInstance(config);

Error Handling

Creates webpack Stats object from error string for consistent error reporting.

/**
 * Create webpack Stats object from error string
 * @param err - Error message string
 * @returns Mock Stats object with error information
 */
function makeStatsFromError(err: string): Stats;

Usage Examples:

import { makeStatsFromError } from "@storybook/manager-webpack5";

try {
  // Build operation
} catch (error) {
  const errorStats = makeStatsFromError(error.message);
  console.error('Build error:', errorStats.toJson().errors);
}

// Create mock error stats for testing
const mockErrorStats = makeStatsFromError("Webpack compilation failed");
console.log('Has errors:', mockErrorStats.hasErrors()); // true
console.log('Error count:', mockErrorStats.toJson().errors.length); // 1

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