@lark-apaas/coding-templates 0.1.43-alpha.1 → 0.1.43-alpha.11

package/template-vite-react/scripts/dev.cjs

@@ -0,0 +1,162 @@
+#!/usr/bin/env node
+/**
+ * jsPage 模板 dev launcher。
+ *
+ * 跟全栈 dev.js 对齐：每个子进程的 stdout/stderr 经 readline 逐行拼上
+ * 时间戳 + [name] 前缀，同时写到 logs/<name>.std.log（沙箱外壳 dev-logs
+ * middleware 监听的标准路径）和当前 stdout。
+ *
+ * jsPage 只需要 client(vite) + health 两个进程，没有 server。
+ * 端口约定（保持跟 .spark_project healthCheck 一致）：
+ *   - vite      → 8001（CLIENT_DEV_PORT 可覆盖）
+ *   - mock-health → 3000（占位，老沙箱探针兼容用）
+ *
+ * 进程组与孤儿清理：
+ * - 子进程 detached: true → 自己一个 PGID，cleanup 时 process.kill(-pid) 整组带走
+ * - 监听 SIGINT/SIGTERM/SIGHUP/uncaughtException 触发 cleanup
+ * - 启动前 killOrphansByPort 清理端口残留孤儿（应对沙箱保活重启）
+ *
+ * 触发重启场景：
+ * - `pkill -f "npm run dev"` 杀 npm 进程 → dev.cjs 收 SIGHUP → cleanup
+ * - 沙箱保活机制重启 npm run dev → 新 dev.cjs → killOrphansByPort 清理旧 vite/mock-health
+ */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+const { spawn, execSync } = require('child_process');
+
+const ROOT = path.resolve(__dirname, '..');
+process.chdir(ROOT);
+
+const LOG_DIR = process.env.LOG_DIR || 'logs';
+const CLIENT_DEV_PORT = process.env.CLIENT_DEV_PORT || '8001';
+const HEALTH_PORT = '3000';
+
+fs.mkdirSync(LOG_DIR, { recursive: true });
+
+function timestamp() {
+  const now = new Date();
+  const pad = (n) => String(n).padStart(2, '0');
+  return (
+    `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ` +
+    `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
+  );
+}
+
+function log(msg) {
+  const line = `[${timestamp()}] [dev] ${msg}\n`;
+  try { process.stdout.write(line); } catch {}
+}
+
+/**
+ * 启动前清理端口占用的孤儿进程（沙箱保活重启时关键）：
+ * 之前 dev.cjs 被 pkill 杀掉后，子进程的 vite/mock-health 可能没被一起带走，
+ * 保活机制重启新 dev.cjs 时发现端口被占，导致 vite/mock-health 起不来。
+ */
+function killOrphansByPort(port) {
+  try {
+    const out = execSync(`lsof -ti:${port}`, { stdio: ['ignore', 'pipe', 'ignore'] })
+      .toString()
+      .trim();
+    if (!out) return [];
+    const pids = out.split('\n').filter(Boolean);
+    for (const pid of pids) {
+      try {
+        process.kill(Number(pid), 'SIGKILL');
+        log(`killed orphan pid=${pid} on :${port}`);
+      } catch {
+        // 进程可能已退出
+      }
+    }
+    return pids;
+  } catch {
+    // lsof 没找到任何占用，正常情况
+    return [];
+  }
+}
+
+const managed = [];
+
+function startProcess({ name, command, args, logFileName }) {
+  const logFd = logFileName
+    ? fs.openSync(path.join(LOG_DIR, logFileName), 'a')
+    : null;
+
+  const child = spawn(command, args, {
+    stdio: ['ignore', 'pipe', 'pipe'],
+    shell: false,
+    cwd: ROOT,
+    env: process.env,
+    detached: true,
+  });
+
+  const pipeLines = (stream) => {
+    const rl = readline.createInterface({ input: stream, crlfDelay: Infinity });
+    rl.on('line', (line) => {
+      const msg = `[${timestamp()}] [${name}] ${line}\n`;
+      try { process.stdout.write(msg); } catch {}
+      if (logFd != null) {
+        try { fs.writeSync(logFd, msg); } catch {}
+      }
+    });
+  };
+  pipeLines(child.stdout);
+  pipeLines(child.stderr);
+
+  managed.push({ name, child });
+  return child;
+}
+
+// 先清掉可能残留的孤儿进程，再启动新子进程
+killOrphansByPort(CLIENT_DEV_PORT);
+killOrphansByPort(HEALTH_PORT);
+
+startProcess({
+  name: 'client',
+  command: 'npx',
+  args: ['vite', '--port', CLIENT_DEV_PORT, '--host', '0.0.0.0'],
+  logFileName: 'client.std.log',
+});
+
+startProcess({
+  name: 'health',
+  command: 'node',
+  args: ['scripts/mock-health.cjs'],
+  // health 进程不单独写 log，透传到 stdout 就够
+});
+
+let stopping = false;
+function cleanup(signal) {
+  if (stopping) return;
+  stopping = true;
+  log(`cleanup triggered by ${signal}`);
+
+  for (const { child } of managed) {
+    if (!child.pid) continue;
+    try { process.kill(-child.pid, signal || 'SIGTERM'); } catch {}
+  }
+  setTimeout(() => {
+    for (const { child } of managed) {
+      if (!child.pid) continue;
+      try { process.kill(-child.pid, 'SIGKILL'); } catch {}
+    }
+    // 兜底再扫一次端口，确保孤儿被清理
+    killOrphansByPort(CLIENT_DEV_PORT);
+    killOrphansByPort(HEALTH_PORT);
+    process.exit(0);
+  }, 2000);
+}
+
+process.on('SIGINT', () => cleanup('SIGTERM'));
+process.on('SIGTERM', () => cleanup('SIGTERM'));
+// pkill -f "npm run dev" 把 npm 杀掉后，dev.cjs 会收到 SIGHUP（controlling
+// tty 关闭），Node 默认行为是直接退出不跑 handler。注册 SIGHUP handler 触发
+// cleanup，让子进程组跟着一起死，避免变孤儿
+process.on('SIGHUP', () => cleanup('SIGTERM'));
+
+// 任意子进程退出就触发整体 cleanup，避免半残留
+Promise.race(
+  managed.map(({ child }) => new Promise((r) => child.on('exit', r)))
+).then(() => cleanup('SIGTERM'));

package/template-vite-react/scripts/measure-boot.sh

@@ -0,0 +1,219 @@
+#!/usr/bin/env bash
+# 测沙箱（或本机）模板从 0 到"预览可访问"的耗时拆解。
+# 默认只测 dev 启动那段（不跑 npm install），符合沙箱里依赖已装好的常见场景。
+#
+# 用法：
+#   bash scripts/measure-boot.sh                      # 默认：只测 dev 启动（warm）
+#   bash scripts/measure-boot.sh --cold               # 冷启动：清光 vite 预打包缓存
+#   bash scripts/measure-boot.sh --with-install       # 顺带跑一次 npm install 测装包耗时
+#   bash scripts/measure-boot.sh --with-install --cold # 模拟首次冷启（清 node_modules + .vite）
+#   bash scripts/measure-boot.sh --port 18001         # 临时换端口
+#   bash scripts/measure-boot.sh --base /app/whatever # 临时换 CLIENT_BASE_PATH
+#
+# 兼容：--skip-install 等同于不传（默认就是跳过），保留作为 no-op 防止旧脚本/手势失败。
+#
+# 输出：每段耗时 + 总耗时，写到 ./logs/boot-timing.log（同时打到 stdout）
+
+set -uo pipefail
+T1=0; T2=0
+DEV_PID=0
+
+WITH_INSTALL=0
+COLD=0
+PORT=""
+BASE="/app/probe"
+LOG_DIR="./logs"
+LOG_FILE="$LOG_DIR/boot-timing.log"
+
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --with-install) WITH_INSTALL=1; shift ;;
+    --skip-install) shift ;;  # no-op，兼容旧手势；默认就是跳过
+    --cold) COLD=1; shift ;;
+    --port) PORT="$2"; shift 2 ;;
+    --base) BASE="$2"; shift 2 ;;
+    *) echo "未知参数: $1"; exit 1 ;;
+  esac
+done
+
+mkdir -p "$LOG_DIR"
+: > "$LOG_FILE"
+
+now_ms() {
+  # GNU date 支持 %N，macOS 的 BSD date 不支持——优先用 python3 兜底，避免 sandbox 上 BSD 镜像出错。
+  if command -v python3 >/dev/null 2>&1; then
+    python3 -c 'import time; print(int(time.time()*1000))'
+  else
+    local raw="$(date +%s%3N)"
+    case "$raw" in
+      *N) echo $(($(date +%s) * 1000));;  # date 不支持 %N，降级到秒级精度
+      *) echo "$raw";;
+    esac
+  fi
+}
+log() {
+  local msg="[$(date +%H:%M:%S)] $*"
+  echo "$msg" | tee -a "$LOG_FILE"
+}
+
+# 自动从 package.json 提取 vite 端口
+if [ -z "$PORT" ]; then
+  PORT=$(grep -oE -- '--port[[:space:]]+[0-9]+' package.json 2>/dev/null | head -1 | awk '{print $2}')
+  PORT="${PORT:-8001}"
+fi
+
+export CLIENT_BASE_PATH="$BASE"
+
+log "=============================================="
+log "Boot timing — port=$PORT base=$BASE with-install=$WITH_INSTALL cold=$COLD"
+log "=============================================="
+
+# ── 冷启动：清光本地缓存（不计入耗时，T_TOTAL_START 之前完成）────────
+if [ "$COLD" = "1" ]; then
+  log "[cold] 清缓存以模拟冷启动..."
+  # vite 依赖预打包缓存（永远要清，热启动的最大区别就在这）
+  if [ -d node_modules/.vite ]; then
+    log "  - rm -rf node_modules/.vite"
+    rm -rf node_modules/.vite
+  fi
+  # 本脚本上轮日志
+  if [ -d "$LOG_DIR" ]; then
+    log "  - 清 $LOG_DIR/dev.log（避免 grep 命中旧 ready 行）"
+    : > "$LOG_DIR/dev.log" 2>/dev/null || true
+  fi
+  # 项目级 dist（一般不影响 dev，但顺手）
+  [ -d dist ] && rm -rf dist
+  # 默认保留 node_modules（典型冷启动对照：装好依赖、只清 .vite）
+  # 仅 --with-install 模式才清 node_modules 触发 npm install 重装
+  if [ "$WITH_INSTALL" = "1" ]; then
+    if [ -d node_modules ]; then
+      log "  - rm -rf node_modules（--with-install 模式：清依赖以模拟首次冷启）"
+      rm -rf node_modules
+    fi
+    # npm 全局缓存留着（不动 /tmp/.npmcache / ~/.npm），不然太慢且不真实
+  else
+    log "  - 保留 node_modules（默认模式：只清 .vite 缓存）"
+  fi
+  log "[cold] 缓存清理完成"
+fi
+
+T_TOTAL_START=$(now_ms)
+
+# ── 阶段 1: npm install ──────────────────────────────────────────────
+if [ "$WITH_INSTALL" = "1" ]; then
+  log "[1/4] npm install ..."
+  T1=$(now_ms)
+  npm install --silent > "$LOG_DIR/install.log" 2>&1
+  RC=$?
+  T2=$(now_ms)
+  if [ $RC -ne 0 ]; then
+    log "  ❌ npm install 失败（exit=$RC，详见 $LOG_DIR/install.log）"
+    exit 1
+  fi
+  log "  ✅ 耗时 $((T2 - T1)) ms"
+else
+  log "[1/4] 跳过 npm install（默认；用 --with-install 启用）"
+fi
+
+# ── 阶段 2: 启动 dev（进程拉起到出现 \"VITE ready\" 提示）──────────────
+log "[2/4] npm run dev — 等 vite ready 提示 ..."
+
+# 杀光占用目标端口的所有进程（不依赖进程名匹配，沙箱里 vite 可能被各种 wrapper 拉起）
+kill_port() {
+  local p="$1"
+  local pids
+  pids=$(lsof -tiTCP:"$p" -sTCP:LISTEN 2>/dev/null | tr '\n' ' ')
+  if [ -n "$pids" ]; then
+    log "  清理 :$p 上的进程: $pids"
+    # shellcheck disable=SC2086
+    kill -9 $pids 2>/dev/null || true
+  fi
+}
+kill_port "$PORT"
+kill_port 3000
+# 再保险一道：按名字
+pkill -f 'concurrently.*vite' 2>/dev/null || true
+pkill -f 'mock-health' 2>/dev/null || true
+sleep 1
+
+# 二次校验：端口必须真的空了
+if lsof -tiTCP:"$PORT" -sTCP:LISTEN >/dev/null 2>&1; then
+  log "  ❌ 清理后 :$PORT 仍被占用，请手动 kill 后重试"
+  log "      lsof -i :$PORT"
+  exit 1
+fi
+
+# 截断 log 文件确保 grep 命中的是本次启动的输出（不是旧 log 残留）
+: > "$LOG_DIR/dev.log"
+
+T3=$(now_ms)
+nohup npm run dev > "$LOG_DIR/dev.log" 2>&1 &
+DEV_PID=$!
+
+# 等 vite ready 提示（最多 60s）
+T_READY=""
+for i in $(seq 1 600); do
+  if grep -q 'VITE.*ready' "$LOG_DIR/dev.log" 2>/dev/null; then
+    T_READY=$(now_ms)
+    break
+  fi
+  # 短路：如果 dev 进程已经退出且没出现 ready，提早失败
+  if ! kill -0 "$DEV_PID" 2>/dev/null; then
+    log "  ❌ dev 进程提前退出，看 $LOG_DIR/dev.log"
+    tail -20 "$LOG_DIR/dev.log" | sed 's/^/      /' | tee -a "$LOG_FILE"
+    exit 1
+  fi
+  sleep 0.1
+done
+
+if [ -z "$T_READY" ]; then
+  log "  ❌ 60s 内未看到 vite ready 提示，看 $LOG_DIR/dev.log"
+  kill ${DEV_PID} 2>/dev/null
+  exit 1
+fi
+log "  ✅ 耗时 $((T_READY - T3)) ms"
+
+# ── 阶段 3: 端口可 TCP 连接 ──────────────────────────────────────────
+log "[3/4] 端口 :$PORT 接受 TCP 连接 ..."
+T4=$(now_ms)
+T_TCP=""
+for i in $(seq 1 100); do
+  if (echo > /dev/tcp/127.0.0.1/$PORT) 2>/dev/null; then
+    T_TCP=$(now_ms)
+    break
+  fi
+  sleep 0.05
+done
+if [ -z "$T_TCP" ]; then
+  log "  ❌ 5s 内端口不可连接"
+  kill ${DEV_PID} 2>/dev/null
+  exit 1
+fi
+log "  ✅ 耗时 $((T_TCP - T4)) ms（自 ready 后再 $((T_TCP - T_READY)) ms）"
+
+# ── 阶段 4: 首屏 HTML 200 ─────────────────────────────────────────────
+log "[4/4] curl 首屏（含 base normalize rewrite 路径）..."
+T5=$(now_ms)
+URL="http://127.0.0.1:$PORT${BASE}?probe=1"
+HTTP_CODE=$(curl -sS -o "$LOG_DIR/first.html" -w '%{http_code}' --max-time 10 "$URL" 2>&1)
+T6=$(now_ms)
+SIZE=$(wc -c < "$LOG_DIR/first.html" 2>/dev/null | tr -d ' ')
+
+log "  URL=$URL"
+log "  HTTP=$HTTP_CODE size=${SIZE}B 耗时 $((T6 - T5)) ms"
+
+if [ "$HTTP_CODE" != "200" ]; then
+  log "  ⚠️  非 200，看 $LOG_DIR/first.html"
+fi
+
+# ── 汇总 ──────────────────────────────────────────────────────────────
+T_TOTAL_END=$(now_ms)
+log "=============================================="
+log "总耗时 $((T_TOTAL_END - T_TOTAL_START)) ms"
+log "dev 进程 PID=${DEV_PID}（kill 后退出：kill ${DEV_PID}）"
+log "  install:           $([ $WITH_INSTALL = 1 ] && echo "$((T2 - T1)) ms" || echo skipped)"
+log "  vite ready:        $((T_READY - T3)) ms"
+log "  tcp accept after ready: $((T_TCP - T_READY)) ms"
+log "  first html curl:   $((T6 - T5)) ms"
+log "=============================================="
+log "详细日志：$LOG_FILE / $LOG_DIR/dev.log"

package/template-vite-react/scripts/mock-health.cjs

@@ -6,7 +6,7 @@
  * 8001 由 Vite dev server 真正占（预览流量也走 8001），3000 没有任何业务进程，
  * 只能 mock 一个 listener 让健康检查过。
  *
- * 等沙箱链路切到新协议（读 .spark-project [sandbox].healthCheck）后可删除。
+ * 等沙箱链路切到新协议（读 .spark_project [sandbox].healthCheck）后可删除。
  */
 const http = require('node:http');
 

package/template-vite-react/src/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="12" fill="currentColor" opacity="0.1"/>
+  <path d="M20 32 L28 40 L44 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template-vite-react/{client/src → src}/index.tsx

@@ -1,7 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
-import { AppContainer } from "@lark-apaas/client-toolkit-lite";
+import { ErrorBoundary } from "react-error-boundary";
+import { AppContainer, ErrorRender } from "@lark-apaas/client-toolkit-lite";
 import App from "./app";
 import "./index.css";
 
@@ -9,7 +10,13 @@ createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter basename={process.env.CLIENT_BASE_PATH || "/"}>
       <AppContainer>
-        <App />
+        <ErrorBoundary
+          fallbackRender={({ error, resetErrorBoundary }) => (
+            <ErrorRender error={error} resetErrorBoundary={resetErrorBoundary} />
+          )}
+        >
+          <App />
+        </ErrorBoundary>
       </AppContainer>
     </BrowserRouter>
   </StrictMode>,

package/template-vite-react/tsconfig.app.json

@@ -4,10 +4,10 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./client/src/*"],
+      "@/*": ["./src/*"],
       "@shared/*": ["./shared/*"]
     }
   },
-  "include": ["client/src", "shared"],
-  "exclude": ["client/src/components/ui"]
+  "include": ["src", "shared"],
+  "exclude": ["src/components/ui"]
 }

package/template-vite-react/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./client/src/*"],
+      "@/*": ["./src/*"],
       "@shared/*": ["./shared/*"]
     }
   },

package/template-vite-react/vite.config.ts

@@ -2,10 +2,9 @@ import path from 'path'
 import { defineConfig } from '@lark-apaas/coding-vite-preset'
 
 export default defineConfig({
-  root: path.resolve(__dirname, 'client'),
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'client/src'),
+      '@': path.resolve(__dirname, 'src'),
       '@shared': path.resolve(__dirname, 'shared'),
     },
   },

package/template-html/_gitignore

@@ -1,2 +0,0 @@
-.DS_Store
-node_modules

package/template-html/routes.json

@@ -1 +0,0 @@
-{ "version": 1, "type": "html", "fallback": "index.html" }