@elenajs/plugin-cem-define 0.4.0 → 1.0.0-beta.2

package/README.md

@@ -0,0 +1,85 @@
+<div align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="558" height="220">
+  </source>
+  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
+  </source>
+  <img src="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
+</picture>
+
+### CEM analyzer plugin that registers the Elena components in the manifest.
+
+<br/>
+
+<a href="https://arielsalminen.com"><img src="https://img.shields.io/badge/creator-@arielle-F95B1F" alt="Creator @arielle"/></a>
+<a href="https://www.npmjs.com/package/@elenajs/plugin-cem-define"><img src="https://img.shields.io/npm/v/@elenajs/plugin-cem-define.svg" alt="Latest version on npm" /></a>
+<a href="https://github.com/getelena/elena/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="Elena is released under the MIT license." /></a>
+<a href="https://github.com/getelena/elena/actions/workflows/tests.yml"><img src="https://github.com/getelena/elena/actions/workflows/tests.yml/badge.svg" alt="Tests status" /></a>
+
+</div>
+
+<br/>
+
+<p align="center"><strong>@elenajs/plugin-cem-define</strong> is a <a href="https://custom-elements-manifest.open-wc.org/">Custom Elements Manifest</a> analyzer plugin that extracts the <code>tagName</code> from <a href="https://elenajs.com">Elena</a> Progressive Web Component definitions and registers the custom element in the manifest.</p>
+
+<br/>
+
+## Table of contents
+
+- **[Install](#install)**
+- **[Usage](#usage)**
+- **[How it works](#how-it-works)**
+
+## Install
+
+```bash
+npm install --save-dev @elenajs/plugin-cem-define
+```
+
+**Peer dependency:** `@custom-elements-manifest/analyzer >= 0.10.0`
+
+## Usage
+
+```js
+import { elenaDefinePlugin } from "@elenajs/plugin-cem-define";
+
+// In your CEM analyzer config
+export default {
+  plugins: [elenaDefinePlugin()],
+};
+```
+
+Or when using `@elenajs/bundler`, add it to the `analyze.plugins` array in `elena.config.mjs`:
+
+```js
+import { elenaDefinePlugin } from "@elenajs/plugin-cem-define";
+
+export default {
+  analyze: {
+    plugins: [elenaDefinePlugin()],
+  },
+};
+```
+
+> [!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 Elena component source files and extracts the value of the `static tagName` class field:
+
+```js
+class Button extends Elena(HTMLElement) {
+  static tagName = "elena-button";
+}
+```
+
+It adds the `tagName` to the CEM class declaration and creates a `custom-element-definition` export entry, making the component discoverable by IDEs and documentation tools.
+
+## License
+
+MIT
+
+## Copyright
+
+Copyright © 2026 [Ariel Salminen](https://arielsalminen.com)

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@elenajs/plugin-cem-define",
-  "version": "0.4.0",
+  "version": "1.0.0-beta.2",
   "description": "CEM analyzer plugin that registers the Elena components in the manifest.",
   "author": "Elena <hi@elenajs.com>",
   "homepage": "https://elenajs.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getelena/elena.git",
+    "directory": "packages/plugin-cem-define"
+  },
+  "bugs": {
+    "url": "https://github.com/getelena/elena/issues"
+  },
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -26,7 +34,7 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "vitest": "4.0.18"
+    "vitest": "4.1.0"
   },
-  "gitHead": "b4c41483e5196b542a1b87361f7d37222737fccc"
+  "gitHead": "18e13f305c8823f7633c739f2ec61cec2420267b"
 }

package/src/index.js

@@ -1,10 +1,10 @@
 /**
  *  ██████████ ████
  * ░░███░░░░░█░░███
- *  ░███  █ ░  ███   ██████  ████████    ██████
- *  ░██████    ███  ███░░███░░███░░███  ░░░░░███
- *  ░███░░█    ███ ░███████  ░███ ░███   ███████
- *  ░███ ░   █ ███ ░███░░░   ░███ ░███  ███░░███
+ *  ░███  █ ░  ░███   ██████  ████████    ██████
+ *  ░██████    ░███  ███░░███░░███░░███  ░░░░░███
+ *  ░███░░█    ░███ ░███████  ░███ ░███   ███████
+ *  ░███ ░   █ ░███ ░███░░░   ░███ ░███  ███░░███
  *  ██████████ █████░░██████  ████ █████░░████████
  * ░░░░░░░░░░ ░░░░░  ░░░░░░  ░░░░ ░░░░░  ░░░░░░░░
  *
@@ -13,37 +13,16 @@
  */
 
 /**
- * CEM analyzer plugin that reads `tagName` from the options object passed to
- * `Elena(superClass, { tagName: "...", ... })` and registers the element in the manifest.
- *
- * Supports both inline objects and variable references:
- * - `Elena(HTMLElement, { tagName: "elena-button", ... })`
- * - `const options = { tagName: "elena-button", ... }; Elena(HTMLElement, options)`
+ * CEM analyzer plugin that reads `static tagName` from an Elena component class
+ * and registers the element in the manifest.
  *
  * @returns {import("@custom-elements-manifest/analyzer").Plugin}
  */
 export function elenaDefinePlugin() {
-  /** @type {Map<string, string>} variable name → tag name */
-  const optionsMap = new Map();
-
   return {
     name: "define-element",
 
     analyzePhase({ ts, node, moduleDoc }) {
-      // Collect variable declarations: const options = { tagName: "...", ... }
-      if (
-        ts.isVariableDeclaration(node) &&
-        node.initializer &&
-        ts.isObjectLiteralExpression(node.initializer)
-      ) {
-        const varName = node.name.getText();
-        const tagName = getTagName(ts, node.initializer);
-        if (tagName) {
-          optionsMap.set(varName, tagName);
-        }
-        return;
-      }
-
       if (!ts.isClassDeclaration(node)) {
         return;
       }
@@ -53,65 +32,54 @@ export function elenaDefinePlugin() {
         return;
       }
 
-      // Skip classes that don't extend anything (no `extends` clause)
+      // Skip classes that don't extend Elena(...)
       const heritageClause = node.heritageClauses?.[0];
-      if (!heritageClause) {
+      if (
+        !heritageClause?.types.some(
+          t => ts.isCallExpression(t.expression) && t.expression.expression.getText() === "Elena"
+        )
+      ) {
         return;
       }
 
-      for (const type of heritageClause.types) {
-        const expr = type.expression;
-        if (!ts.isCallExpression(expr) || expr.expression.getText() !== "Elena") {
-          continue;
-        }
-
-        const optionsArg = expr.arguments[1];
-        if (!optionsArg) {
-          continue;
-        }
-
-        let tagName;
-
-        if (ts.isObjectLiteralExpression(optionsArg)) {
-          // Inline: Elena(HTMLElement, { tagName: "...", ... })
-          tagName = getTagName(ts, optionsArg);
-        } else if (ts.isIdentifier(optionsArg)) {
-          // Variable reference: Elena(HTMLElement, options)
-          tagName = optionsMap.get(optionsArg.getText());
-        }
-
-        if (!tagName) {
-          continue;
-        }
-
-        const declaration = moduleDoc.declarations?.find(d => d.name === className);
-        if (declaration) {
-          declaration.tagName = tagName;
-        }
+      const tagName = getStaticTagName(ts, node);
+      if (!tagName) {
+        return;
+      }
 
-        moduleDoc.exports ??= [];
-        moduleDoc.exports.push({
-          kind: "custom-element-definition",
-          name: tagName,
-          declaration: { name: className, module: moduleDoc.path },
-        });
+      const declaration = moduleDoc.declarations?.find(d => d.name === className);
+      if (declaration) {
+        declaration.tagName = tagName;
       }
+
+      moduleDoc.exports ??= [];
+      moduleDoc.exports.push({
+        kind: "custom-element-definition",
+        name: tagName,
+        declaration: { name: className, module: moduleDoc.path },
+      });
     },
   };
 }
 
 /**
- * Extracts the `tagName` string value from an object literal expression.
+ * Extracts the `tagName` string value from a `static tagName = "..."` class field.
+ *
  * @param {import("typescript")} ts
- * @param {import("typescript").ObjectLiteralExpression} objectLiteral
+ * @param {import("typescript").ClassDeclaration} classNode
  * @returns {string | undefined}
  */
-function getTagName(ts, objectLiteral) {
-  const prop = objectLiteral.properties.find(
-    p => ts.isPropertyAssignment(p) && p.name.getText() === "tagName"
-  );
-  if (prop && ts.isStringLiteral(prop.initializer)) {
-    return prop.initializer.text;
+function getStaticTagName(ts, classNode) {
+  for (const member of classNode.members) {
+    if (
+      ts.isPropertyDeclaration(member) &&
+      member.modifiers?.some(m => m.kind === ts.SyntaxKind.StaticKeyword) &&
+      member.name?.getText() === "tagName" &&
+      member.initializer &&
+      ts.isStringLiteral(member.initializer)
+    ) {
+      return member.initializer.text;
+    }
   }
   return undefined;
 }