From 1c9e001465ccf1d0ceceafdea89a39df30f136b8 Mon Sep 17 00:00:00 2001 From: Ibrahim Ezzy Date: Sun, 20 Dec 2020 10:27:44 +1100 Subject: [PATCH 1/4] Upgrade to Babel 7 --- .babelrc | 15 ++++++++++++--- package.json | 19 +++++++++++-------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/.babelrc b/.babelrc index c970805..1c7f254 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,13 @@ { - "presets": ["es2015"], - "plugins": ["transform-runtime"] -} \ No newline at end of file + "presets": [ + "@babel/preset-env" + ], + "plugins": [ + [ + "@babel/plugin-transform-runtime", + { + "corejs": 2 + } + ] + ] +} diff --git a/package.json b/package.json index 4b7d282..503f743 100644 --- a/package.json +++ b/package.json @@ -4,20 +4,23 @@ "version": "2.1.2", "author": "bsdfzzzy@gmail.com", "main": "index.min.js", + "engines": { + "node": ">=8" + }, "scripts": { "build": "./node_modules/.bin/webpack --config webpack.config.js", "prepub": "babel index.js --out-file index.min.js && uglifyjs index.min.js -o index.min.js" }, "dependencies": { - "hammerjs": "^2.0.8", - "babel-runtime": "^6.26.0" + "@babel/runtime-corejs2": "^7.0.0", + "hammerjs": "^2.0.8" }, "devDependencies": { - "babel-cli": "^6.26.0", - "babel-core": "^6.26.3", - "babel-loader": "^7.1.5", - "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-es2015": "^6.24.1", + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-transform-runtime": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "babel-loader": "^8.0.0", "css-loader": "^1.0.0", "uglifyjs-webpack-plugin": "^1.2.7", "vue": "^2.4.2", @@ -40,4 +43,4 @@ "url": "https://github.com/bsdfzzzy/vue2-hammer/issues" }, "homepage": "https://github.com/bsdfzzzy/vue2-hammer#readme" -} \ No newline at end of file +} From ddbb228e44224abfefcf3c648cfab6f45bb97c2c Mon Sep 17 00:00:00 2001 From: Ibrahim Ezzy Date: Sun, 20 Dec 2020 10:38:04 +1100 Subject: [PATCH 2/4] Upgrade to core-js 3 --- .babelrc | 3 ++- package.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.babelrc b/.babelrc index 1c7f254..c28260f 100644 --- a/.babelrc +++ b/.babelrc @@ -6,7 +6,8 @@ [ "@babel/plugin-transform-runtime", { - "corejs": 2 + "corejs": 3, + "proposals": true } ] ] diff --git a/package.json b/package.json index 503f743..631cda0 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "prepub": "babel index.js --out-file index.min.js && uglifyjs index.min.js -o index.min.js" }, "dependencies": { - "@babel/runtime-corejs2": "^7.0.0", + "@babel/runtime-corejs3": "^7.0.0", "hammerjs": "^2.0.8" }, "devDependencies": { From ed56b58500521348d529a28d2ed0a96d5ddabadc Mon Sep 17 00:00:00 2001 From: Ibrahim Ezzy Date: Sun, 20 Dec 2020 10:38:47 +1100 Subject: [PATCH 3/4] Replace deprecated uglifyjs-webpack-plugin with terser-webpack-plugin --- package.json | 4 ++-- webpack.config.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 631cda0..5a58006 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "scripts": { "build": "./node_modules/.bin/webpack --config webpack.config.js", - "prepub": "babel index.js --out-file index.min.js && uglifyjs index.min.js -o index.min.js" + "prepub": "babel index.js --out-file index.min.js" }, "dependencies": { "@babel/runtime-corejs3": "^7.0.0", @@ -22,7 +22,7 @@ "@babel/preset-env": "^7.0.0", "babel-loader": "^8.0.0", "css-loader": "^1.0.0", - "uglifyjs-webpack-plugin": "^1.2.7", + "terser-webpack-plugin": "^4.0.0", "vue": "^2.4.2", "vue-loader": "^15.3.0", "vue-style-loader": "^4.1.1", diff --git a/webpack.config.js b/webpack.config.js index 20dfcb3..3d9d3ef 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,5 @@ // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin -const UglifyJsPlugin = require('uglifyjs-webpack-plugin') +const TerserPlugin = require("terser-webpack-plugin"); const VueLoaderPlugin = require('vue-loader/lib/plugin') const path = require('path') @@ -36,8 +36,9 @@ module.exports = { new VueLoaderPlugin() ], optimization: { + minimize: true, minimizer: [ - new UglifyJsPlugin() + new TerserPlugin() ] } } \ No newline at end of file From 715bb1dec952976865607c195a7fd8c586a83af8 Mon Sep 17 00:00:00 2001 From: Ibrahim Ezzy Date: Sun, 20 Dec 2020 10:40:08 +1100 Subject: [PATCH 4/4] Build --- index.min.js | 241 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 240 insertions(+), 1 deletion(-) diff --git a/index.min.js b/index.min.js index 05ecf95..47ec2ef 100644 --- a/index.min.js +++ b/index.min.js @@ -1 +1,240 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.VueHammer=undefined;var _keys=require("babel-runtime/core-js/object/keys");var _keys2=_interopRequireDefault(_keys);var _hammerjs=require("hammerjs");var _hammerjs2=_interopRequireDefault(_hammerjs);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var gestures=["tap","pan","pinch","press","rotate","swipe"];var subGestures=["panstart","panend","panmove","pancancel","pinchstart","pinchmove","pinchend","pinchcancel","pinchin","pinchout","pressup","rotatestart","rotatemove","rotateend","rotatecancel"];var directions=["up","down","left","right","horizontal","vertical","all"];var VueHammer=exports.VueHammer={config:{},customEvents:{},install:function install(Vue){var _this=this;Vue.directive("hammer",{bind:function bind(el,binding){if(!el.hammer){el.hammer=new _hammerjs2.default.Manager(el)}var mc=el.hammer;var event=binding.arg;if(!event){console.warn("[vue-hammer] event type argument is required.")}el.__hammerConfig=el.__hammerConfig||{};el.__hammerConfig[event]={};var direction=binding.modifiers;el.__hammerConfig[event].direction=el.__hammerConfig[event].direction||[];if((0,_keys2.default)(direction).length){(0,_keys2.default)(direction).filter(function(keyName){return binding.modifiers[keyName]}).forEach(function(keyName){var elDirectionArray=el.__hammerConfig[event].direction;if(elDirectionArray.indexOf(keyName)===-1){elDirectionArray.push(String(keyName))}})}var recognizerType=void 0,recognizer=void 0;if(_this.customEvents[event]){var custom=_this.customEvents[event];recognizerType=custom.type;recognizer=new(_hammerjs2.default[_this.capitalize(recognizerType)])(custom);recognizer.recognizeWith(mc.recognizers);mc.add(recognizer)}else{recognizerType=gestures.find(function(gesture){return gesture===event});var subGesturesType=subGestures.find(function(gesture){return gesture===event});if(!recognizerType&&!subGesturesType){console.warn("[vue-hammer] invalid event type: "+event);return}if(subGesturesType&&el.__hammerConfig[subGesturesType].direction.length!==0){console.warn("[vue-hammer] "+subGesturesType+" should not have directions")}if(!recognizerType){return}if(recognizerType==="tap"||recognizerType==="pinch"||recognizerType==="press"||recognizerType==="rotate"){if(el.__hammerConfig[recognizerType].direction.length!==0){throw Error("[vue-hammer] "+recognizerType+" should not have directions")}}recognizer=mc.get(recognizerType);if(!recognizer){recognizer=new(_hammerjs2.default[_this.capitalize(recognizerType)]);recognizer.recognizeWith(mc.recognizers);mc.add(recognizer)}var globalOptions=_this.config[recognizerType];if(globalOptions){_this.guardDirections(globalOptions);recognizer.set(globalOptions)}var localOptions=el.hammerOptions&&el.hammerOptions[recognizerType];if(localOptions){_this.guardDirections(localOptions);recognizer.set(localOptions)}}},inserted:function inserted(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){mc.off(eventWithDir,mc.handler)}if(typeof binding.value!=="function"){mc.handler=null;console.warn("[vue-hammer] invalid handler function for v-hammer: "+binding.arg)}else{mc.on(eventWithDir,mc.handler=binding.value)}},componentUpdated:function componentUpdated(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){mc.off(eventWithDir,mc.handler)}if(typeof binding.value!=="function"){mc.handler=null;console.warn("[vue-hammer] invalid handler function for v-hammer: "+binding.arg)}else{mc.on(eventWithDir,mc.handler=binding.value)}},unbind:function unbind(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){el.hammer.off(eventWithDir,mc.handler)}if(!(0,_keys2.default)(mc.handlers).length){el.hammer.destroy();el.hammer=null}}})},guardDirections:function guardDirections(options){var dir=options.direction;if(typeof dir==="string"){var hammerDirection="DIRECTION_"+dir.toUpperCase();if(directions.indexOf(dir)>-1&&_hammerjs2.default.hasOwnProperty(hammerDirection)){options.direction=_hammerjs2.default[hammerDirection]}else{console.warn("[vue-hammer] invalid direction: "+dir)}}},buildEventWithDirections:function buildEventWithDirections(eventName,directionArray){var f={};directionArray.forEach(function(dir){dir=dir.toLowerCase();if(dir==="horizontal"){f.left=1;f.right=1}else if(dir==="vertical"){f.up=1;f.down=1}else if(dir==="all"){f.left=1;f.right=1;f.up=1;f.down=1}else{f[dir]=1}});var _directionArray=(0,_keys2.default)(f);if(_directionArray.length===0){return eventName}var eventWithDirArray=_directionArray.map(function(dir){return eventName+dir});return eventWithDirArray.join(" ")},capitalize:function capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1)}}; \ No newline at end of file +"use strict"; + +var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); + +var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property"); + +_Object$defineProperty(exports, "__esModule", { + value: true +}); + +exports.VueHammer = void 0; + +var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice")); + +var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map")); + +var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find")); + +var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of")); + +var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter")); + +var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each")); + +var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys")); + +var _hammerjs = _interopRequireDefault(require("hammerjs")); + +var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']; +var subGestures = ['panstart', 'panend', 'panmove', 'pancancel', 'pinchstart', 'pinchmove', 'pinchend', 'pinchcancel', 'pinchin', 'pinchout', 'pressup', 'rotatestart', 'rotatemove', 'rotateend', 'rotatecancel']; +var directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']; +var VueHammer = { + config: {}, + customEvents: {}, + install: function install(Vue) { + var _this = this; + + Vue.directive('hammer', { + bind: function bind(el, binding) { + if (!el.hammer) { + el.hammer = new _hammerjs["default"].Manager(el); + } + + var mc = el.hammer; // determine event type + + var event = binding.arg; + + if (!event) { + console.warn('[vue-hammer] event type argument is required.'); + } + + el.__hammerConfig = el.__hammerConfig || {}; + el.__hammerConfig[event] = {}; + var direction = binding.modifiers; + el.__hammerConfig[event].direction = el.__hammerConfig[event].direction || []; + + if ((0, _keys["default"])(direction).length) { + var _context, _context2; + + (0, _forEach["default"])(_context = (0, _filter["default"])(_context2 = (0, _keys["default"])(direction)).call(_context2, function (keyName) { + return binding.modifiers[keyName]; + })).call(_context, function (keyName) { + var elDirectionArray = el.__hammerConfig[event].direction; + + if ((0, _indexOf["default"])(elDirectionArray).call(elDirectionArray, keyName) === -1) { + elDirectionArray.push(String(keyName)); + } + }); + } + + var recognizerType, recognizer; + + if (_this.customEvents[event]) { + // custom event + var custom = _this.customEvents[event]; + recognizerType = custom.type; + recognizer = new _hammerjs["default"][_this.capitalize(recognizerType)](custom); + recognizer.recognizeWith(mc.recognizers); + mc.add(recognizer); + } else { + // built-in event + recognizerType = (0, _find["default"])(gestures).call(gestures, function (gesture) { + return gesture === event; + }); + var subGesturesType = (0, _find["default"])(subGestures).call(subGestures, function (gesture) { + return gesture === event; + }); + + if (!recognizerType && !subGesturesType) { + console.warn('[vue-hammer] invalid event type: ' + event); + return; + } + + if (subGesturesType && el.__hammerConfig[subGesturesType].direction.length !== 0) { + console.warn('[vue-hammer] ' + subGesturesType + ' should not have directions'); + } + + if (!recognizerType) { + return; + } + + if (recognizerType === 'tap' || recognizerType === 'pinch' || recognizerType === 'press' || recognizerType === 'rotate') { + if (el.__hammerConfig[recognizerType].direction.length !== 0) { + throw Error('[vue-hammer] ' + recognizerType + ' should not have directions'); + } + } + + recognizer = mc.get(recognizerType); + + if (!recognizer) { + // add recognizer + recognizer = new _hammerjs["default"][_this.capitalize(recognizerType)](); // make sure multiple recognizers work together... + + recognizer.recognizeWith(mc.recognizers); + mc.add(recognizer); + } // apply global options + + + var globalOptions = _this.config[recognizerType]; + + if (globalOptions) { + _this.guardDirections(globalOptions); + + recognizer.set(globalOptions); + } // apply local options + + + var localOptions = el.hammerOptions && el.hammerOptions[recognizerType]; + + if (localOptions) { + _this.guardDirections(localOptions); + + recognizer.set(localOptions); + } + } + }, + inserted: function inserted(el, binding) { + var mc = el.hammer; + var event = binding.arg; + var eventWithDir = (0, _find["default"])(subGestures).call(subGestures, function (subGes) { + return subGes === event; + }) ? event : _this.buildEventWithDirections(event, el.__hammerConfig[event].direction); + + if (mc.handler) { + mc.off(eventWithDir, mc.handler); + } + + if (typeof binding.value !== 'function') { + mc.handler = null; + console.warn('[vue-hammer] invalid handler function for v-hammer: ' + binding.arg); + } else { + mc.on(eventWithDir, mc.handler = binding.value); + } + }, + componentUpdated: function componentUpdated(el, binding) { + var mc = el.hammer; + var event = binding.arg; + var eventWithDir = (0, _find["default"])(subGestures).call(subGestures, function (subGes) { + return subGes === event; + }) ? event : _this.buildEventWithDirections(event, el.__hammerConfig[event].direction); // teardown old handler + + if (mc.handler) { + mc.off(eventWithDir, mc.handler); + } + + if (typeof binding.value !== 'function') { + mc.handler = null; + console.warn('[vue-hammer] invalid handler function for v-hammer: ' + binding.arg); + } else { + mc.on(eventWithDir, mc.handler = binding.value); + } + }, + unbind: function unbind(el, binding) { + var mc = el.hammer; + var event = binding.arg; + var eventWithDir = (0, _find["default"])(subGestures).call(subGestures, function (subGes) { + return subGes === event; + }) ? event : _this.buildEventWithDirections(event, el.__hammerConfig[event].direction); + + if (mc.handler) { + el.hammer.off(eventWithDir, mc.handler); + } + + if (!(0, _keys["default"])(mc.handlers).length) { + el.hammer.destroy(); + el.hammer = null; + } + } + }); + }, + guardDirections: function guardDirections(options) { + var dir = options.direction; + + if (typeof dir === 'string') { + var hammerDirection = 'DIRECTION_' + dir.toUpperCase(); + + if ((0, _indexOf["default"])(directions).call(directions, dir) > -1 && _hammerjs["default"].hasOwnProperty(hammerDirection)) { + options.direction = _hammerjs["default"][hammerDirection]; + } else { + console.warn('[vue-hammer] invalid direction: ' + dir); + } + } + }, + buildEventWithDirections: function buildEventWithDirections(eventName, directionArray) { + var f = {}; + (0, _forEach["default"])(directionArray).call(directionArray, function (dir) { + dir = dir.toLowerCase(); + + if (dir === 'horizontal') { + f.left = 1; + f.right = 1; + } else if (dir === 'vertical') { + f.up = 1; + f.down = 1; + } else if (dir === 'all') { + f.left = 1; + f.right = 1; + f.up = 1; + f.down = 1; + } else { + f[dir] = 1; + } + }); + + var _directionArray = (0, _keys["default"])(f); + + if (_directionArray.length === 0) { + return eventName; + } + + var eventWithDirArray = (0, _map["default"])(_directionArray).call(_directionArray, function (dir) { + return eventName + dir; + }); + return eventWithDirArray.join(' '); + }, + capitalize: function capitalize(str) { + return str.charAt(0).toUpperCase() + (0, _slice["default"])(str).call(str, 1); + } +}; +exports.VueHammer = VueHammer;