feat: Add Vue integration for Abby with feature parity to React #141
Conversation
- Created a new Vue package under `packages/vue` named `@tryabby/vue` - Implemented core functions: - `useAbby`: Returns the user's currently selected variant and the `onAct` method - `useFeatureFlag`: Returns the value of the given feature flag - `useRemoteConfig`: Returns the value of the given remote configuration - Ensured the package consumes `@tryabby/core` internally - Wrote the package in TypeScript, maintaining the same type quality as the React integration - Added tests for types and code functionality to ensure reliability - Set up project configuration files: - `package.json` for dependencies and scripts - `tsconfig.json` for TypeScript configuration - Jest configuration for testing - Verified the package builds correctly and passes all tests - Provided instructions for integrating with a Nuxt project This commit establishes a strong foundation for using Abby in Vue projects, ensuring feature parity with the existing React integration.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@feliciien is attempting to deploy a commit to the cstrnt's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded@feliciien has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 55 minutes and 44 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe recent changes introduce a range of updates across TypeScript and Vue projects, focusing on configuration, A/B testing, and feature flag management. Key additions include new configuration files for TypeScript and ESLint, Vue-specific setup for A/B testing using Abby, and comprehensive testing scripts. The changes enhance the development environment, streamline configuration management, and introduce new functionalities for A/B testing and feature flag handling in both React and Vue contexts. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
Outside diff range and nitpick comments (1)
.history/packages/vue/src/context_20240530162009.tsx (1)
5-20: The implementation ofprovideAbbyanduseFeatureFlagfunctions are correct and follow Vue's composition API standards. Consider adding documentation for the error handling inuseFeatureFlag.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!pnpm-lock.yaml
Files selected for processing (56)
- .hintrc (1 hunks)
- .history/packages/react/src/index_20240529172407.ts (1 hunks)
- .history/packages/react/src/index_20240530155809.ts (1 hunks)
- .history/packages/react/src/index_20240530162245.ts (1 hunks)
- .history/packages/vue/dist/useAbby.d_20240530164028.ts (1 hunks)
- .history/packages/vue/dist/useAbby.d_20240530164251.ts (1 hunks)
- .history/packages/vue/dist/useAbby.d_20240530164253.ts (1 hunks)
- .history/packages/vue/dist/useAbby.d_20240530164259.ts (1 hunks)
- .history/packages/vue/dist/useAbby.d_20240530164303.ts (1 hunks)
- .history/packages/vue/package_20240530163311.json (1 hunks)
- .history/packages/vue/package_20240530163408.json (1 hunks)
- .history/packages/vue/package_20240530163417.json (1 hunks)
- .history/packages/vue/src/context_20240530162009.tsx (1 hunks)
- .history/packages/vue/src/index_20240530163802.ts (1 hunks)
- .history/packages/vue/src/main_20240530155710.ts (1 hunks)
- .history/packages/vue/src/main_20240530155817.ts (1 hunks)
- .history/packages/vue/src/main_20240530155819.ts (1 hunks)
- .history/packages/vue/src/main_20240530162023.ts (1 hunks)
- .history/packages/vue/src/main_20240530162028.ts (1 hunks)
- .history/packages/vue/src/main_20240530162037.ts (1 hunks)
- .history/packages/vue/src/main_20240530162052.ts (1 hunks)
- .history/packages/vue/src/main_20240530162113.ts (1 hunks)
- .history/packages/vue/src/useAbby_20240530163549.ts (1 hunks)
- .history/packages/vue/src/useAbby_20240530163710.ts (1 hunks)
- .history/packages/vue/src/useAbby_20240530163712.ts (1 hunks)
- .history/packages/vue/src/useFeatureFlag_20240530163740.ts (1 hunks)
- .history/packages/vue/src/useRemoteConfig_20240530163751.ts (1 hunks)
- .history/packages/vue/tests/useAbby.test_20240530163906.ts (1 hunks)
- .history/packages/vue/tsconfig_20240530155710.json (1 hunks)
- .history/packages/vue/tsconfig_20240530160123.json (1 hunks)
- .history/packages/vue/tsconfig_20240530160130.json (1 hunks)
- .history/packages/vue/tsconfig_20240530160213.json (1 hunks)
- .history/packages/vue/tsconfig_20240530163457.json (1 hunks)
- .history/packages/vue/tsconfig_20240530163532.json (1 hunks)
- packages/vue/.eslintrc.cjs (1 hunks)
- packages/vue/.gitignore (1 hunks)
- packages/vue/.prettierrc.json (1 hunks)
- packages/vue/.vscode/extensions.json (1 hunks)
- packages/vue/README.md (1 hunks)
- packages/vue/cypress.config.ts (1 hunks)
- packages/vue/cypress/e2e/example.cy.ts (1 hunks)
- packages/vue/cypress/e2e/tsconfig.json (1 hunks)
- packages/vue/cypress/fixtures/example.json (1 hunks)
- packages/vue/cypress/support/commands.ts (1 hunks)
- packages/vue/cypress/support/e2e.ts (1 hunks)
- packages/vue/env.d.ts (1 hunks)
- packages/vue/index.html (1 hunks)
- packages/vue/package.json (1 hunks)
- packages/vue/src/index.ts (1 hunks)
- packages/vue/src/useAbby.ts (1 hunks)
- packages/vue/src/useFeatureFlag.ts (1 hunks)
- packages/vue/src/useRemoteConfig.ts (1 hunks)
- packages/vue/tests/useAbby.test.ts (1 hunks)
- packages/vue/tsconfig.app.json (1 hunks)
- packages/vue/tsconfig.json (1 hunks)
- packages/vue/tsconfig.node.json (1 hunks)
Files not processed due to max files limit (3)
- packages/vue/tsconfig.vitest.json
- packages/vue/vite.config.ts
- packages/vue/vitest.config.ts
Files skipped from review due to trivial changes (23)
- .hintrc
- .history/packages/vue/package_20240530163311.json
- .history/packages/vue/package_20240530163417.json
- .history/packages/vue/src/index_20240530163802.ts
- .history/packages/vue/src/main_20240530155710.ts
- .history/packages/vue/src/main_20240530162052.ts
- .history/packages/vue/src/main_20240530162113.ts
- .history/packages/vue/tsconfig_20240530155710.json
- .history/packages/vue/tsconfig_20240530160123.json
- .history/packages/vue/tsconfig_20240530160213.json
- .history/packages/vue/tsconfig_20240530163532.json
- packages/vue/.gitignore
- packages/vue/.prettierrc.json
- packages/vue/.vscode/extensions.json
- packages/vue/README.md
- packages/vue/cypress.config.ts
- packages/vue/cypress/fixtures/example.json
- packages/vue/cypress/support/e2e.ts
- packages/vue/env.d.ts
- packages/vue/index.html
- packages/vue/src/index.ts
- packages/vue/tsconfig.json
- packages/vue/tsconfig.node.json
Additional context used
Biome
.history/packages/vue/dist/useAbby.d_20240530164028.ts
[error] 2-2: Unexpected any. Specify a different type.
[error] 3-3: Unexpected any. Specify a different type.
.history/packages/vue/dist/useAbby.d_20240530164303.ts
[error] 2-2: Unexpected any. Specify a different type.
[error] 3-3: Unexpected any. Specify a different type.
.history/packages/vue/dist/useAbby.d_20240530164251.ts
[error] 2-2: Unexpected any. Specify a different type.
[error] 3-3: Unexpected any. Specify a different type.
.history/packages/vue/dist/useAbby.d_20240530164259.ts
[error] 2-2: Unexpected any. Specify a different type.
[error] 3-3: Unexpected any. Specify a different type.
.history/packages/vue/tsconfig_20240530163457.json
[error] 17-18: String values must be double quoted.
.history/packages/vue/src/useRemoteConfig_20240530163751.ts
[error] 5-5: Unexpected any. Specify a different type.
packages/vue/src/useRemoteConfig.ts
[error] 5-5: Unexpected any. Specify a different type.
.history/packages/vue/dist/useAbby.d_20240530164253.ts
[error] 1-2: Some named imports are only used as types.
.history/packages/vue/tsconfig_20240530160130.json
[error] 2-2: Expected a property but instead found '// This can be omitted if not used'.
[error] 3-3: expected
,but instead found"references"
[error] 16-16: Expected a property but instead found '// Specify a target to ensure compatibility'.
[error] 17-17: expected
,but instead found"moduleResolution"
[error] 17-17: Expected a property but instead found '// Explicitly set module resolution strategy'.
[error] 18-18: expected
,but instead found"baseUrl"
[error] 18-18: Expected a property but instead found '// Set a base URL for non-relative module imports'.
[error] 19-19: expected
,but instead found"strict"
[error] 19-19: Expected a property but instead found '// Enable all strict type-checking options'.
[error] 20-20: expected
,but instead found"esModuleInterop"
[error] 20-20: Expected a property but instead found '// Enables ES6 module emulation'.
[error] 21-21: expected
,but instead found"skipLibCheck"
[error] 21-21: expected
,but instead found// Skip type checking of declaration filespackages/vue/cypress/support/commands.ts
[error] 39-39: All exports are only types and should thus use export type.
.history/packages/vue/package_20240530163408.json
[error] 47-48: String values must be double quoted.
Additional comments not posted (27)
.history/packages/vue/dist/useAbby.d_20240530164303.ts (1)
2-3: Specify more precise types instead ofanyfor better type safety.- variant: import("vue").Ref<any>; - onAct: any; + variant: import("vue").Ref<VariantType>; // Define VariantType as needed + onAct: (action: ActionType) => void; // Define ActionType as needed.history/packages/vue/dist/useAbby.d_20240530164251.ts (1)
2-3: Specify more precise types instead ofanyfor better type safety.- variant: import("vue").Ref<any>; - onAct: any; + variant: import("vue").Ref<VariantType>; // Define VariantType as needed + onAct: (action: ActionType) => void; // Define ActionType as needed.history/packages/vue/dist/useAbby.d_20240530164259.ts (2)
2-3: Specify more precise types instead ofanyfor better type safety.- variant: import("vue").Ref<any>; - onAct: any; + variant: import("vue").Ref<VariantType>; // Define VariantType as needed + onAct: (action: ActionType) => void; // Define ActionType as needed
5-5: Remove accidental character.- a.history/packages/vue/src/main_20240530162028.ts (1)
1-2: Exports are correctly set up and align with the package's goals..history/packages/react/src/index_20240529172407.ts (2)
1-1: Export statement forcreateAbby,withDevtoolsFunction, andABTestReturnValuelooks good.
2-2: Export statement forABConfig,AbbyConfig, anddefineConfiglooks good..history/packages/react/src/index_20240530155809.ts (2)
1-1: Export statement forcreateAbby,withDevtoolsFunction, andABTestReturnValueremains consistent and correct.
2-2: Export statement forABConfig,AbbyConfig, anddefineConfigremains consistent and correct..history/packages/react/src/index_20240530162245.ts (2)
1-1: Export statement forcreateAbby,withDevtoolsFunction, andABTestReturnValueremains consistent and correct.
2-2: Export statement forABConfig,AbbyConfig, anddefineConfigremains consistent and correct..history/packages/vue/src/main_20240530155819.ts (2)
1-1: Export statement forcreateAbby,withDevtoolsFunction, andABTestReturnValueremains consistent and correct.
2-2: Export statement forABConfig,AbbyConfig, anddefineConfigremains consistent and correct..history/packages/vue/src/main_20240530162023.ts (2)
1-1: Export statement forcreateAbby,withDevtoolsFunction, andABTestReturnValueremains consistent and correct.
2-2: Export statement forABConfig,AbbyConfig, anddefineConfigremains consistent and correct.packages/vue/cypress/e2e/example.cy.ts (1)
3-8: Cypress test script for visiting the root URL and checking for a specific element is correctly implemented..history/packages/vue/src/main_20240530162037.ts (1)
1-2: The export statements are correctly formatted and relevant to the Vue integration.packages/vue/cypress/e2e/tsconfig.json (1)
1-10: The TypeScript configuration for Cypress tests is correctly set up with appropriate compiler options and extensions..history/packages/vue/src/useFeatureFlag_20240530163740.ts (1)
1-14: TheuseFeatureFlagfunction is correctly implemented using Vue's composition API. It properly handles the lifecycle and reactivity features of Vue.packages/vue/src/useFeatureFlag.ts (1)
1-14: This file is identical to.history/packages/vue/src/useFeatureFlag_20240530163740.tsand has already been reviewed.packages/vue/src/useAbby.ts (1)
4-14: The implementation ofuseAbbyaligns well with the PR objectives and Vue's composition API.packages/vue/tsconfig.app.json (1)
1-14: The TypeScript configuration is appropriately set up for the Vue project, ensuring a solid foundation for development..history/packages/vue/dist/useAbby.d_20240530164253.ts (1)
4-15: The implementation ofuseAbbyfunction looks correct and follows Vue's composition API standards.packages/vue/package.json (1)
1-19: Thepackage.jsonconfiguration for the Vue package is correctly set up with appropriate dependencies and build scripts.packages/vue/tests/useAbby.test.ts (1)
1-16: This test file appears to be a duplicate of the previous one reviewed. Ensure that duplicate files are not maintained in the repository to avoid confusion.packages/vue/.eslintrc.cjs (1)
1-26: The ESLint configuration is appropriately set up for the Vue package, covering Vue, TypeScript, and Cypress environments.packages/vue/cypress/support/commands.ts (1)
39-39: Adjust the export statement to useexport type.Since all exports in this file are TypeScript types, you should use
export typeto clarify that these are type exports. Here's the corrected line:- export {} + export type {}Likely invalid or redundant comment.
| import { getConfig } from '@tryabby/core'; | ||
|
|
||
| export function useRemoteConfig(configName: string) { | ||
| const configValue = ref<any>(null); |
There was a problem hiding this comment.
Specify a more precise type than any for configValue.
- const configValue = ref<any>(null);
+ const configValue = ref<ConfigType | null>(null); // Replace `ConfigType` with the actual expected typeCommittable suggestion was skipped due low confidence.
| variant: import("vue").Ref<any>; | ||
| onAct: any; |
There was a problem hiding this comment.
Specify more precise types instead of any for better type safety.
- variant: import("vue").Ref<any>;
- onAct: any;
+ variant: import("vue").Ref<VariantType>; // Define VariantType as needed
+ onAct: (action: ActionType) => void; // Define ActionType as neededCommittable suggestion was skipped due low confidence.
| import { onMounted, ref } from 'vue'; | ||
| import { getConfig } from '@tryabby/core'; | ||
|
|
||
| export function useRemoteConfig(configName: string) { | ||
| const configValue = ref<any>(null); | ||
|
|
||
| onMounted(() => { | ||
| configValue.value = getConfig(configName); | ||
| }); | ||
|
|
||
| return { | ||
| configValue | ||
| }; | ||
| } |
There was a problem hiding this comment.
The useRemoteConfig function is implemented correctly using Vue's composition API. However, consider specifying a more precise type than any for configValue.
- 5~
- const configValue = ref<any>(null);
+ const configValue = ref<ConfigType | null>(null); // Replace `ConfigType` with the actual expected typeCommittable suggestion was skipped due low confidence.
| test('useAbby returns correct variant', () => { | ||
| const experimentName = 'test-experiment'; | ||
| const wrapper = mount({ | ||
| template: '<div>{{ variant }}</div>', | ||
| setup() { | ||
| const { variant } = useAbby(experimentName); | ||
| return { variant }; | ||
| } | ||
| }); | ||
|
|
||
| // Mock the result to match your expectations | ||
| expect(wrapper.text()).toBe('variant-A'); // Assuming 'variant-A' is the expected result | ||
| }); |
There was a problem hiding this comment.
Consider improving the test to reflect actual functionality rather than using a mocked result.
- // Mock the result to match your expectations
- expect(wrapper.text()).toBe('variant-A'); // Assuming 'variant-A' is the expected result
+ // TODO: Implement a more realistic test that does not rely on mocked resultsCommittable suggestion was skipped due low confidence.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
packages/vuenamed@tryabby/vueuseAbby: Returns the user's currently selected variant and theonActmethoduseFeatureFlag: Returns the value of the given feature flaguseRemoteConfig: Returns the value of the given remote configuration@tryabby/coreinternallypackage.jsonfor dependencies and scriptstsconfig.jsonfor TypeScript configurationThis commit establishes a strong foundation for using Abby in Vue projects, ensuring feature parity with the existing React integration. /claim #68
Summary by CodeRabbit
Release Notes
New Features
useAbbyfunction for A/B testing in Vue applications.useFeatureFlaganduseRemoteConfigfunctions for managing feature flags and remote configurations in Vue.Bug Fixes
Documentation
README.mdwith setup instructions and guidelines for Vue 3 development.Chores
.gitignoreto exclude unnecessary files and directories.extensions.json.Tests
useAbbyfunction to ensure correct variant handling.Style
Refactor