@tmbr/component 1.0.0 → 1.1.1

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,13 +1,13 @@
-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 cache;
 let queue;
 let scheduled = false;
 
 function enqueue(component) {
   queue ??= new Set();
   queue.add(component);
-
   if (scheduled) return;
   queueMicrotask(flush);
   scheduled = true;
@@ -20,18 +20,25 @@ function flush() {
 }
 
 function render(component) {
-  const state = component.state;
-  const proto = Object.getPrototypeOf(component);
-
-  const context = proto === Component.prototype ? state : new Proxy(state, {
-    has(target, key) {
-      return Object.getOwnPropertyDescriptor(proto, key)?.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);
-    }
-  });
+  cache ??= new WeakMap();
+  let context = cache.get(component);
+
+  if (!context) {
+    const proto = Object.getPrototypeOf(component);
+
+    context = proto !== Component.prototype ? new Proxy(component.state, {
+      has(target, key) {
+        const own = Object.getOwnPropertyDescriptor(proto, key);
+        return own?.get ? true : key in target;
+      },
+      get(target, key, receiver) {
+        const own = Object.getOwnPropertyDescriptor(proto, key);
+        return own?.get ? own.get.call(component) : Reflect.get(target, key, receiver);
+      }
+    }) : component.state;
+
+    cache.set(component, context);
+  }
 
   for (const apply of component.directives) apply(context);
   component.update?.(context);
@@ -80,6 +87,30 @@ export default class Component {
 
   #state() {
 
+    const state = this.el.dataset.state
+      ? toJSON(this.el.dataset.state)
+      : structuredClone(this.constructor.state);
+
+    const instance = this;
+    const cache = new WeakMap();
+
+    const reactive = (obj) => {
+      if (cache.has(obj)) return cache.get(obj);
+      const proxy = 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;
+        }
+      });
+      cache.set(obj, proxy);
+      return proxy;
+    };
+
     traverse(this.el, child => {
       for (const {name, value} of [...child.attributes]) {
         if (name.startsWith(':')) {
@@ -92,18 +123,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) {
@@ -116,8 +137,8 @@ export default class Component {
 
   on(event, target, fn) {
     const off = on(event, target, fn, this.el);
-    this.on.destroy ??= [];
-    this.on.destroy.push(off);
+    this.offs ??= [];
+    this.offs.push(off);
     return off;
   }
 
@@ -127,9 +148,10 @@ export default class Component {
   }
 
   destroy() {
-    this.on.destroy?.forEach(off => off());
     this.controller?.abort();
     this.directives.length = 0;
-    queue.delete(this);
+    this.offs?.forEach(off => off());
+    cache?.delete(this);
+    queue?.delete(this);
   }
 }

package/package.json

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