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/repl_hold.html DELETED
@@ -1,320 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:REPL</title>
6
- </head>
7
- <body>
8
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10
- <div id="content" style="flex:auto;min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
11
- <div style="display:flex;flex-direction:column;">
12
- <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
13
- <span style="padding-right:10px"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
14
- <span style="padding-right:10px"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
15
- <!--span style="padding-right:10px"><label for="markdown" l-on:click="${onTabClick}">Markdown (Body)</label><input for="markdown" value="${markdownPinned}" type="checkbox" l-on:click="${onPinClick}"></span-->
16
- <span style="padding-right:10px"><label for="css" l-on:click="${onTabClick}">Style</label><input for="css" value="${cssPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
17
- <span style="padding-right:10px"><label for="script" l-on:click="${onTabClick}">Script</label><input for="script" value="${scriptPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
18
- <span style="padding-right:10px"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
19
- </div>
20
- </div>
21
- <div id="headhtml" style="display:none;margin:10px" class="language-html">&lt;head&gt;<slot name="head"></slot>&lt;/head&gt;</div>
22
- <div id="bodyhtml" style="margin:10px" class="language-html">&lt;body&gt;<slot name="body"></slot>&lt;/body&gt;</div>
23
- <!--textarea id="markdown" style="margin-right:2px;display:none">${markdown}</textarea-->
24
- <div id="css" style="display:none;margin:10px" class="language-css">&lt;style&gt;<slot name="css"></slot>&lt;/style&gt;</div>
25
- <div id="script" style="display:none;margin:10px" class="language-javascript">&lt;script&gt;<slot name="script"></slot>&lt;/script&gt;</div>
26
- <iframe id="preview" style="max-width:99%;width:99%;margin:10px;display:none" src="./blank.html"></iframe>
27
- </div>
28
- <div style="width:100%;text-align:center">
29
- <div style="padding:5px">${source}</div>
30
- <button l-on:click="${doSave}">Save</button>&nbsp;&nbsp;
31
- <button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
32
- </div>
33
- <style id="style">
34
- label:hover {
35
- text-decoration: underline
36
- }
37
- </style>
38
- <script id="lightview">
39
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
40
- const {CodeJar} = await import("https://cdn.jsdelivr.net/npm/codejar@3.6.0/codejar.min.js");
41
- const turndownService = new TurndownService({
42
- headingStyle: "atx",
43
- codeBlockStyle: "fenced",
44
- emDelimiter: "*"
45
- });
46
- turndownService.keep(() => true);
47
-
48
- const {html, css, script} = await import("../types.js");
49
- self.variables({
50
- onTabClick: "function",
51
- onPinClick: "function",
52
- doSave: "function",
53
- doReset: "function"
54
- });
55
- self.variables({
56
- wysiwygPinned: "boolean",
57
- bodyhtmlPinned: "boolean",
58
- bodyhtml: html,
59
- markdownPinned: "boolean",
60
- markdown: "string",
61
- cssPinned: "boolean",
62
- cssText: css,
63
- scriptPinned: "boolean",
64
- scriptText: script,
65
- headhtmlPinned: "boolean",
66
- headhtml: html,
67
- previewPinned: "boolean",
68
- source: "string",
69
- }, {reactive});
70
- self.variables({
71
- src: "string",
72
- }, {imported});
73
-
74
- bodyhtmlPinned = true;
75
-
76
- const loadFromFile = async () => {
77
- const html = await fs.readFile(url.pathname, {encoding: "utf8"});
78
- source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
79
- return html;
80
- };
81
-
82
- const loadFromServer = async () => {
83
- const response = await fetch(url.href);
84
- const html = await response.text();
85
- source = url.href;
86
- return html;
87
- };
88
-
89
- const parseFullHTML = (fullHTML) => {
90
- const parser = new DOMParser(),
91
- fragment = parser.parseFromString(fullHTML, "text/html"),
92
- body_el = fragment?.querySelector("body"),
93
- style_el = fragment?.querySelector("style"),
94
- script_el = body_el?.querySelector("script");
95
- if (style_el) {
96
- cssText = style_el?.innerHTML.trim();
97
- style_el.remove();
98
- } else {
99
- cssText = "";
100
- }
101
- if (script_el) {
102
- scriptText = script_el?.innerHTML.trim(),
103
- script_el.remove();
104
- } else {
105
- scriptText = "";
106
- }
107
- headhtml = (fragment?.head.innerHTML || "").trim();
108
- bodyhtml = body_el?.innerHTML.trim();
109
- };
110
-
111
- let fs,
112
- url;
113
- if (src) {
114
- url = new URL(src, window.location.href);
115
- fs = new LightningFS(url.hostname + "_repl").promises;
116
- try {
117
- parseFullHTML(await loadFromFile());
118
- } catch (e) {
119
- try {
120
- parseFullHTML(await loadFromServer());
121
- } catch (e) {
122
- fullHTML = e.message;
123
- }
124
- }
125
- } else {
126
- url = new URL(window.location.href);
127
- fs = new LightningFS(url.hostname + "_repl").promises;
128
- bodyhtml = "";
129
- headhtml = "";
130
- scriptText = "";
131
- cssText = "";
132
- }
133
- ;
134
-
135
- // initialize variables
136
- markdown = "";
137
-
138
- const tabs = [...self.querySelectorAll("label[for]")]
139
- .map((label) => {
140
- const id = label.getAttribute("for");
141
- return [id, self.getElementById(id), label];
142
- });
143
-
144
- const showTab = (targetid) => {
145
- tabs.forEach(([id, el, label]) => {
146
- if (id === targetid || self.varsProxy[`${id}Pinned`]) {
147
- el.style.display = "block";
148
- } else if (!self.varsProxy[`${id}Pinned`]) {
149
- el.style.display = "none";
150
- }
151
- });
152
- };
153
-
154
- const hideTab = (targetid) => {
155
- tabs.forEach(([id, el, label]) => {
156
- if (id === targetid) el.style.display = "none";
157
- });
158
- };
159
-
160
- onTabClick = (event) => {
161
- showTab(event.target.getAttribute("for"));
162
- };
163
-
164
- onPinClick = (event) => {
165
- const id = event.target.getAttribute("for"),
166
- checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
167
- if (checked) onTabClick(event);
168
- else hideTab(id);
169
- };
170
-
171
- doSave = async () => {
172
- const parts = url.pathname.split("/");
173
- let dir = "";
174
- parts.shift();
175
- parts.pop();
176
- for (const part of parts) {
177
- dir = dir + "/" + part;
178
- try {
179
- await fs.mkdir(dir);
180
- } catch (e) {
181
- if (e.message === "EEXIST") break;
182
- throw e;
183
- }
184
- }
185
- fs.writeFile(url.pathname, doPreview(), {encoding: "utf8"}, () => {
186
- });
187
- source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
188
- };
189
-
190
- doReset = async () => {
191
- try {
192
- await fs.unlink(url.pathname);
193
- } catch (e) {
194
-
195
- }
196
- if (src) {
197
- try {
198
- parseFullHTML(await loadFromServer());
199
- doPreview();
200
- } catch (e) {
201
- previewEl.innerHTML = fullHTML = e.message;
202
- }
203
- } else {
204
- bodyhtml = "";
205
- headhtml = "";
206
- scriptText = "";
207
- cssText = "";
208
- previewEl.innerHTML = "";
209
- }
210
- };
211
-
212
- const doPreview = () => {
213
- // not quite write, createComponent needs to be reworked to handle a head and import its links
214
- /*const template = document.createElement("template");
215
- template.innerHTML = bodyhtml +
216
- "<style>" + cssText + "</style>" +
217
- '<script id="lightview">' + scriptText + "<" + "/script>";
218
- const component = window.customElements.get("x-preview");
219
- if (component) {
220
- component.setTemplateNode(template);
221
- } else {
222
- Lightview.createComponent("x-preview", template);
223
- }
224
- previewEl.innerHTML = "<x-preview></x-preview>";
225
- return "<html><head>" + headhtml + "</head><body>" + template.innerHTML + "<body></html>"*/
226
- const str =
227
- "<html>" +
228
- "<head>" + headhtml.replace("./lightview.js",new URL("./lightview.js",window.location.href).href) +" </head>" +
229
- "<body>" + bodyhtml +
230
- "<style>" + cssText + "</style>" +
231
- '<script id="lightview">debugger;' + scriptText + "<" + "/script>" +
232
- "</body>" +
233
- "</html>",
234
- blob = new Blob([str], {type : 'text/html'}),
235
- newurl = window.URL.createObjectURL(blob);
236
- previewEl.src = newurl;
237
- };
238
-
239
- const tabsEl = self.getElementById("tabs"),
240
- headhtmlEl = document.body.querySelector('[slot="head"]'),
241
- bodyhtmlEl = document.body.querySelector('[slot="body"]'),
242
- markdownEl = self.getElementById("markdown"),
243
- cssEl = document.body.querySelector('[slot="css"]'),
244
- scriptEl = document.body.querySelector('[slot="script"]'),
245
- previewEl = self.getElementById("preview");
246
-
247
- const highlight = (el,...args) => {
248
- hljs.highlightElement(el,...args);
249
- }
250
-
251
- if(headhtmlEl) {
252
- headhtmlEl.className = "language-html";
253
- const bodyJar = CodeJar(headhtmlEl, highlight);
254
- bodyJar.updateCode(headhtml);
255
- bodyJar.onUpdate(code => {
256
- headhtml = code;
257
- doPreview();
258
- })
259
- }
260
-
261
- if(bodyhtmlEl) {
262
- bodyhtmlEl.className = "language-html";
263
- const bodyJar = CodeJar(bodyhtmlEl, highlight);
264
- bodyJar.updateCode(bodyhtml);
265
- bodyJar.onUpdate(code => {
266
- bodyhtml = code;
267
- doPreview();
268
- })
269
- }
270
-
271
- if(cssEl) {
272
- cssEl.className = "language-css";
273
- const bodyJar = CodeJar(cssEl, highlight);
274
- bodyJar.updateCode(cssText);
275
- bodyJar.onUpdate(code => {
276
- cssText = code;
277
- doPreview();
278
- })
279
- }
280
-
281
- if(scriptEl) {
282
- scriptEl.className = "language-javascript";
283
- const bodyJar = CodeJar(scriptEl, highlight);
284
- bodyJar.updateCode(scriptText);
285
- bodyJar.onUpdate(code => {
286
- scriptText = code;
287
- doPreview();
288
- })
289
- }
290
-
291
- doPreview();
292
-
293
- /*let prevmarkdown; // prevents indirect recursion
294
- observe(() => {
295
- const text = turndownService.turndown(bodyhtml).trim();
296
- if (text && text !== prevtext) {
297
- markdown = markdownEl.innerHTML = prevmarkdown = text;
298
- }
299
- });
300
-
301
- let prevbodyhtml; // prevents indirect recursion
302
- observe(() => {
303
- const html = marked.parse(markdown).trim();
304
- if (html && html !== prevbodyhtml) {
305
- bodyhtml = bodyhtmlEl.innerText = prevbodyhtml = html;
306
- }
307
- });*/
308
-
309
- const initEditor = () => {
310
-
311
- };
312
-
313
- self.addEventListener("mounted", () => {
314
- initEditor();
315
- doPreview();
316
- });
317
- }
318
- </script>
319
- </body>
320
- </html>
package/test/basic.html DELETED
@@ -1,104 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Basic</title>
6
- <template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="${bump}">
7
-
8
- <input id="iuntyped" value="${iuntyped}">
9
- <input id="idatetime" type="datetime" value="${idatetime}">
10
-
11
- <span id="children">${children}</span>
12
-
13
- <span id="name">${name}</span>
14
- <span id="open">${open}</span>
15
- <span id="count">${count}</span>
16
-
17
- <span id="color">${color}</span>
18
- <span id="checked">${checked}</span>
19
- <span id="age">${age}</span>
20
- <span id="hamburger">${hamburger}</span>
21
-
22
-
23
- <input id="itext" type="text" value="${itext}">
24
- <input id="itel" type="tel" value="${itel}">
25
- <input id="iemail" type="email" value="${iemail}">
26
- <input id="iurl" type="url" value="${iurl}">
27
- <input id="iradio" type="radio" name="iradio" value="test">
28
- <input id="isearch" type="search" value="${isearch}">
29
-
30
- <input id="icolor" type="color" value="${icolor}">
31
- <input id="ipassword" type="password" value="${ipassword}">
32
-
33
- <input id="inumber" type="number" value="${inumber}">
34
- <input id="irange" type="range" value="${irange}">
35
-
36
- <input id="icheckbox" type="checkbox" value="${icheckbox}">
37
- </template>
38
- <script>
39
- document.getElementById("x-test").mount = async (self) => {
40
- // debugger;
41
- self.variables(
42
- {
43
- shared:"function"
44
- },
45
- {
46
- constant: (await import("../types.js")).shared
47
- }
48
- );
49
- self.variables({name: "string", open: "boolean", count: "number", children: Array}, {imported, reactive});
50
- self.variables({color: "string", checked: "boolean", age: "number", hamburger: Array}, {
51
- exported,
52
- reactive
53
- });
54
- self.variables({counter: "number"}, {reactive});
55
- self.variables({myshare: "number"}, {shared});
56
-
57
- color = "green";
58
- checked = true;
59
- age = 27;
60
- hamburger = ["lettuce"];
61
- counter = 0;
62
- myshare = 1;
63
-
64
- self.addEventListener("mounted", ({target}) => {
65
- debugger;
66
- iuntyped = "test";
67
- itext = "test";
68
- itel = "test";
69
- iemail = "test";
70
- iurl = "test";
71
- isearch = "test";
72
- iradio = "test";
73
- icolor = "test";
74
- ipassword = "test";
75
-
76
- inumber = 1;
77
- irange = 1;
78
- idatetime = new Date();
79
-
80
- icheckbox = true;
81
- target.testId = target.id;
82
- });
83
-
84
- self.bump = () => {
85
- counter++;
86
- };
87
-
88
- addEventListener("change", ({variableName, value}) => {
89
- self[variableName] = value;
90
- });
91
- }
92
- </script>
93
- <script src="../lightview.js"></script>
94
- <script>
95
- Lightview.createInputVariables = true;
96
- Lightview.createComponent("x-test",document.getElementById("x-test"));
97
- </script>
98
- </head>
99
- <body>
100
- <p><x-test id="test"></x-test></p>
101
-
102
- <p><x-test id="test1"></x-test></p>
103
- </body>
104
- </html>