@casl/angular - npm Package Compare versions

Comparing version 5.1.2 to 5.1.3

CHANGELOG.md

@@ -5,17 +5,2 @@ # Change Log
 
-## [5.1.2](https://github.com/stalniy/casl/compare/@casl/angular@5.1.1...@casl/angular@5.1.2) (2021-05-31)
-
-
-### chore
-
-* **deps:** updates angular to v12 ([#516](https://github.com/stalniy/casl/issues/516)) ([ff4212c](https://github.com/stalniy/casl/commit/ff4212c7f32f1fbc8a73e6b3a6615af65991e39a)), closes [#514](https://github.com/stalniy/casl/issues/514) [#512](https://github.com/stalniy/casl/issues/512)
-
-
-### BREAKING CHANGES
-
-* **deps:** there are 2 important changes:
-
-  * deprecated CanPipe was removed, use AblePipe instead
-  * library is compiled by Ivy and no longer support ViewEngine
-
 ## [5.1.1](https://github.com/stalniy/casl/compare/@casl/angular@5.1.0...@casl/angular@5.1.1) (2021-05-12)
@@ -22,0 +7,0 @@

dist/es5m/index.js

@@ -1,12 +0,13 @@
-import * as i0 from '@angular/core';
-import { Pipe, Inject, NgModule } from '@angular/core';
+import { Pipe, Inject, ChangeDetectorRef, NgModule } from '@angular/core';
 import { PureAbility } from '@casl/ability';
 import { Observable } from 'rxjs';
 
-var AblePipe = /** @class */ (function () {
-    function AblePipe(ability) {
+var AbilityPipe = /** @class */ (function () {
+    function AbilityPipe(ability, cd) {
         this._ability = ability;
+        this._cd = cd;
     }
-    AblePipe.prototype.transform = function () {
+    AbilityPipe.prototype.transform = function () {
         var _a;
+        var _this = this;
         var args = [];
@@ -16,15 +17,57 @@ for (var _i = 0; _i < arguments.length; _i++) {
         }
+        if (!this._unsubscribeFromAbility) {
+            this._unsubscribeFromAbility = this._ability.on('updated', function () { return _this._cd.markForCheck(); });
+        }
         return (_a = this._ability).can.apply(_a, args);
     };
-    AblePipe.ɵfac = function AblePipe_Factory(t) { return new (t || AblePipe)(i0.ɵɵdirectiveInject(PureAbility, 16)); };
-    AblePipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "able", type: AblePipe, pure: false });
+    AbilityPipe.prototype.ngOnDestroy = function () {
+        if (this._unsubscribeFromAbility) {
+            this._unsubscribeFromAbility();
+        }
+    };
+    return AbilityPipe;
+}());
+var CanPipe = /** @class */ (function () {
+    function CanPipe(ability, cd) {
+        this.pipe = new AbilityPipe(ability, cd);
+    }
+    CanPipe.prototype.transform = function (subject, action, field) {
+        return this.pipe.transform(action, subject, field);
+    };
+    CanPipe.prototype.ngOnDestroy = function () {
+        this.pipe.ngOnDestroy();
+    };
+    CanPipe.decorators = [
+        { type: Pipe, args: [{ name: 'can', pure: false },] }
+    ];
+    CanPipe.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: [PureAbility,] }] },
+        { type: ChangeDetectorRef }
+    ]; };
+    return CanPipe;
+}());
+var AblePipe = /** @class */ (function () {
+    function AblePipe(ability, cd) {
+        this.pipe = new AbilityPipe(ability, cd);
+    }
+    AblePipe.prototype.transform = function () {
+        var _a;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return (_a = this.pipe).transform.apply(_a, args);
+    };
+    AblePipe.prototype.ngOnDestroy = function () {
+        this.pipe.ngOnDestroy();
+    };
+    AblePipe.decorators = [
+        { type: Pipe, args: [{ name: 'able', pure: false },] }
+    ];
+    AblePipe.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: [PureAbility,] }] },
+        { type: ChangeDetectorRef }
+    ]; };
     return AblePipe;
 }());
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AblePipe, [{
-        type: Pipe,
-        args: [{ name: 'able', pure: false }]
-    }], function () { return [{ type: undefined, decorators: [{
-                type: Inject,
-                args: [PureAbility]
-            }] }]; }, null); })();
 var AblePurePipe = /** @class */ (function () {
@@ -50,13 +93,10 @@ function AblePurePipe(ability) {
     };
-    AblePurePipe.ɵfac = function AblePurePipe_Factory(t) { return new (t || AblePurePipe)(i0.ɵɵdirectiveInject(PureAbility, 16)); };
-    AblePurePipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "ablePure", type: AblePurePipe, pure: true });
+    AblePurePipe.decorators = [
+        { type: Pipe, args: [{ name: 'ablePure' },] }
+    ];
+    AblePurePipe.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: [PureAbility,] }] }
+    ]; };
     return AblePurePipe;
 }());
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AblePurePipe, [{
-        type: Pipe,
-        args: [{ name: 'ablePure' }]
-    }], function () { return [{ type: undefined, decorators: [{
-                type: Inject,
-                args: [PureAbility]
-            }] }]; }, null); })();
 
@@ -66,25 +106,20 @@ var AbilityModule = /** @class */ (function () {
     }
-    AbilityModule.ɵfac = function AbilityModule_Factory(t) { return new (t || AbilityModule)(); };
-    AbilityModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AbilityModule });
-    AbilityModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
+    AbilityModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [
+                        CanPipe,
+                        AblePipe,
+                        AblePurePipe,
+                    ],
+                    exports: [
+                        CanPipe,
+                        AblePipe,
+                        AblePurePipe,
+                    ],
+                },] }
+    ];
     return AbilityModule;
 }());
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AbilityModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [
-                    AblePipe,
-                    AblePurePipe,
-                ],
-                exports: [
-                    AblePipe,
-                    AblePurePipe,
-                ],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AbilityModule, { declarations: [AblePipe,
-        AblePurePipe], exports: [AblePipe,
-        AblePurePipe] }); })();
 
-export { AbilityModule, AblePipe, AblePurePipe };
+export { AbilityModule, AblePipe, AblePurePipe, CanPipe };
 //# sourceMappingURL=index.js.map

dist/types/AbilityModule.d.ts

@@ -1,7 +0,2 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./pipes";
 export declare class AbilityModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbilityModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AbilityModule, [typeof i1.AblePipe, typeof i1.AblePurePipe], never, [typeof i1.AblePipe, typeof i1.AblePurePipe]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AbilityModule>;
 }

dist/types/index.d.ts

 /**
  * Generated bundle index. Do not edit.
  */
-/// <amd-module name="@casl/angular" />
 export * from './public';

dist/types/pipes.d.ts

@@ -1,13 +0,24 @@
-import { PipeTransform } from '@angular/core';
+import { ChangeDetectorRef, PipeTransform } from '@angular/core';
 import { Unsubscribe, AnyAbility } from '@casl/ability';
 import { Observable } from 'rxjs';
-import * as i0 from "@angular/core";
-export declare class AblePipe<T extends AnyAbility> implements PipeTransform {
+declare class AbilityPipe<T extends AnyAbility> {
     protected _unsubscribeFromAbility?: Unsubscribe;
     private _ability;
-    constructor(ability: T);
+    private _cd;
+    constructor(ability: T, cd: ChangeDetectorRef);
     transform(...args: Parameters<T['can']>): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AblePipe<any>, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<AblePipe<any>, "able">;
+    ngOnDestroy(): void;
 }
+export declare class CanPipe<T extends AnyAbility> implements PipeTransform {
+    protected pipe: AbilityPipe<T>;
+    constructor(ability: T, cd: ChangeDetectorRef);
+    transform(subject: Parameters<T['can']>[1], action: Parameters<T['can']>[0], field?: string): boolean;
+    ngOnDestroy(): void;
+}
+export declare class AblePipe<T extends AnyAbility> implements PipeTransform {
+    protected pipe: AbilityPipe<T>;
+    constructor(ability: T, cd: ChangeDetectorRef);
+    transform(...args: Parameters<T['can']>): boolean;
+    ngOnDestroy(): void;
+}
 export declare class AblePurePipe<T extends AnyAbility> implements PipeTransform {
@@ -17,4 +28,3 @@ private _ability;
     transform(...args: Parameters<T['can']>): Observable<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AblePurePipe<any>, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<AblePurePipe<any>, "ablePure">;
 }
+export {};

dist/umd/index.js

@@ -5,29 +5,50 @@ (function (global, factory) {
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.casl = global.casl || {}, global.casl.ng = {}), global.ng.core, global.casl, global.rxjs));
-}(this, (function (exports, i0, ability, rxjs) { 'use strict';
+}(this, (function (exports, core, ability, rxjs) { 'use strict';
 
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
-                    });
-                }
-            });
+    var AbilityPipe = /** @class */ (function () {
+        function AbilityPipe(ability, cd) {
+            this._ability = ability;
+            this._cd = cd;
         }
-        n['default'] = e;
-        return Object.freeze(n);
-    }
-
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-
+        AbilityPipe.prototype.transform = function () {
+            var _a;
+            var _this = this;
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            if (!this._unsubscribeFromAbility) {
+                this._unsubscribeFromAbility = this._ability.on('updated', function () { return _this._cd.markForCheck(); });
+            }
+            return (_a = this._ability).can.apply(_a, args);
+        };
+        AbilityPipe.prototype.ngOnDestroy = function () {
+            if (this._unsubscribeFromAbility) {
+                this._unsubscribeFromAbility();
+            }
+        };
+        return AbilityPipe;
+    }());
+    var CanPipe = /** @class */ (function () {
+        function CanPipe(ability, cd) {
+            this.pipe = new AbilityPipe(ability, cd);
+        }
+        CanPipe.prototype.transform = function (subject, action, field) {
+            return this.pipe.transform(action, subject, field);
+        };
+        CanPipe.prototype.ngOnDestroy = function () {
+            this.pipe.ngOnDestroy();
+        };
+        CanPipe.decorators = [
+            { type: core.Pipe, args: [{ name: 'can', pure: false },] }
+        ];
+        CanPipe.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [ability.PureAbility,] }] },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        return CanPipe;
+    }());
     var AblePipe = /** @class */ (function () {
-        function AblePipe(ability) {
-            this._ability = ability;
+        function AblePipe(ability, cd) {
+            this.pipe = new AbilityPipe(ability, cd);
         }
@@ -40,15 +61,16 @@ AblePipe.prototype.transform = function () {
             }
-            return (_a = this._ability).can.apply(_a, args);
+            return (_a = this.pipe).transform.apply(_a, args);
         };
-        AblePipe.ɵfac = function AblePipe_Factory(t) { return new (t || AblePipe)(i0__namespace.ɵɵdirectiveInject(ability.PureAbility, 16)); };
-        AblePipe.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "able", type: AblePipe, pure: false });
+        AblePipe.prototype.ngOnDestroy = function () {
+            this.pipe.ngOnDestroy();
+        };
+        AblePipe.decorators = [
+            { type: core.Pipe, args: [{ name: 'able', pure: false },] }
+        ];
+        AblePipe.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [ability.PureAbility,] }] },
+            { type: core.ChangeDetectorRef }
+        ]; };
         return AblePipe;
     }());
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AblePipe, [{
-            type: i0.Pipe,
-            args: [{ name: 'able', pure: false }]
-        }], function () { return [{ type: undefined, decorators: [{
-                    type: i0.Inject,
-                    args: [ability.PureAbility]
-                }] }]; }, null); })();
     var AblePurePipe = /** @class */ (function () {
@@ -74,13 +96,10 @@ function AblePurePipe(ability) {
         };
-        AblePurePipe.ɵfac = function AblePurePipe_Factory(t) { return new (t || AblePurePipe)(i0__namespace.ɵɵdirectiveInject(ability.PureAbility, 16)); };
-        AblePurePipe.ɵpipe = /*@__PURE__*/ i0__namespace.ɵɵdefinePipe({ name: "ablePure", type: AblePurePipe, pure: true });
+        AblePurePipe.decorators = [
+            { type: core.Pipe, args: [{ name: 'ablePure' },] }
+        ];
+        AblePurePipe.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [ability.PureAbility,] }] }
+        ]; };
         return AblePurePipe;
     }());
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AblePurePipe, [{
-            type: i0.Pipe,
-            args: [{ name: 'ablePure' }]
-        }], function () { return [{ type: undefined, decorators: [{
-                    type: i0.Inject,
-                    args: [ability.PureAbility]
-                }] }]; }, null); })();
 
@@ -90,23 +109,18 @@ var AbilityModule = /** @class */ (function () {
         }
-        AbilityModule.ɵfac = function AbilityModule_Factory(t) { return new (t || AbilityModule)(); };
-        AbilityModule.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: AbilityModule });
-        AbilityModule.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({});
+        AbilityModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [
+                            CanPipe,
+                            AblePipe,
+                            AblePurePipe,
+                        ],
+                        exports: [
+                            CanPipe,
+                            AblePipe,
+                            AblePurePipe,
+                        ],
+                    },] }
+        ];
         return AbilityModule;
     }());
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AbilityModule, [{
-            type: i0.NgModule,
-            args: [{
-                    declarations: [
-                        AblePipe,
-                        AblePurePipe,
-                    ],
-                    exports: [
-                        AblePipe,
-                        AblePurePipe,
-                    ],
-                }]
-        }], null, null); })();
-    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(AbilityModule, { declarations: [AblePipe,
-            AblePurePipe], exports: [AblePipe,
-            AblePurePipe] }); })();
 
@@ -116,2 +130,3 @@ exports.AbilityModule = AbilityModule;
     exports.AblePurePipe = AblePurePipe;
+    exports.CanPipe = CanPipe;
 
@@ -118,0 +133,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "@casl/angular",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "description": "Angular module for CASL which makes it easy to add permissions in any Angular app",
   "main": "dist/umd/index.js",
   "module": "dist/es5m/index.js",
-  "es2015": "dist/es6m/index.mjs",
+  "es2015": "dist/es6m/index.js",
   "typings": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/es6m/index.mjs",
+      "import": "./dist/es6m/index.js",
       "require": "./dist/umd/index.js"
@@ -29,5 +29,5 @@ }
     "build.umd": "TARGET=es5 BUILD=umd npm run rollup",
-    "build.types": "ngc -p tsconfig.types.json && rm -rf dist/types/*.js",
+    "build.types": "ngc -p tsconfig.types.json",
     "prerollup": "ngc -p tsconfig.build.json --target $TARGET --outDir dist/$BUILD/tmp",
-    "rollup": "IGNORE_SUBPATH=1 LIB_MINIFY=false BUILD_TYPES=$BUILD ES_TRANSFORM=false dx rollup -i dist/$BUILD/tmp/index.js -n casl.ng -g @angular/core:ng.core,@casl/ability:casl,tslib:tslib,rxjs:rxjs",
+    "rollup": "IGNORE_SUBPATH=1 LIB_MINIFY=false BUILD_TYPES=$BUILD ES_TRANSFORM=false ES6M_EXT=.js dx rollup -i dist/$BUILD/tmp/index.js -n casl.ng -g @angular/core:ng.core,@casl/ability:casl,tslib:tslib,rxjs:rxjs",
     "postrollup": "rm -rf dist/$BUILD/tmp",
@@ -49,21 +49,20 @@ "test": "dx jest --config ./jest.config.js",
   "peerDependencies": {
-    "@angular/core": "^12.0.0",
+    "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0",
     "@casl/ability": "^3.0.0 || ^4.0.0 || ^5.1.0",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.0.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@abraham/reflection": "^0.8.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/platform-browser": "^12.0.0",
-    "@angular/platform-browser-dynamic": "^12.0.0",
+    "@abraham/reflection": "^0.7.0",
+    "@angular/common": "^11.0.0",
+    "@angular/compiler": "^11.0.0",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/platform-browser": "^11.0.0",
+    "@angular/platform-browser-dynamic": "^11.0.0",
     "@casl/ability": "^5.1.0",
     "@casl/dx": "workspace:^1.0.0",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.0.0",
     "tslib": "^2.0.0",
-    "typescript": "~4.2.3",
-    "zone.js": "~0.11.4"
+    "zone.js": "^0.10.2"
   },
@@ -70,0 +69,0 @@ "files": [

README.md

@@ -7,8 +7,6 @@ # CASL Angular
 
-This package allows to integrate `@casl/ability` with [Angular] application. It provides `AblePipe` and `AblePurePipe` to Angular templates, so you can show or hide components, buttons, etc based on user ability to see them.
+This package allows to integrate `@casl/ability` with [Angular] application. It provides `AblePipe` and **deprecated** `CanPipe` to Angular templates, so you can show or hide components, buttons, etc based on user ability to see them.
 
 ## Installation
 
-The latest version of this package is compiled by Ivy, so **apps that do not use Ivy are no longer supported.**
-
 ```sh
@@ -45,3 +43,3 @@ npm install @casl/angular @casl/ability
 
-The 2nd provider provides instance of `PureAbility`, so pipes can inject it later. This pipes inject `PureAbility` (not `Ability`) because this allows an application developer to decide how to configure actions, subjects and conditions. Also this is the only way to get maximum from tree shaking (e.g., if you don't need conditions you can use `PureAbility` and shrink @casl/ability size).
+The 2nd provider provides instance of `PureAbility`, so `CanPipe` and `AblePipe` can inject it later. This pipes inject `PureAbility` (not `Ability`) because this allows an application developer to decide how to configure actions, subjects and conditions. Also this is the only way to get maximum from tree shaking (e.g., if you don't need conditions you can use `PureAbility` and get rid of `sift` library).
 
@@ -138,2 +136,12 @@ > Read [CASL and TypeScript](https://casl.js.org/v5/en/advanced/typescript) to get more details about `Ability` type configuration.
 
+Or with **deprecated** `CanPipe`:
+
+```html
+<div *ngIf="'Post' | can: 'create'">
+  <a (click)="createPost()">Add Post</a>
+</div>
+```
+
+`CanPipe` was deprecated because it is less readable and it was harder to integrate it with all type definitions supported by `Ability`'s `can` method. That's why `CanPipe` has weaker typings than `AblePipe`.
+
 ## Why pipe and not directive?
@@ -140,0 +148,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58434

increased by19.39%

Dev dependency count

12

decreased by-7.69%

Number of package files

16

increased by6.67%

Lines of code

376

increased by28.33%

Number of lines in readme file

244

increased by3.39%

No dependency changes