cem-plugin-wrec 0.2.0 → 0.2.2

package/custom-elements-manifest.config.js

@@ -0,0 +1,8 @@
+import wrecPlugin from "./index.js";
+
+export default {
+  exclude: ["node_modules"],
+  //dev: true, // for extra logging
+  globs: ["fixtures/**/*.js"],
+  plugins: [wrecPlugin()],
+};

package/fixtures/expected-custom-elements.json

@@ -0,0 +1,159 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "fixtures/hello-wrec.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This displays a greeting message for a given name in a specified color.",
+          "name": "HelloWrec",
+          "cssProperties": [
+            {
+              "description": "color of border that surrounds the component",
+              "name": "--border-color",
+              "default": "gray"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "greeting message",
+              "name": "greeting"
+            }
+          ],
+          "slots": [
+            {
+              "description": "for content after the greeting",
+              "name": ""
+            },
+            {
+              "description": "for content before the greeting",
+              "name": "before"
+            },
+            {
+              "description": "for content after the greeting and the unnamed slot",
+              "name": "after"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "color",
+              "default": "black",
+              "description": "text color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "name",
+              "default": "World",
+              "description": "name to greet",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "color",
+              "default": "black",
+              "description": "text color"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "name",
+              "default": "World",
+              "description": "name to greet"
+            }
+          ],
+          "superclass": {
+            "name": "Wrec",
+            "package": "wrec"
+          },
+          "summary": "This displays a greeting message.",
+          "tagName": "hello-wrec",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "hello-wrec",
+          "declaration": {
+            "name": "HelloWrec",
+            "module": "fixtures/hello-wrec.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "fixtures/my-counter.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a counter web component implemented with wrec.",
+          "name": "CounterWrec",
+          "members": [
+            {
+              "kind": "field",
+              "name": "count",
+              "privacy": "public",
+              "type": {
+                "text": "number"
+              },
+              "attribute": "count",
+              "default": 0,
+              "description": "initial value",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "count",
+              "default": 0,
+              "description": "initial value"
+            }
+          ],
+          "superclass": {
+            "name": "Wrec",
+            "package": "wrec"
+          },
+          "tagName": "counter-wrec",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "counter-wrec",
+          "declaration": {
+            "name": "CounterWrec",
+            "module": "fixtures/my-counter.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/fixtures/hello-wrec.js

@@ -0,0 +1,40 @@
+import { css, html, Wrec } from "wrec";
+
+//TODO: The analyzer is not generating proper documentation for this component!
+
+/**
+ * This displays a greeting message for a given name in a specified color.
+ * @summary This displays a greeting message.
+ * @slot - for content after the greeting
+ * @slot before - for content before the greeting
+ * @slot after - for content after the greeting and the unnamed slot
+ * @cssprop [--border-color=gray] color of border that surrounds the component
+ * @csspart greeting - greeting message
+ */
+class HelloWrec extends Wrec {
+  static properties = {
+    color: { doc: "text color", type: String, value: "black" },
+    name: { doc: "name to greet", type: String, value: "World" },
+  };
+
+  static css = css`
+    :host {
+      display: inline-block;
+      border: 3px solid var(--border-color, gray);
+      margin: 0.5rem 0;
+      padding: 0.5rem;
+    }
+    p {
+      color: this.color;
+    }
+  `;
+
+  static html = html`
+    <slot name="before"></slot>
+    <p>Hello, <span>this.name</span>!</p>
+    <slot></slot>
+    <slot name="after"></slot>
+  `;
+}
+
+HelloWrec.register();

package/fixtures/my-counter.js

@@ -0,0 +1,37 @@
+import { css, html, Wrec } from "wrec";
+
+/**
+ * This is a counter web component implemented with wrec.
+ */
+class CounterWrec extends Wrec {
+  static properties = {
+    count: { doc: "initial value", type: Number, value: 0 },
+  };
+
+  static css = css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    button {
+      background-color: lightgreen;
+    }
+
+    button:disabled {
+      opacity: 0.8;
+    }
+  `;
+
+  static html = html`
+    <button onClick="this.count--" type="button" disabled="this.count === 0">
+      -
+    </button>
+    <span>this.count</span>
+    <button onClick="this.count++" type="button">+</button>
+    <span>this.count < 10 ? "single" : "double"</span>-digit
+  `;
+}
+
+CounterWrec.register();

package/index.js

@@ -1,4 +1,3 @@
-//TODO: Does this support JSDoc comment attributes like @attr by default?
 export default function wrecPlugin() {
   const MEMBERS_TO_HIDE = new Set(["css", "html", "properties"]);
 
@@ -88,13 +87,45 @@ export default function wrecPlugin() {
                 }
               }
 
-              currentClass.attributes.push({
-                default: value,
-                description: doc,
-                fieldName: name,
-                name,
-                type,
-              });
+              if (["String", "Number", "Boolean"].includes(type)) {
+                type = type.toLowerCase();
+              }
+
+              const attribute = currentClass.attributes.find(
+                (obj) => obj.name === name,
+              );
+              if (attribute) {
+                attribute.default = value;
+                attribute.description = doc;
+              } else {
+                currentClass.attributes.push({
+                  name,
+                  type: { text: type },
+                  fieldName: name,
+                  default: value,
+                  description: doc,
+                });
+              }
+
+              const member = currentClass.members.find(
+                (obj) => obj.name === name,
+              );
+              if (member) {
+                member.default = value;
+                member.description = doc;
+                member.reflects = true;
+              } else {
+                currentClass.members.push({
+                  kind: "field",
+                  name,
+                  privacy: "public",
+                  type: { text: type },
+                  attribute: name,
+                  default: value,
+                  description: doc,
+                  reflects: true,
+                });
+              }
             }
 
             isStatic = false;

package/package.json

@@ -5,16 +5,15 @@
   "license": "MIT",
   "main": "index.js",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "scripts": {
+    "cem": "cem analyze",
     "reinstall": "rm -rf node_modules package-lock.json && npm install",
     "test": "uvu test"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "globby": "^16.1.0",
-    "nodemon": "^3.1.11",
-    "typescript": "^5.9.3",
     "uvu": "^0.5.6"
-  }
+  },
+  "customElements": "custom-elements.json"
 }

package/test/integration.test.js

@@ -1,38 +1,23 @@
 // This uses the uvu test runner at https://github.com/lukeed/uvu.
+import { execSync } from "child_process";
+import { readFileSync } from "fs";
 import { test } from "uvu";
 import * as assert from "uvu/assert";
-import path from "path";
-import fs from "fs";
-import { globby } from "globby";
-import ts from "typescript";
 
-import { create } from "@custom-elements-manifest/analyzer/src/create.js";
-import myPlugin from "../index.js";
-
-const fixturesDir = path.join(process.cwd(), "fixtures");
-let testCases = fs.readdirSync(fixturesDir);
-
-testCases.forEach((testCase) => {
-  test(`Testcase ${testCase}`, async () => {
-    const fixturePath = path.join(fixturesDir, `${testCase}/expected.json`);
-    const fixture = JSON.parse(fs.readFileSync(fixturePath, "utf-8"));
-
-    const packagePath = path.join(fixturesDir, `${testCase}/sourcecode`);
-    const packagePathPosix = packagePath.split(path.sep).join(path.posix.sep);
-    const outputPath = path.join(fixturesDir, `${testCase}/actual.json`);
-
-    const globs = await globby(packagePathPosix);
-    const modules = globs.map((glob) => {
-      const relativeModulePath = `.${path.sep}${path.relative(process.cwd(), glob)}`;
-      const file = path.basename(relativeModulePath);
-      const source = fs.readFileSync(relativeModulePath).toString();
-      return ts.createSourceFile(file, source, ts.ScriptTarget.ES2015, true);
-    });
-
-    const result = create({ modules, plugins: [myPlugin()] });
-    fs.writeFileSync(outputPath, JSON.stringify(result, null, 2));
-    assert.equal(result, fixture);
-  });
+test("CEM generation", () => {
+  // .toString() is needed because execSync returns a Buffer.
+  const output = execSync("cem analyze").toString();
+  assert.ok(
+    output.includes("@custom-elements-manifest/analyzer: Created new manifest"),
+  );
+  const cem = "custom-elements.json";
+  const actual = readFileSync(cem, "utf-8");
+  const expected = readFileSync(`./fixtures/expected-${cem}`, "utf-8");
+  assert.is(
+    actual,
+    expected,
+    `generated ${cem} does not have expected contents`,
+  );
 });
 
 test.run();

package/fixtures/hello-world/actual.json

@@ -1,61 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "hello-world.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "HelloWorld",
-          "members": [
-            {
-              "kind": "field",
-              "name": "#name",
-              "privacy": "private",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"World\""
-            },
-            {
-              "kind": "field",
-              "name": "#p",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "hello-world",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "HelloWorld",
-          "declaration": {
-            "name": "HelloWorld",
-            "module": "hello-world.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "hello-world",
-          "declaration": {
-            "name": "HelloWorld",
-            "module": "hello-world.js"
-          }
-        }
-      ]
-    }
-  ]
-}

package/fixtures/hello-world/expected.json

@@ -1,61 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "hello-world.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "HelloWorld",
-          "members": [
-            {
-              "kind": "field",
-              "name": "#name",
-              "privacy": "private",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"World\""
-            },
-            {
-              "kind": "field",
-              "name": "#p",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "tagName": "hello-world",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "HelloWorld",
-          "declaration": {
-            "name": "HelloWorld",
-            "module": "hello-world.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "hello-world",
-          "declaration": {
-            "name": "HelloWorld",
-            "module": "hello-world.js"
-          }
-        }
-      ]
-    }
-  ]
-}

package/fixtures/hello-world/sourcecode/hello-world.js

@@ -1,28 +0,0 @@
-export class HelloWorld extends HTMLElement {
-  static get observedAttributes() {
-    return ["name"];
-  }
-
-  #name = "World";
-  #p = document.createElement("p");
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-
-  connectedCallback() {
-    this.#p.textContent = `Hello, ${this.#name}!`;
-    this.shadowRoot.replaceChild(this.#p);
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    console.log("attributeChangedCallback", name, oldValue, newValue);
-    if (name === "name") {
-      this.#name = newValue;
-      this.#p.textContent = `Hello, ${this.#name}!`;
-    }
-  }
-}
-
-customElements.define("hello-world", HelloWorld);

package/fixtures/my-counter/actual.json

@@ -1,12 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "my-counter.js",
-      "declarations": [],
-      "exports": []
-    }
-  ]
-}

package/fixtures/my-counter/expected.json

@@ -1,38 +0,0 @@
-{
-  "schemaVersion": "0.1.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "my-counter.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MyCounter",
-          "members": [
-            {
-              "kind": "field",
-              "name": "count",
-              "default": "0"
-            }
-          ],
-          "superclass": {
-            "name": "Wrec"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MyCounter",
-          "declaration": {
-            "name": "MyCounter",
-            "module": "my-counter.js"
-          }
-        }
-      ]
-    }
-  ]
-}

package/fixtures/my-counter/sourcecode/my-counter.js

@@ -1,43 +0,0 @@
-import { css, html, Wrec } from "wrec";
-
-/**
- * This is a counter web component implemented with wrec.
- */
-class MyCounter extends Wrec {
-  static properties = {
-    count: { doc: "initial value", type: Number, reflect: true, value: 0 },
-  };
-
-  static css = css`
-    .counter {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    button {
-      background-color: lightgreen;
-    }
-
-    button:disabled {
-      background-color: gray;
-    }
-  `;
-
-  static html = html`
-    <div>
-      <button onClick="decrement" type="button" disabled="this.count === 0">
-        -
-      </button>
-      <span>this.count</span>
-      <button onClick="this.count++" type="button">+</button>
-      <span>(this.count < 10 ? "single" : "double") + " digit"</span>
-    </div>
-  `;
-
-  decrement() {
-    if (this.count > 0) this.count--;
-  }
-}
-
-MyCounter.register();