Skip to content

Commit

Permalink
adjust naming to match observable libs naming
Browse files Browse the repository at this point in the history
Signed-off-by: Silvan Strübi <[email protected]>
  • Loading branch information
Silvan Strübi committed Aug 2, 2018
1 parent 311fd5c commit dcd02bb
Show file tree
Hide file tree
Showing 13 changed files with 90 additions and 90 deletions.
2 changes: 1 addition & 1 deletion Docs/Examples/MasterExamples.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
34 changes: 17 additions & 17 deletions Docs/Examples/JoinDocs.js → Docs/Examples/SubscribeDocs.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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!`,
Expand All @@ -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(
Expand All @@ -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);
Expand All @@ -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(
Expand All @@ -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');
Expand All @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion Docs/TitleDocs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions Docs/TrapsDocs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:`,
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions JavaScript/Classes/Controller/InitAll.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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())))))))))) { }
4 changes: 2 additions & 2 deletions JavaScript/Classes/Controller/InitBasic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()))))))) { }
5 changes: 0 additions & 5 deletions JavaScript/Classes/Helper/Data/Join.js

This file was deleted.

5 changes: 5 additions & 0 deletions JavaScript/Classes/Helper/Data/Subscribe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export class Subscribe {
constructor() {
this.subscribeMap = null;
}
}
54 changes: 0 additions & 54 deletions JavaScript/Classes/Traps/Data/Join.js

This file was deleted.

54 changes: 54 additions & 0 deletions JavaScript/Classes/Traps/Data/Subscribe.js
Original file line number Diff line number Diff line change
@@ -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']);
}
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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),
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"Events",
"Html",
"Css",
"Join",
"Subscribe",
"LocalStorage",
"WebWorkers",
"Method",
Expand Down

0 comments on commit dcd02bb

Please sign in to comment.