@elenajs/plugin-cem-define 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,97 @@
+<div align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="201" height="230">
+  </source>
+  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
+  </source>
+  <img src="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
+</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 `tagName` from the options object passed to `Elena()`. It supports two patterns:
+
+**Inline options:**
+
+```js
+class Button extends Elena(HTMLElement, {
+  tagName: "elena-button",
+}) {}
+```
+
+**Variable reference:**
+
+```js
+const options = {
+  tagName: "elena-button",
+};
+
+class Button extends Elena(HTMLElement, options) {}
+```
+
+In both cases, the plugin 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,6 +1,6 @@
 {
   "name": "@elenajs/plugin-cem-define",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "CEM analyzer plugin that registers the Elena components in the manifest.",
   "author": "Elena <hi@elenajs.com>",
   "homepage": "https://elenajs.com/",
@@ -15,11 +15,18 @@
   "files": [
     "src"
   ],
+  "scripts": {
+    "test": "vitest run"
+  },
   "engines": {
     "node": ">= 20"
   },
   "peerDependencies": {
     "@custom-elements-manifest/analyzer": ">=0.10.0"
   },
-  "gitHead": "3da2b4411c0a4d36085b1095feabbaabea50909f"
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "vitest": "4.0.18"
+  },
+  "gitHead": "c181af0625f691a95a5cb1ef9adb0d7f2c796eae"
 }

package/src/index.js

@@ -1,3 +1,17 @@
+/**
+ *  ██████████ ████
+ * ░░███░░░░░█░░███
+ *  ░███  █ ░  ███   ██████  ████████    ██████
+ *  ░██████    ███  ███░░███░░███░░███  ░░░░░███
+ *  ░███░░█    ███ ░███████  ░███ ░███   ███████
+ *  ░███ ░   █ ███ ░███░░░   ░███ ░███  ███░░███
+ *  ██████████ █████░░██████  ████ █████░░████████
+ * ░░░░░░░░░░ ░░░░░  ░░░░░░  ░░░░ ░░░░░  ░░░░░░░░
+ *
+ * Elena CEM Define Plugin
+ * https://elenajs.com
+ */
+
 /**
  * CEM analyzer plugin that reads `tagName` from the options object passed to
  * `Elena(superClass, { tagName: "...", ... })` and registers the element in the manifest.
@@ -23,11 +37,9 @@ export function elenaDefinePlugin() {
         ts.isObjectLiteralExpression(node.initializer)
       ) {
         const varName = node.name.getText();
-        const tagNameProp = node.initializer.properties.find(
-          p => ts.isPropertyAssignment(p) && p.name.getText() === "tagName"
-        );
-        if (tagNameProp && ts.isStringLiteral(tagNameProp.initializer)) {
-          optionsMap.set(varName, tagNameProp.initializer.text);
+        const tagName = getTagName(ts, node.initializer);
+        if (tagName) {
+          optionsMap.set(varName, tagName);
         }
         return;
       }
@@ -41,6 +53,7 @@ export function elenaDefinePlugin() {
         return;
       }
 
+      // Skip classes that don't extend anything (no `extends` clause)
       const heritageClause = node.heritageClauses?.[0];
       if (!heritageClause) {
         return;
@@ -61,12 +74,7 @@ export function elenaDefinePlugin() {
 
         if (ts.isObjectLiteralExpression(optionsArg)) {
           // Inline: Elena(HTMLElement, { tagName: "...", ... })
-          const tagNameProp = optionsArg.properties.find(
-            p => ts.isPropertyAssignment(p) && p.name.getText() === "tagName"
-          );
-          if (tagNameProp && ts.isStringLiteral(tagNameProp.initializer)) {
-            tagName = tagNameProp.initializer.text;
-          }
+          tagName = getTagName(ts, optionsArg);
         } else if (ts.isIdentifier(optionsArg)) {
           // Variable reference: Elena(HTMLElement, options)
           tagName = optionsMap.get(optionsArg.getText());
@@ -91,3 +99,19 @@ export function elenaDefinePlugin() {
     },
   };
 }
+
+/**
+ * Extracts the `tagName` string value from an object literal expression.
+ * @param {import("typescript")} ts
+ * @param {import("typescript").ObjectLiteralExpression} objectLiteral
+ * @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;
+  }
+  return undefined;
+}