refactor: modularize browser client

src/server/client-assets.ts

@@ -0,0 +1,30 @@
+import { readFile } from "node:fs/promises";
+import type { ServerResponse } from "node:http";
+
+const CLIENT_ASSET_PREFIX = "/client/";
+
+export function isClientAssetPath(pathname: string): boolean {
+  return pathname.startsWith(CLIENT_ASSET_PREFIX);
+}
+
+export async function handleClientAssetRequest(url: URL, res: ServerResponse): Promise<void> {
+  const assetName = url.pathname.slice(CLIENT_ASSET_PREFIX.length);
+
+  if (!/^[a-z0-9-]+\.js$/i.test(assetName)) {
+    res.statusCode = 404;
+    res.end("Not found");
+    return;
+  }
+
+  try {
+    const assetUrl = new URL(`../client/${assetName}`, import.meta.url);
+    const source = await readFile(assetUrl, "utf8");
+    res.statusCode = 200;
+    res.setHeader("content-type", "text/javascript; charset=utf-8");
+    res.setHeader("cache-control", "no-cache");
+    res.end(source);
+  } catch {
+    res.statusCode = 404;
+    res.end("Not found");
+  }
+}

src/server/page-template.ts

@@ -1,4 +1,4 @@
-import { APP_STYLES, CLIENT_SCRIPT } from "./app-assets.js";
+import { APP_STYLES } from "./app-assets.js";
 
 export function htmlPage(): string {
   return `<!doctype html>
@@ -154,9 +154,7 @@ ${APP_STYLES}
     </div>
 
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
-    <script type="module">
-${CLIENT_SCRIPT}
-    </script>
+    <script type="module" src="/client/app.js"></script>
   </body>
 </html>`;
 }

src/server/request-handler.ts

@@ -1,3 +1,7 @@
+import {
+  handleClientAssetRequest,
+  isClientAssetPath
+} from "./client-assets.js";
 import { htmlPage } from "./page-template.js";
 import {
   handleNextcloudBlobRequest,
@@ -16,6 +20,11 @@ export function createRequestHandler() {
       return;
     }
 
+    if (isClientAssetPath(url.pathname)) {
+      await handleClientAssetRequest(url, res);
+      return;
+    }
+
     if (url.pathname === "/api/nextcloud/list") {
       await handleNextcloudListRequest(url, res);
       return;