adjust naming to match observable libs naming

Silvan Strübi · Silvan Strübi · commit dcd02bb24c50 · 2018-08-02T13:14:25.000+02:00
Signed-off-by: Silvan Strübi &lt;silvan.struebi@mgb.ch&gt;
diff --git a/Docs/Examples/MasterExamples.js b/Docs/Examples/MasterExamples.js
@@ -66,7 +66,7 @@ export default class MasterExamples extends MasterDocs {
             __('div')
                 .$func((receiver) => {
                     let firstRender = true;
-                    this.state.$join(receiver, undefined, 'expl', (value) => {
+                    this.state.$subscribe(receiver, undefined, 'expl', (value) => {
                         Array.from(document.getElementsByClassName(this.name + 'active')).forEach(e => e.classList.remove(this.name + 'active'));
                         const activeEl = document.getElementById(this.name + value);
                         if (activeEl) activeEl.classList.add(this.name + 'active');
diff --git a/Docs/Examples/SubscribeDocs.js b/Docs/Examples/SubscribeDocs.js
@@ -1,22 +1,22 @@
 import MasterExamples from './MasterExamples.js';
 // used for examples
 import { ProxifyHook } from '../../JavaScript/Classes/Helper/ProxifyHook.js';
-import { Join } from '../../JavaScript/Classes/Traps/Data/Join.js';
+import { Subscribe } from '../../JavaScript/Classes/Traps/Data/Subscribe.js';
 
-export default class JoinDocs extends MasterExamples {
+export default class SubscribeDocs extends MasterExamples {
     constructor(makeGlobal) {
         super(makeGlobal);
-        this.name = 'joinDocs';
+        this.name = 'subscribeDocs';
         return this.html(__('div'), ...this.text());
     }
     text() {
         return [
-            'Join',
-            `The trap called Join at /JavaScript/Classes/Traps/Data/Join.js, does make a relationship between values on two 
+            'Subscribe',
+            `The trap called Subscribe at /JavaScript/Classes/Traps/Data/Subscribe.js, does make a relationship between values on two 
             different objects. Source automatically pushes designated values on localKey to target (destination[key]). A Dom 
             usecase scenario would be to have a state object, which gets manipulated by the result of your api calls, 
             and directly maps to a DOM nodes content.`,
-            `$join(destination, key, localKey, func = null);
+            `$subscribe(destination, key, localKey, func = null);
             <ul>
                 <li>destination: object = the object which holds the target property</li>
                 <li>key: string = the name of the target property (can be purposefully wrong, incase the default behavior 
@@ -25,15 +25,15 @@ export default class JoinDocs extends MasterExamples {
                 <li>[func]: function = a callback, which receives: the newValue and can handle things on its own manually</li>
             </ul>
             => returns the Proxy<br><br><br>
-            $disjoin(destination, key, localKey);
+            $unsubscribe(destination, key, localKey);
             <ul>
                 <li>destination: object = the object which holds the target property</li>
                 <li>key: string = the name of the target property</li>
                 <li>localKey: string = the name of the source property</li>
             </ul>
             => returns the Proxy`,
             `import { ProxifyHook } from './JavaScript/Classes/Helper/ProxifyHook.js;<br>
-            import { Join } from './JavaScript/Classes/Traps/Data/Join.js';<br><br>`,
+            import { Subscribe } from './JavaScript/Classes/Traps/Data/Subscribe.js';<br><br>`,
             'Example One',
             this.example1,
             `Please, open the console in your developer tools and change the string values of state.a, state.b or state.c!`,
@@ -44,7 +44,7 @@ export default class JoinDocs extends MasterExamples {
     }
     example1(receiver) {
         // assemble the ProxifyHook with the minimum traps required
-        const inject = new ProxifyHook(Join()).get();
+        const inject = new ProxifyHook(Subscribe()).get();
          
         // proxify the object to which binding shall take place
         const state = this.makeGlobal('state', inject(
@@ -60,10 +60,10 @@ export default class JoinDocs extends MasterExamples {
         const p2 = inject(document.createElement('p'));
         const p3 = inject('p');
          
-        // join nodes innerHTML to the values of state 'a', 'b' and 'c'
-        state.$join(p1, 'innerHTML', 'a');
-        state.$join(p2, 'innerHTML', 'b');
-        state.$join(p3, 'innerHTML', 'c');
+        // subscribe nodes innerHTML to the values of state 'a', 'b' and 'c'
+        state.$subscribe(p1, 'innerHTML', 'a');
+        state.$subscribe(p2, 'innerHTML', 'b');
+        state.$subscribe(p3, 'innerHTML', 'c');
          
         // append all to body, has to use the raw node, since we don't proxify the body in this statement
         receiver.appendChild(p1);
@@ -72,7 +72,7 @@ export default class JoinDocs extends MasterExamples {
     }
     example2(receiver) {
         // assemble the ProxifyHook with the minimum traps required
-        const inject = new ProxifyHook(Join()).get();
+        const inject = new ProxifyHook(Subscribe()).get();
          
         // proxify the object to which binding shall take place
         const state = this.makeGlobal('state', inject(
@@ -84,8 +84,8 @@ export default class JoinDocs extends MasterExamples {
         // append ul to body
         const ul = receiver.appendChild(document.createElement('ul'));
          
-        // join ul by custom function to the values of state 'a'
-        state.$join(ul, undefined, 'a', (values) => {
+        // subscribe ul by custom function to the values of state 'a'
+        state.$subscribe(ul, undefined, 'a', (values) => {
             ul.innerHTML = '';
             values.forEach(value => {
                 const li = document.createElement('li');
@@ -94,7 +94,7 @@ export default class JoinDocs extends MasterExamples {
             });
         });
         setTimeout(() => {
-            // the limitation is, that the prop has to be set directly, in the future Join will may support push, splice, etc. on arrays
+            // the limitation is, that the prop has to be set directly, in the future Subscribe will may support push, splice, etc. on arrays
             state.a = state.a.concat(['and hi!']);
         }, 5000);
     }
diff --git a/Docs/TitleDocs.js b/Docs/TitleDocs.js
@@ -10,7 +10,7 @@ export default class TitleDocs extends MasterDocs {
             'Proxify',
             `import { ProxifyHook } from './JavaScript/Classes/Helper/ProxifyHook.js';<br>
             import { InitBasic } from './JavaScript/Classes/Controller/InitBasic.js';<br><br>
-            <span>// InitBasic includes the traps: Events, Html, Css, Join, LocalStorage, WebWorkers, Chain, Proxify</span><br>
+            <span>// InitBasic includes the traps: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Chain, Proxify</span><br>
             const __ = new ProxifyHook(InitBasic).get();<br>
             __(document.getElementsByTagName('body')[0])<br>
             ${this.t}.appendChild(__('h1'))<br>
diff --git a/Docs/TrapsDocs.js b/Docs/TrapsDocs.js
@@ -10,7 +10,7 @@ export default class TrapsDocs extends MasterDocs {
             'Traps:',
             `Assemble traps as you like and/or write your own trap. In general its important to note, that not all traps require 
             the Proxify class. Have a look at the trap and make sure that it automatically includes Proxify or add Proxify at 
-            the center of your class assembling: <span>Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify())))))))</span>. Be carefull 
+            the center of your class assembling: <span>Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))</span>. Be carefull 
             not to have a trap at the center of your assembling, which only requires Master, when further out traps require Proxify! 
             Each trap extends the trap passed to it...<br><br>
             Get started by creating a hook and hand it your desired trap collection:`,
@@ -22,14 +22,14 @@ export default class TrapsDocs extends MasterDocs {
             import { Chain } from './JavaScript/Classes/Traps/Misc/Chain.js';<br>
             import { WebWorkers } from './JavaScript/Classes/Traps/Misc/WebWorkers.js';<br>
             import { LocalStorage } from './JavaScript/Classes/Traps/Data/LocalStorage.js';<br>
-            import { Join } from './JavaScript/Classes/Traps/Data/Join.js';<br>
+            import { Subscribe } from './JavaScript/Classes/Traps/Data/Subscribe.js';<br>
             import { Css } from './JavaScript/Classes/Traps/Dom/Css.js';<br>
             import { Html } from './JavaScript/Classes/Traps/Dom/Html.js';<br>
             import { Events } from './JavaScript/Classes/Traps/Dom/Events.js';<br><br>
-            const inject = new ProxifyHook(Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify())))))))).get();`,
+            const inject = new ProxifyHook(Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))).get();`,
             `Or simply use the preset collection called InitBasic:`,
             `import { ProxifyHook } from './JavaScript/Classes/Helper/ProxifyHook.js;<br><br>
-            // Includes traps: Events, Html, Css, Join, LocalStorage, WebWorkers, Chain, Proxify<br>
+            // Includes traps: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Chain, Proxify<br>
             import { InitBasic } from './JavaScript/Classes/Controller/InitBasic.js';<br><br>
             const inject = new ProxifyHook(InitBasic).get();`,
             `<span>This example page is completely driven by Proxify. You can see on how it works by looking at the source files of 
diff --git a/JavaScript/Classes/Controller/InitAll.js b/JavaScript/Classes/Controller/InitAll.js
@@ -3,7 +3,7 @@ import { Proxify } from '../Handler/Proxify.js';
 import { Chain } from '../Traps/Misc/Chain.js';
 import { WebWorkers } from '../Traps/Misc/WebWorkers.js';
 import { LocalStorage } from '../Traps/Data/LocalStorage.js';
-import { Join } from '../Traps/Data/Join.js';
+import { Subscribe } from '../Traps/Data/Subscribe.js';
 import { Css } from '../Traps/Dom/Css.js';
 import { Html } from '../Traps/Dom/Html.js';
 import { Events } from '../Traps/Dom/Events.js';
@@ -14,4 +14,4 @@ import { TryCatch } from '../Traps/Misc/TryCatch.js';
 
 // Exports for Helper.js*************************************************
 // Handlers: Proxify and Proxify are required by most Traps, if possible keep them as is Proxify(Proxify()) at the root
-export class InitAll extends TryCatch(Debug(Types(Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify())))))))))) { }
+export class InitAll extends TryCatch(Debug(Types(Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))))) { }
diff --git a/JavaScript/Classes/Controller/InitBasic.js b/JavaScript/Classes/Controller/InitBasic.js
@@ -3,11 +3,11 @@ import { Proxify } from '../Handler/Proxify.js';
 import { Chain } from '../Traps/Misc/Chain.js';
 import { WebWorkers } from '../Traps/Misc/WebWorkers.js';
 import { LocalStorage } from '../Traps/Data/LocalStorage.js';
-import { Join } from '../Traps/Data/Join.js';
+import { Subscribe } from '../Traps/Data/Subscribe.js';
 import { Css } from '../Traps/Dom/Css.js';
 import { Html } from '../Traps/Dom/Html.js';
 import { Events } from '../Traps/Dom/Events.js';
 
 // Exports for Helper.js*************************************************
 // Handlers: Master and Proxify are required by most Traps, if possible keep them as is Proxify() at the root
-export class InitBasic extends Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify()))))))) { }
+export class InitBasic extends Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify()))))))) { }
diff --git a/JavaScript/Classes/Helper/Data/Join.js b/JavaScript/Classes/Helper/Data/Join.js
diff --git a/JavaScript/Classes/Helper/Data/Subscribe.js b/JavaScript/Classes/Helper/Data/Subscribe.js
@@ -0,0 +1,5 @@
+export class Subscribe {
+    constructor() {
+        this.subscribeMap = null;
+    }
+}
diff --git a/JavaScript/Classes/Traps/Data/Join.js b/JavaScript/Classes/Traps/Data/Join.js
diff --git a/JavaScript/Classes/Traps/Data/Subscribe.js b/JavaScript/Classes/Traps/Data/Subscribe.js
@@ -0,0 +1,54 @@
+import { Proxify } from '../../Handler/Proxify.js';
+import { Subscribe as SubscribeHelper } from '../../Helper/Data/Subscribe.js';
+
+// !!!requires Classes->Helper.Proxify.js->convertTo!!!
+export const Subscribe = (Root = Proxify()) => class Subscribe extends Root {
+    // !!!Don't overwrite this two. Required at Proxify.js
+    constructor(proxyRef, targetRef) {
+        super(proxyRef, targetRef);
+
+        // !!!Adds to the namespace!!!***********************************
+        this.SubscribeHelper = new SubscribeHelper();
+        
+        // Traps for get*************************************************
+        const getTrapSubscribe = (target, prop, receiver) => {
+            if (prop !== '$subscribe') return false;
+            return (destination, key, localKey = 'all', func = null) => {
+                if (!this.SubscribeHelper.subscribeMap) this.SubscribeHelper.subscribeMap = new Map();
+                this.SubscribeHelper.subscribeMap.get(localKey) ? this.SubscribeHelper.subscribeMap.get(localKey).push([destination, key, func]) : this.SubscribeHelper.subscribeMap.set(localKey, [[destination, key, func]]);
+                const result = func ? func(receiver[localKey] || receiver) : this.convertTo(this.targetRef, receiver[localKey]) || receiver;
+                if (key in destination) destination[key] = result;
+                return receiver;
+            };
+        }
+        const getTrapunsubscribe = (target, prop, receiver) => {
+            if (prop !== '$unsubscribe') return false;
+            return (destination, key, localKey = 'all') => {
+                let subscribeArr = this.SubscribeHelper.subscribeMap.get(localKey);
+                if (subscribeArr) {
+                    this.SubscribeHelper.subscribeMap.set(localKey, (subscribeArr = subscribeArr.filter(e => e[1] !== key || this.convertTo(this.targetRef, e[0]) !== this.convertTo(this.targetRef, destination))));
+                    if (subscribeArr.length === 0) this.SubscribeHelper.subscribeMap.delete(localKey);
+                    if (!Array.from(this.SubscribeHelper.subscribeMap.entries()).length) this.SubscribeHelper.subscribeMap = null;
+                }
+                return receiver;
+            };
+        }
+
+        this.trap_get_none = this.trap_get_none.concat([getTrapSubscribe, getTrapunsubscribe]);
+    }
+    // Handler Class ext*********************************************
+    set(target, prop, value, receiver) {
+        if (this.SubscribeHelper.subscribeMap) {
+            const subscribeArr = this.SubscribeHelper.subscribeMap.get(prop) || this.SubscribeHelper.subscribeMap.get('all');
+            if (subscribeArr) subscribeArr.forEach(e => {
+                const result = e[2] ? e[2](value) : this.convertTo(this.targetRef, value);
+                if (e[1] in e[0]) e[0][e[1]] = result;
+            });
+        }
+        return super.set(...arguments);
+    }
+    ownKeys(target) {
+        // get possible keys
+        return super.ownKeys(...arguments).concat(['$subscribe', '$unsubscribe']);
+    }
+}
diff --git a/README.md b/README.md
@@ -50,6 +50,6 @@ __(document.getElementsByTagName('body')[0]).$appendChildren(
 
 The short snippet above merely gives a glimpse on what Proxify can do.
 
-Easily, deal not only with Web APIs but any API. Here a few tags: Events, Html, Css, Join, LocalStorage, WebWorkers, Method Chaining, Error Handling, Types, Debugging, ∞. All modular, lightweight and simple thanks to the power of Proxies.
+Easily, deal not only with Web APIs but any API. Here a few tags: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Method Chaining, Error Handling, Types, Debugging, ∞. All modular, lightweight and simple thanks to the power of Proxies.
 
 - [Documentation, Examples & More Information](https://weedshaker.github.io/Proxify/)
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
         import DebugDocs from './Docs/Examples/DebugDocs.js';
         import EventsDocs from './Docs/Examples/EventsDocs.js';
         import HtmlDocs from './Docs/Examples/HtmlDocs.js';
-        import JoinDocs from './Docs/Examples/JoinDocs.js';
+        import SubscribeDocs from './Docs/Examples/SubscribeDocs.js';
         import LocalStorageDocs from './Docs/Examples/LocalStorageDocs.js';
         import TryCatchDocs from './Docs/Examples/TryCatchDocs.js';
         import TypesDocs from './Docs/Examples/TypesDocs.js';
@@ -45,7 +45,7 @@
                           new DebugDocs(this.makeGlobal),
                           new EventsDocs(this.makeGlobal),
                           new HtmlDocs(this.makeGlobal),
-                          new JoinDocs(this.makeGlobal),
+                          new SubscribeDocs(this.makeGlobal),
                           new LocalStorageDocs(this.makeGlobal),
                           new TryCatchDocs(this.makeGlobal),
                           new TypesDocs(this.makeGlobal),
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "Events",
     "Html",
     "Css",
-    "Join",
+    "Subscribe",
     "LocalStorage",
     "WebWorkers",
     "Method",
