@casl/react 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+# [@casl/react-v0.8.1](https://github.com/stalniy/casl/compare/@casl/react@0.8.0...@casl/react@0.8.1) (2018-11-08)
+
+
+### Bug Fixes
+
+* **react:** moves this.connectToAbility to the setState callback ([#129](https://github.com/stalniy/casl/issues/129)) ([9d0c839](https://github.com/stalniy/casl/commit/9d0c839)), closes [#128](https://github.com/stalniy/casl/issues/128)
+
+# [@casl/react-v0.8.0](https://github.com/stalniy/casl/compare/@casl/react@0.7.2...@casl/react@0.8.0) (2018-09-03)
+
+
+### Bug Fixes
+
+* **README:** changes links to [@casl](https://github.com/casl)/ability to point to npm package instead to git root [skip ci] ([a74086b](https://github.com/stalniy/casl/commit/a74086b)), closes [#102](https://github.com/stalniy/casl/issues/102)
+
+
+### Features
+
+* **react:can:** adds `an` alias to `on` prop ([748ea64](https://github.com/stalniy/casl/commit/748ea64))
+* **react:can:** adds `passThrough` option ([045318c](https://github.com/stalniy/casl/commit/045318c)), closes [#105](https://github.com/stalniy/casl/issues/105)
+* **react:can:** adds support for multiple <Can> children ([c022b32](https://github.com/stalniy/casl/commit/c022b32))
+* **react:can:** updates typescript declarations ([70953ed](https://github.com/stalniy/casl/commit/70953ed))
+* **react:can:** updates typescript declarations ([213dcde](https://github.com/stalniy/casl/commit/213dcde))
+
+
+### Performance Improvements
+
+* **react:can:** moves prop type checks undef `if`, so they can be removed for production builds ([4bebf0b](https://github.com/stalniy/casl/commit/4bebf0b))
+
+# [@casl/react-v0.7.2](https://github.com/stalniy/casl/compare/@casl/react@0.7.1...@casl/react@0.7.2) (2018-07-29)
+
+
+### Bug Fixes
+
+* **react:** makes `not` prop to be optional ([8f841bf](https://github.com/stalniy/casl/commit/8f841bf)), closes [#95](https://github.com/stalniy/casl/issues/95)
+
+<a name="@casl/react-v0.7.1"></a>
+# [@casl/react-v0.7.1](https://github.com/stalniy/casl/compare/@casl/react@0.7.0...@casl/react@0.7.1) (2018-07-02)
+
+
+### Bug Fixes
+
+* **package:** changes location of ES5M modules ([2b1ad4e](https://github.com/stalniy/casl/commit/2b1ad4e)), closes [#89](https://github.com/stalniy/casl/issues/89)
+
 <a name="@casl/react-v0.7.0"></a>
 # [@casl/react-v0.7.0](https://github.com/stalniy/casl/compare/@casl/react@0.6.0...@casl/react@0.7.0) (2018-06-15)
 
@@ -12,9 +59,6 @@
 
 * **vue:** adds can component ([42ee540](https://github.com/stalniy/casl/commit/42ee540)), closes [#63](https://github.com/stalniy/casl/issues/63)
 
-# Change Log
-
-
 
 <a name="@casl/react-v0.6.0"></a>
 # [@casl/react-v0.6.0](https://github.com/stalniy/casl/compare/@casl/react@0.5.0...@casl/react@0.6.0) (2018-05-28)

package/README.md

@@ -1,6 +1,6 @@
 # CASL React [![@casl/react NPM version](https://badge.fury.io/js/%40casl%2Freact.svg)](https://badge.fury.io/js/%40casl%2Freact) [![](https://img.shields.io/npm/dm/%40casl%2Freact.svg)](https://www.npmjs.com/package/%40casl%2Freact) [![CASL Documentation](https://img.shields.io/badge/documentation-available-brightgreen.svg)](https://stalniy.github.io/casl/) [![CASL Join the chat at https://gitter.im/stalniy-casl/casl](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/stalniy-casl/casl?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-This package allows to integrate [@casl/ability](/packages/casl-ability) into [React][react] application. So, you can show or hide UI elements based on user ability to see them.
+This package allows to integrate [@casl/ability][casl-ability] into [React][react] application. So, you can show or hide UI elements based on user ability to see them.
 
 ## Installation
 
@@ -21,7 +21,7 @@ This component accepts children and 4 properties (see [Property names and aliase
 
 ```jsx
 <Can I="create" a="Post" ability={ability}>
-  () => <button onClick={this.createPost.bind(this)}>Create Post</button>
+  {() => <button onClick={this.createPost.bind(this)}>Create Post</button>}
 </Can>
 ```
 
@@ -62,7 +62,7 @@ import Can from './Can'
 export function button() {
   return (
     <Can I="create" a="Post">
-      () => <button onClick={this.createPost.bind(this)}>Create Post</button>
+      {() => <button onClick={this.createPost.bind(this)}>Create Post</button>}
     </Can>
   )
 }
@@ -108,7 +108,7 @@ export class TodoApp extends Component {
   render() {
     return (
       <Can I="create" a="Todo">
-        () => <button onClick={this.createTodo.bind(this)}>Create Todo</button>
+        {() => <button onClick={this.createTodo.bind(this)}>Create Todo</button>}
       </Can>
     )
   }
@@ -171,7 +171,7 @@ export class LoginComponent extends Component {
 ```
 
 Obviously, in this case your server API should provide the list of user abilities in `rules` field of the response.
-See [@casl/ability](/packages/casl-ability) package for more information on how to define abilities.
+See [@casl/ability][casl-ability] package for more information on how to define abilities.
 
 ### 3. Property names and aliases
 
@@ -180,13 +180,13 @@ For example, the code below reads as `Can I create a Post`.
 
 ```jsx
 <Can I="create" a="Post">
-  () => <button onClick={...}>Create Post</button>
+  {() => <button onClick={...}>Create Post</button>}
 </Can>
 ```
 
 There are several other property aliases which allow to construct a readable question:
 
-* use `a` alias when you check by Type
+* use `a` (or `an`) alias when you check by Type
 
 ```jsx
 <Can I="read" a="Post">...</Can>
@@ -227,6 +227,14 @@ There are several other property aliases which allow to construct a readable que
 <Can not I="read" a="Post">...</Can>
 ```
 
+* use `passThrough` if you want to customize behavior of `<Can>` component, for example disable button instead of hiding it:
+
+```jsx
+<Can I="read" a="Post" passThrough>
+  {can => <button disabled={!can}>Save</button>}
+</Can>
+```
+
 
 ## Want to help?
 
@@ -240,3 +248,4 @@ Want to file a bug, contribute some code, or improve documentation? Excellent! R
 [react]: https://reactjs.org/
 [casl-react-example]: https://github.com/stalniy/casl-react-example
 [react-ctx-api]: https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b
+[casl-ability]: https://www.npmjs.com/package/@casl/ability

package/dist/es5m/index.js

@@ -0,0 +1,228 @@
+import React, { PureComponent, Fragment, createElement } from 'react';
+import PropTypes from 'prop-types';
+import { Ability } from '@casl/ability';
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  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);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+var noop = function noop() {};
+var _renderChildren = Fragment ? function (children) {
+  return createElement.apply(null, [Fragment, null].concat(children));
+} : React.Children.only;
+var propTypes = {};
+
+if (process.env.NODE_ENV !== 'production') {
+  var REQUIRED_OBJECT_OR_STRING = PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired;
+
+  var alias = function alias(names, validate) {
+    return function (props) {
+      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      // eslint-disable-line
+      if (!names.split(' ').some(function (name) {
+        return props[name];
+      })) {
+        return validate.apply(undefined, [props].concat(args));
+      }
+    };
+  };
+
+  propTypes = {
+    I: alias('do', PropTypes.string.isRequired),
+    a: alias('on this of an', REQUIRED_OBJECT_OR_STRING),
+    an: alias('on this of a', REQUIRED_OBJECT_OR_STRING),
+    of: alias('on a this an', REQUIRED_OBJECT_OR_STRING),
+    this: alias('on a of an', REQUIRED_OBJECT_OR_STRING),
+    do: alias('I', PropTypes.string.isRequired),
+    on: alias('this a of an', REQUIRED_OBJECT_OR_STRING),
+    not: PropTypes.bool,
+    passThrough: PropTypes.bool,
+    children: PropTypes.any.isRequired,
+    ability: PropTypes.instanceOf(Ability).isRequired
+  };
+}
+
+var Can = function (_PureComponent) {
+  inherits(Can, _PureComponent);
+
+  function Can() {
+    classCallCheck(this, Can);
+
+    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    var _this = possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args)));
+
+    _this.unsubscribeFromAbility = noop;
+    _this.state = {
+      ability: _this.props.ability,
+      allowed: false
+    };
+    return _this;
+  }
+
+  Can.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
+    var _this2 = this;
+
+    if (props.ability && this.state.ability !== props.ability) {
+      this.setState({ ability: props.ability }, function () {
+        _this2.connectToAbility(_this2.state.ability);
+      });
+    } else {
+      this.recheck(props);
+    }
+  };
+
+  Can.prototype.componentWillMount = function componentWillMount() {
+    this.connectToAbility(this.state.ability);
+  };
+
+  Can.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.unsubscribeFromAbility();
+  };
+
+  Can.prototype.connectToAbility = function connectToAbility(ability) {
+    var _this3 = this;
+
+    this.unsubscribeFromAbility();
+
+    if (ability) {
+      this.unsubscribeFromAbility = ability.on('updated', function () {
+        return _this3.recheck();
+      });
+      this.recheck();
+    }
+  };
+
+  Can.prototype.recheck = function recheck(props) {
+    return this.setState({ allowed: this.check(props) });
+  };
+
+  Can.prototype.check = function check() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+    var params = props || this.props;
+
+    var _split = (params.I || params.do).split(/\s+/),
+        action = _split[0],
+        field = _split[1];
+
+    var subject = params.of || params.a || params.this || params.on;
+    var can = params.not ? 'cannot' : 'can';
+
+    return this.state.ability[can](action, subject, field);
+  };
+
+  Can.prototype.render = function render() {
+    var canRender = this.props.passThrough || this.state.allowed;
+    return canRender ? this.renderChildren() : null;
+  };
+
+  Can.prototype.renderChildren = function renderChildren() {
+    var children = this.props.children;
+
+    var elements = typeof children === 'function' ? children(this.state.allowed, this.state.ability) : children;
+
+    return _renderChildren(elements);
+  };
+
+  createClass(Can, [{
+    key: 'allowed',
+    get: function get$$1() {
+      return this.state.allowed;
+    }
+  }]);
+  return Can;
+}(PureComponent);
+
+Can.propTypes = propTypes;
+
+function createCanBoundTo(ability) {
+  var _class, _temp;
+
+  return _temp = _class = function (_Can) {
+    inherits(BoundCan, _Can);
+
+    function BoundCan() {
+      classCallCheck(this, BoundCan);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      var _this = possibleConstructorReturn(this, _Can.call.apply(_Can, [this].concat(args)));
+
+      _this.state.ability = _this.state.ability || ability;
+      return _this;
+    }
+
+    return BoundCan;
+  }(Can), _class.propTypes = Object.assign({}, Can.propTypes, {
+    ability: PropTypes.instanceOf(Ability)
+  }), _temp;
+}
+
+function createContextualCan(Consumer) {
+  return function ContextualCan(props) {
+    return createElement(Consumer, null, function (ability) {
+      return createElement(Can, {
+        ability: props.ability || ability,
+        I: props.I || props.do,
+        a: props.on || props.a || props.an || props.of || props.this,
+        not: props.not,
+        children: props.children,
+        passThrough: props.passThrough
+      });
+    });
+  };
+}
+
+export { Can, createCanBoundTo, createContextualCan };

package/dist/es6/index.js

@@ -1,17 +1,34 @@
-import React, { PureComponent, createElement } from 'react';
+import React, { PureComponent, Fragment, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { Ability } from '@casl/ability';
 
 const noop = () => {};
-const REQUIRED_OBJECT_OR_STRING = PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired;
+const renderChildren = Fragment ? children => createElement.apply(null, [Fragment, null].concat(children)) : React.Children.only;
+let propTypes = {};
 
-function alias(names, validate) {
-  return (props, ...args) => {
+if (process.env.NODE_ENV !== 'production') {
+  const REQUIRED_OBJECT_OR_STRING = PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired;
+
+  const alias = (names, validate) => (props, ...args) => {
     // eslint-disable-line
     if (!names.split(' ').some(name => props[name])) {
       return validate(props, ...args);
     }
   };
+
+  propTypes = {
+    I: alias('do', PropTypes.string.isRequired),
+    a: alias('on this of an', REQUIRED_OBJECT_OR_STRING),
+    an: alias('on this of a', REQUIRED_OBJECT_OR_STRING),
+    of: alias('on a this an', REQUIRED_OBJECT_OR_STRING),
+    this: alias('on a of an', REQUIRED_OBJECT_OR_STRING),
+    do: alias('I', PropTypes.string.isRequired),
+    on: alias('this a of an', REQUIRED_OBJECT_OR_STRING),
+    not: PropTypes.bool,
+    passThrough: PropTypes.bool,
+    children: PropTypes.any.isRequired,
+    ability: PropTypes.instanceOf(Ability).isRequired
+  };
 }
 
 class Can extends PureComponent {
@@ -32,8 +49,9 @@ class Can extends PureComponent {
 
   componentWillReceiveProps(props) {
     if (props.ability && this.state.ability !== props.ability) {
-      this.setState({ ability: props.ability });
-      this.connectToAbility(props.ability);
+      this.setState({ ability: props.ability }, () => {
+        this.connectToAbility(this.state.ability);
+      });
     } else {
       this.recheck(props);
     }
@@ -70,26 +88,18 @@ class Can extends PureComponent {
   }
 
   render() {
-    return this.state.allowed ? this.renderChildren() : null;
+    const canRender = this.props.passThrough || this.state.allowed;
+    return canRender ? this.renderChildren() : null;
   }
 
   renderChildren() {
     const { children } = this.props;
+    const elements = typeof children === 'function' ? children(this.state.allowed, this.state.ability) : children;
 
-    return typeof children === 'function' ? children(this.state.ability) : React.Children.only(children);
+    return renderChildren(elements);
   }
 }
-Can.propTypes = {
-  I: alias('do', PropTypes.string.isRequired),
-  a: alias('on this of', REQUIRED_OBJECT_OR_STRING),
-  of: alias('on a this', REQUIRED_OBJECT_OR_STRING),
-  this: alias('on a of', REQUIRED_OBJECT_OR_STRING),
-  do: alias('I', PropTypes.string.isRequired),
-  on: alias('this a of', REQUIRED_OBJECT_OR_STRING),
-  not: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  ability: PropTypes.instanceOf(Ability).isRequired
-};
+Can.propTypes = propTypes;
 
 function createCanBoundTo(ability) {
   var _class, _temp;
@@ -110,9 +120,10 @@ function createContextualCan(Consumer) {
     return createElement(Consumer, null, ability => createElement(Can, {
       ability: props.ability || ability,
       I: props.I || props.do,
-      a: props.a || props.of || props.this || props.on,
+      a: props.on || props.a || props.an || props.of || props.this,
       not: props.not,
-      children: props.children
+      children: props.children,
+      passThrough: props.passThrough
     }));
   };
 }

package/dist/umd/index.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("@casl/ability")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@casl/ability"],e):e((t.casl=t.casl||{},t.casl.react={}),t.React,t.React.PropTypes,t.casl)}(this,function(t,n,i,r){"use strict";var e="default"in n?n.default:n;i=i&&i.hasOwnProperty("default")?i.default:i;var l=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},a=function(){function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}}(),c=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},u=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},s=function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,e){var n=[],i=!0,r=!1,o=void 0;try{for(var a,l=t[Symbol.iterator]();!(i=(a=l.next()).done)&&(n.push(a.value),!e||n.length!==e);i=!0);}catch(t){r=!0,o=t}finally{try{!i&&l.return&&l.return()}finally{if(r)throw o}}return n}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")},f=function(){},o=i.oneOfType([i.object,i.string]).isRequired;function y(r,o){return function(e){for(var t=arguments.length,n=Array(1<t?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];if(!r.split(" ").some(function(t){return e[t]}))return o.apply(void 0,[e].concat(n))}}var p=function(t){function o(){var t;l(this,o);for(var e=arguments.length,n=Array(e),i=0;i<e;i++)n[i]=arguments[i];var r=u(this,(t=o.__proto__||Object.getPrototypeOf(o)).call.apply(t,[this].concat(n)));return r.unsubscribeFromAbility=f,r.state={ability:r.props.ability,allowed:!1},r}return c(o,t),a(o,[{key:"componentWillReceiveProps",value:function(t){t.ability&&this.state.ability!==t.ability?(this.setState({ability:t.ability}),this.connectToAbility(t.ability)):this.recheck(t)}},{key:"componentWillMount",value:function(){this.connectToAbility(this.state.ability)}},{key:"componentWillUnmount",value:function(){this.unsubscribeFromAbility()}},{key:"connectToAbility",value:function(t){var e=this;this.unsubscribeFromAbility(),t&&(this.unsubscribeFromAbility=t.on("updated",function(){return e.recheck()}),this.recheck())}},{key:"recheck",value:function(t){return this.setState({allowed:this.check(t)})}},{key:"check",value:function(){var t=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:null)||this.props,e=(t.I||t.do).split(/\s+/),n=s(e,2),i=n[0],r=n[1],o=t.of||t.a||t.this||t.on,a=t.not?"cannot":"can";return this.state.ability[a](i,o,r)}},{key:"render",value:function(){return this.state.allowed?this.renderChildren():null}},{key:"renderChildren",value:function(){var t=this.props.children;return"function"==typeof t?t(this.state.ability):e.Children.only(t)}},{key:"allowed",get:function(){return this.state.allowed}}]),o}(n.PureComponent);p.propTypes={I:y("do",i.string.isRequired),a:y("on this of",o),of:y("on a this",o),this:y("on a of",o),do:y("I",i.string.isRequired),on:y("this a of",o),not:i.bool,children:i.any.isRequired,ability:i.instanceOf(r.Ability).isRequired},t.Can=p,t.createCanBoundTo=function(a){var t,e;return e=t=function(t){function o(){var t;l(this,o);for(var e=arguments.length,n=Array(e),i=0;i<e;i++)n[i]=arguments[i];var r=u(this,(t=o.__proto__||Object.getPrototypeOf(o)).call.apply(t,[this].concat(n)));return r.state.ability=r.state.ability||a,r}return c(o,p),o}(),t.propTypes=Object.assign({},p.propTypes,{ability:i.instanceOf(r.Ability)}),e},t.createContextualCan=function(t){return function(e){return n.createElement(t,null,function(t){return n.createElement(p,{ability:e.ability||t,I:e.I||e.do,a:e.a||e.of||e.this||e.on,not:e.not,children:e.children})})}},Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("@casl/ability")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@casl/ability"],e):e((t.casl=t.casl||{},t.casl.react={}),t.React,t.React.PropTypes,t.casl)}(this,function(t,n,i,o){"use strict";var e="default"in n?n.default:n;i=i&&i.hasOwnProperty("default")?i.default:i;var s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},a=function(){function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}}(),c=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},l=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},u=function(){},p=n.Fragment?function(t){return n.createElement.apply(null,[n.Fragment,null].concat(t))}:e.Children.only,r={};if("production"!==process.env.NODE_ENV){var f=i.oneOfType([i.object,i.string]).isRequired,y=function(o,r){return function(e){for(var t=arguments.length,n=Array(1<t?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];if(!o.split(" ").some(function(t){return e[t]}))return r.apply(void 0,[e].concat(n))}};r={I:y("do",i.string.isRequired),a:y("on this of an",f),an:y("on this of a",f),of:y("on a this an",f),this:y("on a of an",f),do:y("I",i.string.isRequired),on:y("this a of an",f),not:i.bool,passThrough:i.bool,children:i.any.isRequired,ability:i.instanceOf(o.Ability).isRequired}}var h=function(o){function r(){s(this,r);for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];var i=l(this,o.call.apply(o,[this].concat(e)));return i.unsubscribeFromAbility=u,i.state={ability:i.props.ability,allowed:!1},i}return c(r,o),r.prototype.componentWillReceiveProps=function(t){var e=this;t.ability&&this.state.ability!==t.ability?this.setState({ability:t.ability},function(){e.connectToAbility(e.state.ability)}):this.recheck(t)},r.prototype.componentWillMount=function(){this.connectToAbility(this.state.ability)},r.prototype.componentWillUnmount=function(){this.unsubscribeFromAbility()},r.prototype.connectToAbility=function(t){var e=this;this.unsubscribeFromAbility(),t&&(this.unsubscribeFromAbility=t.on("updated",function(){return e.recheck()}),this.recheck())},r.prototype.recheck=function(t){return this.setState({allowed:this.check(t)})},r.prototype.check=function(){var t=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:null)||this.props,e=(t.I||t.do).split(/\s+/),n=e[0],i=e[1],o=t.of||t.a||t.this||t.on,r=t.not?"cannot":"can";return this.state.ability[r](n,o,i)},r.prototype.render=function(){return this.props.passThrough||this.state.allowed?this.renderChildren():null},r.prototype.renderChildren=function(){var t=this.props.children,e="function"==typeof t?t(this.state.allowed,this.state.ability):t;return p(e)},a(r,[{key:"allowed",get:function(){return this.state.allowed}}]),r}(n.PureComponent);h.propTypes=r,t.Can=h,t.createCanBoundTo=function(a){var t,e;return e=t=function(o){function r(){s(this,r);for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];var i=l(this,o.call.apply(o,[this].concat(e)));return i.state.ability=i.state.ability||a,i}return c(r,o),r}(h),t.propTypes=Object.assign({},h.propTypes,{ability:i.instanceOf(o.Ability)}),e},t.createContextualCan=function(t){return function(e){return n.createElement(t,null,function(t){return n.createElement(h,{ability:e.ability||t,I:e.I||e.do,a:e.on||e.a||e.an||e.of||e.this,not:e.not,children:e.children,passThrough:e.passThrough})})}},Object.defineProperty(t,"__esModule",{value:!0})});

package/index.d.ts

@@ -7,6 +7,9 @@ type BaseProps = {
 } | {
   I: string
   a: string
+} | {
+  I: string
+  an: string
 } | {
   I: string
   of: any
@@ -17,12 +20,14 @@ type BaseProps = {
 
 type CanPropsStrict = BaseProps & {
   ability: Ability
-  not: boolean
+  not?: boolean
+  passThrough?: boolean
 }
 
 type CanProps = BaseProps & {
   ability?: Ability
-  not: boolean
+  not?: boolean
+  passThrough?: boolean
 }
 
 declare class CanComponent<T> extends PureComponent<T> {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@casl/react",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "React component for CASL which makes it easy to add permissions in any React application",
   "main": "dist/umd/index.js",
-  "module": "index.js",
+  "module": "dist/es5m/index.js",
   "es2015": "dist/es6/index.js",
   "typings": "./index.d.ts",
   "repository": {
@@ -39,7 +39,7 @@
     "npm": "^6.0.0"
   },
   "peerDependencies": {
-    "@casl/ability": "^2.0.0-alpha.1",
+    "@casl/ability": "^2.0.0",
     "prop-types": "^15.0.0",
     "react": "^15.0.0 || ^16.0.0"
   },
@@ -48,7 +48,6 @@
     "check-prop-types": "^1.1.2",
     "prop-types": "^15.6.0",
     "react": "^16.3.0",
-    "react-test-renderer": "^16.3.0",
-    "semantic-release": "^15.5.0"
+    "react-test-renderer": "^16.3.0"
   }
 }

package/index.js

@@ -1,262 +0,0 @@
-import React, { PureComponent, createElement } from 'react';
-import PropTypes from 'prop-types';
-import { Ability } from '@casl/ability';
-
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  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);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
-    }
-  };
-}();
-
-var noop = function noop() {};
-var REQUIRED_OBJECT_OR_STRING = PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired;
-
-function alias(names, validate) {
-  return function (props) {
-    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
-    // eslint-disable-line
-    if (!names.split(' ').some(function (name) {
-      return props[name];
-    })) {
-      return validate.apply(undefined, [props].concat(args));
-    }
-  };
-}
-
-var Can = function (_PureComponent) {
-  inherits(Can, _PureComponent);
-
-  function Can() {
-    var _ref;
-
-    classCallCheck(this, Can);
-
-    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    var _this = possibleConstructorReturn(this, (_ref = Can.__proto__ || Object.getPrototypeOf(Can)).call.apply(_ref, [this].concat(args)));
-
-    _this.unsubscribeFromAbility = noop;
-    _this.state = {
-      ability: _this.props.ability,
-      allowed: false
-    };
-    return _this;
-  }
-
-  createClass(Can, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(props) {
-      if (props.ability && this.state.ability !== props.ability) {
-        this.setState({ ability: props.ability });
-        this.connectToAbility(props.ability);
-      } else {
-        this.recheck(props);
-      }
-    }
-  }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.connectToAbility(this.state.ability);
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unsubscribeFromAbility();
-    }
-  }, {
-    key: 'connectToAbility',
-    value: function connectToAbility(ability) {
-      var _this2 = this;
-
-      this.unsubscribeFromAbility();
-
-      if (ability) {
-        this.unsubscribeFromAbility = ability.on('updated', function () {
-          return _this2.recheck();
-        });
-        this.recheck();
-      }
-    }
-  }, {
-    key: 'recheck',
-    value: function recheck(props) {
-      return this.setState({ allowed: this.check(props) });
-    }
-  }, {
-    key: 'check',
-    value: function check() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
-      var params = props || this.props;
-
-      var _split = (params.I || params.do).split(/\s+/),
-          _split2 = slicedToArray(_split, 2),
-          action = _split2[0],
-          field = _split2[1];
-
-      var subject = params.of || params.a || params.this || params.on;
-      var can = params.not ? 'cannot' : 'can';
-
-      return this.state.ability[can](action, subject, field);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return this.state.allowed ? this.renderChildren() : null;
-    }
-  }, {
-    key: 'renderChildren',
-    value: function renderChildren() {
-      var children = this.props.children;
-
-
-      return typeof children === 'function' ? children(this.state.ability) : React.Children.only(children);
-    }
-  }, {
-    key: 'allowed',
-    get: function get$$1() {
-      return this.state.allowed;
-    }
-  }]);
-  return Can;
-}(PureComponent);
-
-Can.propTypes = {
-  I: alias('do', PropTypes.string.isRequired),
-  a: alias('on this of', REQUIRED_OBJECT_OR_STRING),
-  of: alias('on a this', REQUIRED_OBJECT_OR_STRING),
-  this: alias('on a of', REQUIRED_OBJECT_OR_STRING),
-  do: alias('I', PropTypes.string.isRequired),
-  on: alias('this a of', REQUIRED_OBJECT_OR_STRING),
-  not: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  ability: PropTypes.instanceOf(Ability).isRequired
-};
-
-function createCanBoundTo(ability) {
-  var _class, _temp;
-
-  return _temp = _class = function (_Can) {
-    inherits(BoundCan, _Can);
-
-    function BoundCan() {
-      var _ref;
-
-      classCallCheck(this, BoundCan);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      var _this = possibleConstructorReturn(this, (_ref = BoundCan.__proto__ || Object.getPrototypeOf(BoundCan)).call.apply(_ref, [this].concat(args)));
-
-      _this.state.ability = _this.state.ability || ability;
-      return _this;
-    }
-
-    return BoundCan;
-  }(Can), _class.propTypes = Object.assign({}, Can.propTypes, {
-    ability: PropTypes.instanceOf(Ability)
-  }), _temp;
-}
-
-function createContextualCan(Consumer) {
-  return function ContextualCan(props) {
-    return createElement(Consumer, null, function (ability) {
-      return createElement(Can, {
-        ability: props.ability || ability,
-        I: props.I || props.do,
-        a: props.a || props.of || props.this || props.on,
-        not: props.not,
-        children: props.children
-      });
-    });
-  };
-}
-
-export { Can, createCanBoundTo, createContextualCan };