@statsig/react-bindings-on-device-eval 3.0.0-beta.1

package/README.md

@@ -0,0 +1,49 @@
+Statsig helps you move faster with feature gates (feature flags), and/or dynamic configs. It also allows you to run A/B/n tests to validate your new features and understand their impact on your KPIs. If you're new to Statsig, check out our product and create an account at [statsig.com](https://www.statsig.com/?ref=gh_jsm).
+
+<h1 align="center">
+	<a href="https://statsig.com/?ref=gh_jsm">
+		<img src="https://github.com/statsig-io/js-client-monorepo/assets/95646168/ae5499ed-20ff-4584-bf21-8857f800d485" />
+	</a>
+    <div />
+	<a href="https://statsig.com/?ref=gh_jsm">Statsig</a>
+</h1>
+
+<p align="center">
+	<a href="https://github.com/statsig-io/js-client-monorepo/blob/main/LICENSE">
+        	<img src="https://img.shields.io/badge/license-ISC-blue.svg?colorA=1b2528&colorB=ccfbc7&style=for-the-badge">
+    	</a>
+	<a href="https://www.npmjs.com/package/@statsig/js-client">
+        	<img src="https://img.shields.io/npm/v/@statsig/js-client.svg?colorA=1b2528&colorB=b2d3ff&style=for-the-badge">
+    	</a>
+	<a href="https://statsig.com/community?ref=gh_jsm">
+        	<img src="https://img.shields.io/badge/slack-statsig-brightgreen.svg?logo=slack&colorA=1b2528&colorB=FFF8BA&style=for-the-badge">
+    	</a>
+</p>
+
+## Getting Started
+
+Read through the [Documentation](https://docs.statsig.com/client/javascript-sdk?ref=gh_jsm) or check out the [Samples](samples/).
+
+## Packages
+
+Clients
+
+- Precomputed Evaluations (Recommended) [[npm](https://www.npmjs.com/package/@statsig/js-client)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/js-client)]
+- On Device Evaluations [[npm](https://www.npmjs.com/package/@statsig/js-on-device-eval-client)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/js-on-device-eval-client)]
+
+Product Bundles
+
+- Session Replay [[npm](https://www.npmjs.com/package/@statsig/session-replay)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/session-replay)]
+- Web Analytics [[npm](https://www.npmjs.com/package/@statsig/web-analytics)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/web-analytics)]
+
+Framework Specific Bindings
+
+- React [[npm](https://www.npmjs.com/package/@statsig/react-bindings)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/react-bindings)]
+
+- React Native [[npm](https://www.npmjs.com/package/@statsig/react-native-bindings)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/react-native-bindings)]
+
+- React Native (Expo) [[npm](https://www.npmjs.com/package/@statsig/expo-bindings)] [[source](https://github.com/statsig-io/js-client-monorepo/tree/main/packages/expo-bindings)]
+
+## Community
+
+If you need any assitance or just have a question, feel free to reach out to us on [Slack](https://statsig.com/community?ref=gh_jsm).

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@statsig/react-bindings-on-device-eval",
+  "version": "3.0.0-beta.1",
+  "dependencies": {
+    "@statsig/client-core": "3.0.0-beta.1",
+    "@statsig/js-on-device-eval-client": "3.0.0-beta.1"
+  },
+  "peerDependencies": {
+    "react": "^16.6.3 || ^17.0.0 || ^18.0.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

package/src/NoopOnDeviceEvalClient.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNoopClient = exports.NoopOnDeviceEvalClient = void 0;
+const client_core_1 = require("@statsig/client-core");
+const _noop = () => {
+    // noop
+};
+const _noopAsync = () => Promise.resolve();
+const NOOP_DETAILS = { reason: 'Error:NoClient' };
+const _defaultEvaluation = (type) => {
+    return (...args) => {
+        const name = typeof args[0] === 'string' ? args[0] : args[1];
+        switch (type) {
+            case 'gate':
+                return (0, client_core_1._makeFeatureGate)(name, NOOP_DETAILS, null);
+            case 'config':
+                return (0, client_core_1._makeDynamicConfig)(name, NOOP_DETAILS, null);
+            case 'layer':
+                return (0, client_core_1._makeLayer)(name, NOOP_DETAILS, null);
+            case 'param_store':
+                return { name };
+        }
+    };
+};
+const _noopDataAdapter = {
+    attach: _noop,
+    getDataSync: () => null,
+    getDataAsync: () => Promise.resolve(null),
+    setData: _noop,
+    setDataLegacy: _noop,
+    prefetchData: _noopAsync,
+};
+const context = {
+    sdkKey: '',
+    options: {},
+    values: null,
+    user: { userID: '' },
+    errorBoundary: {},
+    session: {
+        data: { sessionID: '', startTime: 0, lastUpdate: 0 },
+        sdkKey: '',
+    },
+    stableID: '',
+    storageProvider: client_core_1.Storage,
+};
+const _client = {
+    isNoop: true,
+    loadingStatus: 'Uninitialized',
+    initializeSync: _noop,
+    initializeAsync: _noopAsync,
+    shutdown: _noopAsync,
+    flush: _noopAsync,
+    updateRuntimeOptions: _noop,
+    getContext: () => (Object.assign({}, context)),
+    checkGate: () => false,
+    getFeatureGate: _defaultEvaluation('gate'),
+    getDynamicConfig: _defaultEvaluation('config'),
+    getExperiment: _defaultEvaluation('config'),
+    getLayer: _defaultEvaluation('layer'),
+    logEvent: _noop,
+    on: _noop,
+    off: _noop,
+    $on: _noop,
+    $emt: _noop,
+    dataAdapter: _noopDataAdapter,
+};
+exports.NoopOnDeviceEvalClient = _client;
+function isNoopClient(client) {
+    return 'isNoop' in client;
+}
+exports.isNoopClient = isNoopClient;

package/src/StatsigContext.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+exports.default = (0, react_1.createContext)({
+    renderVersion: 0,
+    client: NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient,
+});

package/src/StatsigProviderOnDeviceEval.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatsigProviderOnDeviceEval = void 0;
+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");
+const useOnDeviceClientAsyncInit_1 = require("./useOnDeviceClientAsyncInit");
+function StatsigProviderOnDeviceEval(props) {
+    const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
+    const client = 'client' in props
+        ? props.client
+        : (0, useOnDeviceClientAsyncInit_1.useOnDeviceClientAsyncInit)(props.sdkKey, props.options).client;
+    (0, react_1.useEffect)(() => {
+        const onValuesUpdated = () => {
+            setRenderVersion((v) => v + 1);
+        };
+        client_core_1.SDKType._setBindingType('react');
+        client.$on('values_updated', onValuesUpdated);
+        return () => {
+            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: props.loadingComponent == null || _isReady(client)
+            ? props.children
+            : props.loadingComponent }));
+}
+exports.StatsigProviderOnDeviceEval = StatsigProviderOnDeviceEval;
+function _isReady(client) {
+    if ('isNoop' in client) {
+        return true;
+    }
+    switch (client.loadingStatus) {
+        case 'Ready':
+            return true;
+        default:
+            return false;
+    }
+}

package/src/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatsigOnDeviceEvalClient = exports.useLayer = exports.useGateValue = exports.useFeatureGate = exports.useExperiment = exports.useDynamicConfig = exports.useOnDeviceClientBootstrapInit = exports.useOnDeviceClientAsyncInit = exports.StatsigProviderOnDeviceEval = exports.StatsigContext = void 0;
+const StatsigContext_1 = require("./StatsigContext");
+exports.StatsigContext = StatsigContext_1.default;
+const StatsigProviderOnDeviceEval_1 = require("./StatsigProviderOnDeviceEval");
+Object.defineProperty(exports, "StatsigProviderOnDeviceEval", { enumerable: true, get: function () { return StatsigProviderOnDeviceEval_1.StatsigProviderOnDeviceEval; } });
+const useDynamicConfig_1 = require("./useDynamicConfig");
+exports.useDynamicConfig = useDynamicConfig_1.default;
+const useExperiment_1 = require("./useExperiment");
+exports.useExperiment = useExperiment_1.default;
+const useFeatureGate_1 = require("./useFeatureGate");
+exports.useFeatureGate = useFeatureGate_1.default;
+const useGateValue_1 = require("./useGateValue");
+exports.useGateValue = useGateValue_1.default;
+const useLayer_1 = require("./useLayer");
+exports.useLayer = useLayer_1.default;
+const useOnDeviceClientAsyncInit_1 = require("./useOnDeviceClientAsyncInit");
+Object.defineProperty(exports, "useOnDeviceClientAsyncInit", { enumerable: true, get: function () { return useOnDeviceClientAsyncInit_1.useOnDeviceClientAsyncInit; } });
+const useOnDeviceClientBootstrapInit_1 = require("./useOnDeviceClientBootstrapInit");
+Object.defineProperty(exports, "useOnDeviceClientBootstrapInit", { enumerable: true, get: function () { return useOnDeviceClientBootstrapInit_1.useOnDeviceClientBootstrapInit; } });
+const useStatsigOnDeviceEvalClient_1 = require("./useStatsigOnDeviceEvalClient");
+Object.defineProperty(exports, "useStatsigOnDeviceEvalClient", { enumerable: true, get: function () { return useStatsigOnDeviceEvalClient_1.useStatsigOnDeviceEvalClient; } });
+__exportStar(require("@statsig/client-core"), exports);
+__exportStar(require("@statsig/js-on-device-eval-client"), exports);
+__STATSIG__ = Object.assign(Object.assign({}, (__STATSIG__ !== null && __STATSIG__ !== void 0 ? __STATSIG__ : {})), { StatsigContext: StatsigContext_1.default,
+    StatsigProviderOnDeviceEval: StatsigProviderOnDeviceEval_1.StatsigProviderOnDeviceEval,
+    useOnDeviceClientAsyncInit: useOnDeviceClientAsyncInit_1.useOnDeviceClientAsyncInit,
+    useOnDeviceClientBootstrapInit: useOnDeviceClientBootstrapInit_1.useOnDeviceClientBootstrapInit,
+    useDynamicConfig: useDynamicConfig_1.default,
+    useExperiment: useExperiment_1.default,
+    useFeatureGate: useFeatureGate_1.default,
+    useGateValue: useGateValue_1.default,
+    useLayer: useLayer_1.default,
+    useStatsigOnDeviceEvalClient: useStatsigOnDeviceEvalClient_1.useStatsigOnDeviceEvalClient });

package/src/useDynamicConfig.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+const StatsigContext_1 = require("./StatsigContext");
+function default_1(configName, user, options) {
+    const { client, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    return (0, react_1.useMemo)(() => {
+        if ((0, NoopOnDeviceEvalClient_1.isNoopClient)(client)) {
+            client_core_1.Log.warn(`useDynamicConfig hook failed to find a valid StatsigOnDeviceEvalClient for dynamic config '${configName}'.`);
+            return NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient.getDynamicConfig(configName, user, options);
+        }
+        return client.getDynamicConfig(configName, user, options);
+    }, [configName, client, renderVersion, options]);
+}
+exports.default = default_1;

package/src/useExperiment.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+const StatsigContext_1 = require("./StatsigContext");
+function default_1(experimentName, user, options) {
+    const { client, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    return (0, react_1.useMemo)(() => {
+        if ((0, NoopOnDeviceEvalClient_1.isNoopClient)(client)) {
+            client_core_1.Log.warn(`useExperiment hook failed to find a valid StatsigOnDeviceEvalClient for experiment '${experimentName}'.`);
+            return NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient.getExperiment(experimentName, user, options);
+        }
+        return client.getExperiment(experimentName, user, options);
+    }, [experimentName, client, renderVersion, options]);
+}
+exports.default = default_1;

package/src/useFeatureGate.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+const StatsigContext_1 = require("./StatsigContext");
+function default_1(gateName, user, options) {
+    const { client, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    const gate = (0, react_1.useMemo)(() => {
+        if ((0, NoopOnDeviceEvalClient_1.isNoopClient)(client)) {
+            client_core_1.Log.warn(`useFeatureGate hook failed to find a valid StatsigOnDeviceEvalClient for gate '${gateName}'.`);
+            return NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient.getFeatureGate(gateName, user, options);
+        }
+        return client.getFeatureGate(gateName, user, options);
+    }, [gateName, client, renderVersion, options]);
+    return gate;
+}
+exports.default = default_1;

package/src/useGateValue.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+const StatsigContext_1 = require("./StatsigContext");
+function default_1(gateName, user, options) {
+    const { client, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    const gate = (0, react_1.useMemo)(() => {
+        if ((0, NoopOnDeviceEvalClient_1.isNoopClient)(client)) {
+            client_core_1.Log.warn(`useGateValue hook failed to find a valid StatsigOnDeviceEvalClient for gate '${gateName}'.`);
+            return NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient.checkGate(gateName, user, options);
+        }
+        return client.checkGate(gateName, user, options);
+    }, [gateName, client, renderVersion, options]);
+    return gate;
+}
+exports.default = default_1;

package/src/useLayer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+const StatsigContext_1 = require("./StatsigContext");
+function default_1(layerName, user, options) {
+    const { client, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    const layer = (0, react_1.useMemo)(() => {
+        if ((0, NoopOnDeviceEvalClient_1.isNoopClient)(client)) {
+            client_core_1.Log.warn(`useLayer hook failed to find a valid StatsigOnDeviceEvalClient for layer '${layerName}'.`);
+            return NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient.getLayer(layerName, user, options);
+        }
+        return client.getLayer(layerName, user, options);
+    }, [layerName, client, renderVersion, options]);
+    return layer;
+}
+exports.default = default_1;

package/src/useOnDeviceClientAsyncInit.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnDeviceClientAsyncInit = void 0;
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const js_on_device_eval_client_1 = require("@statsig/js-on-device-eval-client");
+function useOnDeviceClientAsyncInit(sdkKey, statsigOptions = null) {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [args] = (0, react_1.useState)(() => {
+        const client = new js_on_device_eval_client_1.StatsigOnDeviceEvalClient(sdkKey, statsigOptions);
+        client
+            .initializeAsync()
+            .catch(client_core_1.Log.error)
+            .finally(() => setIsLoading(false));
+        return { client, sdkKey };
+    });
+    return { client: args.client, isLoading };
+}
+exports.useOnDeviceClientAsyncInit = useOnDeviceClientAsyncInit;

package/src/useOnDeviceClientBootstrapInit.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnDeviceClientBootstrapInit = void 0;
+const react_1 = require("react");
+const js_on_device_eval_client_1 = require("@statsig/js-on-device-eval-client");
+function useOnDeviceClientBootstrapInit(sdkKey, initialValues, statsigOptions = null) {
+    const [args] = (0, react_1.useState)(() => {
+        const client = new js_on_device_eval_client_1.StatsigOnDeviceEvalClient(sdkKey, statsigOptions);
+        client.dataAdapter.setData(initialValues);
+        client.initializeSync();
+        return { client, initialValues, sdkKey };
+    });
+    return args.client;
+}
+exports.useOnDeviceClientBootstrapInit = useOnDeviceClientBootstrapInit;

package/src/useStatsigOnDeviceEvalClient.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatsigOnDeviceEvalClient = void 0;
+const react_1 = require("react");
+const client_core_1 = require("@statsig/client-core");
+const NoopOnDeviceEvalClient_1 = require("./NoopOnDeviceEvalClient");
+const StatsigContext_1 = require("./StatsigContext");
+function useStatsigOnDeviceEvalClient() {
+    const { client: anyClient, renderVersion } = (0, react_1.useContext)(StatsigContext_1.default);
+    const client = (0, react_1.useMemo)(() => {
+        if ((0, NoopOnDeviceEvalClient_1.isNoopClient)(anyClient)) {
+            client_core_1.Log.warn('Attempting to retrieve a StatsigOnDeviceEvalClient but none was set.');
+            return NoopOnDeviceEvalClient_1.NoopOnDeviceEvalClient;
+        }
+        return anyClient;
+    }, [anyClient, renderVersion]);
+    const deps = [client, renderVersion];
+    const checkGate = (0, react_1.useCallback)((name, user, options) => {
+        return client.checkGate(name, user, options);
+    }, deps);
+    const getFeatureGate = (0, react_1.useCallback)((name, user, options) => {
+        return client.getFeatureGate(name, user, options);
+    }, deps);
+    const getDynamicConfig = (0, react_1.useCallback)((name, user, options) => {
+        return client.getDynamicConfig(name, user, options);
+    }, deps);
+    const getExperiment = (0, react_1.useCallback)((name, user, options) => {
+        return client.getExperiment(name, user, options);
+    }, deps);
+    const getLayer = (0, react_1.useCallback)((name, options) => {
+        return client.getLayer(name, options);
+    }, deps);
+    const logEvent = (0, react_1.useCallback)((eventName, user, value, metadata) => {
+        if (typeof eventName === 'string') {
+            return client.logEvent(eventName, user, value, metadata);
+        }
+        return client.logEvent(eventName, user);
+    }, deps);
+    return (0, react_1.useMemo)(() => {
+        return {
+            client,
+            checkGate,
+            getFeatureGate,
+            getDynamicConfig,
+            getExperiment,
+            getLayer,
+            logEvent,
+        };
+    }, [
+        client,
+        checkGate,
+        getFeatureGate,
+        getDynamicConfig,
+        getExperiment,
+        getLayer,
+        logEvent,
+    ]);
+}
+exports.useStatsigOnDeviceEvalClient = useStatsigOnDeviceEvalClient;