@statsig/react-bindings 0.0.1-beta.1

package/README.md

@@ -0,0 +1,8 @@
+# Statsig - React
+
+> [!IMPORTANT]
+> This version of the SDK is still in beta. The non-beta version can be found [here](https://github.com/statsig-io/react-sdk).
+
+ReactJS specific additions for use with a Statsig Javascript SDK.
+
+Learn more by visiting: https://docs.statsig.com/client/jsClientSDK

package/package.json

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

package/src/NoopEvaluationsClient.d.ts

@@ -0,0 +1,4 @@
+import { OnDeviceEvaluationsInterface, PrecomputedEvaluationsInterface } from '@statsig/client-core';
+export declare const NoopEvaluationsClient: OnDeviceEvaluationsInterface & PrecomputedEvaluationsInterface & {
+    isNoop: true;
+};

package/src/NoopEvaluationsClient.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoopEvaluationsClient = void 0;
+var client_core_1 = require("@statsig/client-core");
+var noop = function () {
+    // noop
+};
+var defaultEvaluation = function (type) {
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var name = typeof args[0] === 'string' ? args[0] : args[1];
+        switch (type) {
+            case 'gate':
+                return (0, client_core_1.makeFeatureGate)(name, 'Error');
+            case 'config':
+                return (0, client_core_1.makeDynamicConfig)(name, 'Error');
+            case 'layer':
+                return (0, client_core_1.makeLayer)(name, 'Error');
+        }
+    };
+};
+var client = {
+    isNoop: true,
+    loadingStatus: 'Uninitialized',
+    initialize: function () { return Promise.resolve(); },
+    shutdown: function () { return Promise.resolve(); },
+    updateUser: function () { return Promise.resolve(); },
+    getCurrentUser: function () { return ({ userID: '' }); },
+    checkGate: function () { return false; },
+    getFeatureGate: defaultEvaluation('gate'),
+    getDynamicConfig: defaultEvaluation('config'),
+    getExperiment: defaultEvaluation('config'),
+    getLayer: defaultEvaluation('layer'),
+    logEvent: noop,
+    on: noop,
+    off: noop,
+};
+exports.NoopEvaluationsClient = client;

package/src/OnDeviceVsPrecomputedUtils.d.ts

@@ -0,0 +1,3 @@
+import { OnDeviceEvaluationsInterface, PrecomputedEvaluationsInterface } from '@statsig/client-core';
+export declare function isPrecomputedEvaluationsClient(client: OnDeviceEvaluationsInterface | PrecomputedEvaluationsInterface): client is PrecomputedEvaluationsInterface;
+export declare function logMissingStatsigUserWarning(): void;

package/src/OnDeviceVsPrecomputedUtils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logMissingStatsigUserWarning = exports.isPrecomputedEvaluationsClient = void 0;
+var client_core_1 = require("@statsig/client-core");
+function isPrecomputedEvaluationsClient(client) {
+    return 'updateUser' in client;
+}
+exports.isPrecomputedEvaluationsClient = isPrecomputedEvaluationsClient;
+function logMissingStatsigUserWarning() {
+    client_core_1.Log.warn('StatsigUser not provided for On Device Evaluation. Returning default value.');
+}
+exports.logMissingStatsigUserWarning = logMissingStatsigUserWarning;

package/src/StatsigContext.d.ts

@@ -0,0 +1,8 @@
+import { OnDeviceEvaluationsInterface, PrecomputedEvaluationsInterface } from '@statsig/client-core';
+export interface StatsigContext {
+    readonly renderVersion: number;
+    readonly precomputedClient: PrecomputedEvaluationsInterface;
+    readonly onDeviceClient: OnDeviceEvaluationsInterface;
+}
+declare const _default: import("react").Context<StatsigContext>;
+export default _default;

package/src/StatsigContext.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+exports.default = (0, react_1.createContext)({
+    renderVersion: 0,
+    precomputedClient: {},
+    onDeviceClient: {},
+});

package/src/StatsigProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { OnDeviceEvaluationsInterface, PrecomputedEvaluationsInterface } from '@statsig/client-core';
+type Props = {
+    children: ReactNode | ReactNode[];
+} & ({
+    client: OnDeviceEvaluationsInterface | PrecomputedEvaluationsInterface;
+} | {
+    precomputedClient: PrecomputedEvaluationsInterface;
+    onDeviceClient: OnDeviceEvaluationsInterface;
+});
+export default function StatsigProvider(props: Props): JSX.Element;
+export {};

package/src/StatsigProvider.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var client_core_1 = require("@statsig/client-core");
+var NoopEvaluationsClient_1 = require("./NoopEvaluationsClient");
+var OnDeviceVsPrecomputedUtils_1 = require("./OnDeviceVsPrecomputedUtils");
+var StatsigContext_1 = require("./StatsigContext");
+function StatsigProvider(props) {
+    var precomputedClient;
+    var onDeviceClient;
+    if ('client' in props) {
+        precomputedClient = (0, OnDeviceVsPrecomputedUtils_1.isPrecomputedEvaluationsClient)(props.client)
+            ? props.client
+            : NoopEvaluationsClient_1.NoopEvaluationsClient;
+        onDeviceClient = !(0, OnDeviceVsPrecomputedUtils_1.isPrecomputedEvaluationsClient)(props.client)
+            ? props.client
+            : NoopEvaluationsClient_1.NoopEvaluationsClient;
+    }
+    else {
+        precomputedClient = props.precomputedClient;
+        onDeviceClient = props.onDeviceClient;
+    }
+    var _a = (0, react_1.useState)(0), renderVersion = _a[0], setRenderVersion = _a[1];
+    var clients = [precomputedClient, onDeviceClient];
+    (0, react_1.useEffect)(function () {
+        var onStatusChange = function (data) {
+            if (data.event === 'status_change') {
+                setRenderVersion(function (v) { return v + 1; });
+            }
+        };
+        clients.forEach(function (client) {
+            client.on('status_change', onStatusChange);
+            client.initialize().catch(function (error) {
+                client_core_1.Log.error('An error occurred during initialization', error);
+            });
+        });
+        return function () {
+            clients.forEach(function (client) {
+                client.shutdown().catch(function (error) {
+                    client_core_1.Log.error('An error occured during shutdown', error);
+                });
+                client.off('status_change', onStatusChange);
+            });
+        };
+    }, clients);
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: { renderVersion: renderVersion, onDeviceClient: onDeviceClient, precomputedClient: precomputedClient }, children: shouldRender(precomputedClient) && shouldRender(onDeviceClient)
+            ? props.children
+            : null }));
+}
+exports.default = StatsigProvider;
+function shouldRender(client) {
+    if ('isNoop' in client) {
+        return true;
+    }
+    switch (client.loadingStatus) {
+        case 'Ready':
+            return true;
+        default:
+            return false;
+    }
+}

package/src/index.d.ts

@@ -0,0 +1,7 @@
+import StatsigContext from './StatsigContext';
+import StatsigProvider from './StatsigProvider';
+import useDynamicConfig from './useDynamicConfig';
+import useExperiment from './useExperiment';
+import useGate from './useGate';
+import useLayer from './useLayer';
+export { StatsigContext, StatsigProvider, useGate, useDynamicConfig, useExperiment, useLayer, };

package/src/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayer = exports.useExperiment = exports.useDynamicConfig = exports.useGate = exports.StatsigProvider = exports.StatsigContext = void 0;
+var StatsigContext_1 = require("./StatsigContext");
+exports.StatsigContext = StatsigContext_1.default;
+var StatsigProvider_1 = require("./StatsigProvider");
+exports.StatsigProvider = StatsigProvider_1.default;
+var useDynamicConfig_1 = require("./useDynamicConfig");
+exports.useDynamicConfig = useDynamicConfig_1.default;
+var useExperiment_1 = require("./useExperiment");
+exports.useExperiment = useExperiment_1.default;
+var useGate_1 = require("./useGate");
+exports.useGate = useGate_1.default;
+var useLayer_1 = require("./useLayer");
+exports.useLayer = useLayer_1.default;
+__STATSIG__ = __assign(__assign({}, __STATSIG__), { StatsigContext: StatsigContext_1.default, StatsigProvider: StatsigProvider_1.default, useGate: useGate_1.default, useDynamicConfig: useDynamicConfig_1.default, useExperiment: useExperiment_1.default, useLayer: useLayer_1.default });

package/src/useDynamicConfig.d.ts

@@ -0,0 +1,5 @@
+import { DynamicConfig, EvaluationOptions, StatsigUser } from '@statsig/client-core';
+export type UseDynamicConfigOptions = EvaluationOptions & {
+    user: StatsigUser | null;
+};
+export default function (configName: string, options?: UseDynamicConfigOptions): DynamicConfig;

package/src/useDynamicConfig.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var client_core_1 = require("@statsig/client-core");
+var StatsigContext_1 = require("./StatsigContext");
+function default_1(configName, options) {
+    if (options === void 0) { options = __assign(__assign({}, client_core_1.DEFAULT_EVAL_OPTIONS), { user: null }); }
+    var _a = (0, react_1.useContext)(StatsigContext_1.default), precomputedClient = _a.precomputedClient, onDeviceClient = _a.onDeviceClient;
+    var config = (0, react_1.useMemo)(function () {
+        if (options.user == null) {
+            return precomputedClient.getDynamicConfig(configName, options);
+        }
+        return onDeviceClient.getDynamicConfig(configName, options.user, options);
+    }, [precomputedClient.loadingStatus, onDeviceClient.loadingStatus, options]);
+    return config;
+}
+exports.default = default_1;

package/src/useExperiment.d.ts

@@ -0,0 +1,4 @@
+import { Experiment } from '@statsig/client-core';
+import { UseDynamicConfigOptions } from './useDynamicConfig';
+export type UseExperimentOptions = UseDynamicConfigOptions;
+export default function (experimentName: string, options?: UseExperimentOptions): Experiment;

package/src/useExperiment.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var client_core_1 = require("@statsig/client-core");
+var useDynamicConfig_1 = require("./useDynamicConfig");
+function default_1(experimentName, options) {
+    if (options === void 0) { options = __assign(__assign({}, client_core_1.DEFAULT_EVAL_OPTIONS), { user: null }); }
+    var config = (0, useDynamicConfig_1.default)(experimentName, options);
+    return config;
+}
+exports.default = default_1;

package/src/useGate.d.ts

@@ -0,0 +1,5 @@
+import { EvaluationOptions, FeatureGate, StatsigUser } from '@statsig/client-core';
+export type UseGateOptions = EvaluationOptions & {
+    user: StatsigUser | null;
+};
+export default function (gateName: string, options?: UseGateOptions): FeatureGate;

package/src/useGate.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var client_core_1 = require("@statsig/client-core");
+var StatsigContext_1 = require("./StatsigContext");
+function default_1(gateName, options) {
+    if (options === void 0) { options = __assign(__assign({}, client_core_1.DEFAULT_EVAL_OPTIONS), { user: null }); }
+    var _a = (0, react_1.useContext)(StatsigContext_1.default), precomputedClient = _a.precomputedClient, onDeviceClient = _a.onDeviceClient;
+    var gate = (0, react_1.useMemo)(function () {
+        if (options.user == null) {
+            return precomputedClient.getFeatureGate(gateName, options);
+        }
+        return onDeviceClient.getFeatureGate(gateName, options.user, options);
+    }, [precomputedClient.loadingStatus, onDeviceClient.loadingStatus, options]);
+    return gate;
+}
+exports.default = default_1;

package/src/useLayer.d.ts

@@ -0,0 +1,5 @@
+import { EvaluationOptions, Layer, StatsigUser } from '@statsig/client-core';
+export type UseLayerOptions = EvaluationOptions & {
+    user: StatsigUser | null;
+};
+export default function (layerName: string, options?: UseLayerOptions): Layer;

package/src/useLayer.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var client_core_1 = require("@statsig/client-core");
+var StatsigContext_1 = require("./StatsigContext");
+function default_1(layerName, options) {
+    if (options === void 0) { options = __assign(__assign({}, client_core_1.DEFAULT_EVAL_OPTIONS), { user: null }); }
+    var _a = (0, react_1.useContext)(StatsigContext_1.default), precomputedClient = _a.precomputedClient, onDeviceClient = _a.onDeviceClient;
+    var layer = (0, react_1.useMemo)(function () {
+        if (options.user == null) {
+            return precomputedClient.getLayer(layerName, options);
+        }
+        return onDeviceClient.getLayer(layerName, options.user, options);
+    }, [precomputedClient.loadingStatus, onDeviceClient.loadingStatus, options]);
+    return layer;
+}
+exports.default = default_1;

package/src/useStatsigClient.d.ts

@@ -0,0 +1,5 @@
+import { OnDeviceEvaluationsInterface, PrecomputedEvaluationsInterface } from '@statsig/client-core';
+export default function (): {
+    precomputedClient: PrecomputedEvaluationsInterface;
+    onDeviceClient: OnDeviceEvaluationsInterface;
+};

package/src/useStatsigClient.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var StatsigContext_1 = require("./StatsigContext");
+function default_1() {
+    return (0, react_1.useContext)(StatsigContext_1.default);
+}
+exports.default = default_1;