Declarative hyperHTML.Component

cjs/classes/Component.js

@@ -1,16 +1,59 @@
 'use strict';
+const { UID } = require('../shared/constants.js');
+const { WeakMap } = require('../shared/poorlyfills.js');
+
 // hyperHTML.Component is a very basic class
 // able to create Custom Elements like components
 // including the ability to listen to connect/disconnect
 // events via onconnect/ondisconnect attributes
+// Components can be created imperatively or declaratively.
+// The main difference is that declared components
+// will not automatically render on setState(...)
+// to simplify state handling on render.
 function Component() {}
 Object.defineProperty(exports, '__esModule', {value: true}).default = Component
 
 // components will lazily define html or svg properties
 // as soon as these are invoked within the .render() method
 // Such render() method is not provided by the base class
 // but it must be available through the Component extend.
+// Declared components could implement a
+// render(props) method too and use props as needed.
 function setup(content) {
+  const children = new WeakMap;
+  const create = Object.create;
+  const createEntry = (wm, id, component) => {
+    wm.set(id, component);
+    return component;
+  };
+  const get = (Class, info, id) => {
+    switch (typeof id) {
+      case 'object':
+      case 'function':
+        const wm = info.w || (info.w = new WeakMap);
+        return wm.get(id) || createEntry(wm, id, new Class);
+      default:
+        const sm = info.p || (info.p = create(null));
+        return sm[id] || (sm[id] = new Class);
+    }
+  };
+  const set = context => {
+    const info = {w: null, p: null};
+    children.set(context, info);
+    return info;
+  };
+  Object.defineProperties(
+    Component,
+    {
+      for: {
+        configurable: true,
+        value(context, id) {
+          const info = children.get(context) || set(context);
+          return get(this, info, id == null ? 'default' : id);
+        }
+      }
+    }
+  );
   Object.defineProperties(
     Component.prototype,
     {
@@ -25,11 +68,12 @@ function setup(content) {
       svg: lazyGetter('svg', content),
       state: lazyGetter('state', function () { return this.defaultState; }),
       defaultState: {get() { return {}; }},
-      setState: {value(state) {
+      setState: {value(state, render) {
         const target = this.state;
         const source = typeof state === 'function' ? state.call(this, target) : state;
         for (const key in source) target[key] = source[key];
-        this.render();
+        if (render !== false) this.render();
+        return this;
       }}
     }
   );