feat(ability): updates typings for vue

Relates to #256 BREAKING CHANGES
stalniy · Feb 17, 2020 · 8ac4ca1 · 8ac4ca1
1 parent 4d634d7
commit 8ac4ca1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/packages/casl-vue/src/component/can.ts b/packages/casl-vue/src/component/can.ts
@@ -1,11 +1,11 @@
 import { FunctionalComponentOptions, VNode } from 'vue';
-import { AbilitySubject } from '@casl/ability';
+import { SubjectType, Subject } from '@casl/ability';
 
 export type AbilityCanProps =
-  { do: string, on: AbilitySubject } |
-  { I: string, a: Exclude<AbilitySubject, object> } |
-  { I: string, an: Exclude<AbilitySubject, object> } |
-  { I: string, of: AbilitySubject } |
+  { do: string, on: Subject } |
+  { I: string, a: SubjectType } |
+  { I: string, an: SubjectType } |
+  { I: string, of: Subject } |
   { I: string, this: object };
 
 export type AllCanProps = AbilityCanProps & {

diff --git a/packages/casl-vue/src/extendVueTypes.ts b/packages/casl-vue/src/extendVueTypes.ts
@@ -1,9 +1,9 @@
-import { Ability, CanArgsType } from '@casl/ability';
+import { Ability } from '@casl/ability';
 
 declare module 'vue/types/vue' {
   interface Vue {
     $ability: Ability
-    $can(action: CanArgsType[0], subject: CanArgsType[1], field?: CanArgsType[2]): boolean
+    $can(...args: Parameters<Ability['can']>): boolean
   }
 }
 

diff --git a/packages/casl-vue/src/plugin.ts b/packages/casl-vue/src/plugin.ts
@@ -1,27 +1,27 @@
-import { Ability, CanArgsType, RawRule } from '@casl/ability';
+import { Ability, Subject } from '@casl/ability';
 import { VueConstructor } from 'vue';
 import './extendVueTypes';
 
 const WATCHERS = new WeakMap();
 
-export function abilitiesPlugin(Vue: VueConstructor, providedAbility?: Ability) {
-  const defaultAbility = providedAbility || new Ability([]);
+export function abilitiesPlugin<
+  A extends string = string,
+  S extends Subject = Subject,
+  C = object
+>(Vue: VueConstructor, providedAbility?: Ability<A, S, C>) {
+  const defaultAbility = providedAbility || new Ability<A, S, C>([]);
 
-  function watcherFor(ability: Ability) {
+  function renderingDependencyFor(ability: Ability) {
     if (WATCHERS.has(ability)) {
       return WATCHERS.get(ability);
     }
 
-    const data: { rules: RawRule[] | null } = {
-      rules: null
-    };
+    const data = { count: 0 };
     const watcher = typeof Vue.observable === 'function'
       ? Vue.observable(data)
       : new Vue({ data });
 
-    ability.on('updated', (event) => {
-      watcher.rules = event.rules;
-    });
+    ability.on('updated', () => watcher.count++);
     WATCHERS.set(ability, watcher);
 
     return watcher;
@@ -39,10 +39,9 @@ export function abilitiesPlugin(Vue: VueConstructor, providedAbility?: Ability)
     },
 
     methods: {
-      $can(...args: CanArgsType) {
-        const watcher = watcherFor(this.$ability);
-        // create rendering dependency
-        watcher.rules = watcher.rules; // eslint-disable-line
+      $can(...args: Parameters<Ability<A, S, C>['can']>): boolean {
+        const dep = renderingDependencyFor(this.$ability);
+        dep.count = dep.count; // eslint-disable-line
 
         return this.$ability.can(...args);
       }