Update build dependencies. Allow setting of preserveOrder on component. Provide function for exposing MB object to vue.

Author: libitx

config/dev.js

@@ -1,11 +1,11 @@
 const webpack = require('webpack')
-const merge   = require('deep-assign')
+const mergeOptions = require('merge-options')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 const opts    = require('./options')
 const base    = require('./webpack.config.js')
 
-const config = merge(base, {
+const config = mergeOptions(base, {
   entry: opts.paths.resolve('src/demo/index.js'),
 
   output: {
@@ -20,8 +20,4 @@ config.plugins = config.plugins.concat([
   })
 ])
 
-if (process.env.NODE_ENV === 'development') {
-  config.devtool = '#eval-source-map';
-}
-
 module.exports = config

config/dist.js

@@ -1,12 +1,12 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const webpack = require('webpack')
-const merge   = require('deep-assign')
+const mergeOptions = require('dmerge-options')
 
 const opts = require('./options')
 const base = require('./webpack.config.js')
 
-const config = merge(base, {
+const config = mergeOptions(base, {
   entry: opts.paths.src,
 
   output: {

config/karma.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   test: /\.css$/,
   use: [
-    'vue-style-loader',
+    'style-loader',
     'css-loader'
   ]
 }

config/loaders/css.js

@@ -1,12 +1,12 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'testing'
 
 const webpack = require('webpack')
-const merge   = require('deep-assign')
+const mergeOptions   = require('merge-options')
 
 const opts = require('./options')
 const base = require('./webpack.config.js')
 
-const config = merge(base, {
+const config = mergeOptions(base, {
   entry: opts.paths.src,
 
   output: {

config/test.js

@@ -1,6 +1,6 @@
 const webpack         = require('webpack')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const UglifyJsPlugin  = require('uglifyjs-webpack-plugin')
+const TerserPlugin    = require('terser-webpack-plugin')
 
 const opts  = require('./options')
 const babel = require('./loaders/babel')
@@ -26,6 +26,11 @@ const config = {
     extensions: ['.js', '.vue']
   },
 
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(opts.env)

config/webpack.config.js

@@ -10,34 +10,30 @@
     "build:demo": "NODE_ENV=production webpack --config ./config/dev.js --mode production",
     "build:dist": "NODE_ENV=production webpack --config ./config/dist.js --mode production",
     "clean": "rimraf ./dist/* ./demo/*",
-    "dev": "NODE_ENV=development webpack-dev-server --config ./config/dev.js --inline --hot --mode development",
+    "dev": "NODE_ENV=development webpack serve --config ./config/dev.js --inline --hot --mode development",
     "release:demo": "git subtree push --prefix demo origin gh-pages",
     "test": "karma start config/karma.config.js"
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
+    "@babel/core": "^7.12",
+    "@babel/preset-env": "^7.12",
     "avoriaz": "^6.3.0",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.2.0",
-    "deep-assign": "^3.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "jasmine": "^3.5.0",
-    "karma": "^4.4.1",
-    "karma-jasmine": "^2.0.1",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-webpack": "^4.0.2",
-    "raw-loader": "^3.1.0",
-    "rimraf": "^3.0.0",
-    "tachyons": "^4.11.1",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue": "^2.6.10",
-    "vue-loader": "^15.7.1",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.9.0"
+    "babel-loader": "^8.2",
+    "css-loader": "^5.0",
+    "html-webpack-plugin": "^4.5",
+    "merge-options": "^3.0",
+    "raw-loader": "^4.0",
+    "rimraf": "^3.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "uglifyjs-webpack-plugin": "^2.2",
+    "vue": "^2.6",
+    "vue-loader": "^15.9",
+    "vue-template-compiler": "^2.6",
+    "webpack": "^5.18",
+    "webpack-cli": "^4.4",
+    "webpack-dev-server": "^3.11.2"
   },
   "peerDependencies": {
     "vue": "2.x"

package.json

@@ -14,7 +14,6 @@ export default {
   props: {
     to:               [String, Number],
     amount:           [String, Number],
-    editable:         { type: Boolean, default: undefined },
     currency:         { type: String, default: 'USD' },
     label:            { type: String, required: true },
     successMessage:   String,
@@ -25,8 +24,10 @@ export default {
     buttonId:         true,
     buttonData:       true,
     type:             { type: String, default: 'buy' },
+    editable:         { type: Boolean, default: undefined },
+    disabled:         { type: Boolean, default: undefined },
     devMode:          { type: Boolean, default: undefined },
-    disabled:         { type: Boolean, default: undefined }
+    preserveOrder:    { type: Boolean, default: undefined }
   },
 
   data() {
@@ -44,7 +45,6 @@ export default {
       return {
         to:                 this.to,
         amount:             this.amount,
-        editable:           this.editable,
         currency:           this.outputs.length || (this.cryptoOperations && this.cryptoOperations.length) ? undefined : this.currency,
         label:              this.label,
         successMessage:     this.successMessage,
@@ -55,15 +55,17 @@ export default {
         buttonId:           this.buttonId,
         buttonData:         this.buttonData,
         type:               this.type,
-        devMode:            this.devMode,
-        disabled:           this.disabled,
         onLoad:             (...args) => {
           setTimeout(_ => this.loading = false, 1000)
           this.$emit('load', ...args)
         },
         onPayment:          (...args) => { this.$emit('payment', ...args) },
         onError:            (...args) => { this.$emit('error', ...args) },
-        onCryptoOperations: (...args) => { this.$emit('cryptoOperations', ...args) }
+        onCryptoOperations: (...args) => { this.$emit('cryptoOperations', ...args) },
+        editable:           this.editable,
+        disabled:           this.disabled,
+        devMode:            this.devMode,
+        preserveOrder:      this.preserveOrder
       }
     }
   },

src/components/MoneyButton.vue

@@ -68,13 +68,12 @@
       <h3 class="mt4 mb2 f4 lh-title">License</h3>
 
       <p class="mv0 f5 lh-copy">vue-money-button is open source and released under the <a href="https://github.com/libitx/vue-money-button/blob/master/license.md" class="link blue hover-red">MIT License</a>.</p>
-      <p class="mv0 f5 lh-copy">Copyright &copy; 2018 libitx</p>
+      <p class="mv0 f5 lh-copy">Copyright &copy; 2018-2021 libitx</p>
     </div>
   </div>
 </template>
 
 <script>
-import MoneyButton from 'components/MoneyButton.vue'
 import usage from 'demo/usage.txt'
 
 export default {
@@ -103,10 +102,6 @@ export default {
     onError(error) {
       console.log('onError event:', error)
     }
-  },
-
-  components: {
-    MoneyButton
   }
 }
 </script>

src/demo/App.vue

@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Vue.js Money Button Component Demo</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.11.1/tachyons.min.css"
+      integrity="sha512-d0v474klOFSF7qD9WDvyRxAvXaWSxCHDZdnBSZQjo8BpVr6vpjwAgqetpqkKP38DzlOzdVPaLVnzzW1Ba8wB9w=="
+      crossorigin="anonymous">
   </head>
   <body class="min-h-100 pv0 ph3 sans-serif bg-near-white near-black">
     <div id="app"></div>

src/demo/index.html

@@ -1,7 +1,8 @@
 import Vue from 'vue'
+import VueMoneyButton from 'index.js'
 import App from './App.vue'
 
-import 'tachyons'
+Vue.use(VueMoneyButton)
 
 const app = new Vue({
   el: '#app',

src/demo/index.js

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import MoneyButton from 'vue-money-button'
+import { MoneyButton } from 'vue-money-button'
 
 export default {
   components: {

src/demo/usage.txt

@@ -1,3 +1,11 @@
 import MoneyButton from './components/MoneyButton.vue'
+import scriptLoader from './script-loader'
 
-export default MoneyButton
+export default {
+  install(Vue) {
+    Vue.component('MoneyButton', MoneyButton)
+    Vue.prototype.$getMoneyButton = scriptLoader.load
+  }
+}
+
+export { MoneyButton }

src/index.js

@@ -1,24 +1,22 @@
 import config from 'config'
 
 export default {
-  promise: null,
-  src: config.moneyButtonScript,
+  moneyButton: null,
 
   load() {
-    if ( !this.promise ) {
-      this.promise = new Promise((resolve, reject) => {
-        const el = document.createElement('script');
-        el.type = 'text/javascript';
-        el.async = true;
-        el.src = this.src;
+    if ( !this.moneyButton ) {
+      this.moneyButton = new Promise((resolve, reject) => {
+        const el = document.createElement('script')
+        el.type = 'text/javascript'
+        el.async = true
+        el.src = config.moneyButtonScript
 
-        el.addEventListener('load', _ => resolve(window.moneyButton));
-        el.addEventListener('error', reject);
-        el.addEventListener('abort', reject);
-        document.head.appendChild(el);
+        el.addEventListener('load', _ => resolve(window.moneyButton))
+        el.addEventListener('error', reject)
+        el.addEventListener('abort', reject)
+        document.head.appendChild(el)
       })
     }
-
-    return this.promise;
+    return this.moneyButton
   }
 }