Skip to content

Commit fb1b7c6

Browse files
cstrntcstrnt
committed
feat(remix): add remix pacakge
1 parent 0bcb8c1 commit fb1b7c6

22 files changed

+2135
-172
lines changed

‎apps/docs/pages/integrations/_meta.json

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"nextjs": "Next.js",
33
"react": "React",
4+
"remix": "Remix",
45
"svelte": "Svelte",
56
"angular": "Angular",
67
"node": "Node",

‎apps/docs/pages/integrations/remix.mdx

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { Tab, Tabs, Callout } from "nextra-theme-docs";
2+
3+
# Remix
4+
5+
Our Remix integration works with Remix v2 or later. It uses the React SDK under the hood and just has some additional features for Remix.
6+
7+
## Installation
8+
9+
To get started make sure to install the package using your favorite package manager.
10+
11+
<Tabs items={["npm", "yarn", "pnpm"]}>
12+
<Tab>
13+
```bash
14+
npm i @tryabby/remix
15+
```
16+
</Tab>
17+
18+
<Tab>
19+
```bash
20+
yarn add @tryabby/remix
21+
```
22+
</Tab>
23+
<Tab>
24+
```bash
25+
pnpm i @tryabby/remix
26+
```
27+
</Tab>
28+
</Tabs>
29+
30+
### Create your config
31+
32+
To use Abby you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
33+
34+
```ts
35+
// abby.config.ts
36+
import { defineConfig } from "@tryabby/remix";
37+
38+
export default defineConfig({
39+
projectId: "<YOUR_PROJECT_ID>",
40+
currentEnvironment: process.env.NODE_ENV,
41+
environments: ["production", "development"],
42+
tests: {
43+
test: { variants: ["A", "B"] },
44+
footer: { variants: ["dark", "orange", "green"] },
45+
// ... your tests
46+
},
47+
flags: ["darkMode", "newFeature"],
48+
remoteConfig: {
49+
customButtonText: "String",
50+
},
51+
});
52+
```
53+
54+
### Create your Instance
55+
56+
To use Abby in your code you will need to create a typed Hook and Provider first. You can do this by using the `createAbby` function.
57+
Please copy the id of your project from the dashboard to get started.
58+
59+
```tsx
60+
import { createAbby } from "@tryabby/remix";
61+
import abbyConfig from "../abby.config";
62+
63+
const { AbbyProvider, useAbby } = createAbby(abbyConfig);
64+
```
65+
66+
### Wrap your Application
67+
68+
You will need to wrap your application with the `AbbyProvider` to make sure the hook works.
69+
This is done in the `root.tsx` / `root.js` file in your Next.js project.
70+
71+
```tsx
72+
import { AbbyProvider } from "../lib/abby";
73+
74+
export function Layout({ children }: { children: React.ReactNode }) {
75+
return (
76+
<html lang="en">
77+
<head>
78+
<meta charSet="utf-8" />
79+
<meta name="viewport" content="width=device-width, initial-scale=1" />
80+
<Meta />
81+
<Links />
82+
</head>
83+
<body>
84+
<AbbyProvider>
85+
{children}
86+
<ScrollRestoration />
87+
<Scripts />
88+
</AbbyProvider>
89+
</body>
90+
</html>
91+
);
92+
}
93+
```
94+
95+
<Callout type="info" emoji="💡">
96+
If you want to improve the experience read the following section.
97+
</Callout>
98+
99+
By default the `AbbyProvider` will fetch the data from the server on the first render (client side). This can be improved by using a `loader`. This will make sure the data is already available on the first render
100+
This allows you to use Server Side Reendering (SSR) with Abby.
101+
Doing this will prevent Flash of Original Content (FOOC) and improve the user experience.
102+
103+
```tsx /await getAbbyData(ctx)/
104+
import { AbbyProvider, getAbbyData } from "../lib/abby";
105+
106+
export const loader = async (ctx) => {
107+
return json({
108+
...(await getAbbyData(ctx)),
109+
});
110+
};
111+
112+
export function Layout({ children }: { children: React.ReactNode }) {
113+
return (
114+
<html lang="en">
115+
<head>
116+
<meta charSet="utf-8" />
117+
<meta name="viewport" content="width=device-width, initial-scale=1" />
118+
<Meta />
119+
<Links />
120+
</head>
121+
<body>
122+
<AbbyProvider>
123+
{children}
124+
<ScrollRestoration />
125+
<Scripts />
126+
</AbbyProvider>
127+
</body>
128+
</html>
129+
);
130+
}
131+
132+
export default withAbby(MyApp);
133+
```
134+
135+
## Usage
136+
137+
For the hook usage please read the [React SDK](/integrations/react#usage) documentation.

‎apps/docs/pages/reference/_meta.json

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
2-
"nextjs": "Next.js",
3-
"react": "React",
4-
"svelte": "Svelte",
5-
"angular": "Angular",
6-
"http": "HTTP API",
7-
"cli": "CLI"
8-
}
2+
"nextjs": "Next.js",
3+
"react": "React",
4+
"remix": "Remix",
5+
"svelte": "Svelte",
6+
"angular": "Angular",
7+
"http": "HTTP API",
8+
"cli": "CLI"
9+
}

‎apps/docs/pages/reference/remix.mdx

+233
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
# API Reference (Remix)
2+
3+
## createAbby
4+
5+
### Parameters
6+
7+
The `createAbby` function takes an object as a parameter. The object can contain the following properties:
8+
9+
| Name | Type | Required | Description | details |
10+
| ------------------ | -------- | :------: | ------------------------------------------------------------------ | --------------------- |
11+
| projectId | `string` | ✅ | The ID of your project in Abby | - |
12+
| apiUrl | `string` | | The URL of the Abby API. Defaults to the hosted version | - |
13+
| currentEnvironment | `string` | ✅ | The current environment of your application | [link](/environments) |
14+
| tests | `object` | | An object containing your defined A/B Tests | - |
15+
| flags | `array` | | An array containing your defined Feature Flags | - |
16+
| remoteConfig | `object` | | An object containing the name of your remote config and their type | - |
17+
| settings | `object` | | An object with additional settings for Abby | - |
18+
19+
#### tests
20+
21+
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.
22+
They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties:
23+
24+
| Name | Type | Required | Description |
25+
| -------- | --------------- | :------: | ------------------------------------------------------- |
26+
| variants | `Array<string>` | ✅ | An array of strings containing the variants of the test |
27+
28+
##### Example
29+
30+
```ts
31+
const abby = createAbby({
32+
// ... your config
33+
tests: {
34+
"test-abtest": {
35+
variants: ["control", "variant-a", "variant-b"],
36+
},
37+
},
38+
});
39+
```
40+
41+
#### flags
42+
43+
The flags property is an array containing your defined Feature Flags. You probably want to use the Copy Button in your dashboard to copy the flags array.
44+
45+
##### Example
46+
47+
```ts
48+
const abby = createAbby({
49+
// ... your config
50+
flags: ["test-flag"],
51+
});
52+
```
53+
54+
#### settings
55+
56+
The settings property is an object containing additional settings for Abby. The following properties are available:
57+
58+
- `flags.defaultValue`: Allows you to set a general default boolean value for each Feature Flag type.
59+
60+
```json
61+
flags: {
62+
defaultValue: false,
63+
},
64+
```
65+
66+
- `flags.devOverrides`: An object containing the values of feature flags in development mode. The keys of the object represent the names of the flags.
67+
68+
- `remoteConfig.defaultValue`: Allows you to set default values for the possible Remote Config types.
69+
70+
```json
71+
remoteConfig: {
72+
defaultValues: {
73+
String: "",
74+
Number: 0,
75+
JSON: {},
76+
},
77+
},
78+
```
79+
80+
- `remoteConfig.devOverrides`: An object containing the values of Remote Configuration variables in development mode.
81+
The keys of the object represent the names of the flags. The value must be assignable to the type of the variable.
82+
83+
### Return Values
84+
85+
#### useAbby
86+
87+
`useAbby` is a react hook that used to access the value of an A/B Test.
88+
Recurring users will always get the same value for a test.
89+
New users will get a random value for a test depending on the defined weights
90+
91+
##### Parameters
92+
93+
- `name`: The name of the test or flag, needs to be one of the defined tests.
94+
- `lookupObject`: An optional lookup object to automatically map the active variant to a custom value.
95+
96+
##### Return Values
97+
98+
- `variant` : The variant of the test or the looked up value if you provided a `lookupObject`
99+
100+
- `onAct`: A function to call when the user performs an action associated with the test _Type: `function`_
101+
102+
#### useFeatureFlag
103+
104+
`useFeatureFlag` is a react hook that used to access the value of a Feature Flag.
105+
106+
##### Parameters
107+
108+
The name of the flag, needs to be one of the defined flags.
109+
110+
##### Return Value
111+
112+
The value of the flag _Type: `boolean`_
113+
114+
#### useFeatureFlags
115+
116+
`useFeatureFlags` is a React hook that is used to access all existing feature flags.
117+
118+
##### Parameters
119+
120+
The name of the flag, needs to be one of the defined flags.
121+
122+
##### Return Value
123+
124+
An Array of all feature flags. Includes the name and the value. The value will be a boolean.
125+
126+
#### useRemoteConfig
127+
128+
`useRemotConfig` is a React hook that is used to access the value of a Remote Configuration variable.
129+
130+
##### Parameters
131+
132+
The name of the Remote Configuration variable, which needs to be one of the keys in your `remoteConfig` object in your `abby.config.ts`.
133+
134+
##### Return Value
135+
136+
The current value of the Remote Configuration variable. The type will be according to the specified type in the `abby.config.ts`
137+
138+
#### useRemoteConfigVariables
139+
140+
`useRemoteConfigVariables` is a React hook that is used to access all existing Remote Configuration variables.
141+
142+
##### Parameters
143+
144+
None
145+
146+
##### Return Value
147+
148+
An Array of all remote config variables. Includes the name and the value. The type will be according to the specified type in the `abby.config.ts`
149+
150+
#### AbbyProvider
151+
152+
A react component to wrap your application.
153+
154+
##### Props
155+
156+
- `children`: The children of the component
157+
- `initialData (optional)`: The data (weights, tests, etc). If not provided, the data will be fetched on the client.
158+
159+
#### getFeatureFlagValue
160+
161+
`getFeatureFlagValue` is a function to access the value of a feature flag. This can be called in a non-react scope (Regular Typescript, Edge Functions and API Routes)
162+
163+
##### Parameters
164+
165+
The name of the test or flag, needs to be one of the defined flags.
166+
167+
##### Return Value
168+
169+
The value of the flag _Type: `boolean`_
170+
171+
#### getRemoteConfig
172+
173+
`getRemoteConfig` is a function to access the value of a Remote Configuration variable. This can be called in a non-react scope (Regular Typescript, Edge Functions and API Routes)
174+
175+
##### Parameters
176+
177+
The name of the Remote Configuration variable, which needs to be one of the keys in your `remoteConfig` object in your `abby.config.ts`.
178+
179+
##### Return Value
180+
181+
The current value of the Remote Configuration variable. The type will be according to the specified type in the `abby.config.ts`
182+
183+
#### getABTestValue
184+
185+
`getABTestValue` is a function to access the users variant of an A/B Test. This can be called in a non-react scope.
186+
If the user is new, a random variant will be generated based on the weights, persisted in a cookie and returned.
187+
Otherwise the variant will be read from the cookie and returned.
188+
189+
##### Parameters
190+
191+
- `testName`: The name of the test, needs to be one of the defined tests.
192+
- `lookupObject`: An optional lookup object to automatically map the active variant to a custom value.
193+
194+
##### Return Values
195+
196+
The variant of the test or the looked up value if you provided a `lookupObject`
197+
198+
#### \_\_abby\_\_
199+
200+
`__abby__` is the Abby instance. It can be used to access the data of the current user.
201+
In most cases you will not need to use this.
202+
203+
#### withDevtools
204+
205+
`withDevtools` is a higher order function to wrap the Devtools from [`@tryabby/devtools`](/devtools) for usage within Reacts.
206+
207+
##### Parameters
208+
209+
The Devtools component from `@tryabby/devtools`
210+
211+
##### Example
212+
213+
```jsx
214+
import { AbbyDevTools } from "@tryabby/devtools";
215+
export const AbbyDevtools = withDevtools(AbbyDevTools);
216+
```
217+
218+
#### getAbbyData
219+
220+
A function used to get the required data to server side render the application with Abby.
221+
This should be called in the `loader` function one of your routes or inside of the root.
222+
223+
##### Example
224+
225+
```jsx
226+
import { AbbyProvider, getAbbyData } from "../lib/abby";
227+
228+
export const loader = async (ctx) => {
229+
return json({
230+
...(await getAbbyData(ctx)),
231+
});
232+
};
233+
```

0 commit comments

Comments
 (0)