Component Documentation Generator

Build a Stencil project configuration that automatically generates comprehensive documentation for web components during the build process.

Requirements

Your task is to configure a Stencil project to generate three types of documentation outputs:

1. README Documentation: Generate or update README.md files in the same directory as each component with API documentation
2. JSON Documentation: Export complete component metadata to a JSON file for programmatic access
3. VS Code IntelliSense: Generate custom data file to provide IDE autocomplete support for your components

The configuration should:

• Generate README files that include component dependencies
• Place JSON documentation in a docs directory as components.json
• Place VS Code custom data in a docs directory as components.vscode.json
• Use strict mode for documentation validation to ensure quality

Project Structure

Create a stencil.config.ts file with the appropriate configuration. Your configuration should work with a standard Stencil project structure where components are located in src/components/.

Test Cases

• The configuration includes an output target of type 'docs-readme' that generates README files @test
• The README output target has dependencies enabled @test
• The configuration includes an output target of type 'docs-json' with file path 'docs/components.json' @test
• The configuration includes an output target of type 'docs-vscode' with file path 'docs/components.vscode.json' @test
• All documentation output targets have strict mode enabled @test

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides the Stencil web component compiler with documentation generation capabilities.

Implementation

@generates

API

import { Config } from '@stencil/core';

export const config: Config;