Custom Docs Generation

Stencil exposes an output target titled docs-custom where users can access the generated docs json data. This feature can be used to generate custom markdown or to execute other logic on the json data during the build. As with other docs output targets, strict mode is supported.

To make use of this output target, simply add the following to your Stencil configuration.

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

export const config: Config = {
  outputTargets: [
    {
      type: 'docs-custom',
      generator: (docs: JsonDocs) => {
          // Custom logic goes here
      }
    }
  ]
};

Config

Property	Description	Default
generator	A function with the docs json data as argument.
strict	If set to true, Stencil will output a warning whenever there is missing documentation.	false

Custom Docs Data Model

The generated docs JSON data will in the type of JsonDocs which consists of main components array which consists of components that stencil core found and meta information such as timestamp and compiler

JsonDocs

Property	Description
components	Array with type of JsonDocsComponent[] which consists component information
timestamp	string with timestamp
compiler	Object with typescriptVersion, compiler, and version

JsonDocsComponent

Property	Description
dirPath	Component directory path
fileName	File name
filePath	File path
readmePath	Readme file path
usagesDir	Usages directory path
encapsulation	Component encapsulation type. Possible values are shadow, scoped, none
tag	Component tag described in .tsx file
readme	Component readme file first line content
docs	Description written in top of @Component e.g. /** Documentation Example */. If no JSDoc is present, default to any manually written text in the component's markdown file. Empty otherwise.
docsTags	Annotations (In the way of JSDoc ) written in .tsx file will be collected here
overview	Description written in top of @Component e.g. /** Documentation Example */
usage
props	Array of component properties information
methods	Array of component methods information
events
listeners
styles
slots
parts
dependents	Array of components where current component is used
dependencies	Array of components which is used in current component
dependencyGraph	Describes a tree of components coupling