add remix package #136
add remix package #136
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces significant enhancements through the 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 (
|
This stack of pull requests is managed by Graphite. Learn more about stacking. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| @@ -0,0 +1,233 @@ | |||
| # API Reference (Remix) | |||
|
|
|||
| ## createAbby | |||
There was a problem hiding this comment.
Correct the spelling mistake in the section header.
- ## createAbby
+ ## CreateAbbyCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| ## createAbby | |
| ## CreateAbby |
|
|
||
| ### Parameters | ||
|
|
||
| The `createAbby` function takes an object as a parameter. The object can contain the following properties: |
There was a problem hiding this comment.
Correct the spelling mistake in the description.
- The `createAbby` function takes an object as a parameter.
+ The `CreateAbby` function takes an object as a parameter.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| The `createAbby` function takes an object as a parameter. The object can contain the following properties: | |
| The `CreateAbby` function takes an object as a parameter. The object can contain the following properties: |
|
|
||
| #### useAbby | ||
|
|
||
| `useAbby` is a react hook that used to access the value of an A/B Test. |
There was a problem hiding this comment.
Capitalize "React" as it is a proper noun.
- `useAbby` is a react hook that used to access the value of an A/B Test.
+ `useAbby` is a React hook that used to access the value of an A/B Test.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| `useAbby` is a react hook that used to access the value of an A/B Test. | |
| `useAbby` is a React hook that used to access the value of an A/B Test. |
|
|
||
| #### useFeatureFlag | ||
|
|
||
| `useFeatureFlag` is a react hook that used to access the value of a Feature Flag. |
There was a problem hiding this comment.
Capitalize "React" in the description of useFeatureFlag.
- `useFeatureFlag` is a react hook that used to access the value of a Feature Flag.
+ `useFeatureFlag` is a React hook that used to access the value of a Feature Flag.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| `useFeatureFlag` is a react hook that used to access the value of a Feature Flag. | |
| `useFeatureFlag` is a React hook that used to access the value of a Feature Flag. |
|
|
||
| #### useRemoteConfig | ||
|
|
||
| `useRemotConfig` is a React hook that is used to access the value of a Remote Configuration variable. |
There was a problem hiding this comment.
Correct the spelling mistake in the hook name.
- `useRemotConfig` is a React hook that is used to access the value of a Remote Configuration variable.
+ `useRemoteConfig` is a React hook that is used to access the value of a Remote Configuration variable.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| `useRemotConfig` is a React hook that is used to access the value of a Remote Configuration variable. | |
| `useRemoteConfig` is a React hook that is used to access the value of a Remote Configuration variable. |
| @@ -0,0 +1,267 @@ | |||
| # @tryabby/remix | |||
|
|
|||
| ## createAbby | |||
There was a problem hiding this comment.
Correct the spelling mistake in the section header.
- ## createAbby
+ ## CreateAbbyCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| ## createAbby | |
| ## CreateAbby |
|
|
||
| ### Parameters | ||
|
|
||
| The `createAbby` function takes an object as a parameter. The object can contain the following properties: |
There was a problem hiding this comment.
Correct the spelling mistake in the description.
- The `createAbby` function takes an object as a parameter.
+ The `CreateAbby` function takes an object as a parameter.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| The `createAbby` function takes an object as a parameter. The object can contain the following properties: | |
| The `CreateAbby` function takes an object as a parameter. The object can contain the following properties: |
|
|
||
| #### useAbby | ||
|
|
||
| `useAbby` is a react hook that used to access the value of an A/B Test. |
There was a problem hiding this comment.
Capitalize "React" as it is a proper noun.
- `useAbby` is a react hook that used to access the value of an A/B Test.
+ `useAbby` is a React hook that used to access the value of an A/B Test.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| `useAbby` is a react hook that used to access the value of an A/B Test. | |
| `useAbby` is a React hook that used to access the value of an A/B Test. |
|
|
||
| #### useFeatureFlag | ||
|
|
||
| `useFeatureFlag` is a react hook that used to access the value of a Feature Flag. |
There was a problem hiding this comment.
Capitalize "React" in the description of useFeatureFlag.
- `useFeatureFlag` is a react hook that used to access the value of a Feature Flag.
+ `useFeatureFlag` is a React hook that used to access the value of a Feature Flag.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| `useFeatureFlag` is a react hook that used to access the value of a Feature Flag. | |
| `useFeatureFlag` is a React hook that used to access the value of a Feature Flag. |
|
|
||
| #### AbbyProvider | ||
|
|
||
| A react component to wrap your application. |
There was a problem hiding this comment.
Capitalize "React" in the description of AbbyProvider.
- A react component to wrap your application.
+ A React component to wrap your application.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| A react component to wrap your application. | |
| A React component to wrap your application. |
cstrnt
force-pushed
the
tim04-26-feat_remix_add_remix_pacakge
branch
from
7981a83 to
2e954d4
Compare
cstrnt
force-pushed
the
tim04-26-feat_remix_add_remix_pacakge
branch
from
2e954d4 to
fb1b7c6
Compare
There was a problem hiding this comment.
Actionable comments posted: 16
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 (21)
- apps/docs/pages/integrations/_meta.json (1 hunks)
- apps/docs/pages/integrations/remix.mdx (1 hunks)
- apps/docs/pages/reference/_meta.json (1 hunks)
- apps/docs/pages/reference/remix.mdx (1 hunks)
- apps/web/src/components/Integrations.tsx (2 hunks)
- packages/remix/.gitignore (1 hunks)
- packages/remix/CHANGELOG.md (1 hunks)
- packages/remix/README.md (1 hunks)
- packages/remix/package.json (1 hunks)
- packages/remix/src/cache.ts (1 hunks)
- packages/remix/src/index.tsx (1 hunks)
- packages/remix/tests/cache.test.ts (1 hunks)
- packages/remix/tests/mocks/handlers.ts (1 hunks)
- packages/remix/tests/mocks/server.ts (1 hunks)
- packages/remix/tests/setup.ts (1 hunks)
- packages/remix/tests/ssr.test.tsx (1 hunks)
- packages/remix/tests/types.test.tsx (1 hunks)
- packages/remix/tests/useAbby.test.tsx (1 hunks)
- packages/remix/tsconfig.json (1 hunks)
- packages/remix/tsup.config.ts (1 hunks)
- packages/remix/vite.config.ts (1 hunks)
Files skipped from review due to trivial changes (7)
- apps/docs/pages/integrations/_meta.json
- apps/docs/pages/reference/_meta.json
- packages/remix/.gitignore
- packages/remix/tests/cache.test.ts
- packages/remix/tests/mocks/server.ts
- packages/remix/tsconfig.json
- packages/remix/tsup.config.ts
Additional Context Used
LanguageTool (54)
apps/docs/pages/integrations/remix.mdx (6)
Near line 9: Possible missing comma found.
Context: ...res for Remix. ## Installation To get started make sure to install the package using ...
Near line 32: Possible missing comma found.
Context: ... ### Create your config To use Abby you need to create your config first. Y...
Near line 56: Possible missing comma found.
Context: ...eate your Instance To use Abby in your code you will need to create a typed Hook an...
Near line 68: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...`` ### Wrap your Application You will need to wrap your application with the `AbbyPro...
Near line 98: Did you mean: “By default,”?
Context: ...read the following section. By default theAbbyProviderwill fetch the data ...
Near line 137: Consider adding a comma here.
Context: ...yApp); ``` ## Usage For the hook usage please read the [React SDK](/integrations/reac...apps/docs/pages/reference/remix.mdx (24)
Near line 22: The pronoun ‘They’ must be used with a non-third-person form of a verb.
Context: ...ashboard to copy the tests object. They keys of the object represent the names of yo...
Near line 58: Loose punctuation mark.
Context: ...s are available: -flags.defaultValue: Allows you to set a general default boo...
Near line 66: Loose punctuation mark.
Context: ...alse, }, ``` -flags.devOverrides: An object containing the values of feat...
Near line 68: Loose punctuation mark.
Context: ...he flags. -remoteConfig.defaultValue: Allows you to set default values for th...
Near line 80: Loose punctuation mark.
Context: ... }, ``` -remoteConfig.devOverrides: An object containing the values of Remo...
Near line 87: “React” is a proper noun and needs to be capitalized.
Context: ...rn Values #### useAbbyuseAbbyis a react hook that used to access the value of a...
Near line 93: Loose punctuation mark.
Context: ...ined weights ##### Parameters -name: The name of the test or flag, needs to ...
Near line 94: Loose punctuation mark.
Context: ...e of the defined tests. -lookupObject: An optional lookup object to automatica...
Near line 98: Loose punctuation mark.
Context: ...alue. ##### Return Values -variant: The variant of the test or the looked u...
Near line 100: Loose punctuation mark.
Context: ...you provided alookupObject-onAct: A function to call when the user perfor...
Near line 104: “React” is a proper noun and needs to be capitalized.
Context: ...# useFeatureFlaguseFeatureFlagis a react hook that used to access the value of a...
Near line 108: If the ‘needs’ clause is essential to the meaning, do not use a comma before the clause.
Context: ...lag. ##### Parameters The name of the flag, needs to be one of the defined flags. ##### ...
Near line 120: If the ‘needs’ clause is essential to the meaning, do not use a comma before the clause.
Context: ...ags. ##### Parameters The name of the flag, needs to be one of the defined flags. ##### ...
Near line 132: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...he Remote Configuration variable, which needs to be one of the keys in your `remoteConfi...
Near line 152: “React” is a proper noun and needs to be capitalized.
Context: ...abby.config.ts#### AbbyProvider A react component to wrap your application. ##...
Near line 156: Loose punctuation mark.
Context: ... application. ##### Props -children: The children of the component - `initia...
Near line 157: In American English, abbreviations like “etc.” require a period.
Context: ... (optional)`: The data (weights, tests, etc). If not provided, the data will be fet...
Near line 186: A comma may be missing after the conjunctive/linking adverb ‘Otherwise’.
Context: ...ts, persisted in a cookie and returned. Otherwise the variant will be read from the cooki...
Near line 191: Loose punctuation mark.
Context: ...eturned. ##### Parameters -testName: The name of the test, needs to be one o...
Near line 192: Loose punctuation mark.
Context: ...e of the defined tests. -lookupObject: An optional lookup object to automatica...
Near line 200: Insert a comma after ‘cases’: “In most cases,”?
Context: ...to access the data of the current user. In most cases you will not need to use this. #### wi...
Near line 205: Did you mean the adjective “higher-order” (spelled with a hyphen)?
Context: ... #### withDevtoolswithDevtoolsis a higher order function to wrap the Devtools from [`@t...
Near line 220: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...nction used to get the required data to server side render the application with Abby. This ...
Near line 221: This phrase is redundant. Consider using “inside”.
Context: ...loaderfunction one of your routes or inside of the root. ##### Example ```jsx import...packages/remix/CHANGELOG.md (2)
Near line 191: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...0.1 ## 3.0.0 ### Major Changes - add server side flag dev support ### Patch Changes - ...
Near line 449: This phrase is duplicated. You should probably use “Updated dependencies” only once.
Context: ...ags ### Patch Changes - fix typings - Updated dependencies - Updated dependencies [6df8a62] - @tryabby/[email protected]packages/remix/README.md (22)
Near line 21: The pronoun ‘They’ must be used with a non-third-person form of a verb.
Context: ...ashboard to copy the tests object. They keys of the object represent the names of yo...
Near line 57: Loose punctuation mark.
Context: ... are available: -flags.defaultValues: Allows you to set a general default val...
Near line 69: Loose punctuation mark.
Context: ...N": {} } ``` -flags.devOverrides: An object containing the values of feat...
Near line 76: “React” is a proper noun and needs to be capitalized.
Context: ...rn Values #### useAbbyuseAbbyis a react hook that used to access the value of a...
Near line 82: Loose punctuation mark.
Context: ...ed weights ##### Parameters -string: The name of the test or flag, needs to ...
Near line 82: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...string: The name of the test or flag, needs to be one of the defined tests. ##### Ret...
Near line 86: Loose punctuation mark.
Context: ...ests. ##### Return Values -variant: The variant of the test -onAct: A f...
Near line 88: Loose punctuation mark.
Context: ...nt: The variant of the test -onAct`: A function to call when the user perfor...
Near line 92: “React” is a proper noun and needs to be capitalized.
Context: ...# useFeatureFlaguseFeatureFlagis a react hook that used to access the value of a...
Near line 96: Possible missing comma found.
Context: ...lag. ##### Parameters The name of the test or flag, needs to be one of the defined...
Near line 104: “React” is a proper noun and needs to be capitalized.
Context: ...Type:boolean#### AbbyProvider A react component to wrap your application. ##...
Near line 108: Loose punctuation mark.
Context: ... application. ##### Props -children: The children of the component - `initia...
Near line 109: In American English, abbreviations like “etc.” require a period.
Context: ... (optional)`: The data (weights, tests, etc). If not provided, the data will be fet...
Near line 117: Possible missing comma found.
Context: ...tes) ##### Parameters The name of the test or flag, needs to be one of the defined...
Near line 121: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...BTestValue` is a function to access the users variant of an A/B Test. This can be cal...
Near line 122: A comma may be missing after the conjunctive/linking adverb ‘Otherwise’.
Context: ...ts, persisted in a cookie and returned. Otherwise the variant will be read from the cooki...
Near line 127: If the ‘needs’ clause is essential to the meaning, do not use a comma before the clause.
Context: ...ned. ##### Parameters The name of the test, needs to be one of the defined tests. ##### ...
Near line 135: Insert a comma after ‘cases’: “In most cases,”?
Context: ...to access the data of the current user. In most cases you will not need to use this. #### wi...
Near line 140: Did you mean the adjective “higher-order” (spelled with a hyphen)?
Context: ... #### withDevtoolswithDevtoolsis a higher order function to wrap the Devtools from [`@t...
Near line 155: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... A higher-order component that enables Server Side Rendering within Next.js. If you wrap y...
Near line 239: Use a comma before “and” if it connects two independent clauses (unless they are closely connected and short).
Context: ...r. This means the cookie will be deleted and the user will get a new variant on the ...
Near line 243: If the ‘needs’ clause is essential to the meaning, do not use a comma before the clause.
Context: ...load. #### Parameters The name of the test, needs to be one of the defined tests. #### E...
Additional comments not posted (12)
packages/remix/vite.config.ts (1)
1-13: Configuration for Vite looks good and is appropriately set up for a React project.packages/remix/tests/setup.ts (1)
1-25: The testing setup is comprehensive and well-configured for both unit and integration tests.packages/remix/tests/types.test.tsx (1)
56-71: Good use of isolated testing foruseFeatureFlag.The test setup for
useFeatureFlagis well-isolated and focuses on the functionality of the hook, which is a good practice in unit testing.packages/remix/tests/useAbby.test.tsx (1)
9-30: EnsureuseAbbyhook handles all variant cases.The test checks if the
variantis defined but does not verify if it correctly handles all specified variants. It would be beneficial to add assertions that specifically check for each variant to ensure comprehensive coverage.apps/web/src/components/Integrations.tsx (1)
47-55: Add Remix integration details to the component.The addition of Remix integration details to the
INTEGRATIONSarray is well-implemented. It includes all necessary information such as the logo, documentation URL, and description, which enhances the user experience by providing clear and accessible information.apps/docs/pages/reference/remix.mdx (4)
104-104: Capitalize "React" in the description ofuseFeatureFlag.- `useFeatureFlag` is a react hook that used to access the value of a Feature Flag. + `useFeatureFlag` is a React hook that used to access the value of a Feature Flag.Likely invalid or redundant comment.
152-152: Capitalize "React" in the description ofAbbyProvider.- A react component to wrap your application. + A React component to wrap your application.Likely invalid or redundant comment.
128-128: Correct the spelling mistake in the hook name.- `useRemotConfig` is a React hook that is used to access the value of a Remote Configuration variable. + `useRemoteConfig` is a React hook that is used to access the value of a Remote Configuration variable.Likely invalid or redundant comment.
87-87: Capitalize "React" as it is a proper noun.- `useAbby` is a react hook that used to access the value of an A/B Test. + `useAbby` is a React hook that used to access the value of an A/B Test.Likely invalid or redundant comment.
packages/remix/README.md (3)
92-92: Capitalize "React" in the description ofuseFeatureFlag.- `useFeatureFlag` is a react hook that used to access the value of a Feature Flag. + `useFeatureFlag` is a React hook that used to access the value of a Feature Flag.Likely invalid or redundant comment.
76-76: Capitalize "React" as it is a proper noun.- `useAbby` is a react hook that used to access the value of an A/B Test. + `useAbby` is a React hook that used to access the value of an A/B Test.Likely invalid or redundant comment.
104-104: Capitalize "React" in the description ofAbbyProvider.- A react component to wrap your application. + A React component to wrap your application.Likely invalid or redundant comment.
|
|
||
| #### withDevtools | ||
|
|
||
| `withDevtools` is a higher order function to wrap the Devtools from [`@tryabby/devtools`](/devtools) for usage within Reacts. |
There was a problem hiding this comment.
Correct the spelling mistake and add a hyphen in "higher-order".
- `withDevtools` is a higher order function to wrap the Devtools from [`@tryabby/devtools`](/devtools) for usage within Reacts.
+ `withDevtools` is a higher-order function to wrap the Devtools from [`@tryabby/devtools`](/devtools) for usage within React.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| `withDevtools` is a higher order function to wrap the Devtools from [`@tryabby/devtools`](/devtools) for usage within Reacts. | |
| `withDevtools` is a higher-order function to wrap the Devtools from [`@tryabby/devtools`](/devtools) for usage within React. |
| #### tests | ||
|
|
||
| The tests property is an object containing your defined A/B Tests. You probably want to use the Copy Button in your dashboard to copy the tests object. | ||
| They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties: |
There was a problem hiding this comment.
Correct the grammatical error in the description.
- They keys of the object represent the names of your predefined A/B tests.
+ The keys of the object represent the names of your predefined A/B tests.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties: | |
| The keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties: |
| #### tests | ||
|
|
||
| The tests property is an object containing your defined A/B Tests. You probably want to use the Copy Button in your dashboard to copy the tests object. | ||
| They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties: |
There was a problem hiding this comment.
Correct the grammatical error in the description.
- They keys of the object represent the names of your predefined A/B tests.
+ The keys of the object represent the names of your predefined A/B tests.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties: | |
| The keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties: |
| export class PromiseCache<T> { | ||
| private ttl: number; | ||
| private cache: Map<string, { storedAt: number; value: Promise<T> }> = new Map(); | ||
|
|
||
| constructor(ttl = 1000 * 60) { | ||
| this.ttl = ttl; | ||
| } | ||
|
|
||
| public async get(key: string, fn: () => Promise<T>): Promise<T> { | ||
| const cached = this.cache.get(key); | ||
| if (cached && Date.now() - cached.storedAt < this.ttl) { | ||
| return cached.value; | ||
| } | ||
|
|
||
| const promise = fn(); | ||
| this.cache.set(key, { value: promise, storedAt: Date.now() }); | ||
| return promise; | ||
| } | ||
| } |
There was a problem hiding this comment.
The PromiseCache class implementation is robust. Consider adding error handling for the function fn passed to get to manage exceptions gracefully.
+ try {
+ const promise = fn();
+ this.cache.set(key, { value: promise, storedAt: Date.now() });
+ return promise;
+ } catch (error) {
+ // handle error appropriately
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export class PromiseCache<T> { | |
| private ttl: number; | |
| private cache: Map<string, { storedAt: number; value: Promise<T> }> = new Map(); | |
| constructor(ttl = 1000 * 60) { | |
| this.ttl = ttl; | |
| } | |
| public async get(key: string, fn: () => Promise<T>): Promise<T> { | |
| const cached = this.cache.get(key); | |
| if (cached && Date.now() - cached.storedAt < this.ttl) { | |
| return cached.value; | |
| } | |
| const promise = fn(); | |
| this.cache.set(key, { value: promise, storedAt: Date.now() }); | |
| return promise; | |
| } | |
| } | |
| export class PromiseCache<T> { | |
| private ttl: number; | |
| private cache: Map<string, { storedAt: number; value: Promise<T> }> = new Map(); | |
| constructor(ttl = 1000 * 60) { | |
| this.ttl = ttl; | |
| } | |
| public async get(key: string, fn: () => Promise<T>): Promise<T> { | |
| const cached = this.cache.get(key); | |
| if (cached && Date.now() - cached.storedAt < this.ttl) { | |
| return cached.value; | |
| } | |
| try { | |
| const promise = fn(); | |
| this.cache.set(key, { value: promise, storedAt: Date.now() }); | |
| return promise; | |
| } catch (error) { | |
| // handle error appropriately | |
| } | |
| } | |
| } |
| import { rest } from "msw"; | ||
| import { AbbyDataResponse, ABBY_BASE_URL } from "@tryabby/core"; | ||
|
|
||
| const returnData: AbbyDataResponse = { | ||
| tests: [ | ||
| { | ||
| name: "test", | ||
| weights: [1, 1, 1, 1], | ||
| }, | ||
| { | ||
| name: "test2", | ||
| weights: [1, 0], | ||
| }, | ||
| ], | ||
| flags: [ | ||
| { | ||
| name: "flag1", | ||
| value: true, | ||
| }, | ||
| { | ||
| name: "flag2", | ||
| value: false, | ||
| }, | ||
| ], | ||
| remoteConfig: [ | ||
| { | ||
| name: "remoteConfig1", | ||
| value: "FooBar", | ||
| }, | ||
| ], | ||
| }; | ||
| export const handlers = [ | ||
| rest.get(`${ABBY_BASE_URL}api/dashboard/:projectId/data`, (req, res, ctx) => { | ||
| return res(ctx.json(returnData)); | ||
| }), | ||
| rest.get(`${ABBY_BASE_URL}api/v1/data/:projectId`, (req, res, ctx) => { | ||
| return res(ctx.json(returnData)); | ||
| }), | ||
| ]; |
There was a problem hiding this comment.
Mock handlers are correctly set up. Consider adding comments to explain the purpose of each handler, which can improve maintainability.
+ // Handler for fetching dashboard data
rest.get(`${ABBY_BASE_URL}api/dashboard/:projectId/data`, (req, res, ctx) => {
return res(ctx.json(returnData));
}),
+ // Handler for fetching version 1 data
rest.get(`${ABBY_BASE_URL}api/v1/data/:projectId`, (req, res, ctx) => {
return res(ctx.json(returnData));
}),Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| import { rest } from "msw"; | |
| import { AbbyDataResponse, ABBY_BASE_URL } from "@tryabby/core"; | |
| const returnData: AbbyDataResponse = { | |
| tests: [ | |
| { | |
| name: "test", | |
| weights: [1, 1, 1, 1], | |
| }, | |
| { | |
| name: "test2", | |
| weights: [1, 0], | |
| }, | |
| ], | |
| flags: [ | |
| { | |
| name: "flag1", | |
| value: true, | |
| }, | |
| { | |
| name: "flag2", | |
| value: false, | |
| }, | |
| ], | |
| remoteConfig: [ | |
| { | |
| name: "remoteConfig1", | |
| value: "FooBar", | |
| }, | |
| ], | |
| }; | |
| export const handlers = [ | |
| rest.get(`${ABBY_BASE_URL}api/dashboard/:projectId/data`, (req, res, ctx) => { | |
| return res(ctx.json(returnData)); | |
| }), | |
| rest.get(`${ABBY_BASE_URL}api/v1/data/:projectId`, (req, res, ctx) => { | |
| return res(ctx.json(returnData)); | |
| }), | |
| ]; | |
| import { rest } from "msw"; | |
| import { AbbyDataResponse, ABBY_BASE_URL } from "@tryabby/core"; | |
| const returnData: AbbyDataResponse = { | |
| tests: [ | |
| { | |
| name: "test", | |
| weights: [1, 1, 1, 1], | |
| }, | |
| { | |
| name: "test2", | |
| weights: [1, 0], | |
| }, | |
| ], | |
| flags: [ | |
| { | |
| name: "flag1", | |
| value: true, | |
| }, | |
| { | |
| name: "flag2", | |
| value: false, | |
| }, | |
| ], | |
| remoteConfig: [ | |
| { | |
| name: "remoteConfig1", | |
| value: "FooBar", | |
| }, | |
| ], | |
| }; | |
| export const handlers = [ | |
| // Handler for fetching dashboard data | |
| rest.get(`${ABBY_BASE_URL}api/dashboard/:projectId/data`, (req, res, ctx) => { | |
| return res(ctx.json(returnData)); | |
| }), | |
| // Handler for fetching version 1 data | |
| rest.get(`${ABBY_BASE_URL}api/v1/data/:projectId`, (req, res, ctx) => { | |
| return res(ctx.json(returnData)); | |
| }), | |
| ]; |
| it("uses lookup object when retrieving AB test variant", () => { | ||
| const { getABTestValue } = createAbby({ | ||
| currentEnvironment: "", | ||
| environments: [], | ||
| projectId: "123", | ||
| tests: { | ||
| test2: { | ||
| variants: ["SimonsText", "MatthiasText", "TomsText", "TimsText"], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const lookupMap = { | ||
| SimonsText: "a", | ||
| MatthiasText: "b", | ||
| TomsText: "c", | ||
| TimsText: "d", | ||
| } as const; | ||
|
|
||
| const activeVariant = getABTestValue("test2"); | ||
| const value = getABTestValue("test2", lookupMap); | ||
|
|
||
| expect(value).toBe(lookupMap[activeVariant]); | ||
| }); |
There was a problem hiding this comment.
Check consistency in AB test variant retrieval.
The test for AB test variant retrieval should ensure that the returned value matches the expected variant from the lookup object. This consistency check is vital for the reliability of AB testing features.
| it("produces proper types with a lookup objects", () => { | ||
| const { getABTestValue } = createAbby({ | ||
| environments: [], | ||
| projectId: "123", | ||
| currentEnvironment: "a", | ||
| tests: { | ||
| test: { | ||
| variants: ["A", "B", "C"], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const activeVariant = getABTestValue("test", { | ||
| A: "Hello", | ||
| B: "Bonjour", | ||
| C: "Hola", | ||
| } as const); | ||
|
|
||
| expectTypeOf(activeVariant).toEqualTypeOf<"Hello" | "Bonjour" | "Hola">(); | ||
| }); | ||
|
|
||
| it("produces proper types with a a lookup object in the hook", () => { | ||
| const { AbbyProvider, useAbby } = createAbby({ | ||
| currentEnvironment: "", | ||
| environments: [], | ||
| projectId: "123", | ||
| tests: { | ||
| test: { | ||
| variants: ["A", "B", "C"], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const wrapper = ({ children }: PropsWithChildren) => <AbbyProvider>{children}</AbbyProvider>; | ||
|
|
||
| const { result } = renderHook( | ||
| () => | ||
| useAbby("test", { | ||
| A: "Hello", | ||
| B: "Bonjour", | ||
| C: "Hola", | ||
| }), | ||
| { | ||
| wrapper, | ||
| } | ||
| ); | ||
|
|
||
| expectTypeOf(result.current.variant).toEqualTypeOf<"Hello" | "Bonjour" | "Hola">(); | ||
| }); |
There was a problem hiding this comment.
Ensure accurate type handling with lookup objects.
The tests involving lookup objects should verify that the types returned match the expected types defined in the lookup object. This is crucial for ensuring that the feature behaves correctly in production.
| { | ||
| "name": "@tryabby/remix", | ||
| "version": "1.0.1", | ||
| "description": "", | ||
| "main": "dist/index.js", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "module": "dist/index.mjs", | ||
| "types": "dist/index.d.ts", | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "import": "./dist/index.mjs", | ||
| "require": "./dist/index.js" | ||
| }, | ||
| "scripts": { | ||
| "build": "tsup src/index.tsx", | ||
| "dev": "pnpm run build --watch", | ||
| "test": "vitest" | ||
| }, | ||
| "keywords": [], | ||
| "author": "", | ||
| "license": "ISC", | ||
| "homepage": "https://docs.tryabby.com", | ||
| "devDependencies": { | ||
| "@remix-run/testing": "^2.9.1", | ||
| "@testing-library/jest-dom": "^5.16.5", | ||
| "@testing-library/react": "^13.4.0", | ||
| "@testing-library/react-hooks": "^8.0.1", | ||
| "@tryabby/core": "workspace:*", | ||
| "@types/react": "^18.0.26", | ||
| "@vitejs/plugin-react": "^4.2.1", | ||
| "jsdom": "^20.0.3", | ||
| "msw": "^0.49.1", | ||
| "node-fetch": "^3.3.2", | ||
| "react": "^18.2.0", | ||
| "react-dom": "18.2.0", | ||
| "tsconfig": "workspace:*", | ||
| "tsup": "^6.5.0", | ||
| "typescript": "^4.9.3", | ||
| "vite": "^5.2.10", | ||
| "vitest": "^1.5.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "@remix-run/node": ">=2", | ||
| "@remix-run/react": ">=2", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0" | ||
| }, | ||
| "dependencies": { | ||
| "@tryabby/react": "workspace:*", | ||
| "ts-toolbelt": "^9.6.0" | ||
| } |
There was a problem hiding this comment.
The package configuration is well-defined. Consider adding a description to the description field to enhance the package's discoverability and clarity.
- "description": "",
+ "description": "Provides Remix integration for Abby, including SSR support and feature flag management.",Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| { | |
| "name": "@tryabby/remix", | |
| "version": "1.0.1", | |
| "description": "", | |
| "main": "dist/index.js", | |
| "files": [ | |
| "dist" | |
| ], | |
| "module": "dist/index.mjs", | |
| "types": "dist/index.d.ts", | |
| ".": { | |
| "types": "./dist/index.d.ts", | |
| "import": "./dist/index.mjs", | |
| "require": "./dist/index.js" | |
| }, | |
| "scripts": { | |
| "build": "tsup src/index.tsx", | |
| "dev": "pnpm run build --watch", | |
| "test": "vitest" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "homepage": "https://docs.tryabby.com", | |
| "devDependencies": { | |
| "@remix-run/testing": "^2.9.1", | |
| "@testing-library/jest-dom": "^5.16.5", | |
| "@testing-library/react": "^13.4.0", | |
| "@testing-library/react-hooks": "^8.0.1", | |
| "@tryabby/core": "workspace:*", | |
| "@types/react": "^18.0.26", | |
| "@vitejs/plugin-react": "^4.2.1", | |
| "jsdom": "^20.0.3", | |
| "msw": "^0.49.1", | |
| "node-fetch": "^3.3.2", | |
| "react": "^18.2.0", | |
| "react-dom": "18.2.0", | |
| "tsconfig": "workspace:*", | |
| "tsup": "^6.5.0", | |
| "typescript": "^4.9.3", | |
| "vite": "^5.2.10", | |
| "vitest": "^1.5.0" | |
| }, | |
| "peerDependencies": { | |
| "@remix-run/node": ">=2", | |
| "@remix-run/react": ">=2", | |
| "react": "^18.2.0", | |
| "react-dom": "^18.2.0" | |
| }, | |
| "dependencies": { | |
| "@tryabby/react": "workspace:*", | |
| "ts-toolbelt": "^9.6.0" | |
| } | |
| { | |
| "name": "@tryabby/remix", | |
| "version": "1.0.1", | |
| "description": "Provides Remix integration for Abby, including SSR support and feature flag management.", | |
| "main": "dist/index.js", | |
| "files": [ | |
| "dist" | |
| ], | |
| "module": "dist/index.mjs", | |
| "types": "dist/index.d.ts", | |
| ".": { | |
| "types": "./dist/index.d.ts", | |
| "import": "./dist/index.mjs", | |
| "require": "./dist/index.js" | |
| }, | |
| "scripts": { | |
| "build": "tsup src/index.tsx", | |
| "dev": "pnpm run build --watch", | |
| "test": "vitest" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "homepage": "https://docs.tryabby.com", | |
| "devDependencies": { | |
| "@remix-run/testing": "^2.9.1", | |
| "@testing-library/jest-dom": "^5.16.5", | |
| "@testing-library/react": "^13.4.0", | |
| "@testing-library/react-hooks": "^8.0.1", | |
| "@tryabby/core": "workspace:*", | |
| "@types/react": "^18.0.26", | |
| "@vitejs/plugin-react": "^4.2.1", | |
| "jsdom": "^20.0.3", | |
| "msw": "^0.49.1", | |
| "node-fetch": "^3.3.2", | |
| "react": "^18.2.0", | |
| "react-dom": "18.2.0", | |
| "tsconfig": "workspace:*", | |
| "tsup": "^6.5.0", | |
| "typescript": "^4.9.3", | |
| "vite": "^5.2.10", | |
| "vitest": "^1.5.0" | |
| }, | |
| "peerDependencies": { | |
| "@remix-run/node": ">=2", | |
| "@remix-run/react": ">=2", | |
| "react": "^18.2.0", | |
| "react-dom": "^18.2.0" | |
| }, | |
| "dependencies": { | |
| "@tryabby/react": "workspace:*", | |
| "ts-toolbelt": "^9.6.0" | |
| } | |
| } |
| >(config: F.Narrow<AbbyConfig<FlagName, Tests, string[], RemoteConfigName, RemoteConfig>>) { | ||
| const { | ||
| AbbyProvider, | ||
| useAbby, | ||
| useFeatureFlag, | ||
| getFeatureFlagValue, | ||
| useRemoteConfig, | ||
| getRemoteConfig, | ||
| getABTestValue, | ||
| __abby__, | ||
| getVariants, | ||
| withDevtools, | ||
| useFeatureFlags, | ||
| useRemoteConfigVariables, | ||
| } = baseCreateAbby<FlagName, TestName, Tests, RemoteConfig, RemoteConfigName, ConfigType>(config); | ||
|
|
||
| const AbbyRemixProvider = ({ children }: PropsWithChildren) => { | ||
| const matches = useMatches(); | ||
|
|
||
| let initialData: undefined | AbbyDataResponse = undefined; | ||
|
|
||
| matches.forEach((match) => { | ||
| if ( | ||
| match.data && | ||
| typeof match.data === "object" && | ||
| ABBY_DATA_KEY in match.data && | ||
| match.data[ABBY_DATA_KEY] != null | ||
| ) { | ||
| initialData = match.data[ABBY_DATA_KEY] as AbbyDataResponse; | ||
| } | ||
| }); | ||
|
|
||
| return <AbbyProvider initialData={initialData}>{children}</AbbyProvider>; | ||
| }; | ||
|
|
||
| /** | ||
| * Helper function to get Abby data from the server | ||
| * @param ctx - Remix context | ||
| * @returns - Abby data | ||
| */ | ||
| const getAbbyData = async <C extends { request: Request }>(ctx: C) => { | ||
| const cookies = ctx.request.headers.get("Cookie"); | ||
|
|
||
| const data = await loaderCache.get( | ||
| [ | ||
| config.projectId, | ||
| config.currentEnvironment, | ||
| config.__experimentalCdnUrl, | ||
| config.apiUrl, | ||
| ].join("-"), | ||
| () => | ||
| HttpService.getProjectData({ | ||
| projectId: config.projectId, | ||
| environment: config.currentEnvironment, | ||
| __experimentalCdnUrl: config.__experimentalCdnUrl, | ||
| url: config.apiUrl, | ||
| }) | ||
| ); | ||
|
|
||
| if (data) { | ||
| __abby__.init(data); | ||
| } | ||
| if (cookies) { | ||
| __abby__.setLocalOverrides(cookies); | ||
| } | ||
|
|
||
| return { | ||
| [ABBY_DATA_KEY]: data, | ||
| }; | ||
| }; | ||
|
|
||
| return { | ||
| AbbyProvider: AbbyRemixProvider, | ||
| // we need to retype the useAbby function here | ||
| // because re-using the types from the react package causes the ts-toolbelt package to behave weirdly | ||
| // and therefore not working as expected | ||
| useAbby: useAbby as < | ||
| K extends keyof Tests, | ||
| TestVariant extends Tests[K]["variants"][number], | ||
| LookupValue, | ||
| Lookup extends Record<TestVariant, LookupValue> | undefined = undefined, | ||
| >( | ||
| name: K, | ||
| lookupObject?: F.Narrow<Lookup> | ||
| ) => { | ||
| variant: ABTestReturnValue<Lookup, TestVariant>; | ||
| onAct: () => void; | ||
| }, | ||
| useFeatureFlag, | ||
| getFeatureFlagValue, | ||
| useRemoteConfig, | ||
| useFeatureFlags, | ||
| useRemoteConfigVariables, | ||
| getRemoteConfig, | ||
| __abby__, | ||
| getVariants, | ||
| withDevtools: withDevtools as withDevtoolsFunction, | ||
| getAbbyData, | ||
| getABTestValue, | ||
| }; |
There was a problem hiding this comment.
Ensure type safety and correct implementation in exported functions.
The exported functions in this file are crucial for the integration's functionality. It's important to ensure that all functions are correctly implemented and that type safety is maintained throughout to prevent runtime errors and maintain code quality.
|
|
||
| ### Patch Changes | ||
|
|
||
| - add devtools | ||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.4.0 | ||
|
|
||
| ### Minor Changes | ||
|
|
||
| - use core package | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.10 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix API calls | ||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.9 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix API URL | ||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.8 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix config types | ||
|
|
||
| ## 1.3.7 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix types | ||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.6 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix types | ||
|
|
||
| ## 1.3.5 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix typings | ||
|
|
||
| ## 1.3.4 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix types | ||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.3 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix types | ||
|
|
||
| ## 1.3.2 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.1 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix base url | ||
| - Updated dependencies | ||
| - @tryabby/[email protected] | ||
|
|
||
| ## 1.3.0 | ||
|
|
||
| ### Minor Changes | ||
|
|
||
| - 6df8a62: add feature flags | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - fix typings | ||
| - Updated dependencies | ||
| - Updated dependencies [6df8a62] |
There was a problem hiding this comment.
Ensure clarity and accuracy in changelog entries.
The changelog should clearly and accurately reflect all changes made in the updates. This includes providing detailed descriptions of changes and ensuring that all dependencies are correctly listed to keep users well-informed about the modifications and their impact.
Summary by CodeRabbit
@tryabby/remixpackage version 1.0.1 supporting feature flags and A/B testing.