JavaScript refactoring (#303)

* First commit integrating refactored JS code from Bruno Sampaio to remove reliance on Google Closure and support WebPack integration

* Resolving issues with failing tests

* Moving location of npm install call to match updated router_test.html

* Updating documentation with WebPack information

* Updating capitalisation of webpack as requested.

* Adjusting spacing for note block

* Updates to gulpfile, package and documentation addressing comments from @stof

* Setting correct permissions on js files imported from Bruon's work

* Correcting permissions, capitalisation, and version number

* Adding non-static method for route setting to simplify commonJS implementation

* Run a build prior to the JS test suite. Updated documentation.

* Switching Travis to use the same install and test commands as documented

* Updated gulpfile in an attempt to support PHP 5.3 on Travis

* Updated gulpfile removing another choke point for Travis on PHP 5.3

* Setting babel parameters in gulpfile to allow removal of .babelrc to prevent unexpected dependencies in projects

.travis.yml

@@ -28,8 +28,8 @@ before_install:
 
 install:
   - composer update $COMPOSER_FLAGS --prefer-dist
-  - npm install google-closure-library
+  - cd Resources && npm install && cd ../
 
 script:
   - ./phpunit
-  - phantomjs Resources/js/run_jsunit.js Resources/js/router_test.html
+  - cd Resources && npm run test

CONTRIBUTING.md

@@ -46,19 +46,31 @@ $ ./phpunit
 
 ### JavaScript Test Suite
 
-First, install [PhantomJS](http://phantomjs.org/) and [Google Closure
-Library](https://github.com/google/closure-library):
+First, install [PhantomJS](http://phantomjs.org/) (see the website for further 
+details or simply use your favourite package manager) and the development dependencies using:
 
 ```bash
-$ npm install google-closure-library
+$ cd Resources
+$ npm install
 ```
 
-Run the JS test suite with:
+then run the JS test suite with:
 
 ```bash
-$ phantomjs Resources/js/run_jsunit.js Resources/js/router_test.html
+$ npm run test
 ```
 
+Because the current test suite runs against the built javascript a build is automatically
+run first (see 'Compiling the JavaScript files' below for further details). You can 
+explicitly run only the test suite with:
+
+```bash
+$ phantomjs js/run_jsunit.js js/router_test.html
+```
+
+Alternatively you can open `Resources/js/router_test.html` in your browser which
+runs the same test suite with a graphical output.
+
 Compiling the JavaScript files
 ------------------------------
 
@@ -67,19 +79,23 @@ Compiling the JavaScript files
 > We already provide a compiled version of the JavaScript; this section is only
 > relevant if you want to make changes to this script.
 
-In order to re-compile the JavaScript source files that we ship with this
-bundle, you need the Google Closure Tools. You need the
-[plovr](http://plovr.com/download.html) tool, which is a Java ARchive, so you
-also need a working Java environment. You can re-compile the JavaScript with the
-following command:
+This project is using [Gulp](https://gulpjs.com/) to compile JavaScript files.
+In order to use Gulp you must install both [node](https://nodejs.org/en/) and 
+[npm](https://www.npmjs.com/). 
+
+If you are not familiar with using Gulp, it is recommended that you review this 
+[An Introduction to Gulp.js](https://www.sitepoint.com/introduction-gulp-js/)
+tutorial which will guide you through the process of getting node and npm installed.
+
+Once you have node and npm installed:
 
 ```bash
-$ java -jar plovr.jar build Resources/config/plovr/compile.js
+$ cd Resources
+$ npm install
 ```
 
-Alternatively, you can use the JMSGoogleClosureBundle. If you install this
-bundle, you can re-compile the JavaScript with the following command:
+Then to perform a build
 
 ```bash
-$ php app/console plovr:build @FOSJsRoutingBundle/compile.js
+$ npm run build
 ```

Resources/doc/usage.rst

@@ -1,13 +1,13 @@
 Usage
 =====
 
-Add these two lines in your layout:
+In applications not using webpack add these two lines in your layout:
 
 .. configuration-block::
 
     .. code-block:: html+twig
 
-        <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
+        <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
         <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
 
     .. code-block:: html+php
@@ -17,9 +17,28 @@ Add these two lines in your layout:
 
 .. note::
 
-    If you are not using Twig, then it is no problem. What you need is to add
+    If you are not using Twig, then it is no problem. What you need is
     the two JavaScript files above loaded at some point in your web page.
 
+
+If you are using webpack and Encore to package your assets you will need to use the dump command
+and export your routes to json:
+
+.. code-block:: bash
+
+    bin/console fos:js-routing:dump --format=json
+
+Then within your JavaScript development you can use:
+
+.. code-block:: javascript
+
+    const routes = require('../../web/js/fos_js_routes.json');
+    import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
+
+    Routing.setRoutingData(routes);
+    Routing.generate('rep_log_list');
+
+
 Generating URIs
 ---------------
 

Resources/gulpfile.js

@@ -0,0 +1,22 @@
+const gulp = require('gulp');
+const babel = require('gulp-babel');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+const wrap = require('gulp-wrap');
+
+gulp.task('js', function() {
+    return gulp.src('js/router.js')
+        .pipe(babel({
+            presets: ["es2015"],
+            plugins: ["transform-object-assign"]
+        }))
+        .pipe(wrap({ src: 'js/router.template.js' }))
+        .pipe(gulp.dest('public/js'))
+        .pipe(rename({ extname: '.min.js' }))
+        .pipe(uglify())
+        .pipe(gulp.dest('public/js'));
+});
+
+gulp.task('default', function() {
+    return gulp.start(['js']);
+});