react-tiny-feature-switch - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/feature-switch.d.ts

 import React from 'react';
-declare type FeatureSwitchProps = {
+export declare type FeatureSwitchProps = {
     features: string | string[];
     children: React.ReactNode;
 };
-export declare function FeatureSwitch({ features, children }: FeatureSwitchProps): any;
-export {};
+export default function FeatureSwitch({ features, children }: FeatureSwitchProps): any;

dist/features.d.ts

@@ -1,3 +0,3 @@
-import React, { Component } from 'react';
-import { FeatureSet, FeaturesContextState } from './feature-context';
+import React from 'react';
+import { FeatureSet } from './feature-context';
 declare type FeatureToggleProps = {
@@ -7,14 +7,3 @@ children: React.ReactNode;
 };
-declare type FeatureToggleState = {
-    features: FeatureSet;
-};
-export declare class Features extends Component<FeatureToggleProps, FeatureToggleState> {
-    state: FeatureToggleState;
-    constructor(props: FeatureToggleProps);
-    readonly contextState: FeaturesContextState;
-    isEnabled: (feature: string | string[]) => boolean;
-    toggleFeature: (feature: string) => void;
-    render(): JSX.Element;
-    private isSingleFeatureEnabled;
-}
+export declare function Features({ features: propsFeatures, children }: FeatureToggleProps): JSX.Element;
 export {};

dist/react-tiny-feature-switch.cjs.development.js

@@ -9,4 +9,3 @@ 'use strict';
 function Else(_ref) {
-  var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children;
+  var children = _ref.children;
   return children;
@@ -36,18 +35,2 @@ }
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
 function _extends() {
@@ -71,8 +54,2 @@ _extends = Object.assign || function (target) {
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
 function parseUrlOverrides(queryString) {
@@ -88,63 +65,41 @@ return Array.from(new URLSearchParams(queryString).entries()).reduce(function (_final, _ref) {
 
-var Features =
-/*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(Features, _Component);
+function Features(_ref) {
+  var propsFeatures = _ref.features,
+      children = _ref.children;
 
-  function Features(props) {
-    var _this;
+  var _useState = React.useState(_extends({}, propsFeatures, {}, parseUrlOverrides(window.location.search))),
+      features = _useState[0],
+      setFeatures = _useState[1];
 
-    _this = _Component.call(this, props) || this;
+  var contextState = {
+    features: features,
+    allFeatures: propsFeatures,
+    isEnabled: isEnabled,
+    toggleFeature: toggleFeature
+  };
 
-    _this.isEnabled = function (feature) {
-      if (Array.isArray(feature)) {
-        return feature.every(_this.isSingleFeatureEnabled);
-      }
+  function isEnabled(feature) {
+    if (Array.isArray(feature)) {
+      return feature.every(isSingleFeatureEnabled);
+    }
 
-      return _this.isSingleFeatureEnabled(feature);
-    };
+    return isSingleFeatureEnabled(feature);
+  }
 
-    _this.toggleFeature = function (feature) {
-      _this.setState(function (prevState) {
-        var _extends2;
+  function toggleFeature(feature) {
+    setFeatures(function (prevState) {
+      var _extends2;
 
-        return {
-          features: _extends({}, prevState.features, (_extends2 = {}, _extends2[feature] = !prevState.features[feature], _extends2))
-        };
-      });
-    };
+      return _extends({}, prevState, (_extends2 = {}, _extends2[feature] = !prevState[feature], _extends2));
+    });
+  }
 
-    _this.isSingleFeatureEnabled = function (feature) {
-      return _this.contextState.features[feature];
-    };
-
-    _this.state = {
-      features: _extends({}, props.features, {}, parseUrlOverrides(window.location.search))
-    };
-    return _this;
+  function isSingleFeatureEnabled(feature) {
+    return contextState.features[feature];
   }
+  return React__default.createElement(Provider, {
+    value: contextState
+  }, children);
+}
 
-  var _proto = Features.prototype;
-
-  _proto.render = function render() {
-    return React__default.createElement(Provider, {
-      value: this.contextState
-    }, this.props.children);
-  };
-
-  _createClass(Features, [{
-    key: "contextState",
-    get: function get() {
-      return {
-        features: this.state.features,
-        allFeatures: this.props.features,
-        isEnabled: this.isEnabled,
-        toggleFeature: this.toggleFeature
-      };
-    }
-  }]);
-
-  return Features;
-}(React.Component);
-
 function FeatureToggler(_ref) {
@@ -151,0 +106,0 @@ var _ref$alwaysShow = _ref.alwaysShow,

dist/react-tiny-feature-switch.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function a(e){var t=e.children;return void 0===t?null:t}a.displayName="FeatureElse";var n=t.createContext({}),o=n.Provider;function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}var u=function(e){var t,a,n;function u(t){var r,a;return(r=e.call(this,t)||this).isEnabled=function(e){return Array.isArray(e)?e.every(r.isSingleFeatureEnabled):r.isSingleFeatureEnabled(e)},r.toggleFeature=function(e){r.setState(function(t){var r;return{features:i({},t.features,(r={},r[e]=!t.features[e],r))}})},r.isSingleFeatureEnabled=function(e){return r.contextState.features[e]},r.state={features:i({},t.features,{},(a=window.location.search,Array.from(new URLSearchParams(a).entries()).reduce(function(e,t){var r,a=t[1];return i({},e,((r={})[t[0]]="true"===a||"1"===a,r))},{})))},r}return a=e,(t=u).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a,u.prototype.render=function(){return r.createElement(o,{value:this.contextState},this.props.children)},(n=[{key:"contextState",get:function(){return{features:this.state.features,allFeatures:this.props.features,isEnabled:this.isEnabled,toggleFeature:this.toggleFeature}}}])&&function(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}(u.prototype,n),u}(t.Component);exports.Else=a,exports.FeatureToggle=function(e){var a=e.features,o=e.children;return(0,t.useContext(n).isEnabled)(a)?r.Children.map(o,function(e){return"FeatureElse"===e.type.displayName?null:e}):r.Children.map(o,function(e){return"FeatureElse"===e.type.displayName?e:null})},exports.FeatureToggler=function(e){var a=e.alwaysShow,o=void 0!==a&&a,i=t.useContext(n),u=i.allFeatures,l=i.isEnabled,s=i.toggleFeature;return new URLSearchParams(window.location.search).has("featureToggler")||o?r.createElement("div",{"data-testid":"feature-toggler",style:{position:"fixed",bottom:24,right:24,backgroundColor:"#eee",padding:18,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',fontSize:"18px",opacity:.85,boxShadow:"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",maxHeight:400,overflowY:"auto",zIndex:99999}},u&&Object.keys(u).map(function(e){return Array.isArray(u[e])?null:r.createElement("div",{key:e},r.createElement("label",{htmlFor:"__feature-"+e},r.createElement("input",{"data-testid":"feature-toggler-checkbox-"+e,type:"checkbox",checked:l(e),id:"__feature-"+e,onChange:function(){return s(e)},style:{marginRight:6}}),e))})):null},exports.Features=u;
+"use strict";var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function a(e){return e.children}a.displayName="FeatureElse";var n=t.createContext({}),o=n.Provider;function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}exports.Else=a,exports.FeatureToggle=function(e){var a=e.features,o=e.children;return(0,t.useContext(n).isEnabled)(a)?r.Children.map(o,function(e){return"FeatureElse"===e.type.displayName?null:e}):r.Children.map(o,function(e){return"FeatureElse"===e.type.displayName?e:null})},exports.FeatureToggler=function(e){var a=e.alwaysShow,o=void 0!==a&&a,u=t.useContext(n),i=u.allFeatures,l=u.isEnabled,s=u.toggleFeature;return new URLSearchParams(window.location.search).has("featureToggler")||o?r.createElement("div",{"data-testid":"feature-toggler",style:{position:"fixed",bottom:24,right:24,backgroundColor:"#eee",padding:18,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',fontSize:"18px",opacity:.85,boxShadow:"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",maxHeight:400,overflowY:"auto",zIndex:99999}},i&&Object.keys(i).map(function(e){return Array.isArray(i[e])?null:r.createElement("div",{key:e},r.createElement("label",{htmlFor:"__feature-"+e},r.createElement("input",{"data-testid":"feature-toggler-checkbox-"+e,type:"checkbox",checked:l(e),id:"__feature-"+e,onChange:function(){return s(e)},style:{marginRight:6}}),e))})):null},exports.Features=function(e){var a,n=e.features,i=e.children,l=t.useState(u({},n,{},(a=window.location.search,Array.from(new URLSearchParams(a).entries()).reduce(function(e,t){var r,a=t[1];return u({},e,((r={})[t[0]]="true"===a||"1"===a,r))},{})))),s=l[1],c={features:l[0],allFeatures:n,isEnabled:function(e){return Array.isArray(e)?e.every(f):f(e)},toggleFeature:function(e){s(function(t){var r;return u({},t,((r={})[e]=!t[e],r))})}};function f(e){return c.features[e]}return r.createElement(o,{value:c},i)};
 //# sourceMappingURL=react-tiny-feature-switch.cjs.production.min.js.map

dist/react-tiny-feature-switch.esm.js

@@ -1,6 +0,5 @@
-import React, { createContext, useContext, Component } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 
 function Else(_ref) {
-  var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? null : _ref$children;
+  var children = _ref.children;
   return children;
@@ -30,18 +29,2 @@ }
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
 function _extends() {
@@ -65,8 +48,2 @@ _extends = Object.assign || function (target) {
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
 function parseUrlOverrides(queryString) {
@@ -82,63 +59,41 @@ return Array.from(new URLSearchParams(queryString).entries()).reduce(function (_final, _ref) {
 
-var Features =
-/*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(Features, _Component);
+function Features(_ref) {
+  var propsFeatures = _ref.features,
+      children = _ref.children;
 
-  function Features(props) {
-    var _this;
+  var _useState = useState(_extends({}, propsFeatures, {}, parseUrlOverrides(window.location.search))),
+      features = _useState[0],
+      setFeatures = _useState[1];
 
-    _this = _Component.call(this, props) || this;
+  var contextState = {
+    features: features,
+    allFeatures: propsFeatures,
+    isEnabled: isEnabled,
+    toggleFeature: toggleFeature
+  };
 
-    _this.isEnabled = function (feature) {
-      if (Array.isArray(feature)) {
-        return feature.every(_this.isSingleFeatureEnabled);
-      }
+  function isEnabled(feature) {
+    if (Array.isArray(feature)) {
+      return feature.every(isSingleFeatureEnabled);
+    }
 
-      return _this.isSingleFeatureEnabled(feature);
-    };
+    return isSingleFeatureEnabled(feature);
+  }
 
-    _this.toggleFeature = function (feature) {
-      _this.setState(function (prevState) {
-        var _extends2;
+  function toggleFeature(feature) {
+    setFeatures(function (prevState) {
+      var _extends2;
 
-        return {
-          features: _extends({}, prevState.features, (_extends2 = {}, _extends2[feature] = !prevState.features[feature], _extends2))
-        };
-      });
-    };
+      return _extends({}, prevState, (_extends2 = {}, _extends2[feature] = !prevState[feature], _extends2));
+    });
+  }
 
-    _this.isSingleFeatureEnabled = function (feature) {
-      return _this.contextState.features[feature];
-    };
-
-    _this.state = {
-      features: _extends({}, props.features, {}, parseUrlOverrides(window.location.search))
-    };
-    return _this;
+  function isSingleFeatureEnabled(feature) {
+    return contextState.features[feature];
   }
+  return React.createElement(Provider, {
+    value: contextState
+  }, children);
+}
 
-  var _proto = Features.prototype;
-
-  _proto.render = function render() {
-    return React.createElement(Provider, {
-      value: this.contextState
-    }, this.props.children);
-  };
-
-  _createClass(Features, [{
-    key: "contextState",
-    get: function get() {
-      return {
-        features: this.state.features,
-        allFeatures: this.props.features,
-        isEnabled: this.isEnabled,
-        toggleFeature: this.toggleFeature
-      };
-    }
-  }]);
-
-  return Features;
-}(Component);
-
 function FeatureToggler(_ref) {
@@ -145,0 +100,0 @@ var _ref$alwaysShow = _ref.alwaysShow,

package.json

@@ -12,3 +12,3 @@ {
   "homepage": "https://github.com/dericgw/react-tiny-feature-switch",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "license": "MIT",
@@ -15,0 +15,0 @@ "main": "dist/index.js",

README.md

@@ -5,3 +5,3 @@ # React Tiny Feature Switch
 
-🚗 A feature-packed, tiny (~900B), fast React Feature Toggle
+🚗 A feature-packed, tiny (~650B), fast React Feature Toggle
 
@@ -11,3 +11,4 @@ > This project uses React Hooks, so you need at least React version 16.8
 ## Features
-- It's small, so it won't take up your size budget
+- It's small, so it won't take up your size budget (~650B)
+- Tree-shakable so you only bundle what you use
 - Define features using a JS object or external JSON file
@@ -14,0 +15,0 @@ - Toggle features using URL Query Parameters, e.g., http://domain.com?someFeature=true

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

165

increased by0.61%

Worsened metrics

Total package byte prevSize

47715

decreased by-10.33%

Number of package files

18

decreased by-5.26%

Lines of code

324

decreased by-22.3%

No dependency changes