wrec 0.0.1

package/.vscode/settings.json

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mark Volkmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# Web Reactive Component (Wrec)
+
+<img alt="shipwrec" src="shipwrec.png" style="width: 256px">
+
+Wrec is a small library that greatly simplifies building web components.
+It is inspired by [Lit](https://lit.dev).
+
+Wrec has fewer features that Lit.
+In exchange, Wrec:
+
+- is much smaller than Lit (about 1/4 of the size)
+- doesn't require any tooling
+- doesn't require a build process
+
+The main features of Wrec are that it
+automates wiring event listeners
+and automates implementing reactivity.
+
+Check out the web app in the `demo` directory.
+To run it, cd to that directory, enter `npm install`,
+enter `npm run dev`, and browse localhost:5173.
+This app begins by rendering "counter" components.
+The first is implemented as a vanilla web component.
+The next two uses the Wrec library.
+Compare the files `counter-vanilla.js` and `counter-wrec.js`
+to see how much using Wrec simplifies the code.
+
+To wire event listeners,
+Wrec looks for attributes whose name begins with "on".
+It assumes the remainder of the attribute name is an event name.
+It also assumes that the value of the attribute is either
+a method name that should be called or code that should be executed
+when that event is dispatched.
+For example, the attribute `onclick="increment"` causes Wrec to
+add an event listener to the element containing the attribute
+for "click" events and calls `this.increment(event)`.
+Alternatively, the attribute `onclick="this.count++"`
+adds an event listener that increments `this.count`
+when the element is clicked.
+
+The case of the event name within the attribute name
+does not matter because Wrec lowercases the name.
+So the attribute in the previous example
+can be replaced by `onClick="increment"`.
+
+Wrec supports reactivity.
+Attribute values and the text content of elements
+can refer to web component properties with the syntax `this.propertyName`.
+The DOM of the web component is surgically updated.
+Only attribute values and text content
+that refer to modified web component properties are updated.
+Attribute values and text content that contain references to properties
+must be valid JavaScript expressions that are NOT surrounded by `${...}`.
+For an example of this kind of web component, see `demo/hello-world.js`.
+
+Wrec supports two-way data binding for HTML form elements.
+
+- `input` and `select` elements can have a `value` attribute
+  whose value is "this.somePropertyName".
+- `textarea` elements can have text content
+  that is "this.somePropertyName"
+
+In all these cases, if the user changes the value of the form element,
+the specified property is updated.
+When the property is updated,
+the displayed value of the form element is updated.
+For examples, see `demo/data-bind.js`.
+
+Web components that extend `Wrec` can contribute values to
+form submissions by adding the following line to their class definition.
+Wrec looks for that automatically does the rest of the work.
+
+```js
+static formAssociated = true;
+```
+
+Wrec supports conditional and iterative generation of HTML.
+See `demo/temperature-eval.js` for an example of a web component
+that conditionally decides what to render based on an attribute value.
+See `demo/radio-group.js` for an example of a web component
+that iterates over values in a comma-delimited attribute value
+to determine what to render.

package/demo/counter-vanilla.js

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

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

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

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

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

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

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

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

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

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

package/demo/radio-group.js

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

@@ -0,0 +1,16 @@
+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/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "wrec",
+  "author": "R. Mark Volkmann",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mvolkmann/wrec.git"
+  },
+  "keywords": [
+    "web",
+    "component"
+  ],
+  "scripts": {
+    "lint": "oxlint",
+    "minify": "terser wrec.js -c -m -o wrec.min.js"
+  },
+  "devDependencies": {
+    "oxlint": "^1.5.0",
+    "terser": "^5.43.1"
+  }
+}

package/wrec.js

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