Provide a way to change ability for the whole nested tree of components

[stalniy]

use inject/provide to do this

Challenges

• can should re-render automatically when provided ability is updated:
  solutions:
  • add watcher for each ability. Will require to create a wrapper class for Vue or additional method to create abilities. Not how I'd like to see this
  • create a watcher and subscribe in $can method. Requires to add destroyed hook and potentially may require functional Can component into regular one. As functional component doesn't have state.
• components which want to use ability now needs to inject it (i.e., add inject: ['ability']). That's additional complexity which I'd like not to add.
  solutions:
  • default ability should be provided and injected for all components via mixin in plugin
• vm.$ability needs to be converted into computed property (in order to have single source of truth for provided ability). This property will take value from injections

[stalniy]

It's possible to use default inject only from Vue 2.5.0+. That's why I decided to go simpler way. Now, you can pass ability as an option to component, all children will use parent's ability instance (similar to how provide/inject works)

[stalniy]

🎉 This issue has been resolved in version 0.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[jackiecookie]

Awesome! It's the feature I'm looking for.
I really understand why you decide to keep one ability instance on global. separate ability is hard to maintain and update.in order to avoid re-render when ability does not change in a component, maybe, we can provide another way to update ability?

[stalniy]

I did some investigation around Vue rendering and frankly speaking I don’t think that this case is a big issue. Here is why:

When you pass slots inside a component, this component (doesn’t matter whether it’s functional or regular one) will be re-rendered together with parent component even if changes in parent doesn’t affect that child.

To achieve what you want, it’s enough to convert Can into stateful component and cache ability.can inside internal state. So, when `ability is updated we will update only internal state. Vue will check if that state changes, the component will be rerendered only if changed.

The downsides of this are:

• heavier Can component (non-functional)
• additional <div> inside markup + nesting (not a big issue because it’s possible to use is binding)
• component needs to properly bypass bindings and listeners to root <div> element

This actually how I implemented this in React :) so if you think it make sense then let’s do this!

[stalniy]

🎉 This issue has been resolved in version 0.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[stalniy]

🎉 This issue has been resolved in version 2.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[stalniy]

🎉 This issue has been resolved in version 0.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[stalniy]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[stalniy]

🎉 This issue has been resolved in version 0.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀