Skip to content

Commit dcd02bb

Browse files
author
Silvan Strübi
committed
adjust naming to match observable libs naming
Signed-off-by: Silvan Strübi <[email protected]>
1 parent 311fd5c commit dcd02bb

File tree

13 files changed

+90
-90
lines changed

13 files changed

+90
-90
lines changed

‎Docs/Examples/MasterExamples.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default class MasterExamples extends MasterDocs {
6666
__('div')
6767
.$func((receiver) => {
6868
let firstRender = true;
69-
this.state.$join(receiver, undefined, 'expl', (value) => {
69+
this.state.$subscribe(receiver, undefined, 'expl', (value) => {
7070
Array.from(document.getElementsByClassName(this.name + 'active')).forEach(e => e.classList.remove(this.name + 'active'));
7171
const activeEl = document.getElementById(this.name + value);
7272
if (activeEl) activeEl.classList.add(this.name + 'active');

‎Docs/Examples/JoinDocs.js renamed to ‎Docs/Examples/SubscribeDocs.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import MasterExamples from './MasterExamples.js';
22
// used for examples
33
import { ProxifyHook } from '../../JavaScript/Classes/Helper/ProxifyHook.js';
4-
import { Join } from '../../JavaScript/Classes/Traps/Data/Join.js';
4+
import { Subscribe } from '../../JavaScript/Classes/Traps/Data/Subscribe.js';
55

6-
export default class JoinDocs extends MasterExamples {
6+
export default class SubscribeDocs extends MasterExamples {
77
constructor(makeGlobal) {
88
super(makeGlobal);
9-
this.name = 'joinDocs';
9+
this.name = 'subscribeDocs';
1010
return this.html(__('div'), ...this.text());
1111
}
1212
text() {
1313
return [
14-
'Join',
15-
`The trap called Join at /JavaScript/Classes/Traps/Data/Join.js, does make a relationship between values on two
14+
'Subscribe',
15+
`The trap called Subscribe at /JavaScript/Classes/Traps/Data/Subscribe.js, does make a relationship between values on two
1616
different objects. Source automatically pushes designated values on localKey to target (destination[key]). A Dom
1717
usecase scenario would be to have a state object, which gets manipulated by the result of your api calls,
1818
and directly maps to a DOM nodes content.`,
19-
`$join(destination, key, localKey, func = null);
19+
`$subscribe(destination, key, localKey, func = null);
2020
<ul>
2121
<li>destination: object = the object which holds the target property</li>
2222
<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 {
2525
<li>[func]: function = a callback, which receives: the newValue and can handle things on its own manually</li>
2626
</ul>
2727
=> returns the Proxy<br><br><br>
28-
$disjoin(destination, key, localKey);
28+
$unsubscribe(destination, key, localKey);
2929
<ul>
3030
<li>destination: object = the object which holds the target property</li>
3131
<li>key: string = the name of the target property</li>
3232
<li>localKey: string = the name of the source property</li>
3333
</ul>
3434
=> returns the Proxy`,
3535
`import { ProxifyHook } from './JavaScript/Classes/Helper/ProxifyHook.js;<br>
36-
import { Join } from './JavaScript/Classes/Traps/Data/Join.js';<br><br>`,
36+
import { Subscribe } from './JavaScript/Classes/Traps/Data/Subscribe.js';<br><br>`,
3737
'Example One',
3838
this.example1,
3939
`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 {
4444
}
4545
example1(receiver) {
4646
// assemble the ProxifyHook with the minimum traps required
47-
const inject = new ProxifyHook(Join()).get();
47+
const inject = new ProxifyHook(Subscribe()).get();
4848

4949
// proxify the object to which binding shall take place
5050
const state = this.makeGlobal('state', inject(
@@ -60,10 +60,10 @@ export default class JoinDocs extends MasterExamples {
6060
const p2 = inject(document.createElement('p'));
6161
const p3 = inject('p');
6262

63-
// join nodes innerHTML to the values of state 'a', 'b' and 'c'
64-
state.$join(p1, 'innerHTML', 'a');
65-
state.$join(p2, 'innerHTML', 'b');
66-
state.$join(p3, 'innerHTML', 'c');
63+
// subscribe nodes innerHTML to the values of state 'a', 'b' and 'c'
64+
state.$subscribe(p1, 'innerHTML', 'a');
65+
state.$subscribe(p2, 'innerHTML', 'b');
66+
state.$subscribe(p3, 'innerHTML', 'c');
6767

6868
// append all to body, has to use the raw node, since we don't proxify the body in this statement
6969
receiver.appendChild(p1);
@@ -72,7 +72,7 @@ export default class JoinDocs extends MasterExamples {
7272
}
7373
example2(receiver) {
7474
// assemble the ProxifyHook with the minimum traps required
75-
const inject = new ProxifyHook(Join()).get();
75+
const inject = new ProxifyHook(Subscribe()).get();
7676

7777
// proxify the object to which binding shall take place
7878
const state = this.makeGlobal('state', inject(
@@ -84,8 +84,8 @@ export default class JoinDocs extends MasterExamples {
8484
// append ul to body
8585
const ul = receiver.appendChild(document.createElement('ul'));
8686

87-
// join ul by custom function to the values of state 'a'
88-
state.$join(ul, undefined, 'a', (values) => {
87+
// subscribe ul by custom function to the values of state 'a'
88+
state.$subscribe(ul, undefined, 'a', (values) => {
8989
ul.innerHTML = '';
9090
values.forEach(value => {
9191
const li = document.createElement('li');
@@ -94,7 +94,7 @@ export default class JoinDocs extends MasterExamples {
9494
});
9595
});
9696
setTimeout(() => {
97-
// the limitation is, that the prop has to be set directly, in the future Join will may support push, splice, etc. on arrays
97+
// the limitation is, that the prop has to be set directly, in the future Subscribe will may support push, splice, etc. on arrays
9898
state.a = state.a.concat(['and hi!']);
9999
}, 5000);
100100
}

‎Docs/TitleDocs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class TitleDocs extends MasterDocs {
1010
'Proxify',
1111
`import { ProxifyHook } from './JavaScript/Classes/Helper/ProxifyHook.js';<br>
1212
import { InitBasic } from './JavaScript/Classes/Controller/InitBasic.js';<br><br>
13-
<span>// InitBasic includes the traps: Events, Html, Css, Join, LocalStorage, WebWorkers, Chain, Proxify</span><br>
13+
<span>// InitBasic includes the traps: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Chain, Proxify</span><br>
1414
const __ = new ProxifyHook(InitBasic).get();<br>
1515
__(document.getElementsByTagName('body')[0])<br>
1616
${this.t}.appendChild(__('h1'))<br>

‎Docs/TrapsDocs.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class TrapsDocs extends MasterDocs {
1010
'Traps:',
1111
`Assemble traps as you like and/or write your own trap. In general its important to note, that not all traps require
1212
the Proxify class. Have a look at the trap and make sure that it automatically includes Proxify or add Proxify at
13-
the center of your class assembling: <span>Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify())))))))</span>. Be carefull
13+
the center of your class assembling: <span>Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))</span>. Be carefull
1414
not to have a trap at the center of your assembling, which only requires Master, when further out traps require Proxify!
1515
Each trap extends the trap passed to it...<br><br>
1616
Get started by creating a hook and hand it your desired trap collection:`,
@@ -22,14 +22,14 @@ export default class TrapsDocs extends MasterDocs {
2222
import { Chain } from './JavaScript/Classes/Traps/Misc/Chain.js';<br>
2323
import { WebWorkers } from './JavaScript/Classes/Traps/Misc/WebWorkers.js';<br>
2424
import { LocalStorage } from './JavaScript/Classes/Traps/Data/LocalStorage.js';<br>
25-
import { Join } from './JavaScript/Classes/Traps/Data/Join.js';<br>
25+
import { Subscribe } from './JavaScript/Classes/Traps/Data/Subscribe.js';<br>
2626
import { Css } from './JavaScript/Classes/Traps/Dom/Css.js';<br>
2727
import { Html } from './JavaScript/Classes/Traps/Dom/Html.js';<br>
2828
import { Events } from './JavaScript/Classes/Traps/Dom/Events.js';<br><br>
29-
const inject = new ProxifyHook(Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify())))))))).get();`,
29+
const inject = new ProxifyHook(Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))).get();`,
3030
`Or simply use the preset collection called InitBasic:`,
3131
`import { ProxifyHook } from './JavaScript/Classes/Helper/ProxifyHook.js;<br><br>
32-
// Includes traps: Events, Html, Css, Join, LocalStorage, WebWorkers, Chain, Proxify<br>
32+
// Includes traps: Events, Html, Css, Subscribe, LocalStorage, WebWorkers, Chain, Proxify<br>
3333
import { InitBasic } from './JavaScript/Classes/Controller/InitBasic.js';<br><br>
3434
const inject = new ProxifyHook(InitBasic).get();`,
3535
`<span>This example page is completely driven by Proxify. You can see on how it works by looking at the source files of

‎JavaScript/Classes/Controller/InitAll.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Proxify } from '../Handler/Proxify.js';
33
import { Chain } from '../Traps/Misc/Chain.js';
44
import { WebWorkers } from '../Traps/Misc/WebWorkers.js';
55
import { LocalStorage } from '../Traps/Data/LocalStorage.js';
6-
import { Join } from '../Traps/Data/Join.js';
6+
import { Subscribe } from '../Traps/Data/Subscribe.js';
77
import { Css } from '../Traps/Dom/Css.js';
88
import { Html } from '../Traps/Dom/Html.js';
99
import { Events } from '../Traps/Dom/Events.js';
@@ -14,4 +14,4 @@ import { TryCatch } from '../Traps/Misc/TryCatch.js';
1414

1515
// Exports for Helper.js*************************************************
1616
// Handlers: Proxify and Proxify are required by most Traps, if possible keep them as is Proxify(Proxify()) at the root
17-
export class InitAll extends TryCatch(Debug(Types(Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify())))))))))) { }
17+
export class InitAll extends TryCatch(Debug(Types(Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify())))))))))) { }

‎JavaScript/Classes/Controller/InitBasic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { Proxify } from '../Handler/Proxify.js';
33
import { Chain } from '../Traps/Misc/Chain.js';
44
import { WebWorkers } from '../Traps/Misc/WebWorkers.js';
55
import { LocalStorage } from '../Traps/Data/LocalStorage.js';
6-
import { Join } from '../Traps/Data/Join.js';
6+
import { Subscribe } from '../Traps/Data/Subscribe.js';
77
import { Css } from '../Traps/Dom/Css.js';
88
import { Html } from '../Traps/Dom/Html.js';
99
import { Events } from '../Traps/Dom/Events.js';
1010

1111
// Exports for Helper.js*************************************************
1212
// Handlers: Master and Proxify are required by most Traps, if possible keep them as is Proxify() at the root
13-
export class InitBasic extends Events(Html(Css(Join(LocalStorage(WebWorkers(Chain(Proxify()))))))) { }
13+
export class InitBasic extends Events(Html(Css(Subscribe(LocalStorage(WebWorkers(Chain(Proxify()))))))) { }

‎JavaScript/Classes/Helper/Data/Join.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎JavaScript/Classes/Helper/Data/Subscribe.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class Subscribe {
2+
constructor() {
3+
this.subscribeMap = null;
4+
}
5+
}

‎JavaScript/Classes/Traps/Data/Join.js

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎JavaScript/Classes/Traps/Data/Subscribe.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Proxify } from '../../Handler/Proxify.js';
2+
import { Subscribe as SubscribeHelper } from '../../Helper/Data/Subscribe.js';
3+
4+
// !!!requires Classes->Helper.Proxify.js->convertTo!!!
5+
export const Subscribe = (Root = Proxify()) => class Subscribe extends Root {
6+
// !!!Don't overwrite this two. Required at Proxify.js
7+
constructor(proxyRef, targetRef) {
8+
super(proxyRef, targetRef);
9+
10+
// !!!Adds to the namespace!!!***********************************
11+
this.SubscribeHelper = new SubscribeHelper();
12+
13+
// Traps for get*************************************************
14+
const getTrapSubscribe = (target, prop, receiver) => {
15+
if (prop !== '$subscribe') return false;
16+
return (destination, key, localKey = 'all', func = null) => {
17+
if (!this.SubscribeHelper.subscribeMap) this.SubscribeHelper.subscribeMap = new Map();
18+
this.SubscribeHelper.subscribeMap.get(localKey) ? this.SubscribeHelper.subscribeMap.get(localKey).push([destination, key, func]) : this.SubscribeHelper.subscribeMap.set(localKey, [[destination, key, func]]);
19+
const result = func ? func(receiver[localKey] || receiver) : this.convertTo(this.targetRef, receiver[localKey]) || receiver;
20+
if (key in destination) destination[key] = result;
21+
return receiver;
22+
};
23+
}
24+
const getTrapunsubscribe = (target, prop, receiver) => {
25+
if (prop !== '$unsubscribe') return false;
26+
return (destination, key, localKey = 'all') => {
27+
let subscribeArr = this.SubscribeHelper.subscribeMap.get(localKey);
28+
if (subscribeArr) {
29+
this.SubscribeHelper.subscribeMap.set(localKey, (subscribeArr = subscribeArr.filter(e => e[1] !== key || this.convertTo(this.targetRef, e[0]) !== this.convertTo(this.targetRef, destination))));
30+
if (subscribeArr.length === 0) this.SubscribeHelper.subscribeMap.delete(localKey);
31+
if (!Array.from(this.SubscribeHelper.subscribeMap.entries()).length) this.SubscribeHelper.subscribeMap = null;
32+
}
33+
return receiver;
34+
};
35+
}
36+
37+
this.trap_get_none = this.trap_get_none.concat([getTrapSubscribe, getTrapunsubscribe]);
38+
}
39+
// Handler Class ext*********************************************
40+
set(target, prop, value, receiver) {
41+
if (this.SubscribeHelper.subscribeMap) {
42+
const subscribeArr = this.SubscribeHelper.subscribeMap.get(prop) || this.SubscribeHelper.subscribeMap.get('all');
43+
if (subscribeArr) subscribeArr.forEach(e => {
44+
const result = e[2] ? e[2](value) : this.convertTo(this.targetRef, value);
45+
if (e[1] in e[0]) e[0][e[1]] = result;
46+
});
47+
}
48+
return super.set(...arguments);
49+
}
50+
ownKeys(target) {
51+
// get possible keys
52+
return super.ownKeys(...arguments).concat(['$subscribe', '$unsubscribe']);
53+
}
54+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,6 @@ __(document.getElementsByTagName('body')[0]).$appendChildren(
5050

5151
The short snippet above merely gives a glimpse on what Proxify can do.
5252

53-
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.
53+
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.
5454

5555
- [Documentation, Examples & More Information](https://weedshaker.github.io/Proxify/)

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
import DebugDocs from './Docs/Examples/DebugDocs.js';
2222
import EventsDocs from './Docs/Examples/EventsDocs.js';
2323
import HtmlDocs from './Docs/Examples/HtmlDocs.js';
24-
import JoinDocs from './Docs/Examples/JoinDocs.js';
24+
import SubscribeDocs from './Docs/Examples/SubscribeDocs.js';
2525
import LocalStorageDocs from './Docs/Examples/LocalStorageDocs.js';
2626
import TryCatchDocs from './Docs/Examples/TryCatchDocs.js';
2727
import TypesDocs from './Docs/Examples/TypesDocs.js';
@@ -45,7 +45,7 @@
4545
new DebugDocs(this.makeGlobal),
4646
new EventsDocs(this.makeGlobal),
4747
new HtmlDocs(this.makeGlobal),
48-
new JoinDocs(this.makeGlobal),
48+
new SubscribeDocs(this.makeGlobal),
4949
new LocalStorageDocs(this.makeGlobal),
5050
new TryCatchDocs(this.makeGlobal),
5151
new TypesDocs(this.makeGlobal),

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"Events",
1818
"Html",
1919
"Css",
20-
"Join",
20+
"Subscribe",
2121
"LocalStorage",
2222
"WebWorkers",
2323
"Method",

0 commit comments

Comments
 (0)