Skip to content

Commit

Permalink
refactor(vue): adds support for vue 3
Browse files Browse the repository at this point in the history
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;
       }
     }
     ```
  • Loading branch information
stalniy committed Jan 22, 2021
1 parent ba59c38 commit 42ef438
Show file tree
Hide file tree
Showing 19 changed files with 2,180 additions and 2,039 deletions.
8 changes: 8 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,14 @@
}],
"import/no-extraneous-dependencies": "off"
}
},
{
"files": [
"packages/casl-vue/spec/**/*.{js,ts}"
],
"env": {
"browser": true
}
}
]
}
2 changes: 1 addition & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const CONFIG = {
default: {
plugins: [
['@babel/plugin-transform-typescript', {
allowDeclareFields: true
allowDeclareFields: false
}],
['@babel/plugin-proposal-class-properties', {
loose: true
Expand Down
4 changes: 2 additions & 2 deletions packages/casl-mongoose/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"license": "MIT",
"peerDependencies": {
"@casl/ability": "^3.0.0 || ^4.0.0 || ^5.1.0",
"mongoose": "^4.0.0 || ^5.0.0"
"mongoose": "^4.0.0 || <= 5.10.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",
Expand All @@ -62,7 +62,7 @@
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-plugin-import": "^2.20.2",
"jest": "^26.0.0",
"mongoose": "^5.0.14",
"mongoose": "~5.10.0",
"rollup": "^2.10.9",
"rollup-plugin-sourcemaps": "^0.6.2",
"rollup-plugin-terser": "^7.0.0",
Expand Down
Loading

0 comments on commit 42ef438

Please sign in to comment.