Skip to main content
Version: v4.20

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
usagesDirStencil looks in a directory named usages/ in the same directory as your component to find usage examples. This holds the full path to that directory.
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 */
usageArray of usage examples, written in Markdown files in the usages/ directory adjacent to the current component.
propsArray of metadata objects for each usage of the @Prop decorator on the current component.
methodsArray of metadata objects for each usage of the @Method decorator on the current component.
eventsArray of metadata objects for each usage of the @Event decorator on the current component.
listenersArray of metadata objects for each usage of the @Listen decorator on the current component.
stylesArray of objects documenting annotated CSS variables used in the current component's CSS.
slotsArray of objects documenting slots which are tagged with @slot in the current component's JSDoc comment.
partsArray of objects derived from @part tags in the current component's JSDoc comment.
dependentsArray of components where current component is used
dependenciesArray of components which is used in current component
dependencyGraphDescribes a tree of components coupling