npm - jskelet - Versions diffs - 0.2.4 → 0.2.5 - Mend

jskelet 0.2.4 → 0.2.5

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 (91) hide show

package/AGENTS.md +132 -132
package/CHANGELOG.md +8 -0
package/LICENSE +21 -21
package/bin/jskelet.mjs +103 -103
package/docs/01-baslangic.md +285 -285
package/docs/02-mimari.md +287 -287
package/docs/03-routing.md +480 -480
package/docs/04-render-ve-sablonlar.md +490 -490
package/docs/05-islands.md +482 -482
package/docs/06-cache.md +1209 -1209
package/docs/08-build.md +366 -366
package/docs/09-dev-araclari.md +335 -335
package/docs/10-dagitim.md +329 -329
package/docs/12-panel-ve-oturum.md +384 -384
package/docs/README.md +105 -105
package/docs/en/01-getting-started.md +292 -292
package/docs/en/02-architecture.md +305 -305
package/docs/en/03-routing.md +497 -497
package/docs/en/04-rendering.md +504 -504
package/docs/en/05-islands.md +492 -492
package/docs/en/06-caching.md +1239 -1239
package/docs/en/07-configuration.md +986 -986
package/docs/en/08-build.md +383 -383
package/docs/en/09-dev-tools.md +342 -342
package/docs/en/10-deployment.md +332 -332
package/docs/en/11-migration.md +359 -359
package/docs/en/12-dashboards-and-sessions.md +392 -392
package/docs/en/README.md +112 -112
package/package.json +102 -102
package/src/build/ensure-build.mjs +15 -15
package/src/build/paths.mjs +143 -143
package/src/build/resolve-peer.mjs +36 -36
package/src/build/tasks/client.mjs +268 -268
package/src/build/tasks/css.mjs +124 -124
package/src/build/tasks/fonts.mjs +146 -146
package/src/build/tasks/icons.mjs +224 -224
package/src/build/tasks/images.mjs +244 -244
package/src/build/tasks/precompress.mjs +78 -78
package/src/client/cache-panel/i18n.js +670 -670
package/src/client/cache-panel/login.html +74 -74
package/src/client/cache-panel/panel.css +756 -756
package/src/client/cache-panel/panel.html +308 -308
package/src/client/cache-panel/panel.js +915 -915
package/src/client/devtools/report.html +185 -185
package/src/client/devtools/report.js +725 -725
package/src/client/dom.js +95 -95
package/src/client/form.js +192 -192
package/src/client/index.js +35 -35
package/src/client/registry.js +297 -297
package/src/client/safe-image.js +91 -91
package/src/client/store.js +36 -36
package/src/client/swap.js +188 -188
package/src/config/pattern.js +107 -107
package/src/http/control-flow.js +71 -71
package/src/http/cookies.js +257 -257
package/src/http/request-cache.js +46 -46
package/src/http/request-context.js +162 -162
package/src/index.js +83 -83
package/src/init.mjs +221 -221
package/src/runtime/alias-hooks.mjs +119 -119
package/src/runtime/register.mjs +4 -4
package/src/server/assets.js +147 -147
package/src/server/cache-deps.js +42 -42
package/src/server/cache-panel.js +759 -759
package/src/server/cloudflare.js +607 -595
package/src/server/create-app.js +291 -291
package/src/server/data-cache.js +462 -462
package/src/server/dev/report.js +369 -369
package/src/server/dev/socket.js +170 -170
package/src/server/dev/version-check.mjs +139 -139
package/src/server/html-cache.js +817 -817
package/src/server/metadata.js +102 -102
package/src/server/middleware/compression.js +205 -205
package/src/server/middleware/csrf.js +134 -134
package/src/server/middleware/dev-gate.js +62 -62
package/src/server/middleware/headers.js +37 -37
package/src/server/middleware/redirects.js +32 -32
package/src/server/middleware/static-precompressed.js +100 -100
package/src/server/middleware/upstream-proxy.js +141 -141
package/src/server/prewarm.js +601 -601
package/src/server/redis.js +569 -569
package/src/server/router.js +128 -128
package/src/server/status-page.js +164 -164
package/src/server/upstream-limiter.js +376 -376
package/src/server/upstream-tracking.js +166 -166
package/src/start.mjs +7 -7
package/src/templates/layout.ejs +44 -44
package/src/version.mjs +31 -31
package/src/views/components/loader.js +85 -85
package/src/views/helpers/html.js +102 -102
package/src/views/helpers/tags.js +245 -245

package/src/client/cache-panel/panel.html CHANGED Viewed

@@ -1,308 +1,308 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
-    <meta name="referrer" content="no-referrer" />
-    <title>Cache · JSkelet</title>
-    <link rel="icon" href="logo.png" />
-    <link rel="stylesheet" href="panel.css" />
-  </head>
-  <body>
-    <header>
-      <div class="brand">
-        <img src="logo.png" alt="" width="30" height="30" />
-        <span class="wordmark">JSkelet</span>
-        <span class="badge" id="version">—</span>
-      </div>
-      <nav class="crumbs" aria-label="Panel">
-        <span aria-current="page" data-i18n="nav.cache">Cache</span>
-      </nav>
-      <span class="spacer"></span>
-      <span class="chip" id="env">—</span>
-      <span class="chip" id="pid">—</span>
-      <span class="chip" id="uptime">—</span>
-      <span class="chip" id="memory">—</span>
-      <span id="language"></span>
-      <label class="check">
-        <input type="checkbox" id="auto" checked />
-        <span data-i18n="shell.live">live</span>
-      </label>
-      <button id="refresh" data-i18n="shell.refresh">Refresh</button>
-      <button id="logout" data-i18n="shell.signOut">Sign out</button>
-    </header>
-    <main>
-      <div class="cards">
-        <div class="card">
-          <div class="label" data-i18n="card.htmlEntries">HTML entries</div>
-          <div class="value" id="html-size">—</div>
-          <div class="sub" id="html-sub">—</div>
-        </div>
-        <div class="card">
-          <div class="label" data-i18n="card.htmlMemory">HTML in memory</div>
-          <div class="value" id="html-bytes">—</div>
-          <div class="sub" id="html-stale">—</div>
-        </div>
-        <div class="card">
-          <div class="label" data-i18n="card.dataEntries">Data entries</div>
-          <div class="value" id="data-size">—</div>
-          <div class="sub" id="data-sub">—</div>
-        </div>
-        <div class="card">
-          <div class="label" data-i18n="card.sharedTier">Shared tier</div>
-          <div class="value" id="redis-state">—</div>
-          <div class="sub" id="redis-sub">—</div>
-        </div>
-        <div class="card">
-          <div class="label" data-i18n="card.prewarm">Prewarm</div>
-          <div class="value" id="prewarm-state">—</div>
-          <div class="sub" id="prewarm-sub">—</div>
-        </div>
-      </div>
-      <section>
-        <h2>
-          <span data-i18n="redis.section">Shared tier</span>
-          <span class="count" id="redis-heading">—</span>
-        </h2>
-        <div class="body">
-          <dl class="kv" id="redis-kv"></dl>
-          <div class="row" id="redis-actions" hidden>
-            <button id="redis-inspect" data-i18n="redis.inspect">Count keys in Redis</button>
-            <button class="danger" id="redis-html" data-i18n="redis.dropHtml">
-              Drop shared HTML keys
-            </button>
-            <button class="danger" id="redis-data" data-i18n="redis.dropData">
-              Drop shared data keys
-            </button>
-          </div>
-          <div class="suggest" id="redis-suggest" hidden>
-            <p class="m0">
-              <strong data-i18n="redis.suggest.title">No shared tier.</strong>
-              <span data-i18n="redis.suggest.body"></span>
-            </p>
-            <pre><code>npm install ioredis</code></pre>
-            <pre><code>// jskelet.config.mjs
-cache() {
-  return {
-    redis: { enabled: true, url: process.env.REDIS_URL },
-  };
-}</code></pre>
-            <p class="hint m0" data-i18n="redis.suggest.hint"></p>
-          </div>
-        </div>
-      </section>
-      <section>
-        <h2>
-          <span data-i18n="cf.section">Cloudflare</span>
-          <span class="count" id="cf-heading">—</span>
-          <span class="tabs">
-            <button id="cf-refresh" data-i18n="cf.refresh">Refresh</button>
-          </span>
-        </h2>
-        <div class="body">
-          <dl class="kv" id="cf-kv"></dl>
-          <div id="cf-tools" hidden>
-            <div class="row">
-              <button class="danger" id="cf-purge-all" data-i18n="cf.purgeAll">
-                Purge everything
-              </button>
-              <button id="cf-purge-cached" data-i18n="cf.purgeCached">
-                Purge URLs cached here
-              </button>
-              <label class="check">
-                <input type="checkbox" id="cf-dev" />
-                <span data-i18n="cf.devMode"></span>
-              </label>
-            </div>
-            <div class="row">
-              <select id="cf-kind">
-                <option value="prefixes" data-i18n="cf.kind.prefixes">prefixes</option>
-                <option value="hosts" data-i18n="cf.kind.hosts">hosts</option>
-                <option value="tags" data-i18n="cf.kind.tags">cache tags</option>
-              </select>
-              <input
-                class="grow"
-                type="text"
-                id="cf-values"
-                spellcheck="false"
-                data-i18n-ph="cf.values.placeholder"
-              />
-              <button class="primary" id="cf-purge-keys" data-i18n="cf.purge">Purge</button>
-            </div>
-            <div class="row">
-              <button id="cf-tiered" data-i18n="cf.toggleTiered">Toggle Tiered Cache</button>
-              <button id="cf-reserve" data-i18n="cf.toggleReserve">Toggle Cache Reserve</button>
-              <button class="danger" id="cf-reserve-clear" data-i18n="cf.clearReserve">
-                Clear Cache Reserve
-              </button>
-            </div>
-            <div class="row">
-              <input
-                class="grow"
-                type="text"
-                id="cf-path"
-                spellcheck="false"
-                data-i18n-ph="cf.path.placeholder"
-              />
-              <button id="cf-analytics" data-i18n="cf.queryAnalytics">Query analytics</button>
-            </div>
-            <div id="cf-report" class="report" hidden></div>
-            <p class="hint" data-i18n="cf.edgeHint"></p>
-          </div>
-          <div class="suggest" id="cf-suggest" hidden>
-            <p class="m0">
-              <strong data-i18n="cf.suggest.title">Cloudflare is not connected.</strong>
-              <span data-i18n="cf.suggest.body"></span>
-            </p>
-            <pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
-JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
-            <p class="hint m0" data-i18n-html="cf.suggest.hint"></p>
-          </div>
-        </div>
-      </section>
-      <section>
-        <h2>
-          <span data-i18n="host.section">Host</span>
-          <span class="count" id="host-heading">—</span>
-        </h2>
-        <div class="body">
-          <div class="meter">
-            <div class="meter-head">
-              <span data-i18n="host.memory">Memory</span>
-              <span class="mono" id="ram-text">—</span>
-            </div>
-            <div class="bar"><span id="ram-bar"></span></div>
-            <p class="hint m0" id="ram-note">—</p>
-          </div>
-          <div class="meter">
-            <div class="meter-head">
-              <span data-i18n="host.disk">Disk</span>
-              <span class="mono" id="disk-text">—</span>
-            </div>
-            <div class="bar"><span id="disk-bar"></span></div>
-            <p class="hint m0" id="disk-note">—</p>
-          </div>
-        </div>
-      </section>
-      <section>
-        <h2><span data-i18n="actions.section">Actions</span></h2>
-        <div class="body">
-          <div class="row">
-            <input
-              class="grow"
-              type="text"
-              id="target"
-              spellcheck="false"
-              data-i18n-ph="actions.target.placeholder"
-            />
-            <label class="check">
-              <input type="checkbox" id="hard" />
-              <span data-i18n="actions.hard"></span>
-            </label>
-            <button class="primary" id="invalidate" data-i18n="actions.invalidate">
-              Invalidate
-            </button>
-          </div>
-          <div class="row">
-            <input
-              class="grow"
-              type="text"
-              id="prefix"
-              spellcheck="false"
-              data-i18n-ph="actions.prefix.placeholder"
-            />
-            <button class="danger" id="clear-data" data-i18n="actions.clearData">
-              Clear data cache
-            </button>
-            <button class="danger" id="clear-html" data-i18n="actions.clearHtml">
-              Clear HTML cache
-            </button>
-          </div>
-          <div class="row">
-            <button id="prewarm" data-i18n="actions.prewarm">Prewarm all paths</button>
-          </div>
-          <p class="hint" data-i18n="actions.hint"></p>
-        </div>
-      </section>
-      <section>
-        <h2>
-          <span data-i18n="entries.section">Entries</span>
-          <span class="count" id="listed">—</span>
-          <span class="tabs" role="tablist">
-            <button id="tab-html" role="tab" aria-selected="true">HTML</button>
-            <button id="tab-data" role="tab" aria-selected="false" data-i18n="tab.data">
-              Data
-            </button>
-          </span>
-        </h2>
-        <div class="body">
-          <div class="row">
-            <input
-              class="grow"
-              type="search"
-              id="search"
-              spellcheck="false"
-              data-i18n-ph="entries.search"
-            />
-          </div>
-        </div>
-        <div class="scroll">
-          <table>
-            <thead id="thead"></thead>
-            <tbody id="tbody"></tbody>
-          </table>
-          <div class="empty" id="empty" data-i18n="entries.empty" hidden>No entries.</div>
-        </div>
-      </section>
-    </main>
-    <footer>
-      <div class="foot-brand">
-        <img src="logo.png" alt="" width="24" height="24" />
-        <span class="wordmark">JSkelet</span>
-        <span class="mono" id="foot-release">—</span>
-      </div>
-      <div class="foot-links">
-        <a id="foot-repo" href="https://github.com/ayberkenis/jskelet" rel="noreferrer noopener">
-          GitHub
-        </a>
-        <span class="dot" aria-hidden="true">·</span>
-        <span data-i18n="footer.panel">Cache panel</span>
-        <span class="dot" aria-hidden="true">·</span>
-        <span class="live">
-          <span class="pulse"></span>
-          <span data-i18n="footer.rotates">Password rotates on restart</span>
-        </span>
-      </div>
-    </footer>
-    <div id="toast"></div>
-    <script type="module" src="panel.js"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Cache · JSkelet</title>
+    <link rel="icon" href="logo.png" />
+    <link rel="stylesheet" href="panel.css" />
+  </head>
+  <body>
+    <header>
+      <div class="brand">
+        <img src="logo.png" alt="" width="30" height="30" />
+        <span class="wordmark">JSkelet</span>
+        <span class="badge" id="version">—</span>
+      </div>
+      <nav class="crumbs" aria-label="Panel">
+        <span aria-current="page" data-i18n="nav.cache">Cache</span>
+      </nav>
+      <span class="spacer"></span>
+      <span class="chip" id="env">—</span>
+      <span class="chip" id="pid">—</span>
+      <span class="chip" id="uptime">—</span>
+      <span class="chip" id="memory">—</span>
+      <span id="language"></span>
+      <label class="check">
+        <input type="checkbox" id="auto" checked />
+        <span data-i18n="shell.live">live</span>
+      </label>
+      <button id="refresh" data-i18n="shell.refresh">Refresh</button>
+      <button id="logout" data-i18n="shell.signOut">Sign out</button>
+    </header>
+    <main>
+      <div class="cards">
+        <div class="card">
+          <div class="label" data-i18n="card.htmlEntries">HTML entries</div>
+          <div class="value" id="html-size">—</div>
+          <div class="sub" id="html-sub">—</div>
+        </div>
+        <div class="card">
+          <div class="label" data-i18n="card.htmlMemory">HTML in memory</div>
+          <div class="value" id="html-bytes">—</div>
+          <div class="sub" id="html-stale">—</div>
+        </div>
+        <div class="card">
+          <div class="label" data-i18n="card.dataEntries">Data entries</div>
+          <div class="value" id="data-size">—</div>
+          <div class="sub" id="data-sub">—</div>
+        </div>
+        <div class="card">
+          <div class="label" data-i18n="card.sharedTier">Shared tier</div>
+          <div class="value" id="redis-state">—</div>
+          <div class="sub" id="redis-sub">—</div>
+        </div>
+        <div class="card">
+          <div class="label" data-i18n="card.prewarm">Prewarm</div>
+          <div class="value" id="prewarm-state">—</div>
+          <div class="sub" id="prewarm-sub">—</div>
+        </div>
+      </div>
+      <section>
+        <h2>
+          <span data-i18n="redis.section">Shared tier</span>
+          <span class="count" id="redis-heading">—</span>
+        </h2>
+        <div class="body">
+          <dl class="kv" id="redis-kv"></dl>
+          <div class="row" id="redis-actions" hidden>
+            <button id="redis-inspect" data-i18n="redis.inspect">Count keys in Redis</button>
+            <button class="danger" id="redis-html" data-i18n="redis.dropHtml">
+              Drop shared HTML keys
+            </button>
+            <button class="danger" id="redis-data" data-i18n="redis.dropData">
+              Drop shared data keys
+            </button>
+          </div>
+          <div class="suggest" id="redis-suggest" hidden>
+            <p class="m0">
+              <strong data-i18n="redis.suggest.title">No shared tier.</strong>
+              <span data-i18n="redis.suggest.body"></span>
+            </p>
+            <pre><code>npm install ioredis</code></pre>
+            <pre><code>// jskelet.config.mjs
+cache() {
+  return {
+    redis: { enabled: true, url: process.env.REDIS_URL },
+  };
+}</code></pre>
+            <p class="hint m0" data-i18n="redis.suggest.hint"></p>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>
+          <span data-i18n="cf.section">Cloudflare</span>
+          <span class="count" id="cf-heading">—</span>
+          <span class="tabs">
+            <button id="cf-refresh" data-i18n="cf.refresh">Refresh</button>
+          </span>
+        </h2>
+        <div class="body">
+          <dl class="kv" id="cf-kv"></dl>
+          <div id="cf-tools" hidden>
+            <div class="row">
+              <button class="danger" id="cf-purge-all" data-i18n="cf.purgeAll">
+                Purge everything
+              </button>
+              <button id="cf-purge-cached" data-i18n="cf.purgeCached">
+                Purge URLs cached here
+              </button>
+              <label class="check">
+                <input type="checkbox" id="cf-dev" />
+                <span data-i18n="cf.devMode"></span>
+              </label>
+            </div>
+            <div class="row">
+              <select id="cf-kind">
+                <option value="prefixes" data-i18n="cf.kind.prefixes">prefixes</option>
+                <option value="hosts" data-i18n="cf.kind.hosts">hosts</option>
+                <option value="tags" data-i18n="cf.kind.tags">cache tags</option>
+              </select>
+              <input
+                class="grow"
+                type="text"
+                id="cf-values"
+                spellcheck="false"
+                data-i18n-ph="cf.values.placeholder"
+              />
+              <button class="primary" id="cf-purge-keys" data-i18n="cf.purge">Purge</button>
+            </div>
+            <div class="row">
+              <button id="cf-tiered" data-i18n="cf.toggleTiered">Toggle Tiered Cache</button>
+              <button id="cf-reserve" data-i18n="cf.toggleReserve">Toggle Cache Reserve</button>
+              <button class="danger" id="cf-reserve-clear" data-i18n="cf.clearReserve">
+                Clear Cache Reserve
+              </button>
+            </div>
+            <div class="row">
+              <input
+                class="grow"
+                type="text"
+                id="cf-path"
+                spellcheck="false"
+                data-i18n-ph="cf.path.placeholder"
+              />
+              <button id="cf-analytics" data-i18n="cf.queryAnalytics">Query analytics</button>
+            </div>
+            <div id="cf-report" class="report" hidden></div>
+            <p class="hint" data-i18n="cf.edgeHint"></p>
+          </div>
+          <div class="suggest" id="cf-suggest" hidden>
+            <p class="m0">
+              <strong data-i18n="cf.suggest.title">Cloudflare is not connected.</strong>
+              <span data-i18n="cf.suggest.body"></span>
+            </p>
+            <pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
+JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
+            <p class="hint m0" data-i18n-html="cf.suggest.hint"></p>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>
+          <span data-i18n="host.section">Host</span>
+          <span class="count" id="host-heading">—</span>
+        </h2>
+        <div class="body">
+          <div class="meter">
+            <div class="meter-head">
+              <span data-i18n="host.memory">Memory</span>
+              <span class="mono" id="ram-text">—</span>
+            </div>
+            <div class="bar"><span id="ram-bar"></span></div>
+            <p class="hint m0" id="ram-note">—</p>
+          </div>
+          <div class="meter">
+            <div class="meter-head">
+              <span data-i18n="host.disk">Disk</span>
+              <span class="mono" id="disk-text">—</span>
+            </div>
+            <div class="bar"><span id="disk-bar"></span></div>
+            <p class="hint m0" id="disk-note">—</p>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2><span data-i18n="actions.section">Actions</span></h2>
+        <div class="body">
+          <div class="row">
+            <input
+              class="grow"
+              type="text"
+              id="target"
+              spellcheck="false"
+              data-i18n-ph="actions.target.placeholder"
+            />
+            <label class="check">
+              <input type="checkbox" id="hard" />
+              <span data-i18n="actions.hard"></span>
+            </label>
+            <button class="primary" id="invalidate" data-i18n="actions.invalidate">
+              Invalidate
+            </button>
+          </div>
+          <div class="row">
+            <input
+              class="grow"
+              type="text"
+              id="prefix"
+              spellcheck="false"
+              data-i18n-ph="actions.prefix.placeholder"
+            />
+            <button class="danger" id="clear-data" data-i18n="actions.clearData">
+              Clear data cache
+            </button>
+            <button class="danger" id="clear-html" data-i18n="actions.clearHtml">
+              Clear HTML cache
+            </button>
+          </div>
+          <div class="row">
+            <button id="prewarm" data-i18n="actions.prewarm">Prewarm all paths</button>
+          </div>
+          <p class="hint" data-i18n="actions.hint"></p>
+        </div>
+      </section>
+      <section>
+        <h2>
+          <span data-i18n="entries.section">Entries</span>
+          <span class="count" id="listed">—</span>
+          <span class="tabs" role="tablist">
+            <button id="tab-html" role="tab" aria-selected="true">HTML</button>
+            <button id="tab-data" role="tab" aria-selected="false" data-i18n="tab.data">
+              Data
+            </button>
+          </span>
+        </h2>
+        <div class="body">
+          <div class="row">
+            <input
+              class="grow"
+              type="search"
+              id="search"
+              spellcheck="false"
+              data-i18n-ph="entries.search"
+            />
+          </div>
+        </div>
+        <div class="scroll">
+          <table>
+            <thead id="thead"></thead>
+            <tbody id="tbody"></tbody>
+          </table>
+          <div class="empty" id="empty" data-i18n="entries.empty" hidden>No entries.</div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div class="foot-brand">
+        <img src="logo.png" alt="" width="24" height="24" />
+        <span class="wordmark">JSkelet</span>
+        <span class="mono" id="foot-release">—</span>
+      </div>
+      <div class="foot-links">
+        <a id="foot-repo" href="https://github.com/ayberkenis/jskelet" rel="noreferrer noopener">
+          GitHub
+        </a>
+        <span class="dot" aria-hidden="true">·</span>
+        <span data-i18n="footer.panel">Cache panel</span>
+        <span class="dot" aria-hidden="true">·</span>
+        <span class="live">
+          <span class="pulse"></span>
+          <span data-i18n="footer.rotates">Password rotates on restart</span>
+        </span>
+      </div>
+    </footer>
+    <div id="toast"></div>
+    <script type="module" src="panel.js"></script>
+  </body>
+</html>