lightview 1.7.2-b → 1.8.2
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 +15 -16
- package/docs/CNAME +1 -0
- package/docs/api.html +674 -0
- package/docs/blank.html +10 -0
- package/docs/comparedto.html +89 -0
- package/docs/components/chart-repl.html +69 -0
- package/docs/components/chart.html +17 -0
- package/{components → docs/components}/components.js +31 -11
- package/docs/components/contents.html +17 -0
- package/docs/components/gantt-repl.html +61 -0
- package/docs/components/gantt.html +42 -0
- package/docs/components/gauge-repl.html +66 -0
- package/docs/components/gauge.html +20 -0
- package/docs/components/orgchart-repl.html +64 -0
- package/docs/components/orgchart.html +41 -0
- package/docs/components/repl-as-src.html +17 -0
- package/docs/components/repl-repl.html +95 -0
- package/docs/components/repl.html +527 -0
- package/docs/components/timeline-repl.html +72 -0
- package/docs/components/timeline.html +44 -0
- package/docs/components.html +14 -0
- package/docs/css/highlightjs.min.css +9 -0
- package/docs/css/tutorial.css +35 -0
- package/docs/examples/anchor.html +11 -0
- package/{components/chart/example.html → docs/examples/chart.html} +6 -4
- package/docs/examples/counter.html +26 -0
- package/{examples → docs/examples}/counter.test.mjs +0 -0
- package/docs/examples/counter2.html +26 -0
- package/{examples → docs/examples}/directives.html +20 -18
- package/{examples → docs/examples}/foreign.html +1 -1
- package/docs/examples/forgeinform.html +98 -0
- package/docs/examples/form.html +61 -0
- package/{examples → docs/examples}/gauge.html +4 -2
- package/{examples → docs/examples}/invalid-template-literals.html +6 -4
- package/{examples → docs/examples}/medium/remote.html +1 -1
- package/docs/examples/message.html +18 -0
- package/{examples → docs/examples}/nested.html +2 -2
- package/docs/examples/object-bound-form.html +34 -0
- package/{examples → docs/examples}/remote-server.js +0 -0
- package/docs/examples/remote.html +34 -0
- package/{examples → docs/examples}/remote.json +0 -0
- package/{examples → docs/examples}/scratch.html +1 -1
- package/docs/examples/sensors/index.html +44 -0
- package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
- package/docs/examples/shared.html +41 -0
- package/{examples → docs/examples}/template.html +1 -1
- package/{examples → docs/examples}/timeline.html +2 -2
- package/docs/examples/todo.html +40 -0
- package/docs/examples/top.html +10 -0
- package/{examples → docs/examples}/types.html +1 -1
- package/{examples → docs/examples}/xor.html +22 -20
- package/docs/examples.html +25 -0
- package/docs/index.html +44 -0
- package/docs/javascript/codejar.min.js +8 -0
- package/docs/javascript/highlightjs.min.js +1173 -0
- package/docs/javascript/isomorphic-git.js +9 -0
- package/docs/javascript/json5.min.js +1 -0
- package/docs/javascript/lightning-fs.js +1 -0
- package/docs/javascript/lightview.js +1285 -0
- package/docs/javascript/marked.min.js +6 -0
- package/docs/javascript/peerjs.min.js +70 -0
- package/docs/javascript/turndown.js +973 -0
- package/docs/javascript/types.js +606 -0
- package/docs/javascript/utils.js +45 -0
- package/docs/lightview.html +63 -0
- package/docs/old_index.html +965 -0
- package/docs/old_index.md +1132 -0
- package/docs/slidein.html +51 -0
- package/docs/tutorial/0-getting-started.html +67 -0
- package/docs/tutorial/1-intro-to-variables.html +103 -0
- package/docs/tutorial/10-template-components.html +80 -0
- package/docs/tutorial/11-linked-components.html +76 -0
- package/docs/tutorial/12-imported-components.html +67 -0
- package/docs/tutorial/13-input-binding.html +94 -0
- package/docs/tutorial/14-automatic-variable-creation.html +74 -0
- package/docs/tutorial/15-form-binding.html +110 -0
- package/docs/tutorial/16-if-directive.html +60 -0
- package/docs/tutorial/17-loop-directives.html +83 -0
- package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
- package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
- package/docs/tutorial/3-data-types.html +89 -0
- package/docs/tutorial/4-extended-data-types.html +83 -0
- package/docs/tutorial/5-extended-functional-types.html +96 -0
- package/docs/tutorial/5.1-extended-functional-types.html +79 -0
- package/docs/tutorial/5.2-extended-functional-types.html +70 -0
- package/docs/tutorial/6-conventional-javascript.html +75 -0
- package/docs/tutorial/7-monitoring-with-observers.html +107 -0
- package/docs/tutorial/8-event-listeners.html +65 -0
- package/docs/tutorial/9-intro-to-components.html +91 -0
- package/docs/tutorial/contents.html +32 -0
- package/docs/tutorial/my-component.html +29 -0
- package/docs/tutorial/remote-value.json +4 -0
- package/docs/websiterepl.html +46 -0
- package/lightview.js +499 -363
- package/lightview.min.js +1 -0
- package/lightview_good.js +1267 -0
- package/lightview_optimized.js +1274 -0
- package/package.json +7 -2
- package/repl_hold.html +320 -0
- package/test/basic.html +29 -17
- package/test/basic.test.mjs +1 -11
- package/test/extended.html +16 -19
- package/types.js +118 -36
- package/unsplash.key +1 -0
- package/components/chart/chart.html +0 -15
- package/components/chart.html +0 -81
- package/components/gantt/example.html +0 -27
- package/components/gantt/gantt.html +0 -34
- package/components/gauge/example.html +0 -28
- package/components/gauge/guage.html +0 -19
- package/components/gauge.html +0 -57
- package/components/timeline.html +0 -81
- package/examples/chart.html +0 -66
- package/examples/counter.html +0 -24
- package/examples/forgeinform.html +0 -96
- package/examples/form.html +0 -59
- package/examples/message.html +0 -12
- package/examples/object-bound-form.html +0 -32
- package/examples/remote.html +0 -32
- package/examples/sensors/index.html +0 -30
- package/examples/todo.html +0 -38
- package/examples/top.html +0 -10
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Lightview:Components:Timeline</title>
|
|
6
|
+
<link href="../css/tutorial.css" rel="stylesheet">
|
|
7
|
+
<link href="../slidein.html" rel="module">
|
|
8
|
+
<link href="repl.html" rel="module">
|
|
9
|
+
<script src="../javascript/highlightjs.min.js"></script>
|
|
10
|
+
<script src="../javascript/marked.min.js"></script>
|
|
11
|
+
<script src="../javascript/utils.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
<body class="tutorial-body">
|
|
14
|
+
<script src="../javascript/lightview.js"></script>
|
|
15
|
+
<div class="tutorial-instructions">
|
|
16
|
+
<l-slidein src="./contents.html" class="toc"></l-slidein>
|
|
17
|
+
<div class="markdown">
|
|
18
|
+
## Timeline
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
</div>
|
|
23
|
+
<button class="nav-previous"><a href="orgchart-repl.html" target="content">Previous</a></button>
|
|
24
|
+
<button class="nav-next"><a href="gauge-repl.html" target="content">Next</a></button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="repl">
|
|
27
|
+
<h2></h2>
|
|
28
|
+
<l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
|
|
29
|
+
<div slot="headhtml"></div>
|
|
30
|
+
<div slot="bodyhtml"></div>
|
|
31
|
+
<div slot="script"></div>
|
|
32
|
+
<template slot="src">
|
|
33
|
+
<l-head>
|
|
34
|
+
<link href="./timeline.html" rel="module">
|
|
35
|
+
<script src="../javascript/lightview.js"></script>
|
|
36
|
+
</l-head>
|
|
37
|
+
<l-body>
|
|
38
|
+
<l-timeline title="Presidents">
|
|
39
|
+
{
|
|
40
|
+
options: { showRowLabels: false },
|
|
41
|
+
rows: [
|
|
42
|
+
[ '1', 'George Washington','1789-03-30', '1797-2-04' ],
|
|
43
|
+
[ '2', 'John Adams', '1797-02-04', '1801-02-04' ],
|
|
44
|
+
[ '3', 'Thomas Jefferson', '1801-02-04', '1809-02-04']
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
</l-timeline>
|
|
48
|
+
<l-timeline title="Presidents and Vice Presidents">
|
|
49
|
+
{
|
|
50
|
+
options: { },
|
|
51
|
+
rows: [
|
|
52
|
+
[ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
|
|
53
|
+
[ 'President', 'John Adams', '1797-02-04', '1801-02-04' ],
|
|
54
|
+
[ 'President', 'Thomas Jefferson', '1801-02-04', '1809-02-04'],
|
|
55
|
+
[ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
|
|
56
|
+
[ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
|
|
57
|
+
[ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
</l-timeline>
|
|
61
|
+
</l-body>
|
|
62
|
+
<script>
|
|
63
|
+
|
|
64
|
+
</script>
|
|
65
|
+
</template>
|
|
66
|
+
</l-repl>
|
|
67
|
+
</div>
|
|
68
|
+
<script>
|
|
69
|
+
processMarkdown();
|
|
70
|
+
</script>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Lightview:Component:Timeline</title>
|
|
5
|
+
<script src="../javascript/json5.min.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="target"></div>
|
|
9
|
+
<script id="lightview">
|
|
10
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
11
|
+
const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
|
|
12
|
+
chart(self, {
|
|
13
|
+
packages: ["timeline"],
|
|
14
|
+
columns: [
|
|
15
|
+
{id: "RowLabel", type: "string"},
|
|
16
|
+
{id: "BarLabel", type: "string"},
|
|
17
|
+
{id: "Start", type: "date"},
|
|
18
|
+
{id: "End", type: "date"}
|
|
19
|
+
],
|
|
20
|
+
type: "Timeline",
|
|
21
|
+
optionsTransform(options) {
|
|
22
|
+
options = {...options};
|
|
23
|
+
if ("showRowLabels" in options) {
|
|
24
|
+
options.timeline = {showRowLabels: options.showRowLabels};
|
|
25
|
+
}
|
|
26
|
+
return options;
|
|
27
|
+
},
|
|
28
|
+
rowTransform(row, i) {
|
|
29
|
+
return row.map((item, index) => {
|
|
30
|
+
if (item && (index === 2 || index === 3)) {
|
|
31
|
+
const date = new Date(item);
|
|
32
|
+
if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
|
|
33
|
+
throw new TypeError(`row:${i} col:${index} is not a date`);
|
|
34
|
+
}
|
|
35
|
+
return date;
|
|
36
|
+
}
|
|
37
|
+
return item;
|
|
38
|
+
})
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
</script>
|
|
43
|
+
</body>
|
|
44
|
+
</html>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Lightview: Components</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<h2>Chart Components</h2>
|
|
9
|
+
<ul>
|
|
10
|
+
<li><a href="./components/chart/repl.html">Bar, Pie, Column</a></li>
|
|
11
|
+
<li><a href="./components/gantt/example.html">Gannt</a></li>
|
|
12
|
+
</ul>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
Theme: Default
|
|
3
|
+
Description: Original highlight.js style
|
|
4
|
+
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
|
5
|
+
Maintainer: @highlightjs/core-team
|
|
6
|
+
Website: https://highlightjs.org/
|
|
7
|
+
License: see project LICENSE
|
|
8
|
+
Touched: 2021
|
|
9
|
+
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.toc {
|
|
2
|
+
position:fixed;
|
|
3
|
+
background:white;
|
|
4
|
+
overflow-y:hidden;
|
|
5
|
+
overflow-x:hidden;
|
|
6
|
+
border:1px solid;
|
|
7
|
+
margin-right:5px;
|
|
8
|
+
margin-left: 0px;
|
|
9
|
+
height:100%;
|
|
10
|
+
min-width:10px;
|
|
11
|
+
max-width:250px;
|
|
12
|
+
top:0px;
|
|
13
|
+
bottom:0px;
|
|
14
|
+
}
|
|
15
|
+
.markdown {
|
|
16
|
+
margin-left:20px
|
|
17
|
+
}
|
|
18
|
+
.tutorial-body {
|
|
19
|
+
display:flex;
|
|
20
|
+
margin: 0px;
|
|
21
|
+
overflow: auto;
|
|
22
|
+
}
|
|
23
|
+
.tutorial-instructions {
|
|
24
|
+
margin-right:10px;
|
|
25
|
+
min-width: 500px
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.nav-previous {
|
|
29
|
+
float:left;
|
|
30
|
+
margin-left:20px
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.nav-next {
|
|
34
|
+
float:right;
|
|
35
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Anchors</title>
|
|
5
|
+
<script src="../../lightview.js?as=x-body"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<p><a href="counter.html" target="#mytarget" crossorigin="use-credentials">Show Counter</a></p>
|
|
9
|
+
<div id="mytarget">To Be Replaced</div>
|
|
10
|
+
</body>
|
|
11
|
+
</html>
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<head>
|
|
3
|
-
<title>
|
|
4
|
-
<link href="
|
|
3
|
+
<title>Chart</title>
|
|
4
|
+
<link href="../components/chart.html" rel="module">
|
|
5
5
|
<script src="../../lightview.js"></script>
|
|
6
6
|
</head>
|
|
7
7
|
<body>
|
|
8
|
-
<l-chart id="
|
|
8
|
+
<l-chart id="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night" hidden l-unhide>
|
|
9
9
|
{
|
|
10
|
-
options: {
|
|
10
|
+
options: {
|
|
11
|
+
|
|
12
|
+
},
|
|
11
13
|
columns: [
|
|
12
14
|
{label: "Topping", type: "string"},
|
|
13
15
|
{label: "Slices", type: "number"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
<title>Lightview:Examples:Counter</title>
|
|
3
|
+
<script src="../../lightview.js?as=x-body" type="application/javascript"></script>
|
|
4
|
+
</head>
|
|
5
|
+
|
|
6
|
+
<body>
|
|
7
|
+
<p>
|
|
8
|
+
<button l-on:click="${bump}">Click count:${count}</button>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<script id="lightview">
|
|
12
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
13
|
+
self.variables({count: "number",}, {reactive, set: 0});
|
|
14
|
+
self.bump = () => count++;
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
button {
|
|
20
|
+
margin: 20px;
|
|
21
|
+
background: gray
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</body>
|
|
25
|
+
|
|
26
|
+
</html>
|
|
File without changes
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
<title>Lightview:Examples:Counter</title>
|
|
3
|
+
<script src="../../lightview.js?as=x-body"></script>
|
|
4
|
+
</head>
|
|
5
|
+
|
|
6
|
+
<body>
|
|
7
|
+
<p>
|
|
8
|
+
<button l-on:click="${bump}">Click count:${count}</button>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<script id="lightview">
|
|
12
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
13
|
+
this.variables({count: "number",}, {reactive,set:0});
|
|
14
|
+
this.bump = () => count++;
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
button {
|
|
20
|
+
margin: 20px;
|
|
21
|
+
background: gray
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</body>
|
|
25
|
+
|
|
26
|
+
</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>
|
|
@@ -50,26 +50,28 @@
|
|
|
50
50
|
Variable Values
|
|
51
51
|
<p id="variables"></p>
|
|
52
52
|
</div>
|
|
53
|
-
<script
|
|
54
|
-
|
|
53
|
+
<script id="lightview">
|
|
54
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
55
|
+
self.variables({on: "boolean", options: Array}, {reactive});
|
|
55
56
|
|
|
56
|
-
on = true;
|
|
57
|
-
options = ["lettuce"];
|
|
57
|
+
on = true;
|
|
58
|
+
options = ["lettuce"];
|
|
58
59
|
|
|
59
60
|
// demo instrumentation
|
|
60
|
-
const variableValues = () => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
};
|
|
69
|
-
variableValues();
|
|
70
|
-
addEventListener("change",()=> {
|
|
71
|
-
|
|
72
|
-
});
|
|
61
|
+
const variableValues = () => {
|
|
62
|
+
const el = self.getElementById("variables");
|
|
63
|
+
while (el.lastElementChild) el.lastElementChild.remove();
|
|
64
|
+
self.getVariableNames().forEach((name) => {
|
|
65
|
+
const line = document.createElement("div");
|
|
66
|
+
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
|
|
67
|
+
el.appendChild(line);
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
variableValues();
|
|
71
|
+
addEventListener("change", () => {
|
|
72
|
+
variableValues()
|
|
73
|
+
});
|
|
74
|
+
}
|
|
73
75
|
|
|
74
76
|
</script>
|
|
75
77
|
</body>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<title>Form</title>
|
|
5
|
+
<script src="../../lightview.js?as=x-body"></script>
|
|
6
|
+
<script>Lightview.whenFramed(({as,unhide,importAnchors,isolated,enableFrames}) => {
|
|
7
|
+
Lightview.bodyAsComponent({as,unhide,importAnchors,isolated,enableFrames});
|
|
8
|
+
})</script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body style="height:fit-content;width:fit-content;display:flex;flex-direction:column;max-height:100%;overflow:auto;">
|
|
12
|
+
<div style="margin:20px">
|
|
13
|
+
<p>
|
|
14
|
+
<input type="text" value="${color}">
|
|
15
|
+
<input type="checkbox" value="${checked}">
|
|
16
|
+
<input type="radio" name="color" value="red">
|
|
17
|
+
<input type="radio" name="color" value="yellow">
|
|
18
|
+
<input type="radio" name="color" value="green">
|
|
19
|
+
<select value="${color}">
|
|
20
|
+
<option value="red">red</option>
|
|
21
|
+
<option>yellow</option>
|
|
22
|
+
<option> green </option>
|
|
23
|
+
</select>
|
|
24
|
+
<div>Hamburger options:</div>
|
|
25
|
+
<select value="${hamburger}" multiple>
|
|
26
|
+
<option value="lettuce">lettuce</option>
|
|
27
|
+
<option>tomato</option>
|
|
28
|
+
<option>cheese</option>
|
|
29
|
+
</select>
|
|
30
|
+
<br><button l-on:click="${placeOrder}">Place Order</button>
|
|
31
|
+
</p>
|
|
32
|
+
Expose: <input type="checkbox" value="${checked}">
|
|
33
|
+
<p l-if="${checked}">
|
|
34
|
+
Now you've done it. You've exposed me.
|
|
35
|
+
</p>
|
|
36
|
+
<ul l-for="${hamburger}">
|
|
37
|
+
<li>${item}</li>
|
|
38
|
+
</ul>
|
|
39
|
+
<ul l-for:entries="${hamburger}">
|
|
40
|
+
<li>${item[0]}:${item[1]}</li>
|
|
41
|
+
</ul>
|
|
42
|
+
<ul l-for:values="${hamburger}">
|
|
43
|
+
<li>${item}</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<p id="variables">
|
|
46
|
+
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
<script id="lightview">
|
|
50
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
51
|
+
const orders = [];
|
|
52
|
+
self.variables({
|
|
53
|
+
checked: "boolean"
|
|
54
|
+
}, {
|
|
55
|
+
reactive
|
|
56
|
+
});
|
|
57
|
+
self.variables({
|
|
58
|
+
color: "string",
|
|
59
|
+
hamburger: Array
|
|
60
|
+
}, {
|
|
61
|
+
reactive, exported
|
|
62
|
+
});
|
|
63
|
+
self.addEventListener("connected", () => {
|
|
64
|
+
color = "green";
|
|
65
|
+
checked = true;
|
|
66
|
+
hamburger = ["lettuce"];
|
|
67
|
+
});
|
|
68
|
+
self.placeOrder = () => {
|
|
69
|
+
orders.push(hamburger);
|
|
70
|
+
message = {hamburger};
|
|
71
|
+
};
|
|
72
|
+
// demo instrumentation
|
|
73
|
+
const variableValues = () => {
|
|
74
|
+
const el = self.getElementById("variables");
|
|
75
|
+
while (el.lastElementChild) el.lastElementChild.remove();
|
|
76
|
+
self.getVariableNames().forEach((name) => {
|
|
77
|
+
const line = document.createElement("div");
|
|
78
|
+
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
|
|
79
|
+
el.appendChild(line);
|
|
80
|
+
});
|
|
81
|
+
const line = document.createElement("div");
|
|
82
|
+
line.innerText = "Previous Orders";
|
|
83
|
+
el.appendChild(line);
|
|
84
|
+
orders.forEach((order) => {
|
|
85
|
+
const line = document.createElement("div");
|
|
86
|
+
line.innerText = JSON.stringify(order);
|
|
87
|
+
el.appendChild(line);
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
variableValues();
|
|
91
|
+
addEventListener("change", () => {
|
|
92
|
+
variableValues()
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
</script>
|
|
96
|
+
</body>
|
|
97
|
+
|
|
98
|
+
</html>
|
|
@@ -0,0 +1,61 @@
|
|
|
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 id="lightview">
|
|
37
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
38
|
+
self.variables({color: "string"}, {reactive});
|
|
39
|
+
addEventListener("change", () => {
|
|
40
|
+
variableValues()
|
|
41
|
+
});
|
|
42
|
+
self.addEventListener("connected", () => {
|
|
43
|
+
color = "yellow";
|
|
44
|
+
checked = true;
|
|
45
|
+
hamburger = ["cheese"];
|
|
46
|
+
});
|
|
47
|
+
// demo instrumentation
|
|
48
|
+
const variableValues = () => {
|
|
49
|
+
const el = self.getElementById("variables");
|
|
50
|
+
while (el.lastElementChild) el.lastElementChild.remove();
|
|
51
|
+
self.getVariableNames().forEach((name) => {
|
|
52
|
+
const line = document.createElement("div");
|
|
53
|
+
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
|
|
54
|
+
el.appendChild(line);
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
</script>
|
|
59
|
+
</body>
|
|
60
|
+
|
|
61
|
+
</html>
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<head>
|
|
3
3
|
<title>Chart</title>
|
|
4
|
-
<link href="../components/gauge.html" rel="module">
|
|
5
|
-
<script src="
|
|
4
|
+
<link href="../components/gauge-repl.html" rel="module">
|
|
5
|
+
<script src="../../lightview.js"></script>
|
|
6
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
7
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
6
8
|
</head>
|
|
7
9
|
<body>
|
|
8
10
|
<l-gauge id="myGauge" style="max-width:750px" type="Gauge" label="Laptop" value="50"></l-gauge>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<title>Invalid Template Literals</title>
|
|
5
|
-
<script src="
|
|
5
|
+
<script src="../../lightview.js?as=x-body"></script>
|
|
6
6
|
</head>
|
|
7
7
|
<body>
|
|
8
8
|
<p>
|
|
@@ -26,9 +26,11 @@
|
|
|
26
26
|
</p>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
|
-
<script
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
<script id="lightview">
|
|
30
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
31
|
+
self.variables({count: "number", test: "number"}, {reactive, set: 0});
|
|
32
|
+
self.bump = () => count++;
|
|
33
|
+
}
|
|
32
34
|
</script>
|
|
33
35
|
|
|
34
36
|
<style>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
load the lightview library, about 7K
|
|
12
12
|
use the body of this file to create a custom element to replace itself
|
|
13
13
|
-->
|
|
14
|
-
<script src="
|
|
14
|
+
<script src="../../../lightview.js?as=x-body"></script>
|
|
15
15
|
</head>
|
|
16
16
|
<body>
|
|
17
17
|
<!--
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Examples:Message</title>
|
|
5
|
+
<script src="../lightview2.js?as=x-body"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body value="Hello!">
|
|
8
|
+
${value}
|
|
9
|
+
<script id="lightview">
|
|
10
|
+
/*(document.currentComponent||=document.body).mount = function() {
|
|
11
|
+
this.variables({value:"string"},{imported});
|
|
12
|
+
}*/
|
|
13
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = function() {
|
|
14
|
+
this.variables({value:"string"},{imported});
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
</body>
|
|
18
|
+
</html>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<head>
|
|
3
3
|
<title>Nested</title>
|
|
4
|
-
<link href="
|
|
5
|
-
<script src="../
|
|
4
|
+
<link href="message.html" rel="module">
|
|
5
|
+
<script src="../lightview2.js?as=x-body"></script>
|
|
6
6
|
</head>
|
|
7
7
|
<body>
|
|
8
8
|
<l-message value="Hello One"></l-message>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Form</title>
|
|
6
|
+
<script src="https://000686818.codepen.website/lightview.js?as=x-body"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<form value="${hamburger}" style="margin:20px;padding:5px;border:1px;border-style:solid;">
|
|
10
|
+
<div>Hamburger options:</div>
|
|
11
|
+
<select value="${hamburger.options}" multiple>
|
|
12
|
+
<option value="lettuce">lettuce</option>
|
|
13
|
+
<option value="tomato">tomato</option>
|
|
14
|
+
<option>cheese</option>
|
|
15
|
+
</select>
|
|
16
|
+
<p id="variables">
|
|
17
|
+
|
|
18
|
+
</p>
|
|
19
|
+
</form>
|
|
20
|
+
<script id="lightview">
|
|
21
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
22
|
+
self.addEventListener("mounted",() => {
|
|
23
|
+
hamburger.options = ["cheese"];
|
|
24
|
+
// demo instrumentation
|
|
25
|
+
observe(() => {
|
|
26
|
+
const el = self.getElementById("variables");
|
|
27
|
+
el.innerText = JSON.stringify(hamburger);
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
</script>
|
|
32
|
+
</body>
|
|
33
|
+
|
|
34
|
+
</html>
|
|
File without changes
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
<p>You must run the file "remote-server.js" for this example to work.</p>
|
|
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 id="lightview">
|
|
16
|
+
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
17
|
+
const {remote} = await import("../../types.js");
|
|
18
|
+
|
|
19
|
+
self.variables({myRemote: "object"}, {reactive, remote: remote("http://localhost:8000/remote.json")});
|
|
20
|
+
|
|
21
|
+
await myRemote; // must await remotes before the first time they are used, e.g. before HTML is rendered
|
|
22
|
+
|
|
23
|
+
self.patch = () => {
|
|
24
|
+
const json = JSON.parse(document.body.getElementById("myRemote").value);
|
|
25
|
+
Object.assign(myRemote, json);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
self.replace = () => {
|
|
29
|
+
myRemote = JSON.parse(document.body.getElementById("myRemote").value);
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
</script>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
File without changes
|
|
@@ -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}">
|