wrec 0.0.2 → 0.0.3

package/README.md

@@ -1,4 +1,4 @@
-# Web Reactive Component (Wrec)
+# Web Reactive Component (wrec)
 
 <img alt="shipwreck" src="shipwreck.png" style="width: 256px">
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wrec",
   "author": "R. Mark Volkmann",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -11,9 +11,18 @@
     "web",
     "component"
   ],
+  "main": "dist/wrec.min.js",
+  "exports": {
+    "import": "./dist/wrec.min.js",
+    "require": "./dist/wrec.min.js"
+  },
+  "files": [
+    "dist/wrec.min.js",
+    "README.md"
+  ],
   "scripts": {
     "lint": "oxlint",
-    "minify": "terser wrec.js -c -m -o wrec.min.js"
+    "minify": "terser wrec.js -c -m -o dist/wrec.min.js"
   },
   "devDependencies": {
     "oxlint": "^1.5.0",

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "cSpell.words": ["Wrec"]
-}

package/demo/counter-vanilla.js

@@ -1,91 +0,0 @@
-const template = document.createElement("template");
-template.innerHTML = /*html*/ `
-  <style>
-    :not(:defined) {
-      visibility: hidden;
-    }
-
-    .counter {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    button {
-      background-color: lightgreen;
-    }
-
-    button:disabled {
-      background-color: gray;
-    }
-  </style>
-  <div>
-    <button id="decrement-btn" type="button">-</button>
-    <span></span>
-    <button id="increment-btn" type="button">+</button>
-  </div>
-`;
-
-class CounterVanilla extends HTMLElement {
-  static get observedAttributes() {
-    return ["count"];
-  }
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.#update();
-  }
-
-  connectedCallback() {
-    const root = this.shadowRoot;
-    root.appendChild(template.content.cloneNode(true));
-
-    this.decrementBtn = root.querySelector("#decrement-btn");
-    this.decrementBtn.addEventListener("click", () => {
-      this.decrement();
-    });
-    root.querySelector("#increment-btn").addEventListener("click", () => {
-      this.increment();
-    });
-
-    this.span = root.querySelector("span");
-    this.#update();
-  }
-
-  // Treat the count attribute as the source of truth
-  // rather than adding a property.
-  get count() {
-    return this.getAttribute("count") || 0;
-  }
-
-  set count(newCount) {
-    this.setAttribute("count", newCount);
-  }
-
-  decrement() {
-    if (this.count == 0) return;
-
-    this.count--;
-    // this.count gets converted to a string,
-    // so we have to use == instead of === on the next line.
-    if (this.count == 0) {
-      this.decrementBtn.setAttribute("disabled", "disabled");
-    }
-    this.#update();
-  }
-
-  increment() {
-    this.count++;
-    this.decrementBtn.removeAttribute("disabled");
-    this.#update();
-  }
-
-  #update() {
-    if (this.span) this.span.textContent = this.count;
-  }
-}
-
-customElements.define("counter-vanilla", CounterVanilla);

package/demo/counter-wreck.js

@@ -1,47 +0,0 @@
-import Wrec from "../Wrec.js";
-
-class CounterWrec extends Wrec {
-  static properties = {
-    count: { type: Number, reflect: true },
-  };
-
-  css() {
-    return /*css*/ `
-      :not(:defined) {
-        visibility: hidden;
-      }
-
-      .counter {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      button {
-        background-color: lightgreen;
-      }
-
-      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>
-    `;
-  }
-
-  decrement() {
-    if (this.count > 0) this.count--;
-  }
-}
-
-CounterWrec.register();

package/demo/data-bind.js

@@ -1,65 +0,0 @@
-import Wrec from "../wrec.js";
-
-class DataBind extends Wrec {
-  static formAssociated = true;
-  static properties = {
-    color: { type: String, reflect: true },
-    name: { type: String, reflect: true },
-    score: { type: Number, reflect: true },
-    story: { type: String, reflect: true },
-  };
-
-  css() {
-    return /*css*/ `
-      :host {
-        font-family: sans-serif;
-      }
-
-      label {
-        font-weight: bold;
-      }
-    `;
-  }
-
-  html() {
-    return /*html*/ `
-      <div>
-        <div>
-          <label>Name:</label>
-          <input value="this.name">
-          <p>Hello, <span>this.name</span>!</p>
-        </div>
-        <div style="display: flex">
-          <label for="color">Color:</label>
-          <radio-group name="color" options="red,green,blue" value="this.color"></radio-group>
-        </div>
-        <div>
-          <label>Color:</label>
-          <select value="this.color">
-            <option value="red">Red</option>
-            <option value="green">Green</option>
-            <option value="blue">Blue</option>
-          </select>
-        </div>
-        <p>You selected the color <span>this.color</span>.</p>
-        <div>
-          <label>Story:</label>
-          <textarea>this.story</textarea>
-          <p>Your story is <span>this.story</span>.</p>
-        </div>
-        <number-input label="Favorite Number:" value="this.score"></number-input>
-        <number-slider label="Slider:" value="this.score"></number-slider>
-        <p>Your score is <span>this.score</span>.</p>
-      </div>
-    `;
-  }
-
-  formResetCallback() {
-    this.color = "red";
-    this.name = "";
-    this.score = 0;
-    this.story = "";
-  }
-}
-
-DataBind.register();

package/demo/hello-world.js

@@ -1,22 +0,0 @@
-import Wrec from "../wrec.js";
-
-class HelloWorld extends Wrec {
-  static properties = {
-    name: { type: String, value: "World", reflect: true },
-  };
-
-  css() {
-    return /*css*/ `p { color: purple; }`;
-  }
-
-  html() {
-    return /*html*/ `
-      <p>
-        Hello, <span>this.name</span>.
-        Shouting <span>this.name.toUpperCase()</span>!
-      </p>
-    `;
-  }
-}
-
-HelloWorld.register();

package/demo/index.html

@@ -1,38 +0,0 @@
-<html>
-  <head>
-    <style></style>
-
-    <script src="counter-vanilla.js" type="module"></script>
-    <script src="counter-wrec.js" type="module"></script>
-    <script src="data-bind.js" type="module"></script>
-    <script src="hello-world.js" type="module"></script>
-    <script src="multiply-numbers.js" type="module"></script>
-    <script src="number-input.js" type="module"></script>
-    <script src="number-slider.js" type="module"></script>
-    <script src="radio-group.js" type="module"></script>
-    <script src="temperature-eval.js" type="module"></script>
-  </head>
-  <body>
-    <h2>Vanilla</h2>
-    <counter-vanilla count="3"></counter-vanilla>
-
-    <h2>Wrec</h2>
-    <temperature-eval temperature="100"></temperature-eval>
-    <counter-wrec count="3"></counter-wrec>
-    <counter-wrec count="1"></counter-wrec>
-    <hello-world></hello-world>
-    <hello-world name="Mark"></hello-world>
-    <multiply-numbers n1="3" n2="4"></multiply-numbers>
-    <hr />
-    <form method="GET" action="/missing">
-      <data-bind
-        name="Mark"
-        color="blue"
-        score="5"
-        story="Once upon a time..."
-      ></data-bind>
-      <button>Submit</button>
-      <button type="reset">Reset</button>
-    </form>
-  </body>
-</html>

package/demo/multiply-numbers.js

@@ -1,19 +0,0 @@
-import Wrec from "../wrec.js";
-
-class MultiplyNumbers extends Wrec {
-  static properties = {
-    n1: { type: Number },
-    n2: { type: Number },
-  };
-
-  html() {
-    return /*html*/ `
-      <p>
-        <span>this.n1</span> * <span>this.n2</span> =
-        <span>this.n1 * this.n2</span>
-      </p>
-    `;
-  }
-}
-
-MultiplyNumbers.register();

package/demo/number-input.js

@@ -1,53 +0,0 @@
-import Wrec from "../wrec.js";
-
-class NumberInput extends Wrec {
-  static formAssociated = true;
-  static properties = {
-    label: { type: String, reflect: true },
-    value: { type: Number, reflect: true },
-  };
-
-  css() {
-    return /*css*/ `
-      button {
-        background-color: cornflowerblue;
-        border: none;
-        border-radius: 50%;
-        color: white;
-      }
-
-      input[type="number"] {
-        text-align: right;
-        width: 2rem;
-      }
-
-      input[type="number"]::-webkit-inner-spin-button,
-      input[type="number"]::-webkit-outer-spin-button {
-        appearance: none;
-      }
-
-      label { font-weight: bold; }
-    `;
-  }
-
-  html() {
-    return /*html*/ `
-      <div>
-        <label>this.label</label>
-        <button onclick="decrement" type="button">-</button>
-        <input type="number" value="this.value" />
-        <button onclick="increment" type="button">+</button>
-     </div>
-    `;
-  }
-
-  decrement() {
-    if (this.value > 0) this.value--;
-  }
-
-  increment() {
-    this.value++;
-  }
-}
-
-NumberInput.register();

package/demo/number-slider.js

@@ -1,29 +0,0 @@
-import Wrec from "../wrec.js";
-
-class NumberSlider extends Wrec {
-  static properties = {
-    label: { type: String, reflect: true },
-    value: { type: Number, reflect: true },
-  };
-
-  css() {
-    return /*css*/ `
-      input[type="number"] {
-        width: 6rem;
-      }
-
-      label { font-weight: bold; }
-    `;
-  }
-
-  html() {
-    return /*html*/ `
-      <div>
-        <label>this.label</label>
-        <input type="range" min="0" value="this.value" />
-     </div>
-    `;
-  }
-}
-
-NumberSlider.register();

package/demo/package-lock.json

@@ -1,341 +0,0 @@
-{
-  "name": "wrec-demo",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "wrec-demo",
-      "devDependencies": {
-        "oxlint": "^1.5.0",
-        "vite": "^7.0.1"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.5",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@oxlint/darwin-arm64": {
-      "version": "1.5.0",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.44.1",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.8",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/esbuild": {
-      "version": "0.25.5",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.5",
-        "@esbuild/android-arm": "0.25.5",
-        "@esbuild/android-arm64": "0.25.5",
-        "@esbuild/android-x64": "0.25.5",
-        "@esbuild/darwin-arm64": "0.25.5",
-        "@esbuild/darwin-x64": "0.25.5",
-        "@esbuild/freebsd-arm64": "0.25.5",
-        "@esbuild/freebsd-x64": "0.25.5",
-        "@esbuild/linux-arm": "0.25.5",
-        "@esbuild/linux-arm64": "0.25.5",
-        "@esbuild/linux-ia32": "0.25.5",
-        "@esbuild/linux-loong64": "0.25.5",
-        "@esbuild/linux-mips64el": "0.25.5",
-        "@esbuild/linux-ppc64": "0.25.5",
-        "@esbuild/linux-riscv64": "0.25.5",
-        "@esbuild/linux-s390x": "0.25.5",
-        "@esbuild/linux-x64": "0.25.5",
-        "@esbuild/netbsd-arm64": "0.25.5",
-        "@esbuild/netbsd-x64": "0.25.5",
-        "@esbuild/openbsd-arm64": "0.25.5",
-        "@esbuild/openbsd-x64": "0.25.5",
-        "@esbuild/sunos-x64": "0.25.5",
-        "@esbuild/win32-arm64": "0.25.5",
-        "@esbuild/win32-ia32": "0.25.5",
-        "@esbuild/win32-x64": "0.25.5"
-      }
-    },
-    "node_modules/fdir": {
-      "version": "6.4.6",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.11",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/oxlint": {
-      "version": "1.5.0",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "oxc_language_server": "bin/oxc_language_server",
-        "oxlint": "bin/oxlint"
-      },
-      "engines": {
-        "node": ">=8.*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/Boshen"
-      },
-      "optionalDependencies": {
-        "@oxlint/darwin-arm64": "1.5.0",
-        "@oxlint/darwin-x64": "1.5.0",
-        "@oxlint/linux-arm64-gnu": "1.5.0",
-        "@oxlint/linux-arm64-musl": "1.5.0",
-        "@oxlint/linux-x64-gnu": "1.5.0",
-        "@oxlint/linux-x64-musl": "1.5.0",
-        "@oxlint/win32-arm64": "1.5.0",
-        "@oxlint/win32-x64": "1.5.0"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "4.0.2",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.5.6",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/rollup": {
-      "version": "4.44.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "1.0.8"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.44.1",
-        "@rollup/rollup-android-arm64": "4.44.1",
-        "@rollup/rollup-darwin-arm64": "4.44.1",
-        "@rollup/rollup-darwin-x64": "4.44.1",
-        "@rollup/rollup-freebsd-arm64": "4.44.1",
-        "@rollup/rollup-freebsd-x64": "4.44.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.44.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.44.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.44.1",
-        "@rollup/rollup-linux-arm64-musl": "4.44.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.44.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.44.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.44.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.44.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.44.1",
-        "@rollup/rollup-linux-x64-gnu": "4.44.1",
-        "@rollup/rollup-linux-x64-musl": "4.44.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.44.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.44.1",
-        "@rollup/rollup-win32-x64-msvc": "4.44.1",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
-    "node_modules/vite": {
-      "version": "7.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "esbuild": "^0.25.0",
-        "fdir": "^6.4.6",
-        "picomatch": "^4.0.2",
-        "postcss": "^8.5.6",
-        "rollup": "^4.40.0",
-        "tinyglobby": "^0.2.14"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
-        "jiti": ">=1.21.0",
-        "less": "^4.0.0",
-        "lightningcss": "^1.21.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "jiti": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    }
-  }
-}

package/demo/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "wrec-demo",
-  "scripts": {
-    "dev": "vite",
-    "lint": "oxlint"
-  },
-  "devDependencies": {
-    "oxlint": "^1.5.0",
-    "vite": "^7.0.1"
-  }
-}

package/demo/radio-group.js

@@ -1,83 +0,0 @@
-import Wrec from "../wrec.js";
-
-class RadioGroup extends Wrec {
-  // This is the only thing a Wrec subclass
-  // must contain to contribute to form submission.
-  static formAssociated = true;
-
-  static properties = {
-    default: { type: String },
-    name: { type: String },
-    options: { type: String },
-    value: { type: String },
-  };
-
-  attributeChangedCallback(attr, oldValue, newValue) {
-    super.attributeChangedCallback(attr, oldValue, newValue);
-    if (attr === "value") {
-      const inputs = this.shadowRoot.querySelectorAll("input");
-      for (const input of inputs) {
-        input.checked = input.value === newValue;
-      }
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.default) this.default = this.options.split(",")[0];
-    if (!this.value) this.value = this.default;
-  }
-
-  css() {
-    return /*css*/ `
-      .radio-group {
-        display: flex;
-        gap: 0.25rem;
-
-        > div {
-          display: flex;
-          align-items: center;
-        } 
-      }
-    `;
-  }
-
-  html() {
-    // This web component uses iteration to determine what to render.
-    return /*html*/ `
-      <div class="radio-group">
-        this.options.split(",").map((option) => this.makeRadio(option)).join("")
-      </div>
-    `;
-  }
-
-  // This method cannot be private because it is called when
-  // a change event is dispatched from a radio button.
-  handleChange(event) {
-    const { value } = event.target;
-    this.value = value;
-
-    // This allows users of the this web component to listen for changes.
-    this.dispatchEvent(new Event("change"));
-  }
-
-  // This method cannot be private because it is
-  // called from the expression in the html method.
-  makeRadio(option) {
-    return /*html*/ `
-      <div>
-        <input
-          type="radio"
-          id="${option}"
-          name="${this.name}"
-          value="${option}"
-          ${option === this.value ? "checked" : ""}
-          onchange="handleChange"
-        />
-        <label for="${option}">${option}</label>
-      </div>
-    `;
-  }
-}
-
-RadioGroup.register();

package/demo/temperature-eval.js

@@ -1,16 +0,0 @@
-import Wrec from "../wrec.js";
-
-class TemperatureEval extends Wrec {
-  static properties = {
-    temperature: { type: Number },
-  };
-
-  html() {
-    // This web component uses conditional logic to determine what to render.
-    return /*html*/ `
-      <p>this.temperature < 32 ? "freezing" : "not freezing"</p>
-    `;
-  }
-}
-
-TemperatureEval.register();

package/wrec.js

@@ -1,348 +0,0 @@
-const FIRST_CHAR = "a-zA-Z_$";
-const OTHER_CHAR = FIRST_CHAR + "0-9";
-const IDENTIFIER = `[${FIRST_CHAR}][${OTHER_CHAR}]*`;
-const REFERENCE_RE = new RegExp("this." + IDENTIFIER, "g");
-const SKIP = "this.".length;
-
-class Wrec extends HTMLElement {
-  static #propertyToExpressionsMap = new Map();
-  static #template = document.createElement("template");
-
-  #expressionReferencesMap = new Map();
-  #formData;
-  #internals;
-  #propertyToBindingsMap = new Map();
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-
-    if (this.constructor.formAssociated) {
-      this.#internals = this.attachInternals();
-      this.#formData = new FormData();
-      this.#internals.setFormValue(this.#formData);
-    }
-  }
-
-  attributeChangedCallback(attrName, _, newValue) {
-    // Update the corresponding property.
-    const value = this.#getTypedValue(attrName, newValue);
-    this[attrName] = value;
-    this.#setFormValue(attrName, value);
-  }
-
-  #bind(element, propertyName, attrName) {
-    element.addEventListener("input", (event) => {
-      this[propertyName] = event.target.value;
-    });
-
-    let bindings = this.#propertyToBindingsMap.get(propertyName);
-    if (!bindings) {
-      bindings = [];
-      this.#propertyToBindingsMap.set(propertyName, bindings);
-    }
-    bindings.push(attrName ? { element, attrName } : element);
-  }
-
-  // This is not private so it can be called from subclasses.
-  buildDOM() {
-    let template = this.constructor.prototype.css
-      ? `<style>${this.css()}</style>`
-      : "";
-    template += this.html();
-    Wrec.#template.innerHTML = template;
-
-    this.shadowRoot.replaceChildren(Wrec.#template.content.cloneNode(true));
-  }
-
-  connectedCallback() {
-    this.#defineProperties();
-    this.buildDOM();
-
-    // Wait for the DOM to update.
-    requestAnimationFrame(() => {
-      this.#wireEvents(this.shadowRoot);
-      this.#makeReactive(this.shadowRoot);
-      this.constructor.processed = true;
-    });
-  }
-
-  #defineProperties() {
-    const properties = this.constructor.properties;
-    const { observedAttributes } = this.constructor;
-    for (const [name, options] of Object.entries(properties)) {
-      this.#defineProperty(name, options, observedAttributes);
-    }
-  }
-
-  #defineProperty(propertyName, options, observedAttributes) {
-    // Copy the property value to a new property with a leading underscore.
-    // The property is replaced below with Object.defineProperty.
-    const value =
-      observedAttributes.includes(propertyName) &&
-      this.hasAttribute(propertyName)
-        ? this.#getTypedAttribute(propertyName)
-        : options.value;
-    this["_" + propertyName] = value;
-
-    Object.defineProperty(this, propertyName, {
-      enumerable: true,
-      get() {
-        return this["_" + propertyName];
-      },
-      set(value) {
-        const oldValue = this["_" + propertyName];
-        if (value === oldValue) return;
-
-        this["_" + propertyName] = value;
-
-        // If the property propertyName is configured to "reflect" and
-        // there is a matching attribute on the custom element,
-        // update that attribute.
-        const options = this.constructor.properties[propertyName];
-        if (options.reflect && this.hasAttribute(propertyName)) {
-          const oldValue = this.#getTypedAttribute(propertyName);
-          if (value !== oldValue) {
-            this.#updateAttribute(this, propertyName, value);
-          }
-        }
-
-        this.#react(propertyName);
-
-        // If this property is bound to a parent web component property,
-        // update that as well.
-        const map = this.propertyToParentPropertyMap;
-        const parentProperty = map ? map.get(propertyName) : null;
-        if (parentProperty) {
-          const parent = this.getRootNode().host;
-          parent.setAttribute(parentProperty, value);
-        }
-
-        this.#setFormValue(propertyName, value);
-      },
-    });
-  }
-
-  #evaluateAttributes(element) {
-    const isWC = element.localName.includes("-");
-
-    for (const attrName of element.getAttributeNames()) {
-      const text = element.getAttribute(attrName);
-      if (REFERENCE_RE.test(text)) {
-        // Configure data binding.
-        const propertyName = text.substring(SKIP);
-        const propertyValue = this[propertyName];
-        element.setAttribute(attrName, propertyValue);
-        element[attrName] = propertyValue;
-        this.#bind(element, propertyName, attrName);
-
-        // If the element is a web component,
-        // save a mapping from the attribute name in this web component
-        // to the property name in the parent web component.
-        if (isWC) {
-          let map = element.propertyToParentPropertyMap;
-          if (!map) {
-            map = new Map();
-            element.propertyToParentPropertyMap = map;
-          }
-          map.set(attrName, propertyName);
-        }
-      }
-
-      this.#registerPlaceholders(text, element, attrName);
-    }
-  }
-
-  static #evaluateInContext(expression, context) {
-    return function () {
-      // oxlint-disable-next-line no-eval
-      return eval(expression);
-    }.call(context);
-  }
-
-  #evaluateText(element) {
-    const { localName } = element;
-
-    // Don't allow style elements to be affected by property values.
-    if (localName === "style") return;
-
-    const text = element.textContent.trim();
-    if (localName === "textarea" && REFERENCE_RE.test(text)) {
-      // Configure data binding.
-      const propertyName = text.substring(SKIP);
-      element.textContent = this[propertyName];
-      this.#bind(element, propertyName);
-    } else {
-      this.#registerPlaceholders(text, element);
-    }
-  }
-
-  #getTypedAttribute(attrName) {
-    return this.#getTypedValue(attrName, this.getAttribute(attrName));
-  }
-
-  #getTypedValue(attrName, stringValue) {
-    const type = this.constructor.properties[attrName].type;
-    if (type === Number) return Number(stringValue);
-    if (type === Boolean) return Boolean(stringValue);
-    return stringValue;
-  }
-
-  #makeReactive(root) {
-    const elements = root.querySelectorAll("*");
-    for (const element of elements) {
-      this.#evaluateAttributes(element);
-
-      // If the element has no child elements, evaluate its text content.
-      if (!element.firstElementChild) this.#evaluateText(element);
-    }
-    //console.log("#propertyToExpressionsMap =", Wrec.#propertyToExpressionsMap);
-    //console.log("#expressionReferencesMap =", this.#expressionReferencesMap);
-  }
-
-  static get observedAttributes() {
-    return Object.keys(this.properties || {});
-  }
-
-  #react(propertyName) {
-    // Update all expression references.
-    const expressions = Wrec.#propertyToExpressionsMap.get(propertyName) || [];
-    for (const expression of expressions) {
-      const value = Wrec.#evaluateInContext(expression, this);
-      const references = this.#expressionReferencesMap.get(expression) || [];
-      for (const reference of references) {
-        if (reference instanceof Element) {
-          this.#updateElementContent(reference, value);
-        } else {
-          const { element, attrName } = reference;
-          this.#updateAttribute(element, attrName, value);
-        }
-      }
-    }
-
-    this.#updateBindings(propertyName);
-  }
-
-  static register() {
-    const elementName = Wrec.#toKebabCase(this.name);
-    if (!customElements.get(elementName)) {
-      customElements.define(elementName, this);
-    }
-  }
-
-  // Do not place untrusted expressions in
-  // attribute values or the text content of elements!
-  #registerPlaceholders(text, element, attrName) {
-    const matches = text.match(REFERENCE_RE);
-    if (!matches) return;
-
-    // Only map properties to expressions once for each web component because
-    // the mapping will be the same for every instance of the web component.
-    if (!this.constructor.processed) {
-      matches.forEach((capture) => {
-        const propertyName = capture.substring(SKIP);
-        let expressions = Wrec.#propertyToExpressionsMap.get(propertyName);
-        if (!expressions) {
-          expressions = [];
-          Wrec.#propertyToExpressionsMap.set(propertyName, expressions);
-        }
-        expressions.push(text);
-      });
-    }
-
-    let references = this.#expressionReferencesMap.get(text);
-    if (!references) {
-      references = [];
-      this.#expressionReferencesMap.set(text, references);
-    }
-    references.push(attrName ? { element, attrName } : element);
-
-    const value = Wrec.#evaluateInContext(text, this);
-    if (attrName) {
-      this.#updateAttribute(element, attrName, value);
-    } else {
-      this.#updateElementContent(element, value);
-    }
-  }
-
-  static #toKebabCase = (str) =>
-    str
-      // Insert a dash before each uppercase letter
-      // that is preceded by a lowercase letter or digit.
-      .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-      .toLowerCase();
-
-  #setFormValue(propertyName, value) {
-    if (!this.#formData) return;
-    this.#formData.set(propertyName, value);
-    this.#internals.setFormValue(this.#formData);
-  }
-
-  #updateAttribute(element, attrName, value) {
-    const currentValue = element.getAttribute(attrName);
-    if (typeof value === "boolean") {
-      if (value) {
-        if (currentValue !== attrName) {
-          element.setAttribute(attrName, attrName);
-        }
-      } else {
-        element.removeAttribute(attrName);
-      }
-    } else if (currentValue !== value) {
-      element.setAttribute(attrName, value);
-    }
-  }
-
-  #updateBindings(propertyName) {
-    const value = this[propertyName];
-    const bindings = this.#propertyToBindingsMap.get(propertyName) || [];
-    for (const binding of bindings) {
-      if (binding instanceof Element) {
-        if (binding.localName === "textarea") {
-          binding.value = value;
-        } else {
-          binding.textContent = value;
-        }
-      } else {
-        const { element, attrName } = binding;
-        this.#updateAttribute(element, attrName, value);
-        element[attrName] = value;
-      }
-    }
-  }
-
-  #updateElementContent(element, text) {
-    const { localName } = element;
-    if (localName === "textarea") {
-      element.value = text;
-    } else if (typeof text === "string" && text.trim().startsWith("<")) {
-      element.innerHTML = text;
-      this.#wireEvents(element);
-      this.#makeReactive(element);
-    } else {
-      element.textContent = text;
-    }
-  }
-
-  #wireEvents(root) {
-    const elements = root.querySelectorAll("*");
-    for (const element of elements) {
-      for (const attr of element.attributes) {
-        const { name } = attr;
-        if (name.startsWith("on")) {
-          const eventName = name.slice(2).toLowerCase();
-          const { value } = attr;
-          const fn =
-            typeof this[value] === "function"
-              ? (event) => this[value](event)
-              : // oxlint-disable-next-line no-eval
-                () => eval(value);
-          element.addEventListener(eventName, fn);
-          element.removeAttribute(name);
-        }
-      }
-    }
-  }
-}
-
-export default Wrec;