@statsig/react-bindings 1.5.0 → 1.7.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@statsig/react-bindings",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "dependencies": {
-    "@statsig/client-core": "1.5.0"
+    "@statsig/client-core": "1.7.0"
   },
   "peerDependencies": {
     "react": "^16.6.3 || ^17.0.0 || ^18.0.0"

package/src/NoopEvaluationsClient.js

@@ -15,7 +15,7 @@ const _noop = () => {
     // noop
 };
 const _noopAsync = () => Promise.resolve();
-const NOOP_DETAILS = { reason: 'Error' };
+const NOOP_DETAILS = { reason: 'Error:NoClient' };
 const _defaultEvaluation = (type) => {
     return (...args) => {
         const name = typeof args[0] === 'string' ? args[0] : args[1];

package/src/StatsigProvider.d.ts

@@ -3,5 +3,6 @@ import { StatsigClientInterface } from '@statsig/client-core';
 export type StatsigProviderProps = {
     children: ReactNode | ReactNode[];
     client: StatsigClientInterface;
+    loadingComponent?: ReactNode | ReactNode[];
 };
-export declare function StatsigProvider({ client, children, }: StatsigProviderProps): JSX.Element;
+export declare function StatsigProvider({ client, children, loadingComponent, }: StatsigProviderProps): JSX.Element;

package/src/StatsigProvider.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_core_1 = require("@statsig/client-core");
 const StatsigContext_1 = require("./StatsigContext");
-function StatsigProvider({ client, children, }) {
+function StatsigProvider({ client, children, loadingComponent, }) {
     const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
         const onValuesUpdated = () => {
@@ -14,17 +14,19 @@ function StatsigProvider({ client, children, }) {
         client_core_1.SDKType._setBindingType('react');
         client.$on('values_updated', onValuesUpdated);
         return () => {
-            client.shutdown().catch((error) => {
-                client_core_1.Log.error('An error occured during shutdown', error);
-            });
+            client
+                .flush()
+                .catch((err) => client_core_1.Log.error('An error occured 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: _shouldRender(client) ? children : null }));
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: loadingComponent == null || _isReady(client)
+            ? children
+            : loadingComponent }));
 }
 exports.StatsigProvider = StatsigProvider;
-function _shouldRender(client) {
+function _isReady(client) {
     if ('isNoop' in client) {
         return true;
     }

package/src/useStatsigClient.d.ts

@@ -1,6 +1,7 @@
 import { PrecomputedEvaluationsInterface } from '@statsig/client-core';
 type HositedFuncs = Pick<PrecomputedEvaluationsInterface, 'checkGate' | 'getFeatureGate' | 'getDynamicConfig' | 'getExperiment' | 'getLayer' | 'logEvent'>;
-export declare function useStatsigClient(): HositedFuncs & {
+type Output = HositedFuncs & {
     client: PrecomputedEvaluationsInterface;
 };
+export declare function useStatsigClient(): Output;
 export {};

package/src/useStatsigClient.js

@@ -16,29 +16,45 @@ function useStatsigClient() {
         return NoopEvaluationsClient_1.NoopEvaluationsClient;
     }, [anyClient, renderVersion]);
     const deps = [client, renderVersion];
-    return {
+    const checkGate = (0, react_1.useCallback)((name, options) => {
+        return client.checkGate(name, options);
+    }, deps);
+    const getFeatureGate = (0, react_1.useCallback)((name, options) => {
+        return client.getFeatureGate(name, options);
+    }, deps);
+    const getDynamicConfig = (0, react_1.useCallback)((name, options) => {
+        return client.getDynamicConfig(name, options);
+    }, deps);
+    const getExperiment = (0, react_1.useCallback)((name, options) => {
+        return client.getExperiment(name, options);
+    }, deps);
+    const getLayer = (0, react_1.useCallback)((name, options) => {
+        return client.getLayer(name, options);
+    }, deps);
+    const logEvent = (0, react_1.useCallback)((eventName, value, metadata) => {
+        if (typeof eventName === 'string') {
+            return client.logEvent(eventName, value, metadata);
+        }
+        return client.logEvent(eventName);
+    }, deps);
+    return (0, react_1.useMemo)(() => {
+        return {
+            client,
+            checkGate,
+            getFeatureGate,
+            getDynamicConfig,
+            getExperiment,
+            getLayer,
+            logEvent,
+        };
+    }, [
         client,
-        checkGate: (0, react_1.useCallback)((name, options) => {
-            return client.checkGate(name, options);
-        }, deps),
-        getFeatureGate: (0, react_1.useCallback)((name, options) => {
-            return client.getFeatureGate(name, options);
-        }, deps),
-        getDynamicConfig: (0, react_1.useCallback)((name, options) => {
-            return client.getDynamicConfig(name, options);
-        }, deps),
-        getExperiment: (0, react_1.useCallback)((name, options) => {
-            return client.getExperiment(name, options);
-        }, deps),
-        getLayer: (0, react_1.useCallback)((name, options) => {
-            return client.getLayer(name, options);
-        }, deps),
-        logEvent: (0, react_1.useCallback)((eventName, value, metadata) => {
-            if (typeof eventName === 'string') {
-                return client.logEvent(eventName, value, metadata);
-            }
-            return client.logEvent(eventName);
-        }, deps),
-    };
+        checkGate,
+        getFeatureGate,
+        getDynamicConfig,
+        getExperiment,
+        getLayer,
+        logEvent,
+    ]);
 }
 exports.useStatsigClient = useStatsigClient;