Merge pull request #202 from opencomponents/webpack-4.6.0-187.3.0

[DX-495] Update to webpack 4 (from 3.11.0 to 4.8.3)

Author: nickbalestra

acceptance-setup/__tests__/__snapshots__/acceptance.js.snap

@@ -3,14 +3,14 @@
 exports[`valid component 1`] = `
 Object {
   "bundle": Object {
-    "hashKey": "940a68df39eb3b2449c6256781f660c857d3890b",
+    "hashKey": "7d47a0c151221c3f6a285fe966a4ca07cd6446fe",
   },
   "template": Object {
-    "hashKey": "7ac03b60828e1be5987fc925d4a0bd1d05dc09d5",
+    "hashKey": "31e3e6ab4d9dc8a8406a22dc7ae640256ecc3185",
     "src": "template.js",
     "type": "oc-template-react",
   },
 }
 `;
 
-exports[`valid component 2`] = `"var oc=oc||{};oc.components=oc.components||{};oc.components['7ac03b60828e1be5987fc925d4a0bd1d05dc09d5']=function(model){ var modelHTML = model.__html ? model.__html : ''; var staticPath = model.reactComponent.props._staticPath; var props = JSON.stringify(model.reactComponent.props); return '<div id=\\"oc-reactRoot-react-component\\" class=\\"oc-reactRoot-react-component\\">' + modelHTML + '</div>' + '' + '<script>' + 'window.oc = window.oc || {};' + 'oc.cmd = oc.cmd || [];' + 'oc.cmd.push(function(oc){' + '' + 'oc.requireSeries([{\\"global\\":\\"PropTypes\\",\\"url\\":\\"https://unpkg.com/prop-types@15.6.1/prop-types.min.js\\",\\"name\\":\\"prop-types\\"},{\\"global\\":\\"React\\",\\"url\\":\\"https://unpkg.com/react@16.3.2/umd/react.production.min.js\\",\\"name\\":\\"react\\"},{\\"global\\":\\"ReactDOM\\",\\"url\\":\\"https://unpkg.com/react-dom@16.3.2/umd/react-dom.production.min.js\\",\\"name\\":\\"react-dom\\"}], function(){' + 'oc.require(' + '[\\"oc\\", \\"reactComponents\\", \\"940a68df39eb3b2449c6256781f660c857d3890b\\"],' + '\\"' + staticPath + 'react-component.js\\",' + 'function(ReactComponent){' + 'var targetNode = document.getElementById(\\"oc-reactRoot-react-component\\");' + 'targetNode.setAttribute(\\"id\\",\\"\\");' + 'ReactDOM.render(React.createElement(ReactComponent,' + props + '),targetNode);' + '}' + ');' + '});' + '});' + '</script>' }"`;
+exports[`valid component 2`] = `"var oc=oc||{};oc.components=oc.components||{};oc.components['31e3e6ab4d9dc8a8406a22dc7ae640256ecc3185']=function(model){ var modelHTML = model.__html ? model.__html : ''; var staticPath = model.reactComponent.props._staticPath; var props = JSON.stringify(model.reactComponent.props); return '<div id=\\"oc-reactRoot-react-component\\" class=\\"oc-reactRoot-react-component\\">' + modelHTML + '</div>' + '' + '<script>' + 'window.oc = window.oc || {};' + 'oc.cmd = oc.cmd || [];' + 'oc.cmd.push(function(oc){' + '' + 'oc.requireSeries([{\\"global\\":\\"PropTypes\\",\\"url\\":\\"https://unpkg.com/prop-types@15.6.1/prop-types.min.js\\",\\"name\\":\\"prop-types\\"},{\\"global\\":\\"React\\",\\"url\\":\\"https://unpkg.com/react@16.3.2/umd/react.production.min.js\\",\\"name\\":\\"react\\"},{\\"global\\":\\"ReactDOM\\",\\"url\\":\\"https://unpkg.com/react-dom@16.3.2/umd/react-dom.production.min.js\\",\\"name\\":\\"react-dom\\"}], function(){' + 'oc.require(' + '[\\"oc\\", \\"reactComponents\\", \\"7d47a0c151221c3f6a285fe966a4ca07cd6446fe\\"],' + '\\"' + staticPath + 'react-component.js\\",' + 'function(ReactComponent){' + 'var targetNode = document.getElementById(\\"oc-reactRoot-react-component\\");' + 'targetNode.setAttribute(\\"id\\",\\"\\");' + 'ReactDOM.render(React.createElement(ReactComponent,' + props + '),targetNode);' + '}' + ');' + '});' + '});' + '</script>' }"`;

packages/oc-template-react-compiler/__tests__/__snapshots__/compile.js.snap

@@ -1,4 +1,4 @@
-const createExcludeRegex = require("../lib/to-abstract-base-template-utils/createExcludeRegex");
+const createExcludeRegex = require("../lib/to-abstract-base-template-utils/oc-webpack/lib/configurator/createExcludeRegex");
 
 test("should create a regex that match against any node module set aside given ones", () => {
   const regex = createExcludeRegex([

packages/oc-template-react-compiler/__tests__/__snapshots__/compileView.js.snap

@@ -1,7 +1,6 @@
 "use strict";
 
 const async = require("async");
-const compiler = require("oc-webpack").compiler;
 const fs = require("fs-extra");
 const hashBuilder = require("oc-hash-builder");
 const MemoryFS = require("memory-fs");
@@ -11,7 +10,11 @@ const path = require("path");
 const reactComponentWrapper = require("oc-react-component-wrapper");
 const strings = require("oc-templates-messages");
 
-const webpackConfigurator = require("./to-abstract-base-template-utils/webpackConfigurator");
+const {
+  compiler,
+  configurator: webpackConfigurator
+} = require("./to-abstract-base-template-utils/oc-webpack");
+
 const fontFamilyUnicodeParser = require("./to-abstract-base-template-utils/font-family-unicode-parser");
 const reactOCProviderTemplate = require("./reactOCProviderTemplate");
 const viewTemplate = require("./viewTemplate");

packages/oc-template-react-compiler/__tests__/createExcludeRegex.test.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const compiler = require("./lib/compiler");
+const configurator = require("./lib/configurator");
+
+module.exports = {
+  compiler,
+  configurator
+};

packages/oc-template-react-compiler/lib/compileView.js

@@ -0,0 +1,42 @@
+"use strict";
+
+const MemoryFS = require("memory-fs");
+const webpack = require("webpack");
+
+const memoryFs = new MemoryFS();
+
+module.exports = function compiler(config, callback) {
+  const logger = config.logger;
+  delete config.logger;
+
+  const compiler = webpack(config);
+  compiler.outputFileSystem = memoryFs;
+
+  compiler.run((error, stats) => {
+    let softError;
+    let warning;
+
+    // handleFatalError
+    if (error) {
+      return callback(error);
+    }
+
+    const info = stats.toJson();
+    // handleSoftErrors
+    if (stats.hasErrors()) {
+      softError = info.errors.toString();
+      return callback(softError);
+    }
+    // handleWarnings
+    if (stats.hasWarnings()) {
+      warning = info.warnings.toString();
+    }
+
+    const log = stats.toString(config.stats || "errors-only");
+
+    if (log) {
+      logger.log(log);
+    }
+    callback(null, memoryFs.data);
+  });
+};

packages/oc-template-react-compiler/lib/to-abstract-base-template-utils/oc-webpack/index.js

@@ -4,11 +4,11 @@ const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const MinifyPlugin = require("babel-minify-webpack-plugin");
 const externalDependenciesHandlers = require("oc-external-dependencies-handler");
 const path = require("path");
-const webpack = require("oc-webpack").webpack;
+const webpack = require("webpack");
 
 const createExcludeRegex = require("./createExcludeRegex");
 
-module.exports = function webpackConfigGenerator(options) {
+module.exports = options => {
   const buildPath = options.buildPath || "/build";
   const production = options.production;
   const buildIncludes = options.buildIncludes.concat(
@@ -67,6 +67,13 @@ module.exports = function webpackConfigGenerator(options) {
   const cacheDirectory = !production;
 
   return {
+    mode: production ? "production" : "development",
+    optimization: {
+      // https://webpack.js.org/configuration/optimization/
+      // Override production mode optimization for minification
+      // As it currently breakes the build, still rely on babel-minify-webpack-plugin instead
+      minimize: false
+    },
     entry: options.viewPath,
     output: {
       path: buildPath,

packages/oc-template-react-compiler/lib/to-abstract-base-template-utils/oc-webpack/lib/compiler/index.js

@@ -24,14 +24,14 @@
   "license": "MIT",
   "dependencies": {
     "async": "^2.4.1",
-    "autoprefixer": "8.4.1",
+    "autoprefixer": "^8.5.0",
     "babel-loader": "^7.1.2",
     "babel-minify-webpack-plugin": "0.3.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.5",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fs-extra": "6.0.1",
     "infinite-loop-loader": "^1.0.3",
     "lodash": "^4.17.4",
@@ -47,14 +47,13 @@
     "oc-template-react": "2.0.9",
     "oc-templates-messages": "1.0.2",
     "oc-view-wrapper": "1.0.3",
-    "oc-webpack": "2.3.2",
     "postcss-extend": "^1.0.5",
     "postcss-icss-values": "^2.0.1",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.9",
     "prop-types": "15.6.1",
     "react": "16.3.2",
-    "webpack": "^3.5.5"
+    "webpack": "^4.8.3"
   },
   "files": [
     "index.js",