WIP: new global api install + composition provide + update deps

[alvarosabu]

Hello,

This PR is meant for migrating the library to be used in Vue 3.x (is in Work in Progress), the PR set to base master but it should be aiming to a /next branch on the base @shakee93 so both 2.x and 3.x solutions coexist in the same repo. If this branch is created I will change the destination of the PR

Should close #179

Basic changes:

vue-toasted/index.js :

import { Toasted as T } from './js/toast';
import ToastComponent from './toast.vue';
import { VueToastedSymbol } from './useApi';
export * from './useApi';

const VueToastedPlugin = {
  install(app, options) {
    if (!options) {
      options = {};
    }
    const Toast = new T(options);
    app.component('toasted', ToastComponent);
    app.config.globalProperties.$toasted = Toast;
    app.provide(VueToastedSymbol, Toast);
  },
};

export default VueToastedPlugin;

Now instead of Vue, the app instance is passed so it will work with the new createApp, and the global property will be available on this by using app.config.globalProperties.$toasted reference

const app = createApp(App);

app.use(VueToasted, { ...options });

In Vue 3.x plugins will leverage provide and inject internally and expose a composition function.

To do that I add a useApi.js for the use of the library along with the Composition API reference:

// useApi.js

export const VueToastedSymbol = Symbol();

export function useToasted() {
  const VueToasted = inject(VueToastedSymbol);
  if (!VueToasted) throw new Error('No VueToasted provided!!!');

  return VueToasted;
}

So now, in any setup method or composition function we can do:

import { useToasted }  from 'vue-toasted`;

const Component = {
  setup() {
    const toasted = useToasted();

    toasted.success('Composition API BABYYY!', {
      position: 'bottom-right',
      duration: 5000,
    });
  },
};

To support the last release candidate vue 3.0.0-rc.9 I needed to update several packages from the package.json, this is causing errors in the webpack build process, especially with the uglify plugin:

cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules

/Users/alvarosaburido/as/github/as-vue-toasted/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/alvarosaburido/as/github/as-vue-toasted/node_modules/webpack/lib/webpack.js:189:10)

If someone from the core team is available to help me out with this I think is ready to be used (already tested as a submodule in a personal project).

Feel free to contact me directly if needed.

Happy Coding

[shakee93]

next branch is ready. can you please create the pull ?

[alvarosabu]

@shakee93 done, changed destination branch to next

[alvarosabu]

@shakee93 be aware that the build is broken:

cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules

/Users/alvarosaburido/as/github/as-vue-toasted/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/alvarosaburido/as/github/as-vue-toasted/node_modules/webpack/lib/webpack.js:189:10)

is it going to be solve in another branch?