WCP CLI

A set of commands for working with @staticbolt/wcp web components.

Installation

npm install @staticbolt/wcp-cli

Usage

npx wcp --help

Options:

--help, -h optional

Show a help message.

Subcommands:

add, copy

Add a web component to your project by copying the component files from the @staticbolt/wcp package.

There are two kinds of components:

1. raw: The original component files, unbuilt and unprocessed.
2. minified: One file optimized and minified for production.

Options:

--list, -l optional

List all available components in the @staticbolt/wcp package.

--type, -t <raw|minified> optional

The type of component files to add: raw, or minified.

--outdir, -o <directory> optional

The output directory where the selected component files will be copied.

--components, -n <components> optional

A list of components to copy separated by a comma.

Example:

--components accordion,alert,dialog

--overwrite, -f optional

Whether to overwrite same-named files in the output directory.

default: false

--cwd optional

The current working directory.

default: cwd

docs, generate-docs

Generate web components docs by analyzing its source code.

Options:

--include, -i <patterns>

An array of glob patterns, separated by |, used to include web component files.

Example:

--include "src/components/**/*.{ts,js}|dist/**/*.js"

--ignore, -g <patterns> optional

An array of glob patterns, separated by |, used to exclude files.

default: ["**/*.d.ts","**/*-types.ts"]

Example:

--ignore "**/*.d.ts"

--markdown, --md optional

Disable/enable the generation of Markdown files.

default: true

Example:

--no-markdown

--markdown-outdir, --md-out <directory> optional

The output directory for the Markdown files.
If not provided, the output will default to the component directory.

--markdown-name, --md-name <fileName> optional

The output Markdown file name.
Where "{fileName}" and "{tagName}" are variable placeholders that will be replaced.

default: "{tagName}.md"

--html-data optional

Disable/enable the generation of VSCode HTML custom data files.

default: true

Example:

--no-html-data

--html-data-out <file-path> optional

The output path for the VSCode HTML custom data file.

default: "custom.html-data.json"

--manifest optional

Disable/enable the generation of custom elements manifest files.

default: true

Example:

--no-manifest

--manifest-out <file-path> optional

The output path for the custom elements manifest file.

default: "custom-elements.json"

--web-types optional

Disable/enable the generation of web-types.json files.

default: true

Example:

--no-web-types

--web-types-out <file-path> optional

The output path for the web-types.json file.

default: "web-types.json"

--cwd optional

The current working directory.

default: cwd

types

Generate types for frameworks.

Options:

--include, -i <glob pattern>

Array of glob patterns to include, separated by |.

--ignore, -g <glob pattern> optional

Array of glob patterns to exclude, separated by |.

default: ["**/*.d.ts","**/*-types.ts"]

--outdir, -o optional

The output directory. Defaults to the component directory.

--out-ext, -e <extension> optional

The output file extension.

default: "d.ts"

--frameworks, -f

Selected frameworks to generate types for. Use "all" to generate types for all frameworks.
Valid values: "all", "react", "react18", "preact", "solid", "svelte", "vue", "qwik", "astro", "jsxDom", "dom", "global".

Example:

--frameworks react,svelte

--jsdoc optional

Add markdown docs as JSDoc comments.

default: true

Example:

--no-jsdoc

--cwd optional

The current working directory.

default: cwd

create

Create a new web component from template.

Options:

--ask, -a optional

Whether to ask for missing options.

--outdir, -o <directory> optional

The output directory for the component files.

Example:

--outdir src/components/accordion

--tag-name, -t <tag-name> optional

The tag name of the component.
It should be lowercase and contain a hyphen.

build

build a web component file.

Options:

--include, -i <patterns>

An array of glob patterns, separated by |, used to include web component files.

--ignore, -g <patterns> optional

An array of glob patterns, separated by |, used to exclude files.

default: ["**/*.d.ts","**/*-types.ts"]

--out-dir optional

The output directory. If not provided, the output will default to the component directory.

--out-name <fileName> optional

The output of the minified file name.
Where "{fileName}" is a variable placeholder that will be replaced.

default: "{fileName}.min.js"

--production, --prod optional

Whether to build in production mode. Enables minification.

default: true

--iife optional

Whether to wrap the component in an IIFE.

default: true

--postcss <object> optional

Whether to enable postcss-animare-easing, postcss-inline-css-vars, and postcss-import.

default: all true

Example:

--postcss.customEasing false
--postcss.inlineVariables false
--postcss.inlineImports false

--minify optional

Sets the default values for --minify-js, --minify-css, --minify-css-classes, and --minify-html".

--minify-js optional

Whether to minify JS (the component) using terser.

--minify-css optional

Whether to minify the embedded CSS using cssnano advanced preset.

--minify-html optional

Whether to minify the embedded HTML using html-minifier-terser.

--minify-css-classes optional

Whether to minify CSS classes:
This options is separate from --minify-css.
Class names in the embedded HTML and in the component JS will be replaced with the new minified class names.
When using a dynamic class name, a warning will be logged.

help <command>

Show help message for a command.

Arguments:

command

The command to show help for.