lightview 2.0.7 → 2.0.9

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 (140) hide show
  1. package/README.md +47 -1283
  2. package/components/actions/button.js +5 -5
  3. package/components/actions/dropdown.js +6 -6
  4. package/components/actions/modal.js +9 -9
  5. package/components/actions/swap.js +5 -5
  6. package/components/data-display/accordion.js +6 -6
  7. package/components/data-display/alert.js +6 -6
  8. package/components/data-display/avatar.js +7 -7
  9. package/components/data-display/badge.js +5 -5
  10. package/components/data-display/card.js +7 -7
  11. package/components/data-display/carousel.js +4 -4
  12. package/components/data-display/chart.js +8 -8
  13. package/components/data-display/chat.js +7 -7
  14. package/components/data-display/collapse.js +5 -5
  15. package/components/data-display/countdown.js +3 -3
  16. package/components/data-display/diff.js +6 -6
  17. package/components/data-display/kbd.js +5 -5
  18. package/components/data-display/loading.js +5 -5
  19. package/components/data-display/progress.js +5 -5
  20. package/components/data-display/radial-progress.js +5 -5
  21. package/components/data-display/skeleton.js +3 -3
  22. package/components/data-display/stats.js +9 -9
  23. package/components/data-display/table.js +9 -9
  24. package/components/data-display/timeline.js +8 -8
  25. package/components/data-display/toast.js +3 -3
  26. package/components/data-display/tooltip.js +3 -3
  27. package/components/data-input/checkbox.js +5 -5
  28. package/components/data-input/file-input.js +3 -3
  29. package/components/data-input/input.js +5 -5
  30. package/components/data-input/radio.js +9 -9
  31. package/components/data-input/range.js +3 -3
  32. package/components/data-input/rating.js +3 -3
  33. package/components/data-input/select.js +5 -5
  34. package/components/data-input/textarea.js +3 -3
  35. package/components/data-input/toggle.js +5 -5
  36. package/components/layout/divider.js +3 -3
  37. package/components/layout/drawer.js +7 -7
  38. package/components/layout/footer.js +5 -5
  39. package/components/layout/hero.js +5 -5
  40. package/components/layout/indicator.js +4 -4
  41. package/components/layout/join.js +4 -4
  42. package/components/layout/navbar.js +6 -6
  43. package/components/navigation/breadcrumbs.js +4 -4
  44. package/components/navigation/dock.js +5 -5
  45. package/components/navigation/menu.js +6 -6
  46. package/components/navigation/pagination.js +3 -3
  47. package/components/navigation/steps.js +4 -4
  48. package/components/navigation/tabs.js +5 -5
  49. package/components/theme/theme-switch.js +30 -30
  50. package/docs/about.html +142 -14
  51. package/docs/api/computed.html +1 -6
  52. package/docs/api/effects.html +1 -7
  53. package/docs/api/elements.html +6 -10
  54. package/docs/api/enhance.html +1 -6
  55. package/docs/api/hypermedia.html +154 -22
  56. package/docs/api/index.html +7 -12
  57. package/docs/api/nav.html +18 -1
  58. package/docs/api/signals.html +1 -6
  59. package/docs/api/state.html +1 -6
  60. package/docs/assets/js/examplify-sandbox.html +2 -2
  61. package/docs/assets/js/examplify.js +15 -15
  62. package/docs/components/accordion.html +4 -4
  63. package/docs/components/alert.html +4 -4
  64. package/docs/components/avatar.html +4 -4
  65. package/docs/components/badge.html +4 -4
  66. package/docs/components/breadcrumbs.html +3 -3
  67. package/docs/components/button.html +5 -5
  68. package/docs/components/card.html +4 -4
  69. package/docs/components/carousel.html +3 -3
  70. package/docs/components/chart-area.html +6 -6
  71. package/docs/components/chart-bar.html +6 -6
  72. package/docs/components/chart-column.html +6 -6
  73. package/docs/components/chart-line.html +6 -6
  74. package/docs/components/chart-pie.html +6 -6
  75. package/docs/components/chart.html +2 -2
  76. package/docs/components/chat.html +4 -4
  77. package/docs/components/checkbox.html +4 -4
  78. package/docs/components/collapse.html +4 -4
  79. package/docs/components/countdown.html +4 -4
  80. package/docs/components/diff.html +3 -3
  81. package/docs/components/divider.html +3 -3
  82. package/docs/components/dock.html +3 -3
  83. package/docs/components/drawer.html +4 -4
  84. package/docs/components/dropdown.html +4 -4
  85. package/docs/components/file-input.html +4 -4
  86. package/docs/components/footer.html +3 -3
  87. package/docs/components/gallery.html +2 -2
  88. package/docs/components/hero.html +3 -3
  89. package/docs/components/index.css +5 -3
  90. package/docs/components/index.html +4 -4
  91. package/docs/components/indicator.html +3 -3
  92. package/docs/components/input.html +4 -4
  93. package/docs/components/join.html +3 -3
  94. package/docs/components/kbd.html +3 -3
  95. package/docs/components/loading.html +4 -4
  96. package/docs/components/menu.html +4 -4
  97. package/docs/components/modal.html +4 -4
  98. package/docs/components/navbar.html +3 -3
  99. package/docs/components/pagination.html +3 -3
  100. package/docs/components/progress.html +4 -4
  101. package/docs/components/radial-progress.html +3 -3
  102. package/docs/components/radio.html +4 -4
  103. package/docs/components/range.html +4 -4
  104. package/docs/components/rating.html +4 -4
  105. package/docs/components/select.html +4 -4
  106. package/docs/components/sidebar-setup.js +1 -1
  107. package/docs/components/skeleton.html +4 -4
  108. package/docs/components/spinner.html +4 -4
  109. package/docs/components/stats.html +4 -4
  110. package/docs/components/steps.html +3 -3
  111. package/docs/components/swap.html +4 -4
  112. package/docs/components/switch.html +4 -4
  113. package/docs/components/table.html +4 -4
  114. package/docs/components/tabs.html +4 -4
  115. package/docs/components/text-input.html +4 -4
  116. package/docs/components/textarea.html +4 -4
  117. package/docs/components/timeline.html +4 -4
  118. package/docs/components/toast.html +4 -4
  119. package/docs/components/toggle.html +4 -4
  120. package/docs/components/tooltip.html +4 -4
  121. package/docs/examples/getting-started-example.html +1 -1
  122. package/docs/examples/index.html +1 -2
  123. package/docs/getting-started/index.html +105 -14
  124. package/docs/index.html +2 -11
  125. package/docs/router-nav.html +13 -0
  126. package/docs/router.html +60 -17
  127. package/docs/styles/index.html +2 -7
  128. package/docs/syntax.html +144 -0
  129. package/functions/_middleware.js +17 -10
  130. package/functions/processServerScripts.js +127 -0
  131. package/index.html +8 -8
  132. package/lightview-router.js +141 -297
  133. package/lightview-x.js +604 -573
  134. package/lightview.js +179 -157
  135. package/package.json +33 -26
  136. package/scripts/analysis/README.md +2 -0
  137. package/scripts/analysis/analyze.js +266 -0
  138. package/scripts/analysis/latest_metrics.md +185 -0
  139. package/wrangler.toml +6 -0
  140. package/docs/playground.html +0 -416
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object', 'html'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -223,7 +223,7 @@ $('#example').content(progressBars);</code></pre>
223
223
 
224
224
  <!-- Tabs -->
225
225
  <script>
226
- window.switchReactiveSyntaxTab = (tabId) => {
226
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
227
227
  const tabs = ['tagged', 'vdom', 'object'];
228
228
  tabs.forEach(t => {
229
229
  const tabEl = document.getElementById(`tab-btn-reactive-${t}`);
@@ -511,4 +511,4 @@ $('#example').content(demo);</code></pre>
511
511
  >
512
512
  </div>
513
513
  </div>
514
- </div>
514
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object', 'html'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -431,4 +431,4 @@ $('#example').content(demo);</code></pre>
431
431
  </div>
432
432
  </div>
433
433
  </div>
434
- </div>
434
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object', 'html'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -303,7 +303,7 @@ $('#example').content({
303
303
 
304
304
  <!-- Tabs -->
305
305
  <script>
306
- window.switchReactiveSyntaxTab = (tabId) => {
306
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
307
307
  const tabs = ['tagged', 'vdom', 'object'];
308
308
  tabs.forEach(t => {
309
309
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -652,4 +652,4 @@ $('#example').content(reactiveDemo);</code></pre>
652
652
  </div>
653
653
  </div>
654
654
  </div>
655
- </div>
655
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -71,7 +71,7 @@
71
71
 
72
72
  <!-- Tabs -->
73
73
  <script>
74
- window.switchSyntaxTab = (tabId) => {
74
+ globalThis.switchSyntaxTab = (tabId) => {
75
75
  const tabs = ['tagged', 'vdom', 'object'];
76
76
  tabs.forEach(t => {
77
77
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -261,7 +261,7 @@ $('#example').content({
261
261
 
262
262
  <!-- Tabs -->
263
263
  <script>
264
- window.switchReactiveSyntaxTab = (tabId) => {
264
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
265
265
  const tabs = ['tagged', 'vdom', 'object'];
266
266
  tabs.forEach(t => {
267
267
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -608,4 +608,4 @@ $('#example').content(reactiveDemo);</code></pre>
608
608
  </div>
609
609
  </div>
610
610
  </div>
611
- </div>
611
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -259,7 +259,7 @@ $('#example').content({
259
259
 
260
260
  <!-- Tabs -->
261
261
  <script>
262
- window.switchReactiveSyntaxTab = (tabId) => {
262
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
263
263
  const tabs = ['tagged', 'vdom', 'object'];
264
264
  tabs.forEach(t => {
265
265
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -639,4 +639,4 @@ $('#example').content(reactiveDemo);</code></pre>
639
639
  </div>
640
640
  </div>
641
641
  </div>
642
- </div>
642
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -71,7 +71,7 @@
71
71
 
72
72
  <!-- Tabs -->
73
73
  <script>
74
- window.switchSyntaxTab = (tabId) => {
74
+ globalThis.switchSyntaxTab = (tabId) => {
75
75
  const tabs = ['tagged', 'vdom', 'object', 'html'];
76
76
  tabs.forEach(t => {
77
77
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -303,7 +303,7 @@ $('#example').content(demo);</code></pre>
303
303
 
304
304
  <!-- Tabs -->
305
305
  <script>
306
- window.switchReactiveSyntaxTab = (tabId) => {
306
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
307
307
  const tabs = ['tagged', 'vdom', 'object'];
308
308
  tabs.forEach(t => {
309
309
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -693,4 +693,4 @@ $('#example').content(reactiveDemo);</code></pre>
693
693
  </div>
694
694
  </div>
695
695
  </div>
696
- </div>
696
+ </div>
@@ -45,7 +45,7 @@ export function initSidebar() {
45
45
  */
46
46
  function updateSidebarUI() {
47
47
  sidebar.className = `gallery-sidebar ${sidebarOpen.value ? 'open' : 'closed'}`;
48
- main.className = `gallery-main ${sidebarOpen.value ? '' : 'sidebar-closed'}`;
48
+ main.className = `gallery-main ${sidebarOpen.value ? 'sidebar-open' : ''}`;
49
49
  overlay.className = `sidebar-overlay ${sidebarOpen.value ? 'active' : ''}`;
50
50
  toggleIcon.setAttribute('class', `toggle-icon ${sidebarOpen.value ? '' : 'rotated'}`);
51
51
  }
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -69,7 +69,7 @@
69
69
 
70
70
  <!-- Tabs -->
71
71
  <script>
72
- window.switchSyntaxTab = (tabId) => {
72
+ globalThis.switchSyntaxTab = (tabId) => {
73
73
  const tabs = ['tagged', 'vdom', 'object'];
74
74
  tabs.forEach(t => {
75
75
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -181,7 +181,7 @@ $('#example').content({
181
181
 
182
182
  <!-- Tabs -->
183
183
  <script>
184
- window.switchReactiveSyntaxTab = (tabId) => {
184
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
185
185
  const tabs = ['tagged', 'vdom', 'object'];
186
186
  tabs.forEach(t => {
187
187
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -444,4 +444,4 @@ $('#example').content(demo);</code></pre>
444
444
  </div>
445
445
  </div>
446
446
  </div>
447
- </div>
447
+ </div>
@@ -1,10 +1,10 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
5
- window.location.replace('/docs/components/loading');
4
+ if (globalThis.LightviewRouter) {
5
+ globalThis.location.replace('/docs/components/loading');
6
6
  } else {
7
- window.location.href = 'loading.html';
7
+ globalThis.location.href = 'loading.html';
8
8
  }
9
9
  </script>
10
10
 
@@ -65,4 +65,4 @@
65
65
  </div>
66
66
  </div>
67
67
  </div>
68
- </div>
68
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -69,7 +69,7 @@
69
69
 
70
70
  <!-- Tabs -->
71
71
  <script>
72
- window.switchSyntaxTab = (tabId) => {
72
+ globalThis.switchSyntaxTab = (tabId) => {
73
73
  const tabs = ['tagged', 'vdom', 'object'];
74
74
  tabs.forEach(t => {
75
75
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -239,7 +239,7 @@ $('#example').content(stats);</code></pre>
239
239
 
240
240
  <!-- Tabs -->
241
241
  <script>
242
- window.switchReactiveSyntaxTab = (tabId) => {
242
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
243
243
  const tabs = ['tagged', 'vdom', 'object'];
244
244
  tabs.forEach(t => {
245
245
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -483,4 +483,4 @@ $('#example').content(stats);</code></pre>
483
483
  </div>
484
484
  </div>
485
485
  </div>
486
- </div>
486
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -69,7 +69,7 @@
69
69
 
70
70
  <!-- Tabs -->
71
71
  <script>
72
- window.switchSyntaxTab = (tabId) => {
72
+ globalThis.switchSyntaxTab = (tabId) => {
73
73
  const tabs = ['tagged', 'vdom', 'object'];
74
74
  tabs.forEach(t => {
75
75
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -353,4 +353,4 @@ $('#example').content(demo);</code></pre>
353
353
  </div>
354
354
  </div>
355
355
  </div>
356
- </div>
356
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -69,7 +69,7 @@
69
69
 
70
70
  <!-- Tabs -->
71
71
  <script>
72
- window.switchSyntaxTab = (tabId) => {
72
+ globalThis.switchSyntaxTab = (tabId) => {
73
73
  const tabs = ['tagged', 'vdom', 'object'];
74
74
  tabs.forEach(t => {
75
75
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -223,7 +223,7 @@ $('#example').content(demo);</code></pre>
223
223
 
224
224
  <!-- Tabs -->
225
225
  <script>
226
- window.switchReactiveSyntaxTab = (tabId) => {
226
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
227
227
  const tabs = ['tagged', 'vdom', 'object'];
228
228
  tabs.forEach(t => {
229
229
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -514,4 +514,4 @@ $('#example').content(demo);</code></pre>
514
514
  </div>
515
515
  </div>
516
516
  </div>
517
- </div>
517
+ </div>
@@ -1,10 +1,10 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
5
- window.location.replace('/docs/components/toggle');
4
+ if (globalThis.LightviewRouter) {
5
+ globalThis.location.replace('/docs/components/toggle');
6
6
  } else {
7
- window.location.href = 'toggle.html';
7
+ globalThis.location.href = 'toggle.html';
8
8
  }
9
9
  </script>
10
10
 
@@ -65,4 +65,4 @@
65
65
  </div>
66
66
  </div>
67
67
  </div>
68
- </div>
68
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -262,7 +262,7 @@ $('#example').content(table);</code></pre>
262
262
 
263
263
  <!-- Tabs -->
264
264
  <script>
265
- window.switchReactiveSyntaxTab = (tabId) => {
265
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
266
266
  const tabs = ['tagged', 'vdom', 'object'];
267
267
  tabs.forEach(t => {
268
268
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -665,4 +665,4 @@ $('#example').content(demo);</code></pre>
665
665
  </div>
666
666
  </div>
667
667
  </div>
668
- </div>
668
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -231,7 +231,7 @@ $('#example').content(demo);</code></pre>
231
231
 
232
232
  <!-- Tabs -->
233
233
  <script>
234
- window.switchReactiveSyntaxTab = (tabId) => {
234
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
235
235
  const tabs = ['tagged', 'vdom', 'object'];
236
236
  tabs.forEach(t => {
237
237
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -503,4 +503,4 @@ $('#example').content(demo);</code></pre>
503
503
  </div>
504
504
  </div>
505
505
  </div>
506
- </div>
506
+ </div>
@@ -1,10 +1,10 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
5
- window.location.replace('/docs/components/input');
4
+ if (globalThis.LightviewRouter) {
5
+ globalThis.location.replace('/docs/components/input');
6
6
  } else {
7
- window.location.href = 'input.html';
7
+ globalThis.location.href = 'input.html';
8
8
  }
9
9
  </script>
10
10
 
@@ -65,4 +65,4 @@
65
65
  </div>
66
66
  </div>
67
67
  </div>
68
- </div>
68
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -246,7 +246,7 @@ $('#example').content({
246
246
 
247
247
  <!-- Tabs -->
248
248
  <script>
249
- window.switchReactiveSyntaxTab = (tabId) => {
249
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
250
250
  const tabs = ['tagged', 'vdom', 'object'];
251
251
  tabs.forEach(t => {
252
252
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -600,4 +600,4 @@ $('#example').content(reactiveDemo);</code></pre>
600
600
  </div>
601
601
  </div>
602
602
  </div>
603
- </div>
603
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -219,7 +219,7 @@ $('#example').content(timeline);</code></pre>
219
219
 
220
220
  <!-- Tabs -->
221
221
  <script>
222
- window.switchReactiveSyntaxTab = (tabId) => {
222
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
223
223
  const tabs = ['tagged', 'vdom', 'object'];
224
224
  tabs.forEach(t => {
225
225
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -484,4 +484,4 @@ $('#example').content(timeline);</code></pre>
484
484
  </div>
485
485
  </div>
486
486
  </div>
487
- </div>
487
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -71,7 +71,7 @@
71
71
 
72
72
  <!-- Tabs -->
73
73
  <script>
74
- window.switchSyntaxTab = (tabId) => {
74
+ globalThis.switchSyntaxTab = (tabId) => {
75
75
  const tabs = ['tagged', 'vdom', 'object'];
76
76
  tabs.forEach(t => {
77
77
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -202,7 +202,7 @@ $('#demo').content(toast);</code></pre>
202
202
 
203
203
  <!-- Tabs -->
204
204
  <script>
205
- window.switchReactiveSyntaxTab = (tabId) => {
205
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
206
206
  const tabs = ['tagged', 'vdom', 'object'];
207
207
  tabs.forEach(t => {
208
208
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -471,4 +471,4 @@ $('#demo').content(demo);</code></pre>
471
471
  `;
472
472
  setTimeout(() => container.innerHTML = '', 3000);
473
473
  }
474
- </script>
474
+ </script>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object', 'html'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -256,7 +256,7 @@ $('#example').content(demo);</code></pre>
256
256
 
257
257
  <!-- Tabs -->
258
258
  <script>
259
- window.switchReactiveSyntaxTab = (tabId) => {
259
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
260
260
  const tabs = ['tagged', 'vdom', 'object'];
261
261
  tabs.forEach(t => {
262
262
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -561,4 +561,4 @@ $('#example').content(demo);</code></pre>
561
561
  </div>
562
562
  </div>
563
563
  </div>
564
- </div>
564
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -70,7 +70,7 @@
70
70
 
71
71
  <!-- Tabs -->
72
72
  <script>
73
- window.switchSyntaxTab = (tabId) => {
73
+ globalThis.switchSyntaxTab = (tabId) => {
74
74
  const tabs = ['tagged', 'vdom', 'object'];
75
75
  tabs.forEach(t => {
76
76
  const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -218,7 +218,7 @@ $('#demo').content(tooltips);</code></pre>
218
218
 
219
219
  <!-- Tabs -->
220
220
  <script>
221
- window.switchReactiveSyntaxTab = (tabId) => {
221
+ globalThis.switchReactiveSyntaxTab = (tabId) => {
222
222
  const tabs = ['tagged', 'vdom', 'object'];
223
223
  tabs.forEach(t => {
224
224
  const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -420,4 +420,4 @@ $('#demo').content(tooltips);</code></pre>
420
420
  </div>
421
421
  </div>
422
422
  </div>
423
- </div>
423
+ </div>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -1,7 +1,7 @@
1
1
  <!-- SEO-friendly SPA Shim -->
2
2
  <script src="/lightview-router.js"></script>
3
3
  <script>
4
- if (window.LightviewRouter) {
4
+ if (globalThis.LightviewRouter) {
5
5
  LightviewRouter.base('/index.html');
6
6
  }
7
7
  </script>
@@ -87,7 +87,6 @@
87
87
  <p style="color: var(--site-text-secondary); margin: 0 0 1rem;">
88
88
  Open the playground and write your own code.
89
89
  </p>
90
- <a href="/docs/playground" class="btn btn-primary">Open Playground</a>
91
90
  </div>
92
91
  </div>
93
92
  </div>