Skip to content

feat: add @tryabby/vue integration package#187

Open
cyrillical00 wants to merge 2 commits into
tryabby:mainfrom
cyrillical00:feat/vue-integration
Open

feat: add @tryabby/vue integration package#187
cyrillical00 wants to merge 2 commits into
tryabby:mainfrom
cyrillical00:feat/vue-integration

Conversation

@cyrillical00

@cyrillical00 cyrillical00 commented Jun 16, 2026

Copy link
Copy Markdown

Summary

Implements a Vue 3 integration for Abby with feature parity to the existing React integration.

Changes

  • packages/vue/src/index.tscreateAbby() factory returning useAbby, useFeatureFlag, useRemoteConfig, and AbbyPlugin
  • packages/vue/src/__tests__/index.test.ts — 5 passing unit tests covering the full public API
  • packages/vue/package.json, tsconfig.json, vitest.config.ts — package scaffolding

Acceptance criteria

  • Package located at packages/vue and named @tryabby/vue
  • Consumes @tryabby/core internally
  • Written in TypeScript with strong types
  • useAbby — returns reactive variant ref and onAct function
  • useFeatureFlag — returns reactive boolean ref
  • useRemoteConfig — returns reactive remote config ref
  • Tests for types and code (5/5 passing)

Closes #68

Summary by CodeRabbit

  • New Features

    • Launched new Vue integration package with composable hooks for feature flags, A/B testing, and remote configuration management
    • Added a factory function to wire up the integration in Vue apps with built-in state persistence
  • Tests

    • Expanded Vue test coverage, including verification of the full public API surface and onAct event payloads
    • Added tests for remote config behavior and updated hook assertions for reactive return values

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
@vercel

vercel Bot commented Jun 16, 2026

Copy link
Copy Markdown

@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.

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b7d13938-a3d9-4da6-984f-b3e8b49c08c1

📥 Commits

Reviewing files that changed from the base of the PR and between e6fc107 and 526f31b.

📒 Files selected for processing (3)
  • packages/vue/package.json
  • packages/vue/src/__tests__/index.test.ts
  • packages/vue/src/index.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/vue/package.json
  • packages/vue/src/index.ts

Walkthrough

Introduces a new packages/vue workspace package (@tryabby/vue) with a package.json, tsconfig.json, and vitest.config.ts. The main entrypoint exports a createAbby factory that creates a typed Abby instance with localStorage persistence, an AbbyPlugin for Vue provide, and composables useAbby, useFeatureFlag, and useRemoteConfig. A Vitest test suite covers the full public API surface.

Changes

@tryabby/vue Package

Layer / File(s) Summary
Package manifest and build/test config
packages/vue/package.json, packages/vue/tsconfig.json, packages/vue/vitest.config.ts
Adds the @tryabby/vue package manifest with CJS/ESM/types export map, tsup build scripts, vitest test script, peer dependency on vue, workspace dependency on @tryabby/core, TypeScript compiler config targeting ES2020 with bundler resolution, and Vitest config using jsdom environment with globals.
createAbby factory: imports, injection key, and Abby instance
packages/vue/src/index.ts
Re-exports AbbyConfig and ABConfig types from @tryabby/core, defines a Vue InjectionKey for the Abby instance, and exports the createAbby factory with typed generics that constructs an internal Abby instance backed by localStorage with a window guard and error handling.
AbbyPlugin and composables
packages/vue/src/index.ts
AbbyPlugin provides the Abby instance via Vue provide; useAbby returns a reactive selected-variant ref and an onAct callback that sends an ACT event via HttpService with projectId, testName, and selectedVariant; useFeatureFlag returns a readonly reactive boolean ref; useRemoteConfig returns a readonly reactive typed ref; createAbby returns the full public API including __abby__.
Vitest test suite
packages/vue/src/__tests__/index.test.ts
Mocks @tryabby/core while preserving module shape; tests that createAbby returns the expected API surface; verifies useFeatureFlag returns a boolean-valued ref; verifies useAbby returns a variant ref with valid configured value and callable onAct that triggers ACT events with correct payload; verifies useRemoteConfig returns a ref with configured default and correct typing; verifies AbbyPlugin calls app.provide exactly once with an abby property.

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>
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main objective of the changeset—adding a complete Vue integration package for Abby.
Linked Issues check ✅ Passed The PR fully addresses all acceptance criteria from #68: package location, naming, core consumption, TypeScript implementation, all three composables, and comprehensive test coverage.
Out of Scope Changes check ✅ Passed All changes are directly related to the Vue package implementation and configuration; no out-of-scope modifications are present.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between e763d1a and e6fc107.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (5)
  • packages/vue/package.json
  • packages/vue/src/__tests__/index.test.ts
  • packages/vue/src/index.ts
  • packages/vue/tsconfig.json
  • packages/vue/vitest.config.ts

Comment thread packages/vue/package.json
Comment thread packages/vue/src/__tests__/index.test.ts
Comment thread packages/vue/src/__tests__/index.test.ts Outdated
Comment thread packages/vue/src/index.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Vue Integration

1 participant