npm - flagmint-react-sdk - Versions diffs - 0.1.0 → 0.3.0 - Mend

flagmint-react-sdk 0.1.0 → 0.3.0

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.

Files changed (10) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,609 @@
+# flagmint-react-sdk
+A React wrapper for [flagmint-js-sdk](https://www.npmjs.com/package/flagmint-js-sdk) that provides React-specific hooks and context with fine-grained reactivity powered by Zustand.
+## ✨ Features
+- 🎯 **Fine-grained reactivity** - Only components using specific flags re-render when those flags change
+- 🚀 **SSR-safe** - No global state leakage between server requests
+- 📦 **TypeScript support** - Full type safety with generics for flag values and context
+- 🔀 **Dual export strategy** - Separate server-safe types and client-only hooks
+- ⚡ **Auto-initialization** - Direct integration with FlagClient from flagmint-js-sdk
+- 🔐 **Deferred initialization** - Perfect for authentication flows
+- 📱 **Framework agnostic** - Works with Next.js, Remix, Vite, and more
+## 📦 Installation
+```bash
+npm install react-flagmint flagmint-js-sdk
+# or
+pnpm add react-flagmint flagmint-js-sdk
+# or
+yarn add react-flagmint flagmint-js-sdk
+```
+## 🚀 Quick Start
+### 1. Basic Setup
+```tsx
+// app/providers.tsx (Next.js App Router)
+'use client'
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: process.env.NEXT_PUBLIC_FLAGMINT_API_KEY!,
+        transportMode: 'websocket',
+        context: {
+          userId: 'user-123',
+          plan: 'premium'
+        }
+      }}
+    >
+      {children}
+    </FlagmintProvider>
+  )
+}
+```
+```tsx
+// app/layout.tsx
+import Providers from './providers'
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  )
+}
+```
+### 2. Using Flags in Components
+```tsx
+// components/FeatureComponent.tsx
+'use client'
+import { useFlag, useFlags, useFlagmintReady } from 'react-flagmint/client'
+export default function FeatureComponent() {
+  const showNewFeature = useFlag('new-dashboard', false)
+  const userPlan = useFlag('user-plan', 'free')
+  const isReady = useFlagmintReady()
+  if (!isReady) {
+    return <div>Loading flags...</div>
+  }
+  return (
+    <div>
+      {showNewFeature && <NewDashboard />}
+      <div>Current plan: {userPlan}</div>
+    </div>
+  )
+}
+```
+## 📚 API Reference
+### FlagmintProvider
+The provider component that initializes the FlagClient and provides flag context to your app.
+```tsx
+<FlagmintProvider
+  options={FlagClientOptions}
+  initialFlags={{}}
+  deferInitialization={false}
+>
+  {children}
+</FlagmintProvider>
+```
+#### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `FlagClientOptions` | Required | Configuration for the FlagClient |
+| `initialFlags` | `Flags` | `{}` | Initial flag values for SSR/hydration |
+| `deferInitialization` | `boolean` | `false` | If true, wait for manual initialization |
+#### FlagClientOptions
+```tsx
+interface FlagClientOptions<C extends Record<string, any> = Record<string, any>> {
+  apiKey: string
+  context?: C
+  transportMode?: 'auto' | 'websocket' | 'long-polling'
+  enableOfflineCache?: boolean
+  persistContext?: boolean
+  onError?: (error: Error) => void
+  previewMode?: boolean
+  rawFlags?: Record<string, FlagValue>
+  deferInitialization?: boolean
+}
+```
+### Hooks
+#### useFlag(key, fallback?)
+Get a specific flag value with fine-grained reactivity.
+```tsx
+const showFeature = useFlag('feature-name', false)
+const userTier = useFlag('user-tier', 'free')
+const config = useFlag('app-config', { theme: 'light' })
+```
+**Parameters:**
+- `key: string` - The flag key
+- `fallback?: T` - Default value if flag is not found
+**Returns:** The flag value or fallback
+#### useFlags()
+Get all currently loaded flags.
+```tsx
+const allFlags = useFlags()
+console.log(allFlags) // { 'feature-a': true, 'user-tier': 'pro' }
+```
+**Returns:** Object containing all loaded flags
+#### useFlagmint()
+Get access to the FlagClient instance and utilities.
+```tsx
+const { client, isReady, isInitialized, updateContext } = useFlagmint()
+// Update user context
+await updateContext({ userId: 'new-user', plan: 'enterprise' })
+```
+**Returns:**
+```tsx
+{
+  client: FlagClient | null
+  isReady: boolean
+  isInitialized: boolean
+  updateContext: (context: Record<string, any>) => Promise<void>
+}
+```
+#### useFlagmintReady()
+Check if the FlagClient is ready to serve flags.
+```tsx
+const isReady = useFlagmintReady()
+if (!isReady) {
+  return <LoadingSpinner />
+}
+```
+#### useFlagClient()
+Get direct access to the FlagClient instance.
+```tsx
+const client = useFlagClient<MyFlagTypes>()
+const specificFlag = client?.getFlag('feature-x', false)
+```
+## 🔧 Usage Patterns
+### 1. Auto-initialization (Default)
+Best when user context is available immediately:
+```tsx
+function App() {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: 'your-api-key',
+        context: {
+          userId: getCurrentUser().id,
+          plan: getCurrentUser().plan
+        }
+      }}
+    >
+      <Dashboard />
+    </FlagmintProvider>
+  )
+}
+```
+### 2. Deferred Initialization
+Perfect for authentication flows:
+```tsx
+// Provider with deferred initialization
+<FlagmintProvider
+  options={{
+    apiKey: 'your-api-key',
+    context: {} // Empty initially
+  }}
+  deferInitialization={true}
+>
+  <App />
+</FlagmintProvider>
+// Login component
+function LoginPage() {
+  const { updateContext } = useFlagmint()
+  const handleLogin = async (user) => {
+    // First update context with user info
+    await updateContext({
+      userId: user.id,
+      plan: user.plan,
+      locale: user.locale
+    })
+    // Flags are now available with user context
+    navigate('/dashboard')
+  }
+  return <LoginForm onLogin={handleLogin} />
+}
+```
+### 3. TypeScript Usage
+Define your flag types for better type safety:
+```tsx
+// types/flags.ts
+export interface AppFlags {
+  'show-beta-feature': boolean
+  'user-plan': 'free' | 'pro' | 'enterprise'
+  'theme-config': {
+    primaryColor: string
+    darkMode: boolean
+  }
+}
+export interface UserContext {
+  userId: string
+  plan: string
+  locale: string
+}
+// components/TypedComponent.tsx
+import { useFlag } from 'react-flagmint/client'
+import type { AppFlags } from '../types/flags'
+export default function TypedComponent() {
+  // TypeScript knows this returns boolean
+  const showBeta = useFlag<AppFlags['show-beta-feature']>('show-beta-feature', false)
+  // TypeScript knows this returns the union type
+  const plan = useFlag<AppFlags['user-plan']>('user-plan', 'free')
+  return (
+    <div>
+      {showBeta && <BetaFeature />}
+      <div>Plan: {plan}</div>
+    </div>
+  )
+}
+```
+### 4. Server-Side Rendering (SSR)
+#### Next.js App Router
+```tsx
+// app/providers.tsx
+'use client'
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function Providers({ children, initialFlags = {} }) {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: process.env.NEXT_PUBLIC_FLAGMINT_API_KEY!,
+        transportMode: 'websocket'
+      }}
+      initialFlags={initialFlags}
+    >
+      {children}
+    </FlagmintProvider>
+  )
+}
+// app/page.tsx
+import { FlagClient } from 'flagmint-js-sdk'
+import Providers from './providers'
+import ClientComponent from './ClientComponent'
+export default async function Page() {
+  // Optionally preload flags on server
+  let initialFlags = {}
+  try {
+    const serverClient = new FlagClient({
+      apiKey: process.env.FLAGMINT_API_KEY!,
+      context: { server: true }
+    })
+    await serverClient.ready()
+    initialFlags = await serverClient.getFlags() // If this method exists
+  } catch (error) {
+    console.warn('Failed to load initial flags:', error)
+  }
+  return (
+    <Providers initialFlags={initialFlags}>
+      <ClientComponent />
+    </Providers>
+  )
+}
+```
+### 5. Context Updates
+Update user context dynamically:
+```tsx
+function UserSettings() {
+  const { updateContext } = useFlagmint()
+  const currentTheme = useFlag('user-theme', 'light')
+  const handleThemeChange = async (newTheme: string) => {
+    // Update context - flags will be re-evaluated
+    await updateContext({ theme: newTheme })
+  }
+  const handlePlanUpgrade = async (newPlan: string) => {
+    await updateContext({ plan: newPlan })
+    // Component will re-render with new plan-based flags
+  }
+  return (
+    <div>
+      <ThemeSelector onChange={handleThemeChange} />
+      <PlanUpgrade onUpgrade={handlePlanUpgrade} />
+    </div>
+  )
+}
+```
+### 6. Loading States
+Handle loading states gracefully:
+```tsx
+function FeaturePage() {
+  const isReady = useFlagmintReady()
+  const showPremiumFeature = useFlag('premium-feature', false)
+  if (!isReady) {
+    return (
+      <div className="loading-container">
+        <Spinner />
+        <p>Loading personalized features...</p>
+      </div>
+    )
+  }
+  return (
+    <div>
+      <h1>Features</h1>
+      {showPremiumFeature ? (
+        <PremiumFeature />
+      ) : (
+        <UpgradeBanner />
+      )}
+    </div>
+  )
+}
+```
+### 7. Error Handling
+```tsx
+<FlagmintProvider
+  options={{
+    apiKey: 'your-api-key',
+    onError: (error) => {
+      console.error('Flagmint error:', error)
+      // Send to error reporting service
+      errorReporting.captureException(error)
+    }
+  }}
+>
+  <App />
+</FlagmintProvider>
+```
+## 🏗️ Framework Examples
+### Next.js (App Router)
+```tsx
+// app/layout.tsx
+import Providers from './providers'
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+// app/providers.tsx
+'use client'
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function Providers({ children }) {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: process.env.NEXT_PUBLIC_FLAGMINT_API_KEY!,
+        transportMode: 'long-polling'
+      }}
+    >
+      {children}
+    </FlagmintProvider>
+  )
+}
+```
+### Vite + React
+```tsx
+// src/main.tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { FlagmintProvider } from 'react-flagmint/client'
+import App from './App'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <FlagmintProvider
+      options={{
+        apiKey: import.meta.env.VITE_FLAGMINT_API_KEY,
+        transportMode: 'websocket'
+      }}
+    >
+      <App />
+    </FlagmintProvider>
+  </React.StrictMode>
+)
+```
+### Remix
+```tsx
+// app/root.tsx
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function App() {
+  return (
+    <html>
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <FlagmintProvider
+          options={{
+            apiKey: process.env.FLAGMINT_API_KEY!,
+            transportMode: 'long-polling'
+          }}
+        >
+          <Outlet />
+        </FlagmintProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+## ⚡ Performance
+### Fine-grained Reactivity
+Only components that use specific flags will re-render when those flags change:
+```tsx
+// ✅ Good: Only re-renders when 'feature-a' changes
+function ComponentA() {
+  const featureA = useFlag('feature-a', false)
+  return <div>{featureA && <FeatureA />}</div>
+}
+// ✅ Good: Only re-renders when 'feature-b' changes
+function ComponentB() {
+  const featureB = useFlag('feature-b', false)
+  return <div>{featureB && <FeatureB />}</div>
+}
+// ❌ Avoid: Re-renders when ANY flag changes
+function ComponentAll() {
+  const allFlags = useFlags()
+  return <div>{allFlags['feature-a'] && <FeatureA />}</div>
+}
+```
+### Bundle Size
+- **react-flagmint**: ~3KB gzipped
+- **zustand**: ~2KB gzipped
+- **Total overhead**: ~5KB gzipped
+## 🔧 Development
+### Local Development
+```bash
+# Clone the monorepo
+git clone <repo-url>
+cd flagmint-monorepo
+# Install dependencies
+pnpm install
+# Build the library
+pnpm --filter react-flagmint build
+# Run the Next.js example
+pnpm dev:next
+```
+### Testing
+```bash
+# Run tests
+pnpm test
+# Type checking
+pnpm typecheck
+# Lint
+pnpm lint
+```
+## 📄 License
+MIT
+## 🤝 Contributing
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests
+5. Submit a pull request
+## 📞 Support
+- 📧 Email: support@flagmint.com
+- 🐛 Issues: [GitHub Issues](https://github.com/jtad009/flagmint-react-sdk/issues)
+- 📖 Docs: [Documentation](https://docs.flagmint.com)
+---
+**Made with ❤️ by the Flagmint team**

package/dist/client.cjs ADDED Viewed

@@ -0,0 +1,146 @@
+'use strict';
+var flagmintJsSdk = require('flagmint-js-sdk');
+var react = require('react');
+var vanilla = require('zustand/vanilla');
+var jsxRuntime = require('react/jsx-runtime');
+var zustand = require('zustand');
+function createFlagStore(initialFlags = {}) {
+  return vanilla.createStore((set, get) => ({
+    flags: initialFlags,
+    client: null,
+    isInitialized: false,
+    isReady: false,
+    setFlags: (flags) => set({ flags }),
+    setFlag: (key, value) => set((state) => ({
+      flags: { ...state.flags, [key]: value }
+    })),
+    setClient: (client) => set({ client }),
+    setInitialized: (initialized) => set({ isInitialized: initialized }),
+    setReady: (ready) => set({ isReady: ready })
+  }));
+}
+var FlagmintStoreContext = react.createContext(null);
+function FlagmintProvider({
+  children,
+  options,
+  initialFlags = {},
+  deferInitialization = false
+}) {
+  const store = react.useMemo(() => createFlagStore(initialFlags), [initialFlags]);
+  const clientRef = react.useRef(null);
+  const initPromiseRef = react.useRef(null);
+  react.useRef(initialFlags);
+  const init = async () => {
+    if (clientRef.current) return clientRef.current;
+    if (initPromiseRef.current) return initPromiseRef.current;
+    const { setClient, setReady, setInitialized } = store.getState();
+    initPromiseRef.current = (async () => {
+      try {
+        const originalClient = new flagmintJsSdk.FlagClient(options);
+        await originalClient.ready();
+        const clientWrapper = {
+          ...originalClient,
+          _flags: {},
+          getFlags: function() {
+            return this._flags;
+          },
+          // Override getFlag to track individual flags
+          getFlag: function(key, fallback) {
+            const value = originalClient.getFlag(key, fallback);
+            this._flags[key] = value;
+            store.getState().setFlag(key, value);
+            return value;
+          },
+          // Override updateContext to trigger flag refresh
+          updateContext: function(context) {
+            originalClient.updateContext(context);
+            setTimeout(() => {
+              Object.keys(this._flags).forEach((key) => {
+                const newValue = originalClient.getFlag(key);
+                if (this._flags[key] !== newValue) {
+                  this._flags[key] = newValue;
+                  store.getState().setFlag(key, newValue);
+                }
+              });
+            }, 100);
+          }
+        };
+        clientRef.current = clientWrapper;
+        setClient(clientWrapper);
+        setReady(true);
+        setInitialized(true);
+        return clientWrapper;
+      } catch (error) {
+        console.error("Failed to initialize Flagmint client:", error);
+        throw error;
+      }
+    })();
+    return initPromiseRef.current;
+  };
+  react.useEffect(() => {
+    if (!deferInitialization) {
+      init().catch((error) => {
+        console.error("Auto-initialization failed:", error);
+      });
+    }
+    return () => {
+      var _a, _b;
+      if (clientRef.current) {
+        (_b = (_a = clientRef.current).destroy) == null ? void 0 : _b.call(_a);
+        clientRef.current = null;
+        initPromiseRef.current = null;
+      }
+    };
+  }, [deferInitialization]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FlagmintStoreContext.Provider, { value: store, children });
+}
+function useFlagmintStore() {
+  const store = react.useContext(FlagmintStoreContext);
+  if (!store) {
+    throw new Error("useFlagmintStore must be used within a FlagmintProvider");
+  }
+  return store;
+}
+function useFlagmint() {
+  const store = useFlagmintStore();
+  const client = zustand.useStore(store, (state) => state.client);
+  const isInitialized = zustand.useStore(store, (state) => state.isInitialized);
+  const updateContext = async (context) => {
+    if (!client) {
+      throw new Error("Flagmint client not initialized");
+    }
+    await client.updateContext(context);
+  };
+  return {
+    client,
+    isInitialized,
+    updateContext
+  };
+}
+function useFlags() {
+  const store = useFlagmintStore();
+  return zustand.useStore(store, (state) => state.flags);
+}
+function useFlag(key, fallback) {
+  const store = useFlagmintStore();
+  return zustand.useStore(store, (state) => {
+    var _a;
+    return (_a = state.flags[key]) != null ? _a : fallback;
+  });
+}
+function useFlagmintReady() {
+  const store = useFlagmintStore();
+  return zustand.useStore(store, (state) => state.isInitialized && state.client !== null);
+}
+exports.FlagmintProvider = FlagmintProvider;
+exports.FlagmintStoreContext = FlagmintStoreContext;
+exports.useFlag = useFlag;
+exports.useFlagmint = useFlagmint;
+exports.useFlagmintReady = useFlagmintReady;
+exports.useFlagmintStore = useFlagmintStore;
+exports.useFlags = useFlags;
+//# sourceMappingURL=client.cjs.map
+//# sourceMappingURL=client.cjs.map

package/dist/client.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/store/store.ts","../src/providers/FlagmintProvider.tsx","../src/hooks/index.ts"],"names":["createStore","createContext","useMemo","useRef","FlagClient","useEffect","useContext","useStore"],"mappings":"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","file":"client.cjs","sourcesContent":["'use client';\nimport { createStore, StoreApi } from \"zustand/vanilla\";\nimport { Flags, FlagStore } from \"@/types\";\n\n\nexport function createFlagStore(initialFlags: Flags = {}): StoreApi<FlagStore> {\n return createStore<FlagStore>((set, get) => ({\n flags: initialFlags,\n client: null,\n isInitialized: false,\n isReady: false,\n setFlags: (flags) => set({ flags }),\n setFlag: (key, value) => set((state) => ({\n flags: { ...state.flags, [key]: value }\n })),\n setClient: (client) => set({ client }),\n setInitialized: (initialized) => set({ isInitialized: initialized }),\n setReady: (ready) => set({ isReady: ready })\n }))\n}\n","'use client';\nimport { FlagClient } from \"flagmint-js-sdk\"\nimport { useMemo, useRef, useEffect, createContext } from \"react\"\nimport { createFlagStore } from \"@/store/store\"\nimport { FlagmintProviderProps, Flags, FlagStore } from \"@/types\"\nimport { StoreApi } from \"zustand\"\n\nexport const FlagmintStoreContext = createContext<StoreApi<FlagStore> | null>(null)\n\n\nexport function FlagmintProvider<\n T extends FlagClient<T, C> & { _flags: Flags; getFlags: () => Flags },\n C extends Record<string, any> = Record<string, any>\n>({\n children,\n options,\n initialFlags = {},\n deferInitialization = false\n}: FlagmintProviderProps<T, C>) {\n // Create a new store instance for each provider (per-request in SSR)\n const store = useMemo(() => createFlagStore(initialFlags), [initialFlags])\n \n // Use ref to avoid recreating client on every render\n const clientRef = useRef<FlagClient<T, C> | null>(null)\n const initPromiseRef = useRef<Promise<FlagClient<T, C>> | null>(null)\n const flagsRef = useRef<Flags>(initialFlags)\n \n // Initialization function similar to Vue plugin\n const init = async (): Promise<FlagClient<T, C>> => {\n if (clientRef.current) return clientRef.current // Avoid re-init\n \n // Return existing promise if init is already in progress\n if (initPromiseRef.current) return initPromiseRef.current\n \n const { setClient, setReady, setInitialized } = store.getState()\n \n initPromiseRef.current = (async () => {\n try {\n // Create a custom FlagClient that exposes flag updates\n const originalClient = new FlagClient<T, C>(options)\n await originalClient.ready()\n \n // Create a wrapper that tracks flags internally\n const clientWrapper = {\n ...originalClient,\n _flags: {} as Flags,\n getFlags: function() {\n return this._flags\n },\n // Override getFlag to track individual flags\n getFlag: function<K extends string>(key: K, fallback?: T) {\n const value = originalClient.getFlag(key as any, fallback)\n this._flags[key] = value\n store.getState().setFlag(key, value)\n return value\n },\n // Override updateContext to trigger flag refresh\n updateContext: function(context: C) {\n originalClient.updateContext(context)\n // After context update, we should refresh our tracked flags\n // This is a limitation of the current API\n setTimeout(() => {\n // Force a re-evaluation of flags we've previously requested\n Object.keys(this._flags).forEach(key => {\n const newValue = originalClient.getFlag(key as any)\n if (this._flags[key] !== newValue) {\n this._flags[key] = newValue\n store.getState().setFlag(key, newValue)\n }\n })\n }, 100)\n }\n } as FlagClient<T, C> & { _flags: Flags; getFlags: () => Flags }\n \n clientRef.current = clientWrapper\n setClient(clientWrapper)\n setReady(true)\n setInitialized(true)\n \n return clientWrapper\n } catch (error) {\n console.error('Failed to initialize Flagmint client:', error)\n throw error\n }\n })()\n \n return initPromiseRef.current\n }\n\n useEffect(() => {\n if (!deferInitialization) {\n init().catch(error => {\n console.error('Auto-initialization failed:', error)\n })\n }\n\n return () => {\n if (clientRef.current) {\n clientRef.current.destroy?.()\n clientRef.current = null\n initPromiseRef.current = null\n }\n }\n }, [deferInitialization])\n\n return (\n <FlagmintStoreContext.Provider value={store}>\n {children}\n </FlagmintStoreContext.Provider>\n )\n}\n","'use client';\nimport { FlagValue } from \"flagmint-js-sdk\"\nimport { useContext } from \"react\"\nimport { StoreApi, useStore } from \"zustand\"\nimport { FlagmintStoreContext } from \"@/providers/FlagmintProvider\"\nimport { FlagStore, Flags } from \"@/types\"\n\n// Helper to get the store from context\nexport function useFlagmintStore(): StoreApi<FlagStore> {\n const store = useContext(FlagmintStoreContext)\n if (!store) {\n throw new Error('useFlagmintStore must be used within a FlagmintProvider')\n }\n return store\n}\n\n// Hook to get the client instance and update context\nexport function useFlagmint() {\n const store = useFlagmintStore()\n const client = useStore(store, (state) => state.client)\n const isInitialized = useStore(store, (state) => state.isInitialized)\n\n const updateContext = async (context: Record<string, any>) => {\n if (!client) {\n throw new Error('Flagmint client not initialized')\n }\n await client.updateContext(context)\n }\n\n return {\n client,\n isInitialized,\n updateContext\n }\n}\n\n// Hook to get all flags - only re-renders when flags change\nexport function useFlags(): Flags {\n const store = useFlagmintStore()\n return useStore(store, (state) => state.flags)\n}\n\n// Hook to get a specific flag - only re-renders when this specific flag changes\nexport function useFlag<T extends FlagValue = FlagValue>(\n key: string,\n fallback?: T\n): T {\n const store = useFlagmintStore()\n return useStore(store, (state) => state.flags[key] ?? fallback) as T\n}\n\n// Hook to check if the client is ready\nexport function useFlagmintReady(): boolean {\n const store = useFlagmintStore()\n return useStore(store, (state) => state.isInitialized && state.client !== null)\n}"]}

package/dist/client.d.cts ADDED Viewed

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as flagmint_js_sdk from 'flagmint-js-sdk';
+import { FlagClient, FlagValue } from 'flagmint-js-sdk';
+import { FlagStore, Flags, FlagmintProviderProps } from './index.cjs';
+import { StoreApi } from 'zustand';
+declare const FlagmintStoreContext: react.Context<StoreApi<FlagStore> | null>;
+declare function FlagmintProvider<T extends FlagClient<T, C> & {
+    _flags: Flags;
+    getFlags: () => Flags;
+}, C extends Record<string, any> = Record<string, any>>({ children, options, initialFlags, deferInitialization }: FlagmintProviderProps<T, C>): react_jsx_runtime.JSX.Element;
+declare function useFlagmintStore(): StoreApi<FlagStore>;
+declare function useFlagmint(): {
+    client: flagmint_js_sdk.FlagClient<any, any> | null;
+    isInitialized: boolean;
+    updateContext: (context: Record<string, any>) => Promise<void>;
+};
+declare function useFlags(): Flags;
+declare function useFlag<T extends FlagValue = FlagValue>(key: string, fallback?: T): T;
+declare function useFlagmintReady(): boolean;
+export { FlagmintProvider, FlagmintStoreContext, useFlag, useFlagmint, useFlagmintReady, useFlagmintStore, useFlags };

package/dist/client.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as flagmint_js_sdk from 'flagmint-js-sdk';
+import { FlagClient, FlagValue } from 'flagmint-js-sdk';
+import { FlagStore, Flags, FlagmintProviderProps } from './index.js';
+import { StoreApi } from 'zustand';
+declare const FlagmintStoreContext: react.Context<StoreApi<FlagStore> | null>;
+declare function FlagmintProvider<T extends FlagClient<T, C> & {
+    _flags: Flags;
+    getFlags: () => Flags;
+}, C extends Record<string, any> = Record<string, any>>({ children, options, initialFlags, deferInitialization }: FlagmintProviderProps<T, C>): react_jsx_runtime.JSX.Element;
+declare function useFlagmintStore(): StoreApi<FlagStore>;
+declare function useFlagmint(): {
+    client: flagmint_js_sdk.FlagClient<any, any> | null;
+    isInitialized: boolean;
+    updateContext: (context: Record<string, any>) => Promise<void>;
+};
+declare function useFlags(): Flags;
+declare function useFlag<T extends FlagValue = FlagValue>(key: string, fallback?: T): T;
+declare function useFlagmintReady(): boolean;
+export { FlagmintProvider, FlagmintStoreContext, useFlag, useFlagmint, useFlagmintReady, useFlagmintStore, useFlags };

package/dist/client.js ADDED Viewed

@@ -0,0 +1,138 @@
+import { FlagClient } from 'flagmint-js-sdk';
+import { createContext, useMemo, useRef, useEffect, useContext } from 'react';
+import { createStore } from 'zustand/vanilla';
+import { jsx } from 'react/jsx-runtime';
+import { useStore } from 'zustand';
+function createFlagStore(initialFlags = {}) {
+  return createStore((set, get) => ({
+    flags: initialFlags,
+    client: null,
+    isInitialized: false,
+    isReady: false,
+    setFlags: (flags) => set({ flags }),
+    setFlag: (key, value) => set((state) => ({
+      flags: { ...state.flags, [key]: value }
+    })),
+    setClient: (client) => set({ client }),
+    setInitialized: (initialized) => set({ isInitialized: initialized }),
+    setReady: (ready) => set({ isReady: ready })
+  }));
+}
+var FlagmintStoreContext = createContext(null);
+function FlagmintProvider({
+  children,
+  options,
+  initialFlags = {},
+  deferInitialization = false
+}) {
+  const store = useMemo(() => createFlagStore(initialFlags), [initialFlags]);
+  const clientRef = useRef(null);
+  const initPromiseRef = useRef(null);
+  useRef(initialFlags);
+  const init = async () => {
+    if (clientRef.current) return clientRef.current;
+    if (initPromiseRef.current) return initPromiseRef.current;
+    const { setClient, setReady, setInitialized } = store.getState();
+    initPromiseRef.current = (async () => {
+      try {
+        const originalClient = new FlagClient(options);
+        await originalClient.ready();
+        const clientWrapper = {
+          ...originalClient,
+          _flags: {},
+          getFlags: function() {
+            return this._flags;
+          },
+          // Override getFlag to track individual flags
+          getFlag: function(key, fallback) {
+            const value = originalClient.getFlag(key, fallback);
+            this._flags[key] = value;
+            store.getState().setFlag(key, value);
+            return value;
+          },
+          // Override updateContext to trigger flag refresh
+          updateContext: function(context) {
+            originalClient.updateContext(context);
+            setTimeout(() => {
+              Object.keys(this._flags).forEach((key) => {
+                const newValue = originalClient.getFlag(key);
+                if (this._flags[key] !== newValue) {
+                  this._flags[key] = newValue;
+                  store.getState().setFlag(key, newValue);
+                }
+              });
+            }, 100);
+          }
+        };
+        clientRef.current = clientWrapper;
+        setClient(clientWrapper);
+        setReady(true);
+        setInitialized(true);
+        return clientWrapper;
+      } catch (error) {
+        console.error("Failed to initialize Flagmint client:", error);
+        throw error;
+      }
+    })();
+    return initPromiseRef.current;
+  };
+  useEffect(() => {
+    if (!deferInitialization) {
+      init().catch((error) => {
+        console.error("Auto-initialization failed:", error);
+      });
+    }
+    return () => {
+      var _a, _b;
+      if (clientRef.current) {
+        (_b = (_a = clientRef.current).destroy) == null ? void 0 : _b.call(_a);
+        clientRef.current = null;
+        initPromiseRef.current = null;
+      }
+    };
+  }, [deferInitialization]);
+  return /* @__PURE__ */ jsx(FlagmintStoreContext.Provider, { value: store, children });
+}
+function useFlagmintStore() {
+  const store = useContext(FlagmintStoreContext);
+  if (!store) {
+    throw new Error("useFlagmintStore must be used within a FlagmintProvider");
+  }
+  return store;
+}
+function useFlagmint() {
+  const store = useFlagmintStore();
+  const client = useStore(store, (state) => state.client);
+  const isInitialized = useStore(store, (state) => state.isInitialized);
+  const updateContext = async (context) => {
+    if (!client) {
+      throw new Error("Flagmint client not initialized");
+    }
+    await client.updateContext(context);
+  };
+  return {
+    client,
+    isInitialized,
+    updateContext
+  };
+}
+function useFlags() {
+  const store = useFlagmintStore();
+  return useStore(store, (state) => state.flags);
+}
+function useFlag(key, fallback) {
+  const store = useFlagmintStore();
+  return useStore(store, (state) => {
+    var _a;
+    return (_a = state.flags[key]) != null ? _a : fallback;
+  });
+}
+function useFlagmintReady() {
+  const store = useFlagmintStore();
+  return useStore(store, (state) => state.isInitialized && state.client !== null);
+}
+export { FlagmintProvider, FlagmintStoreContext, useFlag, useFlagmint, useFlagmintReady, useFlagmintStore, useFlags };
+//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map

package/dist/client.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/store/store.ts","../src/providers/FlagmintProvider.tsx","../src/hooks/index.ts"],"names":[],"mappings":"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","file":"client.js","sourcesContent":["'use client';\nimport { createStore, StoreApi } from \"zustand/vanilla\";\nimport { Flags, FlagStore } from \"@/types\";\n\n\nexport function createFlagStore(initialFlags: Flags = {}): StoreApi<FlagStore> {\n return createStore<FlagStore>((set, get) => ({\n flags: initialFlags,\n client: null,\n isInitialized: false,\n isReady: false,\n setFlags: (flags) => set({ flags }),\n setFlag: (key, value) => set((state) => ({\n flags: { ...state.flags, [key]: value }\n })),\n setClient: (client) => set({ client }),\n setInitialized: (initialized) => set({ isInitialized: initialized }),\n setReady: (ready) => set({ isReady: ready })\n }))\n}\n","'use client';\nimport { FlagClient } from \"flagmint-js-sdk\"\nimport { useMemo, useRef, useEffect, createContext } from \"react\"\nimport { createFlagStore } from \"@/store/store\"\nimport { FlagmintProviderProps, Flags, FlagStore } from \"@/types\"\nimport { StoreApi } from \"zustand\"\n\nexport const FlagmintStoreContext = createContext<StoreApi<FlagStore> | null>(null)\n\n\nexport function FlagmintProvider<\n T extends FlagClient<T, C> & { _flags: Flags; getFlags: () => Flags },\n C extends Record<string, any> = Record<string, any>\n>({\n children,\n options,\n initialFlags = {},\n deferInitialization = false\n}: FlagmintProviderProps<T, C>) {\n // Create a new store instance for each provider (per-request in SSR)\n const store = useMemo(() => createFlagStore(initialFlags), [initialFlags])\n \n // Use ref to avoid recreating client on every render\n const clientRef = useRef<FlagClient<T, C> | null>(null)\n const initPromiseRef = useRef<Promise<FlagClient<T, C>> | null>(null)\n const flagsRef = useRef<Flags>(initialFlags)\n \n // Initialization function similar to Vue plugin\n const init = async (): Promise<FlagClient<T, C>> => {\n if (clientRef.current) return clientRef.current // Avoid re-init\n \n // Return existing promise if init is already in progress\n if (initPromiseRef.current) return initPromiseRef.current\n \n const { setClient, setReady, setInitialized } = store.getState()\n \n initPromiseRef.current = (async () => {\n try {\n // Create a custom FlagClient that exposes flag updates\n const originalClient = new FlagClient<T, C>(options)\n await originalClient.ready()\n \n // Create a wrapper that tracks flags internally\n const clientWrapper = {\n ...originalClient,\n _flags: {} as Flags,\n getFlags: function() {\n return this._flags\n },\n // Override getFlag to track individual flags\n getFlag: function<K extends string>(key: K, fallback?: T) {\n const value = originalClient.getFlag(key as any, fallback)\n this._flags[key] = value\n store.getState().setFlag(key, value)\n return value\n },\n // Override updateContext to trigger flag refresh\n updateContext: function(context: C) {\n originalClient.updateContext(context)\n // After context update, we should refresh our tracked flags\n // This is a limitation of the current API\n setTimeout(() => {\n // Force a re-evaluation of flags we've previously requested\n Object.keys(this._flags).forEach(key => {\n const newValue = originalClient.getFlag(key as any)\n if (this._flags[key] !== newValue) {\n this._flags[key] = newValue\n store.getState().setFlag(key, newValue)\n }\n })\n }, 100)\n }\n } as FlagClient<T, C> & { _flags: Flags; getFlags: () => Flags }\n \n clientRef.current = clientWrapper\n setClient(clientWrapper)\n setReady(true)\n setInitialized(true)\n \n return clientWrapper\n } catch (error) {\n console.error('Failed to initialize Flagmint client:', error)\n throw error\n }\n })()\n \n return initPromiseRef.current\n }\n\n useEffect(() => {\n if (!deferInitialization) {\n init().catch(error => {\n console.error('Auto-initialization failed:', error)\n })\n }\n\n return () => {\n if (clientRef.current) {\n clientRef.current.destroy?.()\n clientRef.current = null\n initPromiseRef.current = null\n }\n }\n }, [deferInitialization])\n\n return (\n <FlagmintStoreContext.Provider value={store}>\n {children}\n </FlagmintStoreContext.Provider>\n )\n}\n","'use client';\nimport { FlagValue } from \"flagmint-js-sdk\"\nimport { useContext } from \"react\"\nimport { StoreApi, useStore } from \"zustand\"\nimport { FlagmintStoreContext } from \"@/providers/FlagmintProvider\"\nimport { FlagStore, Flags } from \"@/types\"\n\n// Helper to get the store from context\nexport function useFlagmintStore(): StoreApi<FlagStore> {\n const store = useContext(FlagmintStoreContext)\n if (!store) {\n throw new Error('useFlagmintStore must be used within a FlagmintProvider')\n }\n return store\n}\n\n// Hook to get the client instance and update context\nexport function useFlagmint() {\n const store = useFlagmintStore()\n const client = useStore(store, (state) => state.client)\n const isInitialized = useStore(store, (state) => state.isInitialized)\n\n const updateContext = async (context: Record<string, any>) => {\n if (!client) {\n throw new Error('Flagmint client not initialized')\n }\n await client.updateContext(context)\n }\n\n return {\n client,\n isInitialized,\n updateContext\n }\n}\n\n// Hook to get all flags - only re-renders when flags change\nexport function useFlags(): Flags {\n const store = useFlagmintStore()\n return useStore(store, (state) => state.flags)\n}\n\n// Hook to get a specific flag - only re-renders when this specific flag changes\nexport function useFlag<T extends FlagValue = FlagValue>(\n key: string,\n fallback?: T\n): T {\n const store = useFlagmintStore()\n return useStore(store, (state) => state.flags[key] ?? fallback) as T\n}\n\n// Hook to check if the client is ready\nexport function useFlagmintReady(): boolean {\n const store = useFlagmintStore()\n return useStore(store, (state) => state.isInitialized && state.client !== null)\n}"]}

package/dist/index.d.cts CHANGED Viewed

@@ -26,8 +26,6 @@ interface FlagStore {
 }
 interface FlagmintProviderProps {
     children: ReactNode;
-    createClient?: () => CoreClientLike;
-    client: CoreClientLike;
     initialFlags?: Flags;
 }
 interface FlagmintProviderProps<T = unknown, C extends Record<string, any> = Record<string, any>> {

package/dist/index.d.ts CHANGED Viewed

@@ -26,8 +26,6 @@ interface FlagStore {
 }
 interface FlagmintProviderProps {
     children: ReactNode;
-    createClient?: () => CoreClientLike;
-    client: CoreClientLike;
     initialFlags?: Flags;
 }
 interface FlagmintProviderProps<T = unknown, C extends Record<string, any> = Record<string, any>> {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "flagmint-react-sdk",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React wrapper for flagmint-js-sdk",
   "type": "module",
   "sideEffects": false,