or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

builder-operations.mdconfiguration-system.mdindex.mdpreset-system.md
tile.json

tessl/npm-storybook--builder-webpack4

Webpack 4-based builder for Storybook that provides framework-agnostic build engine for preview iframe compilation and bundling.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/builder-webpack4@6.5.x

To install, run

npx @tessl/cli install tessl/npm-storybook--builder-webpack4@6.5.0

index.mddocs/

Storybook Builder Webpack4

Storybook Builder Webpack4 is a Webpack 4-based builder for Storybook that serves as the framework-agnostic build engine powering the Storybook preview iframe. It provides comprehensive build functionality including development server with hot module replacement, production builds, TypeScript compilation, Babel transforms, CSS processing, and asset handling.

Package Information

  • Package Name: @storybook/builder-webpack4
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/builder-webpack4

Core Imports

import { start, build, getConfig, executor, makeStatsFromError, bail, corePresets, overridePresets } from "@storybook/builder-webpack4";

For preset configuration:

// In .storybook/main.js
module.exports = {
  core: {
    builder: 'webpack4',
  },
};

Basic Usage

import { start, build, getConfig } from "@storybook/builder-webpack4";
import type { Options } from "@storybook/core-common";

// For development server
const startOptions = {
  startTime: process.hrtime(),
  options: storybookOptions,
  router: expressRouter,
};

const devResult = await start(startOptions);

// For production build
const buildOptions = {
  startTime: process.hrtime(),
  options: storybookOptions,
};

const buildResult = await build(buildOptions);

Architecture

Storybook Builder Webpack4 is built around several key components:

  • Builder Functions: Core start and build functions that orchestrate the webpack compilation process
  • Configuration System: Dynamic webpack configuration generation based on Storybook options and presets
  • Preset System: Modular configuration system allowing framework-specific and custom webpack configurations
  • Generator Pattern: Uses async generators for interruptible build processes
  • Middleware Integration: Express middleware integration for development server functionality

Capabilities

Builder Operations

Core build functionality for development and production modes, with generator-based interruption support and progress reporting.

function start(options: BuilderStartOptions): Promise<BuilderStartResult>;
function build(options: BuilderBuildOptions): Promise<BuilderBuildResult>;
function bail(): Promise<void>;

Builder Operations

Configuration System

Webpack configuration generation and customization system that integrates with Storybook's preset system.

function getConfig(options: Options): Promise<Configuration>;

interface Options {
  babelOptions: any;
  typescriptOptions: any;
  presets: PresetApi;
  framework: string;
  configType: 'DEVELOPMENT' | 'PRODUCTION';
  [key: string]: any;
}

Configuration System

Preset System

Modular preset system for framework-specific and custom webpack configurations, including entry point management and plugin configuration.

const corePresets: string[];
const overridePresets: string[];

Preset System

Types

interface BuilderStartOptions {
  startTime?: ReturnType<typeof process.hrtime>;
  options: Options;
  router: any;
}

interface BuilderStartResult {
  bail: () => Promise<void>;
  stats: Stats;
  totalTime: ReturnType<typeof process.hrtime>;
}

interface BuilderBuildOptions {
  startTime?: ReturnType<typeof process.hrtime>;
  options: Options;
}

interface BuilderBuildResult extends Stats {}

type WebpackBuilder = Builder<Configuration, Stats>;

type Unpromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;

type StarterFunction = (
  options: BuilderStartOptions
) => AsyncGenerator<unknown, BuilderStartResult, void>;

type BuilderFunction = (
  options: BuilderBuildOptions
) => AsyncGenerator<unknown, BuilderBuildResult, void>;

// Webpack types (from @types/webpack)
interface Stats {
  hasErrors(): boolean;
  hasWarnings(): boolean;
  toJson(options?: any): {
    warnings: string[];
    errors: string[];
    [key: string]: any;
  };
}

interface Configuration {
  name?: string;
  entry?: any;
  output?: {
    publicPath?: string;
    [key: string]: any;
  };
  module?: {
    rules?: any[];
  };
  plugins?: any[];
  resolve?: {
    alias?: Record<string, string>;
    extensions?: string[];
    [key: string]: any;
  };
  watchOptions?: any;
  stats?: any;
  [key: string]: any;
}

interface Builder<Config, BuildResult> {
  getConfig: (options: Options) => Promise<Config>;
  start: (options: any) => Promise<any>;
  build: (options: any) => Promise<BuildResult>;
  bail: () => Promise<void>;
}

interface PresetApi {
  apply<T = any>(
    key: string,
    defaultValue?: T,
    options?: any
  ): Promise<T>;
}