@statsig/react-bindings 3.14.1 → 3.15.0

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@statsig/react-bindings",
-  "version": "3.14.1",
+  "version": "3.15.0",
+  "license": "ISC",
+  "homepage": "https://github.com/statsig-io/js-client-monorepo",
+  "repository": {
+    "type": "git",
+    "url": "github:statsig-io/js-client-monorepo",
+    "directory": "packages/react-bindings"
+  },
   "dependencies": {
-    "@statsig/client-core": "3.14.1",
-    "@statsig/js-client": "3.14.1"
+    "@statsig/client-core": "3.15.0",
+    "@statsig/js-client": "3.15.0"
   },
   "peerDependencies": {
     "react": "^16.6.3 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/StatsigProvider.d.ts

@@ -10,9 +10,10 @@ type WithConfiguration = {
     user: StatsigUser;
     options?: StatsigOptions;
 };
-export type StatsigProviderProps<T extends StatsigClient> = {
+type ProviderChildrenProps = {
     children: ReactNode | ReactNode[];
     loadingComponent?: ReactNode | ReactNode[];
-} & (WithClient<T> | WithConfiguration);
+};
+export type StatsigProviderProps<T extends StatsigClient> = ProviderChildrenProps & (WithClient<T> | WithConfiguration);
 export declare function StatsigProvider(props: StatsigProviderProps<StatsigClient>): React.ReactElement;
 export {};

package/src/StatsigProvider.js

@@ -7,10 +7,34 @@ const client_core_1 = require("@statsig/client-core");
 const StatsigContext_1 = require("./StatsigContext");
 const useClientAsyncInit_1 = require("./useClientAsyncInit");
 function StatsigProvider(props) {
+    if (!('client' in props)) {
+        return (0, jsx_runtime_1.jsx)(ConfigBasedStatsigProvider, Object.assign({}, props));
+    }
+    if ('sdkKey' in props || 'user' in props) {
+        client_core_1.Log.warn('Both client and configuration props (sdkKey, user) were provided to StatsigProvider. The client prop will be used and the configuration props will be ignored.');
+    }
+    return (0, jsx_runtime_1.jsx)(ClientBasedStatsigProvider, Object.assign({}, props));
+}
+exports.StatsigProvider = StatsigProvider;
+function ConfigBasedStatsigProvider(props) {
+    const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
+    const client = (0, useClientAsyncInit_1.useClientAsyncInit)(props.sdkKey, props.user, props.options).client;
+    useStatsigClientSetup(client, setRenderVersion);
+    const contextValue = (0, react_1.useMemo)(() => ({ renderVersion, client }), [renderVersion, client]);
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || _isReady(client)
+            ? props.children
+            : props.loadingComponent }));
+}
+function ClientBasedStatsigProvider(props) {
     const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
-    const client = 'client' in props
-        ? props.client
-        : (0, useClientAsyncInit_1.useClientAsyncInit)(props.sdkKey, props.user, props.options).client;
+    const client = props.client;
+    useStatsigClientSetup(client, setRenderVersion);
+    const contextValue = (0, react_1.useMemo)(() => ({ renderVersion, client }), [renderVersion, client]);
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || _isReady(client)
+            ? props.children
+            : props.loadingComponent }));
+}
+function useStatsigClientSetup(client, setRenderVersion) {
     (0, react_1.useEffect)(() => {
         const onValuesUpdated = () => {
             setRenderVersion((v) => v + 1);
@@ -20,16 +44,11 @@ function StatsigProvider(props) {
         return () => {
             client
                 .flush()
-                .catch((err) => client_core_1.Log.error('An error occured during flush', err));
+                .catch((err) => client_core_1.Log.error('An error occurred during flush', err));
             client.off('values_updated', onValuesUpdated);
         };
-    }, [client]);
-    const contextValue = (0, react_1.useMemo)(() => ({ renderVersion, client }), [renderVersion, client]);
-    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || _isReady(client)
-            ? props.children
-            : props.loadingComponent }));
+    }, [client, setRenderVersion]);
 }
-exports.StatsigProvider = StatsigProvider;
 function _isReady(client) {
     if ('isNoop' in client) {
         return true;

package/src/useStatsigClient.d.ts

@@ -1,5 +1,5 @@
 import { PrecomputedEvaluationsInterface } from '@statsig/client-core';
-type HositedFuncs = Pick<PrecomputedEvaluationsInterface, 'checkGate' | 'getFeatureGate' | 'getDynamicConfig' | 'getExperiment' | 'getLayer' | 'logEvent'>;
+type HositedFuncs = Pick<PrecomputedEvaluationsInterface, 'checkGate' | 'getFeatureGate' | 'getDynamicConfig' | 'getExperiment' | 'getLayer' | 'getParameterStore' | 'logEvent'>;
 type Output = HositedFuncs & {
     client: PrecomputedEvaluationsInterface;
 };

package/src/useStatsigClient.js

@@ -30,6 +30,9 @@ function useStatsigClient() {
     const getLayer = (0, react_1.useCallback)((name, options) => {
         return client.getLayer(name, options);
     }, deps);
+    const getParameterStore = (0, react_1.useCallback)((name, options) => {
+        return client.getParameterStore(name, options);
+    }, deps);
     const logEvent = (0, react_1.useCallback)((eventName, value, metadata) => {
         if (typeof eventName === 'string') {
             return client.logEvent(eventName, value, metadata);
@@ -44,6 +47,7 @@ function useStatsigClient() {
             getDynamicConfig,
             getExperiment,
             getLayer,
+            getParameterStore,
             logEvent,
         };
     }, [
@@ -53,6 +57,7 @@ function useStatsigClient() {
         getDynamicConfig,
         getExperiment,
         getLayer,
+        getParameterStore,
         logEvent,
     ]);
 }

package/src/useStatsigInternalClientFactoryAsync.js

@@ -4,24 +4,18 @@ exports.useStatsigInternalClientFactoryAsync = void 0;
 const react_1 = require("react");
 const client_core_1 = require("@statsig/client-core");
 function useStatsigInternalClientFactoryAsync(factory, args) {
-    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const clientRef = (0, react_1.useRef)((0, client_core_1._getInstance)(args.sdkKey));
-    const client = (0, react_1.useMemo)(() => {
-        if (clientRef.current) {
-            // Repeat calls to initializeAsync return the same promise
-            clientRef.current
+    const client = (0, react_1.useMemo)(() => { var _a; return (_a = (0, client_core_1._getInstance)(args.sdkKey)) !== null && _a !== void 0 ? _a : factory(args); }, []);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(client.loadingStatus !== 'Ready');
+    (0, react_1.useMemo)(() => {
+        if (client.loadingStatus !== 'Ready') {
+            // Repeat calls to initializeAsync return the same promise.
+            // But if the client is already loaded, we don't want the promise
+            // resolution to trigger an extra render on `setIsLoading(false)`
+            client
                 .initializeAsync()
                 .catch(client_core_1.Log.error)
                 .finally(() => setIsLoading(false));
-            return clientRef.current;
         }
-        const inst = factory(args);
-        clientRef.current = inst;
-        inst
-            .initializeAsync()
-            .catch(client_core_1.Log.error)
-            .finally(() => setIsLoading(false));
-        return inst;
     }, []);
     return { client, isLoading };
 }