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

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Storybook Manager Webpack5

Name: tessl/npm-storybook--manager-webpack5
Author: tessl

Storybook Manager Webpack5 is a modern webpack5-based builder for the Storybook manager UI, serving as a high-performance alternative to the default webpack4 builder. It provides comprehensive webpack5 configuration, development server integration, intelligent caching, and support for Storybook composition features.

Package Information

Package Name: @storybook/manager-webpack5
Package Type: npm
Language: TypeScript
Installation: npm install @storybook/manager-webpack5

Core Imports

import { 
  start, 
  build, 
  getConfig, 
  bail,
  WEBPACK_VERSION,
  executor 
} from "@storybook/manager-webpack5";

For CommonJS:

const { 
  start, 
  build, 
  getConfig, 
  bail,
  WEBPACK_VERSION,
  executor 
} = require("@storybook/manager-webpack5");

For preset usage:

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

For sub-module imports:

// Manager preset functions (for advanced webpack configuration)
const { managerWebpack, managerEntries } = require("@storybook/manager-webpack5/manager-preset");

// Prebuilt manager utilities (for optimization scenarios)
const { getPrebuiltDir, DEFAULT_ADDONS, IGNORED_ADDONS } = require("@storybook/manager-webpack5/prebuilt-manager");

Note: Sub-module imports provide access to internal utilities. Most users should use the main module exports. Sub-modules are primarily used by Storybook core and advanced integrations.

Basic Usage

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

// Development mode with hot reloading
const options: Options = {
  configDir: '.storybook',
  outputDir: './storybook-static',
  // ... other options
};

// Start development server
const devResult = await start({
  options,
  startTime: process.hrtime(),
  router: expressRouter,
});

// Production build
const buildResult = await build({
  options,
  startTime: process.hrtime(),
});

// Get webpack configuration
const webpackConfig = await getConfig(options);

Architecture

Storybook Manager Webpack5 is built around several key components:

Builder Interface: Implements the Storybook Builder interface with start, build, and getConfig methods
Webpack5 Integration: Full webpack5 configuration with modern loaders, plugins, and optimization
Generator-based Processing: Uses async generators for interruptible build processes
Caching System: Intelligent caching for manager configurations and builds to improve performance
Development Server: Webpack dev middleware integration for hot reloading during development
Composition Support: Auto-discovery and configuration of Storybook composition references
Prebuilt Manager: Support for using prebuilt manager bundles when possible

Capabilities

Core Builder Functions

Primary builder interface implementing webpack5-based builds for the Storybook manager UI.

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

interface BuilderStartOptions {
  startTime?: [number, number];
  options: Options;
  router: Router;
}

interface BuilderStartResult {
  bail: () => Promise<void>;
  stats: Stats;
  totalTime: [number, number];
}

interface BuilderBuildResult extends Stats {}

Core Builder Functions

Webpack Configuration

Webpack5 configuration generation with manager-specific settings, plugin configuration, and entry point management.

function getManagerWebpackConfig(options: Options): Promise<Configuration>;
function getAutoRefs(options: Options, disabledRefs?: string[]): Promise<Ref[]>;

interface Options {
  configDir: string;
  outputDir: string;
  presets: PresetCollection;
  cache?: CacheProvider;
  managerCache?: boolean;
  smokeTest?: boolean;
  // ... other options
}

interface Ref {
  id: string;
  url: string;
  title: string;
  version?: string;
  type?: 'server-checked' | 'unknown';
}

Webpack Configuration

Caching System

Intelligent caching system for manager builds and configurations to improve build performance.

function useManagerCache(
  cacheKey: string,
  options: Options,
  managerConfig: Configuration
): Promise<boolean>;

function clearManagerCache(cacheKey: string, options: Options): Promise<boolean>;

Caching System

Prebuilt Manager

Support for using prebuilt manager bundles when the Storybook configuration meets certain criteria.

function getPrebuiltDir(options: Options): Promise<string | false>;

const DEFAULT_ADDONS: string[];
const IGNORED_ADDONS: string[];

Prebuilt Manager

Constants

const WEBPACK_VERSION: string; // "5"
const corePresets: string[]; // [require.resolve('./presets/manager-preset')]
const overridePresets: string[]; // []

Types

type WebpackBuilder = Builder<Configuration, Stats>;
type BuilderStartOptions = Partial<Parameters<WebpackBuilder['start']>['0']>;
type BuilderStartResult = Unpromise<ReturnType<WebpackBuilder['start']>>;
type BuilderBuildOptions = Partial<Parameters<WebpackBuilder['build']>['0']>;
type BuilderBuildResult = Unpromise<ReturnType<WebpackBuilder['build']>>;

interface ExecutorInterface {
  /** 
   * Get webpack instance with version validation
   * Ensures webpack5 compatibility and provides webpack function
   */
  get(options: Options): Promise<typeof webpack>;
}

const executor: ExecutorInterface;