CEM analyzer plugin that copies custom Elena JSDoc tags into the manifest

Table of contents

• Install
• Usage
• How it works

Install

npm install --save-dev @elenajs/plugin-cem-tag

Peer dependency: @custom-elements-manifest/analyzer >= 0.10.0

Usage

Create one plugin instance per JSDoc tag you want to extract:

import { elenaTagPlugin } from "@elenajs/plugin-cem-tag";

// In your CEM analyzer config
export default {
  plugins: [
    elenaTagPlugin("status"),
    elenaTagPlugin("displayName"),
  ],
};

Or when using @elenajs/bundler, add it to the analyze.plugins array in elena.config.mjs:

import { elenaTagPlugin } from "@elenajs/plugin-cem-tag";

export default {
  analyze: {
    plugins: [
      elenaTagPlugin("status"),
      elenaTagPlugin("displayName"),
    ],
  },
};

[!NOTE] The @elenajs/bundler already includes this plugin by default for @status and @displayName. You only need to add it manually if you're using the CEM analyzer independently or want to extract additional custom tags.

How it works

The plugin scans registered custom element classes for a specified JSDoc tag and writes its value onto the CEM class declaration. For example, given this component:

/**
 * Button component for interface actions.
 *
 * @displayName Button
 * @status beta
 */
export default class Button extends Elena(HTMLElement, {
  tagName: "elena-button",
}) {}

Using elenaTagPlugin("status") will add "status": "beta" to the component's CEM declaration, and elenaTagPlugin("displayName") will add "displayName": "Button". This metadata is then available to IDEs, documentation generators, and other tools that consume the Custom Elements Manifest.

API

elenaTagPlugin(tagName)

Returns a CEM analyzer plugin that extracts the specified JSDoc tag.

| Parameter | Type | Description | | --------- | -------- | ----------------------------------------------------------------- | | tagName | string | The JSDoc tag name to extract (e.g. "status", "displayName"). |

License

MIT

Copyright

Copyright © 2026 Ariel Salminen