Merge pull request #146 from splitio/add_hooks

Add internal hooks

Author: EmilianoSanchez

.eslintrc.js

@@ -55,7 +55,7 @@ module.exports = {
       'compat/compat': ['error', 'defaults, not ie < 11'],
       'no-throw-literal': 'error',
       'import/no-self-import': 'error',
-      // 'import/no-default-export': 'error', // Default exports are a common practice in React
+      'import/no-default-export': 'error',
     }
   }]
 }

package.json

@@ -100,7 +100,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run check",
+      "pre-commit": "npm run check && npm run build",
       "pre-push": "npm test && npm run build"
     }
   }

src/SplitClient.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitContext from './SplitContext';
+import { SplitContext } from './SplitContext';
 import { ISplitClientProps, ISplitContextValues, IUpdateProps } from './types';
 import { ERROR_SC_NO_FACTORY } from './constants';
 import { getStatus, getSplitSharedClient, initAttributes } from './utils';
@@ -119,11 +119,13 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
   render() {
     const { children } = this.props;
     return (
-      <SplitContext.Provider value={this.state} >{
-        typeof children === 'function' ?
-          children({ ...this.state }) :
-          children
-      }</SplitContext.Provider>
+      <SplitContext.Provider value={this.state} >
+        {
+          typeof children === 'function' ?
+            children({ ...this.state }) :
+            children
+        }
+      </SplitContext.Provider>
     );
   }
 }
@@ -138,19 +140,17 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients}
  */
-function SplitClient(props: ISplitClientProps) {
+export function SplitClient(props: ISplitClientProps) {
   return (
-    <SplitContext.Consumer>{
-      (splitContext: ISplitContextValues) => {
+    <SplitContext.Consumer>
+      {(splitContext: ISplitContextValues) => {
         const { factory } = splitContext;
         // getSplitSharedClient is idempotent like factory.client: it returns the same client given the same factory, Split Key and TT
         const client = factory ? getSplitSharedClient(factory, props.splitKey, props.trafficType, props.attributes) : null;
         return (
           <SplitComponent {...props} factory={factory} client={client} attributes={props.attributes} />
         );
-      }
-    }</SplitContext.Consumer>
+      }}
+    </SplitContext.Consumer>
   );
 }
-
-export default SplitClient;

src/SplitContext.ts

@@ -4,12 +4,7 @@ import { EXCEPTION_NO_REACT_OR_CREATECONTEXT } from './constants';
 
 if (!React || !React.createContext) throw new Error(EXCEPTION_NO_REACT_OR_CREATECONTEXT);
 
-/**
- * Split Context is the React Context instance that represents our SplitIO global state.
- * It contains Split SDK objects, such as a factory instance, a client and its status (isReady, isTimedout, lastUpdate)
- * The context is created with default empty values, that eventually SplitFactory and SplitClient access and update.
- */
-const SplitContext = React.createContext<ISplitContextValues>({
+export const INITIAL_CONTEXT: ISplitContextValues = {
   client: null,
   factory: null,
   isReady: false,
@@ -18,7 +13,11 @@ const SplitContext = React.createContext<ISplitContextValues>({
   hasTimedout: false,
   lastUpdate: 0,
   isDestroyed: false,
-});
+}
 
-export default SplitContext;
-export { ISplitContextValues };
+/**
+ * Split Context is the React Context instance that represents our SplitIO global state.
+ * It contains Split SDK objects, such as a factory instance, a client and its status (isReady, isTimedout, lastUpdate)
+ * The context is created with default empty values, that eventually SplitFactory and SplitClient access and update.
+ */
+export const SplitContext = React.createContext<ISplitContextValues>(INITIAL_CONTEXT);

src/SplitFactory.tsx

@@ -15,7 +15,7 @@ import { getSplitFactory, destroySplitFactory, IFactoryWithClients } from './uti
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK}
  */
-class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }> {
+export class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }> {
 
   static defaultProps: ISplitFactoryProps = {
     updateOnSdkUpdate: false,
@@ -77,5 +77,3 @@ class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitI
     );
   }
 }
-
-export default SplitFactory;

src/SplitTreatments.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import memoizeOne from 'memoize-one';
 import shallowEqual from 'shallowequal';
-import SplitContext from './SplitContext';
+import { SplitContext } from './SplitContext';
 import { ISplitTreatmentsProps, ISplitContextValues } from './types';
 import { getControlTreatmentsWithConfig, WARN_ST_NO_CLIENT } from './constants';
 
@@ -23,7 +23,7 @@ function evaluateFeatureFlags(client: SplitIO.IBrowserClient, lastUpdate: number
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations}
  */
-class SplitTreatments extends React.Component<ISplitTreatmentsProps> {
+export class SplitTreatments extends React.Component<ISplitTreatmentsProps> {
 
   private logWarning?: boolean;
 
@@ -62,5 +62,3 @@ class SplitTreatments extends React.Component<ISplitTreatmentsProps> {
   }
 
 }
-
-export default SplitTreatments;

src/__tests__/SplitClient.test.tsx

@@ -11,9 +11,9 @@ import { sdkBrowser } from './testUtils/sdkConfigs';
 
 /** Test target */
 import { ISplitClientChildProps } from '../types';
-import SplitFactory from '../SplitFactory';
-import SplitClient from '../SplitClient';
-import SplitContext, { ISplitContextValues } from '../SplitContext';
+import { SplitFactory } from '../SplitFactory';
+import { SplitClient } from '../SplitClient';
+import { SplitContext } from '../SplitContext';
 import { ERROR_SC_NO_FACTORY } from '../constants';
 import { testAttributesBinding, TestComponentProps } from './testUtils/utils';
 
@@ -121,7 +121,8 @@ describe('SplitClient', () => {
             return null;
           }}
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
 
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_FROM_CACHE));
@@ -171,7 +172,8 @@ describe('SplitClient', () => {
             return null;
           }}
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
 
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY));
@@ -216,7 +218,8 @@ describe('SplitClient', () => {
             return null;
           }}
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
 
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY));
@@ -229,14 +232,16 @@ describe('SplitClient', () => {
 
     const Component = () => {
       return (
-        <SplitContext.Consumer>{(value: ISplitContextValues) => {
-          expect(value.client).toBe(outerFactory.client('user2'));
-          expect(value.isReady).toBe(false);
-          expect(value.isTimedout).toBe(false);
-          expect(value.lastUpdate).toBe(0);
-          done();
-          return null;
-        }}</SplitContext.Consumer>
+        <SplitContext.Consumer>
+          {(value) => {
+            expect(value.client).toBe(outerFactory.client('user2'));
+            expect(value.isReady).toBe(false);
+            expect(value.isTimedout).toBe(false);
+            expect(value.lastUpdate).toBe(0);
+            done();
+            return null;
+          }}
+        </SplitContext.Consumer>
       );
     };
 
@@ -245,7 +250,8 @@ describe('SplitClient', () => {
         <SplitClient splitKey='user2' >
           <Component />
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
   });
 
   test('logs error and passes null client if rendered outside an SplitProvider component.', () => {
@@ -256,7 +262,8 @@ describe('SplitClient', () => {
           expect(client).toBe(null);
           return null;
         }}
-      </SplitClient>);
+      </SplitClient>
+    );
     expect(errorSpy).toBeCalledWith(ERROR_SC_NO_FACTORY);
   });
 
@@ -355,7 +362,8 @@ describe('SplitClient', () => {
     const wrapper = render(
       <SplitFactory factory={outerFactory} >
         <InnerComponent />
-      </SplitFactory>);
+      </SplitFactory>
+    );
   });
 
   test('attributes binding test with utility', (done) => {

src/__tests__/SplitContext.test.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import SplitContext, { ISplitContextValues } from '../SplitContext';
+import { SplitContext } from '../SplitContext';
 
 /**
  * Test default SplitContext value
  */
 test('SplitContext.Consumer shows default value', () => {
-  render(<SplitContext.Consumer>{(value: ISplitContextValues) => {
-    expect(value.factory).toBe(null);
-    expect(value.client).toBe(null);
-    expect(value.isReady).toBe(false);
-    expect(value.isReadyFromCache).toBe(false);
-    expect(value.hasTimedout).toBe(false);
-    expect(value.isTimedout).toBe(false);
-    expect(value.isDestroyed).toBe(false);
-    expect(value.lastUpdate).toBe(0);
-    return null;
-  }}</SplitContext.Consumer>);
+  render(
+    <SplitContext.Consumer>
+      {(value) => {
+        expect(value.factory).toBe(null);
+        expect(value.client).toBe(null);
+        expect(value.isReady).toBe(false);
+        expect(value.isReadyFromCache).toBe(false);
+        expect(value.hasTimedout).toBe(false);
+        expect(value.isTimedout).toBe(false);
+        expect(value.isDestroyed).toBe(false);
+        expect(value.lastUpdate).toBe(0);
+        return null;
+      }}
+    </SplitContext.Consumer>
+  );
 });