@statsig/react-bindings 2.0.0 → 2.1.1-beta.1

package/README.md

@@ -1,3 +1,5 @@
+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" />
@@ -18,8 +20,6 @@
     	</a>
 </p>
 
-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).
-
 ## Getting Started
 
 Read through the [Documentation](https://docs.statsig.com/client/javascript-sdk?ref=gh_jsm) or check out the [Samples](samples/).

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@statsig/react-bindings",
-  "version": "2.0.0",
+  "version": "2.1.1-beta.1",
   "dependencies": {
-    "@statsig/client-core": "2.0.0"
+    "@statsig/client-core": "2.1.1-beta.1"
   },
   "peerDependencies": {
     "react": "^16.6.3 || ^17.0.0 || ^18.0.0"
   },
   "optionalDependencies": {
-    "@statsig/js-client": "2.0.0",
-    "@statsig/js-on-device-eval-client": "2.0.0"
+    "@statsig/js-client": "2.1.1-beta.1",
+    "@statsig/js-on-device-eval-client": "2.1.1-beta.1"
   },
   "type": "commonjs",
   "main": "./src/index.js",

package/src/StatsigProvider.d.ts

@@ -1,8 +1,18 @@
 import { ReactNode } from 'react';
-import { StatsigClientInterface } from '@statsig/client-core';
+import { StatsigUser } from '@statsig/client-core';
+import type { StatsigClient, StatsigOptions } from '@statsig/js-client';
+import type { StatsigOnDeviceEvalClient, StatsigOptions as StatsigOptionsOnDeviceEval } from '@statsig/js-on-device-eval-client';
+type WithClient = {
+    client: StatsigClient | StatsigOnDeviceEvalClient;
+};
+type WithConfiguration = {
+    sdkKey: string;
+    user: StatsigUser;
+    options?: StatsigOptionsOnDeviceEval | StatsigOptions;
+};
 export type StatsigProviderProps = {
     children: ReactNode | ReactNode[];
-    client: StatsigClientInterface;
     loadingComponent?: ReactNode | ReactNode[];
-};
-export declare function StatsigProvider({ client, children, loadingComponent, }: StatsigProviderProps): JSX.Element;
+} & (WithClient | WithConfiguration);
+export declare function StatsigProvider(props: StatsigProviderProps): JSX.Element;
+export {};

package/src/StatsigProvider.js

@@ -5,8 +5,12 @@ 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, loadingComponent, }) {
+const useClientAsyncInit_1 = require("./useClientAsyncInit");
+function StatsigProvider(props) {
     const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
+    const client = 'client' in props
+        ? props.client
+        : (0, useClientAsyncInit_1.useClientAsyncInit)(props.sdkKey, props.user).client;
     (0, react_1.useEffect)(() => {
         const onValuesUpdated = () => {
             setRenderVersion((v) => v + 1);
@@ -21,9 +25,9 @@ function StatsigProvider({ client, children, loadingComponent, }) {
         };
     }, [client]);
     const contextValue = (0, react_1.useMemo)(() => ({ renderVersion, client }), [renderVersion, client]);
-    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: loadingComponent == null || _isReady(client)
-            ? children
-            : loadingComponent }));
+    return ((0, jsx_runtime_1.jsx)(StatsigContext_1.default.Provider, { value: contextValue, children: props.loadingComponent == null || _isReady(client)
+            ? props.children
+            : props.loadingComponent }));
 }
 exports.StatsigProvider = StatsigProvider;
 function _isReady(client) {

package/src/requireOptionalDependency.d.ts

@@ -1,3 +1,5 @@
-import { AnyStatsigOptions, OnDeviceEvaluationsInterface, PrecomputedEvaluationsInterface, StatsigUser } from '@statsig/client-core';
-export declare function requireOptionalClientDependency(sdkKey: string, initialUser: StatsigUser, statsigOptions: AnyStatsigOptions | null): PrecomputedEvaluationsInterface;
-export declare function requireOptionalOnDeviceClientDependency(sdkKey: string, statsigOptions: AnyStatsigOptions | null): OnDeviceEvaluationsInterface;
+import { AnyStatsigOptions, StatsigUser } from '@statsig/client-core';
+import type { StatsigClient as TStatsigClient } from '@statsig/js-client';
+import type { StatsigOnDeviceEvalClient as TStatsigOnDeviceEvalClient } from '@statsig/js-on-device-eval-client';
+export declare function requireOptionalClientDependency(sdkKey: string, initialUser: StatsigUser, statsigOptions: AnyStatsigOptions | null): TStatsigClient;
+export declare function requireOptionalOnDeviceClientDependency(sdkKey: string, statsigOptions: AnyStatsigOptions | null): TStatsigOnDeviceEvalClient;

package/src/requireOptionalDependency.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.requireOptionalOnDeviceClientDependency = exports.requireOptionalClientDependency = void 0;
 const client_core_1 = require("@statsig/client-core");
 const NoopEvaluationsClient_1 = require("./NoopEvaluationsClient");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function _unsafeRequire(modName) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return require(modName);
+}
 function requireOptionalClientDependency(sdkKey, initialUser, statsigOptions) {
     let client;
     try {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
-        const mod = require('@statsig/js-client');
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        client = new mod.StatsigClient(sdkKey, initialUser, statsigOptions);
+        const { StatsigClient } = _unsafeRequire('@statsig/js-client');
+        client = new StatsigClient(sdkKey, initialUser, statsigOptions);
     }
     catch (error) {
         client = NoopEvaluationsClient_1.NoopEvaluationsClient;
@@ -21,14 +24,12 @@ exports.requireOptionalClientDependency = requireOptionalClientDependency;
 function requireOptionalOnDeviceClientDependency(sdkKey, statsigOptions) {
     let client;
     try {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
-        const mod = require('@statsig/js-on-device-eval-client');
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        client = new mod.StatsigOnDeviceEvalClient(sdkKey, statsigOptions);
+        const { StatsigOnDeviceEvalClient } = _unsafeRequire('@statsig/js-on-device-eval-client');
+        client = new StatsigOnDeviceEvalClient(sdkKey, statsigOptions);
     }
     catch (error) {
         client = NoopEvaluationsClient_1.NoopEvaluationsClient;
-        client_core_1.Log.error('Failed to load StatsigClient. Do you have @statsig/js-on-device-eval-client installed?');
+        client_core_1.Log.error('Failed to load StatsigOnDeviceEvalClient. Do you have @statsig/js-on-device-eval-client installed?');
     }
     return client;
 }

package/src/useClientAsyncInit.d.ts

@@ -1,5 +1,6 @@
-import { AnyStatsigOptions, PrecomputedEvaluationsInterface, StatsigUser } from '@statsig/client-core';
+import { AnyStatsigOptions, StatsigUser } from '@statsig/client-core';
+import type { StatsigClient } from '@statsig/js-client';
 export declare function useClientAsyncInit(sdkKey: string, initialUser: StatsigUser, statsigOptions?: AnyStatsigOptions | null): {
     isLoading: boolean;
-    client: PrecomputedEvaluationsInterface;
+    client: StatsigClient;
 };

package/src/useClientBootstrapInit.d.ts

@@ -1,4 +1,5 @@
-import { AnyStatsigOptions, PrecomputedEvaluationsInterface, StatsigUser } from '@statsig/client-core';
+import { AnyStatsigOptions, StatsigUser } from '@statsig/client-core';
+import type { StatsigClient } from '@statsig/js-client';
 export declare function useClientBootstrapInit(sdkKey: string, initialUser: StatsigUser, initialValues: string, statsigOptions?: AnyStatsigOptions | null): {
-    client: PrecomputedEvaluationsInterface;
+    client: StatsigClient;
 };

package/src/useOnDeviceClientAsyncInit.d.ts

@@ -1,5 +1,6 @@
-import { AnyStatsigOptions, OnDeviceEvaluationsInterface } from '@statsig/client-core';
+import { AnyStatsigOptions } from '@statsig/client-core';
+import type { StatsigOnDeviceEvalClient } from '@statsig/js-on-device-eval-client';
 export declare function useOnDeviceClientAsyncInit(sdkKey: string, statsigOptions?: AnyStatsigOptions | null): {
     isLoading: boolean;
-    client: OnDeviceEvaluationsInterface;
+    client: StatsigOnDeviceEvalClient;
 };