bricks ctor 指令群——不需要另外安裝 npm 套件。
產生的專案不需要依賴任何 BRICKS 的 npm 套件。CLI 會將型別化的
bricks-ctor 函式庫產生至本機的 ctor/ 目錄,而專案的 tsconfig.json 會將 bricks-ctor 匯入別名對應至該目錄——因此 import ... from 'bricks-ctor' 無需相依套件即可運作。為什麼選擇程式碼?
- 型別安全 —透過完整的 TypeScript 支援,在編譯時期即可攔截錯誤
- 版本控管 —以 Git 追蹤變更、審閱差異、協同合作
- AI 輔助開發 —與可讀寫專案檔案的 AI 程式設計代理共同開發
- 自動化 —透過 CLI 或 GitHub Actions 等 CI/CD 管線進行部署
核心概念
一個 BRICKS 應用是由可組合的實體所構成的樹狀結構,架構如下:Subspaces
Subspace 是獨立的功能單元,您可以將其視為一個畫面或功能模組。每個 subspace 擁有自己的 brick、generator、data、canvas 與 animation。應用程式會以rootSubspace 作為進入點。
Canvases
Canvas 定義檢視版面。它會在格線上以frame 座標(x、y、寬、高)放置項目(brick 或 subspace 參照)。Canvas 支援生命週期事件(firstEnter、enter、exit),並可在彼此之間切換以進行導覽。
Bricks
Brick 是視覺上的建構單位—負責顯示內容並處理互動的 UI 元件。常見範例包含:
Brick 可套用樣式、動畫、回應按壓事件,並可將屬性動態繫結至資料。
Generators
Generator 負責所有外部 I/O 與資料處理,將應用連線到 API、資料庫、硬體、AI 模型等。每個 generator 擁有輸出埠(outlet,資料輸出通道)連線至 data,並透過事件觸發動作。 Generator 的類別包含:Data
Data 節點儲存應用狀態。它們具型別(string、number、boolean、array、object),並可連結至 brick 或 generator 的屬性以取得反應式更新。當 generator 的 outlet 輸出值時,所連結的 data 會更新,綁定至該 data 的 brick 也會自動重新渲染。Data Calculations
Data calculation 是 JavaScript 函式,用於轉換資料。它們在沙箱環境中執行,並提供 25 個以上內建函式庫(lodash、moment、crypto 等)。適合用於格式化、解析或計算衍生值。Actions 與 Events
Action 是由事件觸發的指令。Brick 與 generator 會發出事件(press、response、error、計時器觸發),您可將其接線至 action,例如切換 canvas、更新 data、觸發 generator 或執行動畫。專案結構
bricks-ctor 專案的結構如下:bun compile(底層會執行 bricks ctor compile)會將其轉換為 BRICKS 執行階段執行所需的 JSON 設定。
下一步
開始使用
設定您的開發環境並建立第一個 BRICKS 專案。