Plugins

Plugins let you add framework-specific detection, cross-file enrichment, or custom post-processing to the CEM generator without changing the core pipeline.

Plugin types

Type	When it runs	Use case
Detector	Per-file, during analysis	Find framework-specific patterns
Annotator	After the full manifest is assembled	Cross-plugin enrichment, design tokens, or validation

Using a plugin

Plugins are passed to generateCem():

import { generateCem } from "@wc-toolkit/cem-generator";
import { myPlugin } from "@wc-toolkit/plugin-my-framework";

const manifest = generateCem({
  plugins: [myPlugin()],
});

Framework plugins are opt-in. The vanilla detector runs automatically, while framework-specific detectors run only when included in plugins.

How the generator is structured

The pipeline separates plugin responsibilities from manifest assembly:

• Detection extracts class-level fragments from source files.
• Core pipeline merges fragments, applies conflict policy, and runs post-processing.
• Core utilities provide shared JSDoc parsing and inheritance resolution.
• Output converts the internal manifest into the CEM 2.1.0 package shape.
• Completion hooks receive the finalized CEM package for integrations that generate files or perform other output-side effects.

The built-in vanilla detector handles standard HTMLElement components without a plugin. All detectors share one TypeScript ts.Program, and detectors do not depend directly on one another. Cross-plugin enrichment belongs in annotators.

Official Plugins

• Lit Plugin — Detects @customElement, @property, @state, @query, @eventOptions, and Lit-specific JSDoc tags.
• FAST Plugin — Detects FAST elements, decorators, attributes, and emitted events.
• Preact Plugin — Detects preact-custom-element registrations and typed Preact component props.
• Vue Plugin — Detects Vue custom elements created with defineCustomElement.
• Solid Plugin — Detects Solid Element customElement registrations and typed props.
• Svelte Plugin — Detects Svelte components compiled as custom elements.
• Stencil Plugin — Detects Stencil components, props, and events.

Build Integrations

• Bundler Plugin — Generates the manifest from Vite, Rollup, Rolldown, or Webpack builds.

Built-in

• Vanilla Built-in Detector — Always runs; detects standard custom element JSDoc tags on classes extending HTMLElement.
• Inheritance Annotator — Built-in; materializes inherited APIs from superclass chain. Disable with inheritance: false.

Writing Custom Plugins

See Creating Plugins for the complete authoring guide (detector/annotator contracts, TypeScript AST analysis, JSDoc utilities, patch targeting, and examples).