@featureflare/react 0.0.1

package/README.md

@@ -0,0 +1,158 @@
+# @featureflare/react
+
+React hooks and provider for ShipIt feature flags.
+
+## Installation
+
+```bash
+npm install @featureflare/react
+# or
+pnpm add @featureflare/react
+# or
+yarn add @featureflare/react
+```
+
+**Peer Dependencies:**
+
+- `react >= 18`
+- `react-dom >= 18`
+
+## Usage
+
+### Setup Provider
+
+Wrap your app with `ShipItProvider`:
+
+```typescript
+import { ShipItProvider } from '@featureflare/react';
+
+export function App() {
+  return (
+    <ShipItProvider
+      config={{
+        // SDK automatically uses window.location.origin in browser
+        sdkKey: 'your-client-key-here' // Client key for browser
+      }}
+      initialUser={{ id: 'user-123' }}
+    >
+      {/* Your app */}
+    </ShipItProvider>
+  );
+}
+```
+
+### Read Flags
+
+Use the `useBoolFlag` hook to read boolean flags:
+
+```typescript
+import { useBoolFlag } from '@featureflare/react';
+
+export function NewNav() {
+  const { value, loading, error } = useBoolFlag('new-nav', false);
+  
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+  
+  return value ? <div>New nav ON</div> : <div>New nav OFF</div>;
+}
+```
+
+### Update User
+
+Use the `useShipItUser` hook to get and update the current user:
+
+```typescript
+import { useShipItUser } from '@featureflare/react';
+
+export function UserSwitcher() {
+  const [user, setUser] = useShipItUser();
+
+  return (
+    <button
+      onClick={() =>
+        setUser({
+          ...(user ?? { id: 'user-123' }),
+          meta: { ...(user?.meta ?? {}), companyId: 'northwind' }
+        })
+      }
+    >
+      Switch user
+    </button>
+  );
+}
+```
+
+## API Reference
+
+### `ShipItProvider`
+
+Provider component that wraps your app and provides the ShipIt client context.
+
+#### Props
+
+- `config: ShipItReactConfig` - Configuration object
+  - `sdkKey?: string` - Client SDK key (recommended). If not provided, reads from `SHIPIT_CLIENT_KEY` env var.
+  - `projectKey?: string` - Legacy: project key (requires `envKey`). Not recommended.
+  - `envKey?: string` - Environment key (default: `'production'`). Only used with `projectKey`.
+- `initialUser: ShipItUserPayload` - Initial user payload
+- `user?: ShipItUserPayload` - Controlled user (requires `onUserChange`)
+- `onUserChange?: (user: ShipItUserPayload) => void` - Callback for user changes (required if using controlled `user`)
+- `children: React.ReactNode` - Your app components
+
+### `useBoolFlag(flagKey: string, defaultValue: boolean)`
+
+Hook to evaluate a boolean feature flag.
+
+**Returns:**
+
+- `value: boolean` - The flag value
+- `loading: boolean` - Whether the evaluation is in progress
+- `error: Error | null` - Error if evaluation failed
+
+**Example:**
+
+```typescript
+const { value, loading, error } = useBoolFlag('feature-flag', false);
+```
+
+### `useShipItUser()`
+
+Hook to get and update the current user.
+
+**Returns:**
+
+`[user: ShipItUserPayload | null, setUser: (user: ShipItUserPayload) => void]`
+
+**Example:**
+
+```typescript
+const [user, setUser] = useShipItUser();
+```
+
+## Environment Variables
+
+The SDK automatically reads from environment variables if `sdkKey` is not provided:
+
+- `SHIPIT_CLIENT_KEY` - Client SDK key
+
+```typescript
+// This will use SHIPIT_CLIENT_KEY from env if sdkKey is not provided
+<ShipItProvider config={{}} initialUser={{ id: 'user-123' }}>
+  {/* ... */}
+</ShipItProvider>
+```
+
+## API Base URL
+
+The SDK automatically uses `window.location.origin` in the browser (assumes API is on same origin). The API URL cannot be overridden.
+
+## SDK Keys
+
+Use **client keys** for browser/mobile applications. Client keys are not secret and will be visible in your JavaScript bundle.
+
+Get your SDK keys from your ShipIt Console → Environments.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,148 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ShipItProvider: () => ShipItProvider,
+  useBoolFlag: () => useBoolFlag,
+  useBoolFlags: () => useBoolFlags,
+  useShipItContext: () => useShipItContext,
+  useShipItUser: () => useShipItUser
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = __toESM(require("react"), 1);
+var import_sdk_js = require("@featureflare/sdk-js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ShipItContext = (0, import_react.createContext)(null);
+function ShipItProvider(props) {
+  if (props.user && !props.onUserChange) {
+    throw new Error("ShipItProvider: when providing `user`, also provide `onUserChange` (controlled mode).");
+  }
+  const [internalUser, setInternalUser] = (0, import_react.useState)(props.initialUser);
+  const user = props.user ?? internalUser;
+  const setUser = props.onUserChange ?? setInternalUser;
+  const client = (0, import_react.useMemo)(() => {
+    return new import_sdk_js.ShipItClient({
+      sdkKey: props.config.sdkKey,
+      projectKey: props.config.projectKey,
+      envKey: props.config.envKey
+    });
+  }, [props.config.envKey, props.config.projectKey, props.config.sdkKey]);
+  const value = (0, import_react.useMemo)(() => ({ client, user, setUser }), [client, user]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShipItContext.Provider, { value, children: props.children });
+}
+function useShipItContext() {
+  const ctx = import_react.default.useContext(ShipItContext);
+  if (!ctx) throw new Error("useShipItContext must be used within <ShipItProvider>.");
+  return ctx;
+}
+
+// src/hooks.ts
+var import_react2 = require("react");
+function useShipItUser() {
+  const { user, setUser } = useShipItContext();
+  return [user, setUser];
+}
+function useBoolFlag(flagKey, defaultValue = false) {
+  const { client, user } = useShipItContext();
+  const [state, setState] = (0, import_react2.useState)({ value: defaultValue, loading: true, error: null });
+  const userId = user.id ?? user.key ?? "";
+  const key = (0, import_react2.useMemo)(() => `${flagKey}:${userId}`, [flagKey, userId]);
+  const lastKey = (0, import_react2.useRef)("");
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    const nextKey = key;
+    lastKey.current = nextKey;
+    setState((s) => ({ ...s, loading: true, error: null }));
+    (async () => {
+      try {
+        const v = await client.bool(flagKey, user, defaultValue);
+        if (cancelled) return;
+        if (lastKey.current !== nextKey) return;
+        setState({ value: v, loading: false, error: null });
+      } catch (e) {
+        if (cancelled) return;
+        if (lastKey.current !== nextKey) return;
+        const msg = e instanceof Error ? e.message : String(e);
+        setState({ value: defaultValue, loading: false, error: msg });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, defaultValue, flagKey, key, user]);
+  return state;
+}
+function useBoolFlags(flagKeys, defaultValue = false) {
+  const { client, user } = useShipItContext();
+  const sortedKeys = (0, import_react2.useMemo)(() => [...flagKeys].map((k) => k.trim()).filter(Boolean).sort(), [flagKeys]);
+  const userId = user.id ?? user.key ?? "";
+  const key = (0, import_react2.useMemo)(() => `${sortedKeys.join(",")}:${userId}`, [sortedKeys, userId]);
+  const [state, setState] = (0, import_react2.useState)({ values: {}, loading: true, errors: {} });
+  const lastKey = (0, import_react2.useRef)("");
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    const nextKey = key;
+    lastKey.current = nextKey;
+    setState({ values: {}, loading: true, errors: {} });
+    (async () => {
+      const values = {};
+      const errors = {};
+      await Promise.all(
+        sortedKeys.map(async (flagKey) => {
+          try {
+            values[flagKey] = await client.bool(flagKey, user, defaultValue);
+          } catch (e) {
+            values[flagKey] = defaultValue;
+            errors[flagKey] = e instanceof Error ? e.message : String(e);
+          }
+        })
+      );
+      if (cancelled) return;
+      if (lastKey.current !== nextKey) return;
+      setState({ values, loading: false, errors });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, defaultValue, key, sortedKeys, user]);
+  return state;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShipItProvider,
+  useBoolFlag,
+  useBoolFlags,
+  useShipItContext,
+  useShipItUser
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["export * from './provider.js';\nexport * from './hooks.js';\nexport type { ShipItUserPayload } from '@featureflare/sdk-js';\n","import React, { createContext, useMemo, useState } from 'react';\nimport { ShipItClient, type ShipItUserPayload } from '@featureflare/sdk-js';\n\ntype ShipItReactConfig = {\n  /** Recommended: use a client key (featureflare_cli_...). */\n  sdkKey?: string;\n  /** Legacy/insecure browser mode: uses /api/v1/eval (no sdkKey). */\n  projectKey?: string;\n  envKey?: string;\n};\n\ntype ShipItContextValue = {\n  client: ShipItClient;\n  user: ShipItUserPayload;\n  setUser: (next: ShipItUserPayload) => void;\n};\n\nconst ShipItContext = createContext<ShipItContextValue | null>(null);\n\nexport function ShipItProvider(props: {\n  config: ShipItReactConfig;\n  initialUser: ShipItUserPayload;\n  user?: ShipItUserPayload;\n  onUserChange?: (next: ShipItUserPayload) => void;\n  children: React.ReactNode;\n}) {\n  if (props.user && !props.onUserChange) {\n    throw new Error('ShipItProvider: when providing `user`, also provide `onUserChange` (controlled mode).');\n  }\n\n  const [internalUser, setInternalUser] = useState<ShipItUserPayload>(props.initialUser);\n  const user = props.user ?? internalUser;\n  const setUser = props.onUserChange ?? setInternalUser;\n\n  const client = useMemo(() => {\n    return new ShipItClient({\n      sdkKey: props.config.sdkKey,\n      projectKey: props.config.projectKey,\n      envKey: props.config.envKey\n    });\n  }, [props.config.envKey, props.config.projectKey, props.config.sdkKey]);\n\n  const value = useMemo(() => ({ client, user, setUser }), [client, user]);\n  return <ShipItContext.Provider value={value}>{props.children}</ShipItContext.Provider>;\n}\n\nexport function useShipItContext(): ShipItContextValue {\n  const ctx = React.useContext(ShipItContext);\n  if (!ctx) throw new Error('useShipItContext must be used within <ShipItProvider>.');\n  return ctx;\n}\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ShipItUserPayload } from '@featureflare/sdk-js';\nimport { useShipItContext } from './provider.js';\n\ntype BoolFlagState = {\n  value: boolean;\n  loading: boolean;\n  error: string | null;\n};\n\ntype BoolFlagsState = {\n  values: Record<string, boolean>;\n  loading: boolean;\n  errors: Record<string, string>;\n};\n\nexport function useShipItUser(): [ShipItUserPayload, (next: ShipItUserPayload) => void] {\n  const { user, setUser } = useShipItContext();\n  return [user, setUser];\n}\n\nexport function useBoolFlag(flagKey: string, defaultValue = false): BoolFlagState {\n  const { client, user } = useShipItContext();\n  const [state, setState] = useState<BoolFlagState>({ value: defaultValue, loading: true, error: null });\n  const userId = user.id ?? user.key ?? '';\n  const key = useMemo(() => `${flagKey}:${userId}`, [flagKey, userId]);\n  const lastKey = useRef<string>('');\n\n  useEffect(() => {\n    let cancelled = false;\n    const nextKey = key;\n    lastKey.current = nextKey;\n    setState((s) => ({ ...s, loading: true, error: null }));\n\n    (async () => {\n      try {\n        const v = await client.bool(flagKey, user, defaultValue);\n        if (cancelled) return;\n        if (lastKey.current !== nextKey) return;\n        setState({ value: v, loading: false, error: null });\n      } catch (e) {\n        if (cancelled) return;\n        if (lastKey.current !== nextKey) return;\n        const msg = e instanceof Error ? e.message : String(e);\n        setState({ value: defaultValue, loading: false, error: msg });\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [client, defaultValue, flagKey, key, user]);\n\n  return state;\n}\n\nexport function useBoolFlags(flagKeys: string[], defaultValue = false): BoolFlagsState {\n  const { client, user } = useShipItContext();\n  const sortedKeys = useMemo(() => [...flagKeys].map((k) => k.trim()).filter(Boolean).sort(), [flagKeys]);\n  const userId = user.id ?? user.key ?? '';\n  const key = useMemo(() => `${sortedKeys.join(',')}:${userId}`, [sortedKeys, userId]);\n  const [state, setState] = useState<BoolFlagsState>({ values: {}, loading: true, errors: {} });\n  const lastKey = useRef<string>('');\n\n  useEffect(() => {\n    let cancelled = false;\n    const nextKey = key;\n    lastKey.current = nextKey;\n    setState({ values: {}, loading: true, errors: {} });\n\n    (async () => {\n      const values: Record<string, boolean> = {};\n      const errors: Record<string, string> = {};\n      await Promise.all(\n        sortedKeys.map(async (flagKey) => {\n          try {\n            values[flagKey] = await client.bool(flagKey, user, defaultValue);\n          } catch (e) {\n            values[flagKey] = defaultValue;\n            errors[flagKey] = e instanceof Error ? e.message : String(e);\n          }\n        })\n      );\n\n      if (cancelled) return;\n      if (lastKey.current !== nextKey) return;\n      setState({ values, loading: false, errors });\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [client, defaultValue, key, sortedKeys, user]);\n\n  return state;\n}\n"],"mappings":"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","names":["React","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { ShipItUserPayload, ShipItClient } from '@featureflare/sdk-js';
+export { ShipItUserPayload } from '@featureflare/sdk-js';
+
+type ShipItReactConfig = {
+    /** Recommended: use a client key (featureflare_cli_...). */
+    sdkKey?: string;
+    /** Legacy/insecure browser mode: uses /api/v1/eval (no sdkKey). */
+    projectKey?: string;
+    envKey?: string;
+};
+type ShipItContextValue = {
+    client: ShipItClient;
+    user: ShipItUserPayload;
+    setUser: (next: ShipItUserPayload) => void;
+};
+declare function ShipItProvider(props: {
+    config: ShipItReactConfig;
+    initialUser: ShipItUserPayload;
+    user?: ShipItUserPayload;
+    onUserChange?: (next: ShipItUserPayload) => void;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useShipItContext(): ShipItContextValue;
+
+type BoolFlagState = {
+    value: boolean;
+    loading: boolean;
+    error: string | null;
+};
+type BoolFlagsState = {
+    values: Record<string, boolean>;
+    loading: boolean;
+    errors: Record<string, string>;
+};
+declare function useShipItUser(): [ShipItUserPayload, (next: ShipItUserPayload) => void];
+declare function useBoolFlag(flagKey: string, defaultValue?: boolean): BoolFlagState;
+declare function useBoolFlags(flagKeys: string[], defaultValue?: boolean): BoolFlagsState;
+
+export { ShipItProvider, useBoolFlag, useBoolFlags, useShipItContext, useShipItUser };

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { ShipItUserPayload, ShipItClient } from '@featureflare/sdk-js';
+export { ShipItUserPayload } from '@featureflare/sdk-js';
+
+type ShipItReactConfig = {
+    /** Recommended: use a client key (featureflare_cli_...). */
+    sdkKey?: string;
+    /** Legacy/insecure browser mode: uses /api/v1/eval (no sdkKey). */
+    projectKey?: string;
+    envKey?: string;
+};
+type ShipItContextValue = {
+    client: ShipItClient;
+    user: ShipItUserPayload;
+    setUser: (next: ShipItUserPayload) => void;
+};
+declare function ShipItProvider(props: {
+    config: ShipItReactConfig;
+    initialUser: ShipItUserPayload;
+    user?: ShipItUserPayload;
+    onUserChange?: (next: ShipItUserPayload) => void;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useShipItContext(): ShipItContextValue;
+
+type BoolFlagState = {
+    value: boolean;
+    loading: boolean;
+    error: string | null;
+};
+type BoolFlagsState = {
+    values: Record<string, boolean>;
+    loading: boolean;
+    errors: Record<string, string>;
+};
+declare function useShipItUser(): [ShipItUserPayload, (next: ShipItUserPayload) => void];
+declare function useBoolFlag(flagKey: string, defaultValue?: boolean): BoolFlagState;
+declare function useBoolFlags(flagKeys: string[], defaultValue?: boolean): BoolFlagsState;
+
+export { ShipItProvider, useBoolFlag, useBoolFlags, useShipItContext, useShipItUser };

package/dist/index.js

@@ -0,0 +1,107 @@
+// src/provider.tsx
+import React, { createContext, useMemo, useState } from "react";
+import { ShipItClient } from "@featureflare/sdk-js";
+import { jsx } from "react/jsx-runtime";
+var ShipItContext = createContext(null);
+function ShipItProvider(props) {
+  if (props.user && !props.onUserChange) {
+    throw new Error("ShipItProvider: when providing `user`, also provide `onUserChange` (controlled mode).");
+  }
+  const [internalUser, setInternalUser] = useState(props.initialUser);
+  const user = props.user ?? internalUser;
+  const setUser = props.onUserChange ?? setInternalUser;
+  const client = useMemo(() => {
+    return new ShipItClient({
+      sdkKey: props.config.sdkKey,
+      projectKey: props.config.projectKey,
+      envKey: props.config.envKey
+    });
+  }, [props.config.envKey, props.config.projectKey, props.config.sdkKey]);
+  const value = useMemo(() => ({ client, user, setUser }), [client, user]);
+  return /* @__PURE__ */ jsx(ShipItContext.Provider, { value, children: props.children });
+}
+function useShipItContext() {
+  const ctx = React.useContext(ShipItContext);
+  if (!ctx) throw new Error("useShipItContext must be used within <ShipItProvider>.");
+  return ctx;
+}
+
+// src/hooks.ts
+import { useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+function useShipItUser() {
+  const { user, setUser } = useShipItContext();
+  return [user, setUser];
+}
+function useBoolFlag(flagKey, defaultValue = false) {
+  const { client, user } = useShipItContext();
+  const [state, setState] = useState2({ value: defaultValue, loading: true, error: null });
+  const userId = user.id ?? user.key ?? "";
+  const key = useMemo2(() => `${flagKey}:${userId}`, [flagKey, userId]);
+  const lastKey = useRef("");
+  useEffect(() => {
+    let cancelled = false;
+    const nextKey = key;
+    lastKey.current = nextKey;
+    setState((s) => ({ ...s, loading: true, error: null }));
+    (async () => {
+      try {
+        const v = await client.bool(flagKey, user, defaultValue);
+        if (cancelled) return;
+        if (lastKey.current !== nextKey) return;
+        setState({ value: v, loading: false, error: null });
+      } catch (e) {
+        if (cancelled) return;
+        if (lastKey.current !== nextKey) return;
+        const msg = e instanceof Error ? e.message : String(e);
+        setState({ value: defaultValue, loading: false, error: msg });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, defaultValue, flagKey, key, user]);
+  return state;
+}
+function useBoolFlags(flagKeys, defaultValue = false) {
+  const { client, user } = useShipItContext();
+  const sortedKeys = useMemo2(() => [...flagKeys].map((k) => k.trim()).filter(Boolean).sort(), [flagKeys]);
+  const userId = user.id ?? user.key ?? "";
+  const key = useMemo2(() => `${sortedKeys.join(",")}:${userId}`, [sortedKeys, userId]);
+  const [state, setState] = useState2({ values: {}, loading: true, errors: {} });
+  const lastKey = useRef("");
+  useEffect(() => {
+    let cancelled = false;
+    const nextKey = key;
+    lastKey.current = nextKey;
+    setState({ values: {}, loading: true, errors: {} });
+    (async () => {
+      const values = {};
+      const errors = {};
+      await Promise.all(
+        sortedKeys.map(async (flagKey) => {
+          try {
+            values[flagKey] = await client.bool(flagKey, user, defaultValue);
+          } catch (e) {
+            values[flagKey] = defaultValue;
+            errors[flagKey] = e instanceof Error ? e.message : String(e);
+          }
+        })
+      );
+      if (cancelled) return;
+      if (lastKey.current !== nextKey) return;
+      setState({ values, loading: false, errors });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, defaultValue, key, sortedKeys, user]);
+  return state;
+}
+export {
+  ShipItProvider,
+  useBoolFlag,
+  useBoolFlags,
+  useShipItContext,
+  useShipItUser
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import React, { createContext, useMemo, useState } from 'react';\nimport { ShipItClient, type ShipItUserPayload } from '@featureflare/sdk-js';\n\ntype ShipItReactConfig = {\n  /** Recommended: use a client key (featureflare_cli_...). */\n  sdkKey?: string;\n  /** Legacy/insecure browser mode: uses /api/v1/eval (no sdkKey). */\n  projectKey?: string;\n  envKey?: string;\n};\n\ntype ShipItContextValue = {\n  client: ShipItClient;\n  user: ShipItUserPayload;\n  setUser: (next: ShipItUserPayload) => void;\n};\n\nconst ShipItContext = createContext<ShipItContextValue | null>(null);\n\nexport function ShipItProvider(props: {\n  config: ShipItReactConfig;\n  initialUser: ShipItUserPayload;\n  user?: ShipItUserPayload;\n  onUserChange?: (next: ShipItUserPayload) => void;\n  children: React.ReactNode;\n}) {\n  if (props.user && !props.onUserChange) {\n    throw new Error('ShipItProvider: when providing `user`, also provide `onUserChange` (controlled mode).');\n  }\n\n  const [internalUser, setInternalUser] = useState<ShipItUserPayload>(props.initialUser);\n  const user = props.user ?? internalUser;\n  const setUser = props.onUserChange ?? setInternalUser;\n\n  const client = useMemo(() => {\n    return new ShipItClient({\n      sdkKey: props.config.sdkKey,\n      projectKey: props.config.projectKey,\n      envKey: props.config.envKey\n    });\n  }, [props.config.envKey, props.config.projectKey, props.config.sdkKey]);\n\n  const value = useMemo(() => ({ client, user, setUser }), [client, user]);\n  return <ShipItContext.Provider value={value}>{props.children}</ShipItContext.Provider>;\n}\n\nexport function useShipItContext(): ShipItContextValue {\n  const ctx = React.useContext(ShipItContext);\n  if (!ctx) throw new Error('useShipItContext must be used within <ShipItProvider>.');\n  return ctx;\n}\n","import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ShipItUserPayload } from '@featureflare/sdk-js';\nimport { useShipItContext } from './provider.js';\n\ntype BoolFlagState = {\n  value: boolean;\n  loading: boolean;\n  error: string | null;\n};\n\ntype BoolFlagsState = {\n  values: Record<string, boolean>;\n  loading: boolean;\n  errors: Record<string, string>;\n};\n\nexport function useShipItUser(): [ShipItUserPayload, (next: ShipItUserPayload) => void] {\n  const { user, setUser } = useShipItContext();\n  return [user, setUser];\n}\n\nexport function useBoolFlag(flagKey: string, defaultValue = false): BoolFlagState {\n  const { client, user } = useShipItContext();\n  const [state, setState] = useState<BoolFlagState>({ value: defaultValue, loading: true, error: null });\n  const userId = user.id ?? user.key ?? '';\n  const key = useMemo(() => `${flagKey}:${userId}`, [flagKey, userId]);\n  const lastKey = useRef<string>('');\n\n  useEffect(() => {\n    let cancelled = false;\n    const nextKey = key;\n    lastKey.current = nextKey;\n    setState((s) => ({ ...s, loading: true, error: null }));\n\n    (async () => {\n      try {\n        const v = await client.bool(flagKey, user, defaultValue);\n        if (cancelled) return;\n        if (lastKey.current !== nextKey) return;\n        setState({ value: v, loading: false, error: null });\n      } catch (e) {\n        if (cancelled) return;\n        if (lastKey.current !== nextKey) return;\n        const msg = e instanceof Error ? e.message : String(e);\n        setState({ value: defaultValue, loading: false, error: msg });\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [client, defaultValue, flagKey, key, user]);\n\n  return state;\n}\n\nexport function useBoolFlags(flagKeys: string[], defaultValue = false): BoolFlagsState {\n  const { client, user } = useShipItContext();\n  const sortedKeys = useMemo(() => [...flagKeys].map((k) => k.trim()).filter(Boolean).sort(), [flagKeys]);\n  const userId = user.id ?? user.key ?? '';\n  const key = useMemo(() => `${sortedKeys.join(',')}:${userId}`, [sortedKeys, userId]);\n  const [state, setState] = useState<BoolFlagsState>({ values: {}, loading: true, errors: {} });\n  const lastKey = useRef<string>('');\n\n  useEffect(() => {\n    let cancelled = false;\n    const nextKey = key;\n    lastKey.current = nextKey;\n    setState({ values: {}, loading: true, errors: {} });\n\n    (async () => {\n      const values: Record<string, boolean> = {};\n      const errors: Record<string, string> = {};\n      await Promise.all(\n        sortedKeys.map(async (flagKey) => {\n          try {\n            values[flagKey] = await client.bool(flagKey, user, defaultValue);\n          } catch (e) {\n            values[flagKey] = defaultValue;\n            errors[flagKey] = e instanceof Error ? e.message : String(e);\n          }\n        })\n      );\n\n      if (cancelled) return;\n      if (lastKey.current !== nextKey) return;\n      setState({ values, loading: false, errors });\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [client, defaultValue, key, sortedKeys, user]);\n\n  return state;\n}\n"],"mappings":"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","names":["useMemo","useState","useState","useMemo"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@featureflare/react",
+  "version": "0.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint .",
+    "format": "prettier -w ."
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@featureflare/sdk-js": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.16.0",
+    "prettier": "^3.4.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.17.0"
+  }
+}