New version 0.6 (#30)

* 0.5.1 * Including polyfill to Reflection API into the factories * Removing support from MultiAntPath and the legacy leaflet (0.7.7 and below) * Successfully generating a coverage report with webpack and instabul Putting coverage on CI steps * Import correction * Setting the polyfills as part of the entry point * Implemented the "setStyle" path method * Following more strictly the leaflet 1.x interface * 0.6.0 * Travis corrections
rubenspgcavalcante · Apr 24, 2017 · 5bec858 · 5bec858
1 parent 65dd62b
commit 5bec858
Show file tree

Hide file tree

Showing 19 changed files with 225 additions and 298 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@ dist/
 node_modules/
 coverage/
 *.log
-.wbprofile.json
+.wbprofile.json
+webpack.tests.js.map
diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,7 @@
 .idea/
 coverage/
 node_modules/
+karma/
 dev-env/
 src/
 tasks/
@@ -14,4 +15,6 @@ tasks/
 .travis.yml
 yarn.lock
 karma.conf.js
-webpack.config.js
+webpack.config.js
+webpack.tests.js
+webpack.tests.js.map
diff --git a/.travis.yml b/.travis.yml
@@ -1,9 +1,11 @@
 language: node_js
 node_js:
 - '7'
-scripts:
-  test: npm test
-script: npm run build
+
+before_script: npm run build
+script: npm run test
+after_success: npm run codacy
+
 cache: yarn
 branches:
   only:

diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ Or just [download](https://github.com/rubenspgcavalcante/leaflet-ant-path-bower/
 
 
 ### Requirements
-  - Leaflet >= 0.7.7
+  - Leaflet >= 1
 
 ### Browser compatibility
 Tested on:
@@ -37,67 +37,65 @@ Tested on:
 
 ### UMD compatible
 Can be used with asynchronous module loaders and CommonJS packers
+
+### With or without polyfills
+The module provide two bundles, the full one, with some es6 polyfills (loaded by default when importing) and the lighter
+one without the polyfills. If you're already uses the following polyfills in your project:
+- regenerator-runtime
+- core-js/es6/symbol
+- core-js/es6/reflect
+
+Just use the lighter version (leaflet-ant-path.es6.js). If not, just use the full bundle.
 
 ### Important!
-Soon leaflet 0.7 will be deprecated, and so MultiPolyline. Because this, the MultiAntPath is
-also been **deprecated**, therefore use the L.LayerGroup to control your AntPath layers collection. :)
+MultiAntPath was removed, and now AntPath doesn't support the legacy version anymore (0.7.7). If you're still using
+MultiAntPath and Leaflet 0.7, use older AntPath versions than 0.6
 
 ### Using the plugin
 It's just like a polyline:  
 
-``` javascript
-    // Using the AntPath
-    var antPolyline = new L.Polyline.AntPath(latlngs, options);
+```javascript
+    // Using the constructor...
+    let antPolyline = new L.Polyline.AntPath(latlngs, options);
 
-    //or use the factory
+    // ... or use the factory
     antPolyline = L.polyline.antPath(latlngs, options);
 
     antPolyline.addTo(map);
+```
+
+
+Using with ES6 imports
+```javascript
+    import {AntPath, antPath} from 'leafletAntPath';
 
-    // ... And the MultiAntPath
-    var antPolyline = new L.MultiPolyline.MultiAntPath(latlngsList, options);
-
-    //or use the factory
-    antPolylines = L.multiPolyline.multiAntPath(latlngsList, options);
+    // Using the constructor...
+    let antPolyline = new AntPath(latlngs, options);
 
-    antPolylines.addTo(map);
+    // ... or use the factory
+    antPolyline = antPath(latlngs, options);   
 
+    antPolyline.addTo(map);
 ```
 
-Note for AMD/CommonJS:  
-The direct use as 'AntPath' now is **deprecated** and instead is exported by default, the modules which contains the AntPath and MultiAntPath
-
 Using with AMD:  
-
-``` javascript
+```javascript
 require(['leafletAntPath'], function(AntPathModule) {
-    // ...
-    var antPolyline = new AntPathModule.AntPath(latlngs, options);
-    antPolyline.addTo(map);
+    // Using the constructor ...
+    let antPolyline = new AntPathModule.AntPath(latlngs, options);
 
-    var multiAntPolylines = new AntPathModule.MultiAntPath(latlngs, options);
-    multiAntPolylines.addTo(map);
+    // ... or use the factory
+    antPolyline = AntPathModule.antPath(latlngs, options);
+
+    antPolyline.addTo(map);
 });
 ```
 
 Using with browserify:
-
-``` javascript
-    var AntPath = require('leafletAntPath').AntPath;
-    var MultiAntPath = require('leafletAntPath').MultiAntPath;
-
-    // ...
-    var antPolyline = new AntPath(latlngs, options);
-    antPolyline.addTo(map);
+```javascript
+    const AntPath = require('leafletAntPath').AntPath;
 ```
 
-Using with ES6 imports
-``` javascript
-    import {AntPath, MultiAntPath} from 'leafletAntPath';
-
-    var antPolyline = new AntPath(latlngs, options);
-    antPolyline.addTo(map);
-```
 
 ### ES6/ES2015 features
 Thinking in the new features of JavaScript, and its new way of programing,
@@ -106,15 +104,15 @@ AntPath has some nicely features to work with ES6.
 #### spreadable
 When spread the path, you will receive it lat/lngs array;
 ```javascript
-    ...
-    let antPathLayer = new AntPath(path, options);
-    let anotherAntPath = new AntPath(path2, options);
+    //...
+    const antPathLayer = new AntPath(path, options);
+    const anotherAntPath = new AntPath(path2, options);
 
-    let latLngs = [...antPathLayer, ...anotherAntPath];
+    const latLngs = [...antPathLayer, ...anotherAntPath];
 ```
 
 #### iterable
-When used in a **for ... of ...** loops over the path coordinates
+Use a **for ... of ...** to iterate over the path coordinates
 ```javascript
 for(let latLng of antPath) {
     // do something with it latLngs ...
@@ -134,7 +132,7 @@ AntPath has a map method as the Array, returning a new instance of
 AntPath *(or the child class which extends it)*:
 ```javascript
 //New path with translated path
-let newAnthPath = myAntPath.map(pos => latLng(pos.lat+1, pos.lng+1));
+const newAnthPath = myAntPath.map(pos => latLng(pos.lat + 1, pos.lng + 1));
 ```
 
 ### Parameters
@@ -153,7 +151,13 @@ the same options of a common [Polyline]((http://leafletjs.com/reference.html#pol
 ---
 
 ### Methods
-Same as the L.Polyline API and with the same behaviour. [See it here.](http://leafletjs.com/reference.html#polyline)
+| name | returns | description |
+|------|---------|-------------|
+| pause() | boolean | Stops the animation |
+| resume() | booelan | Resume the animation |
+
+
+Also have the same as the L.Polyline API and with the same behaviour. [See it here.](http://leafletjs.com/reference.html#polyline)
 
 ### License
 This project is under the [MIT LICENSE](http://opensource.org/licenses/MIT)
diff --git a/dev-env/index.js b/dev-env/index.js
@@ -23,4 +23,10 @@ document.addEventListener("DOMContentLoaded", () => {
     mapCustom.addLayer(customAntPath);
 
     logger.log(antPath.getLatLngs());
+
+    //Changing dynamically the style of the component
+    setTimeout(
+        () => customAntPath.setStyle({delay: 3000, pulseColor: "#000000", color: "blue"}),
+        5000
+    );
 });
diff --git a/karma/clean-report.js b/karma/clean-report.js
@@ -0,0 +1,29 @@
+const istanbul = require("istanbul");
+const path = require("path");
+const collector = new istanbul.Collector();
+const reporter = new istanbul.Reporter();
+
+const remappedJson = require(path.resolve(__dirname, "../coverage/remapped.json"));
+const coverage = Object.keys(remappedJson).reduce((result, source) => {
+    // only keep js files under src/
+    const sourceRegExp = /src\/plugin\/.*\.js$/;
+    const matched = source.match(sourceRegExp);
+
+    if (matched) {
+        const realPath = matched[0];
+        result[realPath] = remappedJson[source];
+    }
+
+    return result;
+}, {});
+
+collector.add(coverage);
+
+reporter.add("lcovonly");
+reporter.add("html");
+
+reporter.write(
+    collector,
+    true,
+    () => console.info("Report clean!")
+);
diff --git a/karma.conf.js → karma/karma.conf.js b/karma.conf.js → karma/karma.conf.js
@@ -1,29 +1,29 @@
-const webpackLoaders = require("./webpack/loaders.js");
+const webpackLoaders = require("./../webpack/loaders.js");
 
 module.exports = function (config) {
     config.set({
-        basePath: ".",
+        basePath: "../",
         frameworks: ["jasmine"],
         browsers: ["PhantomJS"],
         plugins: [
             "karma-webpack",
+            "karma-babel-preprocessor",
             "karma-phantomjs-launcher",
             "karma-jasmine",
-            "karma-coverage",
-            "karma-remap-istanbul",
             "karma-sourcemap-loader",
-            "karma-remap-istanbul",
-            "karma-babel-preprocessor"
+            "karma-sourcemap-writer",
+            "karma-coverage",
+            "karma-remap-istanbul"
         ],
 
         reporters: ["progress", "coverage", "karma-remap-istanbul"],
 
         preprocessors: {
-            "src/**/*.js": ["webpack", "sourcemap", "coverage"]
+            "./webpack.tests.js": ["webpack", "sourcemap", "sourcemap-writer", "coverage"]
         },
 
         webpack: {
-            entry: ["./src/specs/bootstrap-tests.js"],
+            entry: ["./webpack.tests.js"],
             devtool: "inline-source-map",
             output: {
                 path: "dist/",
@@ -47,19 +47,17 @@ module.exports = function (config) {
             subdir: ".",
             file: "coverage.json"
         },
+
         remapIstanbulReporter: {
-            src: 'coverage/lcov/coverage.json',
             reports: {
-                lcovonly: 'coverage/lcov.info',
-                //html: 'coverage/html/report'
-            },
-            timeoutNotCreated: 5000, // default value
-            timeoutNoMoreFiles: 1000 // default value
+                html: "coverage",
+                json: 'coverage/remapped.json'
+            }
         },
 
         files: [
             "node_modules/babel-polyfill/dist/polyfill.min.js",
-            {pattern: "src/**/*.js", watched: true},
+            "./webpack.tests.js",
         ],
 
         singleRun: false,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "leaflet-ant-path",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Creates a leaflet polyline with a 'ant-path' animated flux",
   "keywords": [
     "leaflet",
@@ -11,10 +11,10 @@
   "main": "dist/leaflet-ant-path.js",
   "scripts": {
     "build": "NODE_ENV=production webpack  --colors --profile --progress",
-    "test": "karma start --log-level debug --single-run",
+    "test": "karma start karma/karma.conf.js --log-level debug --single-run && node karma/clean-report.js",
     "analyze": "NODE_ENV=production webpack --profile --json > .wbprofile.json && webpack-bundle-analyzer .wbprofile.json -m server",
     "start": "NODE_ENV=development webpack-dev-server -d --cache --inline --host 0.0.0.0",
-    "codacy": "cat coverage/lcov/lcov.info | codacy-coverage",
+    "codacy": "cat coverage/lcov.info | codacy-coverage",
     "prepublish": "npm run build"
   },
   "author": "Rubens Pinheiro Gonçalves Cavalcante <rubenspgcavalcante@gmail.com>",
@@ -59,6 +59,7 @@
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-sourcemap-writer": "^0.1.2",
     "karma-webpack": "^2.0.2",
     "leaflet": "^1.0.3",
     "materialize-css": "^0.98.0",