Improved watching/caching

README.md

@@ -2,9 +2,7 @@
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-## ClientJS
-
-**Extends NxusModule**
+## watcher
 
 [![Build Status](https://travis-ci.org/nxus/clientjs.svg?branch=master)](https://travis-ci.org/nxus/clientjs)
 
@@ -90,7 +88,7 @@ in your application, and add Babel configuration options to the
           }
         }
 
-### includeScript
+## includeScript
 
 Injects the passed script entry into to the specified template after webpack/babel
 
@@ -99,7 +97,7 @@ Injects the passed script entry into to the specified template after webpack/bab
 -   `templateName` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the template to include the script into
 -   `script` **\[type]** the path of the script file to include
 
-### includeComponent
+## includeComponent
 
 **Parameters**
 
@@ -111,7 +109,7 @@ Injects the passed script entry into to the specified template after webpack/bab
 -   **deprecated**: (Deprecated, includeScript now handles this.) Injects the passed web component entry into to the specified template after bundling/babel
 
 
-### bundle
+## bundle
 
 Create a clientjs bundle that can be injected into a rendered page.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nxus-clientjs",
-  "version": "4.2.0",
+  "version": "4.2.0-3",
   "description": "Client JS compilation for Nxus applications",
   "main": "lib/",
   "scripts": {
@@ -33,6 +33,7 @@
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
     "bluebird": "^3.0.6",
+    "chokidar": "^3.1.1",
     "css-loader": "^3.2.0",
     "fs-extra": "^3.0.1",
     "imports-loader": "^0.7.1",
@@ -48,7 +49,7 @@
     "traverse": "^0.6.6",
     "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
     "underscore": "^1.8.3",
-    "webpack": "^4",
+    "webpack": "^4.40.0",
     "webpack-combine-loaders": "^2.0.4"
   },
   "devDependencies": {

src/index.js

@@ -10,7 +10,7 @@ import morph from 'morph'
 import traverse from 'traverse'
 import combineLoaders from 'webpack-combine-loaders'
 import OnlyIfChangedPlugin from 'only-if-changed-webpack-plugin'
-
+import chokidar from 'chokidar'
 import {router} from 'nxus-router'
 import {templater} from 'nxus-templater'
 
@@ -108,10 +108,16 @@ import mkdirp from 'mkdirp'
  *     }
  * ```
  */
+
+var watcher
+
 class ClientJS extends NxusModule {
   constructor () {
     super()
     this._outputPaths = {}
+    this._watchPaths = {}
+
+    this._scriptBundles = {}
 
     if(_.isEmpty(this.config.babel))
       this.config.babel = _.omit(require('rc')('babel', {}, {}), '_', 'config', 'configs')
@@ -124,13 +130,36 @@ class ClientJS extends NxusModule {
         resolve()
       })
     }).then(::this._buildingWhenReady)
+    //.then(::this._setupWatcher)
     if (this.config.buildOnly) {
       this.readyToBuild.then(::app.stop).then(::process.exit)
     } else {
       this._establishRoute(this.config.routePrefix, this.config.assetFolder)
     }
   }
 
+  _setupWatcher() {
+    if(!this.config.watchify) return
+    if(watcher && watcher.close) {
+      watcher.close()
+    }
+    let watchPaths = _.keys(this._watchPaths)
+    var watchOptions = {
+      //ignored: ignore ? ignore.concat([new RegExp("^(.*node_modules/(?!(@nxus|nxus-)).*)")]) : new RegExp("^(.*node_modules/(?!(@nxus|nxus-)).*)"),
+      ignoreInitial: true,
+      persistent: true
+    }
+
+    watcher = chokidar.watch(watchPaths, watchOptions)
+
+    watcher.on('all', (event, path) => {
+      this.log.trace('Changed detected, rebuilding', path)
+
+      let output = this._watchPaths[path]
+      this.bundle(path, output)
+    })
+  }
+
   _defaultConfig() {
     return {
       watchify: true,
@@ -173,6 +202,7 @@ class ClientJS extends NxusModule {
    * @param  {[type]} script       the path of the script file to include
    */
   includeScript(templateName, script) {
+    if(!templateName || !templateName.length) return this.log.error('No template name specified', script)
     let scriptName = path.basename(script)
     let outputPath = scriptName
 
@@ -189,7 +219,11 @@ class ClientJS extends NxusModule {
       ]
     }
 
-    let scripts = [path.join(this.config.routePrefix,outputPath)]
+    let scripts = [
+      path.join(this.config.routePrefix,templateName+'.js'),
+      path.join(this.config.routePrefix,'main.'+templateName+'.js'),
+      path.join(this.config.routePrefix,'vendors.'+templateName+'.js')
+    ]
 
     templater.on('renderContext.'+templateName, () => {
       return {
@@ -199,9 +233,19 @@ class ClientJS extends NxusModule {
       }
     })
 
-    this._buildWhenReady(() => {
-      return this.bundle(script, outputPath)
-    })
+    return this._bundleByTemplate(templateName, script)
+  }
+
+  _bundleByTemplate(templateName, script) {
+    this.log.trace('Adding script to template bundle', templateName, script)
+    if(!this._scriptBundles[templateName]) {
+      this._scriptBundles[templateName] = [script]
+      return this._buildWhenReady(() => {
+        return this.bundle(this._scriptBundles[templateName], templateName+'.js')
+      })
+    } else {
+      this._scriptBundles[templateName].push(script)
+    }
   }
 
   /**
@@ -216,17 +260,16 @@ class ClientJS extends NxusModule {
 
   _establishRoute(route, path) {
     fs.ensureDirSync(path) //create directory if it doesn't exist
-    if (!(path in this._outputPaths)) {
+    if (!_.contains(_.keys(this._outputPaths), path)) {
       router.staticRoute(route, path)
     }
   }
 
   _webpackConfig(entry, outputPath, outputFilename) {
-
     var opts = {
       rootDir: process.cwd(),
       devBuild: process.env.NODE_ENV !== 'production',
-      outputFilename
+      output: path.join(outputPath, outputFilename)
     };
 
     mkdirp(path.join(opts.rootDir, '.tmp/cache'))
@@ -242,17 +285,14 @@ class ClientJS extends NxusModule {
     }
 
     var options = {
-      entry: path.resolve(entry),
+      entry: _.isArray(entry) ? entry.map(e => path.resolve(e)) : path.resolve(entry),
       output: {
-        filename: outputFilename,
+        filename: outputFilename,//'[contenthash].'+outputFilename,
         path: outputPath
       },
       mode: app.config.NODE_ENV,
       plugins: [
-        new OnlyIfChangedPlugin({
-          cacheDirectory: path.join(opts.rootDir, '.tmp/cache'),
-          cacheIdentifier: opts, // all variable opts/environment should be used in cache key
-        })
+
       ],
       devtool: sourceMap ? sourceMap : false,
       watch: this.config.watchify,
@@ -266,6 +306,20 @@ class ClientJS extends NxusModule {
           "bower.json"
         ]
       },
+      optimization: {
+        namedChunks: true,
+        runtimeChunk: 'single',
+        moduleIds: 'hashed',
+        splitChunks: {
+          cacheGroups: {
+            vendor: {
+              test: /[\\/]node_modules[\\/]/,
+              name: 'vendors',
+              chunks: 'all',
+            },
+          },
+        },
+      },
       module: {
         rules: [
           // web components that need babel
@@ -335,6 +389,7 @@ class ClientJS extends NxusModule {
    * @param  {[type]} output the output path to use in the browser to access the bundled source
    */
   bundle(entry, output) {
+    this._watchPaths[entry] = output
     this.log.debug('Bundling', entry, "to", output)
 
     let outputDir = path.dirname(output)
@@ -377,9 +432,8 @@ class ClientJS extends NxusModule {
           resolve()
         })
       })
-      this._establishRoute(outputRoute, outputPath)
+      if (!this.config.buildOnly) this._establishRoute(outputRoute, outputPath)
       this._outputPaths[outputFile] = promise
-
     }
     return promise
   }