From 562ae96a5662fdba36a1134b69d3e78a6a3cbca4 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 11:55:52 -0400 Subject: [PATCH 01/13] added onPanMove --- src/Hammer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Hammer.js b/src/Hammer.js index e85c781..a4d1683 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -24,6 +24,7 @@ var handlerToEvent = { onPan: 'pan', onPanCancel: 'pancancel', onPanEnd: 'panend', + onPanMove: 'panmove', onPanStart: 'panstart', onPinch: 'pinch', onPinchCancel: 'pinchcancel', From da214c5b193a3fabfe20199e666a460230e9e7e0 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 12:06:59 -0400 Subject: [PATCH 02/13] build onPanMove --- dist/react-hammerjs.js | 20 ++++++++++++++++++-- dist/react-hammerjs.min.js | 2 +- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/dist/react-hammerjs.js b/dist/react-hammerjs.js index 3517477..774f912 100644 --- a/dist/react-hammerjs.js +++ b/dist/react-hammerjs.js @@ -26,6 +26,7 @@ var handlerToEvent = { onPan: 'pan', onPanCancel: 'pancancel', onPanEnd: 'panend', + onPanMove: 'panmove', onPanStart: 'panstart', onPinch: 'pinch', onPinchCancel: 'pinchcancel', @@ -41,6 +42,10 @@ var handlerToEvent = { onRotateMove: 'rotatemove', onRotateStart: 'rotatestart', onSwipe: 'swipe', + onSwipeRight: 'swiperight', + onSwipeLeft: 'swipeleft', + onSwipeUp: 'swipeup', + onSwipeDown: 'swipedown', onTap: 'tap', }; @@ -55,7 +60,7 @@ function updateHammer (hammer, props) { var directionProp = props.direction; if (directionProp || props.hasOwnProperty('vertical')) { - direction = directionProp ? directionProp : (props.vertical ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL'); + var direction = directionProp ? directionProp : (props.vertical ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL'); hammer.get('pan').set({ direction: Hammer[direction] }); hammer.get('swipe').set({ direction: Hammer[direction] }); } @@ -66,6 +71,9 @@ function updateHammer (hammer, props) { Object.keys(props.options.recognizers).forEach(function (gesture) { var recognizer = hammer.get(gesture); recognizer.set(props.options.recognizers[gesture]); + if (props.options.recognizers[gesture].requireFailure) { + recognizer.requireFailure(props.options.recognizers[gesture].requireFailure); + } }, this); } else { var key = option; @@ -101,7 +109,7 @@ var HammerComponent = React.createClass({ }, componentDidMount: function () { - this.hammer = new Hammer(ReactDOM.findDOMNode(this)); + this.hammer = new Hammer(this.domElement); updateHammer(this.hammer, this.props); }, @@ -128,6 +136,14 @@ var HammerComponent = React.createClass({ } }, this); + var self = this; + props.ref = function(domElement) { + if (self.props.ref) { + self.props.ref(domElement); + } + self.domElement = domElement; + }; + // Reuse the child provided // This makes it flexible to use whatever element is wanted (div, ul, etc) return React.cloneElement(React.Children.only(this.props.children), props); diff --git a/dist/react-hammerjs.min.js b/dist/react-hammerjs.min.js index 1a2a188..1d7b543 100644 --- a/dist/react-hammerjs.min.js +++ b/dist/react-hammerjs.min.js @@ -1 +1 @@ -!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.Hammer=e()}}(function(){return function e(n,t,o){function i(a,c){if(!t[a]){if(!n[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(r)return r(a,!0);var p=new Error("Cannot find module '"+a+"'");throw p.code="MODULE_NOT_FOUND",p}var f=t[a]={exports:{}};n[a][0].call(f.exports,function(e){var t=n[a][1][e];return i(t?t:e)},f,f.exports,e,n,t,o)}return t[a].exports}for(var r="function"==typeof require&&require,a=0;a Date: Sat, 16 Sep 2017 14:49:24 -0400 Subject: [PATCH 03/13] rollup iife --- dist/react-hammerjs-iife.min.js | 1 + package.json | 3 +++ rollup.config.js | 8 ++++++++ 3 files changed, 12 insertions(+) create mode 100644 dist/react-hammerjs-iife.min.js create mode 100644 rollup.config.js diff --git a/dist/react-hammerjs-iife.min.js b/dist/react-hammerjs-iife.min.js new file mode 100644 index 0000000..83ad34f --- /dev/null +++ b/dist/react-hammerjs-iife.min.js @@ -0,0 +1 @@ +!function(){"use strict";function e(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var o=n.direction;if(o||n.hasOwnProperty("vertical")){var r=o||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:t[r]}),e.get("swipe").set({direction:t[r]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(t){var o=i[t];o&&(e.off(o),e.on(o,n[t]))})}var n=require("react"),t=(require("react-dom"),"undefined"!=typeof window?require("hammerjs"):void 0),o={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},i={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};Object.keys(i).forEach(function(e){o[e]=!0});var r=n.createClass({displayName:"Hammer",propTypes:{className:n.PropTypes.string},componentDidMount:function(){this.hammer=new t(this.domElement),e(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&e(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var e={};Object.keys(this.props).forEach(function(n){o[n]||(e[n]=this.props[n])},this);var t=this;return e.ref=function(e){t.props.ref&&t.props.ref(e),t.domElement=e},n.cloneElement(n.Children.only(this.props.children),e)}});module.exports=r}(); diff --git a/package.json b/package.json index 1db1fcc..919c09c 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,8 @@ "merge-stream": "^1.0.0", "react": "^15.2.0", "react-dom": "^15.2.0", + "rollup": "^0.50.0", + "rollup-plugin-uglify": "^2.0.1", "vinyl-source-stream": "^1.1.0" }, "peerDependencies": { @@ -37,6 +39,7 @@ "react-dom": "global:ReactDOM" }, "scripts": { + "build:iife": "rollup -c", "build": "NODE_ENV=production gulp build", "bump": "gulp bump", "bump:minor": "gulp bump:minor", diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..a1a789a --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,8 @@ +import uglify from 'rollup-plugin-uglify' + +export default { + entry: 'src/Hammer.js', + dest: 'dist/react-hammerjs-iife.min.js', + format: 'iife', + plugins: [uglify()], +} From be92a08567ba6848235d1d18beca2cf833b6fce7 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 15:00:53 -0400 Subject: [PATCH 04/13] will hammer work? --- dist/react-hammerjs-iife.min.js | 2 +- rollup.config.js | 13 ++++++++++--- src/Hammer.js | 8 ++------ 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/dist/react-hammerjs-iife.min.js b/dist/react-hammerjs-iife.min.js index 83ad34f..b66fc43 100644 --- a/dist/react-hammerjs-iife.min.js +++ b/dist/react-hammerjs-iife.min.js @@ -1 +1 @@ -!function(){"use strict";function e(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var o=n.direction;if(o||n.hasOwnProperty("vertical")){var r=o||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:t[r]}),e.get("swipe").set({direction:t[r]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(t){var o=i[t];o&&(e.off(o),e.on(o,n[t]))})}var n=require("react"),t=(require("react-dom"),"undefined"!=typeof window?require("hammerjs"):void 0),o={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},i={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};Object.keys(i).forEach(function(e){o[e]=!0});var r=n.createClass({displayName:"Hammer",propTypes:{className:n.PropTypes.string},componentDidMount:function(){this.hammer=new t(this.domElement),e(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&e(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var e={};Object.keys(this.props).forEach(function(n){o[n]||(e[n]=this.props[n])},this);var t=this;return e.ref=function(e){t.props.ref&&t.props.ref(e),t.domElement=e},n.cloneElement(n.Children.only(this.props.children),e)}});module.exports=r}(); +!function(e,n){"use strict";function t(e,t){t.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var o=t.direction;if(o||t.hasOwnProperty("vertical")){var r=o||(t.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:n[r]}),e.get("swipe").set({direction:n[r]})}t.options&&Object.keys(t.options).forEach(function(n){if("recognizers"===n)Object.keys(t.options.recognizers).forEach(function(n){var o=e.get(n);o.set(t.options.recognizers[n]),t.options.recognizers[n].requireFailure&&o.requireFailure(t.options.recognizers[n].requireFailure)},this);else{var o={};o[n]=t.options[n],e.set(o)}},this),t.recognizeWith&&Object.keys(t.recognizeWith).forEach(function(n){e.get(n).recognizeWith(t.recognizeWith[n])},this),Object.keys(t).forEach(function(n){var o=i[n];o&&(e.off(o),e.on(o,t[n]))})}e=e&&e.hasOwnProperty("default")?e.default:e,n=n&&n.hasOwnProperty("default")?n.default:n;var o={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},i={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};Object.keys(i).forEach(function(e){o[e]=!0});var r=e.createClass({displayName:"Hammer",propTypes:{className:e.PropTypes.string},componentDidMount:function(){this.hammer=new n(this.domElement),t(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&t(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var n={};Object.keys(this.props).forEach(function(e){o[e]||(n[e]=this.props[e])},this);var t=this;return n.ref=function(e){t.props.ref&&t.props.ref(e),t.domElement=e},e.cloneElement(e.Children.only(this.props.children),n)}});module.exports=r}(React,Hammer); diff --git a/rollup.config.js b/rollup.config.js index a1a789a..9a6a058 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,8 +1,15 @@ import uglify from 'rollup-plugin-uglify' export default { - entry: 'src/Hammer.js', - dest: 'dist/react-hammerjs-iife.min.js', - format: 'iife', + input: 'src/Hammer.js', + output: { + file: 'dist/react-hammerjs-iife.min.js', + format: 'iife', + }, + external: [ 'react', 'hammerjs' ], + globals: { + react: 'React', + hammerjs: 'Hammer' + }, plugins: [uglify()], } diff --git a/src/Hammer.js b/src/Hammer.js index a4d1683..47057fb 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -1,9 +1,5 @@ -var React = require('react'); -var ReactDOM = require('react-dom'); - -// require('hammerjs') when in a browser. This is safe because Hammer is only -// invoked in componentDidMount, which is not executed on the server. -var Hammer = (typeof window !== 'undefined') ? require('hammerjs') : undefined; +import React from 'react' +import Hammer from 'hammerjs' var privateProps = { children: true, From 950a9fc9d911ab16eb9e17d956e0c382880712b2 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 15:10:33 -0400 Subject: [PATCH 05/13] test hammer global --- dist/react-hammerjs-iife.min.js | 2 +- rollup.config.js | 1 - src/Hammer.js | 3 ++- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/react-hammerjs-iife.min.js b/dist/react-hammerjs-iife.min.js index b66fc43..bf8d066 100644 --- a/dist/react-hammerjs-iife.min.js +++ b/dist/react-hammerjs-iife.min.js @@ -1 +1 @@ -!function(e,n){"use strict";function t(e,t){t.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var o=t.direction;if(o||t.hasOwnProperty("vertical")){var r=o||(t.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:n[r]}),e.get("swipe").set({direction:n[r]})}t.options&&Object.keys(t.options).forEach(function(n){if("recognizers"===n)Object.keys(t.options.recognizers).forEach(function(n){var o=e.get(n);o.set(t.options.recognizers[n]),t.options.recognizers[n].requireFailure&&o.requireFailure(t.options.recognizers[n].requireFailure)},this);else{var o={};o[n]=t.options[n],e.set(o)}},this),t.recognizeWith&&Object.keys(t.recognizeWith).forEach(function(n){e.get(n).recognizeWith(t.recognizeWith[n])},this),Object.keys(t).forEach(function(n){var o=i[n];o&&(e.off(o),e.on(o,t[n]))})}e=e&&e.hasOwnProperty("default")?e.default:e,n=n&&n.hasOwnProperty("default")?n.default:n;var o={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},i={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};Object.keys(i).forEach(function(e){o[e]=!0});var r=e.createClass({displayName:"Hammer",propTypes:{className:e.PropTypes.string},componentDidMount:function(){this.hammer=new n(this.domElement),t(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&t(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var n={};Object.keys(this.props).forEach(function(e){o[e]||(n[e]=this.props[e])},this);var t=this;return n.ref=function(e){t.props.ref&&t.props.ref(e),t.domElement=e},e.cloneElement(e.Children.only(this.props.children),n)}});module.exports=r}(React,Hammer); +!function(e){"use strict";function n(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var t=n.direction;if(t||n.hasOwnProperty("vertical")){var i=t||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:Hammer[i]}),e.get("swipe").set({direction:Hammer[i]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(t){var i=o[t];i&&(e.off(i),e.on(i,n[t]))})}e=e&&e.hasOwnProperty("default")?e.default:e,console.log("hi",Hammer);var t={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},o={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};Object.keys(o).forEach(function(e){t[e]=!0});var i=e.createClass({displayName:"Hammer",propTypes:{className:e.PropTypes.string},componentDidMount:function(){this.hammer=new Hammer(this.domElement),n(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&n(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var n={};Object.keys(this.props).forEach(function(e){t[e]||(n[e]=this.props[e])},this);var o=this;return n.ref=function(e){o.props.ref&&o.props.ref(e),o.domElement=e},e.cloneElement(e.Children.only(this.props.children),n)}});module.exports=i}(React); diff --git a/rollup.config.js b/rollup.config.js index 9a6a058..12addae 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -9,7 +9,6 @@ export default { external: [ 'react', 'hammerjs' ], globals: { react: 'React', - hammerjs: 'Hammer' }, plugins: [uglify()], } diff --git a/src/Hammer.js b/src/Hammer.js index 47057fb..497f2fe 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -1,5 +1,6 @@ import React from 'react' -import Hammer from 'hammerjs' +import 'hammerjs' +console.log('hi', Hammer) var privateProps = { children: true, From 321cfd8b644feccac8f8e56a420789eeb2cc3818 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 15:28:14 -0400 Subject: [PATCH 06/13] cross fingers --- bundle.js | 12 ++++++++++++ dist/react-hammerjs-iife.min.js | 2 +- main.js | 2 ++ rollup.config.js | 3 ++- src/Hammer.js | 5 +---- 5 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 bundle.js create mode 100644 main.js diff --git a/bundle.js b/bundle.js new file mode 100644 index 0000000..ccfcfb6 --- /dev/null +++ b/bundle.js @@ -0,0 +1,12 @@ +var blahh = (function (exports) { +'use strict'; + +const x = 'hi'; +const y = 'hi'; + +exports.x = x; +exports.y = y; + +return exports; + +}({})); diff --git a/dist/react-hammerjs-iife.min.js b/dist/react-hammerjs-iife.min.js index bf8d066..56e5417 100644 --- a/dist/react-hammerjs-iife.min.js +++ b/dist/react-hammerjs-iife.min.js @@ -1 +1 @@ -!function(e){"use strict";function n(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var t=n.direction;if(t||n.hasOwnProperty("vertical")){var i=t||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:Hammer[i]}),e.get("swipe").set({direction:Hammer[i]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(t){var i=o[t];i&&(e.off(i),e.on(i,n[t]))})}e=e&&e.hasOwnProperty("default")?e.default:e,console.log("hi",Hammer);var t={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},o={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};Object.keys(o).forEach(function(e){t[e]=!0});var i=e.createClass({displayName:"Hammer",propTypes:{className:e.PropTypes.string},componentDidMount:function(){this.hammer=new Hammer(this.domElement),n(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&n(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var n={};Object.keys(this.props).forEach(function(e){t[e]||(n[e]=this.props[e])},this);var o=this;return n.ref=function(e){o.props.ref&&o.props.ref(e),o.domElement=e},e.cloneElement(e.Children.only(this.props.children),n)}});module.exports=i}(React); +var ReactHammer=function(e){"use strict";function n(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var t=n.direction;if(t||n.hasOwnProperty("vertical")){var i=t||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:Hammer[i]}),e.get("swipe").set({direction:Hammer[i]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(t){var i=o[t];i&&(e.off(i),e.on(i,n[t]))})}e=e&&e.hasOwnProperty("default")?e.default:e,console.log("hi",Hammer);var t={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},o={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};return Object.keys(o).forEach(function(e){t[e]=!0}),e.createClass({displayName:"Hammer",propTypes:{className:e.PropTypes.string},componentDidMount:function(){this.hammer=new Hammer(this.domElement),n(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&n(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var n={};Object.keys(this.props).forEach(function(e){t[e]||(n[e]=this.props[e])},this);var o=this;return n.ref=function(e){o.props.ref&&o.props.ref(e),o.domElement=e},e.cloneElement(e.Children.only(this.props.children),n)}})}(React); diff --git a/main.js b/main.js new file mode 100644 index 0000000..80fafe5 --- /dev/null +++ b/main.js @@ -0,0 +1,2 @@ +export const x = 'hi' +export const y = 'hi' diff --git a/rollup.config.js b/rollup.config.js index 12addae..dd56a9a 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,12 +1,13 @@ import uglify from 'rollup-plugin-uglify' export default { + name: 'ReactHammer', input: 'src/Hammer.js', output: { file: 'dist/react-hammerjs-iife.min.js', format: 'iife', }, - external: [ 'react', 'hammerjs' ], + external: [ 'react' ], globals: { react: 'React', }, diff --git a/src/Hammer.js b/src/Hammer.js index 497f2fe..d8afb97 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -1,5 +1,4 @@ import React from 'react' -import 'hammerjs' console.log('hi', Hammer) var privateProps = { @@ -95,7 +94,7 @@ function updateHammer (hammer, props) { }); } -var HammerComponent = React.createClass({ +export default React.createClass({ displayName: 'Hammer', @@ -144,5 +143,3 @@ var HammerComponent = React.createClass({ return React.cloneElement(React.Children.only(this.props.children), props); } }); - -module.exports = HammerComponent; From dd8deed7d9556f5f49f6097fe60ca5aa6fcf72a0 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 15:31:44 -0400 Subject: [PATCH 07/13] iife works! --- dist/react-hammerjs-iife.min.js | 2 +- rollup.config.js | 4 ---- src/Hammer.js | 3 +-- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/dist/react-hammerjs-iife.min.js b/dist/react-hammerjs-iife.min.js index 56e5417..cc1e548 100644 --- a/dist/react-hammerjs-iife.min.js +++ b/dist/react-hammerjs-iife.min.js @@ -1 +1 @@ -var ReactHammer=function(e){"use strict";function n(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var t=n.direction;if(t||n.hasOwnProperty("vertical")){var i=t||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:Hammer[i]}),e.get("swipe").set({direction:Hammer[i]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(t){var i=o[t];i&&(e.off(i),e.on(i,n[t]))})}e=e&&e.hasOwnProperty("default")?e.default:e,console.log("hi",Hammer);var t={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},o={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};return Object.keys(o).forEach(function(e){t[e]=!0}),e.createClass({displayName:"Hammer",propTypes:{className:e.PropTypes.string},componentDidMount:function(){this.hammer=new Hammer(this.domElement),n(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&n(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var n={};Object.keys(this.props).forEach(function(e){t[e]||(n[e]=this.props[e])},this);var o=this;return n.ref=function(e){o.props.ref&&o.props.ref(e),o.domElement=e},e.cloneElement(e.Children.only(this.props.children),n)}})}(React); +var ReactHammer=function(){"use strict";function e(e,n){n.hasOwnProperty("vertical")&&console.warn("vertical is deprecated, please use `direction` instead");var o=n.direction;if(o||n.hasOwnProperty("vertical")){var i=o||(n.vertical?"DIRECTION_ALL":"DIRECTION_HORIZONTAL");e.get("pan").set({direction:Hammer[i]}),e.get("swipe").set({direction:Hammer[i]})}n.options&&Object.keys(n.options).forEach(function(t){if("recognizers"===t)Object.keys(n.options.recognizers).forEach(function(t){var o=e.get(t);o.set(n.options.recognizers[t]),n.options.recognizers[t].requireFailure&&o.requireFailure(n.options.recognizers[t].requireFailure)},this);else{var o={};o[t]=n.options[t],e.set(o)}},this),n.recognizeWith&&Object.keys(n.recognizeWith).forEach(function(t){e.get(t).recognizeWith(n.recognizeWith[t])},this),Object.keys(n).forEach(function(o){var i=t[o];i&&(e.off(i),e.on(i,n[o]))})}var n={children:!0,direction:!0,options:!0,recognizeWith:!0,vertical:!0},t={action:"tap press",onDoubleTap:"doubletap",onPan:"pan",onPanCancel:"pancancel",onPanEnd:"panend",onPanMove:"panmove",onPanStart:"panstart",onPinch:"pinch",onPinchCancel:"pinchcancel",onPinchEnd:"pinchend",onPinchIn:"pinchin",onPinchOut:"pinchout",onPinchStart:"pinchstart",onPress:"press",onPressUp:"pressup",onRotate:"rotate",onRotateCancel:"rotatecancel",onRotateEnd:"rotateend",onRotateMove:"rotatemove",onRotateStart:"rotatestart",onSwipe:"swipe",onSwipeRight:"swiperight",onSwipeLeft:"swipeleft",onSwipeUp:"swipeup",onSwipeDown:"swipedown",onTap:"tap"};return Object.keys(t).forEach(function(e){n[e]=!0}),React.createClass({displayName:"Hammer",propTypes:{className:React.PropTypes.string},componentDidMount:function(){this.hammer=new Hammer(this.domElement),e(this.hammer,this.props)},componentDidUpdate:function(){this.hammer&&e(this.hammer,this.props)},componentWillUnmount:function(){this.hammer&&(this.hammer.stop(),this.hammer.destroy()),this.hammer=null},render:function(){var e={};Object.keys(this.props).forEach(function(t){n[t]||(e[t]=this.props[t])},this);var t=this;return e.ref=function(e){t.props.ref&&t.props.ref(e),t.domElement=e},React.cloneElement(React.Children.only(this.props.children),e)}})}(); diff --git a/rollup.config.js b/rollup.config.js index dd56a9a..d29bfee 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -7,9 +7,5 @@ export default { file: 'dist/react-hammerjs-iife.min.js', format: 'iife', }, - external: [ 'react' ], - globals: { - react: 'React', - }, plugins: [uglify()], } diff --git a/src/Hammer.js b/src/Hammer.js index d8afb97..cc9d2fa 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -1,5 +1,4 @@ -import React from 'react' -console.log('hi', Hammer) +// External Dependencies: React, Hammer var privateProps = { children: true, From d061ec122a389b5274a444a6196d41ea93fb46a0 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 17:07:44 -0400 Subject: [PATCH 08/13] dep management --- src/Hammer.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Hammer.js b/src/Hammer.js index cc9d2fa..310ae7a 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -1,4 +1,7 @@ // External Dependencies: React, Hammer +// hope these 2 lines don't break iife build +import React from 'react' +import 'hammerjs' var privateProps = { children: true, From 177ddfdec605bf9e25f5e371574144bc1d5cc83c Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 18:54:39 -0400 Subject: [PATCH 09/13] fixed warnings --- src/Hammer.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/Hammer.js b/src/Hammer.js index 310ae7a..35c22bc 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -96,13 +96,9 @@ function updateHammer (hammer, props) { }); } -export default React.createClass({ +export default class extends React.Component { - displayName: 'Hammer', - - propTypes: { - className: React.PropTypes.string, - }, + static displayName = 'ReactHammer' componentDidMount: function () { this.hammer = new Hammer(this.domElement); From e9afb6a77a1d45f29a3f9060ff45cb33aa29aba9 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 18:58:17 -0400 Subject: [PATCH 10/13] fixed class notation break --- src/Hammer.js | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/Hammer.js b/src/Hammer.js index 35c22bc..5f11904 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -100,26 +100,26 @@ export default class extends React.Component { static displayName = 'ReactHammer' - componentDidMount: function () { + componentDidMount() { this.hammer = new Hammer(this.domElement); updateHammer(this.hammer, this.props); - }, + } - componentDidUpdate: function () { + componentDidUpdate() { if (this.hammer) { updateHammer(this.hammer, this.props); } - }, + } - componentWillUnmount: function () { + componentWillUnmount() { if (this.hammer) { this.hammer.stop(); this.hammer.destroy(); } this.hammer = null; - }, + } - render: function () { + render() { var props = {}; Object.keys(this.props).forEach(function (i) { @@ -128,16 +128,13 @@ export default class extends React.Component { } }, this); - var self = this; - props.ref = function(domElement) { - if (self.props.ref) { - self.props.ref(domElement); - } - self.domElement = domElement; + props.ref = domElement => { + if (self.props.ref) this.props.ref(domElement) + this.domElement = domElement; }; // Reuse the child provided // This makes it flexible to use whatever element is wanted (div, ul, etc) return React.cloneElement(React.Children.only(this.props.children), props); } -}); +}) From abfd7dbfbf8ad262bee66bfe8ef0e53c992f3b8f Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 19:00:26 -0400 Subject: [PATCH 11/13] stupid par ) --- src/Hammer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Hammer.js b/src/Hammer.js index 5f11904..0eaa5a0 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -137,4 +137,4 @@ export default class extends React.Component { // This makes it flexible to use whatever element is wanted (div, ul, etc) return React.cloneElement(React.Children.only(this.props.children), props); } -}) +} From 30f6e21ca61872b288c383fb090fe339ef018417 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 19:03:55 -0400 Subject: [PATCH 12/13] finally passes syntax check --- src/Hammer.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Hammer.js b/src/Hammer.js index 0eaa5a0..021ca99 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -96,9 +96,7 @@ function updateHammer (hammer, props) { }); } -export default class extends React.Component { - - static displayName = 'ReactHammer' +class ReactHammer extends React.Component { componentDidMount() { this.hammer = new Hammer(this.domElement); @@ -138,3 +136,6 @@ export default class extends React.Component { return React.cloneElement(React.Children.only(this.props.children), props); } } + +ReactHammer.displayName = 'ReactHammer' +export default ReactHammer From 8b8c46dac38e55a6d9e3d3a46e804bb764d7f362 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Sat, 16 Sep 2017 19:04:59 -0400 Subject: [PATCH 13/13] ugh self->this --- src/Hammer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Hammer.js b/src/Hammer.js index 021ca99..b4f9a69 100644 --- a/src/Hammer.js +++ b/src/Hammer.js @@ -127,7 +127,7 @@ class ReactHammer extends React.Component { }, this); props.ref = domElement => { - if (self.props.ref) this.props.ref(domElement) + if (this.props.ref) this.props.ref(domElement) this.domElement = domElement; };