@hackler/react-sdk 11.1.0 → 11.2.1

package/lib/Context.d.ts

@@ -4,6 +4,7 @@ import { HackleReactSDKClient } from "./client";
 interface HackleContext {
     hackle: HackleReactSDKClient | undefined;
     user?: User;
+    initialized: boolean;
 }
 export declare const HackleContext: import("react").Context<HackleContext>;
 export declare const HackleContextConsumer: import("react").Consumer<HackleContext>;

package/lib/Context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../src/Context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE/C,UAAU,aAAa;IACrB,MAAM,EAAE,oBAAoB,GAAG,SAAS,CAAA;IACxC,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ;AAED,eAAO,MAAM,aAAa,wCAGxB,CAAA;AAEF,eAAO,MAAM,qBAAqB,yCAAyB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,yCAAyB,CAAA"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../src/Context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE/C,UAAU,aAAa;IACrB,MAAM,EAAE,oBAAoB,GAAG,SAAS,CAAA;IACxC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,aAAa,wCAIxB,CAAA;AAEF,eAAO,MAAM,qBAAqB,yCAAyB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,yCAAyB,CAAA"}

package/lib/Experiment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Experiment.d.ts","sourceRoot":"","sources":["../src/Experiment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,iBAAS,UAAU,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,eAAe,OAqB/D;AAED,eAAO,MAAM,gBAAgB,mBAAa,CAAA"}
+{"version":3,"file":"Experiment.d.ts","sourceRoot":"","sources":["../src/Experiment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,iBAAS,UAAU,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,eAAe,OAyB/D;AAED,eAAO,MAAM,gBAAgB,mBAAa,CAAA"}

package/lib/Feature.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Feature.d.ts","sourceRoot":"","sources":["../src/Feature.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,oBAAY,gBAAgB,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;AAEjE,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,gBAAgB,CAAA;CAC3B;AAQD,eAAO,MAAM,aAAa,uCAAU,CAAA"}
+{"version":3,"file":"Feature.d.ts","sourceRoot":"","sources":["../src/Feature.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,oBAAY,gBAAgB,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;AAEjE,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,gBAAgB,CAAA;CAC3B;AAYD,eAAO,MAAM,aAAa,uCAAU,CAAA"}

package/lib/Provider.d.ts

@@ -5,8 +5,9 @@ interface ProviderProps {
     hackleClient: HackleReactSDKClient;
     user?: User;
     timeout?: number;
+    supportSSR?: boolean;
     children?: ReactNode;
 }
-export declare function HackleProvider({ hackleClient, user, timeout, children }: ProviderProps): JSX.Element | null;
+export declare function HackleProvider({ hackleClient, user, timeout, supportSSR, children }: ProviderProps): JSX.Element | null;
 export {};
 //# sourceMappingURL=Provider.d.ts.map

package/lib/Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../src/Provider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE/C,UAAU,aAAa;IACrB,YAAY,EAAE,oBAAoB,CAAA;IAClC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,OAAc,EAAE,QAAQ,EAAE,EAAE,aAAa,sBA4B7F"}
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../src/Provider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE/C,UAAU,aAAa;IACrB,YAAY,EAAE,oBAAoB,CAAA;IAClC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,OAAc,EAAE,UAAkB,EAAE,QAAQ,EAAE,EAAE,aAAa,sBAiDjH"}

package/lib/config.d.ts

@@ -1,3 +1,3 @@
 export declare const SDK_NAME_HEADER = "react-sdk";
-export declare const SDK_VERSION_HEADER = "11.1.0";
+export declare const SDK_VERSION_HEADER = "11.2.1";
 //# sourceMappingURL=config.d.ts.map

package/lib/hooks.d.ts

@@ -1,15 +1,30 @@
-import { Decision, FeatureFlagDecision, HackleEvent, PageView } from "@hackler/javascript-sdk";
+import { Decision, FeatureFlagDecision, HackleEvent } from "@hackler/javascript-sdk";
+interface Loadable {
+    isLoading: boolean;
+}
+export interface VariationResult extends Loadable {
+    variation: string;
+}
+export interface VariationDetailResult extends Loadable {
+    decision: Decision;
+}
+export interface FeatureFlagResult extends Loadable {
+    isOn: boolean;
+}
+export interface FeatureFlagDetailResult extends Loadable {
+    decision: FeatureFlagDecision;
+}
 export declare function useVariation(experimentKey: number, defaultVariation?: string): string;
 export declare function useVariationDetail(experimentKey: number, defaultVariation?: string): Decision;
+export declare function useLoadableVariation(experimentKey: number, defaultVariation?: string): VariationResult;
+export declare function useLoadableVariationDetail(experimentKey: number, defaultVariation?: string): VariationDetailResult;
 export declare function useFeature(featureKey: number): boolean;
 export declare function useFeatureFlagDetail(featureKey: number): FeatureFlagDecision;
+export declare function useLoadableFeature(featureKey: number): FeatureFlagResult;
+export declare function useLoadableFeatureDetail(featureKey: number): FeatureFlagDetailResult;
 interface Track {
     (event: HackleEvent): void;
 }
 export declare function useTrack(): Track;
-interface TrackPageView {
-    (option?: PageView): void;
-}
-export declare function usePageView(): TrackPageView;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/lib/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAER,mBAAmB,EACnB,WAAW,EAEX,QAAQ,EAET,MAAM,yBAAyB,CAAA;AAOhC,wBAAgB,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,SAAM,GAAG,MAAM,CA6BlF;AAED,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,SAAM,GAAG,QAAQ,CA6B1F;AAED,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CA6BtD;AAED,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,mBAAmB,CA6B5E;AAED,UAAU,KAAK;IACb,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAA;CAC3B;AACD,wBAAgB,QAAQ,IAAI,KAAK,CAWhC;AAED,UAAU,aAAa;IACrB,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;CAC1B;AACD,wBAAgB,WAAW,IAAI,aAAa,CAoB3C"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,mBAAmB,EAAE,WAAW,EAAgB,MAAM,yBAAyB,CAAA;AAOlH,UAAU,QAAQ;IAChB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,QAAQ,EAAE,QAAQ,CAAA;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,uBAAwB,SAAQ,QAAQ;IACvD,QAAQ,EAAE,mBAAmB,CAAA;CAC9B;AAED,wBAAgB,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,SAAM,GAAG,MAAM,CA+BlF;AAED,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,SAAM,GAAG,QAAQ,CA8B1F;AAED,wBAAgB,oBAAoB,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,SAAM,GAAG,eAAe,CAOnG;AAED,wBAAgB,0BAA0B,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,SAAM,GAAG,qBAAqB,CAmC/G;AAED,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CA8BtD;AAED,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,mBAAmB,CA8B5E;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,iBAAiB,CAOxE;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,MAAM,GAAG,uBAAuB,CAkCpF;AAED,UAAU,KAAK;IACb,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAA;CAC3B;AACD,wBAAgB,QAAQ,IAAI,KAAK,CAShC"}

package/lib/index.d.ts

@@ -2,7 +2,7 @@ export * from "@hackler/javascript-sdk";
 export { createInstance } from "./client";
 export { HackleProvider } from "./Provider";
 export { HackleContext, HackleContextProvider, HackleContextConsumer } from "./Context";
-export { useVariation, useVariationDetail, useTrack, useFeature, useFeatureFlagDetail } from "./hooks";
+export { useVariation, useVariationDetail, useTrack, useFeature, useFeatureFlagDetail, useLoadableVariation, useLoadableVariationDetail, useLoadableFeature, useLoadableFeatureDetail, VariationResult, VariationDetailResult, FeatureFlagResult, FeatureFlagDetailResult } from "./hooks";
 export { HackleExperiment } from "./Experiment";
 export { HackleVariation } from "./Variation";
 export { HackleFeature } from "./Feature";

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAA;AACvF,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AACtG,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAA;AACvF,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,oBAAoB,EACpB,0BAA0B,EAC1B,kBAAkB,EAClB,wBAAwB,EACxB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA"}

package/lib/index.es.js

@@ -48,7 +48,7 @@ function __read(o, n) {
 }
 
 var SDK_NAME_HEADER = "react-sdk";
-var SDK_VERSION_HEADER = "11.1.0";
+var SDK_VERSION_HEADER = "11.2.1";
 
 var HackleReactSDKClient = /** @class */ (function () {
     function HackleReactSDKClient(sdkKey, config) {
@@ -87,17 +87,18 @@ function createInstance(sdkKey, config) {
 var HackleContext = createContext({
     hackle: undefined,
     user: undefined,
+    initialized: false,
 });
 var HackleContextConsumer = HackleContext.Consumer;
 var HackleContextProvider = HackleContext.Provider;
 
 function HackleProvider(_a) {
-    var hackleClient = _a.hackleClient, user = _a.user, _b = _a.timeout, timeout = _b === void 0 ? 3000 : _b, children = _a.children;
+    var hackleClient = _a.hackleClient, user = _a.user, _b = _a.timeout, timeout = _b === void 0 ? 3000 : _b, _c = _a.supportSSR, supportSSR = _c === void 0 ? false : _c, children = _a.children;
     var state = {
         hackle: hackleClient,
         user: user,
+        initialized: false
     };
-    var _c = __read(useState(false), 2), ready = _c[0], setReady = _c[1];
     var _d = __read(useState(state), 2), value = _d[0], setValue = _d[1];
     useEffect(function () {
         setValue(function (prevState) {
@@ -107,21 +108,32 @@ function HackleProvider(_a) {
     useEffect(function () {
         hackleClient.onInitialized({ timeout: timeout })
             .then(function () {
-            setReady(true);
+            setValue(function (prevState) {
+                return __assign(__assign({}, prevState), { initialized: true });
+            });
         }, function () {
-            setReady(true);
+            setValue(function (prevState) {
+                return __assign(__assign({}, prevState), { initialized: true });
+            });
+        }).catch(function () {
+            setValue(function (prevState) {
+                return __assign(__assign({}, prevState), { initialized: true });
+            });
         });
     }, [hackleClient]);
-    return ready ? React__default.createElement(HackleContextProvider, { value: value }, children) : null;
+    if (supportSSR) {
+        return React__default.createElement(HackleContextProvider, { value: value }, children);
+    }
+    return value.initialized ? React__default.createElement(HackleContextProvider, { value: value }, children) : null;
 }
 
 var log = Logger.log;
 function useVariation(experimentKey, defaultVariation) {
     if (defaultVariation === void 0) { defaultVariation = "A"; }
-    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getVariation = useCallback(function () {
-        return (hackle === null || hackle === void 0 ? void 0 : hackle.variation(experimentKey, user)) || defaultVariation;
-    }, [defaultVariation, experimentKey, user, hackle]);
+        return initialized && (hackle === null || hackle === void 0 ? void 0 : hackle.variation(experimentKey, user)) || defaultVariation;
+    }, [defaultVariation, experimentKey, user, hackle, initialized]);
     var _b = __read(useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -133,7 +145,8 @@ function useVariation(experimentKey, defaultVariation) {
     }), 2), variation = _b[0], setVariation = _b[1];
     var currentInput = {
         key: experimentKey,
-        user: user
+        user: user,
+        initialized: initialized
     };
     var _c = __read(useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -144,10 +157,10 @@ function useVariation(experimentKey, defaultVariation) {
 }
 function useVariationDetail(experimentKey, defaultVariation) {
     if (defaultVariation === void 0) { defaultVariation = "A"; }
-    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getVariationDetail = useCallback(function () {
         return (hackle === null || hackle === void 0 ? void 0 : hackle.variationDetail(experimentKey, user)) || Decision.of(defaultVariation, DecisionReason.EXCEPTION);
-    }, [defaultVariation, experimentKey, user, hackle]);
+    }, [defaultVariation, experimentKey, user, hackle, initialized]);
     var _b = __read(useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -159,7 +172,8 @@ function useVariationDetail(experimentKey, defaultVariation) {
     }), 2), variationDetail = _b[0], setVariationDetail = _b[1];
     var currentInput = {
         key: experimentKey,
-        user: user
+        user: user,
+        initialized: initialized
     };
     var _c = __read(useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -168,11 +182,50 @@ function useVariationDetail(experimentKey, defaultVariation) {
     }
     return variationDetail;
 }
+function useLoadableVariation(experimentKey, defaultVariation) {
+    if (defaultVariation === void 0) { defaultVariation = "A"; }
+    var _a = useLoadableVariationDetail(experimentKey, defaultVariation), isLoading = _a.isLoading, decision = _a.decision;
+    return {
+        isLoading: isLoading,
+        variation: decision.variation
+    };
+}
+function useLoadableVariationDetail(experimentKey, defaultVariation) {
+    if (defaultVariation === void 0) { defaultVariation = "A"; }
+    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
+    var getVariationDetail = useCallback(function () {
+        if (!initialized) {
+            return Decision.of(defaultVariation, DecisionReason.SDK_NOT_READY);
+        }
+        return (hackle === null || hackle === void 0 ? void 0 : hackle.variationDetail(experimentKey, user)) || Decision.of(defaultVariation, DecisionReason.EXCEPTION);
+    }, [defaultVariation, experimentKey, user, hackle, initialized]);
+    var _b = __read(useState(function () {
+        if (notExistClient(hackle)) {
+            log.error("HackleClient is not existed");
+            return Decision.of(defaultVariation, DecisionReason.EXCEPTION);
+        }
+        return getVariationDetail();
+    }), 2), variationDetail = _b[0], setVariationDetail = _b[1];
+    var currentInput = {
+        key: experimentKey,
+        user: user,
+        initialized: initialized
+    };
+    var _c = __read(useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
+    if (!isInputEqual(prevInput, currentInput)) {
+        setPrevInput(currentInput);
+        setVariationDetail(getVariationDetail());
+    }
+    return {
+        isLoading: !initialized,
+        decision: variationDetail
+    };
+}
 function useFeature(featureKey) {
-    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getIsOn = useCallback(function () {
         return (hackle === null || hackle === void 0 ? void 0 : hackle.isFeatureOn(featureKey, user)) || false;
-    }, [featureKey, user, hackle]);
+    }, [featureKey, user, hackle, initialized]);
     var _b = __read(useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -185,6 +238,7 @@ function useFeature(featureKey) {
     var currentInput = {
         key: featureKey,
         user: user,
+        initialized: initialized
     };
     var _c = __read(useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -194,10 +248,10 @@ function useFeature(featureKey) {
     return isOn;
 }
 function useFeatureFlagDetail(featureKey) {
-    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getFeatureDetail = useCallback(function () {
         return (hackle === null || hackle === void 0 ? void 0 : hackle.featureFlagDetail(featureKey, user)) || FeatureFlagDecision.off(DecisionReason.EXCEPTION);
-    }, [featureKey, user, hackle]);
+    }, [featureKey, user, hackle, initialized]);
     var _b = __read(useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -210,6 +264,7 @@ function useFeatureFlagDetail(featureKey) {
     var currentInput = {
         key: featureKey,
         user: user,
+        initialized: initialized
     };
     var _c = __read(useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -218,12 +273,47 @@ function useFeatureFlagDetail(featureKey) {
     }
     return featureDetail;
 }
+function useLoadableFeature(featureKey) {
+    var _a = useLoadableFeatureDetail(featureKey), isLoading = _a.isLoading, decision = _a.decision;
+    return {
+        isLoading: isLoading,
+        isOn: decision.isOn
+    };
+}
+function useLoadableFeatureDetail(featureKey) {
+    var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
+    var getFeatureDetail = useCallback(function () {
+        if (!initialized) {
+            return FeatureFlagDecision.off(DecisionReason.SDK_NOT_READY);
+        }
+        return (hackle === null || hackle === void 0 ? void 0 : hackle.featureFlagDetail(featureKey, user)) || FeatureFlagDecision.off(DecisionReason.EXCEPTION);
+    }, [featureKey, user, hackle, initialized]);
+    var _b = __read(useState(function () {
+        if (notExistClient(hackle)) {
+            log.error("HackleClient is not existed");
+            return FeatureFlagDecision.off(DecisionReason.EXCEPTION);
+        }
+        return getFeatureDetail();
+    }), 2), featureDetail = _b[0], setFeatureDetail = _b[1];
+    var currentInput = {
+        key: featureKey,
+        user: user,
+        initialized: initialized
+    };
+    var _c = __read(useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
+    if (!isInputEqual(prevInput, currentInput)) {
+        setPrevInput(currentInput);
+        setFeatureDetail(getFeatureDetail());
+    }
+    return {
+        isLoading: !initialized,
+        decision: featureDetail
+    };
+}
 function useTrack() {
     var _a = useContext(HackleContext), hackle = _a.hackle, user = _a.user;
     if (notExistClient(hackle)) {
-        if ((typeof window) !== "undefined") {
-            log.error("HackleClient is not existed");
-        }
+        log.error("HackleClient is not existed");
         return function () { };
     }
     return function (event) { return hackle === null || hackle === void 0 ? void 0 : hackle.track(event, user); };
@@ -233,7 +323,8 @@ function notExistClient(hackle) {
 }
 function isInputEqual(prev, current) {
     var _a, _b, _c, _d;
-    return (prev.key === current.key &&
+    return (prev.initialized === current.initialized &&
+        prev.key === current.key &&
         ((_a = prev.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = current.user) === null || _b === void 0 ? void 0 : _b.id) &&
         arePropertiesEqual((_c = prev.user) === null || _c === void 0 ? void 0 : _c.properties, (_d = current.user) === null || _d === void 0 ? void 0 : _d.properties));
 }
@@ -258,7 +349,10 @@ function coerceUnknownToProperties(props) {
 
 function Experiment(_a) {
     var experimentKey = _a.experimentKey, children = _a.children;
-    var variation = useVariation(experimentKey);
+    var _b = useLoadableVariation(experimentKey), isLoading = _b.isLoading, variation = _b.variation;
+    if (isLoading) {
+        return null;
+    }
     if (!!children && typeof children === "function") {
         return children(variation);
     }
@@ -287,9 +381,12 @@ function Variation(_a) {
 var HackleVariation = Variation;
 
 var Feature = function (props) {
-    var featureOn = useFeature(props.featureKey);
+    var _a = useLoadableFeature(props.featureKey), isLoading = _a.isLoading, featureOn = _a.isOn;
+    if (isLoading) {
+        return null;
+    }
     return React__default.createElement(React__default.Fragment, null, props.children(featureOn));
 };
 var HackleFeature = Feature;
 
-export { HackleContext, HackleContextConsumer, HackleContextProvider, HackleExperiment, HackleFeature, HackleProvider, HackleVariation, createInstance, useFeature, useFeatureFlagDetail, useTrack, useVariation, useVariationDetail };
+export { HackleContext, HackleContextConsumer, HackleContextProvider, HackleExperiment, HackleFeature, HackleProvider, HackleVariation, createInstance, useFeature, useFeatureFlagDetail, useLoadableFeature, useLoadableFeatureDetail, useLoadableVariation, useLoadableVariationDetail, useTrack, useVariation, useVariationDetail };

package/lib/index.js

@@ -73,7 +73,7 @@ function __read(o, n) {
 }
 
 var SDK_NAME_HEADER = "react-sdk";
-var SDK_VERSION_HEADER = "11.1.0";
+var SDK_VERSION_HEADER = "11.2.1";
 
 var HackleReactSDKClient = /** @class */ (function () {
     function HackleReactSDKClient(sdkKey, config) {
@@ -112,17 +112,18 @@ function createInstance(sdkKey, config) {
 var HackleContext = React.createContext({
     hackle: undefined,
     user: undefined,
+    initialized: false,
 });
 var HackleContextConsumer = HackleContext.Consumer;
 var HackleContextProvider = HackleContext.Provider;
 
 function HackleProvider(_a) {
-    var hackleClient = _a.hackleClient, user = _a.user, _b = _a.timeout, timeout = _b === void 0 ? 3000 : _b, children = _a.children;
+    var hackleClient = _a.hackleClient, user = _a.user, _b = _a.timeout, timeout = _b === void 0 ? 3000 : _b, _c = _a.supportSSR, supportSSR = _c === void 0 ? false : _c, children = _a.children;
     var state = {
         hackle: hackleClient,
         user: user,
+        initialized: false
     };
-    var _c = __read(React.useState(false), 2), ready = _c[0], setReady = _c[1];
     var _d = __read(React.useState(state), 2), value = _d[0], setValue = _d[1];
     React.useEffect(function () {
         setValue(function (prevState) {
@@ -132,21 +133,32 @@ function HackleProvider(_a) {
     React.useEffect(function () {
         hackleClient.onInitialized({ timeout: timeout })
             .then(function () {
-            setReady(true);
+            setValue(function (prevState) {
+                return __assign(__assign({}, prevState), { initialized: true });
+            });
         }, function () {
-            setReady(true);
+            setValue(function (prevState) {
+                return __assign(__assign({}, prevState), { initialized: true });
+            });
+        }).catch(function () {
+            setValue(function (prevState) {
+                return __assign(__assign({}, prevState), { initialized: true });
+            });
         });
     }, [hackleClient]);
-    return ready ? React__default["default"].createElement(HackleContextProvider, { value: value }, children) : null;
+    if (supportSSR) {
+        return React__default["default"].createElement(HackleContextProvider, { value: value }, children);
+    }
+    return value.initialized ? React__default["default"].createElement(HackleContextProvider, { value: value }, children) : null;
 }
 
 var log = Hackle.Logger.log;
 function useVariation(experimentKey, defaultVariation) {
     if (defaultVariation === void 0) { defaultVariation = "A"; }
-    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getVariation = React.useCallback(function () {
-        return (hackle === null || hackle === void 0 ? void 0 : hackle.variation(experimentKey, user)) || defaultVariation;
-    }, [defaultVariation, experimentKey, user, hackle]);
+        return initialized && (hackle === null || hackle === void 0 ? void 0 : hackle.variation(experimentKey, user)) || defaultVariation;
+    }, [defaultVariation, experimentKey, user, hackle, initialized]);
     var _b = __read(React.useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -158,7 +170,8 @@ function useVariation(experimentKey, defaultVariation) {
     }), 2), variation = _b[0], setVariation = _b[1];
     var currentInput = {
         key: experimentKey,
-        user: user
+        user: user,
+        initialized: initialized
     };
     var _c = __read(React.useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -169,10 +182,10 @@ function useVariation(experimentKey, defaultVariation) {
 }
 function useVariationDetail(experimentKey, defaultVariation) {
     if (defaultVariation === void 0) { defaultVariation = "A"; }
-    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getVariationDetail = React.useCallback(function () {
         return (hackle === null || hackle === void 0 ? void 0 : hackle.variationDetail(experimentKey, user)) || Hackle.Decision.of(defaultVariation, Hackle.DecisionReason.EXCEPTION);
-    }, [defaultVariation, experimentKey, user, hackle]);
+    }, [defaultVariation, experimentKey, user, hackle, initialized]);
     var _b = __read(React.useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -184,7 +197,8 @@ function useVariationDetail(experimentKey, defaultVariation) {
     }), 2), variationDetail = _b[0], setVariationDetail = _b[1];
     var currentInput = {
         key: experimentKey,
-        user: user
+        user: user,
+        initialized: initialized
     };
     var _c = __read(React.useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -193,11 +207,50 @@ function useVariationDetail(experimentKey, defaultVariation) {
     }
     return variationDetail;
 }
+function useLoadableVariation(experimentKey, defaultVariation) {
+    if (defaultVariation === void 0) { defaultVariation = "A"; }
+    var _a = useLoadableVariationDetail(experimentKey, defaultVariation), isLoading = _a.isLoading, decision = _a.decision;
+    return {
+        isLoading: isLoading,
+        variation: decision.variation
+    };
+}
+function useLoadableVariationDetail(experimentKey, defaultVariation) {
+    if (defaultVariation === void 0) { defaultVariation = "A"; }
+    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
+    var getVariationDetail = React.useCallback(function () {
+        if (!initialized) {
+            return Hackle.Decision.of(defaultVariation, Hackle.DecisionReason.SDK_NOT_READY);
+        }
+        return (hackle === null || hackle === void 0 ? void 0 : hackle.variationDetail(experimentKey, user)) || Hackle.Decision.of(defaultVariation, Hackle.DecisionReason.EXCEPTION);
+    }, [defaultVariation, experimentKey, user, hackle, initialized]);
+    var _b = __read(React.useState(function () {
+        if (notExistClient(hackle)) {
+            log.error("HackleClient is not existed");
+            return Hackle.Decision.of(defaultVariation, Hackle.DecisionReason.EXCEPTION);
+        }
+        return getVariationDetail();
+    }), 2), variationDetail = _b[0], setVariationDetail = _b[1];
+    var currentInput = {
+        key: experimentKey,
+        user: user,
+        initialized: initialized
+    };
+    var _c = __read(React.useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
+    if (!isInputEqual(prevInput, currentInput)) {
+        setPrevInput(currentInput);
+        setVariationDetail(getVariationDetail());
+    }
+    return {
+        isLoading: !initialized,
+        decision: variationDetail
+    };
+}
 function useFeature(featureKey) {
-    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getIsOn = React.useCallback(function () {
         return (hackle === null || hackle === void 0 ? void 0 : hackle.isFeatureOn(featureKey, user)) || false;
-    }, [featureKey, user, hackle]);
+    }, [featureKey, user, hackle, initialized]);
     var _b = __read(React.useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -210,6 +263,7 @@ function useFeature(featureKey) {
     var currentInput = {
         key: featureKey,
         user: user,
+        initialized: initialized
     };
     var _c = __read(React.useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -219,10 +273,10 @@ function useFeature(featureKey) {
     return isOn;
 }
 function useFeatureFlagDetail(featureKey) {
-    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user;
+    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
     var getFeatureDetail = React.useCallback(function () {
         return (hackle === null || hackle === void 0 ? void 0 : hackle.featureFlagDetail(featureKey, user)) || Hackle.FeatureFlagDecision.off(Hackle.DecisionReason.EXCEPTION);
-    }, [featureKey, user, hackle]);
+    }, [featureKey, user, hackle, initialized]);
     var _b = __read(React.useState(function () {
         if (notExistClient(hackle)) {
             if ((typeof window) !== "undefined") {
@@ -235,6 +289,7 @@ function useFeatureFlagDetail(featureKey) {
     var currentInput = {
         key: featureKey,
         user: user,
+        initialized: initialized
     };
     var _c = __read(React.useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
     if (!isInputEqual(prevInput, currentInput)) {
@@ -243,12 +298,47 @@ function useFeatureFlagDetail(featureKey) {
     }
     return featureDetail;
 }
+function useLoadableFeature(featureKey) {
+    var _a = useLoadableFeatureDetail(featureKey), isLoading = _a.isLoading, decision = _a.decision;
+    return {
+        isLoading: isLoading,
+        isOn: decision.isOn
+    };
+}
+function useLoadableFeatureDetail(featureKey) {
+    var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user, initialized = _a.initialized;
+    var getFeatureDetail = React.useCallback(function () {
+        if (!initialized) {
+            return Hackle.FeatureFlagDecision.off(Hackle.DecisionReason.SDK_NOT_READY);
+        }
+        return (hackle === null || hackle === void 0 ? void 0 : hackle.featureFlagDetail(featureKey, user)) || Hackle.FeatureFlagDecision.off(Hackle.DecisionReason.EXCEPTION);
+    }, [featureKey, user, hackle, initialized]);
+    var _b = __read(React.useState(function () {
+        if (notExistClient(hackle)) {
+            log.error("HackleClient is not existed");
+            return Hackle.FeatureFlagDecision.off(Hackle.DecisionReason.EXCEPTION);
+        }
+        return getFeatureDetail();
+    }), 2), featureDetail = _b[0], setFeatureDetail = _b[1];
+    var currentInput = {
+        key: featureKey,
+        user: user,
+        initialized: initialized
+    };
+    var _c = __read(React.useState(currentInput), 2), prevInput = _c[0], setPrevInput = _c[1];
+    if (!isInputEqual(prevInput, currentInput)) {
+        setPrevInput(currentInput);
+        setFeatureDetail(getFeatureDetail());
+    }
+    return {
+        isLoading: !initialized,
+        decision: featureDetail
+    };
+}
 function useTrack() {
     var _a = React.useContext(HackleContext), hackle = _a.hackle, user = _a.user;
     if (notExistClient(hackle)) {
-        if ((typeof window) !== "undefined") {
-            log.error("HackleClient is not existed");
-        }
+        log.error("HackleClient is not existed");
         return function () { };
     }
     return function (event) { return hackle === null || hackle === void 0 ? void 0 : hackle.track(event, user); };
@@ -258,7 +348,8 @@ function notExistClient(hackle) {
 }
 function isInputEqual(prev, current) {
     var _a, _b, _c, _d;
-    return (prev.key === current.key &&
+    return (prev.initialized === current.initialized &&
+        prev.key === current.key &&
         ((_a = prev.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = current.user) === null || _b === void 0 ? void 0 : _b.id) &&
         arePropertiesEqual((_c = prev.user) === null || _c === void 0 ? void 0 : _c.properties, (_d = current.user) === null || _d === void 0 ? void 0 : _d.properties));
 }
@@ -283,7 +374,10 @@ function coerceUnknownToProperties(props) {
 
 function Experiment(_a) {
     var experimentKey = _a.experimentKey, children = _a.children;
-    var variation = useVariation(experimentKey);
+    var _b = useLoadableVariation(experimentKey), isLoading = _b.isLoading, variation = _b.variation;
+    if (isLoading) {
+        return null;
+    }
     if (!!children && typeof children === "function") {
         return children(variation);
     }
@@ -312,7 +406,10 @@ function Variation(_a) {
 var HackleVariation = Variation;
 
 var Feature = function (props) {
-    var featureOn = useFeature(props.featureKey);
+    var _a = useLoadableFeature(props.featureKey), isLoading = _a.isLoading, featureOn = _a.isOn;
+    if (isLoading) {
+        return null;
+    }
     return React__default["default"].createElement(React__default["default"].Fragment, null, props.children(featureOn));
 };
 var HackleFeature = Feature;
@@ -327,6 +424,10 @@ exports.HackleVariation = HackleVariation;
 exports.createInstance = createInstance;
 exports.useFeature = useFeature;
 exports.useFeatureFlagDetail = useFeatureFlagDetail;
+exports.useLoadableFeature = useLoadableFeature;
+exports.useLoadableFeatureDetail = useLoadableFeatureDetail;
+exports.useLoadableVariation = useLoadableVariation;
+exports.useLoadableVariationDetail = useLoadableVariationDetail;
 exports.useTrack = useTrack;
 exports.useVariation = useVariation;
 exports.useVariationDetail = useVariationDetail;