Web: bun bundler fullstack!

.editorconfig

@@ -114,6 +114,9 @@ max_line_length = unset
 [pnpm-lock.yaml]
 max_line_length = unset
 
+[bun.lock]
+max_line_length = unset
+
 # Note that https://github.com/editorconfig-checker/editorconfig-checker
 # which https://github.com/editorconfig-checker/editorconfig-checker.python
 # uses does not understand e.g. [{*.yaml,*.yml}] but only single ones.

.github/workflows/ci.yaml

@@ -49,9 +49,6 @@ jobs:
       - name: Install Web dependencies
         working-directory: web
         run: bun install
-      - name: Test Web
-        working-directory: web
-        run: bun test
       # - name: Run Typescript Compiler (TSC)
       #  working-directory: web
       #  run: bun tsc

.gitignore

@@ -38,8 +38,6 @@ docs/BUILT/**
 # Node.JS
 node_modules/
 web/web-out/
-# TODO This is ugly... how to better separate, to avoid?
-web/public/bundles/
 
 # Be
 .be/

test.bash

@@ -42,7 +42,7 @@ tools/version/version.bash
 # https://github.com/bazelbuild/bazel/issues/4257
 echo $ Bazel testing...
 if [ -z "${CI:-""}" ]; then
-  "$BZL" query //... | xargs "$BZL" test --test_size_filters=small
+  "$BZL" query //... | xargs "$BZL" test --explain ~/bazel-test-explain.txt --test_size_filters=small
 else
   "$BZL" query //... | xargs "$BZL" test
 fi

web/README.md

@@ -20,10 +20,16 @@
 
 ## Usage
 
+### Develop
+
 1. Install [🧅 Bun](https://bun.sh/docs/installation)
 
 1. `cd web/`
 
+1. `./develop`
+
+### Build
+
 1. `./build`
 
 1. Start `../enola server --load "../models/enola.dev/**.ttl" --httpPort=9090`
@@ -32,8 +38,6 @@
 
 TODO Resolve CORS in `bun serve` to work with Enola JSON API server on another port.
 
-TODO Support a _Dev_ for _both_ `tsc` and Bun's build watch mode... which also does a `bun serve` equivalent.
-
 ## NeXT
 
 [ToDo](ToDo.md) has things to do for `web`/` (other TODO are elsewhere).

web/ToDo.md

@@ -20,12 +20,11 @@
 
 ## Tech
 
-1. Apply https://bun.sh/docs/typescript#suggested-compileroptions
-1. Fix `bun tsc`
-1. Adopt https://bun.sh/docs/bundler/fullstack ... and fix CORS!
+1. Fix `bun tsc`, and enable it
 1. Either rename web-out/index*.html to `index.html` in `build.ts`,
    OR make `../enola server` send either (better) `Cache-Control: no-cache` & `ETag: "abcdef1234"`
    (or just `Cache-Control: no-store`; or `max-age=0`, really same?)
+1. Fix CORS ?
 
 ## Functional
 
@@ -52,15 +51,14 @@
 
 * Introduce a CSS so that controls are in a single row, with a nicer font
 * `<div id="container">` should fill entire available space
-* There shouldn't be any space around it
+* There shouldn't be any space around the graph
 
 ## Technical
 
 ### Clean
 
 * Make pre-commit add License Header to `*.ts`
 * Caching problems... how can I make it never cache bundle.js? Will Watch Mode solve that? Else [hash] in JS filename...
-* Needing `web/public/bundles/` in `.gitignore` is a bit ugly; how is this normally better separated?
 
 ### Productivity
 
@@ -81,7 +79,10 @@
 
 ### Performance
 
-* #LATER
+* Fix lack of "never cache" header support on GitHub pages by hosting the demo app elsewhere
+  * https://gist.github.com/maximebories/961f12101af369804d40d5ec287e562b probably won't work?
+  * E.g. Netlify or Cloudflare Pages, or maybe on IPFS with Pinata
+  * https://developers.cloudflare.com/pages/configuration/headers/
 
 ### Maintainability
 

web/dev

@@ -0,0 +1 @@
+src/bun/develop.ts

web/package.json

@@ -4,9 +4,9 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
+    "dev": "./dev",
     "clean": "rm -f web/public/bundle.js* && rm -rf web-out && mkdir web-out",
-    "build": "./build",
-    "serve": "http-server -p 9090"
+    "build": "./build"
   },
   "author": "The Enola <https://enola.dev> Authors",
   "license": "Apache-2.0",
@@ -25,7 +25,6 @@
     "@types/jest": "^29.5.14",
     "@types/sigmajs": "^1.0.32",
     "graphology-types": "^0.24.8",
-    "http-server": "^14.1.1",
     "typescript": "^5.7.3"
   }
 }

web/src/bun/build.ts

@@ -2,18 +2,12 @@
 
 import { $, build } from "bun"
 
-// TODO Adopt https://bun.sh/docs/bundler/fullstack
-
-// TODO Run tsc & test by using `concurrently` or `npm-run-all`
-
-// TODO Use https://github.com/google/zx/ or https://github.com/dsherret/dax
-//   instead of Bun's $ (see also https://github.com/google/zx/pull/1082)
-//   if they handle (contrib?) https://github.com/oven-sh/bun/issues/16496 ?
-
 // TODO FIXME await $`bun tsc`
 
+process.stdout.write("🧪 ")
 await $`bun test`
 
+console.log()
 const result = await build({
   html: true,
   experimentalCss: true,

web/src/bun/develop.ts

@@ -0,0 +1,28 @@
+#!/usr/bin/env -S bun --experimental-html run
+
+// TODO Run tsc & test by using e.g. `concurrently`? Or no need?
+//   Use https://github.com/google/zx/ or https://github.com/dsherret/dax
+//   instead of Bun's $ (see also https://github.com/google/zx/pull/1082)
+//   if they handle (contrib?) https://github.com/oven-sh/bun/issues/16496 ?
+
+import { serve } from "bun"
+import index from "../../public/index.html"
+
+const PORT = 7070
+const IGNORE = ["/favicon.ico"]
+
+serve({
+  port: PORT,
+  development: true,
+  static: {
+    "/": index,
+  },
+  async fetch(req) {
+    if (IGNORE.includes(req.url)) {
+      return new Response("🪹 No Content ", { status: 204 })
+    }
+    return new Response("🙅🏽‍♀️ Not Found", { status: 404 })
+  },
+})
+
+console.log(`🚀 Server running at http://localhost:${PORT}`)

web/tsconfig.json

@@ -59,9 +59,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    "outDir": "./web-out/",
+    "noEmit": true,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
@@ -80,7 +78,10 @@
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+
+    // Allow 'import x from y' when a module doesn't have a default export.
+    // Required by import index from "../../public/public.html" in develop.ts for https://bun.sh/docs/bundler/fullstack.
+    "allowSyntheticDefaultImports": true,
 
     // Emits additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility.
     // Was suspected to be the cause for "Uncaught ReferenceError: exports is not defined" (which "type": "module" in package.json causes) - but seems to be unrelated.