# 策展 · X (Twitter) 🔥

> 作者：Justin Schroeder (@jpschroeder) · 平台：X (Twitter) · 日期：2026-03-26

> 原始來源：https://x.com/jpschroeder/status/2036078689754992886

## 中文摘要

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 套件。開發者可直接在瀏覽器載入：

```html
<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 參考。

## 標籤

Agent, 開源專案, Web, ArrowJS