@casl/angular - npm Package Compare versions

Comparing version 7.0.1 to 7.1.0

dist/es5m/index.js

 import * as i0 from '@angular/core';
-import { Pipe, Inject, NgModule } from '@angular/core';
+import { Pipe, Inject, NgModule, Injectable } from '@angular/core';
 import { PureAbility } from '@casl/ability';
@@ -86,3 +86,21 @@ import { Observable } from 'rxjs';
 
-export { AbilityModule, AblePipe, AblePurePipe };
+var AbilityService = /** @class */ (function () {
+    function AbilityService(ability) {
+        this.ability$ = new Observable(function (observer) {
+            observer.next(ability);
+            return ability.on('updated', function () { return observer.next(ability); });
+        });
+    }
+    AbilityService.ɵfac = function AbilityService_Factory(t) { return new (t || AbilityService)(i0.ɵɵinject(PureAbility)); };
+    AbilityService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AbilityService, factory: AbilityService.ɵfac });
+    return AbilityService;
+}());
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AbilityService, [{
+        type: Injectable
+    }], function () { return [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [PureAbility]
+            }] }]; }, null); })();
+
+export { AbilityModule, AbilityService, AblePipe, AblePurePipe };
 //# sourceMappingURL=index.js.map

dist/types/pipes.d.ts

 import { PipeTransform } from '@angular/core';
-import { Unsubscribe, AnyAbility } from '@casl/ability';
+import { AnyAbility } from '@casl/ability';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class AblePipe<T extends AnyAbility> implements PipeTransform {
-    protected _unsubscribeFromAbility?: Unsubscribe;
     private _ability;
@@ -8,0 +7,0 @@ constructor(ability: T);

dist/types/public.d.ts

 export * from './pipes';
 export * from './AbilityModule';
+export * from './AbilityService';

dist/umd/index.js

@@ -109,3 +109,22 @@ (function (global, factory) {
 
+    var AbilityService = /** @class */ (function () {
+        function AbilityService(ability) {
+            this.ability$ = new rxjs.Observable(function (observer) {
+                observer.next(ability);
+                return ability.on('updated', function () { return observer.next(ability); });
+            });
+        }
+        AbilityService.ɵfac = function AbilityService_Factory(t) { return new (t || AbilityService)(i0__namespace.ɵɵinject(ability.PureAbility)); };
+        AbilityService.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: AbilityService, factory: AbilityService.ɵfac });
+        return AbilityService;
+    }());
+    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AbilityService, [{
+            type: i0.Injectable
+        }], function () { return [{ type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: [ability.PureAbility]
+                }] }]; }, null); })();
+
     exports.AbilityModule = AbilityModule;
+    exports.AbilityService = AbilityService;
     exports.AblePipe = AblePipe;
@@ -112,0 +131,0 @@ exports.AblePurePipe = AblePurePipe;

package.json

 {
   "name": "@casl/angular",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "Angular module for CASL which makes it easy to add permissions in any Angular app",
@@ -55,3 +55,3 @@ "main": "dist/umd/index.js",
   "devDependencies": {
-    "@abraham/reflection": "^0.8.0",
+    "@abraham/reflection": "^0.10.0",
     "@angular/common": "^13.0.0",
@@ -64,7 +64,7 @@ "@angular/compiler": "^13.0.0",
     "@angular-devkit/build-angular": "^13.0.0",
-    "jest": "^27.0.0",
+    "jest": "^28.0.0",
     "@casl/ability": "^6.0.0",
     "@casl/dx": "workspace:^1.0.0",
-    "@types/jest": "^27.4.7",
-    "jest-preset-angular": "^11.0.0",
+    "@types/jest": "^28.0.0",
+    "jest-preset-angular": "^12.0.0",
     "rxjs": "^7.5.5",
@@ -71,0 +71,0 @@ "tslib": "^2.0.0",

README.md

@@ -124,4 +124,37 @@ # CASL Angular
 
-## Check permissions in templates
+## Check permissions in templates using AbilityService
 
+`AbilityService` is a service that provides `ability$` observable. This observable injects provided in DI `PureAbility` instance and emits it each time its rules are changed. This allows efficiently use permissions checks, especially in case we use `ChangeDetectionStrategy.OnPush`.
+
+Let's first see how it can be used in any component:
+
+```ts
+@Component({
+  selector: 'my-home',
+  template: `
+    <ng-container *ngIf="ability$ | async as ability">
+      <h1>Home Page</h1>
+      <button *ngIf="ability.can('create', 'Post')">Create Post</button>
+    </ng-container>
+  `
+})
+export class HomeComponent {
+  readonly ability$: Observable<AppAbility>;
+
+  constructor(abilityService: AbilityService<AppAbility>) {
+    this.ability$ = abilityService.ability$;
+  }
+}
+```
+
+It also can be safely used inside `*ngFor` and other directives. If we use `ChangeDetectionStrategy.OnPush`, it will give us additional performance improvements because `ability.can(...)` won't be called without a need.
+
+This approach works good from performance point of view because it creates only single subscription per component (not per check as in case of `ablePure` pipe) and doesn't require our component to use `Default` or `OnPush` strategy.
+
+**Note**: provide this service at root injector level as we need only 1 instance of it.
+
+But let's also see how we can do permission checks using pipes and what are performance implications of that:
+
+## Check permissions in templates using pipe
+
 To check permissions in any template you can use `AblePipe`:
@@ -135,6 +168,4 @@
 
-> You can read the expression in `ngIf` as "if creatable Post"
+### Why pipe and not directive?
 
-## Why pipe and not directive?
-
 Directive cannot be used to pass values into inputs of other components. For example, we need to enable or disable a button based on user's ability to create a post. With directive we cannot do this but we can do this with pipe:
@@ -146,3 +177,3 @@
 
-## Performance considerations
+### Performance considerations
 
@@ -149,0 +180,0 @@ There are 2 pipes in `@casl/angular`:

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39444

increased by21.12%

Number of package files

15

increased by7.14%

Lines of code

353

increased by20.48%

Number of lines in readme file

267

increased by13.14%

No dependency changes