feat: add @tryabby/vue integration package#187
Conversation
Implements Vue 3 integration for Abby with feature parity to the React package: - useAbby() composable returning reactive variant ref and onAct function - useFeatureFlag() composable returning reactive boolean ref - useRemoteConfig() composable returning reactive remote config ref - AbbyPlugin for Vue app.use() registration - Full test suite passing (5/5 tests) Closes tryabby#68
|
@cyrillical00 is attempting to deploy a commit to the cstrnt's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughIntroduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant App as Vue App
participant AbbyPlugin
participant useAbby
participant useFeatureFlag
participant HttpService
participant Abby as Abby Instance
App->>AbbyPlugin: app.use(AbbyPlugin)
AbbyPlugin->>App: app.provide(ABBY_KEY, abby)
App->>useAbby: useAbby("testName")
useAbby->>Abby: getVariant("testName")
Abby-->>useAbby: selectedVariant
useAbby-->>App: variant (ref), onAct
App->>useAbby: onAct()
useAbby->>HttpService: sendData({ type: ACT, projectId, testName, selectedVariant })
App->>useFeatureFlag: useFeatureFlag("flagName")
useFeatureFlag->>Abby: isFeatureEnabled("flagName")
Abby-->>useFeatureFlag: boolean
useFeatureFlag-->>App: readonly Ref<boolean>
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/vue/package.json`:
- Around line 5-19: The "build" script on line 17 runs tsup without explicit
output format flags, which means it will only generate CommonJS output by
default. However, the "exports" field on lines 11-13 declares three required
artifacts: CommonJS (dist/index.js), ESM (dist/index.mjs), and TypeScript
declarations (dist/index.d.ts). Update the "build" script to include explicit
tsup flags that generate all three output formats: CommonJS, ESM modules, and
TypeScript declaration files, ensuring all declared export paths have matching
artifacts.
In `@packages/vue/src/__tests__/index.test.ts`:
- Around line 37-118: Add a dedicated test suite for the useRemoteConfig
function within the test file, similar to the existing describe blocks for
useFeatureFlag and useAbby. Create a test that validates useRemoteConfig returns
a ref with the expected properties and correct type, and include a type
assertion to ensure type-safety matches the package's type-quality objectives.
Use the same createAbby pattern with remoteConfig configuration to instantiate
and test the hook's behavior.
- Around line 79-93: The test for onAct at line 92 only verifies that the
function doesn't throw an error, but it fails to validate the actual payload
structure being sent. Enhance the test by mocking the HTTP layer to capture the
request payload sent by onAct, then assert that the payload includes all
required fields as per the contract: type, projectId, testName, and
selectedVariant. This ensures regressions in the event shape won't be missed in
future changes.
In `@packages/vue/src/index.ts`:
- Around line 26-33: The storage access in the get and set methods can throw
SecurityError or QuotaExceededError exceptions in private browsing modes,
restricted contexts, or when storage is full, which can break SDK
initialization. Wrap the localStorage.getItem call in the get method and the
localStorage.setItem call in the set method with try/catch blocks. Use
window.localStorage explicitly instead of the bare localStorage reference, and
ensure that the get method returns null on error and the set method gracefully
handles errors without throwing.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a079adc2-c6f7-4ee8-8e7b-0fcb8a0527d5
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
packages/vue/package.jsonpackages/vue/src/__tests__/index.test.tspackages/vue/src/index.tspackages/vue/tsconfig.jsonpackages/vue/vitest.config.ts
- build: emit CJS + ESM + .d.ts to match the exports map (tsup --format cjs,esm --dts --sourcemap --clean) - index: guard window.localStorage get/set (SecurityError in private mode, QuotaExceededError when storage is full) - tests: assert onAct sends the ACT payload (type/projectId/testName/ selectedVariant); add useRemoteConfig coverage (runtime + type) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Summary
Implements a Vue 3 integration for Abby with feature parity to the existing React integration.
Changes
packages/vue/src/index.ts—createAbby()factory returninguseAbby,useFeatureFlag,useRemoteConfig, andAbbyPluginpackages/vue/src/__tests__/index.test.ts— 5 passing unit tests covering the full public APIpackages/vue/package.json,tsconfig.json,vitest.config.ts— package scaffoldingAcceptance criteria
packages/vueand named@tryabby/vue@tryabby/coreinternallyuseAbby— returns reactive variant ref andonActfunctionuseFeatureFlag— returns reactive boolean refuseRemoteConfig— returns reactive remote config refCloses #68
Summary by CodeRabbit
New Features
Tests
onActevent payloads