Skip to main content
Version: v3.0

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

PropertyDescriptionDefault
generatorA function with the docs json data as argument.
strictIf 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

PropertyDescription
componentsArray with type of JsonDocsComponent[] which consists component information
timestampstring with timestamp
compilerObject with typescriptVersion, compiler, and version

JsonDocsComponent

PropertyDescription
dirPathComponent directory path
fileNameFile name
filePathFile path
readmePathReadme file path
usagesDirUsages directory path
encapsulationComponent encapsulation type. Possible values are shadow, scoped, none
tagComponent tag described in .tsx file
readmeComponent readme file first line content
docsDescription 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.
docsTagsAnnotations (In the way of JSDoc ) written in .tsx file will be collected here
overviewDescription written in top of @Component e.g. /* Documentation Example /
usage
propsArray of component properties information
methodsArray of component methods information
events
listeners
styles
slots
parts
dependentsArray of components where current component is used
dependenciesArray of components which is used in current component
dependencyGraphDescribes a tree of components coupling