lightview 1.8.2 → 2.0.1

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 (262) hide show
  1. package/.codacy/cli.sh +149 -0
  2. package/.codacy/codacy.yaml +15 -0
  3. package/.github/instructions/codacy.instructions.md +72 -0
  4. package/.wranglerignore +21 -0
  5. package/README.md +1330 -19
  6. package/_headers +4 -0
  7. package/build.js +70 -0
  8. package/components/actions/button.js +151 -0
  9. package/components/actions/dropdown.js +120 -0
  10. package/components/actions/modal.js +146 -0
  11. package/components/actions/swap.js +118 -0
  12. package/components/daisyui.js +288 -0
  13. package/components/data-display/accordion.js +128 -0
  14. package/components/data-display/alert.js +112 -0
  15. package/components/data-display/avatar.js +170 -0
  16. package/components/data-display/badge.js +82 -0
  17. package/components/data-display/card.js +151 -0
  18. package/components/data-display/carousel.js +94 -0
  19. package/components/data-display/chart.js +220 -0
  20. package/components/data-display/chat.js +128 -0
  21. package/components/data-display/collapse.js +103 -0
  22. package/components/data-display/countdown.js +69 -0
  23. package/components/data-display/diff.js +111 -0
  24. package/components/data-display/kbd.js +65 -0
  25. package/components/data-display/loading.js +75 -0
  26. package/components/data-display/progress.js +79 -0
  27. package/components/data-display/radial-progress.js +88 -0
  28. package/components/data-display/skeleton.js +66 -0
  29. package/components/data-display/stats.js +159 -0
  30. package/components/data-display/table.js +146 -0
  31. package/components/data-display/timeline.js +146 -0
  32. package/components/data-display/toast.js +72 -0
  33. package/components/data-display/tooltip.js +74 -0
  34. package/components/data-input/checkbox.js +253 -0
  35. package/components/data-input/file-input.js +224 -0
  36. package/components/data-input/input.js +264 -0
  37. package/components/data-input/radio.js +338 -0
  38. package/components/data-input/range.js +204 -0
  39. package/components/data-input/rating.js +219 -0
  40. package/components/data-input/select.js +287 -0
  41. package/components/data-input/textarea.js +287 -0
  42. package/components/data-input/toggle.js +201 -0
  43. package/components/index.js +137 -0
  44. package/components/layout/divider.js +72 -0
  45. package/components/layout/drawer.js +142 -0
  46. package/components/layout/footer.js +100 -0
  47. package/components/layout/hero.js +109 -0
  48. package/components/layout/indicator.js +90 -0
  49. package/components/layout/join.js +78 -0
  50. package/components/layout/navbar.js +110 -0
  51. package/components/navigation/breadcrumbs.js +91 -0
  52. package/components/navigation/dock.js +103 -0
  53. package/components/navigation/menu.js +126 -0
  54. package/components/navigation/pagination.js +105 -0
  55. package/components/navigation/steps.js +89 -0
  56. package/components/navigation/tabs.css +177 -0
  57. package/components/navigation/tabs.js +123 -0
  58. package/components/theme/theme-switch.css +65 -0
  59. package/components/theme/theme-switch.js +177 -0
  60. package/docs/about.html +164 -0
  61. package/docs/api/computed.html +184 -0
  62. package/docs/api/effects.html +173 -0
  63. package/docs/api/elements.html +180 -0
  64. package/docs/api/enhance.html +225 -0
  65. package/docs/api/hypermedia.html +165 -0
  66. package/docs/api/index.html +178 -0
  67. package/docs/api/nav.html +18 -0
  68. package/docs/api/signals.html +136 -0
  69. package/docs/api/state.html +217 -0
  70. package/docs/assets/images/logo-favicon.svg +42 -0
  71. package/docs/assets/images/logo-static.svg +40 -0
  72. package/docs/assets/images/logo.svg +66 -0
  73. package/docs/assets/js/examplify.js +395 -0
  74. package/docs/assets/styles/site.css +1102 -0
  75. package/docs/assets/styles/themes.css +236 -0
  76. package/docs/components/accordion.html +439 -0
  77. package/docs/components/alert.html +528 -0
  78. package/docs/components/avatar.html +586 -0
  79. package/docs/components/badge.html +531 -0
  80. package/docs/components/breadcrumbs.html +278 -0
  81. package/docs/components/button.html +579 -0
  82. package/docs/components/card.html +561 -0
  83. package/docs/components/carousel.html +286 -0
  84. package/docs/components/chart-area.html +702 -0
  85. package/docs/components/chart-bar.html +782 -0
  86. package/docs/components/chart-column.html +735 -0
  87. package/docs/components/chart-line.html +794 -0
  88. package/docs/components/chart-pie.html +823 -0
  89. package/docs/components/chart.html +610 -15
  90. package/docs/components/chat.html +547 -0
  91. package/docs/components/checkbox.html +641 -0
  92. package/docs/components/collapse.html +536 -0
  93. package/docs/components/component-nav.html +53 -0
  94. package/docs/components/countdown.html +470 -0
  95. package/docs/components/diff.html +245 -0
  96. package/docs/components/divider.html +240 -0
  97. package/docs/components/dock.html +277 -0
  98. package/docs/components/drawer.html +515 -0
  99. package/docs/components/dropdown.html +479 -0
  100. package/docs/components/file-input.html +591 -0
  101. package/docs/components/footer.html +301 -0
  102. package/docs/components/gallery.html +504 -0
  103. package/docs/components/hero.html +264 -0
  104. package/docs/components/index.css +840 -0
  105. package/docs/components/index.html +735 -0
  106. package/docs/components/indicator.html +342 -0
  107. package/docs/components/input.html +644 -0
  108. package/docs/components/join.html +285 -0
  109. package/docs/components/kbd.html +322 -0
  110. package/docs/components/loading.html +521 -0
  111. package/docs/components/menu.html +461 -0
  112. package/docs/components/modal.html +639 -0
  113. package/docs/components/navbar.html +321 -0
  114. package/docs/components/pagination.html +279 -0
  115. package/docs/components/progress.html +514 -0
  116. package/docs/components/radial-progress.html +434 -0
  117. package/docs/components/radio.html +655 -0
  118. package/docs/components/range.html +611 -0
  119. package/docs/components/rating.html +642 -0
  120. package/docs/components/select.html +696 -0
  121. package/docs/components/sidebar-setup.js +93 -0
  122. package/docs/components/skeleton.html +447 -0
  123. package/docs/components/spinner.html +68 -0
  124. package/docs/components/stats.html +486 -0
  125. package/docs/components/steps.html +356 -0
  126. package/docs/components/swap.html +517 -0
  127. package/docs/components/switch.html +68 -0
  128. package/docs/components/table.html +668 -0
  129. package/docs/components/tabs.html +506 -0
  130. package/docs/components/text-input.html +68 -0
  131. package/docs/components/textarea.html +603 -0
  132. package/docs/components/timeline.html +485 -42
  133. package/docs/components/toast.html +474 -0
  134. package/docs/components/toggle.html +564 -0
  135. package/docs/components/tooltip.html +423 -0
  136. package/docs/examples/getting-started-example.html +40 -0
  137. package/docs/examples/index.html +93 -0
  138. package/docs/getting-started/index.html +739 -0
  139. package/docs/getting-started/reviews.html +23 -0
  140. package/docs/getting-started/reviews.odom +108 -0
  141. package/docs/getting-started/reviews.vdom +84 -0
  142. package/docs/index.html +132 -42
  143. package/docs/playground.html +416 -0
  144. package/docs/router.html +285 -0
  145. package/docs/styles/index.html +190 -0
  146. package/functions/_middleware.js +32 -0
  147. package/index.html +309 -0
  148. package/lightview-router.js +364 -0
  149. package/lightview-x.js +1577 -0
  150. package/lightview.js +659 -1200
  151. package/middleware/locale.js +25 -0
  152. package/middleware/markdown.js +44 -0
  153. package/middleware/notFound.js +37 -0
  154. package/package.json +27 -41
  155. package/watch.js +92 -0
  156. package/wrangler.toml +12 -0
  157. package/.idea/lightview.iml +0 -12
  158. package/.idea/modules.xml +0 -8
  159. package/.idea/vcs.xml +0 -6
  160. package/LICENSE +0 -21
  161. package/codepen-no-tabs-embed.css +0 -2
  162. package/docs/CNAME +0 -1
  163. package/docs/api.html +0 -674
  164. package/docs/blank.html +0 -10
  165. package/docs/comparedto.html +0 -89
  166. package/docs/components/chart-repl.html +0 -69
  167. package/docs/components/components.js +0 -113
  168. package/docs/components/contents.html +0 -17
  169. package/docs/components/gantt-repl.html +0 -61
  170. package/docs/components/gantt.html +0 -42
  171. package/docs/components/gauge-repl.html +0 -66
  172. package/docs/components/gauge.html +0 -20
  173. package/docs/components/orgchart-repl.html +0 -64
  174. package/docs/components/orgchart.html +0 -41
  175. package/docs/components/repl-as-src.html +0 -17
  176. package/docs/components/repl-repl.html +0 -95
  177. package/docs/components/repl.html +0 -527
  178. package/docs/components/timeline-repl.html +0 -72
  179. package/docs/components.html +0 -14
  180. package/docs/css/highlightjs.min.css +0 -9
  181. package/docs/css/tutorial.css +0 -35
  182. package/docs/examples/anchor.html +0 -11
  183. package/docs/examples/chart.html +0 -34
  184. package/docs/examples/counter.html +0 -26
  185. package/docs/examples/counter.test.mjs +0 -47
  186. package/docs/examples/counter2.html +0 -26
  187. package/docs/examples/directives.html +0 -79
  188. package/docs/examples/foreign.html +0 -50
  189. package/docs/examples/forgeinform.html +0 -98
  190. package/docs/examples/form.html +0 -61
  191. package/docs/examples/gauge.html +0 -18
  192. package/docs/examples/invalid-template-literals.html +0 -44
  193. package/docs/examples/medium/remote.html +0 -60
  194. package/docs/examples/message.html +0 -18
  195. package/docs/examples/nested.html +0 -11
  196. package/docs/examples/object-bound-form.html +0 -34
  197. package/docs/examples/remote-server.js +0 -51
  198. package/docs/examples/remote.html +0 -34
  199. package/docs/examples/remote.json +0 -1
  200. package/docs/examples/scratch.html +0 -69
  201. package/docs/examples/sensors/index.html +0 -44
  202. package/docs/examples/sensors/sensor-server.js +0 -30
  203. package/docs/examples/shared.html +0 -41
  204. package/docs/examples/template.html +0 -33
  205. package/docs/examples/timeline.html +0 -21
  206. package/docs/examples/todo.html +0 -40
  207. package/docs/examples/top.html +0 -10
  208. package/docs/examples/types.html +0 -94
  209. package/docs/examples/xor.html +0 -62
  210. package/docs/examples.html +0 -25
  211. package/docs/javascript/codejar.min.js +0 -8
  212. package/docs/javascript/highlightjs.min.js +0 -1173
  213. package/docs/javascript/isomorphic-git.js +0 -9
  214. package/docs/javascript/json5.min.js +0 -1
  215. package/docs/javascript/lightning-fs.js +0 -1
  216. package/docs/javascript/lightview.js +0 -1285
  217. package/docs/javascript/marked.min.js +0 -6
  218. package/docs/javascript/peerjs.min.js +0 -70
  219. package/docs/javascript/turndown.js +0 -973
  220. package/docs/javascript/types.js +0 -606
  221. package/docs/javascript/utils.js +0 -45
  222. package/docs/lightview.html +0 -63
  223. package/docs/old_index.html +0 -965
  224. package/docs/old_index.md +0 -1132
  225. package/docs/slidein.html +0 -51
  226. package/docs/tutorial/0-getting-started.html +0 -67
  227. package/docs/tutorial/1-intro-to-variables.html +0 -103
  228. package/docs/tutorial/10-template-components.html +0 -80
  229. package/docs/tutorial/11-linked-components.html +0 -76
  230. package/docs/tutorial/12-imported-components.html +0 -67
  231. package/docs/tutorial/13-input-binding.html +0 -94
  232. package/docs/tutorial/14-automatic-variable-creation.html +0 -74
  233. package/docs/tutorial/15-form-binding.html +0 -110
  234. package/docs/tutorial/16-if-directive.html +0 -60
  235. package/docs/tutorial/17-loop-directives.html +0 -83
  236. package/docs/tutorial/18-sanitizing-and-escaping-input.html +0 -79
  237. package/docs/tutorial/2-imported-and-exported-variables.html +0 -80
  238. package/docs/tutorial/3-data-types.html +0 -89
  239. package/docs/tutorial/4-extended-data-types.html +0 -83
  240. package/docs/tutorial/5-extended-functional-types.html +0 -96
  241. package/docs/tutorial/5.1-extended-functional-types.html +0 -79
  242. package/docs/tutorial/5.2-extended-functional-types.html +0 -70
  243. package/docs/tutorial/6-conventional-javascript.html +0 -75
  244. package/docs/tutorial/7-monitoring-with-observers.html +0 -107
  245. package/docs/tutorial/8-event-listeners.html +0 -65
  246. package/docs/tutorial/9-intro-to-components.html +0 -91
  247. package/docs/tutorial/contents.html +0 -32
  248. package/docs/tutorial/my-component.html +0 -29
  249. package/docs/tutorial/remote-value.json +0 -4
  250. package/docs/websiterepl.html +0 -46
  251. package/jest-puppeteer.config.js +0 -5
  252. package/jest.config.json +0 -12
  253. package/lightview.min.js +0 -1
  254. package/lightview_good.js +0 -1267
  255. package/lightview_optimized.js +0 -1274
  256. package/repl_hold.html +0 -320
  257. package/test/basic.html +0 -104
  258. package/test/basic.test.mjs +0 -315
  259. package/test/extended.html +0 -29
  260. package/test/extended.test.mjs +0 -448
  261. package/types.js +0 -607
  262. package/unsplash.key +0 -1
package/docs/examples/medium/remote.html DELETED
@@ -1,60 +0,0 @@
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 dashboard 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
- add the attributes hidden and l-unhide to eliminate flicker and display of Loading ....
24
- -->
25
- <r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status">
26
- [
27
- ['Label', 'Value'], // gauge will always take two columns, Label and Value
28
- ['Memory', 0],
29
- ['CPU', 0],
30
- ['Network', 0]
31
- ]
32
- </r-chart>
33
- </div>
34
- <script type="lightview/module">
35
- // use local, normal variables for as much as possible
36
- const {remote} = await import("../../types.js"), // load the functional type 'remote`
37
- sensorIndex = { // map sensor names to indexes in the dashboard data
38
- memory:0,
39
- cpu:1,
40
- network:2
41
- },
42
- dashboard = document.body.getElementById("dashboard"),
43
- path = "https://lightview.dev/sensors/"; // replace base path for your own implementation
44
- // create remote reactive variables for sensors with differing refresh rates (ttl in milliseconds)
45
- self.variables({memory:"number"},{remote:remote({ttl:5000,path})});
46
- self.variables({cpu:"number"},{remote:remote({ttl:2500,path})});
47
- self.variables({network:"number"},{remote:remote({ttl:1500,path})});
48
- dashboard.addEventListener("connected",() => {
49
- dashboard.setOptions({ // when dashboard component has finished initializing, set more options
50
- redFrom: 90, redTo: 100,
51
- yellowFrom:75, yellowTo: 90,
52
- minorTicks: 5});
53
- addEventListener("change",({variableName,value}) => { // execute the magic with a localized eventListener
54
- const index = sensorIndex[variableName];
55
- dashboard.setValue(index, 1, value);
56
- });
57
- });
58
- </script>
59
- </body>
60
- </html>
package/docs/examples/message.html DELETED
@@ -1,18 +0,0 @@
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>
package/docs/examples/nested.html DELETED
@@ -1,11 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Nested</title>
4
- <link href="message.html" rel="module">
5
- <script src="../lightview2.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <l-message value="Hello One"></l-message>
9
- <l-message value="Hello Two"></l-message>
10
- </body>
11
- </html>
package/docs/examples/object-bound-form.html DELETED
@@ -1,34 +0,0 @@
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>
package/docs/examples/remote-server.js DELETED
@@ -1,51 +0,0 @@
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
-
package/docs/examples/remote.html DELETED
@@ -1,34 +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
- <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>
package/docs/examples/remote.json DELETED
@@ -1 +0,0 @@
1
- {"name":"joe","age":40}
package/docs/examples/scratch.html DELETED
@@ -1,69 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Scratch</title>
6
- <script src="../../lightview.js?as=x-body"></script>
7
- </head>
8
- <body>
9
- <div style="margin:20px;padding:5px;border:1px;border-style:solid;border-color:${color}">
10
- <p>
11
- <input type="text" value="${color}">
12
- <input type="radio" name="color" value="red">
13
- <input type="radio" name="color" value="yellow">
14
- <input type="radio" name="color" value="green">
15
- <select value="${color}">
16
- <option value="red">red</option>
17
- <option>yellow</option>
18
- <option> green</option>
19
- </select>
20
- <div>Hamburger options:</div>
21
- <select value="${hamburger}" multiple>
22
- <option value="lettuce">lettuce</option>
23
- <option>tomato</option>
24
- <option>cheese</option>
25
- </select>
26
- </p>
27
- Expose: <input type="checkbox" value="${checked}">
28
- <p l-if="${checked}">
29
- Now you've done it. You've exposed me.
30
- </p>
31
- <ul l-for="${hamburger}">
32
- <li>${item}</li>
33
- </ul>
34
- <ul l-for:entries="${hamburger}">
35
- <li>${item[0]}:${item[1]}</li>
36
- </ul>
37
- <ul l-for:values="${hamburger}">
38
- <li>${item}</li>
39
- </ul>
40
- <p id="variables">
41
-
42
- </p>
43
- </div>
44
- <script type="lightview/module">
45
- self.variables({color:string,checked:boolean,hamburger:Array},{reactive});
46
-
47
- color = "green";
48
- checked = true;
49
- hamburger = ["lettuce"];
50
-
51
-
52
- // demo instrumentation
53
- const variableValues = () => {
54
- const el = self.getElementById("variables");
55
- while (el.lastElementChild) el.lastElementChild.remove();
56
- self.getVariableNames().forEach((name) => {
57
- const line = document.createElement("div");
58
- line.innerText = `${name} = ${JSON.stringify(self.getValue(name))}`;
59
- el.appendChild(line);
60
- });
61
- };
62
- variableValues();
63
- addEventListener("change", () => {
64
- variableValues()
65
- });
66
-
67
- </script>
68
- </body>
69
- </html>
package/docs/examples/sensors/index.html DELETED
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Lightview:Sensor Demo</title>
4
- <link href="../../components/gauge-repl.html" rel="module">
5
- <script src="../../../lightview.js?as=x-body"></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>
8
- </head>
9
- <body>
10
- <div style="width:100%;text-align:center">
11
- <div style="display:inline-block">
12
- <l-gauge id="sensor1" type="Gauge" label="Sensor One" value="50"></l-gauge>
13
- </div>
14
-
15
- <div style="display:inline-block">
16
- <l-gauge id="sensor2" type="Gauge" label="Sensor Two" value="50"></l-gauge>
17
- </div>
18
- </div>
19
-
20
- <script id="lightview">
21
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
22
- const {remote} = await import("../../../types.js");
23
- self.variables({sensor1: "number"}, {
24
- remote: remote({
25
- ttl: 5000,
26
- path: "https://lightview.dev/sensors/sensor1"
27
- })
28
- });
29
- self.variables({sensor2: "number"}, {
30
- remote: remote({
31
- ttl: 7500,
32
- path: "https://lightview.dev/sensors/sensor2"
33
- })
34
- });
35
- await sensor1;
36
- await sensor2;
37
- addEventListener("change", ({variableName, value}) => {
38
- const sensor = document.body.getElementById(variableName);
39
- sensor.setValue(value);
40
- });
41
- }
42
- </script>
43
- </body>
44
- </html>
package/docs/examples/sensors/sensor-server.js DELETED
@@ -1,30 +0,0 @@
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", "GET,OPTIONS");
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
- const value = `${40 + Math.round(60 * Math.random())}`;
17
- console.log("GET",req.url,"<-",value);
18
- res.setHeader("Content-Length", value.length);
19
- res.write(value);
20
- res.end();
21
- return;
22
- }
23
- console.log(req.method);
24
- },
25
- server = http.createServer(requestListener);
26
- server.listen(port, host, () => {
27
- console.log(`Server is running on http://${host}:${port}`);
28
- });
29
-
30
-
package/docs/examples/shared.html DELETED
@@ -1,41 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <title>Form</title>
6
- <template id="myform">
7
- ${formname}: <form>
8
- <input type="text" value="${name}">
9
- </form>
10
- <script id="lightview">
11
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
- self.variables({
13
- name: "string"
14
- }, {
15
- shared,
16
- reactive
17
- });
18
-
19
- self.variables({
20
- formname: "string"
21
- }, {
22
- imported
23
- });
24
- }
25
- </script>
26
- </template>
27
- <script src="https://000686818.codepen.website/lightview.js"></script>
28
- <script>
29
- Lightview.createComponent("x-form", document.getElementById("myform"))
30
- </script>
31
- </head>
32
-
33
- <body>
34
- <div style="margin:20px">
35
- <p>Changing one field will change the other. Try it.</p>
36
- <x-form formname="Form1"></x-form>
37
- <x-form formname="Form2"></x-form>
38
- </div>
39
- </body>
40
-
41
- </html>
package/docs/examples/template.html DELETED
@@ -1,33 +0,0 @@
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>
package/docs/examples/timeline.html DELETED
@@ -1,21 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Chart</title>
4
- <link href="../components/timeline-repl.html" rel="module">
5
- <script src="../../lightview.js"></script>
6
- </head>
7
- <body>
8
- <l-timeline 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
- [{ type: 'string', id: 'Position' },{ type: 'string', id: 'Name' },{ type: 'date', id: 'Start' },{ type: 'date', id: 'End' }],
14
- [ '1', 'George Washington', '1789-03-30','1797-02-04'] // Date(1789, 3, 30), Date(1797, 2, 4)
15
- //[ '2', 'John Adams', Date(1797, 2, 4), Date(1801, 2, 4) ],
16
- //[ '3', 'Thomas Jefferson', Date(1801, 2, 4), Date(1809, 2, 4) ]]);
17
- ]
18
- </l-timeline>
19
-
20
- </body>
21
- </html>
package/docs/examples/todo.html DELETED
@@ -1,40 +0,0 @@
1
- <html>
2
- <body>
3
- <script src="./javascript/lightview.js?as=x-body"></script>
4
- <input name="New Todo" value="${newItem}" placeholder="new todo item...">
5
- <button l-on:click="${addToList}">Add ToDo</button>
6
- <div l-for="${todoList}">
7
- <input value="${item.done}" type="checkbox">
8
- <span class="${item.done ? 'checked' : ''}">${item.text}</span>
9
- <span l-on:click="({self}) => self.removeFromList(${index})">X</span>
10
- <br/>
11
- </div>
12
- <script id="lightview">
13
- Lightview.createInputVariables = true;
14
- currentComponent.mount = function() {
15
- this.variables(
16
- {
17
- todoList: Array
18
- },
19
- {
20
- reactive,
21
- set: [
22
- {text: 'Write my first post', done: true},
23
- {text: 'Upload the post to the blog', done: false}
24
- ]
25
- }
26
- );
27
- this.addToList = () => {
28
- todoList = [...todoList, {text: newItem, done: false}];
29
- newItem = '';
30
- };
31
- this.removeFromList = (index) => {
32
- todoList.splice(index, 1);
33
- };
34
- }
35
- </script>
36
- <style>
37
- .checked { text-decoration: line-through; }
38
- </style>
39
- </body>
40
- </html>
package/docs/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>
package/docs/examples/types.html DELETED
@@ -1,94 +0,0 @@
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
- debugger;
20
- self.run = () => {
21
- self.variables({
22
- err: Error,
23
- astring: "string",
24
- asdvancedstring: string({maxlength:10}),
25
- aDate: Date,
26
- });
27
- try {
28
- self.variables({
29
- badvariable: string({maxlength:"10"}),
30
- });
31
- } catch(e) {
32
- err = e;
33
- }
34
- try {
35
- astring = "my string";
36
- } catch (e) {
37
- err = e;
38
- }
39
- try {
40
- asdvancedstring = "my string";
41
- } catch (e) {
42
- err = e;
43
- }
44
- try {
45
- asdvancedstring = "my long string";
46
- } catch (e) {
47
- err = e;
48
- }
49
- try {
50
- astring = 1;
51
- } catch (e) {
52
- err = e;
53
- }
54
- try {
55
- aDate = new Date();
56
- } catch (e) {
57
- err = e;
58
- }
59
- try {
60
- aDate = 1;
61
- } catch (e) {
62
- err = e;
63
- }
64
- try {
65
- err = 1;
66
- } catch (e) {
67
- err = e;
68
- }
69
- };
70
-
71
- // demo instrumentation
72
- self.clear = () => {
73
- const cnsl = self.getElementById("console");
74
- while (cnsl.lastChild) cnsl.lastChild.remove();
75
- };
76
- addEventListener("change", ({
77
- variableName,
78
- value
79
- }) => {
80
- const cnsl = self.getElementById("console");
81
- if (cnsl) {
82
- const message = document.createElement("div");
83
- if (variableName === "err") {
84
- message.innerHTML = `<b>&gt;</b> ${value}<br>`;
85
- } else {
86
- message.innerHTML = `<b>&gt;</b> ${variableName} = ${value}<br>`;
87
- }
88
- cnsl.appendChild(message);
89
- }
90
- });
91
- </script>
92
- </body>
93
-
94
- </html>
package/docs/examples/xor.html DELETED
@@ -1,62 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <template id="audiostream">
6
- <p>${name}</p>
7
- <p>
8
- Play: <input type="checkbox" value="${run}">
9
- </p>
10
- <script id="lightview">
11
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
- self.variables({
13
- run: "boolean"
14
- }, {reactive});
15
- self.variables({
16
- name: "string"
17
- }, {
18
- imported
19
- });
20
- addEventListener("change", ({
21
- variableName,
22
- value
23
- }) => {
24
- if (variableName === "run" && value === true) {
25
- self.siblings.forEach((sibling) => {
26
- sibling.setVariableValue(variableName, false);
27
- })
28
- }
29
- });
30
- }
31
- </script>
32
- </template>
33
- <title>Lightview:Examples:XOR</title>
34
- <script src="../../lightview.js"></script>
35
- <script>
36
- Lightview.createComponent("x-audiostream", document.getElementById("audiostream"))
37
- </script>
38
- </head>
39
-
40
- <body>
41
- <div style="margin:20px">
42
- <table>
43
- <th>
44
- <td colspan="3">Audio Streams</td>
45
- </th>
46
- <tr>
47
- <td style="width:33%;text-align:center">
48
- <x-audiostream name="Classical"></x-audiostream>
49
- </td>
50
- <td style="width:33%;text-align:center">
51
- <x-audiostream name="Country"></x-audiostream>
52
- </td>
53
- <td style="width:33%;text-align:center">
54
- <x-audiostream name="Classic Rock"></x-audiostream>
55
- </td>
56
- </tr>
57
- </table>
58
- </div>
59
-
60
- </body>
61
-
62
- </html>