@rebilly/framepay-vue 1.4.0 → 2.1.0

package/dist/build.js

@@ -1,3 +1,5 @@
+import { h, markRaw } from 'vue';
+
 function MountError() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$message = _ref.message,
@@ -157,30 +159,14 @@ function createToken (form, extraData) {
   });
 }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -188,24 +174,32 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function updateConfig (configuration) {
   return initializeRebilly(configuration).then(function (Rebilly) {
     Rebilly.update(_objectSpread2({}, configuration));
@@ -213,7 +207,7 @@ function updateConfig (configuration) {
 }
 
 //
-var script = {
+var script$1 = {
   name: 'rebilly-form',
   props: {
     extraData: {},
@@ -332,10 +326,10 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
 }
 
 /* script */
-const __vue_script__ = script;
+const __vue_script__$1 = script$1;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__$1 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -346,17 +340,17 @@ var __vue_render__ = function() {
     2
   )
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__$1 = undefined;
   /* scoped */
-  const __vue_scope_id__ = undefined;
+  const __vue_scope_id__$1 = undefined;
   /* module identifier */
-  const __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__$1 = undefined;
   /* functional template */
-  const __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__$1 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -365,13 +359,13 @@ __vue_render__._withStripped = true;
   
 
   
-  const __vue_component__ = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
     false,
     undefined,
     undefined,
@@ -385,33 +379,33 @@ __vue_render__._withStripped = true;
 //
 //
 //
-var script$1 = {
+var script = {
   name: 'rebilly-token'
 };
 
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__$1 = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("input", {
-    attrs: { id: "rebilly-token", "data-rebilly": "token", type: "hidden" }
+    attrs: { id: "rebilly-token", "data-rebilly": "token", type: "hidden" },
   })
 };
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$1 = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__$1 = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  const __vue_module_identifier__$1 = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  const __vue_is_functional_template__$1 = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -420,13 +414,13 @@ __vue_render__$1._withStripped = true;
   
 
   
-  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-    __vue_inject_styles__$1,
-    __vue_script__$1,
-    __vue_scope_id__$1,
-    __vue_is_functional_template__$1,
-    __vue_module_identifier__$1,
+  const __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
     false,
     undefined,
     undefined,
@@ -434,8 +428,9 @@ __vue_render__$1._withStripped = true;
   );
 
 var BaseElementMixin = {
-  render: function render(createElement) {
-    return createElement('div', {
+  render: function render() {
+    return h('div', {
+      id: this.mountId,
       domProps: {
         id: this.mountId
       }
@@ -460,11 +455,11 @@ var BaseElementMixin = {
       initializeRebilly(this.configuration).then(function (Rebilly) {
         try {
           if (_this.elementType.startsWith('card')) {
-            _this.element = Rebilly.card.mount(selector, _this.elementType);
+            _this.element = markRaw(Rebilly.card.mount(selector, _this.elementType));
           } else if (_this.elementType === 'iban') {
-            _this.element = Rebilly.iban.mount(selector);
+            _this.element = markRaw(Rebilly.iban.mount(selector));
           } else if ([FIELD_TYPES.REBILLY_BBAN_ACCOUNT_TYPE, FIELD_TYPES.REBILLY_BBAN_ACCOUNT_NUMBER, FIELD_TYPES.REBILLY_BBAN_ROUTING_NUMBER].includes(_this.elementType)) {
-            _this.element = Rebilly.bban.mount(selector, _this.elementType);
+            _this.element = markRaw(Rebilly.bban.mount(selector, _this.elementType));
           }
 
           _this.element.on('ready', function () {
@@ -486,21 +481,31 @@ var BaseElementMixin = {
           throw new MountError();
         }
       });
+    },
+    destroyElement: function destroyElement() {
+      if (this.element) {
+        this.element.destroy();
+      }
     }
   },
   created: function created() {
     this.mountElement("#".concat(this.mountId));
   },
+  // in vue 2 beforeDestroy is emitted but not in vue 3
   beforeDestroy: function beforeDestroy() {
-    if (this.element) {
-      this.element.destroy();
-    }
+    this.destroyElement();
+  },
+  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
+  // we should keep both of them for compatibility purpose
+  beforeUnmount: function beforeUnmount() {
+    this.destroyElement();
   }
 };
 
 var GooglePayMixin = {
-  render: function render(createElement) {
-    return createElement('div', {
+  render: function render() {
+    return h('div', {
+      id: this.mountId,
       domProps: {
         id: this.mountId
       }
@@ -524,7 +529,7 @@ var GooglePayMixin = {
 
       initializeRebilly(this.configuration).then(function (Rebilly) {
         try {
-          _this.element = Rebilly.googlePay.mount(selector);
+          _this.element = markRaw(Rebilly.googlePay.mount(selector));
 
           _this.element.on('ready', function () {
             return _this.$emit('ready');
@@ -560,6 +565,11 @@ var GooglePayMixin = {
           });
         }
       });
+    },
+    destroyElement: function destroyElement() {
+      if (this.element) {
+        this.element.destroy();
+      }
     }
   },
   watch: {
@@ -572,16 +582,21 @@ var GooglePayMixin = {
   created: function created() {
     this.mountElement("#".concat(this.mountId));
   },
+  // in vue 2 beforeDestroy is emitted but not in vue 3
   beforeDestroy: function beforeDestroy() {
-    if (this.element) {
-      this.element.destroy();
-    }
+    this.destroyElement();
+  },
+  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
+  // we should keep both of them for compatibility purpose
+  beforeUnmount: function beforeUnmount() {
+    this.destroyElement();
   }
 };
 
 var NonIframeElementMixin = {
-  render: function render(createElement) {
-    return createElement('div', {
+  render: function render() {
+    return h('div', {
+      id: this.mountId,
       domProps: {
         id: this.mountId
       }
@@ -613,7 +628,7 @@ var NonIframeElementMixin = {
             namespace = Rebilly.paypal;
           }
 
-          _this.element = namespace.mount(selector);
+          _this.element = markRaw(namespace.mount(selector));
           Rebilly.on('token-ready', function (token) {
             // https://github.com/vuejs/vue/issues/4332#issuecomment-263444492
             // Emit token on the element level:
@@ -628,6 +643,11 @@ var NonIframeElementMixin = {
           });
         }
       });
+    },
+    destroyElement: function destroyElement() {
+      if (this.element) {
+        this.element.destroy();
+      }
     }
   },
   watch: {
@@ -640,10 +660,14 @@ var NonIframeElementMixin = {
   created: function created() {
     this.mountElement("#".concat(this.mountId));
   },
+  // in vue 2 beforeDestroy is emitted but not in vue 3
   beforeDestroy: function beforeDestroy() {
-    if (this.element) {
-      this.element.destroy();
-    }
+    this.destroyElement();
+  },
+  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
+  // we should keep both of them for compatibility purpose
+  beforeUnmount: function beforeUnmount() {
+    this.destroyElement();
   }
 };
 
@@ -755,5 +779,4 @@ var FramePay = {
   }
 };
 
-export default FramePay;
-export { RebillyApplePay, RebillyBbanAccountNumber, RebillyBbanAccountType, RebillyBbanRoutingNumber, RebillyCard, RebillyCardCvv, RebillyCardExpiration, RebillyCardNumber, FIELD_TYPES as RebillyFieldTypes, __vue_component__ as RebillyForm, RebillyGooglePay, RebillyIban, RebillyPaypal, __vue_component__$1 as RebillyToken, createToken, updateConfig };
+export { RebillyApplePay, RebillyBbanAccountNumber, RebillyBbanAccountType, RebillyBbanRoutingNumber, RebillyCard, RebillyCardCvv, RebillyCardExpiration, RebillyCardNumber, FIELD_TYPES as RebillyFieldTypes, __vue_component__$1 as RebillyForm, RebillyGooglePay, RebillyIban, RebillyPaypal, __vue_component__ as RebillyToken, createToken, FramePay as default, updateConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/framepay-vue",
-  "version": "1.4.0",
+  "version": "2.1.0",
   "description": "Official Vue wrapper for Rebilly FramePay",
   "author": "Rebilly",
   "repository": "https://github.com/Rebilly/framepay-vue",
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@testing-library/cypress": "^7.0.2",
-    "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-eslint": "^4.5.9",
-    "@vue/cli-plugin-unit-jest": "^4.5.9",
-    "@vue/cli-service": "^4.5.9",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-plugin-unit-jest": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-airbnb": "^5.1.0",
     "@vue/test-utils": "^1.1.1",
     "babel-core": "7.0.0-bridge.0",
@@ -56,8 +56,8 @@
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.4.0",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.7.10",
+    "vue-template-compiler": "^2.7.10"
   },
   "eslintConfig": {
     "root": true,