flagged - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

dist/flagged.cjs.development.js

@@ -7,15 +7,42 @@ 'use strict';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 var FeatureFlagsContext =
 /*#__PURE__*/
-React.createContext(null);
+React.createContext({});
+
+function transformFlags(features) {
+  if (!Array.isArray(features)) return features;
+  return Object.fromEntries(features.map(function (feature) {
+    return [feature, true];
+  }));
+}
+
+function mergeFeatures(a, b) {
+  return _extends({}, a, {}, b);
+}
+
 function FlagsProvider(_ref) {
-  var features = _ref.features,
+  var _ref$features = _ref.features,
+      features = _ref$features === void 0 ? {} : _ref$features,
       children = _ref.children;
-
-  if (!features || features === null || typeof features !== 'object') {
-    throw new TypeError('The features prop must be an object or an array.');
-  }
-
+  var currentFeatures = useFeatures();
   return React.createElement(FeatureFlagsContext.Provider, {
-    value: features
+    value: mergeFeatures(transformFlags(currentFeatures), transformFlags(features))
   }, children);
@@ -25,9 +52,3 @@ } // Custom Hook API
 function useFeatures() {
-  var features = React.useContext(FeatureFlagsContext);
-
-  if (features === null) {
-    throw new Error('You must wrap your components in a FlagsProvider.');
-  }
-
-  return features;
+  return React.useContext(FeatureFlagsContext);
 } // Custom Hook API
@@ -44,12 +65,2 @@
   }, features);
-} // High Order Component API
-
-function withFeature(featureName) {
-  return function (Component) {
-    return function (props) {
-      var hasFeature = useFeature(featureName);
-      if (!hasFeature) return null;
-      return React.createElement(Component, Object.assign({}, props));
-    };
-  };
 } // Render Prop API
@@ -66,2 +77,12 @@
   return render;
+} // High Order Component API
+
+function withFeature(featureName) {
+  return function (Component) {
+    return function (props) {
+      return React.createElement(Feature, {
+        name: featureName
+      }, React.createElement(Component, Object.assign({}, props)));
+    };
+  };
 }
@@ -68,0 +89,0 @@

dist/flagged.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=e.createContext(null);function t(){var t=e.useContext(r);if(null===t)throw new Error("You must wrap your components in a FlagsProvider.");return t}function n(e){var r=t();return Array.isArray(r)?r.includes(e):"boolean"==typeof r[e]?r[e]:e.split("/").reduce((function(e,r){return"boolean"==typeof e?e:void 0!==e[r]&&e[r]}),r)}exports.Feature=function(e){var r=e.render,t=void 0===r?e.children:r,o=n(e.name);return"function"==typeof t?t(o):o?t:null},exports.FlagsProvider=function(t){var n=t.features,o=t.children;if(!n||null===n||"object"!=typeof n)throw new TypeError("The features prop must be an object or an array.");return e.createElement(r.Provider,{value:n},o)},exports.useFeature=n,exports.useFeatures=t,exports.withFeature=function(r){return function(t){return function(o){return n(r)?e.createElement(t,Object.assign({},o)):null}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var t=e.createContext({});function n(e){return Array.isArray(e)?Object.fromEntries(e.map((function(e){return[e,!0]}))):e}function o(){return e.useContext(t)}function u(e){var r=o();return Array.isArray(r)?r.includes(e):"boolean"==typeof r[e]?r[e]:e.split("/").reduce((function(e,r){return"boolean"==typeof e?e:void 0!==e[r]&&e[r]}),r)}function a(e){var r=e.render,t=void 0===r?e.children:r,n=u(e.name);return"function"==typeof t?t(n):n?t:null}exports.Feature=a,exports.FlagsProvider=function(u){var a,i,c=u.features,s=void 0===c?{}:c,f=u.children,l=o();return e.createElement(t.Provider,{value:(a=n(l),i=n(s),r({},a,{},i))},f)},exports.useFeature=u,exports.useFeatures=o,exports.withFeature=function(r){return function(t){return function(n){return e.createElement(a,{name:r},e.createElement(t,Object.assign({},n)))}}};
 //# sourceMappingURL=flagged.cjs.production.min.js.map

dist/flagged.esm.js

@@ -1,16 +0,43 @@
-import { createElement, useContext, createContext } from 'react';
+import { useContext, createElement, createContext } from 'react';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 var FeatureFlagsContext =
 /*#__PURE__*/
-createContext(null);
+createContext({});
+
+function transformFlags(features) {
+  if (!Array.isArray(features)) return features;
+  return Object.fromEntries(features.map(function (feature) {
+    return [feature, true];
+  }));
+}
+
+function mergeFeatures(a, b) {
+  return _extends({}, a, {}, b);
+}
+
 function FlagsProvider(_ref) {
-  var features = _ref.features,
+  var _ref$features = _ref.features,
+      features = _ref$features === void 0 ? {} : _ref$features,
       children = _ref.children;
-
-  if (!features || features === null || typeof features !== 'object') {
-    throw new TypeError('The features prop must be an object or an array.');
-  }
-
+  var currentFeatures = useFeatures();
   return createElement(FeatureFlagsContext.Provider, {
-    value: features
+    value: mergeFeatures(transformFlags(currentFeatures), transformFlags(features))
   }, children);
@@ -20,9 +47,3 @@ } // Custom Hook API
 function useFeatures() {
-  var features = useContext(FeatureFlagsContext);
-
-  if (features === null) {
-    throw new Error('You must wrap your components in a FlagsProvider.');
-  }
-
-  return features;
+  return useContext(FeatureFlagsContext);
 } // Custom Hook API
@@ -39,12 +60,2 @@
   }, features);
-} // High Order Component API
-
-function withFeature(featureName) {
-  return function (Component) {
-    return function (props) {
-      var hasFeature = useFeature(featureName);
-      if (!hasFeature) return null;
-      return createElement(Component, Object.assign({}, props));
-    };
-  };
 } // Render Prop API
@@ -61,2 +72,12 @@
   return render;
+} // High Order Component API
+
+function withFeature(featureName) {
+  return function (Component) {
+    return function (props) {
+      return createElement(Feature, {
+        name: featureName
+      }, createElement(Component, Object.assign({}, props)));
+    };
+  };
 }
@@ -63,0 +84,0 @@

dist/index.d.ts

@@ -8,12 +8,12 @@ import * as React from 'react';
     features?: FeatureFlags;
-    children: React.ReactChild;
+    children: React.ReactNode;
 }): JSX.Element;
-export declare function useFeatures(): FeatureFlags;
-export declare function useFeature(name: string): boolean | FeatureFlags;
-export declare function withFeature(featureName: string): (Component: Function) => (props: React.ComponentProps<any>) => JSX.Element | null;
+export declare function useFeatures(): FeatureGroup;
+export declare function useFeature(name: string): boolean | FeatureGroup;
 export declare function Feature({ name, children, render, }: {
     name: string;
-    children?: React.ReactChild | Function;
-    render?: React.ReactChild | Function;
+    children?: React.ReactNode | ((hasFeature: boolean | FeatureGroup) => JSX.Element);
+    render?: React.ReactNode | ((hasFeature: boolean | FeatureGroup) => JSX.Element);
 }): any;
+export declare function withFeature(featureName: string): (Component: Function) => (props: React.ComponentProps<any>) => JSX.Element;
 export {};

package.json

 {
   "name": "flagged",
   "description": "Feature flags for React made easy with hooks, HOC and Render Props",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "license": "MIT",
@@ -54,3 +54,4 @@ "repository": "https://github.com/sergiodxa/flagged.git",
     "singleQuote": true,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "arrowParens": "avoid"
   },
@@ -57,0 +58,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

28286

10.37%

Lines of code

176

26.62%

No dependency changes