implement development server

Author: neverRare

README.md

@@ -9,11 +9,14 @@ interpretation of the text. No machine learning involved.
 **It is work in progress!**
 [We welcome contributors however!](./CONTRIBUTING.md)
 
-## Building locally
+## Starting development server
 
-You'll need [Deno](https://deno.com/) for this project. Then you'll need to
-install the dependencies before running any command: `deno install`.
+After obtaining a local copy, You'll need [Deno](https://deno.com/) for this
+project. Then you'll need to install the dependencies before running any
+command: `deno install`.
 
-After this, you can start away by running `deno task watch` then open
-`./dist/index.html` using your favorite browser. Run `deno task` to see more
-useful command lines.
+After this, you can start away by running `deno task start` then follow the link
+provide by the stdout to open a local copy of ilo Token. This server will
+auto-reload the webpage whenever there are changes to the code.
+
+Run `deno task` to see more useful command lines.

build.ts

@@ -0,0 +1,12 @@
+// This code is Deno only
+
+import * as ESBuild from "esbuild";
+import { OPTIONS } from "./config.ts";
+import * as Dictionary from "./dictionary/build.ts";
+
+const BUILD_OPTIONS: ESBuild.BuildOptions = { ...OPTIONS, minify: true };
+
+if (import.meta.main) {
+  await Dictionary.build();
+  await ESBuild.build(BUILD_OPTIONS);
+}

bundle.ts

@@ -0,0 +1,15 @@
+// This code is Deno only
+
+import { denoPlugins } from "@luca/esbuild-deno-loader";
+import * as ESBuild from "esbuild";
+
+export const OPTIONS: ESBuild.BuildOptions = {
+  entryPoints: ["./src/main.ts"],
+  outfile: "./dist/main.js",
+  format: "iife",
+  bundle: true,
+  sourcemap: "linked",
+  target: [`es${new Date().getFullYear() - 3}`],
+  plugins: [...denoPlugins()],
+  logLevel: "info",
+};

config.ts

@@ -4,16 +4,12 @@
   },
   "tasks": {
     "build": {
-      "description": "Builds `./dist/main.js` as minified file with source mapping at `./dist/main.js.map`. This command also builds the dictionary at `./dictionary/dictionary.ts`.",
-      "command": "deno run -E -R -W -N=jsr.io --allow-run --no-prompt --frozen --cached-only ./bundle.ts build"
+      "description": "Builds every static files needed for GitHub pages",
+      "command": "deno run -E -R -W -N=jsr.io --allow-run --no-prompt --frozen --cached-only ./build.ts"
     },
-    "watch": {
-      "description": "Similar to `deno task build` but doesn't minify the code. This command also watches the source code and rebuilds `./dist/main.js` or `./dictionary/dictionary.ts` whenever necessary. This DOESN'T auto-refreshes the webpage.",
-      "command": "deno run -E -R -W -N=jsr.io --allow-run --no-prompt --frozen --cached-only ./bundle.ts watch"
-    },
-    "start-server": {
-      "description": "Starts a local server serving `./dist/` statically",
-      "command": "deno run -N=0.0.0.0 -R=./dist/ --no-prompt jsr:@std/http/file-server ./dist/"
+    "start": {
+      "description": "Starts a development server. The provided page will auto-reload whenever there are changes to the code.",
+      "command": "deno run -E -R -W -N=jsr.io --allow-run --no-prompt --frozen --cached-only ./dev.ts"
     },
     "repl": {
       "description": "Starts a REPL",
@@ -73,6 +69,7 @@
     "@std/async": "jsr:@std/async@^1.0.12",
     "@std/cache": "jsr:@std/cache@^0.2.0",
     "@std/collections": "jsr:@std/collections@^1.0.10",
+    "@std/fs": "jsr:@std/fs@^1.0.15",
     "@std/html": "jsr:@std/html@^1.0.3",
     "@std/random": "jsr:@std/random@^0.1.0",
     "@std/regexp": "jsr:@std/regexp@^1.0.1",

deno.json

@@ -0,0 +1,38 @@
+// This code is Deno only
+
+import { exists } from "@std/fs/exists";
+import * as ESBuild from "esbuild";
+import { OPTIONS } from "./config.ts";
+
+const BUILD_OPTIONS: ESBuild.BuildOptions = {
+  ...OPTIONS,
+  minify: false,
+  define: { LIVE_RELOAD: "true" },
+};
+if (import.meta.main) {
+  if (!await exists(new URL("./dictionary/dictionary.ts", import.meta.url))) {
+    const Dictionary = await import("./dictionary/build.ts");
+    await Dictionary.build();
+  }
+  const command = new Deno.Command("deno", {
+    args: [
+      "run",
+      "-R=./dictionary/dictionary",
+      "-W=./dictionary/dictionary.ts",
+      "--no-prompt",
+      "--frozen",
+      "--cached-only",
+      "--watch",
+      "./dictionary/watch.ts",
+    ],
+    cwd: new URL("./", import.meta.url),
+    stdout: "inherit",
+    stderr: "inherit",
+    stdin: "null",
+  });
+  const process = command.spawn();
+  const context = await ESBuild.context(BUILD_OPTIONS);
+  await context.watch();
+  await context.serve({ servedir: "./dist/" });
+  await process.status;
+}

deno.lock

@@ -22,6 +22,8 @@ import { Dictionary } from "./type.ts";
 export const dictionary: Dictionary = new Map(Object.entries(${json}));
 `;
   await Deno.writeTextFile(DESTINATION, code);
+  // deno-lint-ignore no-console
+  console.log("Building dictionary done");
 }
 if (import.meta.main) {
   await build();

dev.ts

@@ -0,0 +1,26 @@
+// This code is Deno only
+
+import { unreachable } from "@std/assert/unreachable";
+import { debounce } from "@std/async/debounce";
+import { build } from "./build.ts";
+
+async function tryBuild(): Promise<void> {
+  try {
+    await build();
+  } catch (error) {
+    console.log(error);
+  }
+}
+if (import.meta.main) {
+  const watcher = Deno.watchFs("./dictionary/dictionary");
+  let task = Promise.resolve();
+  const buildDebounced = debounce(() => {
+    task = task.then(tryBuild);
+  }, 500);
+  buildDebounced();
+  buildDebounced.flush();
+  for await (const _ of watcher) {
+    buildDebounced();
+  }
+  unreachable();
+}

dictionary/build.ts

@@ -1,5 +1,13 @@
 // This code is browser only
 
+declare const LIVE_RELOAD: boolean;
+
+// auto-refresh when source code have changed
+if (typeof LIVE_RELOAD !== "undefined" && LIVE_RELOAD) {
+  new EventSource("/esbuild")
+    .addEventListener("change", () => location.reload());
+}
+
 import { dictionary } from "../dictionary/dictionary.ts";
 import { asComment } from "../dictionary/misc.ts";
 import PROJECT_DATA from "../project_data.json" with { type: "json" };
@@ -143,15 +151,6 @@ function main(): void {
     }
   }
 
-  // remove unused local storage data
-  const used = [DICTIONARY_KEY, ...Object.keys(settings)];
-  const unused = [...new Array(localStorage.length).keys()]
-    .map((i) => localStorage.key(i)!)
-    .filter((key) => !used.includes(key));
-  for (const key of unused) {
-    localStorage.removeItem(key);
-  }
-
   // initial text area size
   resizeTextarea();
   function resizeTextarea(): void {
@@ -304,10 +303,18 @@ function errorsFixable(errors: ReadonlyArray<unknown>): boolean {
   return errors.length > 0 &&
     errors.every((error) => error instanceof ArrayResultError);
 }
-if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", main);
-  } else {
-    main();
-  }
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", main);
+} else {
+  main();
+}
+
+// remove unused local storage data
+const used = [DICTIONARY_KEY, ...Object.keys(settings)];
+const unused = [...new Array(localStorage.length).keys()]
+  .map((i) => localStorage.key(i)!)
+  .filter((key) => !used.includes(key));
+for (const key of unused) {
+  localStorage.removeItem(key);
 }