@flipt-io/flipt-client-js 0.0.1-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +187 -0
- package/dist/browser/flipt_engine_wasm_js.d.ts +53 -0
- package/dist/browser/flipt_engine_wasm_js.js +607 -0
- package/dist/browser/flipt_engine_wasm_js_bg.wasm +0 -0
- package/dist/browser/flipt_engine_wasm_js_bg.wasm.d.ts +18 -0
- package/dist/browser/index.cjs +882 -0
- package/dist/browser/index.cjs.map +1 -0
- package/dist/browser/index.mjs +879 -0
- package/dist/browser/index.mjs.map +1 -0
- package/dist/node/flipt_engine_wasm_js.d.ts +53 -0
- package/dist/node/flipt_engine_wasm_js.js +607 -0
- package/dist/node/flipt_engine_wasm_js_bg.wasm +0 -0
- package/dist/node/flipt_engine_wasm_js_bg.wasm.d.ts +18 -0
- package/dist/node/index.cjs +905 -0
- package/dist/node/index.cjs.map +1 -0
- package/dist/node/index.mjs +902 -0
- package/dist/node/index.mjs.map +1 -0
- package/dist/types/browser/index.d.ts +11 -0
- package/dist/types/core/base.d.ts +38 -0
- package/dist/types/core/types.d.ts +248 -0
- package/dist/types/core/utils.d.ts +4 -0
- package/dist/types/node/index.d.ts +15 -0
- package/package.json +84 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Flipt Software Inc.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
# Flipt Client JS
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@flipt-io/flipt-client-js)
|
|
4
|
+
|
|
5
|
+
The `flipt-client-js` library contains the JavaScript/TypeScript client for Flipt [client-side evaluation](https://www.flipt.io/docs/integration/client) in web and Node.js environments. It supports:
|
|
6
|
+
|
|
7
|
+
- Node.js
|
|
8
|
+
- Browsers
|
|
9
|
+
- Edge Functions (Vercel Edge, Cloudflare Workers, etc.)
|
|
10
|
+
- Web Workers
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @flipt-io/flipt-client-js
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { FliptClient } from '@flipt-io/flipt-client-js';
|
|
22
|
+
|
|
23
|
+
const client = await FliptClient.init('default', {
|
|
24
|
+
url: 'http://localhost:8080',
|
|
25
|
+
authentication: {
|
|
26
|
+
clientToken: 'secret'
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
const variant = client.evaluateVariant('flag1', 'someentity', {
|
|
31
|
+
fizz: 'buzz'
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
console.log(variant);
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Edge Function Usage (e.g., Vercel Edge)
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { FliptClient } from '@flipt-io/flipt-client-js';
|
|
41
|
+
|
|
42
|
+
export const config = {
|
|
43
|
+
runtime: 'edge'
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export default async function middleware(req) {
|
|
47
|
+
const client = await FliptClient.init('default', {
|
|
48
|
+
url: process.env.FLIPT_URL,
|
|
49
|
+
authentication: {
|
|
50
|
+
clientToken: process.env.FLIPT_AUTH_TOKEN
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
const result = client.evaluateBoolean('my-flag', 'user-123', {
|
|
55
|
+
country: 'US'
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
if (result.enabled) {
|
|
59
|
+
return new Response('Feature enabled!');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return new Response('Feature disabled');
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Initialization Arguments
|
|
67
|
+
|
|
68
|
+
The `FliptClient` constructor accepts two optional arguments:
|
|
69
|
+
|
|
70
|
+
- `namespace`: The namespace to fetch flag state from. If not provided, the client will default to the `default` namespace.
|
|
71
|
+
- `options`: An instance of the `ClientOptions` type that supports several options for the client. The structure is:
|
|
72
|
+
- `url`: The URL of the upstream Flipt instance. If not provided, the client will default to `http://localhost:8080`.
|
|
73
|
+
- `updateInterval`: **Node.js Only** The interval (in seconds) in which to fetch new flag state. If not provided, the client will default to 120 seconds.
|
|
74
|
+
- `authentication`: The authentication strategy to use when communicating with the upstream Flipt instance. If not provided, the client will default to no authentication. See the [Authentication](#authentication) section for more information.
|
|
75
|
+
- `reference`: The [reference](https://docs.flipt.io/guides/user/using-references) to use when fetching flag state. If not provided, reference will not be used.
|
|
76
|
+
- `fetcher`: An implementation of a [fetcher](https://github.com/flipt-io/flipt-client-sdks/blob/4821cb227c6c8b10419b96674d44ad1d6668a647/flipt-client-browser/src/models.ts#L5) interface to use when requesting flag state. If not provided, a default fetcher using the browser's [`fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) will be used.
|
|
77
|
+
- `errorStrategy`: The error strategy to use when fetching flag state. If not provided, the client will default to fail. See the [Error Strategies](#error-strategies) section for more information.
|
|
78
|
+
|
|
79
|
+
### Authentication
|
|
80
|
+
|
|
81
|
+
The `FliptClient` supports the following authentication strategies:
|
|
82
|
+
|
|
83
|
+
- No Authentication (default)
|
|
84
|
+
- [Client Token Authentication](https://docs.flipt.io/authentication/using-tokens)
|
|
85
|
+
- [JWT Authentication](https://docs.flipt.io/authentication/using-jwts)
|
|
86
|
+
|
|
87
|
+
### Error Strategies
|
|
88
|
+
|
|
89
|
+
The client `errorStrategy` option supports the following error strategies:
|
|
90
|
+
|
|
91
|
+
- `fail`: The client will throw an error if the flag state cannot be fetched. This is the default behavior.
|
|
92
|
+
- `fallback`: The client will maintain the last known good state and use that state for evaluation in case of an error.
|
|
93
|
+
|
|
94
|
+
### Custom Fetcher
|
|
95
|
+
|
|
96
|
+
The `FliptClient` supports custom fetchers. This allows you to fetch flag state from a custom source or override HTTP headers.
|
|
97
|
+
|
|
98
|
+
The fetcher can be passed in as an argument to the `FliptClient` initializer function.
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
const client = await FliptClient.init('default', {
|
|
102
|
+
url: 'http://localhost:8080',
|
|
103
|
+
authentication: {
|
|
104
|
+
clientToken
|
|
105
|
+
},
|
|
106
|
+
fetcher: customFetcher
|
|
107
|
+
});
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
The fetcher is a function that takes an optional [`IFetcherOpts`](https://github.com/flipt-io/flipt-client-sdks/blob/4821cb227c6c8b10419b96674d44ad1d6668a647/flipt-client-browser/src/models.ts#L1) argument and returns a `Promise` that resolves to a `Response` object.
|
|
111
|
+
|
|
112
|
+
## State Management
|
|
113
|
+
|
|
114
|
+
The `FliptClient` class pulls flag state from the Flipt instance at the `url` provided in the `options` object on instantiation.
|
|
115
|
+
|
|
116
|
+
To update the flag state, you can call the `refresh` method on the `FliptClient` class.
|
|
117
|
+
|
|
118
|
+
> [!NOTE]
|
|
119
|
+
> The `refresh` method returns a boolean indicating whether the flag state changed.
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
// Refresh the flag state
|
|
123
|
+
let changed = await client.refresh();
|
|
124
|
+
|
|
125
|
+
if (changed) {
|
|
126
|
+
// Do something
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Auto-Refresh (Node.js Only)
|
|
131
|
+
|
|
132
|
+
The `FliptClient` class supports auto-refreshing flag state.
|
|
133
|
+
|
|
134
|
+
To enable auto-refreshing, you can pass the `updateInterval` option to the `FliptClient` initializer function. Under the hood this uses a timer to fetch new flag state at a regular interval.
|
|
135
|
+
|
|
136
|
+
> [!NOTE]
|
|
137
|
+
> The `updateInterval` option is only supported in Node.js environments.
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
const client = await FliptClient.init('default', {
|
|
141
|
+
url: 'http://localhost:8080',
|
|
142
|
+
updateInterval: 30 // refresh every 30 seconds
|
|
143
|
+
});
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Make sure to call the `close` method on the `FliptClient` class once you are done using it to stop the timer and clean up resources.
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
client.close();
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## ETag Support
|
|
153
|
+
|
|
154
|
+
The default fetcher uses [ETag HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag) to reduce the number of requests to the Flipt instance. This is useful in scenarios where the flag state is not frequently updated and you want to reduce the load on the server.
|
|
155
|
+
|
|
156
|
+
To disable ETag support, you can implement a [custom fetcher](#custom-fetcher) that does not use ETags.
|
|
157
|
+
|
|
158
|
+
## Development
|
|
159
|
+
|
|
160
|
+
### WASM
|
|
161
|
+
|
|
162
|
+
This library uses a WebAssembly (WASM) layer to interact with the Flipt server. It is written in Rust and exposes a JavaScript API using the `wasm-bindgen` and `wasm-pack` tools. We wrap the built WASM layer in a JavaScript API to make it easier to use in a web environment.
|
|
163
|
+
|
|
164
|
+
### Prerequisites
|
|
165
|
+
|
|
166
|
+
- [flipt-engine-wasm-js](../flipt-engine-wasm-js)
|
|
167
|
+
|
|
168
|
+
### Build
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
npm run build
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Test
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
npm install
|
|
178
|
+
npm test
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## Contributing
|
|
182
|
+
|
|
183
|
+
Contributions are welcome! Please feel free to open an issue or submit a Pull Request.
|
|
184
|
+
|
|
185
|
+
## License
|
|
186
|
+
|
|
187
|
+
This project is licensed under the [MIT License](LICENSE).
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/* tslint:disable */
|
|
2
|
+
/* eslint-disable */
|
|
3
|
+
export class Engine {
|
|
4
|
+
free(): void;
|
|
5
|
+
constructor(namespace: string);
|
|
6
|
+
snapshot(data: any): void;
|
|
7
|
+
evaluate_boolean(request: any): any;
|
|
8
|
+
evaluate_variant(request: any): any;
|
|
9
|
+
evaluate_batch(request: any): any;
|
|
10
|
+
list_flags(): any;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
|
|
14
|
+
|
|
15
|
+
export interface InitOutput {
|
|
16
|
+
readonly memory: WebAssembly.Memory;
|
|
17
|
+
readonly __wbg_engine_free: (a: number, b: number) => void;
|
|
18
|
+
readonly engine_new: (a: number, b: number) => number;
|
|
19
|
+
readonly engine_snapshot: (a: number, b: any) => [number, number];
|
|
20
|
+
readonly engine_evaluate_boolean: (a: number, b: any) => [number, number, number];
|
|
21
|
+
readonly engine_evaluate_variant: (a: number, b: any) => [number, number, number];
|
|
22
|
+
readonly engine_evaluate_batch: (a: number, b: any) => [number, number, number];
|
|
23
|
+
readonly engine_list_flags: (a: number) => [number, number, number];
|
|
24
|
+
readonly __wbindgen_malloc: (a: number, b: number) => number;
|
|
25
|
+
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
|
|
26
|
+
readonly __wbindgen_exn_store: (a: number) => void;
|
|
27
|
+
readonly __externref_table_alloc: () => number;
|
|
28
|
+
readonly __wbindgen_export_4: WebAssembly.Table;
|
|
29
|
+
readonly __wbindgen_free: (a: number, b: number, c: number) => void;
|
|
30
|
+
readonly __externref_table_dealloc: (a: number) => void;
|
|
31
|
+
readonly __wbindgen_start: () => void;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export type SyncInitInput = BufferSource | WebAssembly.Module;
|
|
35
|
+
/**
|
|
36
|
+
* Instantiates the given `module`, which can either be bytes or
|
|
37
|
+
* a precompiled `WebAssembly.Module`.
|
|
38
|
+
*
|
|
39
|
+
* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
|
|
40
|
+
*
|
|
41
|
+
* @returns {InitOutput}
|
|
42
|
+
*/
|
|
43
|
+
export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
|
|
47
|
+
* for everything else, calls `WebAssembly.instantiate` directly.
|
|
48
|
+
*
|
|
49
|
+
* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
|
|
50
|
+
*
|
|
51
|
+
* @returns {Promise<InitOutput>}
|
|
52
|
+
*/
|
|
53
|
+
export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;
|