refactor(ui): migrate spritz ui to typescript build

.github/workflows/ui-tests.yml

@@ -19,13 +19,33 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: "20"
+          cache: "pnpm"
+          cache-dependency-path: ui/pnpm-lock.yaml
+
+      - name: Install UI dependencies
+        run: pnpm install --frozen-lockfile
+        working-directory: ui
+
+      - name: Build UI
+        run: pnpm build
+        working-directory: ui
+
+      - name: Typecheck UI
+        run: pnpm typecheck
+        working-directory: ui
 
       - name: Run UI tests
-        run: node --test ui/entrypoint.test.mjs ui/nginx-config.test.mjs ui/public/*.test.mjs
+        run: pnpm test
+        working-directory: ui
 
       - name: Check entrypoint shell syntax
         run: bash -n ui/entrypoint.sh

ui/Dockerfile

@@ -1,11 +1,23 @@
+FROM node:22-alpine AS build
+
+WORKDIR /workspace/ui
+
+RUN corepack enable
+
+COPY ui/package.json ui/pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY ui/ ./
+RUN pnpm build
+
 FROM nginxinc/nginx-unprivileged:1.27-alpine
 
 USER root
 RUN apk add --no-cache sed
 
-COPY public/ /usr/share/nginx/html/
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-COPY entrypoint.sh /entrypoint.sh
+COPY --from=build /workspace/ui/dist/ /usr/share/nginx/html/
+COPY ui/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ui/entrypoint.sh /entrypoint.sh
 RUN chown -R 101:101 /usr/share/nginx/html /entrypoint.sh /etc/nginx/conf.d/default.conf
 
 ENV SPRITZ_API_BASE_URL=/api

ui/entrypoint.test.mjs

@@ -4,13 +4,13 @@ import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import vm from 'node:vm';
-import { uiPath, uiPublicPath } from './test-paths.mjs';
+import { uiPath, uiSourcePublicPath } from './test-paths.mjs';
 import { execFileSync } from 'node:child_process';
 
 function renderConfig(env = {}) {
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'spritz-ui-'));
-  fs.copyFileSync(uiPublicPath('config.js'), path.join(tmpDir, 'config.js'));
-  fs.copyFileSync(uiPublicPath('index.html'), path.join(tmpDir, 'index.html'));
+  fs.copyFileSync(uiSourcePublicPath('config.js'), path.join(tmpDir, 'config.js'));
+  fs.copyFileSync(uiSourcePublicPath('index.html'), path.join(tmpDir, 'index.html'));
 
   execFileSync('/bin/sh', [uiPath('entrypoint.sh')], {
     env: {

ui/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@spritz/ui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsdown && node scripts/copy-static.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node --test entrypoint.test.mjs nginx-config.test.mjs public/*.test.mjs"
+  },
+  "devDependencies": {
+    "@types/node": "^24.5.2",
+    "tsdown": "^0.16.6",
+    "typescript": "^5.9.2"
+  }
+}