typescript.skipCompiler configuration
The skipCompiler field is a boolean that disables parsing of TypeScript files through the compiler, which is used for Webpack5.
Storybook · API · all subjects
configuration
142 notes in this subject, read out of this brain and free to use. This is page 3 of 3.
typescript configuration object (React renderer)
For React renderer, the typescript configuration object in main.js|ts accepts: check (boolean, optional), checkOptions (CheckOptions, optional), reactDocgen ('react-docgen' | 'react-docgen-typescript' | false, optional), reactDocgenTypescriptOptions (ReactDocgenTypescriptOptions, optional), and skipCompiler (boolean, optional).
typescript configuration object (non-React renderers)
For Angular, Vue, Web Components, Ember, HTML, Svelte, Preact, Qwik, and Solid renderers, the typescript configuration object in main.js|ts accepts: check (boolean, optional), checkOptions (CheckOptions, optional), and skipCompiler (boolean, optional).
typescript.check configuration
The check field is a boolean that optionally runs fork-ts-checker-webpack-plugin. It is only available when using the Webpack builder, not with other builders.
typescript.checkOptions configuration
The checkOptions field accepts options to pass to fork-ts-checker-webpack-plugin when the check field is enabled. Available options are documented in fork-ts-checker-webpack-plugin v4.1.6 README.
typescript.reactDocgen configuration (React only)
The reactDocgen field accepts 'react-docgen', 'react-docgen-typescript', or false. Default is false if @storybook/react is not installed, or 'react-docgen' if it is installed. It configures which library Storybook uses to parse React components. react-docgen-typescript invokes the TypeScript compiler, making it slow but generally accurate. react-docgen performs its own analysis, which is much faster but incomplete.
typescript.reactDocgenTypescriptOptions configuration (React only)
The reactDocgenTypescriptOptions field configures options to pass to react-docgen-typescript-plugin when react-docgen-typescript is enabled. Available options are documented in the react-docgen-typescript-plugin repository for Webpack projects or the vite-plugin-react-docgen-typescript repository for Vite projects.
webpackFinal options parameter structure
The options parameter passed to webpackFinal has type { configType?: 'DEVELOPMENT' | 'PRODUCTION' }. The configType field is optional and can be either 'DEVELOPMENT' or 'PRODUCTION'.
webpackFinal main configuration field
webpackFinal is a main configuration field with type async (config: Config, options: WebpackOptions) => Config. It is used to customize Storybook's Webpack setup when using the webpack builder.
Main configuration properties
The main configuration object contains the following properties: framework (required), stories (required), addons, babel, babelDefault, build, core, docs, env, features, indexers (experimental), logLevel, managerHead, previewAnnotations, previewBody, previewHead, refs, staticDirs, swc, tags, typescript, viteFinal, webpackFinal.
main.js or main.ts location
The main configuration file is located at .storybook/main.js or .storybook/main.ts, relative to the root of your project.
main.js or main.ts must use ESM
The main configuration file must be valid ESM. It must use import instead of require, and neither __dirname nor __filename are available.
Client-side preview.js file location
The key file for client-side framework configuration is src/client/preview.js. This file exports a render function that the start function uses to render stories in the browser.
Framework render function purpose
The framework's render function is responsible for converting the renderable object into DOM nodes. It receives the renderable object and renders it to the DOM.
Renderable objects in framework stories
Storybook stories are ES6 objects that return a 'renderable object'. In React, the renderable object is a React element. In most other frameworks, the renderable object is a plain JavaScript object. The design of the renderable object is framework-specific and should ideally match the idioms of that framework.
Framework presets configure server
Framework presets are standard Storybook presets that configure babel and webpack in framework-specific ways. They handle file format transformations at load time (e.g., transforming .vue files to JavaScript).
frameworkPath configuration option
The frameworkPath key can be specified in framework configuration to point to a custom framework location file. It accepts a relative path that resolves from the Storybook configuration directory (i.e., .storybook) by default. The frameworkPath must end up at the dist/client/index.js file within the framework app.
Framework server options key: framework
The 'framework' key in the server options object (e.g., 'vue' for Vue framework) is passed to addons and allows them to perform framework-specific tasks.
Framework package.json bin executables
Each framework package in Storybook typically exposes two executables in its package.json: 'storybook' pointing to './bin/index.js' and 'build-storybook' pointing to './bin/build.js'. These scripts pass an options object to storybook/internal/server.
Framework support consists of server and client configuration
Supporting a new framework in Storybook consists of two main aspects: configuring the server (the node process that runs for storybook dev or storybook build, typically babel and webpack configuration) and configuring the client (the browser code that runs stories, requiring a framework-specific story rendering function).
Recommended starter framework is @storybook/html
@storybook/html is recommended as a starter framework because it is the simplest and contains no framework-specific peculiarities. There is a boilerplate available at https://github.com/CodeByAlex/storybook-framework-boilerplate.
start function abstracts framework-independent client code
The start function abstracts all of Storybook's framework-independent client-side browser code and accepts the framework-specific render function as a parameter.