Build: Use ES6 modules and remove use of script loading for full build

Fixes gh-154
Closes gh-157

.gitignore

@@ -1,5 +1,2 @@
-build/
-node_modules
-pointerevents.min.js
-pointerevents.min.js.map
-pointerevents.dev.js
+/dist/
+/node_modules/

Gruntfile.js

@@ -1,47 +1,67 @@
 module.exports = function(grunt) {
-  grunt.loadNpmTasks('grunt-contrib-concat');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-karma');
 
-  var sourceFiles = grunt.file.readJSON('build.json');
-  grunt.initConfig({
-    concat: {
-      pointerevents: {
-        options: {
-          stripBanners: true,
-          banner: grunt.file.read('LICENSE.txt')
-        },
-        nonull: true,
-        src: sourceFiles,
-        dest: 'pointerevents.dev.js'
-      }
-    },
-    uglify: {
-      pointerevents: {
-        options: {
-          // sourceMap: 'pointerevents.min.js.map',
-          banner: grunt.file.read('LICENSE.txt')
-        },
-        nonull: true,
-        dest: 'pointerevents.min.js',
-        src: sourceFiles
-      }
-    },
-    karma: {
+grunt.loadNpmTasks('grunt-contrib-uglify');
+grunt.loadNpmTasks('grunt-karma');
+
+var version = require('./package').version;
+var header =
+  '/*!\n' +
+  ' * PEP v' + version + ' | https://github.com/jquery/PEP\n' +
+  ' * Copyright jQuery Foundation and other contributors | http://jquery.org/license\n'+
+  ' */\n';
+
+grunt.initConfig({
+  uglify: {
+    pointerevents: {
       options: {
-        configFile: 'karma.conf.js',
-        keepalive: true
+        preserveComments: 'some'
       },
-      pointerevents: {
-      },
-      buildbot: {
-        reporters: 'crbot',
-        logLevel: 'OFF'
-      }
+      nonull: true,
+      dest: 'dist/PEP.min.js',
+      src: 'dist/PEP.js'
     }
-  });
+  },
+  karma: {
+    options: {
+      configFile: 'karma.conf.js',
+      keepalive: true
+    },
+    pointerevents: {
+    },
+    buildbot: {
+      reporters: 'crbot',
+      logLevel: 'OFF'
+    }
+  }
+});
+
+grunt.registerTask('build', function() {
+  var esperanto = require('esperanto');
+  var done = this.async();
+
+  grunt.log.write('Building PEP...');
+  esperanto.bundle({
+    base: 'src',
+    entry: '../pointerevents.js'
+  }).then(function (bundle) {
+    var umd = bundle.toUmd({
+      name: 'PointerEventsPolyfill'
+    });
+    grunt.file.write('dist/PEP.js', header + umd.code);
+  }).then(
+    function() {
+      grunt.log.ok();
+      done();
+    },
+    function(error) {
+      grunt.log.error();
+      done(error);
+    }
+  );
+});
+
+grunt.registerTask('default', ['build', 'uglify']);
+grunt.registerTask('test', ['override-chrome-launcher', 'karma:pointerevents']);
+grunt.registerTask('test-buildbot', ['override-chrome-launcher', 'karma:buildbot']);
 
-  grunt.registerTask('default', ['concat', 'uglify']);
-  grunt.registerTask('test', ['override-chrome-launcher', 'karma:pointerevents']);
-  grunt.registerTask('test-buildbot', ['override-chrome-launcher', 'karma:buildbot']);
 };

README.md

@@ -68,12 +68,14 @@ By default, no PointerEvents are sent from an element. This maximizes possibilit
 
 ### Getting Started
 
-1. Clone this repo or install from bower (pointerevents-polyfill)
-1. Place the loader script in the document head
-  - This Repo
-    - `<script src="PointerEvents/src/pointerevents.js"></script>`
-  - Bower
-    - `<script src="bower_components/pointerevents-polyfill/pointerevents.min.js"></script>`
+1. Clone this repo
+1. Install dependencies
+  - `npm install -g grunt-cli`
+  - `npm install`
+1. Run the build script
+  - `grunt`
+1. Place the built script in the document head
+  - `<script src="PEP/dist/PEP.js"></script>`
 1. Set up your event listeners
 1. You're Done!
 

bower.json

@@ -1,20 +1,18 @@
 {
   "name": "PEP",
-  "main": "pointerevents.js",
+  "main": "dist/PEP.js",
   "homepage": "https://github.com/jquery/PEP",
   "authors": [
     "jQuery Foundation and other contributors"
   ],
-  "description": "PointerEvents Polyfill: a unified event system for the web platform",
+  "description": "Polyfill of the PointerEvents W3C spec",
   "keywords": [
     "PointerEvents"
   ],
   "license": "MIT",
-  "private": true,
   "ignore": [
     "**/.*",
     "node_modules",
-    "bower_components",
     "test"
   ]
 }

package.json

@@ -10,8 +10,8 @@
     "mocha": "*",
     "chai": "^1.9.1",
     "chai-spies": "^0.5.1",
+    "esperanto": "^0.6.6",
     "grunt": "~0.4.1",
-    "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-uglify": "^0.4.0",
     "karma": "~0.12.0",
     "karma-mocha": "*",

pointerevents.js

@@ -1,37 +1,20 @@
-/*!
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
+import dispatcher from 'dispatcher';
+import PointerMap from 'pointermap';
+import Installer from 'installer';
+import targeting from 'targeting';
+import PointerEvent from 'PointerEvent';
+import { applyAttributeStyles } from 'touch-action';
+import { applyPolyfill as applyPointerEventPolyfill } from 'platform-events';
+import { applyPolyfill as applyCapturePolyfill } from 'capture';
 
-(function() {
-  var thisFile = 'pointerevents.js';
-  var scopeName = 'PointerEventsPolyfill';
-  var modules = [
-    'src/boot.js',
-    'src/touch-action.js',
-    'src/PointerEvent.js',
-    'src/pointermap.js',
-    'src/dispatcher.js',
-    'src/installer.js',
-    'src/mouse.js',
-    'src/touch.js',
-    'src/ms.js',
-    'src/platform-events.js',
-    'src/capture.js'
-  ];
+applyAttributeStyles();
+applyPointerEventPolyfill();
+applyCapturePolyfill();
 
-  window[scopeName] = {
-    entryPointName: thisFile,
-    modules: modules
-  };
-
-  var script = document.querySelector('script[src $= "' + thisFile + '"]');
-  var src = script.attributes.src.value;
-  var basePath = src.slice(0, src.indexOf(thisFile));
-
-  modules.forEach(function( module ) {
-    document.write('<script src="' + basePath + module + '"></script>');
-  });
-
-})();
+export default {
+  dispatcher: dispatcher,
+  Installer: Installer,
+  PointerEvent: PointerEvent,
+  PointerMap: PointerMap,
+  targetFinding: targeting
+};

samples/paint/index.html

@@ -20,7 +20,7 @@
 <canvas width="800" height="600" touch-action="none"></canvas>
 
 <!-- Pointer events library. -->
-<script src="../../pointerevents.js"></script>
+<script src="../../dist/PEP.js"></script>
 <script src="paint.js"></script>
 <script>
 window.addEventListener('load', init);

samples/scroller/index.html

@@ -36,7 +36,7 @@
         width: 100px;
       }
     </style>
-    <script src="../../pointerevents.js"></script>
+    <script src="../../dist/PEP.js"></script>
   </head>
   <body>
     <div id="scroller">

samples/shadow/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<script src="../../pointerevents.js"></script>
+<script src="../../dist/PEP.js"></script>
 <style>
   #host {
     height: 400px;

samples/simple/index.html

@@ -40,7 +40,7 @@
         white-space: pre;
       }
     </style>
-    <script src="../../pointerevents.js"></script>
+    <script src="../../dist/PEP.js"></script>
   </head>
   <body>
     <div id="capture" touch-action="none">

samples/spaceship/index.html

@@ -45,7 +45,7 @@
     <script src="js/Vector2.js"></script>
     <script src="js/ShipMovingTouch.js"></script>
     <script src="js/BulletSebs.js"></script>
-    <script src="../../pointerevents.js"></script>
+    <script src="../../dist/PEP.js"></script>
     <script>
 // shim layer with setTimeout fallback
 window.requestAnimFrame = (function(){

samples/tracker/index.html

@@ -34,7 +34,7 @@
 
   </head>
   <body onload = "init()">
-    <script src="../../pointerevents.js"></script>
+    <script src="../../dist/PEP.js"></script>
     <script>
 
 // shim layer with setTimeout fallback