From dcd02bb24c50595cd18fa3974f63e9337831e51c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Silvan=20Str=C3=BCbi?= Date: Thu, 2 Aug 2018 13:14:25 +0200 Subject: [PATCH] adjust naming to match observable libs naming MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Silvan Strübi --- Docs/Examples/MasterExamples.js | 2 +- .../{JoinDocs.js => SubscribeDocs.js} | 34 ++++++------ Docs/TitleDocs.js | 2 +- Docs/TrapsDocs.js | 8 +-- JavaScript/Classes/Controller/InitAll.js | 4 +- JavaScript/Classes/Controller/InitBasic.js | 4 +- JavaScript/Classes/Helper/Data/Join.js | 5 -- JavaScript/Classes/Helper/Data/Subscribe.js | 5 ++ JavaScript/Classes/Traps/Data/Join.js | 54 ------------------- JavaScript/Classes/Traps/Data/Subscribe.js | 54 +++++++++++++++++++ README.md | 2 +- index.html | 4 +- package.json | 2 +- 13 files changed, 90 insertions(+), 90 deletions(-) rename Docs/Examples/{JoinDocs.js => SubscribeDocs.js} (76%) delete mode 100644 JavaScript/Classes/Helper/Data/Join.js create mode 100644 JavaScript/Classes/Helper/Data/Subscribe.js delete mode 100644 JavaScript/Classes/Traps/Data/Join.js create mode 100644 JavaScript/Classes/Traps/Data/Subscribe.js diff --git a/Docs/Examples/MasterExamples.js b/Docs/Examples/MasterExamples.js index a1bf9ce..a264c08 100644 --- 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/JoinDocs.js b/Docs/Examples/SubscribeDocs.js similarity index 76% rename from Docs/Examples/JoinDocs.js rename to Docs/Examples/SubscribeDocs.js index 77fd8b2..293876f 100644 --- a/Docs/Examples/JoinDocs.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); => returns the Proxy


- $disjoin(destination, key, localKey); + $unsubscribe(destination, key, localKey); => returns the Proxy`, `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';

`, '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 index f9a6108..6a3942f 100644 --- 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';
import { InitBasic } from './JavaScript/Classes/Controller/InitBasic.js';

- // InitBasic includes the traps: Events, Html, Css, Join, LocalStorage, WebWorkers, Chain, Proxify
+ // InitBasic includes the traps: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Chain, Proxify
const __ = new ProxifyHook(InitBasic).get();
__(document.getElementsByTagName('body')[0])
${this.t}.appendChild(__('h1'))
diff --git a/Docs/TrapsDocs.js b/Docs/TrapsDocs.js index 2a059a2..0af1d13 100644 --- 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: Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify()))))))). Be carefull + the center of your class assembling: Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify()))))))). 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...

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';
import { WebWorkers } from './JavaScript/Classes/Traps/Misc/WebWorkers.js';
import { LocalStorage } from './JavaScript/Classes/Traps/Data/LocalStorage.js';
- import { Join } from './JavaScript/Classes/Traps/Data/Join.js';
+ import { Subscribe } from './JavaScript/Classes/Traps/Data/Subscribe.js';
import { Css } from './JavaScript/Classes/Traps/Dom/Css.js';
import { Html } from './JavaScript/Classes/Traps/Dom/Html.js';
import { Events } from './JavaScript/Classes/Traps/Dom/Events.js';

- 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;

- // Includes traps: Events, Html, Css, Join, LocalStorage, WebWorkers, Chain, Proxify
+ // Includes traps: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Chain, Proxify
import { InitBasic } from './JavaScript/Classes/Controller/InitBasic.js';

const inject = new ProxifyHook(InitBasic).get();`, `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 index ba489cc..236cfe9 100644 --- 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())))))))))) { } \ No newline at end of file +export class InitAll extends TryCatch(Debug(Types(Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))))) { } \ No newline at end of file diff --git a/JavaScript/Classes/Controller/InitBasic.js b/JavaScript/Classes/Controller/InitBasic.js index 23975fb..2c48325 100644 --- 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()))))))) { } \ No newline at end of file +export class InitBasic extends Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify()))))))) { } \ No newline at end of file diff --git a/JavaScript/Classes/Helper/Data/Join.js b/JavaScript/Classes/Helper/Data/Join.js deleted file mode 100644 index b3ea93c..0000000 --- a/JavaScript/Classes/Helper/Data/Join.js +++ /dev/null @@ -1,5 +0,0 @@ -export class Join { - constructor() { - this.joinMap = null; - } -} \ No newline at end of file diff --git a/JavaScript/Classes/Helper/Data/Subscribe.js b/JavaScript/Classes/Helper/Data/Subscribe.js new file mode 100644 index 0000000..52366cc --- /dev/null +++ b/JavaScript/Classes/Helper/Data/Subscribe.js @@ -0,0 +1,5 @@ +export class Subscribe { + constructor() { + this.subscribeMap = null; + } +} \ No newline at end of file diff --git a/JavaScript/Classes/Traps/Data/Join.js b/JavaScript/Classes/Traps/Data/Join.js deleted file mode 100644 index 41ab96d..0000000 --- a/JavaScript/Classes/Traps/Data/Join.js +++ /dev/null @@ -1,54 +0,0 @@ -import { Proxify } from '../../Handler/Proxify.js'; -import { Join as JoinHelper } from '../../Helper/Data/Join.js'; - -// !!!requires Classes->Helper.Proxify.js->convertTo!!! -export const Join = (Root = Proxify()) => class Join extends Root { - // !!!Don't overwrite this two. Required at Proxify.js - constructor(proxyRef, targetRef) { - super(proxyRef, targetRef); - - // !!!Adds to the namespace!!!*********************************** - this.JoinHelper = new JoinHelper(); - - // Traps for get************************************************* - const getTrapJoin = (target, prop, receiver) => { - if (prop !== '$join') return false; - return (destination, key, localKey = 'all', func = null) => { - if (!this.JoinHelper.joinMap) this.JoinHelper.joinMap = new Map(); - this.JoinHelper.joinMap.get(localKey) ? this.JoinHelper.joinMap.get(localKey).push([destination, key, func]) : this.JoinHelper.joinMap.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 getTrapDisjoin = (target, prop, receiver) => { - if (prop !== '$disjoin') return false; - return (destination, key, localKey = 'all') => { - let joinArr = this.JoinHelper.joinMap.get(localKey); - if (joinArr) { - this.JoinHelper.joinMap.set(localKey, (joinArr = joinArr.filter(e => e[1] !== key || this.convertTo(this.targetRef, e[0]) !== this.convertTo(this.targetRef, destination)))); - if (joinArr.length === 0) this.JoinHelper.joinMap.delete(localKey); - if (!Array.from(this.JoinHelper.joinMap.entries()).length) this.JoinHelper.joinMap = null; - } - return receiver; - }; - } - - this.trap_get_none = this.trap_get_none.concat([getTrapJoin, getTrapDisjoin]); - } - // Handler Class ext********************************************* - set(target, prop, value, receiver) { - if (this.JoinHelper.joinMap) { - const joinArr = this.JoinHelper.joinMap.get(prop) || this.JoinHelper.joinMap.get('all'); - if (joinArr) joinArr.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(['$join', '$disjoin']); - } -} \ No newline at end of file diff --git a/JavaScript/Classes/Traps/Data/Subscribe.js b/JavaScript/Classes/Traps/Data/Subscribe.js new file mode 100644 index 0000000..92f093a --- /dev/null +++ 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']); + } +} \ No newline at end of file diff --git a/README.md b/README.md index 9ccdbab..3954a6d 100644 --- 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 index 1debfb0..b4f006e 100644 --- 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 index e405c75..e56d93d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "Events", "Html", "Css", - "Join", + "Subscribe", "LocalStorage", "WebWorkers", "Method",