wc: fix expansion; fold main.js into index.html

kjk · Jun 5, 2024 · ddfc2ba · ddfc2ba
1 parent 6ec6337
commit ddfc2ba
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 123 deletions.
diff --git a/frontend/src/calc/index.html b/frontend/src/calc/index.html
@@ -12,7 +12,18 @@
 <body>
   <div id="app" class="min-h-screen"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "../base.css";
+
+    import App from "./Calc.svelte";
+    import { mount } from "svelte";
+
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = mount(App, args);
+    export default app;
+
   </script>
 </body>
 

diff --git a/frontend/src/calc/main.js b/frontend/src/calc/main.js
diff --git a/frontend/src/fm/index.html b/frontend/src/fm/index.html
@@ -12,7 +12,18 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "../base.css";
+
+    import fm from "./fm.svelte";
+    import { mount } from "svelte";
+
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = mount(fm, args);
+    export default app;
+
   </script>
 </body>
 

diff --git a/frontend/src/fm/main.js b/frontend/src/fm/main.js
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -13,7 +13,18 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "./base.css";
+
+    import App from "./Main.svelte";
+    import { mount } from "svelte";
+
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = mount(App, args);
+    export default app;
+
   </script>
 
 </body>

diff --git a/frontend/src/main.js b/frontend/src/main.js
diff --git a/frontend/src/qrscanner/index.html b/frontend/src/qrscanner/index.html
@@ -13,7 +13,14 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "../base.css";
+    import App from "./qrscanner.svelte";
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = new App(args);
+    console.log("app:", app);
   </script>
 </body>
 

diff --git a/frontend/src/qrscanner/main.js b/frontend/src/qrscanner/main.js
diff --git a/frontend/src/reader/index.html b/frontend/src/reader/index.html
@@ -12,7 +12,17 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "../base.css";
+
+    import Unzip from "./ComicBookReader.svelte";
+
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = new Unzip(args);
+    console.log(app);
+
   </script>
 </body>
 

diff --git a/frontend/src/reader/main.js b/frontend/src/reader/main.js
diff --git a/frontend/src/unzip/index.html b/frontend/src/unzip/index.html
@@ -12,7 +12,18 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "../base.css";
+
+    import Unzip from "./Unzip.svelte";
+    import { mount } from "svelte";
+
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = mount(Unzip, args);
+    export default app;
+
   </script>
 </body>
 

diff --git a/frontend/src/unzip/main.js b/frontend/src/unzip/main.js
diff --git a/frontend/src/wc/Folder.svelte b/frontend/src/wc/Folder.svelte
@@ -262,61 +262,63 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-{#each entries as e, idx}
-  {@const name = fs.entryName(e)}
-  {@const size = fs.entryMeta(e, "size") || 0}
-  {@const metaDirs = fs.entryMeta(e, "dirs") || 0}
-  {@const metaFiles = fs.entryMeta(e, "files") || 0}
-  {@const metaLineCount = fs.entryMeta(e, "linecount") || 0}
-  {@const isDir = fs.entryIsDir(e)}
-  {@const excluded = isExcluded(fs, e)}
-  {#if isDir}
-    <tr
-      on:click={() => toggleExpand(fs, e)}
-      class="hover:bg-gray-200 hover:cursor-pointer pl-8"
-    >
-      <td class="ind-{indent} font-semibold">
-        {#if isExpanded(fs, e)}
-          ▼
-        {:else}
-          ▶
-        {/if}
-        {name}
-      </td>
-      <td class="pl-2 text-right whitespace-nowrap">
-        {fmtSize(size)}
-      </td>
-      <td class="pl-2 text-right">{fmtNum(metaDirs)}</td>
-      <td class="pl-2 text-right">{fmtNum(metaFiles)}</td>
-      <td class="pl-2 text-right">{fmtNum(metaLineCount)}</td>
-      <td class="text-center bg-white"
-        ><button
-          on:click|stopPropagation={() => deleteDirOrFile(idx)}
-          class="hover:underline px-4 hover:text-red-600">delete</button
-        ></td
+{#key entries}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  {#each entries as e, idx}
+    {@const name = fs.entryName(e)}
+    {@const size = fs.entryMeta(e, "size") || 0}
+    {@const metaDirs = fs.entryMeta(e, "dirs") || 0}
+    {@const metaFiles = fs.entryMeta(e, "files") || 0}
+    {@const metaLineCount = fs.entryMeta(e, "linecount") || 0}
+    {@const isDir = fs.entryIsDir(e)}
+    {@const excluded = isExcluded(fs, e)}
+    {#if isDir}
+      <tr
+        on:click={() => toggleExpand(fs, e)}
+        class="hover:bg-gray-200 hover:cursor-pointer pl-8"
       >
-      {#if excluded}
-        <td class="text-center bg-white"
-          ><button
-            on:click|stopPropagation={() => doExclude(e, false)}
-            class="hover:underline px-4 text-blue-600">include</button
-          ></td
-        >
-      {:else}
+        <td class="ind-{indent} font-semibold">
+          {#if isExpanded(fs, e)}
+            ▼
+          {:else}
+            ▶
+          {/if}
+          {name}
+        </td>
+        <td class="pl-2 text-right whitespace-nowrap">
+          {fmtSize(size)}
+        </td>
+        <td class="pl-2 text-right">{fmtNum(metaDirs)}</td>
+        <td class="pl-2 text-right">{fmtNum(metaFiles)}</td>
+        <td class="pl-2 text-right">{fmtNum(metaLineCount)}</td>
         <td class="text-center bg-white"
           ><button
-            on:click|stopPropagation={() => doExclude(e, true)}
-            class="hover:underline px-4">exclude</button
+            on:click|stopPropagation={() => deleteDirOrFile(idx)}
+            class="hover:underline px-4 hover:text-red-600">delete</button
           ></td
         >
+        {#if excluded}
+          <td class="text-center bg-white"
+            ><button
+              on:click|stopPropagation={() => doExclude(e, false)}
+              class="hover:underline px-4 text-blue-600">include</button
+            ></td
+          >
+        {:else}
+          <td class="text-center bg-white"
+            ><button
+              on:click|stopPropagation={() => doExclude(e, true)}
+              class="hover:underline px-4">exclude</button
+            ></td
+          >
+        {/if}
+      </tr>
+      {#if isExpanded(fs, e)}
+        <svelte:self {fs} {recalc} dirRoot={e} indent={indent + 1} />
       {/if}
-    </tr>
-    {#if isExpanded(fs, e)}
-      <svelte:self {fs} {recalc} dirRoot={e} indent={indent + 1} />
     {/if}
-  {/if}
-{/each}
+  {/each}
+{/key}
 
 {#each entries as e, idx (idx)}
   {@const name = fs.entryName(e)}

diff --git a/frontend/src/wc/index.html b/frontend/src/wc/index.html
@@ -12,7 +12,18 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="./main.js">
+  <script type="module">
+    import "../base.css";
+
+    import App from "./wc.svelte";
+    import { mount } from "svelte";
+
+    const args = {
+      target: document.getElementById("app"),
+    };
+    const app = mount(App, args);
+    export default app;
+
   </script>
 </body>
 

diff --git a/frontend/src/wc/main.js b/frontend/src/wc/main.js