跳到主要內容
HOZU0.26.1
選單

理解設計，親手試試這些決策。

放進一個想法， 產出一個檢查過的應用程式。

跟著一個 feature 走過 Hozu。弄壞一個 contract，修改資料規則，看看框架能讓哪些事情變得明確。

試試 pipeline閱讀設計

探索 pipeline

做出來、檢查它，然後上線。

這是預先設定好的導覽，由真正的 Hozu machine 驅動。它用來說明設計，並不會在你的瀏覽器中編譯原始碼。

feature.ts有 guard 的切換
const Toggle = event({ payload: z.object({}) })

const m = machine({
  context: z.object({ allowed: z.boolean() }),
  initialContext: { allowed: true },
  initial: 'off',
  states: ({ ctx }) => ({
    off: { on: [on(Toggle, { target: 'on', guard: () => ctx.allowed === true })] },
    on: { on: [on(Toggle, { target: 'off' })] },
  }),
})
contracts.tsoff → on 的決策
contract(m, {
  given: { state: 'off' },
  when: [{ send: Toggle, payload: {} }],
  expect: { state: 'on' },
})

節錄：省略了 import 與 feature 註冊。on → off 不做任何決定，所以由 lock 記錄，不需要 contract。

  1. 1
    原始碼具型別的宣告
    ●
  2. 2
    Feature IR一份共用的表示
  3. 3
    驗證器規則與 contract
  4. 4
    編譯器推導出的渲染方式
  5. 5
    RuntimeHTML 與 island

你的 feature 準備好了。

先執行有效的範例，再移除它的 contract，看看 Hozu 在哪裡擋下來。

探索渲染計畫

你描述資料， Hozu 劃定邊界。

修改這些宣告，看看圖示如何回應。快取與互動性是兩個獨立的決定。

閱讀推導式渲染
資料 scope
Freshness
Machine 綁定
你的頁面渲染計畫示意
靜態外殼導覽、標題、文章
Query 區域

靜態 HTML

公開且靜態的資料可以預先渲染。

純 HTML

沒有 machine 綁定，這個節點不會 hydrate。

資料：可靜態匯出互動：不需 hydration

這裡模擬的是靜態外殼中的單一 query。相依關係可能讓區域變得更動態。這些控制項只更新本地的示意圖，不會取得私人或即時資料。

再深入一點

規則背後的理由。

六個章節，從第一個設計決策談到仍然存在的代價。

  1. 1

    為什麼是 AI-first？

    Hozu 讓應用程式的行為對工具可見，讓 agent 能檢查的不只是程式碼能否編譯。

  2. 2

    從原始碼到執行中的應用程式

    跟著一個 feature 走過記錄、驗證、render plan 規劃與執行。

  3. 3

    Machines 與 contracts

    讓 feature 允許的 transition 明確化，再對照預期行為加以檢查。

  4. 4

    渲染跟隨資料

    宣告資料的擁有者與 freshness，讓 compiler 推導快取、串流與 island。

  5. 5

    由框架掌管的資料

    一併宣告讀取、寫入與失效，讓重新整理的行為不會散落在各個 handler 中。

  6. 6

    取捨，誠實量測

    Hozu 以撰寫成本、限制條件與不同的生態系契合度，換取明確的結構與檢查。

打造你的第一個 feature檢視測量結果