Zeplin CLI Stencil JS Plugin

Zeplin CLI plugin to generate descriptions and code snippets for React components.

Installation

Install the plugin using npm.

npm install -g zeplin-cli-connect-plugin-stenciljs

Usage

1. Generate the StencilJS json docs, update you stencil.config.ts file and inside the outputTargets property add:

outputTargets: [
    { 
        type: 'docs-json',
        file: 'path/to/file.json'
    },
]

and then run npm run build to generate the file

2. In your .zeplin/components.json configuration file, add the plugin and pass the stencil docs file:

"plugins": [
    {
        "name": "cli-connect-stenciljs-plugin",
        "config": {
            "sourcePath": 'path/to/file.json'
        }
    }
]

3. Run CLI connect command using the plugin.

zeplin connect

About Connected Components

Connected Components in Zeplin lets you access components in your codebase directly on designs in Zeplin, with links to Storybook, GitHub and any other source of documentation based on your workflow. 🧩

Zeplin CLI uses plugins like this one to analyze component source code and publishes a high-level overview to be displayed in Zeplin.