From f67b5a8f80b4af10eb89b5739d4873d0bb2b10c0 Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Wed, 25 Sep 2019 10:31:00 -0700 Subject: [PATCH 1/8] Added chokidar to replace webpack watching so that the cache plugin can work. Otherwise, webpack doesnt see any file paths that should be watched if build isnt required --- package.json | 3 ++- src/index.js | 39 +++++++++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index e71cd6b..48c6d44 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/index.js b/src/index.js index 97ae434..3e4fe48 100755 --- a/src/index.js +++ b/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,14 @@ import mkdirp from 'mkdirp' * } * ``` */ + +var watcher + class ClientJS extends NxusModule { constructor () { super() this._outputPaths = {} + this._watchPaths = {} if(_.isEmpty(this.config.babel)) this.config.babel = _.omit(require('rc')('babel', {}, {}), '_', 'config', 'configs') @@ -124,6 +128,7 @@ class ClientJS extends NxusModule { resolve() }) }).then(::this._buildingWhenReady) + .then(::this._setupWatcher) if (this.config.buildOnly) { this.readyToBuild.then(::app.stop).then(::process.exit) } else { @@ -131,6 +136,28 @@ class ClientJS extends NxusModule { } } + _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, @@ -216,17 +243,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')) @@ -255,7 +281,7 @@ class ClientJS extends NxusModule { }) ], devtool: sourceMap ? sourceMap : false, - watch: this.config.watchify, + //watch: this.config.watchify, resolve: { modules: [ "node_modules", @@ -335,6 +361,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) @@ -348,7 +375,7 @@ class ClientJS extends NxusModule { var outputFile = this.config.assetFolder+output var outputFilename = path.basename(outputFile) - let promise = this._outputPaths[outputFile] + let promise //= this._outputPaths[outputFile] if (!promise) { promise = new Promise((resolve, reject) => { var options = this._webpackConfig(entry, outputPath, outputFilename) From 7137e40b47813e375e3487f4beac79592084763c Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Fri, 27 Sep 2019 16:43:44 -0700 Subject: [PATCH 2/8] Removed watching until we figure out how to track react dependencies and imports --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 3e4fe48..3174aea 100755 --- a/src/index.js +++ b/src/index.js @@ -128,7 +128,7 @@ class ClientJS extends NxusModule { resolve() }) }).then(::this._buildingWhenReady) - .then(::this._setupWatcher) + //.then(::this._setupWatcher) if (this.config.buildOnly) { this.readyToBuild.then(::app.stop).then(::process.exit) } else { @@ -281,7 +281,7 @@ class ClientJS extends NxusModule { }) ], devtool: sourceMap ? sourceMap : false, - //watch: this.config.watchify, + watch: this.config.watchify, resolve: { modules: [ "node_modules", @@ -375,7 +375,7 @@ class ClientJS extends NxusModule { var outputFile = this.config.assetFolder+output var outputFilename = path.basename(outputFile) - let promise //= this._outputPaths[outputFile] + let promise = this._outputPaths[outputFile] if (!promise) { promise = new Promise((resolve, reject) => { var options = this._webpackConfig(entry, outputPath, outputFilename) From f8f8529886b0e59388408e766e8e12bd2c9ce73a Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Fri, 27 Sep 2019 16:44:04 -0700 Subject: [PATCH 3/8] Changed to prerelease version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 48c6d44..5204bc2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nxus-clientjs", - "version": "4.2.0", + "version": "4.2.0-0", "description": "Client JS compilation for Nxus applications", "main": "lib/", "scripts": { From 1db4a56b38ad6770d42c325ee7905e9a95a210e3 Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Fri, 27 Sep 2019 16:44:25 -0700 Subject: [PATCH 4/8] Updated README API Docs --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8812d4f..d9e93eb 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,7 @@ -## 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. From 84e44c504ea6655bdb469d722df48951bf2e6b01 Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Thu, 10 Oct 2019 07:17:39 -0700 Subject: [PATCH 5/8] Updated to use template level name caching for improved dependency management/caching/minification --- src/index.js | 48 ++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index 3174aea..b4fb813 100755 --- a/src/index.js +++ b/src/index.js @@ -117,6 +117,8 @@ class ClientJS extends NxusModule { this._outputPaths = {} this._watchPaths = {} + this._scriptBundles = {} + if(_.isEmpty(this.config.babel)) this.config.babel = _.omit(require('rc')('babel', {}, {}), '_', 'config', 'configs') this.config.babel.cacheDirectory = true @@ -200,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 @@ -216,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 { @@ -226,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] + this._buildWhenReady(() => { + this.bundle(this._scriptBundles[templateName], templateName+'.js') + }) + } else { + this._scriptBundles[templateName].push(script) + } } /** @@ -268,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, @@ -292,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 From 056d442bd22ec5a4a97dc0a03dc52f1b5a63469d Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Thu, 10 Oct 2019 07:18:09 -0700 Subject: [PATCH 6/8] Bumped prerelease version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5204bc2..eb6395d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nxus-clientjs", - "version": "4.2.0-0", + "version": "4.2.0-1", "description": "Client JS compilation for Nxus applications", "main": "lib/", "scripts": { From 7d5a1e9dfc1b63626804e53d31a0a44977758e6d Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Thu, 10 Oct 2019 10:40:18 -0700 Subject: [PATCH 7/8] Fix issue with production deploys --- package.json | 2 +- src/index.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index eb6395d..7054616 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nxus-clientjs", - "version": "4.2.0-1", + "version": "4.2.0-2", "description": "Client JS compilation for Nxus applications", "main": "lib/", "scripts": { diff --git a/src/index.js b/src/index.js index b4fb813..5fd7315 100755 --- a/src/index.js +++ b/src/index.js @@ -132,7 +132,7 @@ class ClientJS extends NxusModule { }).then(::this._buildingWhenReady) //.then(::this._setupWatcher) if (this.config.buildOnly) { - this.readyToBuild.then(::app.stop).then(::process.exit) + //this.readyToBuild.then(::app.stop).then(::process.exit) } else { this._establishRoute(this.config.routePrefix, this.config.assetFolder) } @@ -240,8 +240,8 @@ class ClientJS extends NxusModule { this.log.trace('Adding script to template bundle', templateName, script) if(!this._scriptBundles[templateName]) { this._scriptBundles[templateName] = [script] - this._buildWhenReady(() => { - this.bundle(this._scriptBundles[templateName], templateName+'.js') + return this._buildWhenReady(() => { + return this.bundle(this._scriptBundles[templateName], templateName+'.js') }) } else { this._scriptBundles[templateName].push(script) @@ -432,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 } From 2c983e337147d86d27972c260857338ba4953065 Mon Sep 17 00:00:00 2001 From: Mike Reich Date: Fri, 11 Oct 2019 09:41:17 -0700 Subject: [PATCH 8/8] Updated to fix app stop on buildOnly, bump prerelease version --- package.json | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7054616..f2c8cc7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nxus-clientjs", - "version": "4.2.0-2", + "version": "4.2.0-3", "description": "Client JS compilation for Nxus applications", "main": "lib/", "scripts": { diff --git a/src/index.js b/src/index.js index 5fd7315..0c8739b 100755 --- a/src/index.js +++ b/src/index.js @@ -132,7 +132,7 @@ class ClientJS extends NxusModule { }).then(::this._buildingWhenReady) //.then(::this._setupWatcher) if (this.config.buildOnly) { - //this.readyToBuild.then(::app.stop).then(::process.exit) + this.readyToBuild.then(::app.stop).then(::process.exit) } else { this._establishRoute(this.config.routePrefix, this.config.assetFolder) }