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.
Files changed (122) hide show
  1. package/README.md +15 -16
  2. package/docs/CNAME +1 -0
  3. package/docs/api.html +674 -0
  4. package/docs/blank.html +10 -0
  5. package/docs/comparedto.html +89 -0
  6. package/docs/components/chart-repl.html +69 -0
  7. package/docs/components/chart.html +17 -0
  8. package/{components → docs/components}/components.js +31 -11
  9. package/docs/components/contents.html +17 -0
  10. package/docs/components/gantt-repl.html +61 -0
  11. package/docs/components/gantt.html +42 -0
  12. package/docs/components/gauge-repl.html +66 -0
  13. package/docs/components/gauge.html +20 -0
  14. package/docs/components/orgchart-repl.html +64 -0
  15. package/docs/components/orgchart.html +41 -0
  16. package/docs/components/repl-as-src.html +17 -0
  17. package/docs/components/repl-repl.html +95 -0
  18. package/docs/components/repl.html +527 -0
  19. package/docs/components/timeline-repl.html +72 -0
  20. package/docs/components/timeline.html +44 -0
  21. package/docs/components.html +14 -0
  22. package/docs/css/highlightjs.min.css +9 -0
  23. package/docs/css/tutorial.css +35 -0
  24. package/docs/examples/anchor.html +11 -0
  25. package/{components/chart/example.html → docs/examples/chart.html} +6 -4
  26. package/docs/examples/counter.html +26 -0
  27. package/{examples → docs/examples}/counter.test.mjs +0 -0
  28. package/docs/examples/counter2.html +26 -0
  29. package/{examples → docs/examples}/directives.html +20 -18
  30. package/{examples → docs/examples}/foreign.html +1 -1
  31. package/docs/examples/forgeinform.html +98 -0
  32. package/docs/examples/form.html +61 -0
  33. package/{examples → docs/examples}/gauge.html +4 -2
  34. package/{examples → docs/examples}/invalid-template-literals.html +6 -4
  35. package/{examples → docs/examples}/medium/remote.html +1 -1
  36. package/docs/examples/message.html +18 -0
  37. package/{examples → docs/examples}/nested.html +2 -2
  38. package/docs/examples/object-bound-form.html +34 -0
  39. package/{examples → docs/examples}/remote-server.js +0 -0
  40. package/docs/examples/remote.html +34 -0
  41. package/{examples → docs/examples}/remote.json +0 -0
  42. package/{examples → docs/examples}/scratch.html +1 -1
  43. package/docs/examples/sensors/index.html +44 -0
  44. package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
  45. package/docs/examples/shared.html +41 -0
  46. package/{examples → docs/examples}/template.html +1 -1
  47. package/{examples → docs/examples}/timeline.html +2 -2
  48. package/docs/examples/todo.html +40 -0
  49. package/docs/examples/top.html +10 -0
  50. package/{examples → docs/examples}/types.html +1 -1
  51. package/{examples → docs/examples}/xor.html +22 -20
  52. package/docs/examples.html +25 -0
  53. package/docs/index.html +44 -0
  54. package/docs/javascript/codejar.min.js +8 -0
  55. package/docs/javascript/highlightjs.min.js +1173 -0
  56. package/docs/javascript/isomorphic-git.js +9 -0
  57. package/docs/javascript/json5.min.js +1 -0
  58. package/docs/javascript/lightning-fs.js +1 -0
  59. package/docs/javascript/lightview.js +1285 -0
  60. package/docs/javascript/marked.min.js +6 -0
  61. package/docs/javascript/peerjs.min.js +70 -0
  62. package/docs/javascript/turndown.js +973 -0
  63. package/docs/javascript/types.js +606 -0
  64. package/docs/javascript/utils.js +45 -0
  65. package/docs/lightview.html +63 -0
  66. package/docs/old_index.html +965 -0
  67. package/docs/old_index.md +1132 -0
  68. package/docs/slidein.html +51 -0
  69. package/docs/tutorial/0-getting-started.html +67 -0
  70. package/docs/tutorial/1-intro-to-variables.html +103 -0
  71. package/docs/tutorial/10-template-components.html +80 -0
  72. package/docs/tutorial/11-linked-components.html +76 -0
  73. package/docs/tutorial/12-imported-components.html +67 -0
  74. package/docs/tutorial/13-input-binding.html +94 -0
  75. package/docs/tutorial/14-automatic-variable-creation.html +74 -0
  76. package/docs/tutorial/15-form-binding.html +110 -0
  77. package/docs/tutorial/16-if-directive.html +60 -0
  78. package/docs/tutorial/17-loop-directives.html +83 -0
  79. package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
  80. package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
  81. package/docs/tutorial/3-data-types.html +89 -0
  82. package/docs/tutorial/4-extended-data-types.html +83 -0
  83. package/docs/tutorial/5-extended-functional-types.html +96 -0
  84. package/docs/tutorial/5.1-extended-functional-types.html +79 -0
  85. package/docs/tutorial/5.2-extended-functional-types.html +70 -0
  86. package/docs/tutorial/6-conventional-javascript.html +75 -0
  87. package/docs/tutorial/7-monitoring-with-observers.html +107 -0
  88. package/docs/tutorial/8-event-listeners.html +65 -0
  89. package/docs/tutorial/9-intro-to-components.html +91 -0
  90. package/docs/tutorial/contents.html +32 -0
  91. package/docs/tutorial/my-component.html +29 -0
  92. package/docs/tutorial/remote-value.json +4 -0
  93. package/docs/websiterepl.html +46 -0
  94. package/lightview.js +499 -363
  95. package/lightview.min.js +1 -0
  96. package/lightview_good.js +1267 -0
  97. package/lightview_optimized.js +1274 -0
  98. package/package.json +7 -2
  99. package/repl_hold.html +320 -0
  100. package/test/basic.html +29 -17
  101. package/test/basic.test.mjs +1 -11
  102. package/test/extended.html +16 -19
  103. package/types.js +118 -36
  104. package/unsplash.key +1 -0
  105. package/components/chart/chart.html +0 -15
  106. package/components/chart.html +0 -81
  107. package/components/gantt/example.html +0 -27
  108. package/components/gantt/gantt.html +0 -34
  109. package/components/gauge/example.html +0 -28
  110. package/components/gauge/guage.html +0 -19
  111. package/components/gauge.html +0 -57
  112. package/components/timeline.html +0 -81
  113. package/examples/chart.html +0 -66
  114. package/examples/counter.html +0 -24
  115. package/examples/forgeinform.html +0 -96
  116. package/examples/form.html +0 -59
  117. package/examples/message.html +0 -12
  118. package/examples/object-bound-form.html +0 -32
  119. package/examples/remote.html +0 -32
  120. package/examples/sensors/index.html +0 -30
  121. package/examples/todo.html +0 -38
  122. package/examples/top.html +0 -10
package/examples/forgeinform.html DELETED
@@ -1,96 +0,0 @@
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 type="lightview/module">
50
- const orders = [];
51
- self.variables({
52
- checked: "boolean"
53
- }, {
54
- reactive
55
- });
56
- self.variables({
57
- color: "string",
58
- hamburger: Array
59
- }, {
60
- reactive, exported
61
- });
62
- self.addEventListener("connected",() => {
63
- color = "green";
64
- checked = true;
65
- hamburger = ["lettuce"];
66
- });
67
- self.placeOrder = () => {
68
- orders.push(hamburger);
69
- message = {hamburger};
70
- };
71
- // demo instrumentation
72
- const variableValues = () => {
73
- const el = self.getElementById("variables");
74
- while (el.lastElementChild) el.lastElementChild.remove();
75
- self.getVariableNames().forEach((name) => {
76
- const line = document.createElement("div");
77
- line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
78
- el.appendChild(line);
79
- });
80
- const line = document.createElement("div");
81
- line.innerText = "Previous Orders";
82
- el.appendChild(line);
83
- orders.forEach((order) => {
84
- const line = document.createElement("div");
85
- line.innerText = JSON.stringify(order);
86
- el.appendChild(line);
87
- });
88
- };
89
- variableValues();
90
- addEventListener("change", () => {
91
- variableValues()
92
- });
93
- </script>
94
- </body>
95
-
96
- </html>
package/examples/form.html DELETED
@@ -1,59 +0,0 @@
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
- self.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>
package/examples/message.html DELETED
@@ -1,12 +0,0 @@
1
- <html>
2
- <head>
3
- <meta charset="UTF-8">
4
- <title>Message</title>
5
- </head>
6
- <body>
7
- ${value}
8
- <script type="lightview/module">
9
- self.variables({value:"string"},{imported});
10
- </script>
11
- </body>
12
- </html>
package/examples/object-bound-form.html DELETED
@@ -1,32 +0,0 @@
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
- <form value="${hamburger}" style="margin:20px;padding:5px;border:1px;border-style:solid;">
11
- <div>Hamburger options:</div>
12
- <select value="${hamburger.options}" multiple>
13
- <option value="lettuce">lettuce</option>
14
- <option value="tomato">tomato</option>
15
- <option>cheese</option>
16
- </select>
17
- <p id="variables">
18
-
19
- </p>
20
- </form>
21
- <script type="lightview/module">
22
- self.addEventListener("connected",() => {
23
- hamburger.options = ["cheese"];
24
- observe(() => {
25
- const el = self.getElementById("variables");
26
- el.innerText = JSON.stringify(hamburger);
27
- });
28
- });
29
- </script>
30
- </body>
31
-
32
- </html>
package/examples/remote.html DELETED
@@ -1,32 +0,0 @@
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
- const {remote} = await import("../types.js");
17
-
18
- self.variables({myRemote:"object"},{reactive,remote:remote("http://localhost:8000/remote.json")});
19
-
20
- await myRemote; // must await remotes before the first time they are used, e.g. before HTML is rendered
21
-
22
- self.patch = () => {
23
- const json = JSON.parse(document.body.getElementById("myRemote").value);
24
- Object.assign(myRemote,json);
25
- };
26
-
27
- self.replace = () => {
28
- myRemote = JSON.parse(document.body.getElementById("myRemote").value);
29
- };
30
- </script>
31
- </body>
32
- </html>
package/examples/sensors/index.html DELETED
@@ -1,30 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Lightview:Sensor Demo</title>
4
- <link href="../../components/gauge.html" rel="module">
5
- <script src="../../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <div style="width:100%;text-align:center">
9
- <div style="display:inline-block">
10
- <l-gauge id="sensor1" type="Gauge" label="Sensor One" value="50"></l-gauge>
11
- </div>
12
-
13
- <div style="display:inline-block">
14
- <l-gauge id="sensor2" type="Gauge" label="Sensor Two" value="50"></l-gauge>
15
- </div>
16
- </div>
17
-
18
- <script type="lightview/module">
19
- const {remote} = await import("../../types.js");
20
- self.variables({sensor1:"number"},{remote:remote({ttl:5000,path:"https://lightview.dev/sensors/sensor1"})});
21
- self.variables({sensor2:"number"},{remote:remote({ttl:7500,path:"https://lightview.dev/sensors/sensor2"})});
22
- await sensor1;
23
- await sensor2;
24
- addEventListener("change",({variableName,value}) => {
25
- const sensor = document.body.getElementById(variableName);
26
- sensor.setValue(value);
27
- });
28
- </script>
29
- </body>
30
- </html>
package/examples/todo.html DELETED
@@ -1,38 +0,0 @@
1
- <html>
2
- <head>
3
- <title>Lightview:Examples:ToDo</title>
4
- <script src="../lightview.js?as=x-body"></script>
5
- </head>
6
- <body>
7
- <input type="text" value="${newItem}" placeholder="new todo item...">
8
- <button l-on:click="${addToList}">Add</button>
9
- <div l-for="${todoList}">
10
- <input value="${item.status}" type="checkbox">
11
- <span class="${item.status ? 'checked' : ''}">${item.text}</span>
12
- <span l-on:click="({self}) => self.removeFromList(${index})">X>
13
- <br/>
14
- </div>
15
- <script type="lightview/module">
16
- self.variables(
17
- { todoList: Array },
18
- {
19
- reactive,
20
- set: [
21
- {text: 'Write my first post', status: true},
22
- {text: 'Upload the post to the blog', status: false}
23
- ]
24
- }
25
- );
26
- self.addToList = () => {
27
- todoList = [...todoList, {text: newItem, status: false}];
28
- newItem = '';
29
- };
30
- self.removeFromList = (index) => {
31
- todoList.splice(index, 1);
32
- };
33
- </script>
34
- <style>
35
- .checked { text-decoration: line-through; }
36
- </style>
37
- </body>
38
- </html>
package/examples/top.html DELETED
@@ -1,10 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Top</title>
4
- <link href="./nested.html" rel="module">
5
- <script src="../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <l-nested></l-nested>
9
- </body>
10
- </html>