new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · Setup · all subjects

configuration & builders

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Angular with Vite default output directory

When building Storybook with Angular and Vite, the output lands in the configured outputDir which defaults to storybook-static.

Angular Vite builders do not require browserTarget

Unlike the Webpack-based @storybook/angular, the Vite-based builders (start-storybook and build-storybook) do not take a browserTarget option. Vite resolves your project's TypeScript and assets directly, so no Angular build target reference is required.

applicationConfig decorator for Angular providers

If your component relies on application-wide providers (such as those returned by provide-style functions or set up by modules using the forRoot pattern), apply the applicationConfig decorator to supply them via the bootstrapApplication function.

moduleMetadata decorator for Angular dependencies

If your component has dependencies on other Angular directives and modules, supply them using the moduleMetadata decorator either for all stories of a component or for individual stories.

Zoneless change detection in Angular Vite

By default, @storybook/angular-vite runs with zoneless change detection (zoneless: true). To opt into Zone.js-based change detection, set the zoneless option to false on the Storybook builder target in your angular.json. When zoneless is false, zone.js is automatically imported at the start of the preview.

Custom Vite configuration with viteFinal

Extend the Vite configuration used by Storybook in @storybook/angular-vite by using the viteFinal hook in .storybook/main.ts. Import mergeConfig from vite and return the merged configuration with your custom overrides.

TypeScript paths not automatically mapped in Angular Vite

Unlike the Webpack-based @storybook/angular, @storybook/angular-vite does not automatically map your tsconfig.json paths aliases into Vite's module resolver. Vite resolves modules on disk and does not read the paths compiler option, so imports such as @app/shared will fail unless you register them yourself.

Using vite-tsconfig-paths plugin in Angular Vite

To map TypeScript paths aliases in Angular Vite, use the vite-tsconfig-paths plugin. Install it as a dev dependency with npm install --save-dev vite-tsconfig-paths, then import it and add tsconfigPaths() to the plugins array in your viteFinal hook in .storybook/main.ts.

Framework options for Angular Vite

The builder option in @storybook/angular-vite framework options configures options for the framework's builder (Vite builder). Available options can be found in the Vite builder docs.

jit option in Angular Vite framework

The jit option in @storybook/angular-vite framework configuration controls whether to use Angular's JIT compiler. It is of type boolean with default value true and is passed to the AnalogJS Vite plugin.

liveReload option in Angular Vite framework

The liveReload option in @storybook/angular-vite framework configuration controls whether to enable live-reload in the AnalogJS Vite plugin. It is of type boolean with default value false.

tsconfig option in Angular Vite framework

The tsconfig option in @storybook/angular-vite framework configuration specifies the path to the TypeScript configuration file, relative to the workspace root. It is of type string with default value ./.storybook/tsconfig.json and is passed to the AnalogJS Vite plugin.

inlineStylesExtension option in Angular Vite framework

The inlineStylesExtension option in @storybook/angular-vite framework configuration specifies the file extension used for inline component styles. It is of type string with default value 'css' and is passed to the AnalogJS Vite plugin.

compodoc option in Angular Vite framework

The compodoc option in @storybook/angular-vite framework configuration is of type boolean with default value true. It controls whether to run Compodoc to generate documentation.json. When true, the framework runs Compodoc once per Storybook run, replacing the previous documentation.json. Set to false to skip generation entirely. This option only takes effect with experimentalDocgenServer: false. Planned to be deprecated in Storybook 11 and removed in Storybook 12.

compodocArgs option in Angular Vite framework

The compodocArgs option in @storybook/angular-vite framework configuration is of type string array with default value ['-e', 'json', '-d', '.']. These are arguments passed to the @compodoc/compodoc CLI when compodoc is true. The defaults produce a documentation.json file in the workspace root. This is only read when experimentalDocgenServer is off and is planned for removal in Storybook 12.

propsTable option in Angular Vite framework

The propsTable option in @storybook/angular-vite framework configuration specifies which of your component's members the props table renders. It is of type 'all' | 'api' | 'inputs' with default value 'api'. 'all' renders every member of every section (properties, inputs, outputs, methods). 'api' renders the same four sections narrowed to your component's template-facing API, keeping declared inputs and outputs but dropping TypeScript private members, ECMAScript private # members, and anything tagged @internal. 'inputs' renders the inputs section only.

propsTable 'api' behavior in Angular Vite

The 'api' value for propsTable in Angular Vite keeps every declared input and output. In other contexts, it drops TypeScript private members, ECMAScript private # members, and anything tagged @internal, since they cannot be reached from templates. Protected members are kept because Angular templates can bind them. To drop a single member that 'api' keeps, tag it @ignore.

propsTable 'api' with experimentalDocgenServer in Angular Vite

The propsTable 'api' option in Angular Vite needs the experimentalDocgenServer feature, which this framework turns on by default, so it works without extra configuration. If you have turned that feature off, Storybook reads components through Compodoc, whose visibility data Storybook cannot interpret reliably, so only 'all' and 'inputs' apply. Asking for 'api' logs a warning rather than silently changing what you see.

Run Storybook development server

To run Storybook for a Vue Vite project, use the Storybook run dev command.

Build Storybook production output

To build Storybook, use the build Storybook production mode command. The output is placed in the configured `outputDir`, which defaults to `storybook-static`.

builder option type in Vue Vite framework

The `builder` option in framework configuration has type `Record<string, any>` and configures options for the Vite builder. Available options can be found in the Vite builder documentation.

Give your agent this brain