aberdeen 1.18.2 → 1.19.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 (152) hide show
  1. package/README.md +9 -0
  2. package/dist/src/aberdeen.d.ts +27 -0
  3. package/{dist-docs/assets/aberdeen/aberdeen.js → dist/src/aberdeen.dev.js} +776 -15
  4. package/dist/src/aberdeen.dev.js.map +12 -0
  5. package/dist/src/aberdeen.js +59 -13
  6. package/dist/src/aberdeen.js.map +3 -3
  7. package/dist/src/devtools.d.ts +26 -0
  8. package/html-to-aberdeen +9 -5
  9. package/package.json +17 -10
  10. package/skill/A.md +127 -0
  11. package/skill/Dispatcher.md +51 -0
  12. package/skill/OPAQUE.md +15 -0
  13. package/skill/PromiseProxy.md +25 -0
  14. package/skill/Route.md +50 -0
  15. package/skill/SKILL.md +272 -156
  16. package/skill/applyCanon.md +20 -0
  17. package/skill/applyPrediction.md +15 -0
  18. package/skill/back.md +11 -0
  19. package/skill/clean.md +43 -0
  20. package/skill/clone.md +15 -0
  21. package/skill/copy.md +40 -0
  22. package/skill/count.md +32 -0
  23. package/skill/cssVars.md +15 -0
  24. package/skill/darkMode.md +26 -0
  25. package/skill/derive.md +56 -0
  26. package/skill/developer-tools.md +23 -0
  27. package/skill/disableCreateDestroy.md +11 -0
  28. package/skill/dump.md +37 -0
  29. package/skill/freeze.md +20 -0
  30. package/skill/full-example-multi-page-app.md +146 -0
  31. package/skill/go.md +25 -0
  32. package/skill/grow.md +13 -0
  33. package/skill/html-to-aberdeen.md +9 -0
  34. package/skill/insertCss.md +79 -0
  35. package/skill/insertGlobalCss.md +68 -0
  36. package/skill/interceptLinks.md +19 -0
  37. package/skill/invertString.md +32 -0
  38. package/skill/isEmpty.md +38 -0
  39. package/skill/map.md +16 -0
  40. package/skill/matchCurrent.md +27 -0
  41. package/skill/merge.md +27 -0
  42. package/skill/mount.md +48 -0
  43. package/skill/multiMap.md +15 -0
  44. package/skill/onEach.md +14 -0
  45. package/skill/partition.md +15 -0
  46. package/skill/peek.md +36 -0
  47. package/skill/persistScroll.md +13 -0
  48. package/skill/proxy.md +11 -0
  49. package/skill/push.md +13 -0
  50. package/skill/ref.md +39 -0
  51. package/skill/runQueue.md +34 -0
  52. package/skill/setErrorHandler.md +48 -0
  53. package/skill/setLog.md +9 -0
  54. package/skill/setSpacingCssVars.md +31 -0
  55. package/skill/shrink.md +13 -0
  56. package/skill/unmountAll.md +9 -0
  57. package/skill/unproxy.md +43 -0
  58. package/skill/up.md +13 -0
  59. package/src/aberdeen.ts +194 -73
  60. package/src/devtools.ts +685 -0
  61. package/dist-docs/.nojekyll +0 -1
  62. package/dist-docs/Tutorial/index.html +0 -305
  63. package/dist-docs/aberdeen/A/index.html +0 -116
  64. package/dist-docs/aberdeen/CUSTOM_DUMP/index.html +0 -7
  65. package/dist-docs/aberdeen/NO_COPY/index.html +0 -2
  66. package/dist-docs/aberdeen/OPAQUE/index.html +0 -12
  67. package/dist-docs/aberdeen/PromiseProxy/index.html +0 -8
  68. package/dist-docs/aberdeen/clean/index.html +0 -11
  69. package/dist-docs/aberdeen/clone/index.html +0 -5
  70. package/dist-docs/aberdeen/copy/index.html +0 -22
  71. package/dist-docs/aberdeen/count/index.html +0 -7
  72. package/dist-docs/aberdeen/cssVars/index.html +0 -11
  73. package/dist-docs/aberdeen/darkMode/index.html +0 -9
  74. package/dist-docs/aberdeen/default/index.html +0 -342
  75. package/dist-docs/aberdeen/derive/index.html +0 -18
  76. package/dist-docs/aberdeen/disableCreateDestroy/index.html +0 -6
  77. package/dist-docs/aberdeen/dump/index.html +0 -11
  78. package/dist-docs/aberdeen/index.html +0 -54
  79. package/dist-docs/aberdeen/insertCss/index.html +0 -30
  80. package/dist-docs/aberdeen/insertGlobalCss/index.html +0 -19
  81. package/dist-docs/aberdeen/invertString/index.html +0 -13
  82. package/dist-docs/aberdeen/isEmpty/index.html +0 -12
  83. package/dist-docs/aberdeen/map/index.html +0 -26
  84. package/dist-docs/aberdeen/merge/index.html +0 -11
  85. package/dist-docs/aberdeen/mount/index.html +0 -17
  86. package/dist-docs/aberdeen/multiMap/index.html +0 -28
  87. package/dist-docs/aberdeen/onEach/index.html +0 -19
  88. package/dist-docs/aberdeen/partition/index.html +0 -36
  89. package/dist-docs/aberdeen/peek/index.html +0 -40
  90. package/dist-docs/aberdeen/proxy/index.html +0 -35
  91. package/dist-docs/aberdeen/ref/index.html +0 -13
  92. package/dist-docs/aberdeen/runQueue/index.html +0 -13
  93. package/dist-docs/aberdeen/setErrorHandler/index.html +0 -16
  94. package/dist-docs/aberdeen/setSpacingCssVars/index.html +0 -8
  95. package/dist-docs/aberdeen/unmountAll/index.html +0 -5
  96. package/dist-docs/aberdeen/unproxy/index.html +0 -11
  97. package/dist-docs/assets/aberdeen/aberdeen.d.ts +0 -963
  98. package/dist-docs/assets/aberdeen/aberdeen.js.map +0 -11
  99. package/dist-docs/assets/aberdeen/dispatcher.d.ts +0 -57
  100. package/dist-docs/assets/aberdeen/dispatcher.js +0 -66
  101. package/dist-docs/assets/aberdeen/dispatcher.js.map +0 -10
  102. package/dist-docs/assets/aberdeen/helpers/reverseSortedSet.d.ts +0 -96
  103. package/dist-docs/assets/aberdeen/prediction.d.ts +0 -33
  104. package/dist-docs/assets/aberdeen/prediction.js +0 -112
  105. package/dist-docs/assets/aberdeen/prediction.js.map +0 -10
  106. package/dist-docs/assets/aberdeen/route.d.ts +0 -137
  107. package/dist-docs/assets/aberdeen/route.js +0 -287
  108. package/dist-docs/assets/aberdeen/route.js.map +0 -10
  109. package/dist-docs/assets/aberdeen/transitions.d.ts +0 -18
  110. package/dist-docs/assets/aberdeen/transitions.js +0 -47
  111. package/dist-docs/assets/aberdeen/transitions.js.map +0 -10
  112. package/dist-docs/assets/custom.js +0 -573
  113. package/dist-docs/assets/favicon.png +0 -0
  114. package/dist-docs/assets/hierarchy.js +0 -1
  115. package/dist-docs/assets/highlight.css +0 -134
  116. package/dist-docs/assets/icons.js +0 -18
  117. package/dist-docs/assets/icons.svg +0 -1
  118. package/dist-docs/assets/main.js +0 -60
  119. package/dist-docs/assets/navigation.js +0 -1
  120. package/dist-docs/assets/search.js +0 -1
  121. package/dist-docs/assets/style.css +0 -1640
  122. package/dist-docs/dispatcher/Dispatcher/index.html +0 -21
  123. package/dist-docs/dispatcher/MATCH_FAILED/index.html +0 -2
  124. package/dist-docs/dispatcher/MATCH_REST/index.html +0 -2
  125. package/dist-docs/dispatcher/index.html +0 -4
  126. package/dist-docs/hierarchy.html +0 -1
  127. package/dist-docs/index.html +0 -61
  128. package/dist-docs/media/CHANGELOG.md +0 -266
  129. package/dist-docs/modules.html +0 -1
  130. package/dist-docs/prediction/applyCanon/index.html +0 -13
  131. package/dist-docs/prediction/applyPrediction/index.html +0 -8
  132. package/dist-docs/prediction/index.html +0 -9
  133. package/dist-docs/route/Route/index.html +0 -23
  134. package/dist-docs/route/back/index.html +0 -4
  135. package/dist-docs/route/current/index.html +0 -2
  136. package/dist-docs/route/go/index.html +0 -14
  137. package/dist-docs/route/index.html +0 -15
  138. package/dist-docs/route/interceptLinks/index.html +0 -8
  139. package/dist-docs/route/matchCurrent/index.html +0 -10
  140. package/dist-docs/route/persistScroll/index.html +0 -6
  141. package/dist-docs/route/push/index.html +0 -6
  142. package/dist-docs/route/setLog/index.html +0 -3
  143. package/dist-docs/route/up/index.html +0 -5
  144. package/dist-docs/sitemap.xml +0 -239
  145. package/dist-docs/transitions/grow/index.html +0 -6
  146. package/dist-docs/transitions/index.html +0 -5
  147. package/dist-docs/transitions/shrink/index.html +0 -6
  148. package/skill/aberdeen.md +0 -4586
  149. package/skill/dispatcher.md +0 -129
  150. package/skill/prediction.md +0 -73
  151. package/skill/route.md +0 -322
  152. package/skill/transitions.md +0 -59
@@ -1,573 +0,0 @@
1
- // This script augments javascript examples in the documentation
2
- // to allow editing and running them in a live preview.
3
- // You may consider all of this to be a bit hacky. :-)
4
-
5
- let styleE = document.createElement('style');
6
- styleE.innerText = `
7
- iframe {
8
- width: 100%;
9
- border: none;
10
- }
11
- .console-output {
12
- max-height: 200px;
13
- overflow-y: auto;
14
- padding: 8px;
15
- }
16
- .console-output > *:not(:first-child) { padding: 4px 0; border-top: 1px solid #8883; }
17
- .console-output > .error { color: #faa; }
18
- .console-output > .info { color: #afa; font-weight: bold; }
19
- .console-output > .debug { color: #ccc; }
20
- .console-output > .orange { color: orange; }
21
-
22
-
23
- .tabs {
24
- display: flex;
25
- list-style: none;
26
- padding: 0;
27
- margin: 0;
28
- }
29
-
30
- .tab {
31
- padding: 1rem 2rem;
32
- cursor: pointer;
33
- color: var(--color-text);
34
- transition: background-color 0.2s;
35
- }
36
-
37
- .tab.special {
38
- color: var(--color-link);
39
- font-style: italic;
40
- }
41
-
42
- .tab.active {
43
- background-color: var(--color-background-secondary);
44
- border-bottom: 4px solid var(--color-focus-outline);
45
- }
46
-
47
- .tab:hover {
48
- background-color: var(--color-background-active);
49
- }
50
-
51
- .tab-content {
52
- background-color: var(--color-background);
53
- border: 1px solid #9096a2;
54
- border-top-color: var(--color-focus-outline);
55
- }
56
-
57
- .tab-content > pre {
58
- border-radius: 0;
59
- border: 0;
60
- margin: 0;
61
- }
62
-
63
-
64
- .url-bar::before {
65
- content: '🔗 ';
66
- }
67
- .url-bar {
68
- gap: 8px;
69
- align-items: center;
70
- padding: 4px 8px;
71
- background-color: var(--color-background-secondary);
72
- border: 1px solid #9096a2;
73
- border-bottom: 0;
74
- font-weight: bold;
75
- display: none;
76
- }
77
- .url-bar > div {
78
- flex: 1;
79
- overflow: hidden;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- }
83
- .url-bar > button {
84
- flex: none;
85
- }
86
- `;
87
- document.head.appendChild(styleE);
88
-
89
- const iframeStyle = `
90
- html, body {
91
- overflow: hidden;
92
- }
93
- * {
94
- box-sizing: border-box;
95
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
96
- }
97
- :root {
98
- --link-color: #4c97f2;
99
- --text-color: #f5f5f5;
100
- --secondary-color: #bebe00;
101
- --neutral-color: #ccc;
102
- }
103
- body {
104
- padding: 0.8em;
105
- background-color: #1e1e1e;
106
- color: var(--text-color);
107
- font-size: 16px;
108
- }
109
- button {
110
- background-color: var(--link-color);
111
- font-weight: bold;
112
- color: white;
113
- border: none;
114
- padding: 0.5em 1em;
115
- border-radius: 4px;
116
- cursor: pointer;
117
- border: 2px solid var(--link-color);
118
- }
119
- .secondary {
120
- background-color: var(--secondary-color);
121
- border: 2px solid var(--secondary-color);
122
- color: black;
123
- }
124
- .outline {
125
- background-color: transparent;
126
- color: inherit;
127
- }
128
- .box {
129
- box-shadow: 0 0 5px var(--link-color);
130
- padding: 1em;
131
- border: 1px solid var(--link-color);
132
- border-radius: 8px;
133
- overflow: auto;
134
- }
135
- input {
136
- padding: 0.5em 0.75em;
137
- border-radius: 4px;
138
- outline: none;
139
- background-color: white;
140
- border: 2px solid white;
141
- width: 100%;
142
- margin: 0;
143
- font-size: 1rem;
144
- }
145
- input:focus {
146
- border-color: var(--link-color);
147
- }
148
- .row {
149
- display: flex;
150
- gap: 0.5em;
151
- }
152
- .row.wide > * {
153
- flex: 1;
154
- }
155
- label {
156
- display: flex;
157
- gap: 0.5em;
158
- padding: 0.5em 0;
159
- cursor: pointer;
160
- }
161
- input[type="checkbox"] {
162
- width: initial;
163
- }
164
- p {
165
- margin: 0;
166
- }
167
- p + p {
168
- margin-top: 0.5em;
169
- }
170
- h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {
171
- margin-top: 0;
172
- }
173
- code {
174
- border: 1px solid #bebe00;
175
- color: #bebe00;
176
- padding: 2px 4px;
177
- margin: 0 4px;
178
- border-radius: 3px;
179
- }
180
- a {
181
- text-decoration: none;
182
- color: var(--link-color);
183
- cursor: pointer;
184
- }
185
- `;
186
-
187
- let iframeCount = 0;
188
-
189
- function iframeCode(iframeId) {
190
- function update() {
191
- setTimeout(() => {
192
- const height = document.documentElement.offsetHeight;
193
- window.parent.postMessage({
194
- height,
195
- iframeId,
196
- html: getHtml(document.body),
197
- url: histUsed && histStack[histPos].url.href,
198
- back: histPos === 0,
199
- forward: histPos === histStack.length - 1,
200
- }, '*');
201
- }, 0);
202
- }
203
-
204
- // Request by parent for an update (when the iframe becomes visible)
205
- addEventListener('message', function(e) {
206
- if (e.data === "getUpdate") {
207
- update();
208
- } else if (e.data === "back") {
209
- window.ABERDEEN_FAKE_WINDOW.history.go(-1);
210
- } else if (e.data === "forward") {
211
- window.ABERDEEN_FAKE_WINDOW.history.go(1);
212
- }
213
- });
214
-
215
- function toLogString(val, maxDepth = 4, indent = "", seen = new WeakSet()) {
216
- if (val === null) return "null";
217
- if (val === undefined) return "undefined";
218
- if (typeof val === "string") return JSON.stringify(val);
219
- if (typeof val === "function") return 'function' + (val.name ? ' '+val.name : '');
220
- if (typeof val !== "object") return String(val);
221
- if (val instanceof Date) return val.toISOString();
222
- if (val instanceof RegExp) return String(val);
223
- if (val instanceof Error) return (val.stack || val.message).replace(/\n/g, "\n " + indent);
224
-
225
- if (seen.has(val)) return "<Circular>";
226
- seen.add(val);
227
-
228
- try {
229
- const newIndent = indent + ' ';
230
-
231
- if (Array.isArray(val)) {
232
- if (!maxDepth) return "[...]";
233
- const items = val.map(item => `${newIndent}${toLogString(item, maxDepth - 1, newIndent, seen)}\n`).join('');
234
- return `[\n${items}${indent}]`;
235
- }
236
-
237
- let name = val.constructor?.name || '';
238
- if (name === 'Object') name = '';
239
- if (!maxDepth) return `${name}{...}`;
240
- const props = Object.entries(val).map(([key, val]) => `${newIndent}${key}: ${toLogString(val, maxDepth - 1, newIndent, seen)}\n`).join('');
241
- return `${name}{\n${props}${indent}}`
242
- } finally {
243
- seen.delete(val);
244
- }
245
- }
246
-
247
- function createLogFunction(level) {
248
- return (...args) => window.parent.postMessage({
249
- level,
250
- log: args.map(arg => toLogString(arg)).join(" "),
251
- iframeId,
252
- }, '*');
253
- }
254
-
255
- window.console = {
256
- log: createLogFunction('log'),
257
- error: createLogFunction('error'),
258
- info: createLogFunction('info'),
259
- debug: createLogFunction('debug'),
260
- warn: createLogFunction('warn')
261
- };
262
-
263
- // Catch unhandled errors
264
- window.onerror = (message, source, lineno, colno, error) => {
265
- console.error(error);
266
- return false;
267
- };
268
-
269
- // Catch unhandled promise rejections
270
- window.onunhandledrejection = (event) => {
271
- console.error('Unhandled Promise rejection:', event.reason);
272
- };
273
-
274
- const histStack = [{state: {}, url: new URL("https://example.com")}];
275
- let histPos = 0;
276
- let histListeners = [];
277
- let histUsed = false;
278
-
279
- window.ABERDEEN_FAKE_WINDOW = {
280
- history: {
281
- state: {},
282
- replaceState(state, title, url) {
283
- histStack[histPos] = {state, url: new URL(url, histStack[histPos].url.href)};
284
- histUsed = true;
285
- update();
286
- },
287
- pushState(state, title, url) {
288
- histPos++;
289
- histStack[histPos] = {state, url: new URL(url, histStack[histPos-1].url.href)};
290
- histStack.length = histPos + 1;
291
- histUsed = true;
292
- update();
293
- },
294
- go(delta) {
295
- setTimeout(() => {
296
- histPos = Math.max(0, Math.min(histStack.length - 1, histPos + delta));
297
- histUsed = true;
298
- update();
299
- for (const listener of histListeners) {
300
- listener();
301
- }
302
- });
303
- }
304
- },
305
- get location() {
306
- return histStack[histPos].url;
307
- },
308
- addEventListener: (type, listener) => {
309
- if (type === 'popstate') {
310
- histListeners.push(listener);
311
- }
312
- },
313
- };
314
-
315
- document.addEventListener('DOMContentLoaded', () => {
316
- new MutationObserver(update).observe(document.body, {
317
- childList: true,
318
- subtree: true
319
- });
320
- update();
321
- });
322
-
323
- function getHtml(element, indent='') {
324
- let output = '';
325
- for (const child of element.childNodes) {
326
- if (!child.children?.length) {
327
- output += indent + ('outerHTML' in child ? child.outerHTML : child.textContent) + "\n";
328
- } else {
329
- const outerHTML = child.cloneNode(false).outerHTML;
330
-
331
- let openClose = outerHTML.split('></');
332
- output += indent + openClose[0] + '>\n';
333
- output += getHtml(child, indent+' ');
334
- output += indent + '</' + openClose[1] + "\n";
335
- }
336
- }
337
- return output;
338
- }
339
- }
340
-
341
- addEventListener('DOMContentLoaded', () => {
342
- for(let codeE of document.querySelectorAll('code[class="javascript"],code[class="typescript"]')) {
343
- const language = codeE.getAttribute('class');
344
- const preE = codeE.parentElement;
345
- if (preE.tagName !== 'PRE') continue;
346
- let js = '';
347
- for(let wordE of codeE.children) {
348
- if (wordE.tagName==='BR') js += "\n";
349
- else js += wordE.textContent;
350
- }
351
-
352
- const base = document.body.parentElement.getAttribute('data-base') || '/';
353
- const absBase = new URL(base, window.location.href).href;
354
-
355
- // Check for Aberdeen imports
356
- const orgJs = js;
357
- js = js.replace(/from\s+['"]aberdeen(\/[^'"]+)?['"]/g, function(_match, subpath) {
358
- return `from "${absBase}assets/aberdeen${subpath || '/aberdeen'}.js"`
359
- });
360
- if (js === orgJs) {
361
- // No imports have been done, do our default input
362
- js = `import A from "${absBase}assets/aberdeen/aberdeen.js";\n\n` + js;
363
- }
364
-
365
- // Create edit button
366
- const editButtonE = document.createElement('button');
367
- editButtonE.className = 'button';
368
- editButtonE.textContent = 'Edit';
369
- editButtonE.style.marginRight = '58px'; // Leave room for Copy button - hacky!
370
- editButtonE.addEventListener('click', () => {
371
- preE.innerHTML = '';
372
- let reloadTimeout = null;
373
- loadEditor(preE, language, js, (newJs) => {
374
- js = newJs;
375
- clearTimeout(reloadTimeout);
376
- reloadTimeout = setTimeout(reloadIframe, 250);
377
- });
378
- });
379
- preE.appendChild(editButtonE);
380
-
381
- let urlBarE, urlE, backE, forwardE;
382
-
383
- urlBarE = document.createElement('div');
384
- urlBarE.className = 'url-bar';
385
- urlE = document.createElement('div');
386
- urlBarE.appendChild(urlE);
387
-
388
- backE = document.createElement('button');
389
- backE.textContent = '⇦';
390
- backE.addEventListener('click', () => {
391
- iframeE.contentWindow.postMessage("back", '*')
392
- });
393
- urlBarE.appendChild(backE);
394
-
395
- forwardE = document.createElement('button');
396
- forwardE.textContent = '⇨';
397
- forwardE.addEventListener('click', () => {
398
- iframeE.contentWindow.postMessage("forward", '*')
399
- });
400
- urlBarE.appendChild(forwardE);
401
-
402
- const tabContent = document.createElement('div');
403
- tabContent.className = 'tab-content';
404
-
405
- const iframeE = document.createElement('iframe');
406
- const iframeId = ++iframeCount;
407
- iframeE.id = iframeId;
408
-
409
- const messageHandler = (e) => {
410
- if (e.data.iframeId == iframeId) {
411
- if (e.data.height) {
412
- iframeE.style.height = e.data.height + 'px';
413
- }
414
- if (e.data.html) {
415
- htmlE.innerText = e.data.html.trim();
416
- }
417
- if (e.data.level) {
418
- const msg = document.createElement('div');
419
- msg.className = e.data.level;
420
- msg.textContent = e.data.log;
421
- consoleE.appendChild(msg);
422
- consoleE.scrollTop = consoleE.scrollHeight;
423
- tabs.Console.tabE.innerHTML = `Console <code class="tsd-tag">${consoleE.childElementCount}</code>`;
424
- if (e.data.level === 'error' && currentMode !== 'Console') {
425
- let oldMode = currentMode;
426
- tabs.Console.select();
427
- autoBackMode = oldMode;
428
- }
429
- }
430
- if (e.data.url) {
431
- urlBarE.style.display = 'flex';
432
- urlE.textContent = e.data.url;
433
- backE.disabled = e.data.back;
434
- forwardE.disabled = e.data.forward;
435
- }
436
- }
437
- };
438
- addEventListener('message', messageHandler);
439
-
440
- // Create console output div
441
- const consoleE = document.createElement('pre');
442
- consoleE.className = 'console-output';
443
-
444
- const htmlE = document.createElement('pre');
445
-
446
- const tabsE = document.createElement('ul');
447
- tabsE.className = 'tabs';
448
-
449
- let autoBackMode;
450
- let currentMode;
451
-
452
- let tabs = {};
453
- for(let [name, contentE] of Object.entries({Browser: iframeE, HTML: htmlE, Console: consoleE})) {
454
- tabContent.appendChild(contentE);
455
- const tabE = document.createElement('li');
456
- tabE.className = 'tab';
457
- tabE.textContent = name;
458
-
459
- const select = () => {
460
- currentMode = name;
461
- autoBackMode = undefined;
462
- for(let tabPane of tabContent.children) {
463
- tabPane.style.display = 'none';
464
- }
465
- contentE.style.display = 'block';
466
- for(let t of tabsE.children) {
467
- t.classList.remove('active');
468
- }
469
- tabE.classList.add('active');
470
- if (contentE === iframeE && iframeE.contentWindow) iframeE.contentWindow.postMessage("getUpdate", '*'); // Request a height update
471
- };
472
- tabE.addEventListener('click', select);
473
-
474
- tabsE.appendChild(tabE);
475
- tabs[name] = {select, tabE};
476
- }
477
-
478
- let hasLayout = !!js.match(/\bA\(\s*['"`]|\b(dump|insertCss|insertGlobalCss)\(/);
479
- let hasInteraction = !!js.match(/\bbind[=:]|\bclick[=:]|\binput[=:]|\bsetInterval\b|\bsetTimeout\b/);
480
- tabs[hasLayout ? (hasInteraction ? 'Browser' : 'HTML') : 'Console'].select();
481
-
482
- reloadIframe();
483
-
484
- const restartTabE = document.createElement('a');
485
- restartTabE.className = 'tab special';
486
- restartTabE.textContent = 'Restart';
487
- restartTabE.addEventListener('click', () => {
488
- reloadIframe();
489
- });
490
-
491
- tabsE.appendChild(restartTabE);
492
-
493
- preE.after(tabContent);
494
- preE.after(urlBarE);
495
- preE.after(tabsE)
496
-
497
- function reloadIframe() {
498
- const html = `<!DOCTYPE html>
499
- <html>
500
- <head>
501
- <meta charset="utf-8">
502
- <style>${iframeStyle}</style>
503
- <script>
504
- (${iframeCode.toString()})(${iframeId});
505
- </script>
506
- <script type="${language==='typescript' ? 'text/typescript' : 'module'}">
507
- ${js}
508
- </script>
509
- <script type="module" src="https://unpkg.com/typestripped@latest/browser"></script>
510
- </head>
511
- <body>
512
- </body>
513
- </html>`;
514
- URL.revokeObjectURL(iframeE.src);
515
- iframeE.src = URL.createObjectURL(new Blob([html], {type: 'text/html'}));
516
- consoleE.innerHTML = '';
517
- htmlE.innerHTML = '';
518
- tabs.Console.tabE.innerHTML = `Console`;
519
-
520
- if (autoBackMode) tabs[autoBackMode].select();
521
- }
522
- }
523
-
524
- })
525
- async function loadEditor(preE, language, code, onChange) {
526
- if (!window.monaco) {
527
- await new Promise(resolve => {
528
- const script = document.createElement('script');
529
- script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js';
530
- script.onload = resolve;
531
- document.head.appendChild(script);
532
- });
533
-
534
- await new Promise(resolve => {
535
- require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' }});
536
- require(['vs/editor/editor.main'], resolve);
537
- });
538
- }
539
-
540
- // Create container
541
- const container = document.createElement('div');
542
- preE.appendChild(container);
543
-
544
- // Create editor
545
- const editor = monaco.editor.create(container, {
546
- value: code,
547
- language: language,
548
- theme: 'vs-dark',
549
- minimap: {
550
- enabled: false
551
- },
552
- scrollBeyondLastLine: false,
553
- scrollbar: {
554
- vertical: 'hidden',
555
- verticalScrollbarSize: 0,
556
- alwaysConsumeMouseWheel: false,
557
- },
558
- lineNumbers: "off",
559
- });
560
- editor.onDidContentSizeChange(() => {
561
- const height = editor.getContentHeight();
562
- editor.layout({ width: editor.getLayoutInfo().width, height });
563
- });
564
-
565
- // Add change handler
566
- if (onChange) {
567
- editor.onDidChangeModelContent(() => {
568
- onChange(editor.getValue());
569
- });
570
- }
571
-
572
- return editor;
573
- }
Binary file
@@ -1 +0,0 @@
1
- window.hierarchyData = "eJyrVirKzy8pVrKKjtVRKkpNy0lNLsnMzytWsqqurQUAmx4Kpg=="
@@ -1,134 +0,0 @@
1
- :root {
2
- --light-hl-0: #AF00DB;
3
- --dark-hl-0: #C586C0;
4
- --light-hl-1: #000000;
5
- --dark-hl-1: #D4D4D4;
6
- --light-hl-2: #001080;
7
- --dark-hl-2: #9CDCFE;
8
- --light-hl-3: #A31515;
9
- --dark-hl-3: #CE9178;
10
- --light-hl-4: #008000;
11
- --dark-hl-4: #6A9955;
12
- --light-hl-5: #0000FF;
13
- --dark-hl-5: #569CD6;
14
- --light-hl-6: #0070C1;
15
- --dark-hl-6: #4FC1FF;
16
- --light-hl-7: #795E26;
17
- --dark-hl-7: #DCDCAA;
18
- --light-hl-8: #098658;
19
- --dark-hl-8: #B5CEA8;
20
- --light-hl-9: #000000FF;
21
- --dark-hl-9: #D4D4D4;
22
- --light-hl-10: #267F99;
23
- --dark-hl-10: #4EC9B0;
24
- --light-hl-11: #811F3F;
25
- --dark-hl-11: #D16969;
26
- --light-hl-12: #D16969;
27
- --dark-hl-12: #CE9178;
28
- --light-hl-13: #000000;
29
- --dark-hl-13: #D7BA7D;
30
- --light-hl-14: #EE0000;
31
- --dark-hl-14: #DCDCAA;
32
- --light-hl-15: #CD3131;
33
- --dark-hl-15: #F44747;
34
- --light-code-background: #FFFFFF;
35
- --dark-code-background: #1E1E1E;
36
- }
37
-
38
- @media (prefers-color-scheme: light) { :root {
39
- --hl-0: var(--light-hl-0);
40
- --hl-1: var(--light-hl-1);
41
- --hl-2: var(--light-hl-2);
42
- --hl-3: var(--light-hl-3);
43
- --hl-4: var(--light-hl-4);
44
- --hl-5: var(--light-hl-5);
45
- --hl-6: var(--light-hl-6);
46
- --hl-7: var(--light-hl-7);
47
- --hl-8: var(--light-hl-8);
48
- --hl-9: var(--light-hl-9);
49
- --hl-10: var(--light-hl-10);
50
- --hl-11: var(--light-hl-11);
51
- --hl-12: var(--light-hl-12);
52
- --hl-13: var(--light-hl-13);
53
- --hl-14: var(--light-hl-14);
54
- --hl-15: var(--light-hl-15);
55
- --code-background: var(--light-code-background);
56
- } }
57
-
58
- @media (prefers-color-scheme: dark) { :root {
59
- --hl-0: var(--dark-hl-0);
60
- --hl-1: var(--dark-hl-1);
61
- --hl-2: var(--dark-hl-2);
62
- --hl-3: var(--dark-hl-3);
63
- --hl-4: var(--dark-hl-4);
64
- --hl-5: var(--dark-hl-5);
65
- --hl-6: var(--dark-hl-6);
66
- --hl-7: var(--dark-hl-7);
67
- --hl-8: var(--dark-hl-8);
68
- --hl-9: var(--dark-hl-9);
69
- --hl-10: var(--dark-hl-10);
70
- --hl-11: var(--dark-hl-11);
71
- --hl-12: var(--dark-hl-12);
72
- --hl-13: var(--dark-hl-13);
73
- --hl-14: var(--dark-hl-14);
74
- --hl-15: var(--dark-hl-15);
75
- --code-background: var(--dark-code-background);
76
- } }
77
-
78
- :root[data-theme='light'] {
79
- --hl-0: var(--light-hl-0);
80
- --hl-1: var(--light-hl-1);
81
- --hl-2: var(--light-hl-2);
82
- --hl-3: var(--light-hl-3);
83
- --hl-4: var(--light-hl-4);
84
- --hl-5: var(--light-hl-5);
85
- --hl-6: var(--light-hl-6);
86
- --hl-7: var(--light-hl-7);
87
- --hl-8: var(--light-hl-8);
88
- --hl-9: var(--light-hl-9);
89
- --hl-10: var(--light-hl-10);
90
- --hl-11: var(--light-hl-11);
91
- --hl-12: var(--light-hl-12);
92
- --hl-13: var(--light-hl-13);
93
- --hl-14: var(--light-hl-14);
94
- --hl-15: var(--light-hl-15);
95
- --code-background: var(--light-code-background);
96
- }
97
-
98
- :root[data-theme='dark'] {
99
- --hl-0: var(--dark-hl-0);
100
- --hl-1: var(--dark-hl-1);
101
- --hl-2: var(--dark-hl-2);
102
- --hl-3: var(--dark-hl-3);
103
- --hl-4: var(--dark-hl-4);
104
- --hl-5: var(--dark-hl-5);
105
- --hl-6: var(--dark-hl-6);
106
- --hl-7: var(--dark-hl-7);
107
- --hl-8: var(--dark-hl-8);
108
- --hl-9: var(--dark-hl-9);
109
- --hl-10: var(--dark-hl-10);
110
- --hl-11: var(--dark-hl-11);
111
- --hl-12: var(--dark-hl-12);
112
- --hl-13: var(--dark-hl-13);
113
- --hl-14: var(--dark-hl-14);
114
- --hl-15: var(--dark-hl-15);
115
- --code-background: var(--dark-code-background);
116
- }
117
-
118
- .hl-0 { color: var(--hl-0); }
119
- .hl-1 { color: var(--hl-1); }
120
- .hl-2 { color: var(--hl-2); }
121
- .hl-3 { color: var(--hl-3); }
122
- .hl-4 { color: var(--hl-4); }
123
- .hl-5 { color: var(--hl-5); }
124
- .hl-6 { color: var(--hl-6); }
125
- .hl-7 { color: var(--hl-7); }
126
- .hl-8 { color: var(--hl-8); }
127
- .hl-9 { color: var(--hl-9); }
128
- .hl-10 { color: var(--hl-10); }
129
- .hl-11 { color: var(--hl-11); }
130
- .hl-12 { color: var(--hl-12); }
131
- .hl-13 { color: var(--hl-13); }
132
- .hl-14 { color: var(--hl-14); }
133
- .hl-15 { color: var(--hl-15); }
134
- pre, code { background: var(--code-background); }