@ab-test-sdk/codemod

@ab-test-sdk/sdk 的伴隨 CLI —— 掃描 Vue 3 .vue，為可定位的元素自動注入穩定的 data-ab id。

id 一次性寫進 source code、跨 build 不變，是整套穩定身份系統的基礎，讓實驗定位不因網站改版而失效。

完整架構與設計說明見 專案 README。

安裝

pnpm add -D @ab-test-sdk/codemod

使用

pnpm exec ab-codemod inject src

• 參數為要掃描的資料夾（省略則為當前目錄）；建議指向 src，避免掃進 node_modules。
• 已有 data-ab 的元素會跳過，可安全重複執行（只補新元素）。

效果

注入前後（只新增屬性，保留你原始的程式碼格式）：

- <button class="hero__cta">Shop now</button>
+ <button class="hero__cta" data-ab="beba2d0c">Shop now</button>

這個 data-ab 寫進原始碼後就固定下來，之後 SDK 便以它定位元素來套用實驗與追蹤。

服務範圍

只對這些白名單標籤注入 data-ab： button、a、input、select、textarea、form、h1–h6、img、video、audio、p、span、li

限制

• 跳過：自訂元件（大寫開頭 / 含 -）、Vue 結構標籤（template、slot…）、含 v-html 的元素。
• 含動態文字（{{ }} / v-text）的元素：照樣注入 id，但加註 data-ab-text-locked，提示 SDK 不可改其文字。
• v-for 整批共用同一個 id（不支援個別 instance 單獨實驗）。
• id 為隨機產生：請跑一次、commit，之後勿重跑（重跑會為新元素產新 id；已注入的會跳過、保持不變）。

運作 / 技術

• 以 @vue/compiler-sfc / @vue/compiler-dom 解析 SFC 與 template AST，精準判斷可注入的元素。
• 用 magic-string 修改 source：只插入屬性、不重排你的程式碼，保留原始格式。
• 用 glob 掃描 .vue 檔。

相關

• Runtime SDK：@ab-test-sdk/sdk
• 原始碼 / 架構：github.com/Hogan-K/A-B-Test