Use provide/inject instead of a data mixin

[harryhorton]

Currently, this module uses a Vue plugin to make mapbox available everywhere.

This might work fine in an isolated application, but it adds significant bloat in a full featured SPA. Due to the import happening in the main entrypoint (for setting up the plugin), there is no way to use code splitting to separate mapbox so that it is only loaded on a specific SPA page.

Check out: https://vuejs.org/v2/api/#provide-inject

With provide/inject, you can accept the mapbox reference as a prop on MglMap and provide an object including its reference to all of your child components. This would allow code splitting to be able to only load mapbox on the specific page where it's being used, while still allowing you to use this.mapbox throughout your components.

If a developer using this library wants to then get a reference to mapbox, they can create their own controller component, place it in as a child of MglMap and inject the reference same as the rest of the components. They can then use their custom component as a way to add custom functionality.

[khawarizmus]

Any heads up on this @soal as I believe this may also provide a way to add different plugins to the MglMap

[soal]

@gimyboya
Yeah, it's next on my list: #83;