0
# Storybook HTML Webpack5
1

2
Storybook HTML Webpack5 is a framework integration that enables using Storybook with HTML applications using Webpack 5 as the build system. It provides TypeScript configuration types and utilities for seamlessly integrating HTML projects with Storybook's development environment.
3

4
## Package Information
5

6
- **Package Name**: @storybook/html-webpack5
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @storybook/html-webpack5`
10

11
## Core Imports
12

13
```typescript
14
import type { StorybookConfig, FrameworkOptions } from "@storybook/html-webpack5";
15
```
16

17
For Node utilities:
18

19
```typescript
20
import { defineMain } from "@storybook/html-webpack5/node";
21
```
22

23
CommonJS:
24

25
```javascript
26
const { defineMain } = require("@storybook/html-webpack5/node");
27
```
28

29
## Basic Usage
30

31
Configure Storybook framework in your `main.ts` or `main.js` file:
32

33
```typescript
34
import type { StorybookConfig } from "@storybook/html-webpack5";
35

36
const config: StorybookConfig = {
37
  framework: {
38
    name: "@storybook/html-webpack5",
39
    options: {
40
      builder: {
41
        useSWC: true,
42
      },
43
    },
44
  },
45
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
46
  addons: ["@storybook/addon-essentials"],
47
};
48

49
export default config;
50
```
51

52
For Node configuration with type-safe main config definition:
53

54
```typescript
55
import { defineMain } from "@storybook/html-webpack5/node";
56

57
export default defineMain({
58
  framework: "@storybook/html-webpack5",
59
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
60
  addons: ["@storybook/addon-essentials"],
61
});
62
```
63

64
## Capabilities
65

66
### Configuration Types
67

68
Core TypeScript interfaces for configuring Storybook with HTML and Webpack 5.
69

70
```typescript { .api }
71
/**
72
 * Main configuration interface for Storybook in main.ts files
73
 */
74
interface StorybookConfig extends 
75
  Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework>,
76
  StorybookConfigWebpack,
77
  StorybookConfigFramework {
78
  framework: FrameworkName | {
79
    name: FrameworkName;
80
    options: FrameworkOptions;
81
  };
82
  core?: StorybookConfigBase['core'] & {
83
    builder?: BuilderName | {
84
      name: BuilderName;
85
      options: BuilderOptions;
86
    };
87
  };
88
  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & 
89
    StorybookConfigBase['typescript'];
90
}
91

92
/**
93
 * Configuration options for the framework
94
 */
95
interface FrameworkOptions {
96
  builder?: BuilderOptions;
97
}
98

99
/**
100
 * Framework identifier type
101
 */
102
type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;
103

104
/**
105
 * Builder identifier type  
106
 */
107
type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
108
```
109

110
### Node Configuration Utilities
111

112
Helper functions for defining Storybook configuration with enhanced type safety.
113

114
```typescript { .api }
115
/**
116
 * Utility function to define Storybook main configuration with TypeScript support
117
 * @param config - Storybook configuration object
118
 * @returns The same configuration object with proper typing
119
 */
120
function defineMain(config: StorybookConfig): StorybookConfig;
121
```
122

123
**Usage Example:**
124

125
```typescript
126
import { defineMain } from "@storybook/html-webpack5/node";
127

128
export default defineMain({
129
  framework: {
130
    name: "@storybook/html-webpack5",
131
    options: {
132
      builder: {
133
        useSWC: true,
134
        lazyCompilation: true,
135
      },
136
    },
137
  },
138
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
139
  addons: [
140
    "@storybook/addon-essentials",
141
    "@storybook/addon-docs",
142
  ],
143
  typescript: {
144
    check: false,
145
    reactDocgen: "react-docgen-typescript",
146
  },
147
});
148
```
149

150
## Types
151

152
### Core Configuration Types
153

154
```typescript { .api }
155
/**
156
 * Main Storybook configuration interface combining base, webpack, and framework configs
157
 */
158
interface StorybookConfig extends 
159
  Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework>,
160
  StorybookConfigWebpack,
161
  StorybookConfigFramework {}
162

163
/**
164
 * Framework-specific configuration options
165
 */
166
interface FrameworkOptions {
167
  /** Builder configuration options */
168
  builder?: BuilderOptions;
169
}
170

171
/**
172
 * Framework configuration for main.ts
173
 */
174
interface StorybookConfigFramework {
175
  framework: FrameworkName | {
176
    name: FrameworkName;
177
    options: FrameworkOptions;
178
  };
179
  core?: StorybookConfigBase['core'] & {
180
    builder?: BuilderName | {
181
      name: BuilderName;
182
      options: BuilderOptions;
183
    };
184
  };
185
  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & 
186
    StorybookConfigBase['typescript'];
187
}
188
```
189

190
### Framework Identifiers
191

192
```typescript { .api }
193
/**
194
 * Type-safe framework name identifier
195
 */
196
type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;
197

198
/**
199
 * Type-safe builder name identifier
200
 */
201
type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
202
```
203

204
### Utility Types
205

206
```typescript { .api }
207
/**
208
 * String utility type for ensuring type compatibility
209
 */
210
type CompatibleString<T extends string> = T | (string & {});
211
```
212

213
### Dependency Types
214

215
This package relies on types from the following Storybook packages:
216

217
```typescript { .api }
218
// From @storybook/builder-webpack5
219
interface BuilderOptions {
220
  useSWC?: boolean;
221
  lazyCompilation?: boolean;
222
  fsCache?: boolean;
223
  [key: string]: any;
224
}
225

226
interface StorybookConfigWebpack {
227
  webpackFinal?: (config: any) => any | Promise<any>;
228
}
229

230
interface TypescriptOptionsBuilder {
231
  check?: boolean;
232
  skipBabel?: boolean;
233
  reactDocgen?: string | false;
234
}
235

236
// From @storybook/preset-html-webpack  
237
interface StorybookConfigBase {
238
  stories: string[];
239
  addons?: string[];
240
  core?: {
241
    builder?: string | { name: string; options?: any };
242
    renderer?: string;
243
    [key: string]: any;
244
  };
245
  typescript?: {
246
    check?: boolean;
247
    reactDocgen?: string | false;
248
    reactDocgenTypescriptOptions?: any;
249
  };
250
  [key: string]: any;
251
}
252

253
interface TypescriptOptionsReact {
254
  reactDocgen?: string | false;
255
  reactDocgenTypescriptOptions?: any;
256
}
257

258
// From storybook/internal/types
259
type PresetProperty<T extends string> = T extends 'addons' 
260
  ? string[] 
261
  : T extends 'core' 
262
    ? (config: any, options: any) => Promise<any>
263
    : any;
264
```