0.9.0 release

.eslintrc.js

@@ -55,7 +55,7 @@ module.exports = {
 		'comma-style': 1,
 		'computed-property-spacing': 1,
 		'eol-last': 1,
-		'indent': [1, 'tab', {'SwitchCase': 1}],
+		'indent': [1, 'tab', {'SwitchCase': 1, 'CallExpression': {'arguments': 2}, 'MemberExpression': 'off', "flatTernaryExpressions": true}],
 		'jsx-quotes': 1,
 		'linebreak-style': 1,
 		'new-cap': [2, {'newIsCap': true, 'capIsNew': false}],
@@ -74,6 +74,9 @@ module.exports = {
 		'space-unary-ops': [1, {'words': true, 'nonwords': false}],
 		'spaced-comment': [1, 'always', {'markers': ['*']}],
 		'arrow-spacing': 1,
-		'require-yield': 0
+		'require-yield': 0,
+		'no-var': 1,
+		'prefer-const': 1,
+		'prefer-arrow-callback': [1, {'allowNamedFunctions': true}]
 	}
 };

CHANGELOG.md

@@ -1,3 +1,40 @@
+## 0.9.0 (August 21, 2017)
+
+Dependencies updated to latestly release, including support for Webpack 3.x.
+Codebased updated for ES6 syntax and the minimum version is NodeJS is now 6.4.0.
+
+### create
+
+* Template updated for Enact 1.7.0 and React 15.6.1
+
+### pack
+
+* Upgraded to Webpack 3 and associated loaders/config layout.
+* Removed `url-loader` usage in favour of strictly `file-loader` only.
+* Switched from implicit string loader names to explicit relative loader filepath resolving.
+* Prevent removal of outdated CSS properties by `autoprefixer` in `postcss`
+* Prerenders moonstone font-face declarations into HTML head to preload fonts.
+* Output error messages after build and have watcher mode disable bailing to ensure webpack doesn't exit during watching.
+* Properly bail on error and properly avoid bailing on `--watch` flag.
+* Disable module traces when errors occur.
+* Show any warnings sucessful `pack` executions (not just when there are errors).
+* Uses the `react-dev-utils` eslint formatter for displaying eslint warnings and errors.
+* Limited `autoprefixer` flexbox prefixing to final and IE versions of flexbox implementation.
+* Added support for `postcss-flexbugs-fixes` to automatically fix known platform-specific flexbox issues with workarounds.
+* Disabled webpack performance output.
+
+### serve
+
+* Support greater dev server functionality and UI from `react-dev-utils`.
+* Integrated support for `react-error-overlay`.
+* Fixed module access failure when rebuilding after editing LESS/CSS.
+
+### test
+
+* Activity timeout extended for larger testbases to 60 seconds.
+* Removed unneeded `extract-text-webpack-plugin` usage.
+* Carried over `url-loader` and `postcss` changes from `pack` configuration.
+
 ## 0.8.2 (May 31, 2017)
 
 Updated `ilib-webpack-plugin` dependency to correctly support moonstone internal localization and associated fixes.
@@ -51,7 +88,6 @@ With the exception of webpack2-related packages, all dependencies have been upda
 
 * Updated use react-test-renderer with Enzyme with alias fallback to avoid any compatibility issues.
 
-
 ## 0.7.0 (March 31, 2017)
 
 Added support for a link command (`enact link`) as a shorthand to link in Enact library dependencies.

README.md

@@ -64,7 +64,7 @@ The enact-dev tool will check the project's `package.json` looking for an option
 * `isomorphic` _[boolean|string]_ - If `true`, it indicates the default entrypoint is isomorphic-compatible (and can be built via the `--isomorphic` enact-dev flag). If the value is a string, then it will use that value as a filepath to a custom isomorphic-compatible entrypoint.
 * `title` _[string]_ - Title text that should be put within the HTML's `<title></title>` tags. Note: if this is a webOS-project, the title by default will be auto-detected from the appinfo.json content.
 * `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enyojs/less-plugin-resolution-independence).
-* `node` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.github.io/docs/configuration.html#node).
+* `node` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/).
 * `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
 
 For example:
@@ -99,7 +99,7 @@ You would need to install an ESLint plugin for your editor first.
 Then, you will need to install some packages *globally*:
 
 ```sh
-npm install -g eslint eslint-plugin-react eslint-plugin-babel babel-eslint enyojs/eslint-plugin-enact enyojs/eslint-config-enact
+npm install -g eslint eslint-plugin-react eslint-plugin-babel babel-eslint eslint-plugin-enact eslint-config-enact
 ```
 
 We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.

bin/enact.js

@@ -2,13 +2,24 @@
 
 'use strict';
 
+// Verify the correct version of Node is in use.
+const minimum = [6, 4, 0];
+const active = process.versions.node.split('.').map(val => parseInt(val));
+if(active[0] < minimum[0] || (active[0] === minimum[0] && active[1] < minimum[1])) {
+	const chalk = require('chalk');
+	console.log(chalk.red('You are running Node ' + active.join('.') + '.\nenact-dev requires Node '
+			+ minimum.join('.') + ' or higher. \n' + chalk.bold('Please update your version of Node.')));
+	process.exit(1);
+}
+
+// Handle tasks/arguments
 if (process.argv.indexOf('-v') >= 0 || process.argv.indexOf('--version') >= 0) {
-	var pkg = require('../package.json');
+	const pkg = require('../package.json');
 	console.log(pkg.name);
 	console.log('version: ' + pkg.version);
 	console.log();
 } else {
-	var command = process.argv[2];
+	const command = process.argv[2];
 
 	switch (command) {
 		case 'create':
@@ -19,12 +30,14 @@ if (process.argv.indexOf('-v') >= 0 || process.argv.indexOf('--version') >= 0) {
 		case 'clean':
 		case 'test':
 		case 'lint':
-		case 'license':
-			var task = require('../global-cli/' + command);
+		case 'license':{
+			const task = require('../global-cli/' + command);
 			task(process.argv.slice(3));
 			break;
-		default:
-			var create = require('../global-cli/create');
+		}
+		default: {
+			const create = require('../global-cli/create');
 			create(['--help']);
+		}
 	}
 }

config/.babelrc

@@ -1,6 +1,6 @@
 {
-	"presets": ["es2015", "stage-0", "react"],
-	"plugins": ["dev-expression", "dynamic-import-webpack"],
+	"presets": [["es2015", {"modules": false}], "stage-0", "react"],
+	"plugins": ["dev-expression", "syntax-dynamic-import"],
 	"env": {
 		"production": {
 			"plugins": ["transform-react-inline-elements","transform-react-constant-elements"]

config/karma.conf.js

@@ -1,26 +1,16 @@
-/* eslint no-var: "off" */
+const path = require('path');
+const {DefinePlugin} = require('webpack');
+const autoprefixer = require('autoprefixer');
+const flexbugfixes = require('postcss-flexbugs-fixes');
+const LessPluginRi = require('resolution-independence');
+const GracefulFsPlugin = require('graceful-fs-webpack-plugin');
+const ILibPlugin = require('ilib-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const findProjectRoot = require('../global-cli/modifiers/util/find-project-root');
 
-var path = require('path');
-var fs = require('fs');
-var webpack = require('webpack');
-var findCacheDir = require('find-cache-dir');
-var autoprefixer = require('autoprefixer');
-var LessPluginRi = require('resolution-independence');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var GracefulFsPlugin = require('graceful-fs-webpack-plugin');
-var ILibPlugin = require('ilib-webpack-plugin');
-var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-
-function readJSON(file) {
-	try {
-		return JSON.parse(fs.readFileSync(file, {encoding:'utf8'}));
-	} catch(e) {
-		return null;
-	}
-}
-
-var pkg = readJSON('package.json') || {};
-var enact = pkg.enact || {};
+const appPath = findProjectRoot().path;
+const pkg = require(path.resolve(appPath, './package.json'));
+const enact = pkg.enact || {};
 
 module.exports = function(karma) {
 	karma.set({
@@ -50,18 +40,19 @@ module.exports = function(karma) {
 		webpack: {
 			// Use essentially the same webpack config as from the development build setup.
 			// We do not include an entry value as Karma will control that.
-			devtool: null,
+			devtool: false,
 			output: {
 				path: './dist',
 				filename: '[name].js'
 			},
 			resolve: {
-				extensions: ['', '.js', '.jsx', '.es6'],
-				root: [
+				extensions: ['.js', '.jsx', '.json'],
+				modules: [
+					path.resolve(appPath, './node_modules'),
+					'node_modules',
 					// @remove-on-eject-begin
-					path.join(__dirname, '..', 'node_modules'),
+					path.resolve(__dirname, '../node_modules')
 					// @remove-on-eject-end
-					path.resolve('./node_modules')
 				],
 				alias: {
 					'ilib':'@enact/i18n/ilib/lib',
@@ -70,7 +61,10 @@ module.exports = function(karma) {
 			},
 			// @remove-on-eject-begin
 			resolveLoader: {
-				root: path.resolve(__dirname, '../node_modules')
+				modules: [
+					path.resolve(__dirname, '../node_modules'),
+					path.resolve(appPath, './node_modules')
+				]
 			},
 			// @remove-on-eject-end
 			externals: {
@@ -86,50 +80,57 @@ module.exports = function(karma) {
 				tls: 'empty'
 			}),
 			module: {
-				loaders: [
-					{test: /\.(js|jsx|es6)$/, loader: 'babel', exclude: /node_modules.(?!@enact)/,
-						query: {
+				rules: [
+					{
+						exclude: /\.(html|js|jsx|css|less|ejs|json|txt)$/,
+						loader: require.resolve('file-loader'),
+						options: {name: '[path][name].[ext]'}
+					},
+					{
+						test: /\.(html|txt)$/,
+						loader: require.resolve('raw-loader')
+					},
+					{
+						test: /\.(js|jsx)$/,
+						exclude: /node_modules.(?!@enact)/,
+						loader: require.resolve('babel-loader'),
+						options: {
 							// @remove-on-eject-begin
 							babelrc: false,
 							extends: path.join(__dirname, '.babelrc'),
 							// @remove-on-eject-end
-							cacheDirectory: findCacheDir({
-								name: 'enact-dev'
-							})
+							cacheDirectory: true
 						}
 					},
-					{test: /\.(c|le)ss$/, loader: ExtractTextPlugin.extract('style',
-							'css?-autoprefixer&modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!less?sourceMap')
-					},
-					{test: /\.json$/, loader: 'json'},
-					{test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, loader: 'file',
-						query: {
-							name: '[path][name].[ext]'
-						}
-					},
-					{test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, loader: 'url',
-						query: {
-							limit: 10000,
-							name: '[path][name].[ext]'
-						}
+					{
+						test: /\.(c|le)ss$/,
+						use: [
+							require.resolve('style-loader'),
+							{
+								loader: require.resolve('css-loader'),
+								options: {importLoaders: 2, modules: true, localIdentName: '[name]__[local]___[hash:base64:5]'}
+							},
+							{
+								loader: require.resolve('postcss-loader'),
+								options: {
+									ident: 'postcss',
+									plugins: () => [autoprefixer({
+										browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'], flexbox: 'no-2009', remove:false
+									}), flexbugfixes]
+								}
+							},
+							{
+								loader: require.resolve('less-loader'),
+								options: {plugins: ((enact.ri) ? [new LessPluginRi(enact.ri)] : [])}
+							}
+						]
 					}
 				],
 				noParse: /node_modules\/json-schema\/lib\/validate\.js/
 			},
 			devServer: {host: '0.0.0.0', port: 8080},
-			postcss: function() {
-				return [autoprefixer({browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']})];
-			},
-			lessLoader: {
-				lessPlugins: ((enact.ri) ? [new LessPluginRi(enact.ri)] : [])
-			},
 			plugins: [
-				new webpack.DefinePlugin({
-					'process.env': {
-						'NODE_ENV': '"development"'
-					}
-				}),
-				new ExtractTextPlugin('[name].css'),
+				new DefinePlugin({'process.env': {'NODE_ENV': '"development"'}}),
 				new CaseSensitivePathsPlugin(),
 				new GracefulFsPlugin(),
 				new ILibPlugin({create: false})
@@ -151,7 +152,8 @@ module.exports = function(karma) {
 				timings: false,
 				version: false,
 				children: false,
-				warnings: false
+				warnings: false,
+				moduleTrace: false
 			}
 		},
 
@@ -171,6 +173,7 @@ module.exports = function(karma) {
 		port: 9876,
 		colors: true,
 		logLevel: karma.LOG_INFO,
+		browserNoActivityTimeout : 60000,
 		autoWatch: true,
 		browsers: ['Chrome'],
 		singleRun: false

config/proptype-checker.js

@@ -10,8 +10,8 @@ var restoreErrorAndWarnings = spy.restoreErrorAndWarnings;
 beforeEach(watchErrorAndWarnings);
 
 afterEach(function(done) {
-	const actual = filterErrorAndWarnings(/(Invalid prop|Failed prop type|Unknown prop)/);
-	const expected = 0;
+	var actual = filterErrorAndWarnings(/(Invalid prop|Failed prop type|Unknown prop)/);
+	var expected = 0;
 	restoreErrorAndWarnings();
 	if (actual.length > expected) {
 		console.error('PropType Failure:', this.currentTest.parent.title, 'at "', this.currentTest.title, '"');