[Breaking change] factory, client, and track method available in initial render when using config prop.

CHANGES.txt

@@ -2,6 +2,7 @@
  - Added support for targeting rules based on large segments for browsers.
  - Updated @splitsoftware/splitio package to version 11.0.0 that includes major updates, and updated some transitive dependencies for vulnerability fixes.
  - Renamed distribution folders from `/lib` to `/cjs` for CommonJS build, and `/es` to `/esm` for EcmaScript Modules build.
+ - Bugfixing - When the `config` prop is provided, the `SplitFactoryProvider` now makes the SDK factory and client instances available in the context immediately during the initial render, instead of waiting for the first SDK event (Related to https://github.com/splitio/react-client/issues/198). This change fixes a bug in the `useTrack` hook, which was not retrieving the client's `track` method during the initial render.
  - BREAKING CHANGES:
       - Updated error handling: using the library modules without wrapping them in a `SplitFactoryProvider` component will now throw an error instead of logging it, as the modules requires the `SplitContext` to work properly.
       - Removed the `core.trafficType` configuration option and the `trafficType` parameter from the SDK `client()` method, `useSplitClient`, `useTrack`, and `SplitClient` component. This is because traffic types can no longer be bound to SDK clients in JavaScript SDK v11.0.0, and so the traffic type must be provided as first argument in the `track` method calls.

package.json

@@ -26,7 +26,7 @@
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "eslint 'src/**/*.ts*'",
     "check:types": "tsc --noEmit",
-    "test": "jest src",
+    "test": "jest src --silent",
     "test:watch": "npm test -- --watch",
     "test:coverage": "jest src --coverage",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",

src/SplitFactoryProvider.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import { SplitClient } from './SplitClient';
 import { ISplitFactoryProviderProps } from './types';
 import { WARN_SF_CONFIG_AND_FACTORY } from './constants';
-import { getSplitFactory, destroySplitFactory, IFactoryWithClients, getSplitClient, getStatus } from './utils';
-import { DEFAULT_UPDATE_OPTIONS } from './useSplitClient';
+import { getSplitFactory, destroySplitFactory, getSplitClient, getStatus } from './utils';
 import { SplitContext } from './SplitContext';
 
 /**
@@ -18,70 +17,29 @@ import { SplitContext } from './SplitContext';
  * @see {@link https://help.split.io/hc/en-us/articles/360038825091-React-SDK#2-instantiate-the-sdk-and-create-a-new-split-client}
  */
 export function SplitFactoryProvider(props: ISplitFactoryProviderProps) {
-  let {
-    config, factory: propFactory,
-    updateOnSdkReady, updateOnSdkReadyFromCache, updateOnSdkTimedout, updateOnSdkUpdate
-  } = { ...DEFAULT_UPDATE_OPTIONS, ...props };
+  const { config, factory: propFactory } = props;
 
-  if (config && propFactory) {
-    console.log(WARN_SF_CONFIG_AND_FACTORY);
-    config = undefined;
-  }
-
-  const [configFactory, setConfigFactory] = React.useState<IFactoryWithClients>();
   const factory = React.useMemo(() => {
-    return propFactory || (configFactory && config === configFactory.config ? configFactory : undefined);
-  }, [config, propFactory, configFactory]);
+    return propFactory || (config ? getSplitFactory(config) : undefined);
+  }, [config, propFactory]);
   const client = factory ? getSplitClient(factory) : undefined;
 
   // Effect to initialize and destroy the factory
   React.useEffect(() => {
+    if (propFactory) {
+      if (config) console.log(WARN_SF_CONFIG_AND_FACTORY);
+      return;
+    }
+
     if (config) {
       const factory = getSplitFactory(config);
+      factory.init && factory.init();
 
       return () => {
         destroySplitFactory(factory);
       }
     }
-  }, [config]);
-
-  // Effect to subscribe/unsubscribe to events
-  React.useEffect(() => {
-    const factory = config && getSplitFactory(config);
-    if (factory) {
-      const client = getSplitClient(factory);
-      const status = getStatus(client);
-
-      // Unsubscribe from events and update state when first event is emitted
-      const update = () => { // eslint-disable-next-line no-use-before-define
-        unsubscribe();
-        setConfigFactory(factory);
-      }
-
-      const unsubscribe = () => {
-        client.off(client.Event.SDK_READY, update);
-        client.off(client.Event.SDK_READY_FROM_CACHE, update);
-        client.off(client.Event.SDK_READY_TIMED_OUT, update);
-        client.off(client.Event.SDK_UPDATE, update);
-      }
-
-      if (updateOnSdkReady) {
-        if (status.isReady) update();
-        else client.once(client.Event.SDK_READY, update);
-      }
-      if (updateOnSdkReadyFromCache) {
-        if (status.isReadyFromCache) update();
-        else client.once(client.Event.SDK_READY_FROM_CACHE, update);
-      }
-      if (updateOnSdkTimedout) {
-        if (status.hasTimedout) update();
-        else client.once(client.Event.SDK_READY_TIMED_OUT, update);
-      }
-      if (updateOnSdkUpdate) client.on(client.Event.SDK_UPDATE, update);
-
-      return unsubscribe;
-    }
-  }, [config, updateOnSdkReady, updateOnSdkReadyFromCache, updateOnSdkTimedout, updateOnSdkUpdate]);
+  }, [config, propFactory]);
 
   return (
     <SplitContext.Provider value={{

src/SplitTreatments.tsx

@@ -14,7 +14,7 @@ import { useSplitTreatments } from './useSplitTreatments';
 export function SplitTreatments(props: ISplitTreatmentsProps) {
   const { children } = props;
   // SplitTreatments doesn't update on SDK events, since it is inside SplitFactory and/or SplitClient.
-  const context = useSplitTreatments({ updateOnSdkReady: false, updateOnSdkTimedout: false, ...props });
+  const context = useSplitTreatments({ ...props, updateOnSdkReady: false, updateOnSdkReadyFromCache: false });
 
   return (
     <SplitContext.Provider value={context}>

src/__tests__/SplitClient.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 
 /** Mocks and test utils */
-import { mockSdk, Event } from './testUtils/mockSplitFactory';
+import { mockSdk, Event, getLastInstance } from './testUtils/mockSplitFactory';
 jest.mock('@splitsoftware/splitio/client', () => {
   return { SplitFactory: mockSdk() };
 });
@@ -14,7 +14,7 @@ import { ISplitClientChildProps } from '../types';
 import { SplitFactoryProvider } from '../SplitFactoryProvider';
 import { SplitClient } from '../SplitClient';
 import { SplitContext } from '../SplitContext';
-import { INITIAL_CONTEXT, testAttributesBinding, TestComponentProps } from './testUtils/utils';
+import { INITIAL_STATUS, testAttributesBinding, TestComponentProps } from './testUtils/utils';
 import { IClientWithContext } from '../utils';
 import { EXCEPTION_NO_SFP } from '../constants';
 
@@ -25,7 +25,11 @@ describe('SplitClient', () => {
       <SplitFactoryProvider config={sdkBrowser} >
         <SplitClient splitKey='user1' >
           {(childProps: ISplitClientChildProps) => {
-            expect(childProps).toEqual(INITIAL_CONTEXT);
+            expect(childProps).toEqual({
+              ...INITIAL_STATUS,
+              factory: getLastInstance(SplitFactory),
+              client: getLastInstance(SplitFactory).client('user1'),
+            });
 
             return null;
           }}
@@ -47,7 +51,7 @@ describe('SplitClient', () => {
         <SplitClient splitKey={sdkBrowser.core.key} >
           {(childProps: ISplitClientChildProps) => {
             expect(childProps).toEqual({
-              ...INITIAL_CONTEXT,
+              ...INITIAL_STATUS,
               factory : outerFactory,
               client: outerFactory.client(),
               isReady: true,
@@ -210,8 +214,7 @@ describe('SplitClient', () => {
             count++;
 
             // side effect in the render phase
-            if (!(client as IClientWithContext).__getStatus().isReady) {
-              console.log('emit');
+            if (!(client as any).__getStatus().isReady) {
               (client as any).__emitter__.emit(Event.SDK_READY);
             }
 
@@ -232,7 +235,7 @@ describe('SplitClient', () => {
         <SplitContext.Consumer>
           {(value) => {
             expect(value).toEqual({
-              ...INITIAL_CONTEXT,
+              ...INITIAL_STATUS,
               factory: outerFactory,
               client: outerFactory.client('user2'),
             });

src/__tests__/SplitContext.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { SplitContext } from '../SplitContext';
 import { SplitFactoryProvider } from '../SplitFactoryProvider';
-import { INITIAL_CONTEXT } from './testUtils/utils';
+import { INITIAL_STATUS } from './testUtils/utils';
 
 /**
  * Test default SplitContext value
@@ -23,7 +23,11 @@ test('SplitContext.Consumer shows value when wrapped in a SplitFactoryProvider',
     <SplitFactoryProvider >
       <SplitContext.Consumer>
         {(value) => {
-          expect(value).toEqual(INITIAL_CONTEXT);
+          expect(value).toEqual({
+            ...INITIAL_STATUS,
+            factory: undefined,
+            client: undefined
+          });
           return null;
         }}
       </SplitContext.Consumer>

src/__tests__/SplitFactoryProvider.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 
 /** Mocks */
-import { mockSdk, Event } from './testUtils/mockSplitFactory';
+import { mockSdk, Event, getLastInstance } from './testUtils/mockSplitFactory';
 jest.mock('@splitsoftware/splitio/client', () => {
   return { SplitFactory: mockSdk() };
 });
@@ -17,15 +17,19 @@ import { SplitClient } from '../SplitClient';
 import { SplitContext } from '../SplitContext';
 import { __factories, IClientWithContext } from '../utils';
 import { WARN_SF_CONFIG_AND_FACTORY } from '../constants';
-import { INITIAL_CONTEXT } from './testUtils/utils';
+import { INITIAL_STATUS } from './testUtils/utils';
 
 describe('SplitFactoryProvider', () => {
 
   test('passes no-ready props to the child if initialized with a config.', () => {
     render(
       <SplitFactoryProvider config={sdkBrowser} >
         {(childProps: ISplitFactoryProviderChildProps) => {
-          expect(childProps).toEqual(INITIAL_CONTEXT);
+          expect(childProps).toEqual({
+            ...INITIAL_STATUS,
+            factory: getLastInstance(SplitFactory),
+            client: getLastInstance(SplitFactory).client(),
+          });
           return null;
         }}
       </SplitFactoryProvider>
@@ -43,7 +47,7 @@ describe('SplitFactoryProvider', () => {
       <SplitFactoryProvider factory={outerFactory} >
         {(childProps: ISplitFactoryProviderChildProps) => {
           expect(childProps).toEqual({
-            ...INITIAL_CONTEXT,
+            ...INITIAL_STATUS,
             factory: outerFactory,
             client: outerFactory.client(),
             isReady: true,
@@ -84,7 +88,7 @@ describe('SplitFactoryProvider', () => {
             default:
               fail('Child must not be rerendered');
           } // eslint-disable-next-line no-use-before-define
-          if (factory) expect(factory).toBe(innerFactory);
+          expect(factory).toBe(innerFactory || getLastInstance(SplitFactory));
           expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
           renderTimes++;
           previousLastUpdate = lastUpdate;
@@ -93,7 +97,7 @@ describe('SplitFactoryProvider', () => {
       </SplitFactoryProvider>
     );
 
-    const innerFactory = (SplitFactory as jest.Mock).mock.results.slice(-1)[0].value;
+    const innerFactory = getLastInstance(SplitFactory);
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY_FROM_CACHE));
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY));
@@ -168,7 +172,7 @@ describe('SplitFactoryProvider', () => {
             default:
               fail('Child must not be rerendered');
           } // eslint-disable-next-line no-use-before-define
-          if (factory) expect(factory).toBe(innerFactory);
+          expect(factory).toBe(innerFactory || getLastInstance(SplitFactory));
           expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
           renderTimes++;
           previousLastUpdate = lastUpdate;
@@ -177,7 +181,7 @@ describe('SplitFactoryProvider', () => {
       </SplitFactoryProvider>
     );
 
-    const innerFactory = (SplitFactory as jest.Mock).mock.results.slice(-1)[0].value;
+    const innerFactory = getLastInstance(SplitFactory);
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY));
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_UPDATE));
@@ -241,7 +245,7 @@ describe('SplitFactoryProvider', () => {
             default:
               fail('Child must not be rerendered');
           } // eslint-disable-next-line no-use-before-define
-          if (factory) expect(factory).toBe(innerFactory);
+          expect(factory).toBe(innerFactory || getLastInstance(SplitFactory));
           expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
           renderTimes++;
           previousLastUpdate = lastUpdate;
@@ -250,7 +254,7 @@ describe('SplitFactoryProvider', () => {
       </SplitFactoryProvider>
     );
 
-    const innerFactory = (SplitFactory as jest.Mock).mock.results.slice(-1)[0].value;
+    const innerFactory = getLastInstance(SplitFactory);
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_READY));
     act(() => (innerFactory as any).client().__emitter__.emit(Event.SDK_UPDATE));
@@ -296,7 +300,11 @@ describe('SplitFactoryProvider', () => {
       return (
         <SplitContext.Consumer>
           {(value) => {
-            expect(value).toEqual(INITIAL_CONTEXT);
+            expect(value).toEqual({
+              ...INITIAL_STATUS,
+              factory: getLastInstance(SplitFactory),
+              client: getLastInstance(SplitFactory).client(),
+            });
             done();
             return null;
           }}
@@ -344,14 +352,14 @@ describe('SplitFactoryProvider', () => {
         case 5:
           expect(isReady).toBe(false);
           expect(hasTimedout).toBe(false);
-          expect(factory).toBe(undefined);
+          expect(factory).toBe(getLastInstance(SplitFactory));
           return null;
         case 3:
         case 4:
         case 6:
           expect(isReady).toBe(true);
           expect(hasTimedout).toBe(true);
-          expect(factory).not.toBe(undefined);
+          expect(factory).toBe(getLastInstance(SplitFactory));
           createdFactories.add(factory!);
           clientDestroySpies.push(jest.spyOn(factory!.client(), 'destroy'));
           return (
@@ -368,7 +376,7 @@ describe('SplitFactoryProvider', () => {
     };
 
     const emitSdkEvents = () => {
-      const factory = (SplitFactory as jest.Mock).mock.results.slice(-1)[0].value;
+      const factory = getLastInstance(SplitFactory);
       factory.client().__emitter__.emit(Event.SDK_READY_TIMED_OUT)
       factory.client().__emitter__.emit(Event.SDK_READY)
     };

src/__tests__/testUtils/mockSplitFactory.ts

@@ -164,3 +164,7 @@ export function mockSdk() {
   });
 
 }
+
+export function getLastInstance(SplitFactoryMock: any) {
+  return SplitFactoryMock.mock.results.slice(-1)[0].value;
+}

src/__tests__/testUtils/utils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { ISplitContextValues } from '../../types';
+import { ISplitStatus } from '../../types';
 const { SplitFactory: originalSplitFactory } = jest.requireActual('@splitsoftware/splitio/client');
 
 export interface TestComponentProps {
@@ -116,9 +116,7 @@ export function testAttributesBinding(Component: React.FunctionComponent<TestCom
   wrapper.rerender(<Component splitKey={undefined} attributesFactory={undefined} attributesClient={undefined} testSwitch={attributesBindingSwitch} factory={factory} />);
 }
 
-export const INITIAL_CONTEXT: ISplitContextValues = {
-  client: undefined,
-  factory: undefined,
+export const INITIAL_STATUS: ISplitStatus = {
   isReady: false,
   isReadyFromCache: false,
   isTimedout: false,

src/__tests__/useSplitManager.test.tsx

@@ -14,6 +14,7 @@ import { getStatus } from '../utils';
 import { SplitFactoryProvider } from '../SplitFactoryProvider';
 import { useSplitManager } from '../useSplitManager';
 import { EXCEPTION_NO_SFP } from '../constants';
+import { INITIAL_STATUS } from './testUtils/utils';
 
 describe('useSplitManager', () => {
 
@@ -33,12 +34,7 @@ describe('useSplitManager', () => {
       manager: outerFactory.manager(),
       client: outerFactory.client(),
       factory: outerFactory,
-      hasTimedout: false,
-      isDestroyed: false,
-      isReady: false,
-      isReadyFromCache: false,
-      isTimedout: false,
-      lastUpdate: 0,
+      ...INITIAL_STATUS,
     });
 
     act(() => (outerFactory.client() as any).__emitter__.emit(Event.SDK_READY));