lightview 1.8.2 → 2.0.0

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 (264) hide show
  1. package/.agent/workflows/daisyui-component-migration.md +155 -0
  2. package/.codacy/cli.sh +149 -0
  3. package/.codacy/codacy.yaml +15 -0
  4. package/.github/instructions/codacy.instructions.md +72 -0
  5. package/.wranglerignore +21 -0
  6. package/README.md +1330 -19
  7. package/_headers +4 -0
  8. package/build.js +70 -0
  9. package/components/actions/button.js +151 -0
  10. package/components/actions/dropdown.js +120 -0
  11. package/components/actions/modal.js +146 -0
  12. package/components/actions/swap.js +118 -0
  13. package/components/daisyui.js +288 -0
  14. package/components/data-display/accordion.js +128 -0
  15. package/components/data-display/alert.js +112 -0
  16. package/components/data-display/avatar.js +170 -0
  17. package/components/data-display/badge.js +82 -0
  18. package/components/data-display/card.js +151 -0
  19. package/components/data-display/carousel.js +94 -0
  20. package/components/data-display/chart.js +220 -0
  21. package/components/data-display/chat.js +128 -0
  22. package/components/data-display/collapse.js +103 -0
  23. package/components/data-display/countdown.js +69 -0
  24. package/components/data-display/diff.js +111 -0
  25. package/components/data-display/kbd.js +65 -0
  26. package/components/data-display/loading.js +75 -0
  27. package/components/data-display/progress.js +79 -0
  28. package/components/data-display/radial-progress.js +88 -0
  29. package/components/data-display/skeleton.js +66 -0
  30. package/components/data-display/stats.js +159 -0
  31. package/components/data-display/table.js +146 -0
  32. package/components/data-display/timeline.js +146 -0
  33. package/components/data-display/toast.js +72 -0
  34. package/components/data-display/tooltip.js +74 -0
  35. package/components/data-input/checkbox.js +253 -0
  36. package/components/data-input/file-input.js +224 -0
  37. package/components/data-input/input.js +264 -0
  38. package/components/data-input/radio.js +338 -0
  39. package/components/data-input/range.js +204 -0
  40. package/components/data-input/rating.js +219 -0
  41. package/components/data-input/select.js +287 -0
  42. package/components/data-input/textarea.js +287 -0
  43. package/components/data-input/toggle.js +201 -0
  44. package/components/index.js +137 -0
  45. package/components/layout/divider.js +72 -0
  46. package/components/layout/drawer.js +142 -0
  47. package/components/layout/footer.js +100 -0
  48. package/components/layout/hero.js +109 -0
  49. package/components/layout/indicator.js +90 -0
  50. package/components/layout/join.js +78 -0
  51. package/components/layout/navbar.js +110 -0
  52. package/components/navigation/breadcrumbs.js +91 -0
  53. package/components/navigation/dock.js +103 -0
  54. package/components/navigation/menu.js +126 -0
  55. package/components/navigation/pagination.js +105 -0
  56. package/components/navigation/steps.js +89 -0
  57. package/components/navigation/tabs.css +177 -0
  58. package/components/navigation/tabs.js +123 -0
  59. package/components/theme/theme-switch.css +65 -0
  60. package/components/theme/theme-switch.js +177 -0
  61. package/docs/about.html +164 -0
  62. package/docs/api/computed.html +184 -0
  63. package/docs/api/effects.html +173 -0
  64. package/docs/api/elements.html +180 -0
  65. package/docs/api/enhance.html +225 -0
  66. package/docs/api/hypermedia.html +165 -0
  67. package/docs/api/index.html +178 -0
  68. package/docs/api/nav.html +18 -0
  69. package/docs/api/signals.html +136 -0
  70. package/docs/api/state.html +217 -0
  71. package/docs/assets/images/logo-favicon.svg +42 -0
  72. package/docs/assets/images/logo-static.svg +40 -0
  73. package/docs/assets/images/logo.svg +66 -0
  74. package/docs/assets/js/examplify.js +395 -0
  75. package/docs/assets/styles/site.css +1102 -0
  76. package/docs/assets/styles/themes.css +236 -0
  77. package/docs/components/accordion.html +439 -0
  78. package/docs/components/alert.html +528 -0
  79. package/docs/components/avatar.html +586 -0
  80. package/docs/components/badge.html +531 -0
  81. package/docs/components/breadcrumbs.html +278 -0
  82. package/docs/components/button.html +579 -0
  83. package/docs/components/card.html +561 -0
  84. package/docs/components/carousel.html +286 -0
  85. package/docs/components/chart-area.html +702 -0
  86. package/docs/components/chart-bar.html +782 -0
  87. package/docs/components/chart-column.html +735 -0
  88. package/docs/components/chart-line.html +794 -0
  89. package/docs/components/chart-pie.html +823 -0
  90. package/docs/components/chart.html +610 -15
  91. package/docs/components/chat.html +547 -0
  92. package/docs/components/checkbox.html +641 -0
  93. package/docs/components/collapse.html +536 -0
  94. package/docs/components/component-nav.html +53 -0
  95. package/docs/components/countdown.html +470 -0
  96. package/docs/components/diff.html +245 -0
  97. package/docs/components/divider.html +240 -0
  98. package/docs/components/dock.html +277 -0
  99. package/docs/components/drawer.html +515 -0
  100. package/docs/components/dropdown.html +479 -0
  101. package/docs/components/file-input.html +591 -0
  102. package/docs/components/footer.html +301 -0
  103. package/docs/components/gallery.html +504 -0
  104. package/docs/components/hero.html +264 -0
  105. package/docs/components/index.css +840 -0
  106. package/docs/components/index.html +735 -0
  107. package/docs/components/indicator.html +342 -0
  108. package/docs/components/input.html +644 -0
  109. package/docs/components/join.html +285 -0
  110. package/docs/components/kbd.html +322 -0
  111. package/docs/components/loading.html +521 -0
  112. package/docs/components/menu.html +461 -0
  113. package/docs/components/modal.html +639 -0
  114. package/docs/components/navbar.html +321 -0
  115. package/docs/components/pagination.html +279 -0
  116. package/docs/components/progress.html +514 -0
  117. package/docs/components/radial-progress.html +434 -0
  118. package/docs/components/radio.html +655 -0
  119. package/docs/components/range.html +611 -0
  120. package/docs/components/rating.html +642 -0
  121. package/docs/components/select.html +696 -0
  122. package/docs/components/sidebar-setup.js +93 -0
  123. package/docs/components/skeleton.html +447 -0
  124. package/docs/components/spinner.html +68 -0
  125. package/docs/components/stats.html +486 -0
  126. package/docs/components/steps.html +356 -0
  127. package/docs/components/swap.html +517 -0
  128. package/docs/components/switch.html +68 -0
  129. package/docs/components/table.html +668 -0
  130. package/docs/components/tabs.html +506 -0
  131. package/docs/components/text-input.html +68 -0
  132. package/docs/components/textarea.html +603 -0
  133. package/docs/components/timeline.html +485 -42
  134. package/docs/components/toast.html +474 -0
  135. package/docs/components/toggle.html +564 -0
  136. package/docs/components/tooltip.html +423 -0
  137. package/docs/examples/getting-started-example.html +40 -0
  138. package/docs/examples/index.html +93 -0
  139. package/docs/getting-started/index.html +739 -0
  140. package/docs/getting-started/reviews.html +23 -0
  141. package/docs/getting-started/reviews.odom +108 -0
  142. package/docs/getting-started/reviews.vdom +84 -0
  143. package/docs/index.html +132 -42
  144. package/docs/playground.html +416 -0
  145. package/docs/router.html +285 -0
  146. package/docs/styles/index.html +190 -0
  147. package/functions/_middleware.js +32 -0
  148. package/index.html +309 -0
  149. package/lightview-router.js +364 -0
  150. package/lightview-x.js +1577 -0
  151. package/lightview.js +659 -1200
  152. package/lightview.js.backup +793 -0
  153. package/middleware/locale.js +25 -0
  154. package/middleware/markdown.js +44 -0
  155. package/middleware/notFound.js +37 -0
  156. package/package.json +27 -41
  157. package/watch.js +92 -0
  158. package/wrangler.toml +12 -0
  159. package/.idea/lightview.iml +0 -12
  160. package/.idea/modules.xml +0 -8
  161. package/.idea/vcs.xml +0 -6
  162. package/LICENSE +0 -21
  163. package/codepen-no-tabs-embed.css +0 -2
  164. package/docs/CNAME +0 -1
  165. package/docs/api.html +0 -674
  166. package/docs/blank.html +0 -10
  167. package/docs/comparedto.html +0 -89
  168. package/docs/components/chart-repl.html +0 -69
  169. package/docs/components/components.js +0 -113
  170. package/docs/components/contents.html +0 -17
  171. package/docs/components/gantt-repl.html +0 -61
  172. package/docs/components/gantt.html +0 -42
  173. package/docs/components/gauge-repl.html +0 -66
  174. package/docs/components/gauge.html +0 -20
  175. package/docs/components/orgchart-repl.html +0 -64
  176. package/docs/components/orgchart.html +0 -41
  177. package/docs/components/repl-as-src.html +0 -17
  178. package/docs/components/repl-repl.html +0 -95
  179. package/docs/components/repl.html +0 -527
  180. package/docs/components/timeline-repl.html +0 -72
  181. package/docs/components.html +0 -14
  182. package/docs/css/highlightjs.min.css +0 -9
  183. package/docs/css/tutorial.css +0 -35
  184. package/docs/examples/anchor.html +0 -11
  185. package/docs/examples/chart.html +0 -34
  186. package/docs/examples/counter.html +0 -26
  187. package/docs/examples/counter.test.mjs +0 -47
  188. package/docs/examples/counter2.html +0 -26
  189. package/docs/examples/directives.html +0 -79
  190. package/docs/examples/foreign.html +0 -50
  191. package/docs/examples/forgeinform.html +0 -98
  192. package/docs/examples/form.html +0 -61
  193. package/docs/examples/gauge.html +0 -18
  194. package/docs/examples/invalid-template-literals.html +0 -44
  195. package/docs/examples/medium/remote.html +0 -60
  196. package/docs/examples/message.html +0 -18
  197. package/docs/examples/nested.html +0 -11
  198. package/docs/examples/object-bound-form.html +0 -34
  199. package/docs/examples/remote-server.js +0 -51
  200. package/docs/examples/remote.html +0 -34
  201. package/docs/examples/remote.json +0 -1
  202. package/docs/examples/scratch.html +0 -69
  203. package/docs/examples/sensors/index.html +0 -44
  204. package/docs/examples/sensors/sensor-server.js +0 -30
  205. package/docs/examples/shared.html +0 -41
  206. package/docs/examples/template.html +0 -33
  207. package/docs/examples/timeline.html +0 -21
  208. package/docs/examples/todo.html +0 -40
  209. package/docs/examples/top.html +0 -10
  210. package/docs/examples/types.html +0 -94
  211. package/docs/examples/xor.html +0 -62
  212. package/docs/examples.html +0 -25
  213. package/docs/javascript/codejar.min.js +0 -8
  214. package/docs/javascript/highlightjs.min.js +0 -1173
  215. package/docs/javascript/isomorphic-git.js +0 -9
  216. package/docs/javascript/json5.min.js +0 -1
  217. package/docs/javascript/lightning-fs.js +0 -1
  218. package/docs/javascript/lightview.js +0 -1285
  219. package/docs/javascript/marked.min.js +0 -6
  220. package/docs/javascript/peerjs.min.js +0 -70
  221. package/docs/javascript/turndown.js +0 -973
  222. package/docs/javascript/types.js +0 -606
  223. package/docs/javascript/utils.js +0 -45
  224. package/docs/lightview.html +0 -63
  225. package/docs/old_index.html +0 -965
  226. package/docs/old_index.md +0 -1132
  227. package/docs/slidein.html +0 -51
  228. package/docs/tutorial/0-getting-started.html +0 -67
  229. package/docs/tutorial/1-intro-to-variables.html +0 -103
  230. package/docs/tutorial/10-template-components.html +0 -80
  231. package/docs/tutorial/11-linked-components.html +0 -76
  232. package/docs/tutorial/12-imported-components.html +0 -67
  233. package/docs/tutorial/13-input-binding.html +0 -94
  234. package/docs/tutorial/14-automatic-variable-creation.html +0 -74
  235. package/docs/tutorial/15-form-binding.html +0 -110
  236. package/docs/tutorial/16-if-directive.html +0 -60
  237. package/docs/tutorial/17-loop-directives.html +0 -83
  238. package/docs/tutorial/18-sanitizing-and-escaping-input.html +0 -79
  239. package/docs/tutorial/2-imported-and-exported-variables.html +0 -80
  240. package/docs/tutorial/3-data-types.html +0 -89
  241. package/docs/tutorial/4-extended-data-types.html +0 -83
  242. package/docs/tutorial/5-extended-functional-types.html +0 -96
  243. package/docs/tutorial/5.1-extended-functional-types.html +0 -79
  244. package/docs/tutorial/5.2-extended-functional-types.html +0 -70
  245. package/docs/tutorial/6-conventional-javascript.html +0 -75
  246. package/docs/tutorial/7-monitoring-with-observers.html +0 -107
  247. package/docs/tutorial/8-event-listeners.html +0 -65
  248. package/docs/tutorial/9-intro-to-components.html +0 -91
  249. package/docs/tutorial/contents.html +0 -32
  250. package/docs/tutorial/my-component.html +0 -29
  251. package/docs/tutorial/remote-value.json +0 -4
  252. package/docs/websiterepl.html +0 -46
  253. package/jest-puppeteer.config.js +0 -5
  254. package/jest.config.json +0 -12
  255. package/lightview.min.js +0 -1
  256. package/lightview_good.js +0 -1267
  257. package/lightview_optimized.js +0 -1274
  258. package/repl_hold.html +0 -320
  259. package/test/basic.html +0 -104
  260. package/test/basic.test.mjs +0 -315
  261. package/test/extended.html +0 -29
  262. package/test/extended.test.mjs +0 -448
  263. package/types.js +0 -607
  264. package/unsplash.key +0 -1
package/docs/tutorial/5-extended-functional-types.html DELETED
@@ -1,96 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Extended Functional Type:Remote</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Extended Functional Type - Remote
19
-
20
- In addition to `constant`, `exported`, `imported`, and `reactive`, Lightview supports the functional types `remote`,
21
- `shared`, and `observed`.
22
-
23
- - `remote` automatically gets a value from a URL
24
- - `shared` automatically synchronizes a value across all instances of the same component
25
- - `observed` in like import, except it changes the variable value every time its corresponding attribute changes on the component
26
-
27
- These types must be loaded from the file `types.js` as shown in the example REPL.
28
-
29
- If you want to import all of them in an efficient manner, do this:
30
-
31
- ```javascript
32
- const {remote, shared, observed} = await import("../types.js");
33
- this.variables(
34
- { remote: "function"},
35
- { constant: remote }
36
- );
37
- this.variables(
38
- { remote: "function"},
39
- { constant: shared }
40
- );
41
- this.variables(
42
- { remote: "function"},
43
- { constant: observed }
44
- );
45
- ```
46
-
47
- For the demo REPL, the file located at `./tutorial/remote-value.json` has the contents `{"name":"joe","age":27}`. Try replacing
48
- `./tutorial/remote-value.json` with `http://api.open-notify.org/astros.json` to see how many people are in space right now.
49
-
50
- You may have noted that although `remote` is imported as a function, it is not used as such. For details on how to use
51
- `remote` with a configuration object to support TTL based auto-refresh, automatically sending changed values to the server
52
- and custom get/patch see the [API documentation](../api.html#remote).
53
-
54
- The `observed` and `shared` types are covered on the next pages.
55
-
56
- </div>
57
- <button class="nav-previous"><a href="./4-extended-data-types.html" target="content">Previous</a></button>
58
- <button class="nav-next"><a href="./5.1-extended-functional-types.html" target="content">Next</a></button>
59
- </div>
60
- <div style="float:right;margin-right:10px">
61
- <h2></h2>
62
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
63
- <div slot="bodyhtml"></div>
64
- <div slot="script"></div>
65
- <template slot="src">
66
- <l-head>
67
- <script src="../javascript/lightview.js?as=x-body"></script>
68
- </l-head>
69
- <l-body>
70
- Result: ${result}
71
- </l-body>
72
- <script id="lightview">
73
- currentComponent.mount = async function() {
74
- this.variables(
75
- { remote: "function"},
76
- { constant: (await import("../javascript/types.js")).remote }
77
- );
78
- this.variables(
79
- {
80
- result:"object"
81
- },
82
- {
83
- reactive,
84
- remote:"./remote-value.json"
85
- }
86
- );
87
- }
88
- </script>
89
- </template>
90
- </l-repl>
91
- </div>
92
- <script>
93
- processMarkdown();
94
- </script>
95
- </body>
96
- </html>
package/docs/tutorial/5.1-extended-functional-types.html DELETED
@@ -1,79 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Extended Functional Type:Shared</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Extended Functional Type - Shared
19
-
20
- The extended functional type `shared` automatically synchronizes a value across all instances of the same component.
21
-
22
- The `shared` type must be loaded from the file `types.js` as shown in the example REPL.
23
-
24
- In this example, we provide at attribute value on only one of the &lt;my-input&gt; tags and it is automatically
25
- propagated as a value to the other tag. Try editing the values.
26
-
27
- Note how the `myinput` component it defined in a &lt;template&gt; tag rather than another file. This is
28
- covered in more detail in the [Template Components](./10-template-components.html) section of the tutorial.
29
-
30
-
31
- </div>
32
- <button class="nav-previous"><a href="./5-extended-functional-types.html" target="content">Previous</a></button>
33
- <button class="nav-next"><a href="./5.2-extended-functional-types.html" target="content">Next</a></button>
34
- </div>
35
- <div style="float:right;margin-right:10px">
36
- <h2></h2>
37
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
38
- <div slot="headhtml"></div>
39
- <div slot="bodyhtml"></div>
40
- <template slot="src">
41
- <l-head>
42
- <template id="my-input">
43
- Name: <input value="${name}">
44
- <script id="lightview">
45
- currentComponent.mount = async function() {
46
- this.variables(
47
- { shared: "function"},
48
- { constant: (await import("../javascript/types.js")).shared }
49
- );
50
- this.variables(
51
- {
52
- name:"string"
53
- },
54
- {
55
- shared,
56
- imported,
57
- reactive
58
- }
59
- );
60
- }
61
- </script>
62
- </template>
63
- <script src="../javascript/lightview.js?"></script>
64
- </l-head>
65
- <l-body>
66
- <script>
67
- Lightview.createComponent("my-input", document.getElementById("my-input"))
68
- </script>
69
- <my-input></my-input><br>
70
- <my-input name="joe"></my-input>
71
- </l-body>
72
- </template>
73
- </l-repl>
74
- </div>
75
- <script>
76
- processMarkdown();
77
- </script>
78
- </body>
79
- </html>
package/docs/tutorial/5.2-extended-functional-types.html DELETED
@@ -1,70 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Extended Functional Type:Observed</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Extended Functional Type - Observed
19
-
20
- Unlike `imported` variables which only get the value of an attribute when the component is created, `observed` attributes
21
- update the associated variable every time the attribute changes.
22
-
23
- Clicking on the `Change Attribute` button sets a new value for the attribute "name". Lightview detects this and updates the
24
- variable `name`. Since `name` is also `reactive`, the HTML nodes referencing it are also updated.
25
-
26
- </div>
27
- <button class="nav-previous"><a href="./5.1-extended-functional-types.html" target="content">Previous</a></button>
28
- <button class="nav-next"><a href="./6-conventional-javascript.html" target="content">Next</a></button>
29
- </div>
30
- <div style="float:right;margin-right:10px">
31
- <h2></h2>
32
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
33
- <div slot="bodyhtml"></div>
34
- <div slot="script"></div>
35
- <template slot="src">
36
- <l-head>
37
- <script src="../javascript/lightview.js?as=x-body"></script>
38
- </l-head>
39
- <l-body name="joe">
40
- Name: ${name}
41
- <button l-on:click="${changeAttribute}">Change Attribute</button>
42
- </l-body>
43
- <script id="lightview">
44
- currentComponent.mount = async function() {
45
- this.variables(
46
- { observed: "function"},
47
- { constant: (await import("../javascript/types.js")).observed }
48
- );
49
- this.variables(
50
- {
51
- name:"string"
52
- },
53
- {
54
- reactive,
55
- observed
56
- }
57
- );
58
- this.changeAttribute = () => {
59
- this.setAttribute("name","mary" + Math.round(Math.random()*10))
60
- }
61
- }
62
- </script>
63
- </template>
64
- </l-repl>
65
- </div>
66
- <script>
67
- processMarkdown();
68
- </script>
69
- </body>
70
- </html>
package/docs/tutorial/6-conventional-javascript.html DELETED
@@ -1,75 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Conventional Javascript</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Conventional and Lightview Javascript
19
-
20
- All Lightview development involves the creation of components and all Lightview components have at least and at most one
21
- `script` with the id "lightview". There can also be other `script` elements in a component file.
22
-
23
- If you do not explicitly create a component, then (as with this example), the body of the file containing the script is
24
- treated like a component.
25
-
26
- You can use conventional JavaScript with `let`, `const`, closures, etc. inside your Lightview script. And,
27
- Lightview scripts always support a top level `await`, even though they are not declared as `type="module"`.
28
-
29
- Try changing `loops = 5` to another number and watch the script do a countdown. Note that the countdown does not start
30
- until the component has received a `mounted` event. This is the point at which script with the id "lightview" has
31
- been fully processed, i.e. all variables have been declared and initialized and an initial pass has being
32
- made to replace variables in the HTML.
33
-
34
-
35
- </div>
36
- <button class="nav-previous"><a href="./5.2-extended-functional-types.html" target="content">Previous</a></button>
37
- <button class="nav-next"><a href="./7-monitoring-with-observers.html" target="content">Next</a></button>
38
- </div>
39
- <div style="float:right;margin-right:10px">
40
- <h2></h2>
41
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
42
- <div slot="bodyhtml"></div>
43
- <div slot="script"></div>
44
- <template slot="src">
45
- <l-head>
46
- <script src="../javascript/lightview.js?as=x-body"></script>
47
- </l-head>
48
- <l-body>
49
- ${count}
50
- </l-body>
51
- <script id="lightview">
52
- var tick = () => {
53
- return new Promise((resolve) => setTimeout(() => resolve(),1000))
54
- }
55
- currentComponent.mount = function() {
56
- let loops = 5,
57
- i = 0;
58
- this.variables({count:"any"},{reactive,set:loops});
59
- this.addEventListener("mounted",async () => {
60
- while(loops--) {
61
- await tick();
62
- count = loops;
63
- };
64
- count = "Go";
65
- })
66
- }
67
- </script>
68
- </template>
69
- </l-repl>
70
- </div>
71
- <script>
72
- processMarkdown();
73
- </script>
74
- </body>
75
- </html>
package/docs/tutorial/7-monitoring-with-observers.html DELETED
@@ -1,107 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Monitoring With Observers</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Monitoring With Observers
19
-
20
- Lightview supports the observer programming paradigm, a powerful mechanism for responding to changes across one or more
21
- variables.
22
-
23
- To create an observer, wrap a function that references the reactive variables you want to monitor in a call to `observe`.
24
-
25
- Any time the value of one of the variables changes, the function will be called.
26
-
27
- You can cancel an observer by assigning the return value of `observe` to a variable and calling `cancel()` on that value.
28
-
29
- This can be much simpler than setting up event listeners.
30
-
31
- *Note*: In this example we only reference one reactive variable, but you can reference as many as you wish. One observer
32
- can take the place of multiple event listeners. Try pasting this code as the REPL body.
33
-
34
- ```javascript
35
- ${command||""}<br>
36
- ${x}:${y}
37
- ```
38
- And, paste this as the REPL script:
39
-
40
- ```javascript
41
- currentComponent.mount = function() {
42
- this.variables({x:"number",y:"number",command:"string"},{reactive});
43
-
44
- x = 0;
45
- y = 6;
46
-
47
- let previousx, previousy;
48
- let t1, t2;
49
- const observer = observe(() => {
50
- if(x!==y) {
51
- if(x!==previousx) {
52
- previousx = x;
53
- t1 = setTimeout(() => y--,1000);
54
- }
55
- if(y!==previousy) {
56
- previousy = y;
57
- t2 = setTimeout(() => x++,1000);
58
- }
59
- } else {
60
- command = "stop!";
61
- clearTimeout(t1);
62
- clearTimeout(t2);
63
- observer.cancel();
64
- }
65
- });
66
- }
67
- ```
68
-
69
-
70
- </div>
71
- <button class="nav-previous"><a href="./6-conventional-javascript.html" target="content">Previous</a></button>
72
- <button class="nav-next"><a href="./8-event-listeners.html" target="content">Next</a></button>
73
- </div>
74
- <div style="float:right;margin-right:10px">
75
- <h2></h2>
76
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
77
- <div slot="bodyhtml"></div>
78
- <div slot="script"></div>
79
- <template slot="src">
80
- <l-head>
81
- <script src="../javascript/lightview.js?as=x-body"></script>
82
- </l-head>
83
- <l-body>
84
- ${command||""}
85
- </l-body>
86
- <script id="lightview">
87
- currentComponent.mount = function() {
88
- this.variables({count:"number"},{reactive,set:0});
89
- this.variables({command:"string"},{reactive});
90
-
91
- const commands = ["On your marks ...","Get set ...","Go!"];
92
- observe(() => {
93
- if(count < commands.length) {
94
- command = commands[count];
95
- setTimeout(()=>count++,3000)
96
- }
97
- });
98
- }
99
- </script>
100
- </template>
101
- </l-repl>
102
- </div>
103
- <script>
104
- processMarkdown();
105
- </script>
106
- </body>
107
- </html>
package/docs/tutorial/8-event-listeners.html DELETED
@@ -1,65 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Event Listeners</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Event Listeners
19
-
20
- Event listeners can be added to any HTML element using the `l-on:[eventType]` directive, e.g.
21
- `<div l-on:click="${myClickHandler}"></div>`.
22
-
23
- You can choose to keep the listeners private to the component or expose them as properties. To keep them
24
- private, use variables of type "function". To expose them, just define them on `this` or `self`.
25
-
26
- *Caution*: If you define public listeners, make sure their names do not collide with standard HTML element property names,
27
- e.g. `getComputedStyle`.
28
-
29
-
30
- </div>
31
- <button class="nav-previous"><a href="./7-monitoring-with-observers.html" target="content">Previous</a></button>
32
- <button class="nav-next"><a href="./9-intro-to-components.html" target="content">Next</a></button>
33
- </div>
34
- <div style="float:right;margin-right:10px">
35
- <h2></h2>
36
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
37
- <div slot="bodyhtml"></div>
38
- <div slot="script"></div>
39
- <template slot="src">
40
- <l-head>
41
- <script src="../javascript/lightview.js?as=x-body"></script>
42
- </l-head>
43
- <l-body>
44
- <button l-on:click="${onClickPrivate}">Private</button>
45
- <button l-on:click="${onClickPublic}">Public</button>
46
- ${clicked}
47
- </l-body>
48
- <script id="lightview">
49
- currentComponent.mount = function() {
50
- this.variables({clicked:"string"},{reactive,set:""});
51
- this.variables({onClickPrivate:"function"});
52
-
53
- onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
54
-
55
- this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
56
- }
57
- </script>
58
- </template>
59
- </l-repl>
60
- </div>
61
- <script>
62
- processMarkdown();
63
- </script>
64
- </body>
65
- </html>
package/docs/tutorial/9-intro-to-components.html DELETED
@@ -1,91 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Introduction To Components</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../components/repl.html" rel="module">
8
- <link href="../slidein.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
- ## Introduction To Components
19
-
20
- Until this point, we have not shown you the `head` HTML element or used a `style` block.
21
-
22
- All HTML pages using Lightview MUST include include a `lightview.js` file as a regular (not `module`) script in their
23
- head or close to the top of the `body`.
24
-
25
- You MAY treat an entire page as a component by passing `lightview.js` the query string `as=x-body`. The document body
26
- will get replaced with the custom element `x-body`.
27
-
28
- When you use `as=x-body`, the page becomes a component with its HTML rendered in a shadow DOM.
29
-
30
- You MAY include a `style` block that will be isolated to the shadow DOM.
31
-
32
- And, you MAY include a `script` block with the id "lightview", the variables of which are also isolated to the shadow DOM
33
- unless you explicitly add them to an object with higher scope, e.g. `window` or `document`. The execution of the script
34
- is not isolated. The script can walk up the DOM and out of the shadows unless you explicitly render the component in an
35
- `iframe`.
36
-
37
- You may also include other script blocks, which will also be somewhat isolated to the shadow DOM.
38
-
39
- *Note*: If you do not include `id="lightview"` for the script block you expect to provide Lightview type behavior, the
40
- component will not behave properly.
41
-
42
- On this page we continue to let you edit the script block. On the next page we will use a `template` tag to define the
43
- component and create it manually with a regular script. Take the opportunity on this page to inspect the preview area
44
- using your JavaScript debugger and look at the `iframe` code with the id "preview", note how the body gets replaced with
45
- an element named `x-body`.
46
-
47
-
48
- </div>
49
- <button class="nav-previous"><a href="./8-event-listeners.html" target="content">Previous</a></button>
50
- <button class="nav-next"><a href="./10-template-components.html" target="content">Next</a></button>
51
- </div>
52
- <div style="float:right;margin-right:10px">
53
- <h2></h2>
54
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
55
- <div slot="headhtml" readonly></div>
56
- <div slot="bodyhtml"></div>
57
- <div slot="css"></div>
58
- <div slot="script"></div>
59
- <template slot="src">
60
- <l-head>
61
- <script src="../javascript/lightview.js?as=x-body"></script>
62
- </l-head>
63
- <l-body>
64
- <button l-on:click="${onClickPrivate}">Private</button>
65
- <button l-on:click="${onClickPublic}">Public</button>
66
- ${clicked}
67
- </l-body>
68
- <style>
69
- button {
70
- border: none;
71
- border-radius: 5px;
72
- }
73
- </style>
74
- <script id="lightview">
75
- currentComponent.mount = function() {
76
- this.variables({clicked:"string"},{reactive,set:""});
77
- this.variables({onClickPrivate:"function"});
78
-
79
- onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
80
-
81
- this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
82
- }
83
- </script>
84
- </template>
85
- </l-repl>
86
- </div>
87
- <script>
88
- processMarkdown();
89
- </script>
90
- </body>
91
- </html>
package/docs/tutorial/contents.html DELETED
@@ -1,32 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Ligtchview:Tutorial:Contents</title>
6
- </head>
7
- <body>
8
- <ul style="list-style:none;padding-inline-start: 10px">
9
- <li><a href="./0-getting-started.html">Getting Started</a></li>
10
- <li><a href="./1-intro-to-variables.html">Intro To Variables</a></li>
11
- <li><a href="./2-imported-and-exported-variables.html">Imported and Exported Variables</a></li>
12
- <li><a href="./3-data-types.html">Data Types</a></li>
13
- <li><a href="./4-extended-data-types.html">Extended Data Types</a></li>
14
- <li><a href="./5-extended-functional-types.html">Extended Functional Type: Remote</a></li>
15
- <li><a href="./5.1-extended-functional-types.html">Extended Functional Type: Shared</a></li>
16
- <li><a href="./5.2-extended-functional-types.html">Extended Functional Type: Observed</a></li>
17
- <li><a href="./6-conventional-javascript.html">Conventional and Lightview JavaScript</a></li>
18
- <li><a href="./7-monitoring-with-observers.html">Monitoring with Observers</a></li>
19
- <li><a href="./8-event-listeners.html">Event Listeners</a></li>
20
- <li><a href="./9-intro-to-components.html">Intro to Components</a></li>
21
- <li><a href="./10-template-components.html">Template Components</a></li>
22
- <li><a href="./11-linked-components.html">Linked Components</a></li>
23
- <li><a href="./12-imported-components.html">Imported Components</a></li>
24
- <li><a href="./13-input-binding.html">Input Binding</a></li>
25
- <li><a href="./14-automatic-variable-creation.html">Automatic Variable Creation</a></li>
26
- <li><a href="./15-form-binding.html">Form Binding</a></li>
27
- <li><a href="./16-if-directive.html">If Directive</a></li>
28
- <li><a href="./17-loop-directives.html">Loop Directives</a></li>
29
- <li><a href="./18-sanitizing-and-escaping-input.html">Sanitizing and Escaping HTML</a></li>
30
- </ul>
31
- </body>
32
- </html>
package/docs/tutorial/my-component.html DELETED
@@ -1,29 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>My Component</title>
6
- <script src="../javascript/lightview.js?as=x-body"></script>
7
- </head>
8
- <body>
9
- <button l-on:click="${onClickPrivate}">Private</button>
10
- <button l-on:click="${onClickPublic}">Public</button>
11
- ${clicked}
12
- <style>
13
- button {
14
- border: none;
15
- border-radius: 5px;
16
- }
17
- </style>
18
- <script id="lightview">
19
- (currentComponent ||= document.body).mount = function() {
20
- this.variables({clicked:"string"},{reactive,set:""});
21
- this.variables({onClickPrivate:"function"});
22
-
23
- onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
24
-
25
- this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
26
- }
27
- </script>
28
- </body>
29
- </html>
package/docs/tutorial/remote-value.json DELETED
@@ -1,4 +0,0 @@
1
- {
2
- "name": "joe",
3
- "age": 27
4
- }