lightview 1.6.4-b → 1.6.5-b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/components/chart.html +6 -5
- package/components/gauge.html +1 -1
- package/examples/chart.html +11 -9
- package/examples/medium/remote.html +59 -0
- package/examples/xor.html +1 -1
- package/lightview.js +162 -160
- package/package.json +1 -1
- package/test/basic.html +1 -1
- package/types.js +21 -21
package/README.md
CHANGED
package/components/chart.html
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
});
|
|
24
24
|
let chart,
|
|
25
25
|
datatable,
|
|
26
|
-
options;
|
|
26
|
+
options = {};
|
|
27
27
|
self.variables({type: "string", title: "string", style: "string"}, {observed});
|
|
28
28
|
if(style) target.setAttribute("style",style);
|
|
29
29
|
self.addRow = (row) => {
|
|
@@ -36,6 +36,9 @@
|
|
|
36
36
|
chart.draw(datatable, options);
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
|
+
self.setOptions = (newOptions) => {
|
|
40
|
+
Object.assign(options,newOptions);
|
|
41
|
+
};
|
|
39
42
|
self.init = () => {
|
|
40
43
|
const node = self.firstChild,
|
|
41
44
|
callback = (textNode, oldValue, newValue) => {
|
|
@@ -48,9 +51,7 @@
|
|
|
48
51
|
target.innerText = e + newValue;
|
|
49
52
|
}
|
|
50
53
|
};
|
|
51
|
-
options =
|
|
52
|
-
title: title
|
|
53
|
-
};
|
|
54
|
+
if(!options.title && title) options.title = title;
|
|
54
55
|
chart = new google.visualization[type](target);
|
|
55
56
|
node.characterDataMutationCallback = callback;
|
|
56
57
|
callback(node, node.textContent, node.textContent);
|
|
@@ -67,7 +68,7 @@
|
|
|
67
68
|
resizeObserver.observe(target);
|
|
68
69
|
self.removeAttribute("hidden");
|
|
69
70
|
};
|
|
70
|
-
addEventListener("connected", ({target}) => {
|
|
71
|
+
self.addEventListener("connected", ({target}) => {
|
|
71
72
|
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
72
73
|
google.charts.setOnLoadCallback(self.init);
|
|
73
74
|
});
|
package/components/gauge.html
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
resizeObserver.observe(target);
|
|
49
49
|
self.removeAttribute("hidden");
|
|
50
50
|
};
|
|
51
|
-
addEventListener("connected", ({target}) => {
|
|
51
|
+
self.addEventListener("connected", ({target}) => {
|
|
52
52
|
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
53
53
|
google.charts.setOnLoadCallback(self.init);
|
|
54
54
|
});
|
package/examples/chart.html
CHANGED
|
@@ -50,15 +50,17 @@
|
|
|
50
50
|
</l-chart>
|
|
51
51
|
<script>
|
|
52
52
|
const gauges = document.getElementById("myGauges");
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
gauges.addEventListener("connected",() => {
|
|
54
|
+
setInterval(function() {
|
|
55
|
+
gauges.setValue(0, 1, 40 + Math.round(60 * Math.random()));
|
|
56
|
+
}, 6000);
|
|
57
|
+
setInterval(function() {
|
|
58
|
+
gauges.setValue(1, 1, 40 + Math.round(60 * Math.random()));
|
|
59
|
+
}, 5000);
|
|
60
|
+
setInterval(function() {
|
|
61
|
+
gauges.setValue(2, 1, 60 + Math.round(40 * Math.random()));
|
|
62
|
+
}, 7500);
|
|
63
|
+
})
|
|
62
64
|
</script>
|
|
63
65
|
</body>
|
|
64
66
|
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Examples:Medium:Remote</title>
|
|
4
|
+
<!--
|
|
5
|
+
for convenience, import the chart component from the Lightview component library
|
|
6
|
+
alias it to r-chart rather than use the default l-chart
|
|
7
|
+
we could use any gauge component that exposes methods to update its view
|
|
8
|
+
-->
|
|
9
|
+
<link href="../../components/chart.html" rel="module" crossorigin="use-credentials" as="r-chart">
|
|
10
|
+
<!--
|
|
11
|
+
load the lightview library, about 7K
|
|
12
|
+
use the body of this file to create a custom element to replace itself
|
|
13
|
+
-->
|
|
14
|
+
<script src="../../lightview.js?as=x-body"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<!--
|
|
18
|
+
layout the dashboad using the chart component r-chart
|
|
19
|
+
-->
|
|
20
|
+
<div style="width:100%;text-align:center">
|
|
21
|
+
<!--
|
|
22
|
+
set the initial value 0 for all components in a relaxed JSON5 configuration data block
|
|
23
|
+
-->
|
|
24
|
+
<r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status">
|
|
25
|
+
[
|
|
26
|
+
['Label', 'Value'], // gauge will always take two columns, Label and Value
|
|
27
|
+
['Memory', 0],
|
|
28
|
+
['CPU', 0],
|
|
29
|
+
['Network', 0]
|
|
30
|
+
]
|
|
31
|
+
</r-chart>
|
|
32
|
+
</div>
|
|
33
|
+
<script type="lightview/module">
|
|
34
|
+
// use local, normal variables for as much as possible
|
|
35
|
+
const {remote} = await import("../../types.js"), // load the functional type 'remote`
|
|
36
|
+
sensorIndex = { // map sensor names to indexes in the dashboard data
|
|
37
|
+
memory:0,
|
|
38
|
+
cpu:1,
|
|
39
|
+
network:2
|
|
40
|
+
},
|
|
41
|
+
dashboard = document.body.getElementById("dashboard"),
|
|
42
|
+
path = "https://lightview.dev/sensors/"; // replace base path for your own implementation
|
|
43
|
+
// create remote reactive variables for sensors with differing refresh rates (ttl in milliseconds)
|
|
44
|
+
self.variables({memory:"number"},{remote:remote({ttl:5000,path})});
|
|
45
|
+
self.variables({cpu:"number"},{remote:remote({ttl:2500,path})});
|
|
46
|
+
self.variables({network:"number"},{remote:remote({ttl:1500,path})});
|
|
47
|
+
dashboard.addEventListener("connected",() => {
|
|
48
|
+
dashboard.setOptions({ // when dashboard component has finished initializing, set more options
|
|
49
|
+
redFrom: 90, redTo: 100,
|
|
50
|
+
yellowFrom:75, yellowTo: 90,
|
|
51
|
+
minorTicks: 5});
|
|
52
|
+
addEventListener("change",({variableName,value}) => { // execute the magic with a localized eventListener
|
|
53
|
+
const index = sensorIndex[variableName];
|
|
54
|
+
dashboard.setValue(index, 1, value);
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
package/examples/xor.html
CHANGED
package/lightview.js
CHANGED
|
@@ -447,13 +447,13 @@ const {observe} = (() => {
|
|
|
447
447
|
eventlisteners = {};
|
|
448
448
|
// needs to be local to the instance
|
|
449
449
|
Object.defineProperty(this,"changeListener",{value:
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
450
|
+
function({variableName, value}) {
|
|
451
|
+
if (currentComponent.changeListener.targets.has(variableName)) {
|
|
452
|
+
value = typeof (value) === "string" || !value ? value : JSON.stringify(value);
|
|
453
|
+
if (value == null) removeComponentAttribute(currentComponent, variableName);
|
|
454
|
+
else setComponentAttribute(currentComponent, variableName, value);
|
|
455
|
+
}
|
|
456
|
+
}});
|
|
457
457
|
this.vars = {
|
|
458
458
|
...reserved,
|
|
459
459
|
addEventListener: {
|
|
@@ -508,23 +508,25 @@ const {observe} = (() => {
|
|
|
508
508
|
instances.delete(this);
|
|
509
509
|
}
|
|
510
510
|
|
|
511
|
-
connectedCallback() {
|
|
511
|
+
async connectedCallback() {
|
|
512
512
|
const ctx = this,
|
|
513
513
|
shadow = ctx.shadowRoot;
|
|
514
514
|
for (const attr of this.defaultAttributes) this.hasAttribute(attr.name) || this.setAttribute(attr.name, attr.value);
|
|
515
515
|
const scripts = shadow.querySelectorAll("script"),
|
|
516
|
-
promises = []
|
|
517
|
-
|
|
516
|
+
promises = [];
|
|
517
|
+
// scriptpromises = [];
|
|
518
518
|
for (const script of [...scripts]) {
|
|
519
519
|
if (script.attributes.src?.value?.includes("/lightview.js")) continue;
|
|
520
520
|
const currentScript = document.createElement("script");
|
|
521
521
|
if (script.className !== "lightview" && !((script.attributes.type?.value || "").includes("lightview/"))) {
|
|
522
522
|
for (const attr of script.attributes) currentScript.setAttribute(attr.name,attr.value);
|
|
523
|
-
scriptpromises.push(new Promise((resolve) => {
|
|
524
|
-
currentScript.onload = () => resolve();
|
|
525
|
-
}))
|
|
526
523
|
shadow.appendChild(currentScript);
|
|
527
|
-
|
|
524
|
+
await new Promise((resolve) => {
|
|
525
|
+
currentScript.onload = () => {
|
|
526
|
+
currentScript.remove();
|
|
527
|
+
resolve();
|
|
528
|
+
}
|
|
529
|
+
})
|
|
528
530
|
continue;
|
|
529
531
|
};
|
|
530
532
|
const scriptid = Math.random() + "";
|
|
@@ -534,166 +536,166 @@ const {observe} = (() => {
|
|
|
534
536
|
currentScript.classList.remove("lightview");
|
|
535
537
|
const text = script.innerHTML.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1").replaceAll(/\r?\n/g, "");
|
|
536
538
|
currentScript.innerHTML = `Object.getPrototypeOf(async function(){}).constructor('if(window["${scriptid}"]?.ctx) { const ctx = window["${scriptid}"].ctx; { with(ctx) { ${text}; } } }')().then(() => window["${scriptid}"]()); `;
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
// wait for all regular scripts to load first
|
|
547
|
-
Promise.all(scriptpromises).then(() => shadow.appendChild(currentScript));
|
|
548
|
-
}));
|
|
539
|
+
await new Promise((resolve) => {
|
|
540
|
+
window[scriptid] = () => {
|
|
541
|
+
delete window[scriptid];
|
|
542
|
+
currentScript.remove();
|
|
543
|
+
resolve();
|
|
544
|
+
}
|
|
545
|
+
window[scriptid].ctx = ctx.varsProxy;
|
|
546
|
+
shadow.appendChild(currentScript);
|
|
547
|
+
})
|
|
549
548
|
}
|
|
550
|
-
Promise.all(promises).then(() => {
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
549
|
+
// Promise.all(promises).then(() => {
|
|
550
|
+
const nodes = getNodes(ctx);
|
|
551
|
+
nodes.forEach((node) => {
|
|
552
|
+
if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
|
|
553
|
+
observe(() => resolveNodeOrText(node, this));
|
|
554
|
+
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
555
|
+
// resolve the value before all else;
|
|
556
|
+
const attr = node.attributes.value,
|
|
557
|
+
template = attr?.template;
|
|
558
|
+
if (attr && template) {
|
|
559
|
+
let value = resolveNodeOrText(attr, this),
|
|
560
|
+
eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
|
|
561
|
+
const template = attr.template;
|
|
562
|
+
if (template) {
|
|
563
|
+
if (/\$\{[a-zA-z_]+\}/g.test(template)) {
|
|
564
|
+
const name = template.substring(2, template.length - 1);
|
|
565
|
+
if(!this.vars[name] || this.vars[name].reactive) {
|
|
566
|
+
bindInput(node, name, this, value);
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
observe(() => {
|
|
570
|
+
const value = resolveNodeOrText(template, ctx);
|
|
571
|
+
if(value!==undefined) {
|
|
572
|
+
if (eltype === "checkbox") {
|
|
573
|
+
if (coerce(value, "boolean") === true) {
|
|
574
|
+
node.setAttribute("checked", "");
|
|
575
|
+
node.checked = true;
|
|
576
|
+
} else {
|
|
577
|
+
node.removeAttribute("checked");
|
|
578
|
+
node.checked = false;
|
|
568
579
|
}
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
if (
|
|
574
|
-
if (
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
} else {
|
|
578
|
-
node.removeAttribute("checked");
|
|
579
|
-
node.checked = false;
|
|
580
|
+
} else if (node.tagName === "SELECT") {
|
|
581
|
+
let values = [value];
|
|
582
|
+
if (node.hasAttribute("multiple")) values = coerce(value, Array);
|
|
583
|
+
[...node.querySelectorAll("option")].forEach(async (option) => {
|
|
584
|
+
if (option.hasAttribute("value")) {
|
|
585
|
+
if (values.includes(resolveNodeOrText(option.attributes.value, ctx))) {
|
|
586
|
+
option.setAttribute("selected", "");
|
|
587
|
+
option.selected = true;
|
|
580
588
|
}
|
|
581
|
-
} else if (
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
[...node.querySelectorAll("option")].forEach(async (option) => {
|
|
585
|
-
if (option.hasAttribute("value")) {
|
|
586
|
-
if (values.includes(resolveNodeOrText(option.attributes.value, ctx))) {
|
|
587
|
-
option.setAttribute("selected", "");
|
|
588
|
-
option.selected = true;
|
|
589
|
-
}
|
|
590
|
-
} else if (values.includes(resolveNodeOrText(option.innerText, ctx))) {
|
|
591
|
-
option.setAttribute("selected", "");
|
|
592
|
-
option.selected = true;
|
|
593
|
-
}
|
|
594
|
-
})
|
|
595
|
-
} else if (eltype!=="radio") {
|
|
596
|
-
attr.value = value;
|
|
589
|
+
} else if (values.includes(resolveNodeOrText(option.innerText, ctx))) {
|
|
590
|
+
option.setAttribute("selected", "");
|
|
591
|
+
option.selected = true;
|
|
597
592
|
}
|
|
598
|
-
}
|
|
599
|
-
})
|
|
593
|
+
})
|
|
594
|
+
} else if (eltype!=="radio") {
|
|
595
|
+
attr.value = value;
|
|
596
|
+
}
|
|
600
597
|
}
|
|
598
|
+
});
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
[...node.attributes].forEach(async (attr) => {
|
|
602
|
+
if (attr.name === "value" && attr.template) return;
|
|
603
|
+
const {name, value} = attr,
|
|
604
|
+
vname = node.attributes.name?.value;
|
|
605
|
+
if (name === "type" && value=="radio" && vname) {
|
|
606
|
+
bindInput(node, vname, this);
|
|
607
|
+
observe(() => {
|
|
608
|
+
const varvalue = Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
|
|
609
|
+
if (node.attributes.value.value == varvalue) {
|
|
610
|
+
node.setAttribute("checked", "");
|
|
611
|
+
node.checked = true;
|
|
612
|
+
} else {
|
|
613
|
+
node.removeAttribute("checked");
|
|
614
|
+
node.checked = false;
|
|
615
|
+
}
|
|
616
|
+
});
|
|
601
617
|
}
|
|
602
|
-
[...node.attributes].forEach(async (attr) => {
|
|
603
|
-
if (attr.name === "value" && attr.template) return;
|
|
604
|
-
const {name, value} = attr,
|
|
605
|
-
vname = node.attributes.name?.value;
|
|
606
|
-
if (name === "type" && value=="radio" && vname) {
|
|
607
|
-
bindInput(node, vname, this);
|
|
608
|
-
observe(() => {
|
|
609
|
-
const varvalue = Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
|
|
610
|
-
if (node.attributes.value.value == varvalue) {
|
|
611
|
-
node.setAttribute("checked", "");
|
|
612
|
-
node.checked = true;
|
|
613
|
-
} else {
|
|
614
|
-
node.removeAttribute("checked");
|
|
615
|
-
node.checked = false;
|
|
616
|
-
}
|
|
617
|
-
});
|
|
618
|
-
}
|
|
619
618
|
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
}
|
|
619
|
+
const [type, ...params] = name.split(":");
|
|
620
|
+
if (type === "") { // name is :something
|
|
621
|
+
observe(() => {
|
|
622
|
+
const value = attr.value;
|
|
623
|
+
if (params[0]) {
|
|
624
|
+
if (value === "true") node.setAttribute(params[0], "")
|
|
625
|
+
else node.removeAttribute(params[0]);
|
|
626
|
+
} else {
|
|
627
|
+
const elvalue = node.attributes.value ? resolveNodeOrText(node.attributes.value, ctx) : null,
|
|
628
|
+
eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
|
|
629
|
+
if (eltype === "checkbox" || node.tagName === "OPTION") {
|
|
630
|
+
if (elvalue === "true") node.setAttribute("checked", "")
|
|
631
|
+
else node.removeAttribute("checked");
|
|
634
632
|
}
|
|
635
|
-
}
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
}
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
}
|
|
673
|
-
while (parsed.body.firstChild) {
|
|
674
|
-
if (after) node.parentElement.insertBefore(parsed.body.firstChild, node);
|
|
675
|
-
else node.appendChild(parsed.body.firstChild);
|
|
633
|
+
}
|
|
634
|
+
})
|
|
635
|
+
} else if (type === "l-on") {
|
|
636
|
+
let listener;
|
|
637
|
+
observe(() => {
|
|
638
|
+
const value = resolveNodeOrText(attr, this);
|
|
639
|
+
if (listener) node.removeEventListener(params[0], listener);
|
|
640
|
+
listener = this[value] || window[value] || Function(value);
|
|
641
|
+
addListener(node, params[0], listener);
|
|
642
|
+
})
|
|
643
|
+
} else if (type === "l-if") {
|
|
644
|
+
observe(() => {
|
|
645
|
+
const value = resolveNodeOrText(attr, this);
|
|
646
|
+
node.style.setProperty("display", value === "true" ? "revert" : "none");
|
|
647
|
+
})
|
|
648
|
+
} else if (type === "l-for") {
|
|
649
|
+
node.template ||= node.innerHTML;
|
|
650
|
+
observe(() => {
|
|
651
|
+
const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
|
|
652
|
+
value = resolveNodeOrText(attr, this),
|
|
653
|
+
coerced = coerce(value, what === "each" ? Array : "object"),
|
|
654
|
+
target = what === "each" ? coerced : Object[what](coerced),
|
|
655
|
+
html = target.reduce( (html, item, i, target) => {
|
|
656
|
+
return html += Function("vars", "context", "with(vars) { with(context) { return `" + node.template + "` }}")(
|
|
657
|
+
ctx.varsProxy,
|
|
658
|
+
{
|
|
659
|
+
[vname]: item,
|
|
660
|
+
[index]: i,
|
|
661
|
+
[array]: target
|
|
662
|
+
})
|
|
663
|
+
}, ""),
|
|
664
|
+
parsed = parser.parseFromString(html, "text/html");
|
|
665
|
+
if (!window.lightviewDebug) {
|
|
666
|
+
if (after) {
|
|
667
|
+
node.style.setProperty("display", "none")
|
|
668
|
+
} else {
|
|
669
|
+
while (node.lastElementChild) node.lastElementChild.remove();
|
|
676
670
|
}
|
|
677
|
-
}
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
}
|
|
682
|
-
}
|
|
683
|
-
})
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
671
|
+
}
|
|
672
|
+
while (parsed.body.firstChild) {
|
|
673
|
+
if (after) node.parentElement.insertBefore(parsed.body.firstChild, node);
|
|
674
|
+
else node.appendChild(parsed.body.firstChild);
|
|
675
|
+
}
|
|
676
|
+
})
|
|
677
|
+
} else if(attr.template) {
|
|
678
|
+
observe(() => {
|
|
679
|
+
resolveNodeOrText(attr, this);
|
|
680
|
+
})
|
|
681
|
+
}
|
|
682
|
+
})
|
|
683
|
+
}
|
|
690
684
|
})
|
|
685
|
+
shadow.normalize();
|
|
686
|
+
observer ||= createObserver(ctx, framed);
|
|
687
|
+
observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
|
|
688
|
+
//ctx.vars.postEvent.value("connected");
|
|
689
|
+
this.dispatchEvent(new Event("connected"));
|
|
690
|
+
// })
|
|
691
691
|
}
|
|
692
692
|
adoptedCallback(callback) {
|
|
693
|
-
this.
|
|
693
|
+
this.dispatchEvent(new Event("adopted"));
|
|
694
|
+
//this.vars.postEvent.value("adopted");
|
|
694
695
|
}
|
|
695
696
|
disconnectedCallback() {
|
|
696
|
-
this.
|
|
697
|
+
this.dispatchEvent(new Event("disconnected"));
|
|
698
|
+
//this.vars.postEvent.value("disconnected");
|
|
697
699
|
}
|
|
698
700
|
get observedAttributes() {
|
|
699
701
|
return CustomElement.observedAttributes;
|
package/package.json
CHANGED
package/test/basic.html
CHANGED
package/types.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
const toJSON = (value) => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
if([-Infinity,Infinity].includes(value)) return `@${value}`;
|
|
3
|
+
if(typeof(value)==="number" && isNaN(value)) return "@NaN";
|
|
4
|
+
if(value && typeof(value)==="object") {
|
|
5
|
+
return Object.entries(value)
|
|
6
|
+
.reduce((json,[key,value]) => {
|
|
7
|
+
if(value && typeof(value)==="object" && value.toJSON) value = value.toJSON();
|
|
8
|
+
json[key] = toJSON(value);
|
|
9
|
+
return json;
|
|
10
|
+
},Array.isArray(value) ? [] : {})
|
|
11
|
+
}
|
|
12
|
+
return value;
|
|
13
|
+
};
|
|
14
14
|
function reviver(property,value) {
|
|
15
15
|
if(value==="@-Infinity") return -Infinity;
|
|
16
16
|
if(value==="@Infinity") return Infinity;
|
|
17
17
|
if(value==="@NaN") return NaN;
|
|
18
|
-
|
|
18
|
+
return value;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
function ValidityState(options) {
|
|
@@ -438,9 +438,9 @@ const handleRemote = async ({variable, config, reactive, component},doput) => {
|
|
|
438
438
|
: get(href,variable));
|
|
439
439
|
if(variable.value===undefined) variable.value = value; // do not await here
|
|
440
440
|
} else if (remote && type === "object") {
|
|
441
|
-
let href;
|
|
442
441
|
if(!config.path) config.path = `./${variable.name}`;
|
|
443
|
-
if(config.path)
|
|
442
|
+
if(config.path.endsWith("/")) config.path = `${config.path}${variable.name}`;
|
|
443
|
+
const href = new URL(config.path,window.location.href).href;
|
|
444
444
|
if(!config.get || !config.put) {
|
|
445
445
|
if(!href) throw new Error(`A remote path is required if no put function is provided for remote data`)
|
|
446
446
|
if(!config.get) config.get = get;
|
|
@@ -459,12 +459,12 @@ const handleRemote = async ({variable, config, reactive, component},doput) => {
|
|
|
459
459
|
}
|
|
460
460
|
if(value) {
|
|
461
461
|
const json = await value;
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
462
|
+
//value.then((json) => {
|
|
463
|
+
if (json && typeof (json) === "object" && reactive) {
|
|
464
|
+
variable.value = remoteProxy({json, variable,config, reactive, component});
|
|
465
|
+
} else {
|
|
466
|
+
component.setVariableValue(variable.name,json);
|
|
467
|
+
}
|
|
468
468
|
//})
|
|
469
469
|
}
|
|
470
470
|
}
|