frontend build: setup for code splitting

Add config to enable code splitting (not yet active due to no import()
calls). Also clean the output directory of old files.

Always build sourcemaps and use svelte-preprocess since svelte itself
seems to generate broken sourcemaps for Typescript otherwise.

Author: yagebu

frontend/build.ts

@@ -1,10 +1,12 @@
-import { resolve } from "node:path";
+import { readdir, unlink } from "node:fs/promises";
+import { basename, dirname, join, resolve } from "node:path";
 import process from "node:process";
 import { fileURLToPath } from "node:url";
 
 import chokidar from "chokidar";
 import { context } from "esbuild";
 import svelte from "esbuild-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
 
 /**
  * Create a debounced function.
@@ -22,16 +24,22 @@ function debounce(func: () => void, wait: number): () => void {
   };
 }
 
+const filename = fileURLToPath(import.meta.url);
+const outdir = join(dirname(filename), "..", "src", "fava", "static");
+const entryPoints = [join(dirname(filename), "src", "app.ts")];
+
 /**
  * Build the frontend using esbuild.
  * @param dev - Whether to generate sourcemaps and watch for changes.
  */
-async function runBuild(dev: boolean) {
+async function run_build(dev: boolean) {
   const ctx = await context({
-    entryPoints: ["src/main.ts"],
+    entryPoints,
+    outdir,
     format: "esm",
     bundle: true,
-    outfile: "../src/fava/static/app.js",
+    // splitting: true, - not used yet
+    metafile: true,
     conditions: dev ? ["development"] : ["production"],
     external: ["fs/promises", "module"], // for web-tree-sitter
     resolveExtensions: [], // enforce explicit extensions
@@ -43,13 +51,28 @@ async function runBuild(dev: boolean) {
     plugins: [
       svelte({
         compilerOptions: { dev, runes: true },
+        // Needed until sourcemaps in svelte are fixed, see e.g.
+        // https://github.com/sveltejs/svelte/issues/17003
+        preprocess: sveltePreprocess(),
       }),
     ],
-    sourcemap: dev,
+    sourcemap: true,
     target: "esnext",
   });
   console.log("starting build");
-  await ctx.rebuild();
+  const result = await ctx.rebuild();
+
+  // Clean all files in outdir except the ones from this build and favicon.ico
+  const to_keep = new Set(
+    Object.keys(result.metafile.outputs).map((p) => basename(p)),
+  );
+  to_keep.add("favicon.ico");
+  const outdir_files = await readdir(outdir);
+  for (const to_delete of outdir_files.filter((f) => !to_keep.has(f))) {
+    console.log("Cleaning up ", to_delete);
+    await unlink(join(outdir, to_delete));
+  }
+
   console.log("finished build");
 
   if (!dev) {
@@ -79,13 +102,12 @@ async function runBuild(dev: boolean) {
   }
 }
 
-const filename = fileURLToPath(import.meta.url);
 const is_main = resolve(process.argv[1] ?? "") === filename;
 
 if (is_main) {
   const watch = process.argv.includes("--watch");
 
-  runBuild(watch).catch((e: unknown) => {
+  run_build(watch).catch((e: unknown) => {
     console.error(e);
   });
 }

frontend/package-lock.json

@@ -46,6 +46,7 @@
     "stylelint-config-recess-order": "^7.0.0",
     "stylelint-config-standard": "^39.0.0",
     "svelte-check": "^4.0.1",
+    "svelte-preprocess": "^6.0.3",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.7.0",
     "typescript-svelte-plugin": "^0.3.47"