Add webpack plugin update deps and compile with gulp-typescript (no need for babel)

Author: Tofandel

.gitignore

@@ -4,4 +4,5 @@
 /vendor/
 /node_modules/
 /.phpunit/
-/.phpunit.result.cache
+/.phpunit.result.cache
+.idea

Resources/doc/installation.rst

@@ -55,3 +55,9 @@ Execute the following command to publish the assets required by the bundle:
     $ php bin/console assets:install --symlink public
 
 .. _`installation chapter`: https://getcomposer.org/doc/00-intro.md
+
+Step 5: If you are using webpack, install the npm package locally
+-----------------------------------------------------------------
+.. code-block:: bash
+
+    $ yarn add -D ./vendor/friendsofsymfony/jsrouting-bundle/Resources/

Resources/doc/usage.rst

@@ -23,12 +23,24 @@ In applications not using webpack add these two lines in your layout:
     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
+If you are using webpack and Encore to package your assets you can use the webpack plugin included in this package
+
+.. code-block:: js
+
+    const FosRouting = require('fos-router/webpack/FosRouting');
+    //...
+    Encore
+      .addPlugin(new FosRouting())
+
+Then use it simply by importing ``import Routing from 'fos-router';`` in your js or ts code
+
+
+Alternatively you can use the dump command
 and export your routes to json, this command will create a json file into the ``web/js`` folder:
 
 .. code-block:: bash
 
-    bin/console fos:js-routing:dump --format=json
+    bin/console fos:js-routing:dump --format=json --target=assets/js/routes.json
 
 If you are using Flex, probably you want to dump your routes into the ``public`` folder
 instead of ``web``, to achieve this you can set the ``target`` parameter:

Resources/gulpfile.js

@@ -1,20 +1,24 @@
 const gulp = require('gulp');
-const babel = require('gulp-babel');
 const rename = require('gulp-rename');
 const uglify = require('gulp-uglify');
 const wrap = require('gulp-wrap');
+const ts = require('gulp-typescript')
 
-gulp.task('js', function() {
+gulp.task('ts', function() {
     return gulp.src('js/router.ts')
-        .pipe(babel({
-            presets: ["@babel/preset-env", "@babel/preset-typescript"],
-            plugins: ["@babel/plugin-transform-object-assign"]
+        .pipe(ts({
+            noImplicitAny: true,
         }))
+        .pipe(gulp.dest('public/js'));
+});
+
+gulp.task('min', function() {
+    return gulp.src('public/js/!(*.min).js')
         .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', gulp.series('js'));
+gulp.task('default', gulp.series('ts', 'min'));

Resources/js/router.template.js

@@ -19,5 +19,5 @@
     var exports = {};
     <%= contents %>
 
-    return { Router: Router, Routing: Routing };
+    return { Router: exports.Router, Routing: exports.Routing };
 }));

Resources/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fos-router",
-  "version": "2.2.0",
+  "version": "2.4.3",
   "description": "A pretty nice way to use the routes generated by the FOSJsRoutingBundle in your JavaScript.",
   "keywords": [
     "router",
@@ -23,33 +23,32 @@
   ],
   "main": "public/js/router.js",
   "files": [
+    "webpack/FosRouting.js",
     "public/js/router.js",
     "public/js/router.min.js",
     "ts/router.d.ts"
   ],
   "types": "ts/router.d.ts",
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-transform-object-assign": "^7.12.13",
-    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.1",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/node": "^14.14.44",
-    "google-closure-library": "^20171203.0.0",
+    "@types/node": "^14.18.10",
+    "google-closure-library": "^20220104.0.0",
     "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.5.4",
-    "gulp-wrap": "^0.13.0",
-    "jasmine": "^2.4.1",
-    "tsd": "^0.14.0",
-    "typescript": "^4.2.4"
+    "gulp-rename": "^2.0.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "gulp-wrap": "^0.15.0",
+    "jasmine": "^4.0.2",
+    "tsd": "^0.19.1",
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "build": "gulp && npm run build:types",
     "build:types": "tsc --declaration --emitDeclarationOnly",
     "test": "npm run build && npm run test:types && phantomjs js/run_jsunit.js js/router_test.html",
-    "test:types": "tsd"
+    "test:types": "tsd",
+    "prepublish": "npm run build"
   },
-  "dependencies": {}
+  "dependencies": {
+    "webpack-inject-plugin": "^1.5.5"
+  }
 }