cem-plugin-wrec 0.1.4 → 0.2.1

package/dev.js

@@ -1,15 +1,15 @@
-import fs from 'fs';
-import ts from 'typescript';
-import { create } from '@custom-elements-manifest/analyzer/src/create.js';
-import myPlugin from './index.js';
+import fs from "fs";
+import ts from "typescript";
+import { create } from "@custom-elements-manifest/analyzer/src/create.js";
+import myPlugin from "./index.js";
 
-const code = fs.readFileSync('fixtures/default/sourcecode/default.js').toString();
+const name = "my-counter";
+const file = `${name}.js`;
+const path = `fixtures/${name}/sourcecode/${file}`;
+const code = fs.readFileSync(path).toString();
 
-const modules = [ts.createSourceFile(
-  'my-element.js',
-  code,
-  ts.ScriptTarget.ES2015,
-  true,
-)];
+const modules = [ts.createSourceFile(file, code, ts.ScriptTarget.ES2015, true)];
 
-console.log(JSON.stringify(create({modules, plugins: [myPlugin()]}), null, 2));
+console.log(
+  JSON.stringify(create({ modules, plugins: [myPlugin()] }), null, 2),
+);

package/fixtures/hello-world/actual.json

@@ -0,0 +1,61 @@
+{
+  "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

@@ -0,0 +1,61 @@
+{
+  "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

@@ -0,0 +1,28 @@
+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

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

package/fixtures/{default → my-counter}/expected.json

@@ -4,22 +4,21 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "my-element.js",
+      "path": "my-counter.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "MyElement",
+          "name": "MyCounter",
           "members": [
             {
               "kind": "field",
-              "name": "someField",
-              "default": "",
-              "foo": "Some custom information!"
+              "name": "count",
+              "default": "0"
             }
           ],
           "superclass": {
-            "name": "HTMLElement"
+            "name": "Wrec"
           },
           "customElement": true
         }
@@ -27,13 +26,13 @@
       "exports": [
         {
           "kind": "js",
-          "name": "MyElement",
+          "name": "MyCounter",
           "declaration": {
-            "name": "MyElement",
-            "module": "my-element.js"
+            "name": "MyCounter",
+            "module": "my-counter.js"
           }
         }
       ]
     }
   ]
-}
+}

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

@@ -0,0 +1,43 @@
+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();

package/index.js

@@ -1,13 +1,11 @@
-//TODO: Does this support JSDoc comment attributes like @attr by default?
 export default function wrecPlugin() {
   const MEMBERS_TO_HIDE = new Set(["css", "html", "properties"]);
 
   let currentClass;
   let isStatic = false;
-  let Kind = {};
   let propertyName = "";
 
-  function nodeValue(node) {
+  function nodeValue(Kind, node) {
     const { initializer } = node;
     switch (initializer.kind) {
       case Kind.Identifier:
@@ -38,8 +36,8 @@ export default function wrecPlugin() {
 
     // Runs for each module
     analyzePhase({ ts, node, moduleDoc, context }) {
-      Kind = ts.SyntaxKind;
-
+      // All property constant values of Kind are documented in SyntaxKind.md.
+      const Kind = ts.SyntaxKind;
       switch (node.kind) {
         case Kind.ClassDeclaration:
           const className = node.name.getText();
@@ -81,7 +79,7 @@ export default function wrecPlugin() {
                 if (initializer.kind === Kind.ObjectLiteralExpression) {
                   for (const property2 of initializer.properties) {
                     const name2 = property2.name.getText();
-                    const value2 = nodeValue(property2);
+                    const value2 = nodeValue(Kind, property2);
                     if (name2 === "doc") doc = value2;
                     if (name2 === "type") type = value2;
                     if (name2 === "value") value = value2;
@@ -89,13 +87,22 @@ export default function wrecPlugin() {
                 }
               }
 
-              currentClass.attributes.push({
-                default: value,
-                description: doc,
-                fieldName: name,
-                name,
-                type,
-              });
+              const attribute = currentClass.attributes.find(
+                (obj) => obj.name === name,
+              );
+              if (attribute) {
+                attribute.default = value;
+                attribute.description = doc;
+              }
+
+              const member = currentClass.members.find(
+                (obj) => obj.name === name,
+              );
+              if (member) {
+                member.default = value;
+                member.description = doc;
+                member.reflects = true;
+              }
             }
 
             isStatic = false;
@@ -113,7 +120,8 @@ export default function wrecPlugin() {
       }
     },
 
-    // Runs for each module, after analyzing, all information about your module should now be available
+    // Runs for each module.  After analyzing,
+    // all information about your module should now be available.
     moduleLinkPhase({ moduleDoc, context }) {
       const classes = moduleDoc?.declarations?.filter(
         (declaration) => declaration.kind === "class",

package/my-counter.js

@@ -1,42 +1,39 @@
-import { Wrec } from "wrec";
+import { css, html, Wrec } from "wrec";
 
 /**
- * This is a counter web component.
+ * 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 },
   };
 
-  css() {
-    return /*css*/ `
-       .counter {
-         display: flex;
-         align-items: center;
-         gap: 0.5rem;
-       }
+  static css = css`
+    .counter {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
 
-       button {
-         background-color: lightgreen;
-       }
+    button {
+      background-color: lightgreen;
+    }
 
-       button:disabled {
-         background-color: gray;
-       }
-     `;
-  }
+    button:disabled {
+      background-color: gray;
+    }
+  `;
 
-  html() {
-    return /*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>
-    `;
-  }
+  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--;

package/package.json

@@ -5,9 +5,10 @@
   "license": "MIT",
   "main": "index.js",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "scripts": {
-    "reinstall": "rm -rf node_modules package-lock.json && npm install"
+    "reinstall": "rm -rf node_modules package-lock.json && npm install",
+    "test": "uvu test"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",

package/test/integration.test.js

@@ -1,44 +1,38 @@
-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');
+// This uses the uvu test runner at https://github.com/lukeed/uvu.
+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 => {
+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 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 source = fs.readFileSync(relativeModulePath).toString();
-    
-        return ts.createSourceFile(
-          'my-element.js',
-          source,
-          ts.ScriptTarget.ES2015,
-          true,
-        );
-      });
-
-    const result = create({modules, plugins: [myPlugin()]});
-
+    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.run();
+test.run();

package/fixtures/default/actual.json

@@ -1,39 +0,0 @@
-{
-  "schemaVersion": "0.1.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "my-element.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MyElement",
-          "members": [
-            {
-              "kind": "field",
-              "name": "someField",
-              "default": "",
-              "foo": "Some custom information!"
-            }
-          ],
-          "superclass": {
-            "name": "HTMLElement"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MyElement",
-          "declaration": {
-            "name": "MyElement",
-            "module": "my-element.js"
-          }
-        }
-      ]
-    }
-  ]
-}

package/fixtures/default/sourcecode/default.js

@@ -1,6 +0,0 @@
-export class MyElement extends HTMLElement { 
-  /**
-   * @foo Some custom information!
-   */
-  someField = '';
-}