@flipt-io/flipt-client-js 0.0.1 → 0.0.3

package/README.md

@@ -39,40 +39,6 @@ const variant = client.evaluateVariant({
 console.log(variant);
 ```
 
-### Edge Function Usage (e.g., Vercel Edge)
-
-```typescript
-import { FliptClient } from '@flipt-io/flipt-client-js';
-
-export const config = {
-  runtime: 'edge'
-};
-
-export default async function middleware(req) {
-  const client = await FliptClient.init({
-    namespace: 'default',
-    url: process.env.FLIPT_URL,
-    authentication: {
-      clientToken: process.env.FLIPT_AUTH_TOKEN
-    }
-  });
-
-  const result = client.evaluateBoolean({
-    flagKey: 'my-flag',
-    entityId: 'user-123',
-    context: {
-      country: 'US'
-    }
-  });
-
-  if (result.enabled) {
-    return new Response('Feature enabled!');
-  }
-
-  return new Response('Feature disabled');
-}
-```
-
 ### Initialization Arguments
 
 The `FliptClient` constructor accepts the following optional arguments:
@@ -83,7 +49,7 @@ The `FliptClient` constructor accepts the following optional arguments:
   - `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.
   - `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.
   - `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.
-  - `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.
+  - `fetcher`: An implementation of a [fetcher](https://github.com/flipt-io/flipt-client-sdks/blob/d0869dc9f6b3a65052712926b88fa0f9b18defaa/flipt-client-js/src/core/types.ts#L60-L62) 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.
   - `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.
 
 ### Authentication
@@ -118,7 +84,7 @@ const client = await FliptClient.init({
 });
 ```
 
-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.
+The fetcher is a function that takes an optional [`IFetcherOpts`](https://github.com/flipt-io/flipt-client-sdks/blob/d0869dc9f6b3a65052712926b88fa0f9b18defaa/flipt-client-js/src/core/types.ts#L50-L55) argument and returns a `Promise` that resolves to a `Response` object.
 
 ## State Management
 
@@ -167,6 +133,128 @@ The default fetcher uses [ETag HTTP headers](https://developer.mozilla.org/en-US
 
 To disable ETag support, you can implement a [custom fetcher](#custom-fetcher) that does not use ETags.
 
+## Slim Module
+
+For environments like Cloudflare Workers where WebAssembly.compile is not supported, we provide a "slim" version of the client that allows you to explicitly provide the WASM module.
+
+### Using the Slim Client
+
+The slim client requires you to explicitly provide the WASM module when initializing the client. This gives you more control over how the WASM is loaded, which is essential for edge environments with specific limitations.
+
+#### Direct Import (Recommended)
+
+The simplest approach is to directly import the WASM file using the package export path:
+
+```js
+// Works in all environments (Node.js, browsers, edge functions)
+import { FliptClient } from '@flipt-io/flipt-client-js/slim';
+import wasm from '@flipt-io/flipt-client-js/engine.wasm';
+
+const client = await FliptClient.init(
+  {
+    namespace: 'default',
+    url: 'https://flipt.example.com'
+  },
+  { wasm }
+);
+
+// Use the client as normal
+const result = client.evaluateBoolean({
+  flagKey: 'my-flag',
+  entityId: 'user-123',
+  context: { country: 'US' }
+});
+```
+
+#### Cloudflare Workers Example
+
+When using Cloudflare Workers with Webpack or a similar bundler:
+
+```js
+import { FliptClient } from '@flipt-io/flipt-client-js/slim';
+import wasm from '@flipt-io/flipt-client-js/engine.wasm';
+
+export default {
+  async fetch(request, env, ctx) {
+    // Initialize the client with the WASM module
+    const client = await FliptClient.init(
+      {
+        namespace: 'default',
+        url: 'https://flipt.example.com'
+      },
+      { wasm }
+    );
+
+    // Use the client as normal
+    const result = client.evaluateBoolean({
+      flagKey: 'my-flag',
+      entityId: 'user-123',
+      context: { country: 'US' }
+    });
+
+    return new Response(result.enabled ? 'Flag enabled' : 'Flag disabled');
+  }
+};
+```
+
+#### Next.js Edge Runtime Example
+
+Using the slim client with Next.js Edge Runtime (middleware or edge API routes):
+
+```js
+// middleware.js or an Edge API Route
+import { FliptClient } from '@flipt-io/flipt-client-js/slim';
+import wasm from '@flipt-io/flipt-client-js/engine.wasm';
+import { NextResponse } from 'next/server';
+
+export const config = {
+  runtime: 'edge'
+};
+
+export default async function middleware(req) {
+  // Initialize the client with the WASM module
+  const client = await FliptClient.init(
+    {
+      namespace: 'default',
+      url: process.env.FLIPT_URL || 'https://flipt.example.com',
+      authentication: {
+        clientToken: process.env.FLIPT_TOKEN
+      }
+    },
+    { wasm }
+  );
+
+  // Use the client to evaluate a flag
+  const result = client.evaluateBoolean({
+    flagKey: 'my-edge-feature',
+    entityId: 'user-123',
+    context: {
+      path: req.nextUrl.pathname,
+      country: req.geo?.country || 'unknown'
+    }
+  });
+
+  // Use the flag result to make decisions
+  if (result.enabled) {
+    if (req.nextUrl.pathname.startsWith('/api/')) {
+      // For API routes, modify the response
+      return new Response(JSON.stringify({ featureEnabled: true }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    } else {
+      // For page routes, redirect or rewrite
+      const url = req.nextUrl.clone();
+      url.pathname = '/new-experience';
+      return NextResponse.rewrite(url);
+    }
+  }
+
+  // Continue normal request handling
+  return NextResponse.next();
+}
+```
+
 ## Development
 
 ### WASM