@tmbr/component 1.0.0 → 1.1.0

package/README.md

@@ -62,6 +62,24 @@ class Counter extends Component {
 new Counter('#counter');
 ```
 
+## State
+
+State is deeply reactive so mutations to nested objects and arrays trigger a render.
+
+```js
+class Form extends Component {
+  static state = {
+    fields: {name: '', email: ''},
+    errors: {}
+  };
+}
+```
+
+```html
+<input type="text" :model="fields.name" />
+<span :text="errors.name"></span>
+```
+
 ## Directives
 
 Directives are expressions evaluated with the current state.
@@ -136,16 +154,16 @@ this.dom.items // [li, li]
 
 ## Instance API
 
-| Property or Method                 | Description                                         |
-| ---------------------------------- | --------------------------------------------------- |
-| `.el`                              | root element                                        |
-| `.dom`                             | child elements collected from `ref` attributes      |
-| `.props`                           | parsed from `data-props` attribute                  |
-| `.state`                           | reactive proxy where changes trigger a rerender     |
-| `.findOne(selector)`               | scoped `querySelector`                              |
-| `.findAll(selector)`               | scoped `querySelectorAll`                           |
-| `.init()`                          | called after constructor — override in subclass     |
-| `.update(state)`                   | called after each render — override in subclass     |
-| `.on(event, target, fn)`           | delegate event listener, cleaned up on `.destroy()` |
-| `.dispatch(type, detail, options)` | dispatches a `CustomEvent` from `.el`               |
-| `.destroy()`                       | removes all listeners and directives                |
+| Property or Method                | Description                                         |
+| --------------------------------- | --------------------------------------------------- |
+| `el`                              | root element                                        |
+| `dom`                             | child elements collected from `ref` attributes      |
+| `props`                           | parsed from `data-props` attribute                  |
+| `state`                           | reactive proxy where changes trigger a rerender     |
+| `findOne(selector)`               | scoped `querySelector`                              |
+| `findAll(selector)`               | scoped `querySelectorAll`                           |
+| `init()`                          | called after constructor — override in subclass     |
+| `update(state)`                   | called after each render — override in subclass     |
+| `on(event, target, fn)`           | delegate event listener, cleaned up on `.destroy()` |
+| `dispatch(type, detail, options)` | dispatches a `CustomEvent` from `.el`               |
+| `destroy()`                       | removes all listeners and directives                |

package/bind.js

@@ -1,4 +1,4 @@
-import { cx, isFunction } from '@tmbr/utils';
+import { cx, dot, isFunction } from '@tmbr/utils';
 
 const BOOLEANS = new Set([
   'allowfullscreen',
@@ -60,7 +60,7 @@ export function bindDirective(component, node, attr, expression) {
 
     node.addEventListener(type, event => {
       const value = isCheckbox ? event.target.checked : event.target.value;
-      component.state[expression] = isNumber ? Number(value) : value;
+      dot(component.state, expression, isNumber ? Number(value) : value);
     }, {signal: component.controller.signal});
 
   } else if (attr === 'text') {
@@ -70,8 +70,8 @@ export function bindDirective(component, node, attr, expression) {
   } else if (attr === 'value') {
     apply = value => node.value = value;
   } else if (attr === 'show') {
-    const display = node.style.display || '';
-    apply = value => node.style.display = value ? display : 'none';
+    const initial = node.style.display || '';
+    apply = value => node.style.display = value ? initial : 'none';
   } else if (attr === 'class') {
     const initial = node.className;
     apply = value => { node.className = initial; cx(node, value); };

package/index.js

@@ -1,4 +1,4 @@
-import { on, findOne, findAll, isDefined, isString, toJSON, traverse } from '@tmbr/utils';
+import { on, findOne, findAll, isArray, isDefined, isObject, isString, toJSON, traverse } from '@tmbr/utils';
 import { bindDirective, bindEvent } from './bind.js';
 
 let queue;
@@ -25,11 +25,12 @@ function render(component) {
 
   const context = proto === Component.prototype ? state : new Proxy(state, {
     has(target, key) {
-      return Object.getOwnPropertyDescriptor(proto, key)?.get ? true : key in target;
+      const own = Object.getOwnPropertyDescriptor(proto, key);
+      return own?.get ? true : key in target;
     },
     get(target, key, receiver) {
-      const d = Object.getOwnPropertyDescriptor(proto, key);
-      return d?.get ? d.get.call(component) : Reflect.get(target, key, receiver);
+      const own = Object.getOwnPropertyDescriptor(proto, key);
+      return own?.get ? own.get.call(component) : Reflect.get(target, key, receiver);
     }
   });
 
@@ -80,6 +81,23 @@ export default class Component {
 
   #state() {
 
+    const state = this.el.dataset.state
+      ? toJSON(this.el.dataset.state)
+      : structuredClone(this.constructor.state);
+
+    const instance = this;
+    const reactive = (obj) => new Proxy(obj, {
+      get(target, key, receiver) {
+        const value = Reflect.get(target, key, receiver);
+        return isArray(value) || isObject(value) ? reactive(value) : value;
+      },
+      set(target, key, value) {
+        target[key] = value;
+        enqueue(instance);
+        return true;
+      }
+    });
+
     traverse(this.el, child => {
       for (const {name, value} of [...child.attributes]) {
         if (name.startsWith(':')) {
@@ -92,18 +110,8 @@ export default class Component {
       }
     });
 
-    const state = this.el.dataset.state
-      ? toJSON(this.el.dataset.state)
-      : structuredClone(this.constructor.state);
-
-    const set = (target, key, value) => {
-      target[key] = value;
-      enqueue(this);
-      return true;
-    };
-
     enqueue(this);
-    return new Proxy(state, {set});
+    return reactive(state);
   }
 
   findOne(s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmbr/component",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "repository": "github:nikrowell/tmbr-toolkit",
   "type": "module",
   "main": "index.js",