@casl/react 5.0.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/es5m/index.js +1 -1
- package/dist/es5m/index.js.map +1 -1
- package/dist/es6m/index.mjs +1 -1
- package/dist/es6m/index.mjs.map +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/index.js.map +1 -1
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://badge.fury.io/js/%40casl%2Freact)
|
|
4
4
|
[](https://www.npmjs.com/package/%40casl%2Freact)
|
|
5
|
-
[](https://github.com/stalniy/casl/discussions)
|
|
6
6
|
|
|
7
7
|
This package allows to integrate `@casl/ability` with [React] application. It provides `Can` component that allow to hide or show UI elements based on user ability to see them.
|
|
8
8
|
|
package/dist/es5m/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,{PureComponent as
|
|
1
|
+
import t,{PureComponent as r,createElement as n}from"react";function i(t,r){for(var n=0;n<r.length;n++){var i=r[n];i.enumerable=i.enumerable||false,i.configurable=true,"value"in i&&(i.writable=true),Object.defineProperty(t,a(i.key),i)}}function u(t,r,n){return r&&i(t.prototype,r),Object.defineProperty(t,"prototype",{writable:false}),t}function e(){return e=Object.assign?Object.assign.bind():function(t){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},e.apply(null,arguments)}function o(t,r){t.prototype=Object.create(r.prototype),t.prototype.constructor=t,f(t,r)}function f(t,r){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,r){return t.__proto__=r,t},f(t,r)}function c(t,r){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,r);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}function a(t){var r=c(t,"string");return"symbol"==typeof r?r:r+""}var s=function t(){};var v=function(t){function r(){var r;for(var n=arguments.length,i=new Array(n),u=0;u<n;u++)i[u]=arguments[u];r=t.call.apply(t,[this].concat(i))||this;r.i=false;r.u=null;r.o=s;r.state={t:true};return r}o(r,t);var n=r.prototype;n.componentWillUnmount=function t(){this.o()};n.v=function _connectToAbility(t){var r=this;if(t===this.u)return;this.o();this.u=null;if(t){this.u=t;this.o=t.on("updated",function(){return r.setState({t:!r.state.t})})}};n.l=function t(){var r=this.props;var n=r.of||r.a||r.an||r.this||r.on;var i=r.not?"cannot":"can";return r.ability[i](r.I||r.do,n,r.field)};n.render=function t(){this.v(this.props.ability);this.i=this.l();return this.props.passThrough||this.i?this.h():null};n.h=function t(){var r=this.props,n=r.children,i=r.ability;var u=typeof n==="function"?n(this.i,i):n;return u};return u(r,[{key:"allowed",get:function t(){return this.i}}])}(r);function l(t){return function(r){return n(t,{children:function t(i){return n(v,e({},r,{ability:r.ability||i}))}})}}function useAbility(r){var n=t.useContext(r);var i=t.useCallback(function(t){return n.on("updated",t)},[n]);var u=t.useCallback(function(){return n.rules},[n]);t.useSyncExternalStore(i,u,u);return n}export{v as Can,l as createContextualCan,useAbility};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/es5m/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Can.ts","../../src/factory.ts","../../src/hooks/useAbility.ts"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport {\n Unsubscribe,\n AbilityTuple,\n SubjectType,\n AnyAbility,\n Generics,\n Abilities,\n IfString,\n} from '@casl/ability';\n\nconst noop = () => {};\n\ntype AbilityCanProps<\n T extends Abilities,\n Else = IfString<T, { do: T } | { I: T }>\n> = T extends AbilityTuple\n ? { do: T[0], on: T[1], field?: string } |\n { I: T[0], a: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], an: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }\n : Else;\n\ninterface ExtraProps {\n not?: boolean\n passThrough?: boolean\n}\n\ninterface CanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\ninterface BoundCanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability?: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\nexport type CanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & CanExtraProps<T>;\nexport type BoundCanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & BoundCanExtraProps<T>;\n\nexport class Can<T extends AnyAbility> extends PureComponent<CanProps<T>, { t: boolean }> {\n private _isAllowed = false;\n private _ability: T | null = null;\n private _unsubscribeFromAbility: Unsubscribe = noop;\n state = { t: true }\n\n componentWillUnmount() {\n this._unsubscribeFromAbility();\n }\n\n private _connectToAbility(ability?: T) {\n if (ability === this._ability) {\n return;\n }\n\n this._unsubscribeFromAbility();\n this._ability = null;\n\n if (ability) {\n this._ability = ability;\n this._unsubscribeFromAbility = ability.on('updated', () => this.setState({ t: !this.state.t }));\n }\n }\n\n get allowed() {\n return this._isAllowed;\n }\n\n private _canRender(): boolean {\n const props: any = this.props;\n const subject = props.of || props.a || props.an || props.this || props.on;\n const can = props.not ? 'cannot' : 'can';\n\n return props.ability[can](props.I || props.do, subject, props.field);\n }\n\n render() {\n this._connectToAbility(this.props.ability);\n this._isAllowed = this._canRender();\n return this.props.passThrough || this._isAllowed ? this._renderChildren() : null;\n }\n\n private _renderChildren() {\n const { children, ability } = this.props;\n const elements = typeof children === 'function'\n ? children(this._isAllowed, ability as any)\n : children;\n\n return elements as ReactNode;\n }\n}\n","import { AnyAbility } from '@casl/ability';\nimport { Consumer, FunctionComponent, createElement } from 'react';\nimport { BoundCanProps, Can } from './Can';\n\nexport function createContextualCan<T extends AnyAbility>(\n Getter: Consumer<T>\n): FunctionComponent<BoundCanProps<T>> {\n return (props: BoundCanProps<T>) => createElement(Getter, {\n children: (ability: T) => \n createElement(Can, { ...props, ability: props.ability || ability } as any),\n });\n}\n","import React from 'react';\nimport { AnyAbility } from '@casl/ability';\n\nexport function useAbility<T extends AnyAbility>(context: React.Context<T>): T {\n const ability = React.useContext<T>(context);\n const
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Can.ts","../../src/factory.ts","../../src/hooks/useAbility.ts"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport {\n Unsubscribe,\n AbilityTuple,\n SubjectType,\n AnyAbility,\n Generics,\n Abilities,\n IfString,\n} from '@casl/ability';\n\nconst noop = () => {};\n\ntype AbilityCanProps<\n T extends Abilities,\n Else = IfString<T, { do: T } | { I: T }>\n> = T extends AbilityTuple\n ? { do: T[0], on: T[1], field?: string } |\n { I: T[0], a: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], an: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }\n : Else;\n\ninterface ExtraProps {\n not?: boolean\n passThrough?: boolean\n}\n\ninterface CanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\ninterface BoundCanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability?: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\nexport type CanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & CanExtraProps<T>;\nexport type BoundCanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & BoundCanExtraProps<T>;\n\nexport class Can<T extends AnyAbility> extends PureComponent<CanProps<T>, { t: boolean }> {\n private _isAllowed = false;\n private _ability: T | null = null;\n private _unsubscribeFromAbility: Unsubscribe = noop;\n state = { t: true }\n\n componentWillUnmount() {\n this._unsubscribeFromAbility();\n }\n\n private _connectToAbility(ability?: T) {\n if (ability === this._ability) {\n return;\n }\n\n this._unsubscribeFromAbility();\n this._ability = null;\n\n if (ability) {\n this._ability = ability;\n this._unsubscribeFromAbility = ability.on('updated', () => this.setState({ t: !this.state.t }));\n }\n }\n\n get allowed() {\n return this._isAllowed;\n }\n\n private _canRender(): boolean {\n const props: any = this.props;\n const subject = props.of || props.a || props.an || props.this || props.on;\n const can = props.not ? 'cannot' : 'can';\n\n return props.ability[can](props.I || props.do, subject, props.field);\n }\n\n render() {\n this._connectToAbility(this.props.ability);\n this._isAllowed = this._canRender();\n return this.props.passThrough || this._isAllowed ? this._renderChildren() : null;\n }\n\n private _renderChildren() {\n const { children, ability } = this.props;\n const elements = typeof children === 'function'\n ? children(this._isAllowed, ability as any)\n : children;\n\n return elements as ReactNode;\n }\n}\n","import { AnyAbility } from '@casl/ability';\nimport { Consumer, FunctionComponent, createElement } from 'react';\nimport { BoundCanProps, Can } from './Can';\n\nexport function createContextualCan<T extends AnyAbility>(\n Getter: Consumer<T>\n): FunctionComponent<BoundCanProps<T>> {\n return (props: BoundCanProps<T>) => createElement(Getter, {\n children: (ability: T) => \n createElement(Can, { ...props, ability: props.ability || ability } as any),\n });\n}\n","import React from 'react';\nimport { AnyAbility } from '@casl/ability';\n\nexport function useAbility<T extends AnyAbility>(context: React.Context<T>): T {\n const ability = React.useContext<T>(context);\n\n const subscribe = React.useCallback(\n (callback: () => void) => ability.on('updated', callback),\n [ability],\n );\n\n const getSnapshot = React.useCallback(() => ability.rules, [ability]);\n\n React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n return ability;\n}\n"],"names":["noop","Can","_PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","this","concat","_isAllowed","_ability","_unsubscribeFromAbility","state","t","_inheritsLoose","_proto","prototype","componentWillUnmount","_connectToAbility","ability","_this2","on","setState","_canRender","props","subject","of","a","an","can","not","I","do","field","render","passThrough","_renderChildren","_this$props","children","elements","_createClass","key","get","PureComponent","createContextualCan","Getter","createElement","_extends","useAbility","context","React","useContext","subscribe","useCallback","callback","getSnapshot","rules","useSyncExternalStore"],"mappings":"giCAWA,IAAMA,EAAO,SAAPA,IAAc,EAgCpB,IAAaC,WAAGC,GAAA,SAAAD,IAAA,IAAAE,EAAA,IAAA,IAAAC,EAAAC,UAAAC,OAAAC,EAAA,IAAAC,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAAAN,EAAAD,EAAAQ,KAAAC,MAAAT,EAAA,CAAAU,MAAAC,OAAAN,KAAAK,KAAAT,EACNW,EAAa,MAAKX,EAClBY,EAAqB,KAAIZ,EACzBa,EAAuChB,EAAIG,EACnDc,MAAQ,CAAEC,EAAG,MAAM,OAAAf,CAAA,CAAAgB,EAAAlB,EAAAC,GAAA,IAAAkB,EAAAnB,EAAAoB,UAAAD,EAEnBE,qBAAA,SAAAA,IACEV,KAAKI,GACP,EAACI,EAEOG,EAAR,SAAQA,kBAAkBC,GAAa,IAAAC,EAAAb,KACrC,GAAIY,IAAYZ,KAAKG,EACnB,OAGFH,KAAKI,IACLJ,KAAKG,EAAW,KAEhB,GAAIS,EAAS,CACXZ,KAAKG,EAAWS,EAChBZ,KAAKI,EAA0BQ,EAAQE,GAAG,UAAW,WAAA,OAAMD,EAAKE,SAAS,CAAET,GAAIO,EAAKR,MAAMC,GAAI,EAChG,CACF,EAACE,EAMOQ,EAAR,SAAQA,IACN,IAAMC,EAAajB,KAAKiB,MACxB,IAAMC,EAAUD,EAAME,IAAMF,EAAMG,GAAKH,EAAMI,IAAMJ,EAAMjB,MAAQiB,EAAMH,GACvE,IAAMQ,EAAML,EAAMM,IAAM,SAAW,MAEnC,OAAON,EAAML,QAAQU,GAAKL,EAAMO,GAAKP,EAAMQ,GAAIP,EAASD,EAAMS,MAChE,EAAClB,EAEDmB,OAAA,SAAAA,IACE3B,KAAKW,EAAkBX,KAAKiB,MAAML,SAClCZ,KAAKE,EAAaF,KAAKgB,IACvB,OAAOhB,KAAKiB,MAAMW,aAAe5B,KAAKE,EAAaF,KAAK6B,IAAoB,IAC9E,EAACrB,EAEOqB,EAAR,SAAQA,IACN,IAAAC,EAA8B9B,KAAKiB,MAA3Bc,EAAQD,EAARC,SAAUnB,EAAOkB,EAAPlB,QAClB,IAAMoB,SAAkBD,IAAa,WACjCA,EAAS/B,KAAKE,EAAYU,GAC1BmB,EAEJ,OAAOC,CACT,EAAC,OAAAC,EAAA5C,EAAA,CAAA,CAAA6C,IAAA,UAAAC,IAzBD,SAAAA,IACE,OAAOnC,KAAKE,CACd,IAAC,EA1B4CkC,GCvCxC,SAASC,EACdC,GAEA,OAAO,SAACrB,GAAuB,OAAKsB,EAAcD,EAAQ,CACxDP,SAAU,SAAVA,EAAWnB,GAAU,OACnB2B,EAAclD,EAAGmD,KAAOvB,EAAK,CAAEL,QAASK,EAAML,SAAWA,IAAiB,GAC5E,CACJ,CCRO,SAAS6B,WAAiCC,GAC/C,IAAM9B,EAAU+B,EAAMC,WAAcF,GAEpC,IAAMG,EAAYF,EAAMG,YACtB,SAACC,GAAoB,OAAKnC,EAAQE,GAAG,UAAWiC,EAAS,EACzD,CAACnC,IAGH,IAAMoC,EAAcL,EAAMG,YAAY,WAAA,OAAMlC,EAAQqC,KAAK,EAAE,CAACrC,IAE5D+B,EAAMO,qBAAqBL,EAAWG,EAAaA,GAEnD,OAAOpC,CACT"}
|
package/dist/es6m/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,{PureComponent as i,createElement as n}from"react";const s=()=>{};class e extends i{constructor(...t){super(...t);this.i=false;this.h=null;this.o=s;this.state={t:true}}componentWillUnmount(){this.o()}u(t){if(t===this.h)return;this.o();this.h=null;if(t){this.h=t;this.o=t.on("updated",(
|
|
1
|
+
import t,{PureComponent as i,createElement as n}from"react";const s=()=>{};class e extends i{constructor(...t){super(...t);this.i=false;this.h=null;this.o=s;this.state={t:true}}componentWillUnmount(){this.o()}u(t){if(t===this.h)return;this.o();this.h=null;if(t){this.h=t;this.o=t.on("updated",()=>this.setState({t:!this.state.t}))}}get allowed(){return this.i}l(){const t=this.props;const i=t.of||t.a||t.an||t.this||t.on;const n=t.not?"cannot":"can";return t.ability[n](t.I||t.do,i,t.field)}render(){this.u(this.props.ability);this.i=this.l();return this.props.passThrough||this.i?this.p():null}p(){const{children:t,ability:i}=this.props;const n=typeof t==="function"?t(this.i,i):t;return n}}function r(t){return i=>n(t,{children:t=>n(e,Object.assign({},i,{ability:i.ability||t}))})}function useAbility(i){const n=t.useContext(i);const s=t.useCallback(t=>n.on("updated",t),[n]);const e=t.useCallback(()=>n.rules,[n]);t.useSyncExternalStore(s,e,e);return n}export{e as Can,r as createContextualCan,useAbility};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/es6m/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Can.ts","../../src/factory.ts","../../src/hooks/useAbility.ts"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport {\n Unsubscribe,\n AbilityTuple,\n SubjectType,\n AnyAbility,\n Generics,\n Abilities,\n IfString,\n} from '@casl/ability';\n\nconst noop = () => {};\n\ntype AbilityCanProps<\n T extends Abilities,\n Else = IfString<T, { do: T } | { I: T }>\n> = T extends AbilityTuple\n ? { do: T[0], on: T[1], field?: string } |\n { I: T[0], a: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], an: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }\n : Else;\n\ninterface ExtraProps {\n not?: boolean\n passThrough?: boolean\n}\n\ninterface CanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\ninterface BoundCanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability?: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\nexport type CanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & CanExtraProps<T>;\nexport type BoundCanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & BoundCanExtraProps<T>;\n\nexport class Can<T extends AnyAbility> extends PureComponent<CanProps<T>, { t: boolean }> {\n private _isAllowed = false;\n private _ability: T | null = null;\n private _unsubscribeFromAbility: Unsubscribe = noop;\n state = { t: true }\n\n componentWillUnmount() {\n this._unsubscribeFromAbility();\n }\n\n private _connectToAbility(ability?: T) {\n if (ability === this._ability) {\n return;\n }\n\n this._unsubscribeFromAbility();\n this._ability = null;\n\n if (ability) {\n this._ability = ability;\n this._unsubscribeFromAbility = ability.on('updated', () => this.setState({ t: !this.state.t }));\n }\n }\n\n get allowed() {\n return this._isAllowed;\n }\n\n private _canRender(): boolean {\n const props: any = this.props;\n const subject = props.of || props.a || props.an || props.this || props.on;\n const can = props.not ? 'cannot' : 'can';\n\n return props.ability[can](props.I || props.do, subject, props.field);\n }\n\n render() {\n this._connectToAbility(this.props.ability);\n this._isAllowed = this._canRender();\n return this.props.passThrough || this._isAllowed ? this._renderChildren() : null;\n }\n\n private _renderChildren() {\n const { children, ability } = this.props;\n const elements = typeof children === 'function'\n ? children(this._isAllowed, ability as any)\n : children;\n\n return elements as ReactNode;\n }\n}\n","import { AnyAbility } from '@casl/ability';\nimport { Consumer, FunctionComponent, createElement } from 'react';\nimport { BoundCanProps, Can } from './Can';\n\nexport function createContextualCan<T extends AnyAbility>(\n Getter: Consumer<T>\n): FunctionComponent<BoundCanProps<T>> {\n return (props: BoundCanProps<T>) => createElement(Getter, {\n children: (ability: T) => \n createElement(Can, { ...props, ability: props.ability || ability } as any),\n });\n}\n","import React from 'react';\nimport { AnyAbility } from '@casl/ability';\n\nexport function useAbility<T extends AnyAbility>(context: React.Context<T>): T {\n const ability = React.useContext<T>(context);\n const
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Can.ts","../../src/factory.ts","../../src/hooks/useAbility.ts"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport {\n Unsubscribe,\n AbilityTuple,\n SubjectType,\n AnyAbility,\n Generics,\n Abilities,\n IfString,\n} from '@casl/ability';\n\nconst noop = () => {};\n\ntype AbilityCanProps<\n T extends Abilities,\n Else = IfString<T, { do: T } | { I: T }>\n> = T extends AbilityTuple\n ? { do: T[0], on: T[1], field?: string } |\n { I: T[0], a: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], an: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }\n : Else;\n\ninterface ExtraProps {\n not?: boolean\n passThrough?: boolean\n}\n\ninterface CanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\ninterface BoundCanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability?: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\nexport type CanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & CanExtraProps<T>;\nexport type BoundCanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & BoundCanExtraProps<T>;\n\nexport class Can<T extends AnyAbility> extends PureComponent<CanProps<T>, { t: boolean }> {\n private _isAllowed = false;\n private _ability: T | null = null;\n private _unsubscribeFromAbility: Unsubscribe = noop;\n state = { t: true }\n\n componentWillUnmount() {\n this._unsubscribeFromAbility();\n }\n\n private _connectToAbility(ability?: T) {\n if (ability === this._ability) {\n return;\n }\n\n this._unsubscribeFromAbility();\n this._ability = null;\n\n if (ability) {\n this._ability = ability;\n this._unsubscribeFromAbility = ability.on('updated', () => this.setState({ t: !this.state.t }));\n }\n }\n\n get allowed() {\n return this._isAllowed;\n }\n\n private _canRender(): boolean {\n const props: any = this.props;\n const subject = props.of || props.a || props.an || props.this || props.on;\n const can = props.not ? 'cannot' : 'can';\n\n return props.ability[can](props.I || props.do, subject, props.field);\n }\n\n render() {\n this._connectToAbility(this.props.ability);\n this._isAllowed = this._canRender();\n return this.props.passThrough || this._isAllowed ? this._renderChildren() : null;\n }\n\n private _renderChildren() {\n const { children, ability } = this.props;\n const elements = typeof children === 'function'\n ? children(this._isAllowed, ability as any)\n : children;\n\n return elements as ReactNode;\n }\n}\n","import { AnyAbility } from '@casl/ability';\nimport { Consumer, FunctionComponent, createElement } from 'react';\nimport { BoundCanProps, Can } from './Can';\n\nexport function createContextualCan<T extends AnyAbility>(\n Getter: Consumer<T>\n): FunctionComponent<BoundCanProps<T>> {\n return (props: BoundCanProps<T>) => createElement(Getter, {\n children: (ability: T) => \n createElement(Can, { ...props, ability: props.ability || ability } as any),\n });\n}\n","import React from 'react';\nimport { AnyAbility } from '@casl/ability';\n\nexport function useAbility<T extends AnyAbility>(context: React.Context<T>): T {\n const ability = React.useContext<T>(context);\n\n const subscribe = React.useCallback(\n (callback: () => void) => ability.on('updated', callback),\n [ability],\n );\n\n const getSnapshot = React.useCallback(() => ability.rules, [ability]);\n\n React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n return ability;\n}\n"],"names":["noop","Can","PureComponent","constructor","args","super","this","_isAllowed","_ability","_unsubscribeFromAbility","state","t","componentWillUnmount","_connectToAbility","ability","on","setState","allowed","_canRender","props","subject","of","a","an","can","not","I","do","field","render","passThrough","_renderChildren","children","elements","createContextualCan","Getter","createElement","Object","assign","useAbility","context","React","useContext","subscribe","useCallback","callback","getSnapshot","rules","useSyncExternalStore"],"mappings":"4DAWA,MAAMA,EAAOA,OAgCN,MAAMC,UAAkCC,EAA2CC,WAAAA,IAAAC,GAAAC,SAAAD,GAAAE,KAChFC,EAAa,MAAKD,KAClBE,EAAqB,KAAIF,KACzBG,EAAuCT,EAAIM,KACnDI,MAAQ,CAAEC,EAAG,KAAM,CAEnBC,oBAAAA,GACEN,KAAKG,GACP,CAEQI,CAAAA,CAAkBC,GACxB,GAAIA,IAAYR,KAAKE,EACnB,OAGFF,KAAKG,IACLH,KAAKE,EAAW,KAEhB,GAAIM,EAAS,CACXR,KAAKE,EAAWM,EAChBR,KAAKG,EAA0BK,EAAQC,GAAG,UAAW,IAAMT,KAAKU,SAAS,CAAEL,GAAIL,KAAKI,MAAMC,IAC5F,CACF,CAEA,WAAIM,GACF,OAAOX,KAAKC,CACd,CAEQW,CAAAA,GACN,MAAMC,EAAab,KAAKa,MACxB,MAAMC,EAAUD,EAAME,IAAMF,EAAMG,GAAKH,EAAMI,IAAMJ,EAAMb,MAAQa,EAAMJ,GACvE,MAAMS,EAAML,EAAMM,IAAM,SAAW,MAEnC,OAAON,EAAML,QAAQU,GAAKL,EAAMO,GAAKP,EAAMQ,GAAIP,EAASD,EAAMS,MAChE,CAEAC,MAAAA,GACEvB,KAAKO,EAAkBP,KAAKa,MAAML,SAClCR,KAAKC,EAAaD,KAAKY,IACvB,OAAOZ,KAAKa,MAAMW,aAAexB,KAAKC,EAAaD,KAAKyB,IAAoB,IAC9E,CAEQA,CAAAA,GACN,MAAMC,SAAEA,EAAQlB,QAAEA,GAAYR,KAAKa,MACnC,MAAMc,SAAkBD,IAAa,WACjCA,EAAS1B,KAAKC,EAAYO,GAC1BkB,EAEJ,OAAOC,CACT,ECxFK,SAASC,EACdC,GAEA,OAAQhB,GAA4BiB,EAAcD,EAAQ,CACxDH,SAAWlB,GACTsB,EAAcnC,EAAGoC,OAAAC,OAAA,CAAA,EAAOnB,EAAK,CAAEL,QAASK,EAAML,SAAWA,MAE/D,CCRO,SAASyB,WAAiCC,GAC/C,MAAM1B,EAAU2B,EAAMC,WAAcF,GAEpC,MAAMG,EAAYF,EAAMG,YACrBC,GAAyB/B,EAAQC,GAAG,UAAW8B,GAChD,CAAC/B,IAGH,MAAMgC,EAAcL,EAAMG,YAAY,IAAM9B,EAAQiC,MAAO,CAACjC,IAE5D2B,EAAMO,qBAAqBL,EAAWG,EAAaA,GAEnD,OAAOhC,CACT"}
|
package/dist/umd/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(t,n){typeof exports==="object"&&typeof module!=="undefined"?n(exports,require("react")):typeof define==="function"&&define.amd?define(["exports","react"],n):(t=typeof globalThis!=="undefined"?globalThis:t||self,n((t.casl=t.casl||{},t.casl.react={}),t.React))})(this,
|
|
1
|
+
(function(t,n){typeof exports==="object"&&typeof module!=="undefined"?n(exports,require("react")):typeof define==="function"&&define.amd?define(["exports","react"],n):(t=typeof globalThis!=="undefined"?globalThis:t||self,n((t.casl=t.casl||{},t.casl.react={}),t.React))})(this,function(t,n){"use strict";function r(t,n){for(var r=0;r<n.length;r++){var e=n[r];e.enumerable=e.enumerable||false,e.configurable=true,"value"in e&&(e.writable=true),Object.defineProperty(t,c(e.key),e)}}function e(t,n,e){return n&&r(t.prototype,n),Object.defineProperty(t,"prototype",{writable:false}),t}function i(){return i=Object.assign?Object.assign.bind():function(t){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var e in r)({}).hasOwnProperty.call(r,e)&&(t[e]=r[e])}return t},i.apply(null,arguments)}function u(t,n){t.prototype=Object.create(n.prototype),t.prototype.constructor=t,o(t,n)}function o(t,n){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,n){return t.__proto__=n,t},o(t,n)}function f(t,n){if("object"!=typeof t||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var e=r.call(t,n);if("object"!=typeof e)return e;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}function c(t){var n=f(t,"string");return"symbol"==typeof n?n:n+""}var a=function t(){};var s=function(t){function n(){var n;for(var r=arguments.length,e=new Array(r),i=0;i<r;i++)e[i]=arguments[i];n=t.call.apply(t,[this].concat(e))||this;n.i=false;n.u=null;n.o=a;n.state={t:true};return n}u(n,t);var r=n.prototype;r.componentWillUnmount=function t(){this.o()};r.l=function _connectToAbility(t){var n=this;if(t===this.u)return;this.o();this.u=null;if(t){this.u=t;this.o=t.on("updated",function(){return n.setState({t:!n.state.t})})}};r.v=function t(){var n=this.props;var r=n.of||n.a||n.an||n.this||n.on;var e=n.not?"cannot":"can";return n.ability[e](n.I||n.do,r,n.field)};r.render=function t(){this.l(this.props.ability);this.i=this.v();return this.props.passThrough||this.i?this.h():null};r.h=function t(){var n=this.props,r=n.children,e=n.ability;var i=typeof r==="function"?r(this.i,e):r;return i};return e(n,[{key:"allowed",get:function t(){return this.i}}])}(n.PureComponent);function l(t){return function(r){return n.createElement(t,{children:function t(e){return n.createElement(s,i({},r,{ability:r.ability||e}))}})}}function useAbility(t){var r=n.useContext(t);var e=n.useCallback(function(t){return r.on("updated",t)},[r]);var i=n.useCallback(function(){return r.rules},[r]);n.useSyncExternalStore(e,i,i);return r}t.Can=s;t.createContextualCan=l;t.useAbility=useAbility});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/umd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Can.ts","../../src/factory.ts","../../src/hooks/useAbility.ts"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport {\n Unsubscribe,\n AbilityTuple,\n SubjectType,\n AnyAbility,\n Generics,\n Abilities,\n IfString,\n} from '@casl/ability';\n\nconst noop = () => {};\n\ntype AbilityCanProps<\n T extends Abilities,\n Else = IfString<T, { do: T } | { I: T }>\n> = T extends AbilityTuple\n ? { do: T[0], on: T[1], field?: string } |\n { I: T[0], a: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], an: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }\n : Else;\n\ninterface ExtraProps {\n not?: boolean\n passThrough?: boolean\n}\n\ninterface CanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\ninterface BoundCanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability?: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\nexport type CanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & CanExtraProps<T>;\nexport type BoundCanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & BoundCanExtraProps<T>;\n\nexport class Can<T extends AnyAbility> extends PureComponent<CanProps<T>, { t: boolean }> {\n private _isAllowed = false;\n private _ability: T | null = null;\n private _unsubscribeFromAbility: Unsubscribe = noop;\n state = { t: true }\n\n componentWillUnmount() {\n this._unsubscribeFromAbility();\n }\n\n private _connectToAbility(ability?: T) {\n if (ability === this._ability) {\n return;\n }\n\n this._unsubscribeFromAbility();\n this._ability = null;\n\n if (ability) {\n this._ability = ability;\n this._unsubscribeFromAbility = ability.on('updated', () => this.setState({ t: !this.state.t }));\n }\n }\n\n get allowed() {\n return this._isAllowed;\n }\n\n private _canRender(): boolean {\n const props: any = this.props;\n const subject = props.of || props.a || props.an || props.this || props.on;\n const can = props.not ? 'cannot' : 'can';\n\n return props.ability[can](props.I || props.do, subject, props.field);\n }\n\n render() {\n this._connectToAbility(this.props.ability);\n this._isAllowed = this._canRender();\n return this.props.passThrough || this._isAllowed ? this._renderChildren() : null;\n }\n\n private _renderChildren() {\n const { children, ability } = this.props;\n const elements = typeof children === 'function'\n ? children(this._isAllowed, ability as any)\n : children;\n\n return elements as ReactNode;\n }\n}\n","import { AnyAbility } from '@casl/ability';\nimport { Consumer, FunctionComponent, createElement } from 'react';\nimport { BoundCanProps, Can } from './Can';\n\nexport function createContextualCan<T extends AnyAbility>(\n Getter: Consumer<T>\n): FunctionComponent<BoundCanProps<T>> {\n return (props: BoundCanProps<T>) => createElement(Getter, {\n children: (ability: T) => \n createElement(Can, { ...props, ability: props.ability || ability } as any),\n });\n}\n","import React from 'react';\nimport { AnyAbility } from '@casl/ability';\n\nexport function useAbility<T extends AnyAbility>(context: React.Context<T>): T {\n const ability = React.useContext<T>(context);\n const
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Can.ts","../../src/factory.ts","../../src/hooks/useAbility.ts"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport {\n Unsubscribe,\n AbilityTuple,\n SubjectType,\n AnyAbility,\n Generics,\n Abilities,\n IfString,\n} from '@casl/ability';\n\nconst noop = () => {};\n\ntype AbilityCanProps<\n T extends Abilities,\n Else = IfString<T, { do: T } | { I: T }>\n> = T extends AbilityTuple\n ? { do: T[0], on: T[1], field?: string } |\n { I: T[0], a: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], an: Extract<T[1], SubjectType>, field?: string } |\n { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }\n : Else;\n\ninterface ExtraProps {\n not?: boolean\n passThrough?: boolean\n}\n\ninterface CanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\ninterface BoundCanExtraProps<T extends AnyAbility> extends ExtraProps {\n ability?: T\n children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode)\n}\n\nexport type CanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & CanExtraProps<T>;\nexport type BoundCanProps<T extends AnyAbility> =\n AbilityCanProps<Generics<T>['abilities']> & BoundCanExtraProps<T>;\n\nexport class Can<T extends AnyAbility> extends PureComponent<CanProps<T>, { t: boolean }> {\n private _isAllowed = false;\n private _ability: T | null = null;\n private _unsubscribeFromAbility: Unsubscribe = noop;\n state = { t: true }\n\n componentWillUnmount() {\n this._unsubscribeFromAbility();\n }\n\n private _connectToAbility(ability?: T) {\n if (ability === this._ability) {\n return;\n }\n\n this._unsubscribeFromAbility();\n this._ability = null;\n\n if (ability) {\n this._ability = ability;\n this._unsubscribeFromAbility = ability.on('updated', () => this.setState({ t: !this.state.t }));\n }\n }\n\n get allowed() {\n return this._isAllowed;\n }\n\n private _canRender(): boolean {\n const props: any = this.props;\n const subject = props.of || props.a || props.an || props.this || props.on;\n const can = props.not ? 'cannot' : 'can';\n\n return props.ability[can](props.I || props.do, subject, props.field);\n }\n\n render() {\n this._connectToAbility(this.props.ability);\n this._isAllowed = this._canRender();\n return this.props.passThrough || this._isAllowed ? this._renderChildren() : null;\n }\n\n private _renderChildren() {\n const { children, ability } = this.props;\n const elements = typeof children === 'function'\n ? children(this._isAllowed, ability as any)\n : children;\n\n return elements as ReactNode;\n }\n}\n","import { AnyAbility } from '@casl/ability';\nimport { Consumer, FunctionComponent, createElement } from 'react';\nimport { BoundCanProps, Can } from './Can';\n\nexport function createContextualCan<T extends AnyAbility>(\n Getter: Consumer<T>\n): FunctionComponent<BoundCanProps<T>> {\n return (props: BoundCanProps<T>) => createElement(Getter, {\n children: (ability: T) => \n createElement(Can, { ...props, ability: props.ability || ability } as any),\n });\n}\n","import React from 'react';\nimport { AnyAbility } from '@casl/ability';\n\nexport function useAbility<T extends AnyAbility>(context: React.Context<T>): T {\n const ability = React.useContext<T>(context);\n\n const subscribe = React.useCallback(\n (callback: () => void) => ability.on('updated', callback),\n [ability],\n );\n\n const getSnapshot = React.useCallback(() => ability.rules, [ability]);\n\n React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n return ability;\n}\n"],"names":["noop","Can","_PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","this","concat","_isAllowed","_ability","_unsubscribeFromAbility","state","t","_inheritsLoose","_proto","prototype","componentWillUnmount","_connectToAbility","ability","_this2","on","setState","_canRender","props","subject","of","a","an","can","not","I","do","field","render","passThrough","_renderChildren","_this$props","children","elements","_createClass","key","get","PureComponent","createContextualCan","Getter","createElement","_extends","useAbility","context","React","useContext","subscribe","useCallback","callback","getSnapshot","rules","useSyncExternalStore"],"mappings":"mxCAWA,IAAMA,EAAO,SAAPA,IAAc,EAgCpB,IAAaC,WAAGC,GAAA,SAAAD,IAAA,IAAAE,EAAA,IAAA,IAAAC,EAAAC,UAAAC,OAAAC,EAAA,IAAAC,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAAAN,EAAAD,EAAAQ,KAAAC,MAAAT,EAAA,CAAAU,MAAAC,OAAAN,KAAAK,KAAAT,EACNW,EAAa,MAAKX,EAClBY,EAAqB,KAAIZ,EACzBa,EAAuChB,EAAIG,EACnDc,MAAQ,CAAEC,EAAG,MAAM,OAAAf,CAAA,CAAAgB,EAAAlB,EAAAC,GAAA,IAAAkB,EAAAnB,EAAAoB,UAAAD,EAEnBE,qBAAA,SAAAA,IACEV,KAAKI,GACP,EAACI,EAEOG,EAAR,SAAQA,kBAAkBC,GAAa,IAAAC,EAAAb,KACrC,GAAIY,IAAYZ,KAAKG,EACnB,OAGFH,KAAKI,IACLJ,KAAKG,EAAW,KAEhB,GAAIS,EAAS,CACXZ,KAAKG,EAAWS,EAChBZ,KAAKI,EAA0BQ,EAAQE,GAAG,UAAW,WAAA,OAAMD,EAAKE,SAAS,CAAET,GAAIO,EAAKR,MAAMC,GAAI,EAChG,CACF,EAACE,EAMOQ,EAAR,SAAQA,IACN,IAAMC,EAAajB,KAAKiB,MACxB,IAAMC,EAAUD,EAAME,IAAMF,EAAMG,GAAKH,EAAMI,IAAMJ,EAAMjB,MAAQiB,EAAMH,GACvE,IAAMQ,EAAML,EAAMM,IAAM,SAAW,MAEnC,OAAON,EAAML,QAAQU,GAAKL,EAAMO,GAAKP,EAAMQ,GAAIP,EAASD,EAAMS,MAChE,EAAClB,EAEDmB,OAAA,SAAAA,IACE3B,KAAKW,EAAkBX,KAAKiB,MAAML,SAClCZ,KAAKE,EAAaF,KAAKgB,IACvB,OAAOhB,KAAKiB,MAAMW,aAAe5B,KAAKE,EAAaF,KAAK6B,IAAoB,IAC9E,EAACrB,EAEOqB,EAAR,SAAQA,IACN,IAAAC,EAA8B9B,KAAKiB,MAA3Bc,EAAQD,EAARC,SAAUnB,EAAOkB,EAAPlB,QAClB,IAAMoB,SAAkBD,IAAa,WACjCA,EAAS/B,KAAKE,EAAYU,GAC1BmB,EAEJ,OAAOC,CACT,EAAC,OAAAC,EAAA5C,EAAA,CAAA,CAAA6C,IAAA,UAAAC,IAzBD,SAAAA,IACE,OAAOnC,KAAKE,CACd,IAAC,EA1B4CkC,EAAAA,eCvCxC,SAASC,EACdC,GAEA,OAAO,SAACrB,GAAuB,OAAKsB,EAAAA,cAAcD,EAAQ,CACxDP,SAAU,SAAVA,EAAWnB,GAAU,OACnB2B,EAAAA,cAAclD,EAAGmD,KAAOvB,EAAK,CAAEL,QAASK,EAAML,SAAWA,IAAiB,GAC5E,CACJ,CCRO,SAAS6B,WAAiCC,GAC/C,IAAM9B,EAAU+B,EAAMC,WAAcF,GAEpC,IAAMG,EAAYF,EAAMG,YACtB,SAACC,GAAoB,OAAKnC,EAAQE,GAAG,UAAWiC,EAAS,EACzD,CAACnC,IAGH,IAAMoC,EAAcL,EAAMG,YAAY,WAAA,OAAMlC,EAAQqC,KAAK,EAAE,CAACrC,IAE5D+B,EAAMO,qBAAqBL,EAAWG,EAAaA,GAEnD,OAAOpC,CACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@casl/react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "React component for CASL which makes it easy to add permissions in any React application",
|
|
5
5
|
"main": "dist/umd/index.js",
|
|
6
6
|
"module": "dist/es5m/index.js",
|
|
@@ -22,15 +22,6 @@
|
|
|
22
22
|
"publishConfig": {
|
|
23
23
|
"access": "public"
|
|
24
24
|
},
|
|
25
|
-
"scripts": {
|
|
26
|
-
"build.prepare": "rm -rf dist/* && npm run build.types",
|
|
27
|
-
"build": "npm run build.prepare && BUILD_TYPES=es5m,es6m,umd dx rollup -n casl.react -g react:React,prop-types:React.PropTypes,@casl/ability:casl",
|
|
28
|
-
"build.types": "dx tsc",
|
|
29
|
-
"lint": "dx eslint src/ spec/",
|
|
30
|
-
"test": "dx jest --env jsdom",
|
|
31
|
-
"release.prepare": "npm run lint && npm test && NODE_ENV=production npm run build",
|
|
32
|
-
"release": "npm run release.prepare && dx semantic-release"
|
|
33
|
-
},
|
|
34
25
|
"keywords": [
|
|
35
26
|
"casl",
|
|
36
27
|
"react",
|
|
@@ -42,15 +33,15 @@
|
|
|
42
33
|
"license": "MIT",
|
|
43
34
|
"peerDependencies": {
|
|
44
35
|
"@casl/ability": "^4.0.0 || ^5.1.0 || ^6.0.0",
|
|
45
|
-
"react": "^
|
|
36
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
46
37
|
},
|
|
47
38
|
"devDependencies": {
|
|
48
39
|
"@casl/ability": "^6.0.0",
|
|
49
|
-
"@casl/dx": "
|
|
40
|
+
"@casl/dx": "^1.0.0",
|
|
50
41
|
"@testing-library/dom": "^10.4.0",
|
|
51
42
|
"@testing-library/react": "^16.1.0",
|
|
52
|
-
"@types/jest": "^
|
|
53
|
-
"@types/node": "^
|
|
43
|
+
"@types/jest": "^30.0.0",
|
|
44
|
+
"@types/node": "^24.0.0",
|
|
54
45
|
"@types/react": "^19.0.0",
|
|
55
46
|
"chai": "^4.1.0",
|
|
56
47
|
"chai-spies": "^1.0.0",
|
|
@@ -60,5 +51,14 @@
|
|
|
60
51
|
"files": [
|
|
61
52
|
"dist",
|
|
62
53
|
"*.d.ts"
|
|
63
|
-
]
|
|
64
|
-
|
|
54
|
+
],
|
|
55
|
+
"scripts": {
|
|
56
|
+
"build.prepare": "rm -rf dist/* && npm run build.types",
|
|
57
|
+
"build": "npm run build.prepare && BUILD_TYPES=es5m,es6m,umd dx rollup -n casl.react -g react:React,prop-types:React.PropTypes,@casl/ability:casl",
|
|
58
|
+
"build.types": "dx tsc",
|
|
59
|
+
"lint": "dx eslint src/ spec/",
|
|
60
|
+
"test": "dx jest --env jsdom",
|
|
61
|
+
"release.prepare": "npm run lint && npm test && NODE_ENV=production npm run build",
|
|
62
|
+
"release": "npm run release.prepare && pnpm publish"
|
|
63
|
+
}
|
|
64
|
+
}
|