@flagship.io/react-sdk 3.0.5 → 3.0.7-alpha.0

package/README.md

@@ -1,25 +1,27 @@
-## About Flagship
-
-​
-<img src="https://www.flagship.io/wp-content/uploads/Flagship-horizontal-black-wake-AB.png" alt="drawing" width="150"/>
-​
-[Flagship by AB Tasty](https://www.flagship.io/) is a feature flagging platform for modern engineering and product teams. It eliminates the risks of future releases by separating code deployments from these releases :bulb: With Flagship, you have full control over the release process. You can:
-​
-
-- Switch features on or off through remote config.
-- Automatically roll-out your features gradually to monitor performance and gather feedback from your most relevant users.
-- Roll back any feature should any issues arise while testing in production.
-- Segment users by granting access to a feature based on certain user attributes.
-- Carry out A/B tests by easily assigning feature variations to groups of users.
-  ​
-  <img src="https://www.flagship.io/wp-content/uploads/demo-setup.png" alt="drawing" width="600"/>
-  ​
-  Flagship also allows you to choose whatever implementation method works for you from our many available SDKs or directly through a REST API. Additionally, our architecture is based on multi-cloud providers that offer high performance and highly-scalable managed services.
-  ​
-  **To learn more:**
-  ​
-- [Solution overview](https://www.flagship.io/#showvideo) - A 5mn video demo :movie_camera:
-- [Documentation](https://docs.developers.flagship.io/) - Our dev portal with guides, how tos, API and SDK references
-- [Sign up for a free trial](https://www.flagship.io/sign-up/) - Create your free account
-- [Guide to feature flagging](https://www.flagship.io/feature-flags/) - Everyhting you need to know about feature flag related use cases
-- [Blog](https://www.flagship.io/blog/) - Additional resources about release management
+[![Code coverage](https://github.com/flagship-io/flagship-react-sdk/actions/workflows/workflow.yml/badge.svg)](https://github.com/flagship-io/flagship-react-sdk/actions/workflows/workflow.yml) [![npm version](https://badge.fury.io/js/@flagship.io%2Freact-sdk.svg)](https://badge.fury.io/js/@flagship.io%2Freact-sdk)
+
+## About Flagship
+
+​
+<img src="https://www.flagship.io/wp-content/uploads/Flagship-horizontal-black-wake-AB.png" alt="drawing" width="150"/>
+​
+[Flagship by AB Tasty](https://www.flagship.io/) is a feature flagging platform for modern engineering and product teams. It eliminates the risks of future releases by separating code deployments from these releases :bulb: With Flagship, you have full control over the release process. You can:
+​
+
+- Switch features on or off through remote config.
+- Automatically roll-out your features gradually to monitor performance and gather feedback from your most relevant users.
+- Roll back any feature should any issues arise while testing in production.
+- Segment users by granting access to a feature based on certain user attributes.
+- Carry out A/B tests by easily assigning feature variations to groups of users.
+  ​
+  <img src="https://www.flagship.io/wp-content/uploads/demo-setup.png" alt="drawing" width="600"/>
+  ​
+  Flagship also allows you to choose whatever implementation method works for you from our many available SDKs or directly through a REST API. Additionally, our architecture is based on multi-cloud providers that offer high performance and highly-scalable managed services.
+  ​
+  **To learn more:**
+  ​
+- [Solution overview](https://www.flagship.io/#showvideo) - A 5mn video demo :movie_camera:
+- [Documentation](https://docs.developers.flagship.io/) - Our dev portal with guides, how tos, API and SDK references
+- [Sign up for a free trial](https://www.flagship.io/sign-up/) - Create your free account
+- [Guide to feature flagging](https://www.flagship.io/feature-flags/) - Everyhting you need to know about feature flag related use cases
+- [Blog](https://www.flagship.io/blog/) - Additional resources about release management

package/dist/Flag.js

@@ -0,0 +1,60 @@
+import Flagship, { FlagMetadata } from '@flagship.io/js-sdk';
+import { GET_FLAG_CAST_ERROR, GET_METADATA_CAST_ERROR, noVisitorMessage } from './constants';
+import { hasSameType, logInfo, logWarn, sprintf } from './utils';
+export class Flag {
+    constructor(defaultValue, key, flagsData) {
+        if (!flagsData) {
+            logWarn(Flagship.getConfig(), noVisitorMessage, 'GetFlag');
+        }
+        this.defaultValue = defaultValue;
+        this.key = key;
+        this.flag = flagsData === null || flagsData === void 0 ? void 0 : flagsData.get(key);
+    }
+    NotSameType() {
+        var _a;
+        return this.defaultValue !== null && this.defaultValue !== undefined && !hasSameType((_a = this.flag) === null || _a === void 0 ? void 0 : _a.value, this.defaultValue);
+    }
+    getValue() {
+        if (!this.flag) {
+            logWarn(Flagship.getConfig(), noVisitorMessage, 'getValue');
+            return this.defaultValue;
+        }
+        if (this.NotSameType()) {
+            logInfo(Flagship.getConfig(), sprintf(GET_FLAG_CAST_ERROR, this.key), 'getValue');
+            return this.defaultValue;
+        }
+        return this.flag.value;
+    }
+    exists() {
+        if (!this.flag) {
+            logWarn(Flagship.getConfig(), noVisitorMessage, 'exists');
+            return false;
+        }
+        return !!(this.flag.campaignId && this.flag.variationId && this.flag.variationGroupId);
+    }
+    userExposed() {
+        if (!this.flag) {
+            logWarn(Flagship.getConfig(), noVisitorMessage, 'userExposed');
+        }
+        return Promise.resolve();
+    }
+    get metadata() {
+        const functionName = 'metadata';
+        if (!this.flag) {
+            logWarn(Flagship.getConfig(), noVisitorMessage, functionName);
+            return FlagMetadata.Empty();
+        }
+        if (this.NotSameType()) {
+            logInfo(Flagship.getConfig(), sprintf(GET_METADATA_CAST_ERROR, this.key), functionName);
+            return FlagMetadata.Empty();
+        }
+        return new FlagMetadata({
+            campaignId: this.flag.campaignId,
+            variationGroupId: this.flag.variationGroupId,
+            variationId: this.flag.variationId,
+            isReference: !!this.flag.isReference,
+            campaignType: this.flag.campaignType,
+            slug: this.flag.slug
+        });
+    }
+}

package/dist/{types/FlagshipContext.d.ts → FlagshipContext.d.ts}

@@ -1,5 +1,5 @@
-import React, { ReactNode, Dispatch, SetStateAction } from "react";
-import { BucketingDTO, CampaignDTO, FlagDTO, IFlagshipConfig, primitive, Visitor } from "@flagship.io/js-sdk";
+import React, { ReactNode, Dispatch, SetStateAction } from 'react';
+import { BucketingDTO, CampaignDTO, FlagDTO, IFlagshipConfig, primitive, Visitor } from '@flagship.io/js-sdk';
 export interface FsStatus {
     /**
      * Boolean. When true, the SDK is still not ready to render your App otherwise it'll use default modifications.

package/dist/FlagshipContext.js

@@ -0,0 +1,168 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useState, useEffect, createContext, useRef } from 'react';
+import { Flagship, FlagshipStatus } from '@flagship.io/js-sdk';
+import { getModificationsFromCampaigns, logError, useNonInitialEffect } from './utils';
+const initStat = {
+    status: { isLoading: true, isSdkReady: false }
+};
+export const FlagshipContext = createContext({
+    state: Object.assign({}, initStat)
+});
+export const FlagshipProvider = ({ children, fetchNow, envId, apiKey, decisionMode, decisionApiUrl, timeout, logLevel, statusChangedCallback, logManager, pollingInterval, visitorData, onInitStart, onInitDone, onBucketingSuccess, onBucketingFail, loadingComponent, onBucketingUpdated, onUpdate, enableClientCache, initialBucketing, initialCampaigns, initialModifications, initialFlagsData, fetchFlagsOnBucketingUpdated, activateDeduplicationTime, hitDeduplicationTime, visitorCacheImplementation, hitCacheImplementation, disableCache, language }) => {
+    let modifications = new Map();
+    if (initialFlagsData && initialFlagsData.forEach) {
+        initialFlagsData.forEach((flag) => {
+            modifications.set(flag.key, flag);
+        });
+    }
+    else if (initialModifications && initialModifications.forEach) {
+        initialModifications.forEach((modification) => {
+            modifications.set(modification.key, modification);
+        });
+    }
+    else if (initialCampaigns) {
+        modifications = getModificationsFromCampaigns(initialCampaigns);
+    }
+    const [state, setState] = useState(Object.assign(Object.assign({}, initStat), { modifications }));
+    const [lastModified, setLastModified] = useState();
+    const stateRef = useRef();
+    stateRef.current = state;
+    useNonInitialEffect(() => {
+        var _a;
+        if (fetchFlagsOnBucketingUpdated) {
+            (_a = state.visitor) === null || _a === void 0 ? void 0 : _a.fetchFlags();
+        }
+    }, [lastModified]);
+    useNonInitialEffect(() => {
+        createVisitor(true);
+    }, [JSON.stringify(visitorData)]);
+    useEffect(() => {
+        initSdk();
+    }, [envId, apiKey, decisionMode]);
+    function initializeState(param) {
+        const newStatus = {
+            isSdkReady: param.isSdkReady,
+            isLoading: param.isLoading,
+            isVisitorDefined: !!param.fsVisitor,
+            lastRefresh: new Date().toISOString()
+        };
+        setState((currentState) => {
+            if (!currentState.status.firstInitSuccess) {
+                newStatus.firstInitSuccess = new Date().toISOString();
+            }
+            return Object.assign(Object.assign({}, currentState), { visitor: param.fsVisitor, modifications: param.fsVisitor.modifications, config: Flagship.getConfig(), status: Object.assign(Object.assign({}, currentState.status), newStatus) });
+        });
+        return newStatus;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onVisitorReady = (fsVisitor, error) => {
+        if (error) {
+            logError(Flagship.getConfig(), error.message || error, 'onReady');
+            return;
+        }
+        const newStatus = initializeState({
+            fsVisitor,
+            isSdkReady: true,
+            isLoading: false
+        });
+        if (onUpdate) {
+            onUpdate({
+                fsModifications: fsVisitor.modifications,
+                config: Flagship.getConfig(),
+                status: newStatus
+            });
+        }
+    };
+    const createVisitor = (fetchFlags = false) => {
+        if (!visitorData) {
+            return;
+        }
+        const fsVisitor = Flagship.newVisitor({
+            visitorId: visitorData.id,
+            context: visitorData.context,
+            isAuthenticated: visitorData.isAuthenticated,
+            hasConsented: visitorData.hasConsented,
+            initialCampaigns,
+            initialModifications,
+            initialFlagsData
+        });
+        fsVisitor === null || fsVisitor === void 0 ? void 0 : fsVisitor.on('ready', (error) => {
+            onVisitorReady(fsVisitor, error);
+        });
+        if (!fetchNow && fsVisitor && !fetchFlags) {
+            initializeState({
+                fsVisitor,
+                isSdkReady: true,
+                isLoading: false
+            });
+        }
+        if (fetchFlags && !fetchNow) {
+            fsVisitor === null || fsVisitor === void 0 ? void 0 : fsVisitor.fetchFlags();
+        }
+    };
+    const statusChanged = (status) => {
+        if (statusChangedCallback) {
+            statusChangedCallback(status);
+        }
+        switch (status) {
+            case FlagshipStatus.STARTING:
+                if (status === FlagshipStatus.STARTING && onInitStart) {
+                    onInitStart();
+                }
+                break;
+            case FlagshipStatus.READY_PANIC_ON:
+            case FlagshipStatus.READY:
+                if (onInitDone) {
+                    onInitDone();
+                }
+                createVisitor();
+                break;
+            case FlagshipStatus.NOT_INITIALIZED:
+                setState((prev) => (Object.assign(Object.assign({}, prev), { config: Flagship.getConfig() })));
+                break;
+        }
+    };
+    const onBucketingLastModified = (lastUpdate) => {
+        if (onBucketingUpdated) {
+            onBucketingUpdated(lastUpdate);
+        }
+        setLastModified(lastUpdate);
+    };
+    const initSdk = () => {
+        Flagship.start(envId, apiKey, {
+            decisionMode,
+            fetchNow,
+            timeout,
+            logLevel,
+            statusChangedCallback: statusChanged,
+            logManager,
+            pollingInterval,
+            onBucketingFail,
+            onBucketingSuccess,
+            enableClientCache,
+            decisionApiUrl,
+            onBucketingUpdated: onBucketingLastModified,
+            initialBucketing,
+            activateDeduplicationTime,
+            hitDeduplicationTime,
+            visitorCacheImplementation,
+            hitCacheImplementation,
+            disableCache,
+            language
+        });
+    };
+    const handleDisplay = () => {
+        const isFirstInit = !state.visitor;
+        if (state.status.isLoading && loadingComponent && isFirstInit && fetchNow) {
+            return React.createElement(React.Fragment, null, loadingComponent);
+        }
+        return React.createElement(React.Fragment, null, children);
+    };
+    return (React.createElement(FlagshipContext.Provider, { value: { state, setState } }, handleDisplay()));
+};
+FlagshipProvider.defaultProps = {
+    activateDeduplicationTime: 2,
+    hitDeduplicationTime: 2,
+    fetchNow: true,
+    language: 1
+};

package/dist/FlagshipHooks.js

@@ -0,0 +1,278 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useContext } from 'react';
+import { FlagshipContext } from './FlagshipContext';
+import { logError, logWarn } from './utils';
+import { Flag } from './Flag';
+import { noVisitorDefault, noVisitorMessage } from './constants';
+const checkType = (value, defaultValue) => (typeof value === 'object' &&
+    typeof defaultValue === 'object' &&
+    Array.isArray(value) === Array.isArray(defaultValue)) ||
+    typeof value === typeof defaultValue;
+const fsModificationsSync = (args) => {
+    const { visitor, params, activateAll, state, functionName, config } = args;
+    if (visitor) {
+        return visitor.getModificationsSync(params, activateAll);
+    }
+    const check = !state.status.isSdkReady &&
+        !!state.modifications &&
+        state.modifications.size > 0;
+    const flags = {};
+    if (check) {
+        params.forEach((item) => {
+            var _a;
+            const modification = (_a = state.modifications) === null || _a === void 0 ? void 0 : _a.get(item.key);
+            if (modification && checkType(modification === null || modification === void 0 ? void 0 : modification.value, item.defaultValue)) {
+                flags[item.key] = modification.value;
+            }
+            else {
+                flags[item.key] = item.defaultValue;
+            }
+        });
+        return flags;
+    }
+    logWarn(config, noVisitorDefault, functionName);
+    params.forEach((item) => {
+        flags[item.key] = item.defaultValue;
+    });
+    return flags;
+};
+/**
+ * Retrieve a modification value by its key. If no modification match the given key or if the stored value type and default value type do not match, default value will be returned.
+ * @deprecated use useFsFlag instead
+ */
+export const useFsModifications = (params, activateAll) => {
+    const { state } = useContext(FlagshipContext);
+    const { visitor, config } = state;
+    const functionName = 'useFsModifications';
+    return fsModificationsSync({
+        functionName,
+        state,
+        visitor,
+        config,
+        params,
+        activateAll
+    });
+};
+/**
+ * Retrieve a modification value by its key. If no modification match the given key or if the stored value type and default value type do not match, default value will be returned.
+ * @deprecated use useFsFlag instead
+ */
+export const useFsModification = (params) => {
+    var _a;
+    const { state } = useContext(FlagshipContext);
+    const { visitor, config } = state;
+    const functionName = 'useFsModifications';
+    if (visitor) {
+        return visitor.getModificationSync(params);
+    }
+    const modification = (_a = state.modifications) === null || _a === void 0 ? void 0 : _a.get(params.key);
+    if (!state.status.isSdkReady &&
+        modification &&
+        checkType(modification === null || modification === void 0 ? void 0 : modification.value, params.defaultValue)) {
+        return modification.value;
+    }
+    logWarn(config, noVisitorDefault, functionName);
+    return params.defaultValue;
+};
+const fsModificationInfoSync = (args) => {
+    var _a;
+    const { key, visitor, state } = args;
+    if (visitor) {
+        return visitor.getModificationInfoSync(key);
+    }
+    const modification = (_a = state.modifications) === null || _a === void 0 ? void 0 : _a.get(key);
+    if (!state.status.isSdkReady && modification) {
+        return modification;
+    }
+    return null;
+};
+/**
+ * Get the campaign modification information value matching the given key.
+ * @param {string} key key which identify the modification.
+ * @deprecated use useFsFlag instead
+ */
+export const useFsModificationInfo = (key) => {
+    const { state } = useContext(FlagshipContext);
+    const { visitor } = state;
+    return fsModificationInfoSync({ key, state, visitor });
+};
+const fsActivate = (params, functionName, visitor, config) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        if (!visitor) {
+            logWarn(config, noVisitorMessage, functionName);
+            return;
+        }
+        yield visitor.activateModifications(params);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }
+    catch (error) {
+        logWarn(config, error.message || error, functionName);
+    }
+});
+/**
+ * This hook returns a flag object by its key. If no flag match the given key an empty flag will be returned.
+ * @param key
+ * @param defaultValue
+ * @returns
+ */
+export const useFsFlag = (key, defaultValue) => {
+    const { state } = useContext(FlagshipContext);
+    const { visitor } = state;
+    if (!visitor) {
+        return new Flag(defaultValue, key, state.modifications);
+    }
+    return visitor.getFlag(key, defaultValue);
+};
+/**
+ * Report this user has seen this modification. Report this user has seen these modifications.
+ * @param params
+ * @deprecated use useFsFlag instead
+ * @returns
+ */
+export const useFsActivate = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    const { state } = useContext(FlagshipContext);
+    const { visitor, config } = state;
+    const functionName = 'useFsModifications';
+    yield fsActivate(params, functionName, visitor, config);
+});
+export const useFlagship = () => {
+    const { state } = useContext(FlagshipContext);
+    const { visitor, config } = state;
+    const fsUpdateContext = (context) => {
+        const functionName = 'updateContext';
+        if (!visitor) {
+            logError(config, noVisitorMessage, functionName);
+            return;
+        }
+        visitor.clearContext();
+        visitor.updateContext(context);
+    };
+    const fsClearContext = () => {
+        const functionName = 'cleanContext';
+        if (!visitor) {
+            logError(config, noVisitorMessage, functionName);
+            return;
+        }
+        visitor.clearContext();
+    };
+    const fsAuthenticate = (visitorId) => {
+        const functionName = 'authenticate';
+        if (!visitor) {
+            logError(config, noVisitorMessage, functionName);
+            return;
+        }
+        visitor.authenticate(visitorId);
+    };
+    const fsUnauthenticate = () => {
+        const functionName = 'unauthenticate';
+        if (!visitor) {
+            logError(config, noVisitorMessage, functionName);
+            return;
+        }
+        visitor.unauthenticate();
+    };
+    /**
+     * Send a Hit to Flagship servers for reporting.
+     */
+    const fsSendHit = (hit) => {
+        const functionName = 'sendHit';
+        if (!visitor) {
+            logError(config, noVisitorMessage, functionName);
+            return Promise.resolve();
+        }
+        return visitor.sendHit(hit);
+    };
+    /**
+     * Send a Hit to Flagship servers for reporting.
+     */
+    const fsSendHits = (hit) => {
+        const functionName = 'sendHits';
+        if (!visitor) {
+            logError(config, noVisitorMessage, functionName);
+            return Promise.resolve();
+        }
+        return visitor.sendHits(hit);
+    };
+    let modifications = visitor === null || visitor === void 0 ? void 0 : visitor.getModificationsArray();
+    if (!state.status.isSdkReady && state.modifications) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        modifications = Array.from(state.modifications, ([_key, item]) => item);
+    }
+    const activateModification = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        const functionName = 'activateModification';
+        yield fsActivate(params, functionName, visitor, config);
+    });
+    const synchronizeModifications = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!visitor) {
+            logWarn(config, noVisitorMessage, 'synchronizeModifications');
+            return;
+        }
+        yield visitor.synchronizeModifications();
+    });
+    const getModifications = (params, activateAll) => {
+        const functionName = 'getModifications';
+        return fsModificationsSync({
+            functionName,
+            state,
+            visitor,
+            config,
+            params,
+            activateAll
+        });
+    };
+    const getModificationInfo = (key) => {
+        return fsModificationInfoSync({ key, state, visitor });
+    };
+    function getFlag(key, defaultValue) {
+        if (!visitor) {
+            return new Flag(defaultValue, key, state.modifications);
+        }
+        return visitor.getFlag(key, defaultValue);
+    }
+    function fetchFlags() {
+        if (!visitor) {
+            logWarn(config, noVisitorMessage, 'fetchFlags');
+            return Promise.resolve();
+        }
+        return visitor.fetchFlags();
+    }
+    function setConsent(hasConsented) {
+        if (!visitor) {
+            logWarn(config, noVisitorMessage, 'setConsent');
+            return;
+        }
+        visitor.setConsent(hasConsented);
+    }
+    return {
+        visitorId: visitor === null || visitor === void 0 ? void 0 : visitor.visitorId,
+        anonymousId: visitor === null || visitor === void 0 ? void 0 : visitor.anonymousId,
+        context: Object.assign({}, visitor === null || visitor === void 0 ? void 0 : visitor.context),
+        hasConsented: visitor === null || visitor === void 0 ? void 0 : visitor.hasConsented,
+        setConsent,
+        updateContext: fsUpdateContext,
+        clearContext: fsClearContext,
+        authenticate: fsAuthenticate,
+        unauthenticate: fsUnauthenticate,
+        status: state.status,
+        activateModification,
+        synchronizeModifications,
+        getModifications,
+        modifications: modifications || [],
+        flagsData: (visitor === null || visitor === void 0 ? void 0 : visitor.getFlagsDataArray()) || [],
+        getModificationInfo,
+        hit: {
+            send: fsSendHit,
+            sendMultiple: fsSendHits
+        },
+        getFlag,
+        fetchFlags
+    };
+};

package/dist/constants.js

@@ -0,0 +1,4 @@
+export const noVisitorMessage = 'flagship Visitor not initialized.';
+export const noVisitorDefault = 'fsVisitor not initialized, returns default value';
+export const GET_FLAG_CAST_ERROR = 'Flag for key {0} has a different type. Default value is returned.';
+export const GET_METADATA_CAST_ERROR = 'Flag for key {0} has a different type with defaultValue, an empty metadata object is returned';