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 */
`docsTags`	Annotations (In the way of JSDoc ) written in `.tsx` file will be collected here
`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