面向 AI Agent 的極簡化 UI 框架

ArrowJS 1.0 正式開源，定位為「coding agent 專用的 UI 框架」。核心優勢在於設計philosophy 徹底簡化：無需編譯器、無需建置流程、無需 JSX transformer，純粹 TypeScript/JavaScript——這正是大語言模型已經能輕鬆掌握的形式。框架特別提供沙箱執行環境（sandbox package），可安全運行 AI 生成的程式碼，將風險隔離在 WASM 環境中。

核心設計理念

ArrowJS 從平台原語出發，圍繞 coding agent 能深層理解的三個基礎概念構建：

• JavaScript 模組
• 模板字面值（template literals）
• DOM 原生介面

這種設計決策避開現代框架慣有的抽象層，直接暴露平台基礎設施給 AI 模型，降低 LLM 在理解和生成程式碼時的認知負擔。

套件結構與功能層級

框架採分層套件架構，讓使用者按需選擇：

• @arrow-js/core：提供反應式狀態、標籤模板渲染、元件化、pick()/props() 和 nextTick() 等最小化 API
• @arrow-js/framework：加入非同步元件執行時、boundary() 邊界、render() 和文件渲染輔助
• @arrow-js/ssr：伺服器端渲染支援，含 renderToString() 和 serializePayload()
• @arrow-js/hydrate：客戶端補水機制，採用現有 SSR 輸出而非完全替換
• @arrow-js/sandbox：QuickJS/WASM 背景的沙箱執行時，將 Arrow 程式碼在隔離的 JS 環境執行，同時保留對真實 DOM 的渲染能力

沙箱安全機制

沙箱運作原理涉及 AST 解析和虛擬化：首先解析 TypeScript AST 查找 html 函式呼叫，將反應式部分替換為識別子；隨後在 WASM 內部啟動新的 QuickJS JavaScript 環境；最後將內部虛擬 DOM 連結至外部引用，將外部事件安全地路由至隔離環境。這種設計使 AI 生成的程式碼可在不危害主應用的前提下執行。

最小化入門門檻

無須建置步驟即可運行 core 套件。開發者可直接在瀏覽器載入：

<script type="module">
  import { html, reactive } from 'https://esm.sh/@arrow-js/core'
</script>

官方提供 Vite 8 樣板快速啟動完整 SSR+補水堆疊，同時提供「Agent skill」讓 coding agent 自動整合 Arrow 至既有專案。這些設計都指向一個目標：讓 AI 在最少開發配置下生成可用的 UI 程式碼。

開發者體驗與社群

VSCode 官方語法高亮擴充提供 html 模板字面值內的自動補完。專案維護活躍，提供 Discord 社群、GitHub issue 回報管道，以及完整文件、Playground 環境與 API 參考。