Lars Gyrup Brink Nielsen LayZeeDK

Storybook 10 Autodocs with Compodoc for Angular Signal Components

A guide for configuring Storybook 10 to automatically extract JSDoc documentation from Angular components that use signal-based inputs (input()) in an Nx workspace.

Overview

Storybook's Autodocs feature generates documentation pages automatically from your component code. For Angular, this requires Compodoc to extract JSDoc comments, component metadata, and input/output definitions.

Key Challenge: Angular's signal-based inputs (input(), output(), model()) require proper Compodoc configuration to extract JSDoc descriptions into Storybook's Controls panel.

Tinybench lifecycle

Initial research by Claude Code

Based on my research of the tinybench implementation (v5.1.0) and documentation, here's a comprehensive overview of all supported hooks and their execution lifecycle:

Supported hooks

Bench-level hooks (BenchOptions)

Nx generator wrapping jscodeshift transform: TypeScript private properties to ECMAScript private fields

This library contains local Nx migration generators. To use them, run

nx generate @myorg/typescript-migrations:<migration-name> <project-name>

For example

	Your task is to "onboard" this repository to Copilot coding agent by adding an AGENTS.md file in the repository that contains information describing how a coding agent seeing it for the first time can work most efficiently.

	You will do this task only one time per repository and doing a good job can SIGNIFICANTLY improve the quality of the agent's work, so take your time, think carefully, and search thoroughly before writing the instructions.

	<Goals>
	- Reduce the likelihood of a coding agent pull request getting rejected by the user due to generating code that fails the continuous integration build, fails a validation pipeline, or having misbehavior.
	- Minimize bash command and build failures.
	- Allow the agent to complete its task more quickly by minimizing the need for exploration using PowerShell commands, and code search tools.
	</Goals>

	/// <reference types="jest" />

	/**
	* Mock ESModule with `default` export to support {@link jest.spyOn}.
	*
	* Resolve "TypeError: Cannot redefine property: <spyOnMethodName>".
	*
	* @remarks Should be called before other import statements.
	* @see https://jestjs.io/docs/29.7/jest-object#jestmockmodulename-factory-options
	*/

	/// <reference types="jest" />
	import type { getFileInfo, resolveConfig } from 'prettier';

	/**
	* Resolve `TypeError: performance.mark is not a function`.
	*
	* @see https://github.com/nrwl/nx/issues/23435#issuecomment-2127183725
	*/
	const performanceMock: Performance = {
	...performance,

	import {
	APP_INITIALIZER,
	EnvironmentProviders,
	FactoryProvider,
	Injector,
	makeEnvironmentProviders,
	} from '@angular/core';
	import { AngularRenderer } from '@storybook/angular';
	import { DecoratorFunction } from '@storybook/types';

	import { Injector } from '@angular/core';
	import { getStorybookNg } from './get-storybook-ng';

	/**
	* Get root-level injector for a component story.
	*
	* @example
	* play: ({ canvasElement }) = {
	* const injector = getStorybookInjector(canvasElement);
	*

	/// <reference types="jest" />
	import type { createProjectGraphAsync } from '@nx/devkit';

	/**
	* Resolve `TypeError: performance.mark is not a function`.
	*
	* @see https://github.com/nrwl/nx/issues/23435#issuecomment-2127183725
	*/
	const performanceMock: Performance = {
	...performance,

	@Injectable()
	export class ErrorHandlerWithPlugins extends ErrorHandler {
	readonly #plugins = inject(errorHandlerPluginToken, { optional: true }) ?? [];

	override handleError(originalError: unknown): void {
	super.handleError(originalError);

	this.#plugins.forEach((plugin) => {
	try {
	plugin.handleError(originalError);