Commits on Jan 22, 2021

1. refactor(vue): adds support for vue 3 …

   Fixes #396
   
   BREAKING CHANGE: refactor to use Vue 3 what introduces a bunch of breaking changes:
   
     * `Ability` instance is not a required plugin parameter. Previously, we could decide whether to pass ability as plugin parameter or as root component option. Now, the only way is to pass it in plugin:
   
       **Before**
   
       ```js
       import { abilitiesPlugin } from '@casl/vue';
       import Vue from 'vue';
       import { ability } from './services/AppAbility';
   
       Vue.use(abilitiesPlugin);
       new Vue({
         ability
       }).$mount('#app')
       ```
   
       **After**
   
       ```js
       import { abilitiesPlugin } from '@casl/vue';
       import { createApp } from 'vue';
       import { ability } from './services/AppAbility';
   
       createApp()
        .use(abilitiesPlugin, ability)
        .mount('#app');
       ```
   
     * `abilitiesPlugin` no more define global `$ability` and `$can` properties, instead a recommended way to get `AppAbility` instance is by injecting it through [provide/inject API](https://v3.vuejs.org/guide/component-provide-inject.html). To get previous behavior, pass `useGlobalProperties: true` option:
   
       **Before**
   
       ```js
       import { abilitiesPlugin } from '@casl/vue';
       import Vue from 'vue';
       import { ability } from './services/AppAbility';
   
       Vue.use(abilitiesPlugin);
       const root = new Vue({
         ability
       }).$mount('#app')
   
       console.log(root.$ability)
       ```
   
       **After**
   
       Recommended way:
   
       ```js
       import { abilitiesPlugin, ABILITY_TOKEN } from '@casl/vue';
       import { createApp } from 'vue';
       import { ability } from './services/AppAbility';
   
       const App = {
         name: 'App',
         inject: {
           $ability: { from: ABILITY_TOKEN }
         }
       };
   
       const root = createApp(App)
         .use(abilitiesPlugin, ability, {
           useGlobalProperties: true
         })
         .mount('#app');
   
       console.log(root.$ability)
       ```
   
       Backward compatible way:
   
       ```js
       import { abilitiesPlugin } from '@casl/vue';
       import { createApp } from 'vue';
       import { ability } from './services/AppAbility';
   
       const root = createApp()
         .use(abilitiesPlugin, ability, {
           useGlobalProperties: true
         })
         .mount('#app');
   
       console.log(root.$ability)
       ```
   
     * `AllCanProps<TAbility>` type was renamed to `CanProps<TAbility>`
   
     * `@casl/vue` no more augment vue types, so if you decide to use global properties, you will need to augment types by yourself
   
        **Before**
   
        @casl/vue augments type of `$ability` to `AnyAbility` and `$can` to `typeof $ability['can']`
   
        **After**
   
        create a separate file `src/ability-shim.d.ts` with the next content:
   
        ```ts
        import { AppAbility } from './AppAbility'
   
        declare module 'vue' {
          interface ComponentCustomProperties {
            $ability: AppAbility;
            $can(this: this, ...args: Parameters<this['$ability']['can']>): boolean;
          }
        }
        ```

   

   stalniy committed Jan 22, 2021
   Configuration menu

   • View commit details
   • Copy full SHA for 42ef438
   • Browse repository at this point

   Copy the full SHA

   42ef438 View commit details

   Browse the repository at this point in the history