lightview 1.4.7-b → 1.5.1-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 +76 -0
- package/components/gauge.html +57 -0
- package/examples/chart.html +64 -0
- package/{counter.html → examples/counter.html} +1 -2
- package/{directives.html → examples/directives.html} +3 -3
- package/{remote.html → examples/foreign.html} +2 -2
- package/{remoteform.html → examples/forgeinform.html} +4 -4
- package/examples/form.html +59 -0
- package/examples/gauge.html +16 -0
- package/{message.html → examples/message.html} +1 -1
- package/{nested.html → examples/nested.html} +1 -1
- package/examples/remote-server.js +51 -0
- package/examples/remote.html +30 -0
- package/examples/remote.json +1 -0
- package/{scratch.html → examples/scratch.html} +1 -1
- package/examples/template.html +33 -0
- package/{top.html → examples/top.html} +1 -1
- package/examples/types.html +93 -0
- package/{xor.html → examples/xor.html} +4 -4
- package/lightview.js +371 -207
- package/package.json +36 -36
- package/test/basic.html +30 -21
- package/test/basic.test.mjs +98 -21
- package/types.js +312 -0
package/README.md
CHANGED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Chart</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body hidden>
|
|
7
|
+
<div id="target"></div>
|
|
8
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
10
|
+
<script type="lightview/module">
|
|
11
|
+
const target = self.getElementById("target"),
|
|
12
|
+
resizeObserver = new ResizeObserver(entries => {
|
|
13
|
+
for (let entry of entries) {
|
|
14
|
+
if(entry.contentBoxSize) {
|
|
15
|
+
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
|
16
|
+
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
|
17
|
+
options.width = contentBoxSize.inlineSize;
|
|
18
|
+
} else {
|
|
19
|
+
options.width = entry.contentRect.width;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
chart.draw(datatable, options);
|
|
23
|
+
});
|
|
24
|
+
let chart,
|
|
25
|
+
datatable,
|
|
26
|
+
options;
|
|
27
|
+
self.variables({type: "string", title: "string", style: "string"}, {observed});
|
|
28
|
+
if(style) target.setAttribute("style",style);
|
|
29
|
+
self.addRow = (row) => {
|
|
30
|
+
datatable.addRows([row]);
|
|
31
|
+
chart.draw(datatable, options);
|
|
32
|
+
};
|
|
33
|
+
self.setValue = (row,col,value) => {
|
|
34
|
+
if(datatable) {
|
|
35
|
+
datatable.setValue(row,col,value);
|
|
36
|
+
chart.draw(datatable, options);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
self.init = () => {
|
|
40
|
+
const node = self.firstChild,
|
|
41
|
+
callback = (textNode, oldValue, newValue) => {
|
|
42
|
+
datatable = new google.visualization.DataTable();
|
|
43
|
+
try {
|
|
44
|
+
const table = JSON5.parse(newValue.trim());
|
|
45
|
+
datatable = google.visualization.arrayToDataTable(table);
|
|
46
|
+
chart.draw(datatable, options);
|
|
47
|
+
} catch (e) {
|
|
48
|
+
target.innerText = e + newValue;
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
options = {
|
|
52
|
+
title: title
|
|
53
|
+
};
|
|
54
|
+
chart = new google.visualization[type](target);
|
|
55
|
+
node.characterDataMutationCallback = callback;
|
|
56
|
+
callback(node, node.textContent, node.textContent);
|
|
57
|
+
addEventListener("change",({target,value}) => {
|
|
58
|
+
if (target === "type") {
|
|
59
|
+
chart = new google.visualization[type](target);
|
|
60
|
+
} else if (target === "title") {
|
|
61
|
+
options.title = value;
|
|
62
|
+
} else if(target === "style") {
|
|
63
|
+
target.setAttribute("style",value);
|
|
64
|
+
}
|
|
65
|
+
chart.draw(datatable, options);
|
|
66
|
+
});
|
|
67
|
+
resizeObserver.observe(target);
|
|
68
|
+
self.removeAttribute("hidden");
|
|
69
|
+
};
|
|
70
|
+
addEventListener("connected", ({target}) => {
|
|
71
|
+
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
72
|
+
google.charts.setOnLoadCallback(self.init);
|
|
73
|
+
});
|
|
74
|
+
</script>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Gauge</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body hidden>
|
|
7
|
+
<div id="target"></div>
|
|
8
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
|
+
<script type="lightview/module">
|
|
10
|
+
const target = self.getElementById("target"),
|
|
11
|
+
resizeObserver = new ResizeObserver(entries => {
|
|
12
|
+
for (let entry of entries) {
|
|
13
|
+
if(entry.contentBoxSize) {
|
|
14
|
+
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
|
15
|
+
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
|
16
|
+
options.width = contentBoxSize.inlineSize;
|
|
17
|
+
} else {
|
|
18
|
+
options.width = entry.contentRect.width;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
chart.draw(datatable, options);
|
|
22
|
+
});
|
|
23
|
+
let chart,
|
|
24
|
+
datatable,
|
|
25
|
+
options;
|
|
26
|
+
self.variables({label: "string", value:"number", style: "string"}, {observed});
|
|
27
|
+
if(style) target.setAttribute("style",style);
|
|
28
|
+
self.setValue = (newValue) => {
|
|
29
|
+
if(datatable) {
|
|
30
|
+
datatable.setValue(0,1,newValue);
|
|
31
|
+
chart.draw(datatable, options);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
self.init = () => {
|
|
35
|
+
options = { };
|
|
36
|
+
chart = new google.visualization.Gauge(target);
|
|
37
|
+
datatable = google.visualization.arrayToDataTable([["Label","Value"],[label,value]]);
|
|
38
|
+
addEventListener("change",({target,value}) => {
|
|
39
|
+
if (target === "label") {
|
|
40
|
+
datatable.setValue(0,0,value);
|
|
41
|
+
} else if(target ==="value") {
|
|
42
|
+
self.setValue(value);
|
|
43
|
+
} else if(target === "style") {
|
|
44
|
+
target.setAttribute("style",value);
|
|
45
|
+
}
|
|
46
|
+
chart.draw(datatable, options);
|
|
47
|
+
});
|
|
48
|
+
resizeObserver.observe(target);
|
|
49
|
+
self.removeAttribute("hidden");
|
|
50
|
+
};
|
|
51
|
+
addEventListener("connected", ({target}) => {
|
|
52
|
+
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
53
|
+
google.charts.setOnLoadCallback(self.init);
|
|
54
|
+
});
|
|
55
|
+
</script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Chart</title>
|
|
4
|
+
<link href="../components/chart.html" rel="module">
|
|
5
|
+
<script src="../lightview.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<l-chart id="myPieChart" style="max-width:750px" type="PieChart" title="How Much Pizza I Ate Last Night">
|
|
9
|
+
// Chart will resize automatically to a max-width of 750px and repaint on type and title changes.
|
|
10
|
+
// The component DOM element also exposes a method `el.addRow(row:array)` to dynamically add data
|
|
11
|
+
// And, `el.init()` will re-render from the initial data and current attributes.
|
|
12
|
+
[
|
|
13
|
+
["Topping","Slices"], // column headings
|
|
14
|
+
["Mushrooms", 3], // remaining rows are data
|
|
15
|
+
["Onions", 1],
|
|
16
|
+
["Olives", 1],
|
|
17
|
+
["Zucchini", 1],
|
|
18
|
+
["Pepperoni", 2]
|
|
19
|
+
]
|
|
20
|
+
</l-chart>
|
|
21
|
+
<l-chart id="myBarChart" style="max-width:750px" type="BarChart" title="How Much Pizza I Ate Last Night">
|
|
22
|
+
[
|
|
23
|
+
["Topping","Slices",{ role: "style" },{ role: "annotation" }], // column headings, annotation does not apply to Pie
|
|
24
|
+
["Mushrooms", 3, "brown","M"], // remaining rows are data
|
|
25
|
+
["Onions", 1, "yellow","On"],
|
|
26
|
+
["Olives", 1, "black", "Ol"],
|
|
27
|
+
["Zucchini", 1, "green","Z"],
|
|
28
|
+
["Pepperoni", 2, "red","P"]
|
|
29
|
+
]
|
|
30
|
+
</l-chart>
|
|
31
|
+
<l-chart id="myColumnChart" style="max-width:750px" type="ColumnChart" title="How Much Pizza I Ate Last Night">
|
|
32
|
+
[
|
|
33
|
+
["Topping","Slices",{ role: "style" },{ role: "annotation" }], // column headings, style does not apply to Pie or Bar
|
|
34
|
+
["Mushrooms", 3, "brown","Yum"], // remaining rows are data
|
|
35
|
+
["Onions", 1, "yellow","Sweet"],
|
|
36
|
+
["Olives", 1, "black","So, so"],
|
|
37
|
+
["Zucchini", 1, "green","Ick!"],
|
|
38
|
+
["Pepperoni", 2, "red","Spicy!"]
|
|
39
|
+
]
|
|
40
|
+
</l-chart>
|
|
41
|
+
<l-chart id="myGauges" style="max-width:750px" type="Gauge" title="Laptop">
|
|
42
|
+
[
|
|
43
|
+
['Label', 'Value'], // gauge will always take two columns, Label and Value
|
|
44
|
+
['Memory', 80],
|
|
45
|
+
['CPU', 55],
|
|
46
|
+
['Network', 68]
|
|
47
|
+
]
|
|
48
|
+
// there is also a separate l-gauge component that shows just one gauge
|
|
49
|
+
// and is driven entirely by attributes
|
|
50
|
+
</l-chart>
|
|
51
|
+
<script>
|
|
52
|
+
const gauges = document.getElementById("myGauges");
|
|
53
|
+
setInterval(function() {
|
|
54
|
+
gauges.setValue(0, 1, 40 + Math.round(60 * Math.random()));
|
|
55
|
+
}, 6000);
|
|
56
|
+
setInterval(function() {
|
|
57
|
+
gauges.setValue(1, 1, 40 + Math.round(60 * Math.random()));
|
|
58
|
+
}, 5000);
|
|
59
|
+
setInterval(function() {
|
|
60
|
+
gauges.setValue(2, 1, 60 + Math.round(40 * Math.random()));
|
|
61
|
+
}, 7500);
|
|
62
|
+
</script>
|
|
63
|
+
</body>
|
|
64
|
+
</html>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Directives</title>
|
|
5
|
-
<script src="
|
|
5
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
6
6
|
</head>
|
|
7
7
|
|
|
8
8
|
<body>
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
<p id="variables"></p>
|
|
52
52
|
</div>
|
|
53
53
|
<script type="lightview/module">
|
|
54
|
-
self.variables({on:boolean,options:Array},{reactive});
|
|
54
|
+
self.variables({on:"boolean",options:Array},{reactive});
|
|
55
55
|
|
|
56
56
|
on = true;
|
|
57
57
|
options = ["lettuce"];
|
|
@@ -62,7 +62,7 @@ const variableValues = () => {
|
|
|
62
62
|
while(el.lastElementChild) el.lastElementChild.remove();
|
|
63
63
|
self.getVariableNames().forEach((name) => {
|
|
64
64
|
const line = document.createElement("div");
|
|
65
|
-
line.innerText = `${name} = ${JSON.stringify(self.
|
|
65
|
+
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
|
|
66
66
|
el.appendChild(line);
|
|
67
67
|
});
|
|
68
68
|
};
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<title>Remote</title>
|
|
5
5
|
<link type="module" src="">
|
|
6
6
|
<meta name="l-enableFrames">
|
|
7
|
-
<script src="
|
|
7
|
+
<script src="../lightview.js"></script>
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
The component below is loaded from an alternate domain and running in a child iframe.
|
|
13
13
|
The logging console is below the component in this frame.
|
|
14
14
|
</p>
|
|
15
|
-
<iframe id="myframe" src="https://lightview.dev/
|
|
15
|
+
<iframe id="myframe" src="https://lightview.dev/foreignform.html?id=myframe"></iframe>
|
|
16
16
|
<div id="console" style="max-height:250px;scroll:auto"></div>
|
|
17
17
|
<script>
|
|
18
18
|
const mutationCallback = (mutationsList) => {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Form</title>
|
|
5
|
-
<script src="
|
|
5
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
6
6
|
<script>Lightview.whenFramed(({as,unhide,importAnchors,isolated,enableFrames}) => {
|
|
7
7
|
Lightview.bodyAsComponent({as,unhide,importAnchors,isolated,enableFrames});
|
|
8
8
|
})</script>
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
</div>
|
|
47
47
|
<script type="lightview/module">
|
|
48
48
|
self.variables({
|
|
49
|
-
color: string,
|
|
50
|
-
checked: boolean,
|
|
49
|
+
color: "string",
|
|
50
|
+
checked: "boolean",
|
|
51
51
|
hamburger: Array
|
|
52
52
|
}, {
|
|
53
53
|
reactive
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
while (el.lastElementChild) el.lastElementChild.remove();
|
|
62
62
|
self.getVariableNames().forEach((name) => {
|
|
63
63
|
const line = document.createElement("div");
|
|
64
|
-
line.innerText = `${name} = ${JSON.stringify(self.
|
|
64
|
+
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
|
|
65
65
|
el.appendChild(line);
|
|
66
66
|
});
|
|
67
67
|
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Form</title>
|
|
6
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body>
|
|
10
|
+
<div style="margin:20px;padding:5px;border:1px;border-style:solid;border-color:${color}">
|
|
11
|
+
<p>
|
|
12
|
+
<input type="text" value="${color}">
|
|
13
|
+
<input type="radio" name="color" value="red">
|
|
14
|
+
<input type="radio" name="color" value="yellow">
|
|
15
|
+
<input type="radio" name="color" value="green">
|
|
16
|
+
<select value="${color}">
|
|
17
|
+
<option value="red">red</option>
|
|
18
|
+
<option>yellow</option>
|
|
19
|
+
<option> green</option>
|
|
20
|
+
</select>
|
|
21
|
+
<div>Hamburger options:</div>
|
|
22
|
+
<select value="${hamburger}" multiple>
|
|
23
|
+
<option value="lettuce">lettuce</option>
|
|
24
|
+
<option value="tomato">tomato</option>
|
|
25
|
+
<option>cheese</option>
|
|
26
|
+
</select>
|
|
27
|
+
</p>
|
|
28
|
+
Expose: <input type="checkbox" value="${checked}">
|
|
29
|
+
<p l-if="${checked}">
|
|
30
|
+
Now you've done it. You've exposed me.
|
|
31
|
+
</p>
|
|
32
|
+
<p id="variables">
|
|
33
|
+
|
|
34
|
+
</p>
|
|
35
|
+
</div>
|
|
36
|
+
<script type="lightview/module">
|
|
37
|
+
self.variables({color:"string"},{reactive});
|
|
38
|
+
addEventListener("change", () => {
|
|
39
|
+
variableValues()
|
|
40
|
+
});
|
|
41
|
+
addEventListener("connected",() => {
|
|
42
|
+
color = "yellow";
|
|
43
|
+
checked = true;
|
|
44
|
+
hamburger = ["cheese"];
|
|
45
|
+
});
|
|
46
|
+
// demo instrumentation
|
|
47
|
+
const variableValues = () => {
|
|
48
|
+
const el = self.getElementById("variables");
|
|
49
|
+
while (el.lastElementChild) el.lastElementChild.remove();
|
|
50
|
+
self.getVariableNames().forEach((name) => {
|
|
51
|
+
const line = document.createElement("div");
|
|
52
|
+
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
|
|
53
|
+
el.appendChild(line);
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
</script>
|
|
57
|
+
</body>
|
|
58
|
+
|
|
59
|
+
</html>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Chart</title>
|
|
4
|
+
<link href="../components/gauge.html" rel="module">
|
|
5
|
+
<script src="../lightview.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<l-gauge id="myGauge" style="max-width:750px" type="Gauge" label="Laptop" value="50"></l-gauge>
|
|
9
|
+
<script>
|
|
10
|
+
const gauge = document.getElementById("myGauge");
|
|
11
|
+
setInterval(function() {
|
|
12
|
+
gauge.setValue(40 + Math.round(60 * Math.random()));
|
|
13
|
+
}, 2500);
|
|
14
|
+
</script>
|
|
15
|
+
</body>
|
|
16
|
+
</html>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
const http = require("http"),
|
|
2
|
+
fs = require("fs"),
|
|
3
|
+
host = 'localhost',
|
|
4
|
+
port = 8000,
|
|
5
|
+
requestListener = async function (req, res) {
|
|
6
|
+
const path = `.${req.url}`;
|
|
7
|
+
res.setHeader("Access-Control-Allow-Origin","*");
|
|
8
|
+
res.setHeader("Access-Control-Allow-Methods", "*");
|
|
9
|
+
res.setHeader("Access-Control-Allow-Headers", "*");
|
|
10
|
+
res.setHeader("Content-Type", "application/json");
|
|
11
|
+
if(req.method==="OPTIONS") {
|
|
12
|
+
res.end();
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if(req.method==="GET") {
|
|
16
|
+
console.log("GET",req.url);
|
|
17
|
+
res.write(fs.readFileSync(path));
|
|
18
|
+
res.end();
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const buffers = [];
|
|
22
|
+
for await(const chunk of req) {
|
|
23
|
+
buffers.push(chunk);
|
|
24
|
+
}
|
|
25
|
+
const data = JSON.parse(Buffer.concat(buffers).toString());
|
|
26
|
+
console.log(req.method,req.url,data);
|
|
27
|
+
if(req.method==="PUT") {
|
|
28
|
+
const string = JSON.stringify(data);
|
|
29
|
+
fs.writeFileSync(path,string);
|
|
30
|
+
res.write(string);
|
|
31
|
+
res.end();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if(req.method==="PATCH") {
|
|
35
|
+
const {property,value,oldValue} = data,
|
|
36
|
+
json = JSON.parse(fs.readFileSync(path));
|
|
37
|
+
if(property!==undefined && json[property]===oldValue) { // probably need a deepEqual for a production use
|
|
38
|
+
json[property] = value;
|
|
39
|
+
fs.writeFileSync(path,JSON.stringify(json))
|
|
40
|
+
}
|
|
41
|
+
res.write(JSON.stringify(json));
|
|
42
|
+
res.end();
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
server = http.createServer(requestListener);
|
|
47
|
+
server.listen(port, host, () => {
|
|
48
|
+
console.log(`Server is running on http://${host}:${port}`);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Remote</title>
|
|
6
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
|
|
10
|
+
<input id="myRemote" type=text" value="${JSON.stringify(myRemote)}" size="${JSON.stringify(myRemote).length}"><br>
|
|
11
|
+
<button l-on:click="patch">Patch</button><br>
|
|
12
|
+
<button l-on:click="replace">Replace</button>
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<script type="lightview/module">
|
|
16
|
+
self.variables({myRemote:"object"},{reactive,remote:"http://localhost:8000/remote.json"});
|
|
17
|
+
|
|
18
|
+
await myRemote; // must await remotes before the first time they are used, e.g. before HTML is rendered
|
|
19
|
+
|
|
20
|
+
self.patch = () => {
|
|
21
|
+
const json = JSON.parse(document.body.getElementById("myRemote").value);
|
|
22
|
+
Object.assign(myRemote,json);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
self.replace = () => {
|
|
26
|
+
myRemote = JSON.parse(document.body.getElementById("myRemote").value);
|
|
27
|
+
};
|
|
28
|
+
</script>
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"joe","age":20}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<title>Scratch</title>
|
|
6
|
-
<script src="
|
|
6
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
7
7
|
</head>
|
|
8
8
|
<body>
|
|
9
9
|
<div style="margin:20px;padding:5px;border:1px;border-style:solid;border-color:${color}">
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Template</title>
|
|
6
|
+
<template id="local-component">
|
|
7
|
+
<p>
|
|
8
|
+
<button l-on:click="click">Click Me</button>
|
|
9
|
+
</p>
|
|
10
|
+
<p>
|
|
11
|
+
${message ? message : ""}
|
|
12
|
+
</p>
|
|
13
|
+
<script type="lightview/module">
|
|
14
|
+
self.variables({message: "string"}, {reactive});
|
|
15
|
+
|
|
16
|
+
self.click = (event) => {
|
|
17
|
+
message = "Hi there!";
|
|
18
|
+
};
|
|
19
|
+
</script>
|
|
20
|
+
</template>
|
|
21
|
+
<script src="../lightview.js"></script>
|
|
22
|
+
<script>
|
|
23
|
+
Lightview.createComponent("x-hello", document.getElementById("local-component"));
|
|
24
|
+
</script>
|
|
25
|
+
</head>
|
|
26
|
+
|
|
27
|
+
<body>
|
|
28
|
+
<div style="margin:20px">
|
|
29
|
+
<x-hello></x-hello>
|
|
30
|
+
</div>
|
|
31
|
+
</body>
|
|
32
|
+
|
|
33
|
+
</html>
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Types</title>
|
|
6
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body>
|
|
10
|
+
<div style="margin:20px">
|
|
11
|
+
<p>
|
|
12
|
+
<button l-on:click="run">Run</button>
|
|
13
|
+
<button l-on:click="clear">Clear</button>
|
|
14
|
+
</p>
|
|
15
|
+
<p id="console"></p>
|
|
16
|
+
</div>
|
|
17
|
+
<script type="lightview/module">
|
|
18
|
+
const {string} = await import("../types.js");
|
|
19
|
+
self.run = () => {
|
|
20
|
+
self.variables({
|
|
21
|
+
err: Error,
|
|
22
|
+
astring: "string",
|
|
23
|
+
asdvancedstring: string({maxlength:10}),
|
|
24
|
+
aDate: Date,
|
|
25
|
+
});
|
|
26
|
+
try {
|
|
27
|
+
self.variables({
|
|
28
|
+
badvariable: string({maxlength:"10"}),
|
|
29
|
+
});
|
|
30
|
+
} catch(e) {
|
|
31
|
+
err = e;
|
|
32
|
+
}
|
|
33
|
+
try {
|
|
34
|
+
astring = "my string";
|
|
35
|
+
} catch (e) {
|
|
36
|
+
err = e;
|
|
37
|
+
}
|
|
38
|
+
try {
|
|
39
|
+
asdvancedstring = "my string";
|
|
40
|
+
} catch (e) {
|
|
41
|
+
err = e;
|
|
42
|
+
}
|
|
43
|
+
try {
|
|
44
|
+
asdvancedstring = "my long string";
|
|
45
|
+
} catch (e) {
|
|
46
|
+
err = e;
|
|
47
|
+
}
|
|
48
|
+
try {
|
|
49
|
+
astring = 1;
|
|
50
|
+
} catch (e) {
|
|
51
|
+
err = e;
|
|
52
|
+
}
|
|
53
|
+
try {
|
|
54
|
+
aDate = new Date();
|
|
55
|
+
} catch (e) {
|
|
56
|
+
err = e;
|
|
57
|
+
}
|
|
58
|
+
try {
|
|
59
|
+
aDate = 1;
|
|
60
|
+
} catch (e) {
|
|
61
|
+
err = e;
|
|
62
|
+
}
|
|
63
|
+
try {
|
|
64
|
+
err = 1;
|
|
65
|
+
} catch (e) {
|
|
66
|
+
err = e;
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// demo instrumentation
|
|
71
|
+
self.clear = () => {
|
|
72
|
+
const cnsl = self.getElementById("console");
|
|
73
|
+
while (cnsl.lastChild) cnsl.lastChild.remove();
|
|
74
|
+
};
|
|
75
|
+
addEventListener("change", ({
|
|
76
|
+
variableName,
|
|
77
|
+
value
|
|
78
|
+
}) => {
|
|
79
|
+
const cnsl = self.getElementById("console");
|
|
80
|
+
if (cnsl) {
|
|
81
|
+
const message = document.createElement("div");
|
|
82
|
+
if (variableName === "err") {
|
|
83
|
+
message.innerHTML = `<b>></b> ${value}<br>`;
|
|
84
|
+
} else {
|
|
85
|
+
message.innerHTML = `<b>></b> ${variableName} = ${value}<br>`;
|
|
86
|
+
}
|
|
87
|
+
cnsl.appendChild(message);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
</script>
|
|
91
|
+
</body>
|
|
92
|
+
|
|
93
|
+
</html>
|
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
</p>
|
|
10
10
|
<script type="lightview/module">
|
|
11
11
|
self.variables({
|
|
12
|
-
run: boolean
|
|
12
|
+
run: "boolean"
|
|
13
13
|
},{reactive});
|
|
14
14
|
self.variables({
|
|
15
|
-
name: string
|
|
15
|
+
name: "string"
|
|
16
16
|
}, {
|
|
17
17
|
imported
|
|
18
18
|
});
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
}) => {
|
|
23
23
|
if (variableName === "run" && value === true) {
|
|
24
24
|
self.siblings.forEach((sibling) => {
|
|
25
|
-
sibling.
|
|
25
|
+
sibling.setVariableValue(variableName, false);
|
|
26
26
|
})
|
|
27
27
|
}
|
|
28
28
|
})
|
|
29
29
|
</script>
|
|
30
30
|
</template>
|
|
31
31
|
<title>Form</title>
|
|
32
|
-
<script src="
|
|
32
|
+
<script src="../lightview.js"></script>
|
|
33
33
|
<script>
|
|
34
34
|
Lightview.createComponent("x-audiostream", document.getElementById("audiostream"))
|
|
35
35
|
</script>
|