Merge branch 'master' into postcss-8

.github/workflows/nodejs.yml

@@ -7,12 +7,12 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest]
-        node-version: [10.x, 12.x]
+        node-version: [10.x, 12.x, 14.x]
         # TODO : add macos and windows as targets
         # TODO : add Yarn PNP as failable build
         exclude:
         - os: macos-latest
-          node-version: 12.x
+          node-version: 14.x
 
     runs-on: ${{ matrix.os }}
 

packages/babel-preset-swissquote/configurator-webpack.js

@@ -0,0 +1,24 @@
+const babelConfigurator = require("./configurator");
+
+/**
+ * Cache can be disabled for experimentation and when running Crafty's tests
+ * @param {*} crafty 
+ */
+function hasCache(crafty) {
+  return crafty.getEnvironment() === "production" &&
+    !process.argv.some(arg => arg === "--no-cache") &&
+    !process.env.TESTING_CRAFTY
+}
+
+module.exports = function(crafty, bundle) {
+  const options = babelConfigurator(crafty, bundle, {
+    deduplicateHelpers: true,
+    useESModules: true
+  });
+
+  if (hasCache(crafty)) {
+    options.cacheDirectory = true;
+  }
+
+  return options;
+};

packages/babel-preset-swissquote/package.json

@@ -11,6 +11,7 @@
     "configurator.js",
     "configurator-gulp.js",
     "configurator-rollup.js",
+    "configurator-webpack.js",
     "get-runtime.js"
   ],
   "dependencies": {

packages/crafty-preset-babel/package.json

@@ -22,7 +22,7 @@
     "gulp-eslint7": "0.3.0",
     "gulp-newer": "1.4.0",
     "gulp-sourcemaps": "2.6.5",
-    "gulp-terser": "1.4.0"
+    "gulp-terser": "1.4.1"
   },
   "engines": {
     "node": ">=10.0.0"

packages/crafty-preset-babel/src/index.js

@@ -65,20 +65,8 @@ module.exports = {
     chain.resolve.modules.add(MODULES);
     chain.resolveLoader.modules.add(MODULES);
 
-    const babelConfigurator = require("@swissquote/babel-preset-swissquote/configurator");
-    const options = babelConfigurator(crafty, bundle, {
-      deduplicateHelpers: true,
-      useESModules: true
-    });
-
-    // Cache can be disabled for experimentation and when running Crafty's tests
-    if (
-      crafty.getEnvironment() === "production" &&
-      !process.argv.some(arg => arg === "--no-cache") &&
-      !process.env.TESTING_CRAFTY
-    ) {
-      options.cacheDirectory = true;
-    }
+    const babelConfigurator = require("@swissquote/babel-preset-swissquote/configurator-webpack");
+    const options = babelConfigurator(crafty, bundle);
 
     // EcmaScript 2015+
     chain.module

packages/crafty-preset-eslint/package.json

@@ -12,7 +12,7 @@
     "@swissquote/eslint-plugin-swissquote": "1.13.5",
     "@swissquote/rollup-plugin-eslint": "1.13.5",
     "debug": "^4.1.0",
-    "eslint": "7.12.0",
+    "eslint": "7.12.1",
     "eslint-loader": "4.0.2",
     "merge": "1.2.1",
     "resolve-from": "5.0.0",

packages/crafty-preset-postcss/package.json

@@ -16,7 +16,7 @@
     "gulp-postcss": "9.0.0",
     "gulp-rename": "2.0.0",
     "gulp-sourcemaps": "2.6.5",
-    "mini-css-extract-plugin": "1.2.0",
+    "mini-css-extract-plugin": "1.2.1",
     "postcss": "8.1.4",
     "postcss-loader": "4.0.4",
     "postcss-reporter": "7.0.1",
@@ -27,7 +27,7 @@
     "stylelint": "13.7.2",
     "through2": "^4.0.0",
     "tmp": "0.2.1",
-    "webpack": "4.44.2"
+    "webpack": "5.3.2"
   },
   "engines": {
     "node": ">=10.0.0"

packages/crafty-preset-typescript/package.json

@@ -15,19 +15,19 @@
     "@swissquote/crafty-preset-eslint": "1.13.5",
     "babel-loader": "8.1.0",
     "find-up": "^5.0.0",
-    "fork-ts-checker-webpack-plugin": "5.2.0",
+    "fork-ts-checker-webpack-plugin": "5.2.1",
     "gulp-babel": "8.0.0",
     "gulp-concat": "2.6.1",
     "gulp-eslint7": "0.3.0",
     "gulp-newer": "1.4.0",
     "gulp-sourcemaps": "2.6.5",
     "gulp-typescript": "5.0.1",
-    "rollup-plugin-typescript2": "0.28.0",
+    "rollup-plugin-typescript2": "0.29.0",
     "tmp": "0.2.1",
-    "ts-jest": "26.4.2",
+    "ts-jest": "26.4.3",
     "ts-loader": "8.0.7",
     "ts-pnp": "^1.1.2",
-    "typescript": "4.0.3"
+    "typescript": "4.0.5"
   },
   "engines": {
     "node": ">=10.0.0"

packages/crafty-preset-typescript/src/index.js

@@ -105,20 +105,8 @@ module.exports = {
     tsRule.test(/\.tsx?$/);
     tsRule.exclude.add(/(node_modules|bower_components)/);
 
-    const babelConfigurator = require("@swissquote/babel-preset-swissquote/configurator");
-    const babelOptions = babelConfigurator(crafty, bundle, {
-      deduplicateHelpers: true,
-      useESModules: true
-    });
-
-    // Cache can be disabled for experimentation and when running Crafty's tests
-    if (
-      crafty.getEnvironment() === "production" &&
-      !process.argv.some(arg => arg === "--no-cache") &&
-      !process.env.TESTING_CRAFTY
-    ) {
-      babelOptions.cacheDirectory = true;
-    }
+    const babelConfigurator = require("@swissquote/babel-preset-swissquote/configurator-webpack");
+    const babelOptions = babelConfigurator(crafty, bundle);
 
     // EcmaScript 2015+
     tsRule

packages/crafty-runner-rollup/package.json

@@ -8,15 +8,15 @@
   },
   "main": "./src/index.js",
   "dependencies": {
-    "@rollup/plugin-commonjs": "15.1.0",
+    "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "9.0.0",
-    "@rollup/plugin-replace": "2.3.3",
+    "@rollup/plugin-node-resolve": "10.0.0",
+    "@rollup/plugin-replace": "2.3.4",
     "@swissquote/crafty-preset-terser": "1.13.5",
     "ansi-colors": "^4.0.0",
     "debug": "^4.1.0",
     "pretty-hrtime": "1.0.3",
-    "rollup": "2.32.1",
+    "rollup": "2.33.0",
     "rollup-plugin-pnp-resolve": "^2.0.0",
     "rollup-plugin-terser": "7.0.2"
   },

packages/crafty-runner-webpack/package.json

@@ -20,15 +20,15 @@
     "hash-index": "3.0.0",
     "inspectpack": "4.5.2",
     "is-glob": "4.0.1",
+    "log-symbols": "^4.0.0",
     "mkdirp": "1.0.4",
-    "pnp-webpack-plugin": "^1.2.0",
-    "terser-webpack-plugin": "4.2.3",
-    "webpack": "4.44.2",
+    "plur": "^4.0.0",
+    "terser-webpack-plugin": "5.0.3",
+    "webpack": "5.3.2",
     "webpack-bundle-analyzer": "^3.0.4",
     "webpack-chain": "6.5.1",
     "webpack-dev-server": "3.11.0",
-    "webpack-merge": "5.2.0",
-    "webpack-stylish": "0.1.8"
+    "webpack-merge": "5.3.0"
   },
   "engines": {
     "node": ">=10.0.0"

packages/crafty-runner-webpack/src/utils/formatWebpackMessages.js

@@ -25,7 +25,7 @@ function isLikelyASyntaxError(message) {
 // Cleans up webpack error messages.
 // eslint-disable-next-line no-unused-vars
 function formatMessage(originalMessage, isError) {
-  let lines = originalMessage.split("\n");
+  let lines = (originalMessage.message || originalMessage).split("\n");
 
   // Strip Webpack-added headers off errors/warnings
   // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js

packages/crafty-runner-webpack/src/webpack.js

@@ -33,11 +33,11 @@ function prepareExternals(externals) {
  * @param {Boolean} isWatching
  * @param {Bundle} bundle
  */
-function generateJsonpName(isWatching, bundle) {
+function uniqueName(isWatching, bundle) {
   // For testing we need to pre-hardcode it
   // If we don't, the minification will have weird effects
   if (process.env.TESTING_CRAFTY) {
-    return "webpackJsonp_UNIQID";
+    return "UNIQID";
   }
 
   let name;
@@ -47,6 +47,7 @@ function generateJsonpName(isWatching, bundle) {
     name = `${process.cwd()}-${bundle.taskName}`;
   } else {
     // In production mode, we want this id to be as unique as possible
+    // TODO :: maybe in the future this could be changed to a more predictible name as caching will be affected by it
     name =
       Math.random()
         .toString(36)
@@ -56,13 +57,11 @@ function generateJsonpName(isWatching, bundle) {
         .substring(2, 15);
   }
 
-  const hashed = crypto
+  return crypto
     .createHash("sha1")
     .update(name)
     .digest("hex")
     .substring(0, 8);
-
-  return `webpackJsonp_${hashed}`;
 }
 
 module.exports = function(crafty, bundle, webpackPort) {
@@ -106,29 +105,23 @@ module.exports = function(crafty, bundle, webpackPort) {
   const destination =
     config.destination_js + (bundle.directory ? `/${bundle.directory}` : "");
 
+  // Automatically use the most up-to-date syntax by leveraging Browerslist
+  // TODO :: this feature doesn't work yet as IE 11 is detected as supporting ES6 which is incorrect
+  //chain.set("target", `browserslist:${config.browsers}`);
+  chain.set("target", ["web", "es5"]);
+
   chain.output
     .path(absolutePath(destination)) // The build folder.
     .filename(bundle.destination) // Generated JS file names (with nested folders).
     .chunkFilename(`[name].${bundle.destination}`)
     .libraryTarget(bundle.libraryTarget || "umd") // The destination type
-    .library(bundle.library || "") // The library name
-    .jsonpFunction(generateJsonpName(isWatching, bundle)); // TODO :: change that
-
-  chain.externals(prepareExternals(bundle.externals));
+    .set("uniqueName", uniqueName(isWatching, bundle));
 
-  // Enable support for Yarn PNP
-  const PnpWebpackPlugin = require(`pnp-webpack-plugin`);
-  chain.resolve
-    .plugin("pnp-webpack-plugin")
-    // Cloning the plugin exports as this would otherwise
-    // fail with `Cannot redefine property: __pluginArgs`
-    .init(Plugin => ({ ...Plugin }))
-    .use(PnpWebpackPlugin);
+  if (bundle.library) {
+    chain.output.library(bundle.library) // The library name
+  }
 
-  chain.resolveLoader
-    .plugin("pnp-webpack-plugin")
-    .init(Plugin => Plugin.moduleLoader(module))
-    .use(PnpWebpackPlugin);
+  chain.externals(prepareExternals(bundle.externals));
 
   // Minimization is enabled only in production but we still
   // define it here in case someone needs to minify in development.
@@ -138,14 +131,13 @@ module.exports = function(crafty, bundle, webpackPort) {
     .minimizer("terser")
     .use(require.resolve("terser-webpack-plugin"), [
       {
-        sourceMap: true,
         terserOptions: { ...config.terser }
       }
     ]);
 
   if (crafty.getEnvironment() === "production") {
     // Don't emit files if an error occured (forces to check what the error is)
-    chain.optimization.noEmitOnErrors(true);
+    chain.optimization.set("emitOnErrors", false);
   }
 
   // Hot Reloading