Skip to content

PageFlow 的運作方式

PageFlow 將框架特定的路由探索與框架無關的視覺用戶端結合。

1. 探索路由

所選配接器讀取框架的路由來源。Vue Router 和 Nuxt 提供路由記錄;檔案式框架透過建置整合提供路由;React Router 接收路由物件;Next.js 使用開發 sidecar。

2. 啟動開發執行階段

只有開發伺服器執行時,外掛程式才會注入小型執行階段。它會向 PageFlow 端點回報路由資訊、可見導航目標、頁面標題和就緒狀態。

3. 渲染真實頁面

PageFlow 在受控 iframe 中開啟同源應用頁面。選中的頁面保持即時,背景頁面則擷取到有限的縮圖快取中。

4. 探索導航

配接器會識別受支援的框架連結、同源錨點、歷史記錄變更、字面量程式化目標和明確導航提示。用戶端把這些目標轉換成有向圖邊和預覽熱點。

5. 排列圖

LeaferJS 負責渲染畫布。路由卡組簡化大型路徑階層,空間索引限制視窗工作量,大型版面配置也可以在 Worker 中執行。

正式版本

PageFlow 僅用於開發。它的執行階段端點和視覺用戶端不會注入正式輸出。儲存庫中的正式輸出檢查會驗證這項邊界。

安全邊界

預覽模式會阻止受控 frame 內的錨點導航和表單提交,但無法抑制應用初始化副作用。請使用本機或測試資料。

基於 MIT 授權條款發佈。