Automatic!

eirikb · Sep 5, 2020 · af72173 · af72173
1 parent 022fd03
commit af72173
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -84,15 +84,17 @@ Original readme below here
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [Deno](#deno)
 - [Getting started](#getting-started)
 - [APIsh](#apish)
   - [Initialize domdom](#initialize-domdom)
   - [Elements](#elements)
-  - ["Components"](#components)
+  - ["Domponents"](#domponents)
     - [Children / Composition](#children--composition)
   - [Events](#events)
   - [on(path, callback)](#onpath-callback)
+    - [Standalone `on`](#standalone-on)
     - [Sub-paths](#sub-paths)
   - [or](#or)
   - [dd-model](#dd-model)
@@ -247,6 +249,24 @@ on('players.$id', (player, { $id }) => console.log(`Id is ${$id}`));
 
 You can have multiple wildcards: `players.$id.items.$itemId.size`.
 
+#### Standalone `on`
+
+`on` inside JSX will be attached to the element so listeners are turned on/off based on elements present in the DOM.  
+Calling `on` outside of JSX will _not_ automatically start the listener.  
+This is a quirk. Sorry.  
+If you want a global forever running listener call `listen()`, like this:
+
+```js
+on('!+* test', console.log).listen();
+```
+
+If you have an element you should `attach` it to that, like this:
+
+```jsx
+const element = <div></div>;
+on('!*+ test', x => element.textContent = x).attach(element);
+```
+
 #### Sub-paths
 
 By using `subPath` it's possible to listen to relative paths "from parent".  

diff --git a/domdom/domdom.ts b/domdom/domdom.ts
@@ -17,12 +17,10 @@ export type DomdomListenerCallback<T> = (
 ) => any;
 
 export class React {
-  private hodors: Set<Hodor>;
   private data: Data;
 
-  constructor(data: Data, hodors: Set<Hodor>) {
+  constructor(data: Data) {
     this.data = data;
-    this.hodors = hodors;
   }
 
   createElement(
@@ -40,7 +38,6 @@ export class React {
           cbs.push(cb);
         },
       };
-      this.hodors.clear();
       const res = input({ ...props }, options) as Domode;
       res.mountables.push({
         mounted() {
@@ -50,9 +47,6 @@ export class React {
         },
         unmounted() {},
       });
-      for (let hodor of this.hodors) {
-        res.mountables.push(hodor);
-      }
       return res;
     }
 
@@ -79,43 +73,34 @@ export class React {
       const child = children[index];
       if (child instanceof Hodor) {
         const hodor = child as Hodor;
-        this.hodors.delete(hodor);
+        el.mountables.push(hodor);
         hodor.stower(index, stower);
         hodor.element = el;
-        el.mountables.push(hodor);
       } else {
         stower.add(child, index);
       }
     }
 
     ddProps(this.data, el.mountables, el, props);
 
-    // console.log(this.hodors.size);
-    // for (let hodor of this.hodors) {
-    //   el.mountables.push(hodor);
-    //   this.hodors.delete(hodor);
-    // }
     return el;
   }
 }
 
 export class Domdom {
-  private hodors: Set<Hodor> = new Set<Hodor>();
   private data: Data;
   React: React;
 
   constructor(data: Data) {
     this.data = data;
-    this.React = new React(this.data, this.hodors);
+    this.React = new React(this.data);
   }
 
   on = <T = any>(path: string, cb?: HodorCallback<T>) => {
     if (path.startsWith('>')) {
       throw new Error('Sub path selector no longer supported');
     }
-    const hodor = new Hodor<T>(this.data, path, cb);
-    this.hodors.add(hodor);
-    return hodor;
+    return new Hodor<T>(this.data, path, cb);
   };
 
   set = (path: string, value: any, byKey?: string) => {

diff --git a/domdom/hodor.ts b/domdom/hodor.ts
@@ -46,6 +46,7 @@ export class Hodor<T = any> implements Mountable {
   listener?: HodorCallback<T>;
   refs: string[] = [];
   hasFlags: boolean = false;
+  headless = false;
 
   constructor(data: Data, path: string, listener?: HodorCallback<T>) {
     this.data = data;
@@ -60,9 +61,9 @@ export class Hodor<T = any> implements Mountable {
 
     this.path = path;
     this.hasFlags = !!path.match(/ /);
-    if (this.hasFlags) {
-      this.listen(this.path);
-    }
+    // if (this.hasFlags) {
+    // this._listen(this.path);
+    // }
   }
 
   on(flagsAndPath: string, cb: HodorCallback<T>) {
@@ -122,9 +123,7 @@ export class Hodor<T = any> implements Mountable {
   }
 
   mounted() {
-    if (typeof this.listen === 'function') {
-      this.listen(this.path);
-    }
+    this._listen(this.path);
   }
 
   unmounted() {
@@ -137,13 +136,23 @@ export class Hodor<T = any> implements Mountable {
     this.refs = [];
   }
 
-  listen(path) {
+  attach(node: Domode) {
+    node.mountables.push(this);
+    this.listen();
+  }
+
+  listen() {
+    this.headless = true;
+    this._listen(this.path);
+  }
+
+  private _listen(path) {
     if (this.listening) {
       return;
     }
     this.listening = true;
 
-    if (this.hasFlags) {
+    if (this.hasFlags || this.headless) {
       this.on(this.path, this.listener!);
       return;
     }