CEM analyzer plugin that creates attribute entries from @property/@prop JSDoc tags.

Table of contents

• Install
• Usage
• How it works

Install

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

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

Usage

import { elenaPropPlugin } from "@elenajs/plugin-cem-prop";

// In your CEM analyzer config
export default {
  plugins: [
    elenaPropPlugin(),
  ],
};

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

import { elenaPropPlugin } from "@elenajs/plugin-cem-prop";

export default {
  analyze: {
    plugins: [
      elenaPropPlugin(),
    ],
  },
};

[!NOTE] The @elenajs/bundler already includes this plugin by default. You only need to add it manually if you’re using the CEM analyzer independently.

How it works

The plugin scans class fields for @property or @prop JSDoc tags and creates corresponding attributes entries in the Custom Elements Manifest. For example, given this component:

export default class Button extends Elena(HTMLElement) {
  static tagName = "elena-button";
  static props = ["variant", "disabled"];

  /**
   * The style variant of the button.
   * @property
   * @type {"default" | "primary" | "danger"}
   */
  variant = "default";

  /**
   * Makes the component disabled.
   * @prop
   * @type {boolean}
   */
  disabled = false;
}

The plugin will add both variant and disabled to the attributes array in the manifest, with their type, default value, and description. It also links each member to its attribute via the attribute field.

Without this plugin, these fields only appear in the members array. The attributes array is what IDEs, documentation generators, and other tools use to provide autocomplete and validation for HTML attributes.

API

elenaPropPlugin()

Returns a CEM analyzer plugin. Takes no arguments.

License

MIT

Copyright

Copyright © 2026 Ariel Salminen