Skip to content

Commit 85410db

Browse files
levizwannahlevizwannah
authored
Merge pull request #20 from levizwannah/develop
Added OJS Fragments
2 parents ad4c241 + a54c268 commit 85410db

File tree

5 files changed

+210
-71
lines changed

5 files changed

+210
-71
lines changed

‎OpenScript.js‎

Lines changed: 47 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -443,19 +443,25 @@ var OpenScript = {
443443

444444
/**
445445
* Add Event Listeners
446-
* @param {string} event
446+
* @param {string} events - space separated events
447447
* @param {function} listener - asynchronous function
448448
*/
449-
on(event, listener) {
450-
if (this.#logs[event]) {
451-
let emitted = this.#logs[event];
449+
on(events, listener) {
450+
events = events.split(/[\s\|]+/);
452451

453-
for (let i = 0; i < emitted.length; i++) {
454-
listener(...emitted[i].args);
452+
for(let event of events) {
453+
event.trim();
454+
if (this.#logs[event]) {
455+
let emitted = this.#logs[event];
456+
457+
for (let i = 0; i < emitted.length; i++) {
458+
listener(...emitted[i].args);
459+
}
455460
}
461+
462+
this.#emitter.on(event, listener);
456463
}
457464

458-
return this.#emitter.on(event, listener);
459465
}
460466

461467
/**
@@ -485,11 +491,21 @@ var OpenScript = {
485491
* @returns
486492
*/
487493
async emit(event, ...args) {
494+
let events = event.split(/\s+/g);
495+
496+
for(let i = 0; i < events.length; i++){
497+
let evt = events[i];
498+
if(evt.length < 1) continue;
499+
this.#emit(evt, ...args);
500+
}
501+
}
502+
503+
async #emit(event, ...args){
488504
const currentTime = () => new Date().getTime();
489505

490506
this.#logs[event] = this.#logs[event] ?? [];
491507
this.#logs[event].push({ timestamp: currentTime(), args: args });
492-
if (this.#shouldLog) console.log(`fired ${event}: args`, args);
508+
if (this.#shouldLog) console.log(`fired ${event}: args: `, args);
493509

494510
return this.#emitter.emit(event, ...args);
495511
}
@@ -1477,9 +1493,17 @@ var OpenScript = {
14771493
attr[`s-${s.id}`] = s.id;
14781494
});
14791495

1496+
let markup = this.render(...args, { withCAttr: true });
1497+
1498+
if(markup.tagName == 'FRAGMENT' && markup.childNodes.length > 0) {
1499+
1500+
let children = markup.childNodes;
1501+
1502+
return children.length > 1 ? children : children[0];
1503+
}
1504+
14801505
if (!this.visible) attr.style = "display: none;";
14811506

1482-
let markup = this.render(...args, { withCAttr: true });
14831507
let cAttributes = {};
14841508

14851509
if (markup instanceof HTMLElement) {
@@ -2270,7 +2294,7 @@ var OpenScript = {
22702294
} else {
22712295
root = this.dom.createElement(name);
22722296
}
2273-
2297+
22742298
let parseAttr = (obj) => {
22752299
for (let k in obj) {
22762300
let v = obj[k];
@@ -2332,11 +2356,18 @@ var OpenScript = {
23322356
val = (root.getAttribute(k) ?? "") + ` ${val}`;
23332357
}
23342358

2335-
root.setAttribute(k, val);
2359+
try{
2360+
root.setAttribute(k, val);
2361+
}
2362+
catch(e) {
2363+
console.error(`Attributes resulting in the error: `, obj);
2364+
throw Error(e);
2365+
}
23362366
}
23372367
};
23382368

23392369
const parse = (arg, isComp) => {
2370+
23402371
if (
23412372
arg instanceof DocumentFragment ||
23422373
arg instanceof HTMLElement
@@ -2365,7 +2396,7 @@ var OpenScript = {
23652396

23662397
if (arg instanceof OpenScript.State) continue;
23672398

2368-
if (Array.isArray(arg)) {
2399+
if (Array.isArray(arg) || arg instanceof HTMLCollection || arg instanceof NodeList) {
23692400
if (isComponent) continue;
23702401

23712402
arg.forEach((e) => {
@@ -2858,8 +2889,10 @@ var OpenScript = {
28582889
* @param {string} fileName script name without the .js.
28592890
*/
28602891
async req(fileName) {
2861-
let names = fileName.split(/\./);
2892+
if(!/^[\w\._-]+$/.test(fileName)) throw Error(`OJS-INVALID-FILE: '${fileName}' is an invalid file name`);
28622893

2894+
let names = fileName.split(/\./);
2895+
28632896
if (OpenScript.AutoLoader.history.has(`${this.dir}.${fileName}`))
28642897
return OpenScript.AutoLoader.history.get(
28652898
`${this.dir}.${fileName}`
@@ -2870,6 +2903,7 @@ var OpenScript = {
28702903
this.version
28712904
}`
28722905
);
2906+
28732907

28742908
let classes = await response.text();
28752909
let content = classes;

‎example/components/App.js‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,36 @@
1+
class Table extends OpenScript.Component {
2+
render(...args) {
3+
return h.fragment(
4+
h.table(
5+
{class: 'table'},
6+
h.tbody(
7+
each([1, 2, 3, 4, 5, 6], () => h.Row("Column")),
8+
),
9+
...args
10+
)
11+
)
12+
}
13+
}
14+
15+
class Row extends OpenScript.Component {
16+
render(text, ...args){
17+
return h.fragment(
18+
h.tr(
19+
each([1, 2, 3, 4], () => h.Column(text)),
20+
...args
21+
)
22+
)
23+
}
24+
}
25+
26+
class Column extends OpenScript.Component {
27+
render(text, ...args) {
28+
return h.fragment(
29+
h.td(text, ...args)
30+
);
31+
}
32+
}
33+
134
class App extends OpenScript.Component {
235

336
constructor(){
@@ -69,7 +102,9 @@ class App extends OpenScript.Component {
69102

70103
h.BlogList(context("blogCxt").blogs, context('blogCxt').counter, "I am a blog List. I re-render when counter changes"),
71104

72-
h.BlogList(context("blogCxt").blogs, { value: 0 }, 'I am the same blog list. I do not re-render when counter changes because I do not listen its changes.' )
105+
h.BlogList(context("blogCxt").blogs, { value: 0 }, 'I am the same blog list. I do not re-render when counter changes because I do not listen its changes.' ),
106+
107+
h.Table()
73108
),
74109

75110
...args

‎example/logic.js‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,58 @@
1-
ojs(async e => {
1+
ojs(async (e) => {
2+
fetchContext("rootCxt", "Root");
3+
putContext("blogCxt", "Blog.Context");
24

3-
fetchContext("rootCxt", "Root");
4-
putContext("blogCxt", "Blog.Context");
5+
req("App");
56

6-
req("App");
7+
const bc = context("blogCxt");
78

8-
const bc = context("blogCxt");
9+
let blog = [];
910

10-
let blog = [];
11-
12-
13-
for(let i = 5; i < 20; i++){
14-
blog.push({
15-
text: `Blog Heading ${i}`,
16-
subtitle: `Blog Subtitle ${i}`,
17-
description: `Blog Description for This blog with random number ${(new Date()).getTime()} and ID ${i}`,
18-
link: `#`,
19-
id: i
20-
})
21-
}
22-
23-
blog = state(blog);
24-
25-
bc.put("counter", state(0));
26-
bc.put("blogs", blog);
11+
for (let i = 5; i < 20; i++) {
12+
blog.push({
13+
text: `Blog Heading ${i}`,
14+
subtitle: `Blog Subtitle ${i}`,
15+
description: `Blog Description for This blog with random number ${new Date().getTime()} and ID ${i}`,
16+
link: `#`,
17+
id: i,
18+
});
19+
}
2720

28-
bc.number = state(0);
21+
blog = state(blog);
2922

30-
let rc = context("rootCxt");
31-
rc.domRoot = h.dom.querySelector("#root");
23+
bc.put("counter", state(0));
24+
bc.put("blogs", blog);
3225

33-
h.App( { parent: rc.domRoot })
26+
bc.number = state(0);
3427

35-
setInterval(() => {
36-
let blog = [];
28+
let rc = context("rootCxt");
29+
rc.domRoot = h.dom.querySelector("#root");
3730

31+
h.App({ parent: rc.domRoot });
3832

39-
for(let i = 5; i < 20; i++){
40-
let random = Math.floor(Math.random() * 100) ;
41-
42-
blog.push({
43-
text: `Blog Heading ${i * random}`,
44-
subtitle: `Blog Subtitle ${i * random}`,
45-
description: `Blog Description for This blog with random number ${(new Date()).getTime()} and ID ${i * random}`,
46-
link: `#`,
47-
id: i * random
48-
})
49-
}
50-
51-
// bc.blogs.value = blog;
52-
bc.counter.value++;
33+
setInterval(() => {
34+
let blog = [];
5335

54-
}, 1000);
36+
for (let i = 5; i < 20; i++) {
37+
let random = Math.floor(Math.random() * 100);
38+
39+
blog.push({
40+
text: `Blog Heading ${i * random}`,
41+
subtitle: `Blog Subtitle ${i * random}`,
42+
description: `Blog Description for This blog with random number ${new Date().getTime()} and ID ${
43+
i * random
44+
}`,
45+
link: `#`,
46+
id: i * random,
47+
});
48+
}
5549

56-
setInterval(() => {
57-
bc.number.value++;
58-
broker.send('numberChanged')
59-
}, 500);
50+
// bc.blogs.value = blog;
51+
bc.counter.value++;
52+
}, 1000);
6053

54+
setInterval(() => {
55+
bc.number.value++;
56+
broker.send("numberChanged");
57+
}, 1000);
6158
});
62-

‎example/ojs-config.js‎

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,29 @@
33
|----------------------------------
44
*/
55

6-
/**----------------------------------
6+
/*----------------------------------
77
*
88
* Set the default route path here
99
* ----------------------------------
1010
*/
11-
route.basePath('example'); // === '/'
11+
route.basePath(''); // === '/'
12+
13+
/*-----------------------------------
14+
| Set the global runtime prefix.
15+
| This prefix will be appended
16+
| to every path before resolution.
17+
| So ensure when defining routes,
18+
| you have it as the main prefix.
19+
|------------------------------------
20+
*/
21+
route.runtimePrefix(''); // === ''
1222

1323
/*-----------------------------------
1424
| set the directories in which we
1525
| can find the context files
1626
|-----------------------------------
1727
*/
18-
ContextProvider.directory = route.baseUrl('contexts');
28+
ContextProvider.directory = route.baseUrl('example/contexts');
1929

2030
/*-----------------------------------
2131
| set the version number of the
@@ -32,7 +42,7 @@ ContextProvider.version = '1.0.0';
3242
| from that directory
3343
|-----------------------------------
3444
*/
35-
MediatorManager.directory = route.baseUrl('mediators');
45+
MediatorManager.directory = route.baseUrl('example/mediators');
3646

3747
/*-----------------------------------
3848
| Set the version number of the
@@ -48,7 +58,7 @@ MediatorManager.version = '1.0.0';
4858
| directory for the loader
4959
|-----------------------------------
5060
*/
51-
loader.dir = route.baseUrl('components');
61+
loader.dir = route.baseUrl('example/components');
5262

5363
/*-----------------------------------
5464
| set the version number of the
@@ -65,7 +75,7 @@ loader.version = '1.0.0';
6575
|-----------------------------------
6676
*/
6777

68-
autoload.dir = route.baseUrl('classes');
78+
autoload.dir = route.baseUrl('example/classes');
6979

7080
/*-----------------------------------
7181
| set the version number of the
@@ -75,6 +85,25 @@ autoload.dir = route.baseUrl('classes');
7585
*/
7686
autoload.version = '1.0.0';
7787

88+
89+
/*---------------------------------
90+
| Get the initial body style so
91+
| so that when routes change,
92+
| we can reset the body style.
93+
| Sometimes, the body element's
94+
| style is affected by elements
95+
| That are no longer on the DOM.
96+
| example, bootstrap offcanvas.
97+
| In these cases, you need to
98+
| reset the body style when
99+
| the routeChanged event is fired
100+
| by the router. So you can listen
101+
| to it and use this to reset
102+
| the style.
103+
|----------------------------------
104+
*/
105+
var __bodyStyle = document.body.getAttribute("style");
106+
78107
/*--------------------------------
79108
| Set the logs clearing interval
80109
| for the broker to remove stale
@@ -97,4 +126,12 @@ broker.TIME_TO_GC = 10000; // 10 secs
97126
| collector for the broker
98127
|-------------------------------------------
99128
*/
100-
broker.removeStaleEvents(); // broker garbage collection started
129+
broker.removeStaleEvents(); // broker garbage collection started
130+
131+
/*------------------------------------------
132+
| When this is set to true, the broker
133+
| will display events and their payloads
134+
| in the console when they are fired
135+
|------------------------------------------
136+
*/
137+
broker.withLogs(false);

0 commit comments

Comments
 (0)