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/slidein.html DELETED
@@ -1,51 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Component:Slidein</title>
6
- <script src="../lightview.js?as=x-body"></script>
7
- </head>
8
- <body l-on:click="${toggleState}">
9
- <div id="content" class="slidein ${state}" hidden>
10
- <div l-if="${state==='closed'}" style="font-size: x-small;font-weight: bold; float:left">&nbsp;&gt;</div>
11
- <div l-if="${state==='open'}" style="font-size: x-small;font-weight: bold; float:right; padding-right: 3px">X</div>
12
- <slot>You must provide inner content for slidein</slot>
13
- </div>
14
-
15
- <style>
16
- .slidein {
17
- overflow: hidden;
18
- padding-right: 5px;
19
- position: absolute;
20
- z-index: 1000;
21
- width: 100%;
22
- }
23
- </style>
24
-
25
- <script id="lightview">
26
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
27
- this.variables({toggleState:"function"});
28
- this.variables({state:"string"},{reactive,imported});
29
- this.variables({src:"string"},{imported});
30
-
31
- if(src) {
32
- const response = await fetch(new URL(src,window.location.href.replace("blob:","")));
33
- dom = new DOMParser().parseFromString(await response.text(),"text/html");
34
- this.appendChild(dom.body.firstElementChild);
35
- }
36
- this.getElementById("content").removeAttribute("hidden");
37
-
38
- state ||= "closed";
39
-
40
- toggleState = () => {
41
- console.log(state);
42
- if(state==="closed") state = "open";
43
- else state = "closed";
44
- if(state==="open") this.style.width = getComputedStyle(this).maxWidth;
45
- else this.style.width = getComputedStyle(this).minWidth;
46
- };
47
- }
48
- </script>
49
-
50
- </body>
51
- </html>
package/docs/tutorial/0-getting-started.html DELETED
@@ -1,67 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Getting Started</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="../components/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
- ## Getting Started
19
-
20
- Install it from [NPMJS](https://www.npmjs.com/package/lightview). Or, visit the repository on [GitHub](https://www.github.com/anywhichway/lightview).
21
- Note, we will actively iterate on Lightview using this website. If you want the bleeding edge download [lightview.js](../javascript/lightview.js)
22
- and [types.js](../javascript/types.js) from this website.
23
-
24
- It should be evident from the todo example on the [home page](../lightview.html), Lightview components are just HTML files similar to Riot's or Vue's SFCs. And, for
25
- the most part, the code you write looks like regular JavaScript ... we modeled this on Svelte.
26
-
27
- We have included an even simpler Hello World example to the REPL to the right.
28
-
29
- There is a special script block in these files with `id="lightview"` and inside them `this` is bound to the component inside a mount function.
30
-
31
- The HTML in the files is rendered in a shadow DOM node and the style blocks and any other scripts you use are isolated to that shadow DOM
32
- (although the scrips can walk out of the shadow DOM).
33
-
34
- Try changing the message. You can edit the code shaded grey in the REPL to the right.
35
-
36
- Now click on `Save` and reload this page by clicking on the `Tutorial` link in the head again. You should come bak to the page with the REPL saved
37
- in the state you left it. You can reset it back to its original state by clicking on `Reset`.
38
-
39
- </div>
40
- <button class="nav-next"><a href="./1-intro-to-variables.html" target="content">Next</a></button>
41
- </div>
42
- <div class="repl">
43
- <h2></h2>
44
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" preservebody>
45
- <div slot="headhtml"></div>
46
- <div slot="bodyhtml"></div>
47
- <template slot="src">
48
- <l-head>
49
- <script src="../javascript/lightview.js?as=x-body"></script>
50
- </l-head>
51
- <l-body>
52
- ${message}
53
- <script id="lightview">
54
- (currentComponent||=document.body).mount = function() {
55
- this.variables({message:"string"},{reactive});
56
- message = "Hello world!"
57
- }
58
- </script>
59
- </l-body>
60
- </template>
61
- </l-repl>
62
- </div>
63
- <script>
64
- processMarkdown();
65
- </script>
66
- </body>
67
- </html>
package/docs/tutorial/1-intro-to-variables.html DELETED
@@ -1,103 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Introduction to Variables</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="../components/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
- ## Introduction to Variables
19
-
20
- *Note*: In this REPL and most other REPLs in the tutorial the Lightview script is placed in a separate section. This is to simplify
21
- editing. Behind the scenes, the script is included in the body tag.
22
-
23
- Much of the power of Lightview comes from variables coupled with JavaScript string literal notation embedded in HTML.
24
- Try adding some text or HTML before or after `${message}`.
25
-
26
- Variables declared as the functional type `reactive` automatically update the DOM nodes that reference them.
27
- Try copy/paste replacing the code with:
28
-
29
- ```javascript
30
- currentComponent.mount = function() {
31
- this.variables({message:"string"},{reactive});
32
- message = "Hello world!";
33
- setTimeout(function() {
34
- message = "Goodbye world ...";
35
- },2000);
36
- }
37
- ```
38
-
39
- You can also use the functional type `constant`. Try replacing the code with:
40
-
41
- ```javascript
42
- currentComponent.mount = function() {
43
- this.variables({message:"string"},{constant:"Hello world"});
44
- message = "Goodbye world ...";
45
- }
46
- ```
47
-
48
- Note how the variable `message` simply does not get replaced. You can configure Lightview to render errors. Try this:
49
-
50
- ```javascript
51
- Lightview.renderErrors = true;
52
- currentComponent.mount = function() {
53
- this.variables({message:"string"},{constant:"Hello world"});
54
- message = "Goodbye world ...";
55
- }
56
- ```
57
-
58
- See the API documentation [Lightview.renderErrors](../api.html#renderErrors).
59
-
60
- Finally, you can set default values using `set`. Try replacing the code with:
61
-
62
- ```javascript
63
- currentComponent.mount = function() {
64
- this.variables({message:"string"},{reactive,set:"Hello world!"});
65
- setTimeout(function() {
66
- message = "Goodbye world ...";
67
- },2000);
68
- }
69
- ```
70
-
71
- See the API documentation on [variables](../api.html#variables) and [reactive](../api.html#reactive).
72
-
73
- See the Medium article for an exploration of <a href="https://medium.com/@anywhichway/javascript-and-functional-types-89f2ae55747b" target="_tab">functional types</a>.
74
- </div>
75
- <button class="nav-previous"><a href="./0-getting-started.html" target="content">Previous</a></button>
76
- <button class="nav-next"><a href="./2-imported-and-exported-variables.html" target="content">Next</a></button>
77
- </div>
78
- <div class="repl">
79
- <h2></h2>
80
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location">
81
- <div slot="bodyhtml"></div>
82
- <div slot="script"></div>
83
- <template slot="src">
84
- <l-head>
85
- <script src="../javascript/lightview.js?as=x-body"></script>
86
- </l-head>
87
- <l-body>
88
- ${message}
89
- </l-body>
90
- <script id="lightview">
91
- currentComponent.mount = function() {
92
- this.variables({message:"string"},{reactive});
93
- message = "Hello world!"
94
- }
95
- </script>
96
- </template>
97
- </l-repl>
98
- </div>
99
- <script>
100
- processMarkdown();
101
- </script>
102
- </body>
103
- </html>
package/docs/tutorial/10-template-components.html DELETED
@@ -1,80 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Template 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
- ## Template Components
19
-
20
- You can use templates to define components.
21
-
22
- Note how the `mount` function is defined during component creation and the script containing it does not need to have
23
- the id `lightview`.
24
-
25
- Try and change the tag name to something else. (Hint: You do not need to change the id of the template. And, you will
26
- need to make changes to both the `head` and the `body`).
27
-
28
- See the API documentation on [Lightview.createComponent](../api.html#createComponnent).
29
-
30
- </div>
31
- <button class="nav-previous"><a href="./9-intro-to-components.html" target="content">Previous</a></button>
32
- <button class="nav-next"><a href="./11-linked-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="headhtml"></div>
38
- <div slot="bodyhtml"></div>
39
- <div slot="script" readonly></div>
40
- <template slot="src">
41
- <l-head>
42
- <template id="my-component">
43
- <button l-on:click="${onClickPrivate}">Private</button>
44
- <button l-on:click="${onClickPublic}">Public</button>
45
- ${clicked}
46
- <style>
47
- button {
48
- border: none;
49
- border-radius: 5px;
50
- }
51
- </style>
52
- </template>
53
- <script src="../javascript/lightview.js"></script>
54
- <script>
55
- const component = Lightview.createComponent("my-component",
56
- document.getElementById("my-component"),
57
- {
58
- mount: function () {
59
- this.variables({clicked: "string"}, {reactive,set:""});
60
- this.variables({onClickPrivate: "function"});
61
-
62
- onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
63
-
64
- this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
65
- }
66
- })
67
- </script>
68
- </l-head>
69
- <l-body>
70
- <my-component></my-component>
71
- </l-body>
72
-
73
- </template>
74
- </l-repl>
75
- </div>
76
- <script>
77
- processMarkdown();
78
- </script>
79
- </body>
80
- </html>
package/docs/tutorial/11-linked-components.html DELETED
@@ -1,76 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Linked 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
- ## Linked Components
19
-
20
- You can link to components using the `link` tag.
21
-
22
- When you do this, you do not need to include a script with the id "lightview" unless you are also creating a local
23
- component or using `as=x-body`.
24
-
25
- So long as the file name for the linked component includes a hyphen, it will be used as the tag name. If not, an `l-`
26
- will be prefixed.
27
-
28
- You can alias the filename to your own tagname to avoid collisions with other components by using an `as` attribute on
29
- the anchor. Try cutting and pasting this to the `head` and updating the `body` accordingly.
30
-
31
- ```html
32
- <link href="./tutorial/my-component.html" rel="module" as="l-component">
33
- ```
34
-
35
- If you are loading the component across origins, you must also include the attribute `crossorigin="use-credentials"`.
36
- Although, it is up to the responding domain to actually require credentials or not.
37
-
38
- *Caution*: You MUST absolutely trust the origin from which you are loading a component. Components can walk and modify
39
- the DOM.
40
-
41
- Below is the content of the `my-component.html` file. The script containing `src="../javascript/lightview.js?as=x-body"`
42
- in the head is un-necessary and is ignored when linking the component. However, including it makes the component unit
43
- testable, i.e. the file can be loaded directly in a browser, it does not need to be imported as a component by
44
- another file.
45
-
46
- <l-repl contentbackground="#f3f3f3" src="./my-component.html" hidetabs maintainbody>
47
- <div slot="headhtml" readonly></div>
48
- <div slot="bodyhtml" readonly></div>
49
- </l-repl>
50
-
51
-
52
- </div>
53
- <button class="nav-previous"><a href="./10-template-components.html" target="content">Previous</a></button>
54
- <button class="nav-next"><a href="./12-imported-components.html" target="content">Next</a></button>
55
- </div>
56
- <div style="float:right;margin-right:10px">
57
- <h2></h2>
58
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
59
- <div slot="headhtml"></div>
60
- <div slot="bodyhtml"></div>
61
- <template slot="src">
62
- <l-head>
63
- <link href="../tutorial/my-component.html" rel="module">
64
- <script src="../javascript/lightview.js"></script>
65
- </l-head>
66
- <l-body>
67
- <my-component></my-component>
68
- </l-body>
69
- </template>
70
- </l-repl>
71
- </div>
72
- <script>
73
- processMarkdown();
74
- </script>
75
- </body>
76
- </html>
package/docs/tutorial/12-imported-components.html DELETED
@@ -1,67 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Imported 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
- ## Imported Components
19
-
20
- You can import instances of components by making a CSS selector be the target of an anchor and having the `href` point to a component file.
21
-
22
- All elements that match the selector will have their content replaced by an instance of the component.
23
-
24
- So long as the file name for the imported component includes a hyphen, it will be used as the tag name. If not, an `l-`
25
- will be prefixed.
26
-
27
- You can alias the filename to your own tagname to avoid collisions with other components by using an `as` attribute on the anchor.
28
-
29
- *Caution*: You MUST absolutely trust the origin from which you are loading a component. Components can walk and modify
30
- the DOM.
31
-
32
- Enabling imports is done automatically for component HTML. Since this example is not itself a component, the anchors are
33
- enabled with the `DOMContentLoaded` event listener.
34
-
35
- If you delete the entire script tag contents and add `?as=x-body` to the script in the head, the example will still work. The
36
- anchors are enabled automatically because you have turned the example into a component.
37
-
38
-
39
- </div>
40
- <button class="nav-previous"><a href="./11-linked-components.html" target="content">Previous</a></button>
41
- <button class="nav-next"><a href="./13-input-binding.html" target="content">Next</a></button>
42
- </div>
43
- <div style="float:right;margin-right:10px">
44
- <h2></h2>
45
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
46
- <div slot="headhtml"></div>
47
- <div slot="bodyhtml"></div>
48
- <div slot="script"></div>
49
- <template slot="src">
50
- <l-head>
51
- <script src="../javascript/lightview.js"></script>
52
- </l-head>
53
- <l-body>
54
- <p>This <a href="../tutorial/my-component.html" target="#mytarget">link</a> will import `my-component`, to replace the target.</p>
55
- <p id="mytarget">Target Area</p>
56
- </l-body>
57
- <script>
58
- document.addEventListener("DOMContentLoaded",() => Lightview.enableAnchors(document.body));
59
- </script>
60
- </template>
61
- </l-repl>
62
- </div>
63
- <script>
64
- processMarkdown();
65
- </script>
66
- </body>
67
- </html>
package/docs/tutorial/13-input-binding.html DELETED
@@ -1,94 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Input Binding</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
- ## Input Binding<
19
-
20
- Lightview will automatically bind input values to variables.
21
-
22
- Note how the string template literals in the REPL have atomic a values that match variable names.
23
-
24
- If your variables are not reactive, you will need to add 'input' or 'change' event listeners to the inputs to respond to
25
- change. See [event listeners](./8-event-listeners.html) portion of the tutorial. In this example we are watching for the
26
- `change` event. Make changes to the input and tab out. Now, modify the code and watch for an `input` event and make changes
27
- to the input again.
28
-
29
- If your variables are reactive, they will automatically be updated based in `input` events. You can use an `observer`
30
- to [drive other action](./7-monitoring-with-observers.html).
31
-
32
- To simplify processing, `checkbox` inputs are `checked` if their value is set to `true`. Lightview does not allow you to
33
- assign custom values to checkboxes based on their checked state.
34
-
35
-
36
- </div>
37
- <button class="nav-previous"><a href="./12-imported-components.html" target="content">Previous</a></button>
38
- <button class="nav-next"><a href="./14-automatic-variable-creation.html" target="content">Next</a></button>
39
- </div>
40
- <div style="float:right;margin-right:10px">
41
- <h2></h2>
42
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
43
- <div slot="bodyhtml"></div>
44
- <div slot="script"></div>
45
- <template slot="src">
46
- <l-head>
47
- <script src="../javascript/lightview.js?as=x-body"></script>
48
- </l-head>
49
- <l-body>
50
- Text: <input type="text" value="${textValue}"><br>
51
- Ureactive Text: <input type="text" l-on:change="${onTextChange}" value="${unreactiveTextValue}"><br>
52
- Checkbox1: <input type="checkbox" value="${checkbox1}"><br>
53
- Checkbox2: <input type="checkbox" value="${checkbox2}"><br>
54
- </l-body>
55
- <script id="lightview">
56
- currentComponent.mount = function() {
57
- this.variables(
58
- {
59
- textValue:"string",
60
- checkbox1:"boolean",
61
- checkbox2:"boolean"
62
- },
63
- {
64
- reactive
65
- }
66
- );
67
- this.variables({unreactiveTextValue:"string",onTextChange:"function"});
68
-
69
- onTextChange = (event) => {
70
- const el = document.createElement("div");
71
- el.innerText = event.target.value;
72
- this.shadowRoot.appendChild(el);
73
- };
74
-
75
- textValue = "some value";
76
- unreactiveTextValue = "some unreactive value";
77
- checkbox1 = true;
78
- checkbox2 = false;
79
-
80
- observe(() => {
81
- const el = document.createElement("div");
82
- el.innerText = textValue;
83
- this.shadowRoot.appendChild(el);
84
- });
85
- }
86
- </script>
87
- </template>
88
- </l-repl>
89
- </div>
90
- <script>
91
- processMarkdown();
92
- </script>
93
- </body>
94
- </html>
package/docs/tutorial/14-automatic-variable-creation.html DELETED
@@ -1,74 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Tutorial:Form Binding</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
- ## Automatic Variable Creation
19
-
20
- You can have Lightview create reactive variables for you but setting `Lightview.createInputVariables=true`.
21
-
22
- Then you can use very generic code event listener to collect the values when they change and do something with them.
23
-
24
- Lightview has a special `addEventListener` similar to web workers, it is not called from an object, it is free standing
25
- in the scope of a Lightview script. Currently, the only events this handles are change events on variables.
26
-
27
- Conveniently, components have a method `getVariableData` that returns all variable values as an object keyed by
28
- variable names.
29
-
30
- *Note*: Reactive variables bound to forms change their values whenever there is input to a field, not just when the
31
- field value changes due to a focus change.
32
-
33
- See the API documentation on [Lightview.createInputVariables](../api.html#createInputVariables).
34
-
35
- </div>
36
- <button class="nav-previous"><a href="./13-input-binding.html" target="content">Previous</a></button>
37
- <button class="nav-next"><a href="./15-form-binding.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
- Text: <input type="text" value="${textValue}"><br>
50
- Checkbox1: <input type="checkbox" value="${checkbox1}" checked><br>
51
- Checkbox2: <input type="checkbox" value="${checkbox2}"><br>
52
- </l-body>
53
- <script id="lightview">
54
- Lightview.createInputVariables = true;
55
- currentComponent.mount = function() {
56
- addEventListener("change",(event) => {
57
- const eventEl = document.createElement("div"),
58
- varsEl = document.createElement("div"),
59
- data = this.getVariableData();
60
- eventEl.innerText = JSON.stringify(event);
61
- this.shadowRoot.appendChild(eventEl);
62
- varsEl.innerText = JSON.stringify(data);
63
- this.shadowRoot.appendChild(varsEl);
64
- })
65
- }
66
- </script>
67
- </template>
68
- </l-repl>
69
- </div>
70
- <script>
71
- processMarkdown();
72
- </script>
73
- </body>
74
- </html>