Version conflict fixed between 2.x and 3.x (#108)

Author: SinanMtl

README.md

@@ -735,6 +735,21 @@ it('uses vue-wait component', () => {
 });
 ```
 
+## For Development on vue-wait
+Install packages
+```bash
+$ yarn install
+# or if you using npm
+$ npm install
+```
+
+Bundle it
+```bash
+$ yarn bundle
+# or if you using npm
+$ npm run bundle
+```
+
 ## 🎯 Contributors
 
  - Fatih Kadir Akın, (creator)

dist/vue-wait-next.js

@@ -0,0 +1,17 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("vue"));
+	else if(typeof define === 'function' && define.amd)
+		define(["vue"], factory);
+	else if(typeof exports === 'object')
+		exports["VueWait"] = factory(require("vue"));
+	else
+		root["VueWait"] = factory(root["vue"]);
+})(typeof self !== 'undefined' ? self : this, function(vue) {
+  if (vue.createApp) {
+    const v3 = require('./dist/vue-wait-next');
+    return v3
+  }
+  const v2 = require('./dist/vue-wait-v2');
+  return v2
+})

dist/vue-wait-v2.js

@@ -20,7 +20,7 @@
   "bugs": {
     "url": "https://github.com/f/vue-wait/issues"
   },
-  "main": "dist/vue-wait.js",
+  "main": "index.js",
   "types": "src/types/index.d.ts",
   "files": [
     "dist",
@@ -31,6 +31,7 @@
     "test": "exit 0;",
     "precommit": "lint-staged",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "bundle": "npm run build; npm run build -- --env=v3",
     "dev-transition": "poi examples/transition-example/index.js",
     "dev-vuex": "poi examples/vuex-example/index.js",
     "dev-vue": "poi examples/vue-example/index.js",
@@ -48,10 +49,11 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.49",
-    "@babel/plugin-transform-runtime": "^7.0.0-beta.49",
-    "@babel/preset-env": "^7.0.0-beta.49",
-    "babel-loader": "^8.0.0-beta.3",
+    "@babel/core": "^7.14.8",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.8",
+    "@vue/compiler-sfc": "^3.1.5",
+    "babel-loader": "^8.2.2",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.11",
     "epic-spinners": "^1.0.3",
@@ -63,12 +65,13 @@
     "prettier": "^1.1.0",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^15.2.4",
-    "vue-style-loader": "^4.1.0",
-    "vue-template-compiler": "^2.5.16",
-    "vuex": "^3.0.1",
-    "webpack": "^4.11.1",
-    "webpack-cli": "^3.0.2"
+    "vue-loader": "^16.3.3",
+    "vue-loader-old": "npm:vue-loader@^15.9.6",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "vuex": "^3.6.2",
+    "webpack": "^5.47.0",
+    "webpack-cli": "^4.7.2"
   },
   "peerDependencies": {
     "vue": "^2.5.16"

dist/vue-wait.js

@@ -37,8 +37,8 @@ export default class VueWait {
     this.initialized = false;
   }
 
-  init(Vue, store) {
-    if (nodeIsDebug() && !install.installed && VueWait.getVueVersion(Vue) < 3) {
+  init(App, store) {
+    if (nodeIsDebug() && !install.installed && VueWait.getVueVersion(App) < 3) {
       console.warn(
         `[vue-wait] not installed. Make sure to call \`Vue.use(VueWait)\` before init root instance.`
       );
@@ -49,11 +49,11 @@ export default class VueWait {
     }
 
     if (this.options.registerComponent) {
-      Vue.component(this.options.componentName, vWaitComponent);
+      App.component(this.options.componentName, vWaitComponent);
     }
 
     if (this.options.registerDirective) {
-      Vue.directive(this.options.directiveName, vWaitDirective);
+      App.directive(this.options.directiveName, vWaitDirective);
     }
 
     if (this.options.useVuex) {
@@ -76,13 +76,13 @@ export default class VueWait {
         }
       };
 
-      if (VueWait.getVueVersion(Vue) > 2) {
+      if (VueWait.getVueVersion(App) > 2) {
         const { createApp } = require('vue');
         this.stateHandler = createApp(config).mount(
           document.createElement('div')
         );
       } else {
-        this.stateHandler = new Vue(config);
+        this.stateHandler = new App(config);
       }
     } else {
       const config = {
@@ -117,13 +117,13 @@ export default class VueWait {
         }
       };
 
-      if (VueWait.getVueVersion(Vue) > 2) {
+      if (VueWait.getVueVersion(App) > 2) {
         const { createApp } = require('vue');
         this.stateHandler = createApp(config).mount(
           document.createElement('div')
         );
       } else {
-        this.stateHandler = new Vue(config);
+        this.stateHandler = new App(config);
       }
     }
 
@@ -192,8 +192,8 @@ export default class VueWait {
   }
 }
 
-export function install(Vue) {
-  if (install.installed && Vue) {
+export function install(App) {
+  if (install.installed && App) {
     if (nodeIsDebug()) {
       console.warn(
         '[vue-wait] already installed. Vue.use(VueWait) should be called only once.'
@@ -202,7 +202,7 @@ export function install(Vue) {
     return;
   }
 
-  Vue.mixin({
+  App.mixin({
     /**
      * VueWait init hook, injected into each instances init hooks list.
      */
@@ -213,10 +213,10 @@ export function install(Vue) {
       if (wait) {
         instance = typeof wait === 'function' ? new wait() : wait;
         // Inject store
-        instance.init(Vue, store);
+        instance.init(App, store);
       } else if (parent && parent.__$waitInstance) {
         instance = parent.__$waitInstance;
-        instance.init(Vue, parent.$store);
+        instance.init(App, parent.$store);
       }
 
       if (instance) {

index.js

@@ -1,28 +1,33 @@
-const { VueLoaderPlugin } = require("vue-loader");
+module.exports = env => {
+  const isV3 = !!env.v3
+  const loaderName = `vue-loader${isV3 ? '': '-old'}`;
+  const { VueLoaderPlugin } = require(loaderName);
 
-module.exports = {
-  mode: process.env.NODE_ENV,
-  entry: ["./src/vue-wait.js"],
-  output: {
-    library: "VueWait",
-    libraryTarget: "umd",
-    filename: "vue-wait.js",
-    globalObject: 'typeof self !== \'undefined\' ? self : this',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: "vue-loader"
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: "babel-loader"
+  return {
+    mode: process.env.NODE_ENV,
+    entry: ["./src/vue-wait.js"],
+    output: {
+      library: "VueWait",
+      libraryTarget: "umd",
+      globalObject: 'typeof self !== \'undefined\' ? self : this',
+      filename: `vue-wait${isV3 ? '-next': '-v2'}.js`
+    },
+    externals: { vue: 'vue' },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          loader: loaderName
+        },
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader"
+          }
         }
-      }
-    ]
-  },
-  plugins: [new VueLoaderPlugin()]
+      ]
+    },
+    plugins: [new VueLoaderPlugin()]
+  }
 };