Merge branch 'v0.7.0' into develop

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Topcoder React Utils Changelog
 
+### v0.7.0
+Fixes various sins left in the previous version.
+
 ### v0.6.0
 - A better way to build the library: both dev and prod builds are created; and
   the proper version is selected depending on `NODE_ENV` value at the buildtime

__tests__/server/renderer.jsx

@@ -36,6 +36,7 @@ const TEST_HTTP_REQUEST = {
 const TEST_WEBPACK_CONFIG = {
   context: TEST_CONTEXT,
   output: {
+    path: '/test/path',
     publicPath: '/test/public/path/',
   },
 };
@@ -76,6 +77,19 @@ async function coreTest(webpackConfig, options) {
   try {
     let render = '';
     await renderer(_.clone(TEST_HTTP_REQUEST), {
+      locals: {
+        webpackStats: {
+          toJson: () => ({
+            assetsByChunkName: {
+              'test-chunk-a': 'test-chunk-a-1511941200000.css',
+              'test-chunk-b': [
+                'test-chunk-b-1511941200000.js',
+                'test-chunk-b-1511941200000.css',
+              ],
+            },
+          }),
+        },
+      },
       send: (x) => { render += x; },
       status: (x) => { render += `HTTP STATUS: ${x}\n`; },
     });

bin/topcoder-lib-setup

@@ -16,6 +16,10 @@ const OPTIONS = [{
   alias: 'h',
   description: 'Shows usage instructions',
   type: Boolean,
+}, {
+  name: 'just-fix-deps',
+  description: 'Skips installation of libraries, just fixes dependencies',
+  type: Boolean,
 }, {
   name: 'libraries',
   defaultOption: true,
@@ -46,7 +50,7 @@ const HELP = [{
  *  into NPM's install command.
  */
 function generateTargetPackage(entry) {
-  if (entry[1].match(/^(git\+)?https?:\/\//)) return entry[1];
+  if (entry[1].match(/^(git\+)?(file|https)?:\/\//)) return entry[1];
   if (entry[1].match(/^[\^~]/)) return `${entry[0]}@${entry[1].slice(1)}`;
   return `${entry[0]}@${entry[1]}`;
 }
@@ -137,7 +141,7 @@ if (options.help) showHelp();
 else {
   const hostData = getHostPackageJson();
   options.libraries.forEach((library) => {
-    install(library);
+    if (!options['just-fix-deps']) install(library);
     const libData = getPackageJson(library);
     adoptDevDependencies(libData, hostData);
     updateProdDependencies(libData, hostData);

config/eslint/default.json

@@ -9,6 +9,7 @@
       "components": [],
       "specialLink": ["hrefLeft", "hrefRight"],
       "aspects": ["invalidHref", "noHref", "preferButton"]
-    }]
+    }],
+    "react/jsx-one-expression-per-line": false
   }
 }

config/webpack/app-base.js

@@ -6,11 +6,12 @@
 
 const _ = require('lodash');
 const autoprefixer = require('autoprefixer');
-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const forge = require('node-forge');
 const fs = require('fs');
 const moment = require('moment');
 const path = require('path');
+const { StatsWriterPlugin } = require('webpack-stats-plugin');
 const webpack = require('webpack');
 
 /**
@@ -97,27 +98,23 @@ module.exports = function configFactory(ops) {
       fs: 'empty',
     },
     mode: o.mode,
-    /* TODO: We have to disable these optimizations, otherwise they will break
-     * our code-splitting functionality. Once the code-splitting setup is fixed,
-     * these optimizations can be enabled again. */
-    optimization: {
-      removeEmptyChunks: false,
-      splitChunks: false,
-    },
     output: {
       chunkFilename: `[name]-${now.valueOf()}.js`,
       filename: `[name]-${now.valueOf()}.js`,
       path: path.resolve(__dirname, o.context, 'build'),
       publicPath: `${o.publicPath}/`,
     },
     plugins: [
-      new ExtractCssChunks({
+      new MiniCssExtractPlugin({
         chunkFilename: `[name]-${now.valueOf()}.css`,
         filename: `[name]-${now.valueOf()}.css`,
       }),
       new webpack.DefinePlugin({
         BUILD_INFO: JSON.stringify(buildInfo),
       }),
+      new StatsWriterPlugin({
+        filename: '__stats__.json',
+      }),
     ],
     resolve: {
       alias: {
@@ -165,7 +162,7 @@ module.exports = function configFactory(ops) {
         /* Loads SCSS stylesheets. */
         test: /\.scss/,
         use: [
-          ExtractCssChunks.loader, {
+          MiniCssExtractPlugin.loader, {
             loader: 'css-loader',
             options: {
               localIdentName: o.cssLocalIdent,
@@ -188,10 +185,16 @@ module.exports = function configFactory(ops) {
         * from dependencies, as we use SCSS inside our own code. */
         test: /\.css$/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           'css-loader',
         ],
       }],
     },
+    optimization: {
+      /* TODO: Dynamic chunk splitting does not play along with server-side
+       * rendering of split chunks. Probably there is a way to achieve that,
+       * but it is not a priority now. */
+      splitChunks: false,
+    },
   };
 };

config/webpack/app-production.js

@@ -40,7 +40,6 @@ module.exports = function configFactory(ops) {
           NODE_ENV: JSON.stringify('production'),
         },
       }),
-
       new OptimizeCssAssetsPlugin({
         cssProcessorOptions: {
           /* Due to the way our styles are organized, these dangerous

config/webpack/lib-base.js

@@ -5,7 +5,7 @@
  */
 
 const autoprefixer = require('autoprefixer');
-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const webpack = require('webpack');
 
@@ -37,14 +37,15 @@ module.exports = function configFactory(ops) {
     context: ops.context,
     entry: ops.entry,
     externals: [
-      'babel-runtime',
+      /babel-runtime/,
       'lodash',
       'moment',
       'prop-types',
       'react',
       'react-css-super-themr',
-      'react-dom',
+      /react-dom/,
       'react-helmet',
+      /react-hot-loader/,
       'react-redux',
       'react-router-dom',
       'redux',
@@ -77,7 +78,7 @@ module.exports = function configFactory(ops) {
           NODE_ENV: JSON.stringify(ops.babelEnv),
         },
       }),
-      new ExtractCssChunks({
+      new MiniCssExtractPlugin({
         filename: 'style.css',
       }),
     ],
@@ -117,7 +118,7 @@ module.exports = function configFactory(ops) {
         test: /\.scss/,
         exclude: /node_modules/,
         use: [
-          ExtractCssChunks.loader, {
+          MiniCssExtractPlugin.loader, {
             loader: 'css-loader',
             options: {
               importLoaders: 3,
@@ -143,7 +144,7 @@ module.exports = function configFactory(ops) {
         * from dependencies, as we use SCSS inside our own code. */
         test: /\.css$/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           'css-loader',
         ],
       }],

config/webpack/lib-production.js

@@ -2,7 +2,9 @@
  * Development Webpack configuration for ReactJS libraries.
  */
 
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const path = require('path');
+const webpackMerge = require('webpack-merge');
 const baseFactory = require('./lib-base');
 
 /**
@@ -21,11 +23,24 @@ const baseFactory = require('./lib-base');
  * @return {Object} Webpack configuration.
  */
 module.exports = function configFactory(ops) {
-  return baseFactory({
+  const baseConfig = baseFactory({
     ...ops,
     babelEnv: 'production',
     cssLocalIdent: '[hash:base64:6]',
     mode: 'production',
     outputPath: path.resolve(__dirname, ops.context, 'dist/prod'),
   });
+  return webpackMerge(baseConfig, {
+    plugins: [
+      new OptimizeCssAssetsPlugin({
+        cssProcessorOptions: {
+          /* Due to the way our styles are organized, these dangerous
+           * optimizations can break our styles, thus they are disabled. */
+          discardUnused: false,
+          reduceIdents: false,
+          zindex: false,
+        },
+      }),
+    ],
+  });
 };