chore(release): @casl/vue@2.0.0 [skip ci]

packages/casl-vue/CHANGELOG.md

@@ -2,6 +2,131 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.0.0](https://github.com/stalniy/casl/compare/@casl/vue@1.2.1...@casl/vue@2.0.0) (2021-01-22)
+
+
+### Code Refactoring
+
+* **vue:** adds support for vue 3 ([#444](https://github.com/stalniy/casl/issues/444)) ([e742bcf](https://github.com/stalniy/casl/commit/e742bcf0d187f8283ff171ec9760431759b55910)), closes [#396](https://github.com/stalniy/casl/issues/396)
+
+
+### Features
+
+* **angular:** updates angular to v11 ([#421](https://github.com/stalniy/casl/issues/421)) ([ec16bf9](https://github.com/stalniy/casl/commit/ec16bf9e93536c4ec249d2520cf336c1497615a9))
+
+
+### BREAKING CHANGES
+
+* **vue:** 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;
+       }
+     }
+     ```
+
 ## [1.2.1](https://github.com/stalniy/casl/compare/@casl/vue@1.2.0...@casl/vue@1.2.1) (2020-12-28)
 
 

packages/casl-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casl/vue",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "Vue plugin for CASL which makes it easy to add permissions in any Vue application",
   "main": "dist/umd/index.js",
   "module": "dist/es5m/index.js",