@featbit/react-client-sdk 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,90 @@
+/// <reference types="react" />
+import { IFbClient, IOptions, FlagValue } from '@featbit/js-client-sdk';
+export interface IFlagSet {
+    [key: string]: FlagValue;
+}
+/**
+ * Initialization options for the FeatBit React SDK. These are in addition to the options exposed
+ * by [[IOption]] which are common to both the JavaScript and React SDKs.
+ */
+export interface FbReactOptions {
+    /**
+     * Whether the React SDK should transform flag keys into camel-cased format.
+     * Using camel-cased flag keys allow for easier use as prop values, however,
+     * these keys won't directly match the flag keys as known to LaunchDarkly.
+     * Consequently, flag key collisions may be possible and the Code References feature
+     * will not function properly.
+     *
+     * This is false by default, if set to true, keys will automatically be converted to camel-case.
+     */
+    useCamelCaseFlagKeys?: boolean;
+    /**
+     * Whether to send flag evaluation events when a flag is read from the `flags` object
+     * returned by the `useFlags` hook. This is true by default, meaning flag evaluation
+     * events will be sent by default.
+     */
+    sendEventsOnFlagRead?: boolean;
+}
+/**
+ * Contains default values for the `reactOptions` object.
+ */
+export declare const defaultReactOptions: {
+    useCamelCaseFlagKeys: boolean;
+    sendEventsOnFlagRead: boolean;
+};
+/**
+ * Configuration object used to initialise FeatBit's JS client.
+ */
+export interface ProviderConfig {
+    /**
+     * If set to true, the FeatBit will not be initialized until the option prop has been defined.
+     */
+    deferInitialization?: boolean;
+    /**
+     * FeatBit initialization options. These options are common between FeatBit's JavaScript and React SDKs.
+     */
+    options?: IOptions;
+    /**
+     * Additional initialization options specific to the React SDK.
+     *
+     * @see options
+     */
+    reactOptions?: FbReactOptions;
+    /**
+     * Optionally, the FB can be initialised outside the provider
+     * and passed in, instead of being initialised by the provider.
+     * Note: it should only be passed in when it has emitted the 'ready'
+     * event, to ensure that the flags are properly set.
+     */
+    fbClient?: IFbClient;
+}
+/**
+ * The return type of withFbProvider HOC. Exported for testing purposes only.
+ *
+ * @ignore
+ */
+export interface EnhancedComponent extends React.Component {
+    subscribeToChanges(fbClient: IFbClient): void;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: ProviderConfig): Promise<void>;
+}
+/**
+ * Return type of `initClient`.
+ */
+export interface AllFlagsFbClient {
+    /**
+     * Contains all flags from FeatBit.
+     */
+    flags: IFlagSet;
+    /**
+     * An instance of `FB` from the FeatBit JS SDK.
+     */
+    fbClient: IFbClient;
+}
+/**
+ * Map of camelized flag keys to original unmodified flag keys.
+ */
+export interface FlagKeyMap {
+    [camelCasedKey: string]: string;
+}
+export * from '@featbit/js-client-sdk';

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Contains default values for the `reactOptions` object.
+ */
+export var defaultReactOptions = { useCamelCaseFlagKeys: false, sendEventsOnFlagRead: true };
+export * from '@featbit/js-client-sdk';
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"AA8BA;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,EAAC,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAC,CAAC;AAqE7F,cAAc,wBAAwB,CAAC"}

package/dist/useFbClient.d.ts

@@ -0,0 +1,11 @@
+import { IFbClient } from "@featbit/js-client-sdk";
+/**
+ * `useFbClient` is a custom hook which returns the underlying [FeatBit JavaScript SDK client object](https://github.com/featbit/featbit-js-client-sdk).
+ * Like the `useFlags` custom hook, `useFbClient` also uses the `useContext` primitive to access the FeatBit
+ * context set up by `withFbProvider`. You will still need to use the `withFbProvider` HOC
+ * to initialise the react sdk to use this custom hook.
+ *
+ * @return The `@featbit/js-client-sdk` `FB` object
+ */
+declare const useFbClient: () => IFbClient;
+export default useFbClient;

package/dist/useFbClient.js

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import context from './context';
+// tslint:disable:max-line-length
+/**
+ * `useFbClient` is a custom hook which returns the underlying [FeatBit JavaScript SDK client object](https://github.com/featbit/featbit-js-client-sdk).
+ * Like the `useFlags` custom hook, `useFbClient` also uses the `useContext` primitive to access the FeatBit
+ * context set up by `withFbProvider`. You will still need to use the `withFbProvider` HOC
+ * to initialise the react sdk to use this custom hook.
+ *
+ * @return The `@featbit/js-client-sdk` `FB` object
+ */
+// tslint:enable:max-line-length
+var useFbClient = function () {
+    var fbClient = useContext(context).fbClient;
+    return fbClient;
+};
+export default useFbClient;
+//# sourceMappingURL=useFbClient.js.map

package/dist/useFbClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFbClient.js","sourceRoot":"../src/","sources":["useFbClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,OAAsB,MAAM,WAAW,CAAC;AAG/C,iCAAiC;AACjC;;;;;;;GAOG;AACH,gCAAgC;AAChC,IAAM,WAAW,GAAG;IACV,IAAA,QAAQ,GAAI,UAAU,CAAY,OAAO,CAAC,SAAlC,CAAmC;IAEnD,OAAO,QAAS,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/useFlags.d.ts

@@ -0,0 +1,11 @@
+import { IFlagSet } from "./types";
+/**
+ * `useFlags` is a custom hook which returns all feature flags. It uses the `useContext` primitive
+ * to access the FeatBit context set up by `withFbProvider`. As such you will still need to
+ * use the `withFbProvider` HOC at the root of your app to initialize the React SDK and populate the
+ * context with `fbClient` and your flags.
+ *
+ * @return All the feature flags configured in FeatBit
+ */
+declare const useFlags: <T extends IFlagSet = IFlagSet>() => T;
+export default useFlags;

package/dist/useFlags.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import context from './context';
+/**
+ * `useFlags` is a custom hook which returns all feature flags. It uses the `useContext` primitive
+ * to access the FeatBit context set up by `withFbProvider`. As such you will still need to
+ * use the `withFbProvider` HOC at the root of your app to initialize the React SDK and populate the
+ * context with `fbClient` and your flags.
+ *
+ * @return All the feature flags configured in FeatBit
+ */
+var useFlags = function () {
+    var flags = useContext(context).flags;
+    return flags;
+};
+export default useFlags;
+//# sourceMappingURL=useFlags.js.map

package/dist/useFlags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlags.js","sourceRoot":"../src/","sources":["useFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,OAAsB,MAAM,WAAW,CAAC;AAG/C;;;;;;;GAOG;AACH,IAAM,QAAQ,GAAG;IACR,IAAA,KAAK,GAAI,UAAU,CAAY,OAAO,CAAC,MAAlC,CAAmC;IAE/C,OAAO,KAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,27 @@
+import { IFbClient } from '@featbit/js-client-sdk';
+import { IFlagSet } from "./types";
+/**
+ * Transforms a set of flags so that their keys are camelCased. This function ignores
+ * flag keys which start with `$`.
+ *
+ * @param rawFlags A mapping of flag keys and their values
+ * @return A transformed `IFeatureFlagSet` with camelCased flag keys
+ */
+export declare const camelCaseKeys: (rawFlags: IFlagSet) => IFlagSet;
+/**
+ * Retrieves flag values.
+ *
+ * @param fbClient FeatBit client
+ *
+ * @returns an `IFeatureFlagSet` with the current flag values from FeatBit
+ */
+export declare const fetchFlags: (fbClient: IFbClient) => Promise<{
+    [x: string]: string | undefined;
+}[]>;
+declare const _default: {
+    camelCaseKeys: (rawFlags: IFlagSet) => IFlagSet;
+    fetchFlags: (fbClient: IFbClient) => Promise<{
+        [x: string]: string | undefined;
+    }[]>;
+};
+export default _default;

package/dist/utils.js

@@ -0,0 +1,78 @@
+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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import camelCase from 'lodash.camelcase';
+/**
+ * Transforms a set of flags so that their keys are camelCased. This function ignores
+ * flag keys which start with `$`.
+ *
+ * @param rawFlags A mapping of flag keys and their values
+ * @return A transformed `IFeatureFlagSet` with camelCased flag keys
+ */
+export var camelCaseKeys = function (rawFlags) {
+    var flags = {};
+    for (var rawFlag in rawFlags) {
+        // Exclude system keys
+        if (rawFlag.indexOf('$') !== 0) {
+            flags[camelCase(rawFlag)] = rawFlags[rawFlag]; // tslint:disable-line:no-unsafe-any
+        }
+    }
+    return flags;
+};
+/**
+ * Retrieves flag values.
+ *
+ * @param fbClient FeatBit client
+ *
+ * @returns an `IFeatureFlagSet` with the current flag values from FeatBit
+ */
+export var fetchFlags = function (fbClient) { return __awaiter(void 0, void 0, void 0, function () {
+    var evalDetails;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, fbClient.getAllVariations()];
+            case 1:
+                evalDetails = _a.sent();
+                return [2 /*return*/, evalDetails.map(function (_a) {
+                        var _b;
+                        var flagKey = _a.flagKey, value = _a.value;
+                        return (_b = {}, _b[flagKey] = value, _b);
+                    })];
+        }
+    });
+}); };
+export default { camelCaseKeys: camelCaseKeys, fetchFlags: fetchFlags };
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../src/","sources":["utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAGzC;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,QAAkB;IAC9C,IAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,KAAK,IAAM,OAAO,IAAI,QAAQ,EAAE;QAC9B,sBAAsB;QACtB,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC9B,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,oCAAoC;SACpF;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,UACxB,QAAmB;;;;oBAEwB,qBAAM,QAAQ,CAAC,gBAAgB,EAAE,EAAA;;gBAAtE,WAAW,GAA0B,SAAiC;gBAE5E,sBAAO,WAAW,CAAC,GAAG,CAAC,UAAC,EAAgB;;4BAAf,OAAO,aAAA,EAAE,KAAK,WAAA;wBAAM,OAAA,UAAE,GAAC,OAAO,IAAG,KAAK,KAAE;oBAApB,CAAoB,CAAC,EAAC;;;KACpE,CAAC;AAEF,eAAe,EAAC,aAAa,eAAA,EAAE,UAAU,YAAA,EAAC,CAAC"}

package/dist/withFbConsumer.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { IFbClient } from '@featbit/js-client-sdk';
+import { IFlagSet } from "./types";
+/**
+ * Controls the props the wrapped component receives from the `FbConsumer` HOC.
+ */
+export interface ConsumerOptions {
+    /**
+     * If true then the wrapped component only receives the `fbClient` instance
+     * and nothing else.
+     */
+    clientOnly: boolean;
+}
+/**
+ * The possible props the wrapped component can receive from the `FbConsumer` HOC.
+ */
+export interface FbProps {
+    /**
+     * A map of feature flags from their keys to their values.
+     * Keys are camelCased using `lodash.camelcase`.
+     */
+    flags?: IFlagSet;
+    /**
+     * An instance of `FB` from the FeatBit JS Client SDK (`@featbit/js-client-sdk`)
+     */
+    fbClient?: IFbClient;
+}
+/**
+ * withFbConsumer is a function which accepts an optional options object and returns a function
+ * which accepts your React component. This function returns a HOC with flags
+ * and the FB instance injected via props.
+ *
+ * @param options - If you need only the `fbClient` instance and not flags, then set `{ clientOnly: true }`
+ * to only pass the fbClient prop to your component. Defaults to `{ clientOnly: false }`.
+ * @return A HOC with flags and the `fbClient` instance injected via props
+ */
+declare function withFbConsumer(options?: ConsumerOptions): <P>(WrappedComponent: React.ComponentType<P & FbProps>) => (props: P) => React.JSX.Element;
+export default withFbConsumer;

package/dist/withFbConsumer.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { Consumer } from './context';
+/**
+ * withFbConsumer is a function which accepts an optional options object and returns a function
+ * which accepts your React component. This function returns a HOC with flags
+ * and the FB instance injected via props.
+ *
+ * @param options - If you need only the `fbClient` instance and not flags, then set `{ clientOnly: true }`
+ * to only pass the fbClient prop to your component. Defaults to `{ clientOnly: false }`.
+ * @return A HOC with flags and the `fbClient` instance injected via props
+ */
+function withFbConsumer(options) {
+    if (options === void 0) { options = { clientOnly: false }; }
+    return function withFbConsumerHoc(WrappedComponent) {
+        return function (props) { return (React.createElement(Consumer, null, function (_a) {
+            var flags = _a.flags, fbClient = _a.fbClient;
+            if (options.clientOnly) {
+                return React.createElement(WrappedComponent, __assign({ fbClient: fbClient }, props));
+            }
+            return React.createElement(WrappedComponent, __assign({ flags: flags, fbClient: fbClient }, props));
+        })); };
+    };
+}
+export default withFbConsumer;
+//# sourceMappingURL=withFbConsumer.js.map

package/dist/withFbConsumer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFbConsumer.js","sourceRoot":"../src/","sources":["withFbConsumer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAa,MAAM,WAAW,CAAC;AA+BhD;;;;;;;;GAQG;AACH,SAAS,cAAc,CAAC,OAA8C;IAA9C,wBAAA,EAAA,YAA4B,UAAU,EAAE,KAAK,EAAC;IACpE,OAAO,SAAS,iBAAiB,CAAI,gBAAkD;QACrF,OAAO,UAAC,KAAQ,IAAK,OAAA,CACnB,oBAAC,QAAQ,QACL,UAAC,EAA4B;gBAA3B,KAAK,WAAA,EAAE,QAAQ,cAAA;YACjB,IAAI,OAAO,CAAC,UAAU,EAAE;gBACtB,OAAO,oBAAC,gBAAgB,aAAC,QAAQ,EAAG,QAAQ,IAAQ,KAAK,EAAK,CAAC;aAChE;YAED,OAAO,oBAAC,gBAAgB,aAAC,KAAK,EAAG,KAAK,EAAG,QAAQ,EAAG,QAAQ,IAAQ,KAAK,EAAK,CAAC;QACjF,CAAC,CACQ,CACZ,EAVoB,CAUpB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,eAAe,cAAc,CAAC"}

package/dist/withFbProvider.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ProviderConfig } from './types';
+import IntrinsicAttributes = React.JSX.IntrinsicAttributes;
+/**
+ * `withFbProvider` is a function which accepts a config object which is used to
+ * initialize `@featbit/js-client-sdk`.
+ *
+ * This HOC handles passing configuration to the `FbProvider`, which does the following:
+ * - It initializes the fbClient instance by calling `@featbit/js-client-sdk` init on `componentDidMount`
+ * - It saves all flags and the fbClient instance in the context API
+ * - It subscribes to flag changes and propagate them through the context API
+ *
+ * The difference between `withFbProvider` and `asyncWithFbProvider` is that `withFbProvider` initializes
+ * `@featbit/js-client-sdk` at `componentDidMount`. This means your flags and the fbClient are only available after
+ * your app has mounted. This can result in a flicker due to flag changes at startup time.
+ *
+ * `asyncWithFbProvider` initializes `@featbit/js-client-sdk` at the entry point of your app prior to render.
+ * This means that your flags and the fbClient are ready at the beginning of your app. This ensures your app does not
+ * flicker due to flag changes at startup time.
+ *
+ * @param config - The configuration used to initialize FeatBit JS Client SDK
+ * @return A function which accepts your root React component and returns a HOC
+ */
+export declare function withFbProvider<T extends IntrinsicAttributes = {}>(config: ProviderConfig): (WrappedComponent: React.ComponentType<T>) => any;
+export default withFbProvider;

package/dist/withFbProvider.js

@@ -0,0 +1,50 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { defaultReactOptions } from './types';
+import FbProvider from './provider';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+/**
+ * `withFbProvider` is a function which accepts a config object which is used to
+ * initialize `@featbit/js-client-sdk`.
+ *
+ * This HOC handles passing configuration to the `FbProvider`, which does the following:
+ * - It initializes the fbClient instance by calling `@featbit/js-client-sdk` init on `componentDidMount`
+ * - It saves all flags and the fbClient instance in the context API
+ * - It subscribes to flag changes and propagate them through the context API
+ *
+ * The difference between `withFbProvider` and `asyncWithFbProvider` is that `withFbProvider` initializes
+ * `@featbit/js-client-sdk` at `componentDidMount`. This means your flags and the fbClient are only available after
+ * your app has mounted. This can result in a flicker due to flag changes at startup time.
+ *
+ * `asyncWithFbProvider` initializes `@featbit/js-client-sdk` at the entry point of your app prior to render.
+ * This means that your flags and the fbClient are ready at the beginning of your app. This ensures your app does not
+ * flicker due to flag changes at startup time.
+ *
+ * @param config - The configuration used to initialize FeatBit JS Client SDK
+ * @return A function which accepts your root React component and returns a HOC
+ */
+export function withFbProvider(config) {
+    return function withFbProviderHoc(WrappedComponent) {
+        var userReactOptions = config.reactOptions;
+        var reactOptions = __assign(__assign({}, defaultReactOptions), userReactOptions);
+        var providerProps = __assign(__assign({}, config), { reactOptions: reactOptions });
+        function HoistedComponent(props) {
+            return (React.createElement(FbProvider, __assign({}, providerProps),
+                React.createElement(WrappedComponent, __assign({}, props))));
+        }
+        hoistNonReactStatics(HoistedComponent, WrappedComponent);
+        return HoistedComponent;
+    };
+}
+export default withFbProvider;
+//# sourceMappingURL=withFbProvider.js.map

package/dist/withFbProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFbProvider.js","sourceRoot":"../src/","sources":["withFbProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAkB,MAAM,SAAS,CAAC;AAC9D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,cAAc,CAC5B,MAAsB;IAEtB,OAAO,SAAS,iBAAiB,CAAC,gBAAwC;QACjE,IAAc,gBAAgB,GAAI,MAAM,aAAV,CAAW;QAChD,IAAM,YAAY,yBAAO,mBAAmB,GAAK,gBAAgB,CAAC,CAAC;QACnE,IAAM,aAAa,yBAAO,MAAM,KAAE,YAAY,cAAA,GAAC,CAAC;QAEhD,SAAS,gBAAgB,CAAC,KAAQ;YAChC,OAAO,CACL,oBAAC,UAAU,eAAM,aAAa;gBAC5B,oBAAC,gBAAgB,eAAM,KAAK,EAAK,CACtB,CACd,CAAC;QACJ,CAAC;QAED,oBAAoB,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;QAEzD,OAAO,gBAAgB,CAAC;IAC1B,CAAC,CAAC;AACJ,CAAC;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@featbit/react-client-sdk",
+  "version": "1.0.0",
+  "description": "FeatBit client SDK for React",
+  "keywords": [
+    "FeatBit",
+    "React",
+    "feature flags"
+  ],
+  "author": "FeatBit",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/featbit/featbit-react-client-sdk"
+  },
+  "homepage": "https://github.com/featbit/featbit-react-client-sdk",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "lint": "tslint -p tsconfig.json 'src/**/*.ts*'",
+    "lint:all": "npm run lint",
+    "check-typescript": "tsc",
+    "prepublishOnly": "npm run build",
+    "prettier": "prettier --write 'src/*.@(js|ts|tsx|json|css)'"
+  },
+  "devDependencies": {
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/lodash.camelcase": "^4.3.6",
+    "@types/prop-types": "^15.7.4",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "prettier": "^1.18.2",
+    "prop-types": "^15.7.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.0.0",
+    "rimraf": "^3.0.0",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-plugin-prettier": "^2.3.0",
+    "typescript": "^4.5.3"
+  },
+  "dependencies": {
+    "@featbit/js-client-sdk": "^3.0.0",
+    "hoist-non-react-statics": "^3.3.2",
+    "lodash.camelcase": "^4.3.0"
+  },
+  "peerDependencies": {
+    "react": "^16.6.3 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0"
+  }
+}

package/src/asyncWithFbProvider.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import { ProviderConfig, defaultReactOptions, IFlagSet } from './types';
+import { Provider } from './context';
+import { initClient } from './initClient';
+import getFlagsProxy from "./getFlagsProxy";
+
+/**
+ * This is an async function which initializes feature-flags.co's JS SDK (`@featbit/js-client-sdk`)
+ * and awaits it so all flags and the fbClient are ready before the consumer app is rendered.
+ *
+ * The difference between `withFbProvider` and `asyncWithFbProvider` is that `withFbProvider` initializes
+ * `@featbit/js-client-sdk` at componentDidMount. This means your flags and the fbClient are only available after
+ * your app has mounted. This can result in a flicker due to flag changes at startup time.
+ *
+ * `asyncWithFbProvider` initializes `@featbit/js-client-sdk` at the entry point of your app prior to render.
+ * This means that your flags and the fbClient are ready at the beginning of your app. This ensures your app does not
+ * flicker due to flag changes at startup time.
+ *
+ * `asyncWithFbProvider` accepts a config object which is used to initialize `@featbit/js-client-sdk`.
+ *
+ * `asyncWithFbProvider` does not support the `deferInitialization` config option because `asyncWithFbProvider` needs
+ * to be initialized at the entry point prior to render to ensure your flags and the fbClient are ready at the beginning
+ * of your app.
+ *
+ * It returns a provider which is a React FunctionComponent which:
+ * - saves all flags and the ldClient instance in the context API
+ * - subscribes to flag changes and propagate them through the context API
+ *
+ * @param config - The configuration used to initialize FeatBit's JS SDK
+ */
+export default async function asyncWithFbProvider(config: ProviderConfig) {
+  const {options, reactOptions: userReactOptions} = config;
+  const reactOptions = {...defaultReactOptions, ...userReactOptions};
+  const { flags: fetchedFlags, fbClient} = await initClient(reactOptions, options);
+
+  const bootstrapFlags = (options?.bootstrap || []).reduce((acc: {[key: string]: string}, flag: any) => {
+    acc[flag.id] = flag.variation;
+    return acc;
+  }, {} as {[key: string]: string});
+
+  const FbProvider = ({children}: { children: ReactNode }) => {
+    const [state, setState] = useState(() => ({
+      unproxiedFlags: fetchedFlags,
+      ...getFlagsProxy(fbClient, bootstrapFlags, fetchedFlags, reactOptions)
+    }));
+
+    useEffect(() => {
+      fbClient.on('update', (changedKeys: string[]) => {
+        const updates: IFlagSet = changedKeys.reduce(async (acc, key) => {
+          acc[key] = await fbClient.variation(key, '');
+          return acc;
+        }, {} as IFlagSet);
+
+        if (Object.keys(updates).length > 0) {
+          setState(({ unproxiedFlags }) => {
+            const updatedUnproxiedFlags = { ...unproxiedFlags, ...updates };
+
+            return {
+              unproxiedFlags: updatedUnproxiedFlags,
+              ...getFlagsProxy(fbClient, bootstrapFlags, updatedUnproxiedFlags, reactOptions),
+            };
+          });
+        }
+      });
+    }, []);
+
+    const { flags, flagKeyMap } = state;
+    return <Provider value={{ flags, flagKeyMap, fbClient }}>{ children }</Provider>;
+  };
+
+  return FbProvider;
+}

package/src/context.ts

@@ -0,0 +1,24 @@
+import { IFbClient } from '@featbit/js-client-sdk';
+import { createContext } from 'react';
+import { FlagKeyMap, IFlagSet } from "./types";
+
+interface FbContext {
+  flags: IFlagSet;
+
+  /**
+   * Map of camelized flag keys to their original unmodified form. Empty if useCamelCaseFlagKeys option is false.
+   */
+  flagKeyMap: FlagKeyMap;
+
+  fbClient?: IFbClient
+}
+
+const context = createContext<FbContext>({flags: {}, flagKeyMap: {}, fbClient: undefined});
+
+const {
+  Provider,
+  Consumer,
+} = context;
+
+export { Provider, Consumer, FbContext };
+export default context;