bank20baht-cli 0.5.0 → 0.7.0

package/templates/create/apps/web/src/App.tsx.hbs

@@ -1,20 +1,31 @@
 import { useEffect, useState } from 'react';
 import { api } from '@{{name}}/eden';
-import { describeHealth } from './health';
+import { describeHealth, healthTone, type HealthTone } from './health';
+
+type Status = { label: string; tone: HealthTone | 'neutral' };
 
 export default function App() {
-  const [status, setStatus] = useState('checking api…');
+  const [status, setStatus] = useState<Status>({ label: 'checking api…', tone: 'neutral' });
 
   useEffect(() => {
-    api.health.get().then(({ data, error }) => {
-      setStatus(error ? `api unreachable (start it: bun run dev)` : describeHealth(data));
+    void api.health.get().then(({ data, error }) => {
+      setStatus(
+        error
+          ? { label: 'api unreachable (start it: bun run dev)', tone: 'danger' }
+          : { label: describeHealth(data), tone: healthTone(data) },
+      );
     });
   }, []);
 
   return (
-    <main style={{ fontFamily: 'system-ui', padding: '2rem' }}>
-      <h1>{{name}}</h1>
-      <p>{status}</p>
+    <main className="app">
+      <header className="app-bar">
+        <h1>{{name}}</h1>
+        <baht-theme-toggle />
+      </header>
+      <baht-card heading="API" subtitle="apps/api via libs/shared/eden">
+        <baht-badge tone={status.tone} label={status.label} />
+      </baht-card>
     </main>
   );
 }

package/templates/create/apps/web/src/app.css

@@ -0,0 +1,27 @@
+/* Page chrome only. Components style themselves from the --baht-* tokens. */
+body {
+  margin: 0;
+  background: var(--baht-color-bg);
+  color: var(--baht-color-text);
+  font-family: var(--baht-font-family);
+}
+
+.app {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--baht-space-8) var(--baht-space-4);
+  display: grid;
+  gap: var(--baht-space-4);
+}
+
+.app-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.app-bar h1 {
+  margin: 0;
+  font-family: var(--baht-font-display);
+  font-size: 1.5rem;
+}

package/templates/create/apps/web/src/health.test.ts.hbs

@@ -1,14 +1,28 @@
 import { describe, expect, it } from 'bun:test';
-import { describeHealth } from './health';
+import { describeHealth, healthTone } from './health';
+
+const service = '{{name}}-api';
 
 describe('describeHealth', () => {
   it('formats a healthy response', () => {
-    expect(describeHealth({ status: 'ok', service: '{{name}}-api' })).toBe(
-      '{{name}}-api is ok',
-    );
+    expect(describeHealth({ status: 'ok', service })).toBe(`${service} is ok`);
   });
 
   it('handles a missing response', () => {
     expect(describeHealth(null)).toBe('no response from api');
   });
 });
+
+describe('healthTone', () => {
+  it('is success when the api says ok', () => {
+    expect(healthTone({ status: 'ok', service })).toBe('success');
+  });
+
+  it('is warning for any other status', () => {
+    expect(healthTone({ status: 'degraded', service })).toBe('warning');
+  });
+
+  it('is danger with no response', () => {
+    expect(healthTone(null)).toBe('danger');
+  });
+});

package/templates/create/apps/web/src/health.ts.hbs

@@ -1,6 +1,14 @@
 export type Health = { status: string; service: string } | null;
 
+/** `<baht-badge>` status tones the health line uses. */
+export type HealthTone = 'success' | 'danger' | 'warning';
+
 export function describeHealth(health: Health): string {
   if (!health) return 'no response from api';
   return `${health.service} is ${health.status}`;
 }
+
+export function healthTone(health: Health): HealthTone {
+  if (!health) return 'danger';
+  return health.status === 'ok' ? 'success' : 'warning';
+}

package/templates/create/apps/web/src/main.tsx.hbs

@@ -1,8 +1,19 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+// Register only the <baht-*> elements this app renders (one subpath per tag).
+// `import 'bank20baht-ui'` registers all of them, at ~4x the bundle.
+import 'bank20baht-ui/components/badge';
+import 'bank20baht-ui/components/card';
+import 'bank20baht-ui/components/theme-toggle';
+import 'bank20baht-ui/react'; // JSX typings for every <baht-*>
+import 'bank20baht-ui/tokens.css';
+import './app.css';
 import App from './App';
 
-createRoot(document.getElementById('root')!).render(
+const root = document.getElementById('root');
+if (!root) throw new Error('#root missing from index.html');
+
+createRoot(root).render(
   <StrictMode>
     <App />
   </StrictMode>,

package/templates/create/package.json.hbs

@@ -2,7 +2,10 @@
   "name": "{{name}}-monorepo",
   "private": true,
   "type": "module",
-  "workspaces": ["apps/*", "libs/**"],
+  "workspaces": [
+    "apps/*",
+    "libs/**"
+  ],
   "scripts": {
     "dev": "bun run --filter './apps/*' dev",
     "build": "bun run --filter './apps/*' build",
@@ -12,14 +15,21 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "knip": "knip",
-    "deps:circular": "madge --circular --extensions ts,tsx apps libs",
+    "deps:circular": "madge --circular --extensions ts,tsx --exclude '(^|/)(dist|node_modules)/' apps libs",
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
-    "*.{css,json,js,mjs}": ["prettier --write"]
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,json,js,mjs}": [
+      "prettier --write"
+    ]
   },
-  "trustedDependencies": ["esbuild"],
+  "trustedDependencies": [
+    "esbuild"
+  ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "eslint": "^10.6.0",

package/templates/deploy/deploy/__project__.service.hbs

@@ -0,0 +1,23 @@
+[Unit]
+Description={{project}} API server
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+User={{project}}
+Group={{project}}
+WorkingDirectory=/var/lib/{{project}}
+EnvironmentFile=/etc/{{project}}/env
+ExecStart=/usr/local/bin/bun /opt/{{project}}/server/index.js
+Restart=on-failure
+RestartSec=3
+
+# It only needs its own folder and the network.
+NoNewPrivileges=true
+ProtectSystem=strict
+ProtectHome=true
+PrivateTmp=true
+ReadWritePaths=/var/lib/{{project}}
+
+[Install]
+WantedBy=multi-user.target

package/templates/deploy/deploy/env.example.hbs

@@ -0,0 +1,4 @@
+# /etc/{{project}}/env, read by {{project}}.service. Created once by install.sh; edit it there.
+
+# nginx is in front on the same machine and proxies /api/ here.
+PORT={{apiPort}}

package/templates/deploy/deploy/install.sh.hbs

@@ -0,0 +1,58 @@
+#!/bin/sh
+# Runs on the target, as root, from the unpacked release (scripts/deploy.ts does that).
+# Safe to run again: the first run sets the machine up, every run installs the release.
+set -eu
+
+RELEASE=$(cd "$(dirname "$0")" && pwd)
+APP={{project}}
+
+if ! command -v nginx >/dev/null 2>&1 || ! command -v curl >/dev/null 2>&1; then
+  export DEBIAN_FRONTEND=noninteractive
+  apt-get update -qq
+  apt-get install -y -qq nginx curl unzip ca-certificates
+fi
+
+if [ ! -x /usr/local/bin/bun ]; then
+  # bun's installer is a bash script (dash, Debian's sh, refuses its `set -o pipefail`).
+  curl -fsSL https://bun.sh/install | BUN_INSTALL=/usr/local bash >/dev/null
+fi
+
+id "$APP" >/dev/null 2>&1 || useradd --system --home "/var/lib/$APP" --shell /usr/sbin/nologin "$APP"
+install -d -o "$APP" -g "$APP" "/var/lib/$APP"
+install -d "/etc/$APP" "/opt/$APP" "/var/www/$APP"
+
+# Settings are written once and never overwritten: they hold what was set on this machine.
+if [ ! -f "/etc/$APP/env" ]; then
+  install -m 640 -o root -g "$APP" "$RELEASE/env.example" "/etc/$APP/env"
+  echo "created /etc/$APP/env"
+fi
+if [ ! -f "/etc/$APP/federation.manifest.json" ]; then
+  install -m 644 "$RELEASE/federation.manifest.json" "/etc/$APP/federation.manifest.json"
+fi
+
+# The release itself: swap whole folders so a half-copied one is never served.
+for part in server www; do
+  rm -rf "/opt/$APP/$part.new"
+  cp -R "$RELEASE/$part" "/opt/$APP/$part.new"
+done
+rm -rf "/opt/$APP/server.old" && { [ ! -d "/opt/$APP/server" ] || mv "/opt/$APP/server" "/opt/$APP/server.old"; }
+mv "/opt/$APP/server.new" "/opt/$APP/server"
+rm -rf "/var/www/$APP.old" && mv "/var/www/$APP" "/var/www/$APP.old"
+mv "/opt/$APP/www.new" "/var/www/$APP"
+rm -rf "/var/www/$APP.old" "/opt/$APP/server.old"
+
+install -m 644 "$RELEASE/$APP.service" "/etc/systemd/system/$APP.service"
+install -m 644 "$RELEASE/nginx.conf" "/etc/nginx/sites-available/$APP"
+ln -sf "/etc/nginx/sites-available/$APP" "/etc/nginx/sites-enabled/$APP"
+rm -f /etc/nginx/sites-enabled/default
+
+systemctl daemon-reload
+systemctl enable "$APP" >/dev/null 2>&1
+systemctl restart "$APP"
+nginx -t
+systemctl reload nginx || systemctl restart nginx
+
+sleep 2
+systemctl is-active "$APP"
+curl -sS -o /dev/null -w 'api %{http_code}\n' http://127.0.0.1:{{apiPort}}/api/
+curl -fsS -o /dev/null -w 'host %{http_code}\n' http://127.0.0.1/

package/templates/deploy/deploy/nginx.conf.hbs

@@ -0,0 +1,67 @@
+# {{project}}: the web apps and their API behind one origin.
+#
+#   /                          the host ({{host}})
+#   /remotes/<app>/            each remote, loaded by the host over Native Federation
+#   /federation.manifest.json  which remotes exist; edit it to add or repoint one, no rebuild
+#   /api/                      the Elysia server
+#
+# Installed as /etc/nginx/sites-available/{{project}} by deploy/install.sh.
+
+upstream {{project}}_api {
+    server 127.0.0.1:{{apiPort}};
+    keepalive 16;
+}
+
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+    server_name _;
+
+    root /var/www/{{project}}/{{host}};
+    index index.html;
+
+    gzip on;
+    gzip_types text/css application/javascript application/json image/svg+xml;
+
+    client_max_body_size 1m;
+
+    location = /federation.manifest.json {
+        alias /etc/{{project}}/federation.manifest.json;
+        add_header Cache-Control no-store;
+        # Repeated in every location that sets a header: nginx drops the inherited ones there.
+        add_header X-Content-Type-Options nosniff always;
+        add_header X-Frame-Options SAMEORIGIN always;
+        add_header Referrer-Policy same-origin always;
+    }
+
+    # Entry points are re-checked on every load, so a new release shows up at once; the hashed
+    # chunks they point to never change and may be kept.
+    location /remotes/ {
+        root /var/www/{{project}};
+        try_files $uri =404;
+        add_header Cache-Control no-cache;
+        add_header X-Content-Type-Options nosniff always;
+        add_header X-Frame-Options SAMEORIGIN always;
+        add_header Referrer-Policy same-origin always;
+    }
+
+    location /api/ {
+        proxy_pass http://{{project}}_api;
+        proxy_http_version 1.1;
+        proxy_set_header Connection "";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        add_header X-Content-Type-Options nosniff always;
+    }
+
+    # The host is a single-page app: any other path is its router's business.
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control no-cache;
+        add_header X-Content-Type-Options nosniff always;
+        add_header X-Frame-Options SAMEORIGIN always;
+        add_header Referrer-Policy same-origin always;
+    }
+}

package/templates/deploy/scripts/deploy.ts.hbs

@@ -0,0 +1,33 @@
+/**
+ * `bun run deploy root@host` builds a release, copies it to the machine and installs it
+ * (deploy/install.sh: nginx, bun and the {{project}} user on the first run; the files and a
+ * restart on every run). The target is a Debian or Ubuntu machine you can SSH into as root.
+ * Pass `--no-build` to ship the `.release/` that is already there.
+ */
+import { RELEASE, buildRelease } from './release.ts'
+
+const args = process.argv.slice(2)
+const target = args.find((arg) => !arg.startsWith('--'))
+if (target === undefined) {
+  console.error('usage: bun run deploy <user@host> [--no-build]')
+  process.exit(1)
+}
+
+const run = (command: string[]): void => {
+  console.log(`\x1b[36m$\x1b[0m ${command.join(' ')}`)
+  const result = Bun.spawnSync(command, { stdio: ['inherit', 'inherit', 'inherit'] })
+  if (result.exitCode !== 0) process.exit(result.exitCode)
+}
+
+if (!args.includes('--no-build')) buildRelease()
+
+const REMOTE_DIR = '/opt/{{project}}-release'
+// tar over ssh: the target needs nothing installed yet, not even rsync. Without macOS's extended
+// attributes, which GNU tar on the other side only warns about.
+run([
+  'sh',
+  '-c',
+  `COPYFILE_DISABLE=1 tar --no-xattrs -czf - -C ${RELEASE} . | ssh ${target} 'rm -rf ${REMOTE_DIR} && mkdir -p ${REMOTE_DIR} && tar -xzf - -C ${REMOTE_DIR}'`,
+])
+run(['ssh', target, `sh ${REMOTE_DIR}/install.sh`])
+console.log(`deployed: http://${target.split('@').pop() ?? target}/`)

package/templates/deploy/scripts/preview.ts.hbs

@@ -0,0 +1,57 @@
+/**
+ * `bun run preview` serves `.release/` the way deploy/nginx.conf does, on http://localhost:8080,
+ * with the API server started beside it: the production layout without a web server to install.
+ * Run `bun run release` first.
+ */
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { RELEASE } from './release.ts'
+
+const PORT = 8080
+const API_PORT = 3019
+const API = `http://127.0.0.1:${String(API_PORT)}`
+const WWW = join(RELEASE, 'www')
+
+if (!existsSync(join(WWW, '{{host}}/index.html'))) {
+  console.error(`no ${RELEASE}/ yet: run \`bun run release\` first`)
+  process.exit(1)
+}
+
+const api = Bun.spawn(['bun', join(RELEASE, 'server/index.js')], {
+  env: { ...process.env, PORT: String(API_PORT) },
+  stdio: ['ignore', 'inherit', 'inherit'],
+})
+process.on('SIGINT', () => {
+  api.kill()
+  process.exit(0)
+})
+
+const file = async (path: string, cache: string): Promise<Response | undefined> => {
+  const found = Bun.file(path)
+  return (await found.exists())
+    ? new Response(found, { headers: { 'cache-control': cache } })
+    : undefined
+}
+
+const notFound = () => new Response('', { status: 404 })
+
+Bun.serve({
+  port: PORT,
+  async fetch(request) {
+    const url = new URL(request.url)
+    const path = decodeURIComponent(url.pathname)
+    if (path.startsWith('/api/')) return fetch(new Request(`${API}${path}${url.search}`, request))
+    if (path.includes('..')) return new Response('bad path', { status: 400 })
+    if (path === '/federation.manifest.json') {
+      return (await file(join(RELEASE, 'federation.manifest.json'), 'no-store')) ?? notFound()
+    }
+    if (path.startsWith('/remotes/')) return (await file(join(WWW, path), 'no-cache')) ?? notFound()
+    return (
+      (path === '/' ? undefined : await file(join(WWW, '{{host}}', path), 'no-cache')) ??
+      (await file(join(WWW, '{{host}}/index.html'), 'no-cache')) ??
+      notFound()
+    )
+  },
+})
+console.log(`preview on http://localhost:${String(PORT)} (api on ${API})`)

package/templates/deploy/scripts/release.ts.hbs

@@ -0,0 +1,48 @@
+/**
+ * `bun run release` builds everything and lays it out the way the web server serves it, in
+ * `.release/`:
+ *
+ *   server/index.js            the API, one bundled file
+ *   www/{{host}}/                 the host
+ *   www/remotes/<app>/         each remote in the host's federation manifest
+ *   federation.manifest.json   which remotes the host loads (installed once, then edited there)
+ *   nginx.conf {{project}}.service env.example install.sh
+ *
+ * `scripts/deploy.ts` ships that folder; `scripts/preview.ts` serves it locally.
+ */
+import { cpSync, mkdirSync, readFileSync, rmSync } from 'node:fs'
+import { join } from 'node:path'
+
+export const RELEASE = '.release'
+const HOST = 'apps/{{host}}'
+const MANIFEST = join(HOST, 'public/federation.manifest.json')
+
+const run = (command: string[]): void => {
+  console.log(`\x1b[36m$\x1b[0m ${command.join(' ')}`)
+  const result = Bun.spawnSync(command, { stdio: ['inherit', 'inherit', 'inherit'] })
+  if (result.exitCode !== 0) process.exit(result.exitCode)
+}
+
+export const buildRelease = (): void => {
+  run(['bun', 'run', 'build'])
+
+  rmSync(RELEASE, { recursive: true, force: true })
+  mkdirSync(join(RELEASE, 'www/remotes'), { recursive: true })
+  mkdirSync(join(RELEASE, 'server'), { recursive: true })
+
+  cpSync('apps/server/dist/index.js', join(RELEASE, 'server/index.js'))
+  cpSync(join(HOST, 'dist/{{host}}/browser'), join(RELEASE, 'www/{{host}}'), { recursive: true })
+  const remotes = Object.keys(JSON.parse(readFileSync(MANIFEST, 'utf8')) as Record<string, unknown>)
+  for (const app of remotes) {
+    cpSync(`apps/${app}/dist/${app}/browser`, join(RELEASE, 'www/remotes', app), {
+      recursive: true,
+    })
+  }
+  cpSync(MANIFEST, join(RELEASE, 'federation.manifest.json'))
+  for (const file of ['nginx.conf', '{{project}}.service', 'env.example', 'install.sh']) {
+    cpSync(join('deploy', file), join(RELEASE, file))
+  }
+  console.log(`release ready in ${RELEASE}/`)
+}
+
+if (import.meta.main) buildRelease()

package/templates/new/_gitignore

@@ -1,6 +1,9 @@
 node_modules
 .zvec-grep
 dist
+coverage
+*.tsbuildinfo
+.angular
 .env
 .env.*
 !.env.example

package/templates/new/_prettierignore

@@ -2,3 +2,4 @@ node_modules
 dist
 bun.lock
 coverage
+.angular

package/templates/new/package.json.hbs

@@ -15,7 +15,7 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "knip": "knip",
-    "madge": "madge --circular --extensions ts,tsx apps packages scripts",
+    "madge": "madge --circular --extensions ts,tsx --exclude '(^|/)(dist|node_modules|\\.angular)/' apps packages scripts",
     "deps": "depcruise apps packages scripts --config .dependency-cruiser.mjs",
     "dup": "jscpd",
     "audit": "bun audit --audit-level=high",
@@ -33,7 +33,7 @@
     "@eslint/css": "^2.0.0",
     "@eslint/js": "^10.0.1",
     "@types/bun": "^1.3.0",
-    "bank20baht-strict": "0.0.3",
+    "bank20baht-strict": "0.0.6",
     "dependency-cruiser": "^18.3.1",
     "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",

package/templates/remote/_editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/templates/remote/angular.json.hbs

@@ -0,0 +1,95 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "bun"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "{{app}}": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "{{name}}",
+      "architect": {
+        "build": {
+          "builder": "@angular-architects/native-federation:build",
+          "options": {
+            "cacheExternalArtifacts": true,
+            "tsConfig": "tsconfig.federation.json"
+          },
+          "configurations": {
+            "production": {
+              "target": "{{app}}:esbuild:production"
+            },
+            "development": {
+              "target": "{{app}}:esbuild:development",
+              "dev": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-architects/native-federation:build",
+          "options": {
+            "target": "{{app}}:serve-original:development",
+            "tsConfig": "tsconfig.federation.json",
+            "rebuildDelay": 500,
+            "cacheExternalArtifacts": true,
+            "dev": true,
+            "devServer": true,
+            "port": 0
+          }
+        },
+        "esbuild": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "styles": [],
+            "polyfills": ["es-module-shims"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve-original": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "{{app}}:esbuild:production"
+            },
+            "development": {
+              "buildTarget": "{{app}}:esbuild:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": {{port}}
+          }
+        }
+      }
+    }
+  }
+}