CEM analyzer plugin that generates per-component TypeScript declarations for Elena

Table of contents

• Install
• Usage
• Options
• Generated output

Install

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

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

Usage

import { elenaTypeScriptPlugin } from "@elenajs/plugin-cem-typescript";

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

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

import { elenaTypeScriptPlugin } from "@elenajs/plugin-cem-typescript";

export default {
  analyze: {
    plugins: [elenaTypeScriptPlugin({ outdir: "dist" })],
  },
};

[!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.

Options

| Option | Type | Default | Description | | -------- | -------- | -------- | ------------------------------------------------- | | outdir | string | "dist" | Output directory where .d.ts files are written. |

Generated output

For each registered custom element, the plugin generates a .d.ts file with typed properties, event handlers, and the built-in text property. For example, a <elena-button> component produces:

// dist/button.d.ts
export type { ElenaButtonProps } from "./custom-elements.js";

declare class ElenaButton extends HTMLElement {
  /** The style variant of the button. */
  variant?: string;

  /** Makes the component disabled. */
  disabled?: boolean;

  /** Fired when the button is clicked. */
  onclick?: (e: CustomEvent<never>) => void;

  /** Fired when the button receives focus. */
  onfocus?: (e: CustomEvent<never>) => void;

  /** Fired when the button loses focus. */
  onblur?: (e: CustomEvent<never>) => void;

  /**
   * The text content of the element, captured from the light DOM
   * before rendering.
   */
  text?: string;
}

export default ElenaButton;

The plugin also adds the built-in text property to all Elena components in the CEM manifest, ensuring it appears in documentation tools and IDE autocomplete.

License

MIT

Copyright

Copyright © 2026 Ariel Salminen