feat(build) :: bundle the browser scripts with rolldown

Before SQLPage prepended 3rd party dependencies to frontend scripts and shared state throuh globals.

Now we use Rolldown to bundle and minify frontend assets into `frontend/dist`. This also caused files to be typechecked for the first time so some smaller changes, like `ChartPoint.y`, had to be made.

Rolldown is also available on crate.io, so we could also migrate to a unified build.rs in the future or use nix.

Author: 81reap

.dockerignore

@@ -1,5 +1,6 @@
 /target
 node_modules/
+frontend/dist/
 .git/
 sqlpage.db
 docs/

.github/workflows/ci.yml

@@ -40,6 +40,7 @@ jobs:
           node-version: 26
           cache: 'npm'
       - run: npm ci
+      - run: npm run build
       - run: npm test
       - name: Set up cargo cache
         uses: Swatinem/rust-cache@c19371144df3bb44fab255c43d04cbc2ab54d1c4
@@ -86,7 +87,8 @@ jobs:
         with:
           node-version: 26
           cache: 'npm'
-      - run: npm ci --omit=dev --ignore-scripts
+      - run: npm ci --ignore-scripts
+      - run: npm run build
       - name: Set up cargo cache
         uses: Swatinem/rust-cache@c19371144df3bb44fab255c43d04cbc2ab54d1c4
         env:
@@ -184,7 +186,8 @@ jobs:
         with:
           node-version: 26
           cache: 'npm'
-      - run: npm ci --omit=dev --ignore-scripts
+      - run: npm ci --ignore-scripts
+      - run: npm run build
       - name: Set up cargo cache
         uses: Swatinem/rust-cache@c19371144df3bb44fab255c43d04cbc2ab54d1c4
         env:
@@ -277,7 +280,7 @@ jobs:
             ref_scope="pr-${{ github.event.pull_request.number }}"
           fi
 
-          recipe_hash="${{ hashFiles('Dockerfile', '.cargo/**', 'Cargo.toml', 'Cargo.lock', 'build.rs', 'scripts/**', 'sqlpage/**') }}"
+          recipe_hash="${{ hashFiles('Dockerfile', '.cargo/**', 'Cargo.toml', 'Cargo.lock', 'build.rs', 'scripts/**', 'sqlpage/**', 'package.json', 'package-lock.json') }}"
           {
             echo "current=sqlpage-${ref_scope}${{ matrix.tag_suffix }}-${recipe_hash}"
             echo "main=sqlpage-main${{ matrix.tag_suffix }}-${recipe_hash}"
@@ -357,7 +360,7 @@ jobs:
             ref_scope="pr-${{ github.event.pull_request.number }}"
           fi
 
-          recipe_hash="${{ hashFiles('Dockerfile', '.cargo/**', 'Cargo.toml', 'Cargo.lock', 'build.rs', 'scripts/**', 'sqlpage/**') }}"
+          recipe_hash="${{ hashFiles('Dockerfile', '.cargo/**', 'Cargo.toml', 'Cargo.lock', 'build.rs', 'scripts/**', 'sqlpage/**', 'package.json', 'package-lock.json') }}"
           {
             echo "artifact=sqlpage-${ref_scope}-linux-amd64-hurl-${recipe_hash}"
             echo "current=sqlpage-${ref_scope}-linux-amd64-${recipe_hash}"

.github/workflows/release.yml

@@ -42,7 +42,8 @@ jobs:
         with:
           node-version: 26
           cache: 'npm'
-      - run: npm ci --omit=dev --ignore-scripts
+      - run: npm ci --ignore-scripts
+      - run: npm run build
       - name: Build
         run: cargo build --profile superoptimized --locked --target ${{ matrix.target }} --features "${{ matrix.features }}"
       - name: Upload unsigned Windows artifact
@@ -104,7 +105,8 @@ jobs:
         with:
           node-version: 26
           cache: 'npm'
-      - run: npm ci --omit=dev --ignore-scripts
+      - run: npm ci --ignore-scripts
+      - run: npm run build
       - name: Build
         run: cargo build --profile superoptimized --locked --target x86_64-unknown-linux-gnu --features "odbc-static"
       - uses: actions/upload-artifact@v7
@@ -174,7 +176,8 @@ jobs:
         with:
           node-version: 26
           cache: 'npm'
-      - run: npm ci --omit=dev --ignore-scripts
+      - run: npm ci --ignore-scripts
+      - run: npm run build
       - name: Publish to crates.io
         run: |
           set +e

.gitignore

@@ -10,6 +10,7 @@ x.sql
 xbed.sql
 **/sqlpage.bin
 node_modules/
+frontend/dist/
 sqlpage/sqlpage.db
 tests_uploads/
 /test-results/

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## v0.47.0 (unreleased)
 - `cargo install sqlpage`, and any build from the crates.io tarball, no longer needs internet access. The browser libraries now come from npm and ship inside the published crate. Building from a git checkout needs `npm ci` first. Pre-built binaries and the Docker image are unaffected.
+- SQLPage's browser scripts are now bundled and minified along with their dependencies.
 
 ## v0.46.3
 

Cargo.toml

@@ -13,6 +13,7 @@ include = [
     "/README.md",
     "/build.rs",
     "/sqlpage",
+    "/frontend/dist",
     "/node_modules/@tabler/core/dist/css/tabler.min.css",
     "/node_modules/@tabler/core/dist/css/tabler-vendors.min.css",
     "/node_modules/@tabler/core/dist/js/tabler.min.js",

Dockerfile

@@ -1,7 +1,10 @@
 FROM --platform=$BUILDPLATFORM node:26-slim AS frontend
 WORKDIR /usr/src/sqlpage
 COPY package.json package-lock.json ./
-RUN npm ci --omit=dev --ignore-scripts
+RUN npm ci --ignore-scripts
+COPY sqlpage/ sqlpage/
+COPY scripts/build-frontend.mjs scripts/
+RUN node scripts/build-frontend.mjs
 
 FROM --platform=$BUILDPLATFORM rust:1.95-slim AS builder
 
@@ -20,6 +23,7 @@ COPY .cargo/ .cargo/
 COPY Cargo.toml Cargo.lock build.rs ./
 COPY sqlpage/ sqlpage/
 COPY --from=frontend /usr/src/sqlpage/node_modules node_modules
+COPY --from=frontend /usr/src/sqlpage/frontend/dist frontend/dist
 RUN /usr/local/bin/build-dependencies.sh
 
 COPY . .

biome.json

@@ -4,6 +4,7 @@
     "includes": [
       "**",
       "!**/*.svg",
+      "!frontend/dist",
       "!examples/official-site/pgconf",
       "!tests/end-to-end/test-results",
       "!.zed/*.json",

build.rs

@@ -7,29 +7,35 @@ use std::io::Write;
 use std::path::{Path, PathBuf};
 
 const SERVED_ASSETS: &[(&str, &[&str])] = &[
-    ("sqlpage.js", &["@tabler/core/dist/js/tabler.min.js"]),
     (
-        "sqlpage.css",
+        "frontend/dist/sqlpage.js",
+        &["node_modules/@tabler/core/dist/js/tabler.min.js"],
+    ),
+    (
+        "sqlpage/sqlpage.css",
         &[
-            "@tabler/core/dist/css/tabler.min.css",
-            "tom-select/dist/css/tom-select.bootstrap5.css",
-            "@tabler/core/dist/css/tabler-vendors.min.css",
+            "node_modules/@tabler/core/dist/css/tabler.min.css",
+            "node_modules/tom-select/dist/css/tom-select.bootstrap5.css",
+            "node_modules/@tabler/core/dist/css/tabler-vendors.min.css",
         ],
     ),
-    ("apexcharts.js", &["apexcharts/dist/apexcharts.min.js"]),
     (
-        "tomselect.js",
-        &["tom-select/dist/js/tom-select.popular.min.js"],
+        "frontend/dist/apexcharts.js",
+        &["node_modules/apexcharts/dist/apexcharts.min.js"],
     ),
-    ("favicon.svg", &[]),
+    (
+        "frontend/dist/tomselect.js",
+        &["node_modules/tom-select/dist/js/tom-select.popular.min.js"],
+    ),
+    ("sqlpage/favicon.svg", &[]),
 ];
 
-const ICON_SPRITE: &str = "@tabler/icons-sprite/dist/tabler-sprite.svg";
+const ICON_SPRITE: &str = "node_modules/@tabler/icons-sprite/dist/tabler-sprite.svg";
 
 fn main() {
     println!("cargo:rerun-if-changed=build.rs");
-    for &(name, libraries) in SERVED_ASSETS {
-        build_served_asset(name, libraries);
+    for &(source, libraries) in SERVED_ASSETS {
+        build_served_asset(source, libraries);
     }
     build_icon_map();
     set_odbc_rpath();
@@ -39,29 +45,29 @@ fn out_dir() -> PathBuf {
     PathBuf::from(std::env::var("OUT_DIR").unwrap())
 }
 
-fn open_library(library: &str) -> File {
-    let path = Path::new("node_modules").join(library);
-    println!("cargo:rerun-if-changed={}", path.display());
-    File::open(&path).unwrap_or_else(|err| {
+fn open_input(path: &str) -> File {
+    println!("cargo:rerun-if-changed={path}");
+    File::open(path).unwrap_or_else(|err| {
         panic!(
-            "Unable to read {}: {err}\n\
-             The browser libraries come from npm: run `npm ci` before `cargo build`.",
-            path.display()
+            "Unable to read {path}: {err}\n\
+             The browser assets are built by npm: \
+             run `npm ci && npm run build` before `cargo build`."
         )
     })
 }
 
-fn build_served_asset(name: &str, libraries: &[&str]) {
-    let source = Path::new("sqlpage").join(name);
-    println!("cargo:rerun-if-changed={}", source.display());
-
-    let built = out_dir().join(name);
+fn build_served_asset(source: &str, libraries: &[&str]) {
+    let built = out_dir().join(Path::new(source).file_name().unwrap());
+    // A minified library can end without a semicolon, and the bundle that
+    // follows opens with `(`, which JavaScript would read as a call to it.
+    let is_script = Path::new(source).extension().is_some_and(|ext| ext == "js");
+    let separator: &[u8] = if is_script { b";\n" } else { b"\n" };
     let mut gzipped = gzip::Encoder::new(File::create(&built).unwrap()).unwrap();
     for library in libraries {
-        std::io::copy(&mut open_library(library), &mut gzipped).unwrap();
-        gzipped.write_all(b"\n").unwrap();
+        std::io::copy(&mut open_input(library), &mut gzipped).unwrap();
+        gzipped.write_all(separator).unwrap();
     }
-    std::io::copy(&mut File::open(&source).unwrap(), &mut gzipped).unwrap();
+    std::io::copy(&mut open_input(source), &mut gzipped).unwrap();
     gzipped
         .finish()
         .as_result()
@@ -76,7 +82,7 @@ fn build_served_asset(name: &str, libraries: &[&str]) {
 
 fn build_icon_map() {
     let mut sprite = Vec::with_capacity(3 * 1024 * 1024);
-    open_library(ICON_SPRITE).read_to_end(&mut sprite).unwrap();
+    open_input(ICON_SPRITE).read_to_end(&mut sprite).unwrap();
     let mut icon_map = File::create(out_dir().join("icons.rs")).unwrap();
     icon_map.write_all(b"[").unwrap();
     extract_icons_from_sprite(&sprite, |name, content| {

lambda.Dockerfile

@@ -1,7 +1,10 @@
 FROM node:26-slim AS frontend
 WORKDIR /usr/src/sqlpage
 COPY package.json package-lock.json ./
-RUN npm ci --omit=dev --ignore-scripts
+RUN npm ci --ignore-scripts
+COPY sqlpage/ sqlpage/
+COPY scripts/build-frontend.mjs scripts/
+RUN node scripts/build-frontend.mjs
 
 FROM rust:1.95-alpine AS builder
 RUN rustup component add clippy rustfmt
@@ -12,6 +15,7 @@ COPY Cargo.toml Cargo.lock ./
 RUN cargo build --release
 COPY . .
 COPY --from=frontend /usr/src/sqlpage/node_modules node_modules
+COPY --from=frontend /usr/src/sqlpage/frontend/dist frontend/dist
 RUN cargo build --release --features lambda-web
 RUN   mv target/release/sqlpage bootstrap && \
       strip --strip-all bootstrap && \