[package][grunt][nj] add JS hot reloading

Ref https://github.com/LotusTM/Kotsu/issues/230

CHANGELOG.md

@@ -17,6 +17,7 @@
 - [package] Added `jspm_packages` to ignored by `standard` paths.
 - [package] Added `jspm_packages` to ignored by `Jest` paths.
 - [package] Added JSON loader for JSPM. Now you can use `import data from './yourdata.json'` to import any JSON-file.
+- [package][grunt] Added [hot reloading](https://github.com/alexisvincent/systemjs-hot-reloader/) for frontend JavaScript.
 - [grunt] Added `watchEvents` for Browser Sync to watch not only for changes, but also for addition of files, see [2.18.8](https://github.com/BrowserSync/browser-sync/releases/tag/v2.18.8).
 - [grunt] Added new variable `env.build`, which set to true if has been run `grunt build` command. Checking against this variable inside templates or tasks allows to change output depending on whether it is regular `grunt` build, or optimized `grunt build` [#218](https://github.com/LotusTM/Kotsu/issues/218).
 - [grunt] Added support of `--production` flag, which sets `env.production` to true [#218](https://github.com/LotusTM/Kotsu/issues/218).
@@ -52,6 +53,8 @@
 
 ### Fixed
 - [package] Fixed Stylelint not ignoring some default paths (like `node_modules`).
+- [package] Fixed missing `babel-polyfill` JSPM dependency.
+- [package] Fixed missing wrong meta for `systemjs-plugin-json` which resulted in endless load in some rare cases.
 - [grunt] Fixed Browser Sync not discovering new files without reload. See related [issue](https://github.com/BrowserSync/grunt-browser-sync/issues/106#issuecomment-286878540) for details.
 - [grunt][sass] Optimized Sass custom functions.
 - [grunt] Fixed not working `process.env.PRODUCTION` and `process.env.STAGING` checks.

README.md

@@ -43,8 +43,8 @@
 7. Install project dependencies: `npm install`
 8. *(optional)* Add your repository to [Travis](https://travis-ci.org/) for automatic tests
 9. *(optional)* Set up Continuous Deployment with [CircleCI](https://circleci.com/) or [Werker](http://wercker.com/) Docker following our [guide](https://github.com/LotusTM/Kotsu/wiki/Continuous-Delivery-with-Wercker-Docker-and-CoreOS)
-10. Code live with: `grunt`
-11. Build with: `grunt build`
+10. Code live with: `npm start`
+11. Build with: `npm run build`
 12. Deploy and enjoy your life
 
 ## What's inside?
@@ -60,7 +60,7 @@
 * i18n with [node-gettext](https://github.com/andris9/node-gettext)
 * [Sass](http://sass-lang.com/) compiler with source maps generation, [autoprefixing](https://github.com/postcss/autoprefixer), [optimization](https://github.com/giakki/uncss), [minification](https://github.com/css/csso) and [linting](https://github.com/stylelint/stylelint)
 * [Ekzo](https://github.com/ArmorDarks/ekzo) Sass framework
-* [jspm](http://jspm.io) with ES6 support, managing and bundling JavaScript dependencies
+* [JSPM](http://jspm.io) with ES6 support, managing and bundling JavaScript dependencies and configurated [hot reloading](https://github.com/alexisvincent/systemjs-hot-reloader/)
 * [standard](https://github.com/feross/standard) for linting and automatic formatting JavaScript
 * Live reload powered by [Browser Sync](https://github.com/shakyshane/grunt-browser-sync)
 * Automatic `sitemap.xml` generation with [grunt-sitemap-xml](https://github.com/lotustm/grunt-sitemap-xml)

gruntfile.coffee

@@ -113,7 +113,6 @@ module.exports = (grunt) ->
     'webfont'
     'sass'
     'postcss:autoprefix'
-    'shell:jspm_build'
     'responsive_images:thumbnails'
     'browserSync'
     'watch'
@@ -133,7 +132,7 @@ module.exports = (grunt) ->
     'postcss:autoprefix'
     'uncss'
     'csso'
-    'shell'
+    'shell:jspm_build'
     'uglify'
     'htmlmin'
     'responsive_images:thumbnails'

jspm.config.js

@@ -1,18 +1,31 @@
 SystemJS.config({
-  baseURL: "assets/scripts",
-  paths: {
-    "npm:": "jspm_packages/npm/",
-    "kotsu/": "source/scripts/"
+  baseURL: "/source/scripts",
+  browserConfig: {
+    "paths": {
+      "npm:": "/jspm_packages/npm/",
+      "github:": "/jspm_packages/github/",
+      "kotsu/": ""
+    }
+  },
+  nodeConfig: {
+    "paths": {
+      "npm:": "jspm_packages/npm",
+      "github:": "jspm_packages/github",
+      "kotsu/": "source/scripts/"
+    }
   },
   devConfig: {
     "map": {
       "plugin-babel": "npm:[email protected]",
+      "systemjs-hot-reloader": "npm:[email protected]",
       "systemjs-plugin-json": "npm:[email protected]"
-    }
-  },
-  meta: {
-    "*.json": {
-      "loader": "systemjs-plugin-json"
+    },
+    "packages": {
+      "npm:[email protected]": {
+        "map": {
+          "systemjs-hmr": "npm:[email protected]"
+        }
+      }
     }
   },
   transpiler: "plugin-babel",
@@ -23,9 +36,15 @@ SystemJS.config({
       "meta": {
         "*.js": {
           "loader": "plugin-babel"
+        },
+        "*.json": {
+          "loader": "systemjs-plugin-json"
         }
       }
     }
+  },
+  map: {
+    "@hot": "@empty"
   }
 });
 
@@ -35,7 +54,25 @@ SystemJS.config({
     "npm:*.json"
   ],
   map: {
-    "jquery": "npm:[email protected]"
+    "babel-polyfill": "npm:[email protected]",
+    "fs": "npm:[email protected]",
+    "jquery": "npm:[email protected]",
+    "path": "npm:[email protected]",
+    "process": "npm:[email protected]"
   },
-  packages: {}
+  packages: {
+    "npm:[email protected]": {
+      "map": {
+        "babel-runtime": "npm:[email protected]",
+        "core-js": "npm:[email protected]",
+        "regenerator-runtime": "npm:[email protected]"
+      }
+    },
+    "npm:[email protected]": {
+      "map": {
+        "core-js": "npm:[email protected]",
+        "regenerator-runtime": "npm:[email protected]"
+      }
+    }
+  }
 });

package.json

@@ -87,11 +87,13 @@
     "babel-jest": "19.0.0",
     "babel-polyfill": "6.23.0",
     "babel-preset-env": "1.4.0",
+    "chokidar-socket-emitter": "0.6.0",
     "grunt-browser-sync": "2.2.0",
     "grunt-contrib-watch": "1.0.0",
     "grunt-newer": "1.3.0",
     "jest": "19.0.2",
-    "jest-jspm": "^0.1.2",
+    "jest-jspm": "0.1.2",
+    "npm-run-all": "4.0.2",
     "snazzy": "6.0.0",
     "standard": "10.0.2",
     "stylelint": "7.10.0",
@@ -105,12 +107,19 @@
     "name": "kotsu",
     "main": "main.js",
     "dependencies": {
+      "babel-polyfill": "npm:babel-polyfill@^6.23.0",
       "jquery": "npm:jquery@^3.2.0"
     },
     "devDependencies": {
       "plugin-babel": "npm:systemjs-plugin-babel@^0.0.21",
+      "systemjs-hot-reloader": "npm:systemjs-hot-reloader@^1.1.0",
       "systemjs-plugin-json": "npm:systemjs-plugin-json@^0.3.0"
     },
+    "peerDependencies": {
+      "fs": "npm:jspm-nodelibs-fs@^0.2.0",
+      "path": "npm:jspm-nodelibs-path@^0.2.0",
+      "process": "npm:jspm-nodelibs-process@^0.2.0"
+    },
     "overrides": {
       "npm:[email protected]": {
         "format": "amd"
@@ -119,6 +128,11 @@
   },
   "scripts": {
     "postinstall": "jspm config registries.github.auth $GITHUB_API_KEY && jspm install",
+    "start": "npm-run-all --parallel grunt js:chokidar",
+    "serve": "npm-run-all --parallel grunt:serve js:chokidar",
+    "grunt": "grunt",
+    "grunt:serve": "grunt serve",
+    "js:chokidar": "cd ./source/scripts && chokidar-socket-emitter",
     "lint": "standard | snazzy && stylelint \"**/*.{css,scss,sass}\" \"!{jspm_packages,build,temp}/**\"",
     "test": "npm run lint && node tests/utils/jest.js",
     "test:watch": "node tests/utils/jest.js --watch",

source/templates/_layouts/_base.nj

@@ -93,7 +93,19 @@
   <!-- Scripts -->
   <!-- ======= -->
 
-  <script src='/{{ path.scripts }}/{{ 'main.min.js' if env.build else 'main.js' }}'></script>
+  {% if env.build %}
+  <script src='/{{ path.scripts }}/main.min.js'></script>
+  {% else %}
+  <script src="/jspm_packages/system.js"></script>
+  <script src="/jspm.config.js"></script>
+
+  <script>
+    SystemJS.import('systemjs-hot-reloader').then((connect) => {
+      connect()
+      SystemJS.import('main.js')
+    })
+  </script>
+  {% endif %}
 
   {{ GoogleAnalytics(siteId = site.googleAnalyticsId) if site.googleAnalyticsId }}
   {{ YandexMetrika(counterId = site.yandexMetrikaId) if site.yandexMetrikaId }}

tasks/other.coffee

@@ -74,9 +74,16 @@ module.exports = () ->
         watchEvents: ['add', 'change']
         server:
           baseDir: '<%= path.build.root %>'
+          routes:
+            '/jspm_packages': 'jspm_packages'
+            '/jspm.config.js': 'jspm.config.js'
+            # @note this route should match JSPM `baseURL`
+            #       see https://github.com/LotusTM/Kotsu/issues/230
+            #           https://github.com/alexisvincent/systemjs-hot-reloader/issues/141
+            '/source/scripts': 'source/scripts'
       bsFiles:
         src: [
-          '<%= path.build.root %>/**/*.js'
+          # @note For JS files changes watches `chockidar-socket-emitter` and emits directly to `systemjs-hot-reloader`
           '<%= path.build.root %>/**/*.css'
           '<%= path.build.root %>/**/*.html'
           '<%= path.build.root %>/**/*.{png,jpg,jpeg,gif,svg,ico}'

tasks/scripts.coffee

@@ -42,16 +42,4 @@ module.exports = () ->
             '{,**/}*.*'
             '!{,**/}*.min.js'
           ]
-        ]
-
-  ###
-  Watch
-  https://github.com/gruntjs/grunt-contrib-watch
-  Watches scss, js etc for changes and compiles them
-  ###
-
-  @config.merge
-    watch:
-      scripts:
-        files: ['<%= path.source.scripts %>/{,**/}*.js']
-        tasks: ['shell:jspm_build']
+        ]