@elenajs/plugin-cem-define 0.3.0 → 1.0.0-beta.1

package/README.md

@@ -1,10 +1,10 @@
 <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 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.png" alt="Elena" width="201" height="230">
+  <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.png" alt="Elena" width="201" height="230">
+  <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.
@@ -66,27 +66,15 @@ export default {
 
 ## 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:**
+The plugin scans Elena component source files and extracts the value of the `static tagName` class field:
 
 ```js
-class Button extends Elena(HTMLElement, {
-  tagName: "elena-button",
-}) {}
-```
-
-**Variable reference:**
-
-```js
-const options = {
-  tagName: "elena-button",
-};
-
-class Button extends Elena(HTMLElement, options) {}
+class Button extends Elena(HTMLElement) {
+  static tagName = "elena-button";
+}
 ```
 
-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.
+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
 

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@elenajs/plugin-cem-define",
-  "version": "0.3.0",
+  "version": "1.0.0-beta.1",
   "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"
@@ -28,5 +36,5 @@
     "@custom-elements-manifest/analyzer": "0.11.0",
     "vitest": "4.0.18"
   },
-  "gitHead": "c181af0625f691a95a5cb1ef9adb0d7f2c796eae"
+  "gitHead": "66d1e66dd467c20d7c5c70ffcb5678c6a2694690"
 }

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;
 }