@eclipse-scout/cli 22.0.41 → 23.1.0-beta.4

package/bin/scout-scripts.js

@@ -1,10 +1,9 @@
-#!/usr/bin/env node
 /*
  * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -26,14 +25,26 @@ const argv = process.argv.slice(3);
 const parser = require('yargs-parser');
 const fs = require('fs');
 const path = require('path');
+const scoutBuildConstants = require('./../scripts/constants');
 const webpackConfigFileName = './webpack.config.js';
 const webpackCustomConfigFileName = './webpack.config.custom.js';
+const StatsExtractWebpackPlugin = require('../scripts/StatsExtractWebpackPlugin');
 const webpackYargsOptions = {
   boolean: ['progress', 'profile', 'clean'],
   array: ['resDirArray', 'themes']
 };
+const buildYargsOptions = {
+  array: ['run'],
+  default: {run: []}
+};
 const karmaYargsOptions = prepareWebpackYargsOptionsForKarma();
 
+let buildArgs = parser(argv, buildYargsOptions);
+if (buildArgs.run.length > 1) {
+  runBuilds(buildArgs);
+  return;
+}
+
 switch (script) {
   case 'test-server:start': {
     runKarma(null, false, parser(argv, karmaYargsOptions));
@@ -56,25 +67,30 @@ switch (script) {
     if (args.webpackArgs.progress === undefined) {
       args.webpackArgs.progress = false;
     }
+    if (args.webpackArgs.watch === undefined) {
+      args.webpackArgs.watch = false;
+    }
     runKarma(null, true, args);
     break;
   }
   case 'build:dev': {
     const args = parser(argv, webpackYargsOptions);
-    args.mode = 'development';
+    args.mode = scoutBuildConstants.mode.development;
     runWebpack(args);
     break;
   }
   case 'build:prod': {
     const args = parser(argv, webpackYargsOptions);
-    args.mode = 'production';
+    args.mode = scoutBuildConstants.mode.production;
     runWebpack(args);
     break;
   }
   case 'build:dev:watch': {
     const args = parser(argv, webpackYargsOptions);
-    args.mode = 'development';
-    runWebpackWatch(args);
+    args.mode = scoutBuildConstants.mode.development;
+    args.watch = true;
+    args.clean = true; // prevents errors because of old output folders in the development environment
+    runWebpack(args);
     break;
   }
   default:
@@ -82,6 +98,20 @@ switch (script) {
     break;
 }
 
+function runBuilds(args) {
+  const execSync = require('child_process').execSync;
+  let argStr = '';
+  for (let [key, value] of Object.entries(args)) {
+    if (key !== 'run' && key !== '_') {
+      argStr += `--${key} ${value} `;
+    }
+  }
+  for (let type of args.run) {
+    console.log(`Starting ${type} build` + (argStr ? ` with args ${argStr}` : ''));
+    execSync(`scout-scripts ${script} --run ${type} ${argStr}`, {stdio: 'inherit'});
+  }
+}
+
 function runKarma(configFileName, headless, args) {
   const cfg = require('karma').config;
   const cfgFile = configFileName || './karma.conf.js';
@@ -116,27 +146,77 @@ function runKarma(configFileName, headless, args) {
     });
   }
 
+  let exitCode = 100;
   const Server = require('karma').Server;
-  const serverInstance = new Server(karmaConfig, exitCode => {
+  const serverInstance = new Server(karmaConfig, karmaExitCode => {
     if (exitCode === 0) {
-      console.log('Karma has exited with 0');
+      console.log('Karma has exited with 0.');
+      process.exitCode = exitCode; // all fine: tests could be executed and no failures
+    } else if (exitCode === 10) {
+      console.log('Webpack build failed. See webpack output for details.');
+      process.exitCode = exitCode; // webpack error
+    } else if (exitCode === 4) {
+      console.log('There are test failures.');
+      process.exitCode = 0; // test could be executed but there are test failures: do not set exitCode to something other than 0 here because the build should continue even on failing tests.
     } else {
-      console.log(`There are test failures. Karma has exited with ${exitCode}`);
+      console.log(`Error in test execution. Exit code: ${exitCode}.`);
+      process.exitCode = exitCode; // tests could not be executed because of an error. Let the process fail.
+    }
+  });
+
+  serverInstance.on('run_complete', (browsers, results) => {
+    // compute exit code based on webpack stats and karma result.
+    // Karma exitCode alone is not detailed enough (all problems have exitCode=1).
+    let webpackStats = null;
+    let statsExtractPlugins = karmaConfig.webpack.plugins.filter(p => p instanceof StatsExtractWebpackPlugin);
+    if (statsExtractPlugins && statsExtractPlugins.length) {
+      webpackStats = statsExtractPlugins[0].stats;
     }
-    process.exit(0); // do not set exitCode of karma to the process here because the build should continue even on failing tests. therefore always use exitCode zero.
+    exitCode = computeExitCode(results, webpackStats);
   });
+
   console.log(`Starting Karma server using config file ${configFilePath}`);
   serverInstance.start();
 }
 
+/**
+ * Inspired by Karma.BrowserCollection.calculateExitCode().
+ *
+ * @param karmaResults The Karma results object
+ * @param webpackStats The Webpack build stats object
+ * @returns {number} The custom exit code
+ */
+function computeExitCode(karmaResults, webpackStats) {
+  if (webpackStats && webpackStats.hasErrors()) {
+    return 10; // webpack build failed
+  }
+  if (karmaResults.disconnected) {
+    return 2; // browser disconnected
+  }
+  if (karmaResults.error) {
+    return 3; // karma error
+  }
+  if (karmaResults.failed > 0) {
+    return 4; // tests could be executed but there are test failures (Karma uses exitCode=1 here which is not what we want)
+  }
+  return karmaResults.exitCode;
+}
+
 function runWebpack(args) {
   const configFilePath = readWebpackConfig();
+  if (!configFilePath) {
+    return;
+  }
   const {compiler, statsConfig} = createWebpackCompiler(configFilePath, args);
-  compiler.run((err, stats) => logWebpack(err, stats, statsConfig));
+  if (args.watch) {
+    compiler.watch({}, (err, stats) => logWebpack(err, stats, statsConfig));
+  } else {
+    compiler.run((err, stats) => logWebpack(err, stats, statsConfig));
+  }
 }
 
 function readWebpackConfig() {
-  let configFilePath = null;
+  let configFilePath;
   const devConfigFilePath = path.resolve(webpackCustomConfigFileName);
   if (fs.existsSync(devConfigFilePath)) {
     console.log(`Reading config from ${webpackCustomConfigFileName}`);
@@ -152,12 +232,6 @@ function readWebpackConfig() {
   return configFilePath;
 }
 
-function runWebpackWatch(args) {
-  const configFilePath = readWebpackConfig();
-  const {compiler, statsConfig} = createWebpackCompiler(configFilePath, args);
-  compiler.watch({}, (err, stats) => logWebpack(err, stats, statsConfig));
-}
-
 function createWebpackCompiler(configFilePath, args) {
   const webpack = require('webpack');
   const conf = require(configFilePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/cli",
-  "version": "22.0.41",
+  "version": "23.1.0-beta.4",
   "description": "CLI for Eclipse Scout",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -10,9 +10,9 @@
   },
   "license": "EPL-1.0",
   "engines": {
-    "node": ">=16.13.0",
-    "npm": ">=8.1.0",
-    "pnpm": ">=6.22.2"
+    "node": ">=18.12.1",
+    "npm": ">=9.1.1",
+    "pnpm": ">=7.16.0"
   },
   "keywords": [
     "scout",
@@ -28,35 +28,37 @@
     "scripts"
   ],
   "dependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/core": "7.16.5",
-    "@babel/plugin-proposal-class-properties": "7.16.5",
-    "@babel/plugin-proposal-object-rest-spread": "7.16.5",
-    "@babel/plugin-transform-object-assign": "7.16.5",
-    "@babel/preset-env": "7.16.5",
-    "babel-loader": "8.2.3",
-    "copy-webpack-plugin": "10.2.0",
-    "style-loader": "3.3.1",
-    "css-loader": "6.5.1",
-    "jasmine-core": "3.10.1",
+    "esbuild": "0.15.16",
+    "@babel/core": "7.20.5",
+    "@babel/preset-env": "7.20.2",
+    "babel-loader": "9.1.0",
+    "typescript": "4.9.3",
+    "ts-loader": "9.4.1",
+    "source-map-loader": "4.0.1",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.2",
+    "jasmine-core": "4.5.0",
     "jasmine-jquery": "2.1.1",
     "jquery": "3.6.0",
-    "karma": "6.3.20",
-    "karma-chrome-launcher": "3.1.0",
-    "karma-jasmine": "4.0.1",
+    "karma": "6.4.1",
+    "karma-chrome-launcher": "3.1.1",
+    "karma-jasmine": "5.1.0",
     "karma-jasmine-ajax": "0.1.13",
     "@metahub/karma-jasmine-jquery": "4.0.1",
-    "@eclipse-scout/karma-jasmine-scout": "22.0.41",
-    "karma-jasmine-html-reporter": "1.7.0",
+    "@eclipse-scout/karma-jasmine-scout": "23.1.0-beta.4",
+    "@eclipse-scout/tsconfig": "23.1.0-beta.4",
+    "karma-jasmine-html-reporter": "2.0.0",
     "karma-junit-reporter": "2.0.1",
     "karma-webpack": "5.0.0",
-    "less": "4.1.2",
-    "less-loader": "10.2.0",
-    "mini-css-extract-plugin": "2.4.5",
-    "css-minimizer-webpack-plugin": "3.3.0",
-    "terser-webpack-plugin": "5.3.0",
-    "webpack": "5.65.0",
-    "yargs-parser": "21.0.0"
+    "less": "4.1.3",
+    "less-loader": "11.1.0",
+    "mini-css-extract-plugin": "2.7.1",
+    "css-minimizer-webpack-plugin": "4.2.2",
+    "terser-webpack-plugin": "5.3.6",
+    "webpack": "5.75.0",
+    "yargs-parser": "21.1.1",
+    "fork-ts-checker-webpack-plugin": "7.2.13",
+    "fork-ts-checker-notifier-webpack-plugin": "6.0.0"
   },
   "devDependencies": {
     "@eclipse-scout/releng": "^22.0.0"

package/scripts/AfterEmitWebpackPlugin.js

@@ -13,15 +13,17 @@ const scoutPostBuild = require('./post-build');
 
 module.exports = class AfterEmitWebpackPlugin {
   constructor(options = {}) {
-    const {outDir} = options;
-    this.options = {outDir};
+    const {outDir, createFileList} = options;
+    this.options = {outDir, createFileList};
   }
 
   // noinspection JSUnusedGlobalSymbols
   apply(compiler) {
     compiler.hooks.afterEmit.tap(pluginName, compilation => {
       scoutPostBuild.cleanOutDir(this.options.outDir);
-      scoutPostBuild.createFileList(this.options.outDir);
+      if (this.options.createFileList ?? true) {
+        scoutPostBuild.createFileList(this.options.outDir);
+      }
     });
   }
 };

package/scripts/StatsExtractWebpackPlugin.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+
+const pluginName = 'StatsExtractWebpackPlugin';
+/**
+ * Webpack plugin used to store the build stats (results) on build completion.
+ * Result may be obtained using 'statsExtractWebpackPlugin.stats'.
+ */
+module.exports = class StatsExtractWebpackPlugin {
+  apply(compiler) {
+    compiler.hooks.done.tap(pluginName, stats => {
+      this.stats = stats;
+    });
+  }
+};

package/scripts/constants.js

@@ -3,7 +3,7 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -11,6 +11,8 @@
 const fs = require('fs');
 const path = require('path');
 
+const contentHashSuffix = '-[contenthash]';
+
 const mode = {
   production: 'production',
   development: 'development'
@@ -37,31 +39,46 @@ const cssFilename = {
   development: '[name].css'
 };
 
+function isMavenModule() {
+  const workingDir = process.cwd();
+  return fs.existsSync(path.resolve(workingDir, 'src', 'main')) || fs.existsSync(path.resolve(workingDir, 'src', 'test'));
+}
+
+function getConstantsForMode(buildMode) {
+  if (buildMode !== mode.production) {
+    return {
+      devMode: true,
+      jsFilename: jsFilename.development,
+      cssFilename: cssFilename.development,
+      outSubDir: outSubDir.development
+    };
+  }
+  return {
+    devMode: false,
+    jsFilename: jsFilename.production,
+    cssFilename: cssFilename.production,
+    outSubDir: outSubDir.production
+  };
+}
+
+function getOutputDir(mode) {
+  const outSubDir = getConstantsForMode(mode).outSubDir;
+  const isMavenModule = this.isMavenModule();
+  if (isMavenModule) {
+    return path.resolve(this.outDir.target, this.outDir.dist, outSubDir);
+  }
+  return path.resolve(this.outDir.dist);
+}
+
 module.exports = {
+  contentHashSuffix: contentHashSuffix,
   mode: mode,
   outDir: outDir,
   outSubDir: outSubDir,
   fileListName: 'file-list',
   jsFilename: jsFilename,
   cssFilename: cssFilename,
-  isMavenModule: () => {
-    const workingDir = process.cwd();
-    return fs.existsSync(path.resolve(workingDir, 'src', 'main')) || fs.existsSync(path.resolve(workingDir, 'src', 'test'));
-  },
-  getConstantsForMode: buildMode => {
-    if (buildMode !== mode.production) {
-      return {
-        devMode: true,
-        jsFilename: jsFilename.development,
-        cssFilename: cssFilename.development,
-        outSubDir: outSubDir.development
-      };
-    }
-    return {
-      devMode: false,
-      jsFilename: jsFilename.production,
-      cssFilename: cssFilename.production,
-      outSubDir: outSubDir.production
-    };
-  }
+  isMavenModule: isMavenModule,
+  getConstantsForMode: getConstantsForMode,
+  getOutputDir: getOutputDir
 };

package/scripts/files.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+const fs = require('fs');
+const path = require('path');
+
+const getAllFiles = dir => {
+  if (!fs.existsSync(dir)) {
+    return [];
+  }
+
+  return fs.readdirSync(dir).reduce((files, file) => {
+    const filePath = path.join(dir, file);
+    if (!fs.existsSync(filePath)) {
+      return files;
+    }
+    return isDirectory(filePath) ? [...files, ...getAllFiles(filePath)] : [...files, filePath];
+  }, []);
+};
+
+function isDirectory(filePath) {
+  return fs.statSync(filePath).isDirectory();
+}
+
+const cleanFolder = dir => {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    try {
+      let filePath = path.join(dir, file);
+      if (isDirectory(filePath)) {
+        fs.rmdirSync(filePath, {recursive: true});
+      } else {
+        file.unlink(path.resolve(dir, file));
+      }
+    } catch (err) {
+      console.log(`${dir}/${file} could not be removed`, err);
+    }
+  }
+};
+
+const deleteFolder = dir => {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+
+  try {
+    fs.rmdirSync(dir, {recursive: true});
+  } catch (err) {
+    console.log(`${dir} could not be deleted`, err);
+  }
+};
+
+module.exports.listFiles = getAllFiles;
+module.exports.cleanFolder = cleanFolder;
+module.exports.deleteFolder = deleteFolder;

package/scripts/karma-defaults.js

@@ -3,18 +3,17 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 const fs = require('fs');
 const path = require('path');
-
 const jquery = require.resolve('jquery');
-const webpack = require('webpack');
-
 const scoutBuildConstants = require('./constants');
+const {SourceMapDevToolPlugin} = require('webpack');
+const StatsExtractWebpackPlugin = require('./StatsExtractWebpackPlugin');
 
 module.exports = (config, specEntryPoint) => {
   const webpackConfigFilePath = path.resolve('webpack.config.js');
@@ -25,32 +24,56 @@ module.exports = (config, specEntryPoint) => {
   }
   let webpackConfigProvider = require(webpackConfigFilePath);
 
-  const webpackArgs = Object.assign({mode: scoutBuildConstants.mode.development}, config.webpackArgs);
-  const webpackConfig = webpackConfigProvider(null, webpackArgs);
+  const webpackArgs = Object.assign({
+    mode: scoutBuildConstants.mode.development,
+    watch: true, // by default tests are running in watch mode
+    tsOptions: {
+      compilerOptions: {
+        // No need to create declarations for tests
+        declaration: false,
+        declarationMap: false
+      }
+    }
+  }, config.webpackArgs);
+  let webpackConfig = webpackConfigProvider(null, webpackArgs);
+  if (Array.isArray(webpackConfig)) {
+    webpackConfig = webpackConfig[0];
+  }
   delete webpackConfig.entry;
   if (webpackConfig.optimization) {
     delete webpackConfig.optimization.splitChunks; // disable splitting for tests
   }
 
   if (webpackConfig.output) {
-    // remove output file as Karma uses an in-memory middleware and complains if an output file is present
+    // Remove output file as Karma uses an in-memory middleware and complains if an output file is present
     delete webpackConfig.output.filename;
+    // Don't create a library, it would create an error during test run (module not found)
+    delete webpackConfig.output.library;
   }
 
-  // specify output directory for webpack (use different than normal output dir so that they are not polluted with test artifacts)
+  if (webpackConfig.externals) {
+    // Remove externals, so they don't have to be provided
+    // Add jquery as the only external, so it won't be loaded twice because it is provided by @metahub/karma-jasmine-jquery
+    webpackConfig.externals = {
+      'jquery': 'global jQuery'
+    };
+  }
+
+  // specify output directory for webpack (use different from normal output dir so that they are not polluted with test artifacts)
   webpackConfig.output = webpackConfig.output || {};
   webpackConfig.output.path = path.resolve(scoutBuildConstants.outDir.target, scoutBuildConstants.outDir.distKarma, scoutBuildConstants.outSubDir.development);
   fs.mkdirSync(webpackConfig.output.path, {recursive: true});
 
-  webpackConfig.watch = true;
+  webpackConfig.watch = !!webpackArgs.watch;
 
-  const sourceMapPlugin = webpackConfig.plugins.find(plugin => plugin instanceof webpack.SourceMapDevToolPlugin);
+  const sourceMapPlugin = webpackConfig.plugins.find(plugin => plugin instanceof SourceMapDevToolPlugin);
   if (sourceMapPlugin) {
     // Use inline source maps because external source maps are not supported by karma (https://github.com/webpack-contrib/karma-webpack/issues/224)
     delete sourceMapPlugin.sourceMapFilename;
   }
+  webpackConfig.plugins.push(new StatsExtractWebpackPlugin()); // used by scout-scripts to access the webpack build result.
 
-  const specIndex = specEntryPoint ? path.resolve(specEntryPoint) : path.resolve('test', 'test-index.js');
+  const specIndex = searchSpecEntryPoint(specEntryPoint);
   const preprocessorObj = {};
   preprocessorObj[specIndex] = ['webpack'];
 
@@ -96,3 +119,14 @@ module.exports = (config, specEntryPoint) => {
     }
   });
 };
+
+function searchSpecEntryPoint(specEntryPoint) {
+  if (specEntryPoint) {
+    return path.resolve(specEntryPoint);
+  }
+  let defaultTypescriptIndex = path.resolve('test', 'test-index.ts');
+  if (fs.existsSync(defaultTypescriptIndex)) {
+    return defaultTypescriptIndex;
+  }
+  return path.resolve('test', 'test-index.js');
+}

package/scripts/post-build.js

@@ -12,30 +12,40 @@
 const fs = require('fs');
 const path = require('path');
 const themeJsOutFilter = f => /.*theme.*\.js/.test(f);
-const listFiles = require('./list-files');
+const {listFiles} = require('./files');
+const scoutBuild = require('./constants');
 
 function deleteFile(filename) {
-  fs.access(filename, fs.constants.W_OK, err => {
-    if (err) {
-      console.error(`${filename} does not exist or cannot be deleted.`);
-    } else {
-      fs.unlink(filename, unlinkErr => {
-        if (unlinkErr) {
-          throw unlinkErr;
-        }
-      });
+  if (!fs.existsSync(filename)) {
+    return;
+  }
+  try {
+    fs.accessSync(filename, fs.constants.W_OK);
+  } catch (err) {
+    console.error(`No right to delete ${filename}.`, err);
+    return;
+  }
+  fs.unlink(filename, unlinkErr => {
+    if (unlinkErr) {
+      throw unlinkErr;
     }
   });
 }
 
+function fileListFilter(fileName) {
+  return fileName !== scoutBuild.fileListName
+    && !fileName.endsWith('.LICENSE')
+    && !themeJsOutFilter(fileName)
+    && !fileName.endsWith('d.ts')
+    && !fileName.endsWith('d.ts.map');
+}
+
 module.exports = {
   createFileList: dir => {
     const scoutBuild = require('./constants');
     let content = '';
     listFiles(dir)
-      .filter(fileName => fileName !== scoutBuild.fileListName)
-      .filter(fileName => !fileName.endsWith('.LICENSE'))
-      .filter(fileName => !themeJsOutFilter(fileName))
+      .filter(fileName => fileListFilter(fileName))
       .map(file => file.substring(dir.length + 1))
       .map(path => path.replace(/\\/g, '/'))
       .map(fileName => `${fileName}\n`)
@@ -55,6 +65,5 @@ module.exports = {
     listFiles(dir)
       .filter(themeJsOutFilter)
       .forEach(f => deleteFile(f));
-
   }
 };

package/scripts/webpack-defaults.js

@@ -8,27 +8,31 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
+const fs = require('fs');
+const path = require('path');
+const scoutBuildConstants = require('./constants');
 const CopyPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const AfterEmitWebpackPlugin = require('./AfterEmitWebpackPlugin');
-
-const path = require('path');
-const scoutBuildConstants = require('./constants');
-const webpack = require('webpack');
+const {SourceMapDevToolPlugin, WatchIgnorePlugin, ProgressPlugin} = require('webpack');
 
 /**
  * @param {string} args.mode development or production
- * @param {boolean} args.clean true, to clean the dist folder before each build. Default is true.
+ * @param {boolean} args.clean true, to clean the dist folder before each build. Default is false.
  * @param {boolean} args.progress true, to show build progress in percentage. Default is true.
  * @param {boolean} args.profile true, to show timing information for each build step. Default is false.
+ * @param {boolean} args.watch true, if webpack runs in watch mode. Default is false.
  * @param {[]} args.resDirArray an array containing directories which should be copied to dist/res
+ * @param {object} args.tsOptions a config object to be passed to the ts-loader
  */
 module.exports = (env, args) => {
-  const {devMode, outSubDir, cssFilename, jsFilename} = scoutBuildConstants.getConstantsForMode(args.mode);
+  const buildMode = args.mode;
+  const {devMode, cssFilename, jsFilename} = scoutBuildConstants.getConstantsForMode(buildMode);
   const isMavenModule = scoutBuildConstants.isMavenModule();
-  const outDir = getOutputDir(isMavenModule, outSubDir);
+  const isWatchMode = nvl(args.watch, false);
+  const outDir = scoutBuildConstants.getOutputDir(buildMode);
   const resDirArray = args.resDirArray || ['res'];
-  console.log(`Webpack mode: ${args.mode}`);
+  console.log(`Webpack mode: ${buildMode}`);
 
   // # Copy static web-resources delivered by the modules
   const copyPluginConfig = [];
@@ -41,17 +45,39 @@ module.exports = (env, args) => {
       });
   }
 
+  const minimizerTarget = ['firefox69', 'chrome71', 'safari12.1'];
+  const babelOptions = {
+    compact: false,
+    cacheDirectory: true,
+    cacheCompression: false,
+    presets: [
+      [require.resolve('@babel/preset-env'), {
+        debug: false,
+        targets: {
+          firefox: '69',
+          chrome: '71',
+          safari: '12.1'
+        }
+      }]
+    ]
+  };
+
+  // in prod mode always only transpile (no type-checks). In dev mode type checking is skipped in watch mode. Instead, ForkTsCheckerWebpackPlugin is used then (see below).
+  const transpileOnly = !devMode || isWatchMode;
+  const tsOptions = {
+    ...args.tsOptions,
+    transpileOnly: transpileOnly,
+    compilerOptions: {
+      noEmit: false,
+      ...args.tsOptions?.compilerOptions
+    }
+  };
+
   const config = {
-    target: 'web',
-    mode: args.mode,
-    // In dev mode 'inline-source-map' is used (devtool is false because we use SourceMapDevToolPlugin)
-    // Other source map types may increase build performance but decrease debugging experience
-    // (e.g. wrong this in arrow functions with inline-cheap-module-source-map or not having original source code at all (code after babel transpilation instead of before) with eval types).
-    // In production mode create external source maps without source code to map stack traces.
-    // Otherwise stack traces would point to the minified source code which makes it quite impossible to analyze productive issues.
-    devtool: devMode ? false : 'nosources-source-map',
+    mode: buildMode,
+    devtool: false, // disabled because SourceMapDevToolPlugin is used (see below)
+    ignoreWarnings: [(webpackError, compilation) => isWarningIgnored(devMode, webpackError, compilation)],
     resolve: {
-
       // no automatic polyfills. clients must add the desired polyfills themselves.
       fallback: {
         assert: false,
@@ -77,7 +103,8 @@ module.exports = (env, args) => {
         util: false,
         vm: false,
         zlib: false
-      }
+      },
+      extensions: ['.ts', '.js', '.json', '.wasm', '.tsx', '.jsx']
     },
     // expect these apis in the browser
     externals: {
@@ -92,16 +119,15 @@ module.exports = (env, args) => {
     output: {
       filename: jsFilename,
       path: outDir,
-      devtoolModuleFilenameTemplate: devMode ? undefined : prodDevtoolModuleFilenameTemplate,
-      clean: nvl(args.clean, true)
+      clean: nvl(args.clean, false)
     },
     performance: {
       hints: false
     },
     profile: args.profile,
     module: {
-      // LESS
       rules: [{
+        // LESS
         test: /\.less$/,
         use: [{
           // Extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
@@ -136,50 +162,48 @@ module.exports = (env, args) => {
           }
         }]
       }, {
-        // # Babel
-        test: /\.m?js$/,
-        exclude: [],
-        use: {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [{
           loader: require.resolve('babel-loader'),
-          options: {
-            compact: false,
-            cacheDirectory: true,
-            cacheCompression: false,
-            plugins: [
-              require.resolve('@babel/plugin-transform-object-assign'),
-              require.resolve('@babel/plugin-proposal-class-properties')],
-            presets: [
-              [require.resolve('@babel/preset-env'), {
-                debug: false,
-                targets: {
-                  firefox: '69',
-                  chrome: '71',
-                  safari: '12.1'
-                }
-              }]
-            ]
-          }
-        }
+          options: babelOptions
+        }, {
+          loader: require.resolve('ts-loader'),
+          options: tsOptions
+        }]
       }, {
-        // to support css imports (currently not used by Scout but might be used by included 3rd party libs)
-        test: /\.css$/i,
+        test: /\.jsx?$/,
         use: [{
-          loader: require.resolve('style-loader')
-        }, {
-          loader: require.resolve('css-loader'),
-          options: {
-            sourceMap: devMode,
-            modules: false, // We don't want to work with CSS modules
-            url: false // Don't resolve URLs in LESS, because relative path does not match /res/fonts
-          }
+          loader: require.resolve('babel-loader'),
+          options: babelOptions
+        }]
+      }, {
+        test: /\.jsx?$/,
+        enforce: 'pre',
+        use: [{
+          loader: require.resolve('source-map-loader')
         }]
       }]
     },
     plugins: [
+      new WatchIgnorePlugin({paths: [/\.d\.ts$/]}),
       // see: extracts css into separate files
       new MiniCssExtractPlugin({filename: cssFilename}),
       // run post-build script hook
-      new AfterEmitWebpackPlugin({outDir: outDir})
+      new AfterEmitWebpackPlugin({outDir: outDir}),
+      new SourceMapDevToolPlugin({
+        // Use external source maps in all modes because the browser is very slow in displaying a file containing large lines which is the case if source maps are inlined
+        filename: '[file].map',
+
+        // Don't create maps for static resources.
+        // They may already have maps which could lead to "multiple assets emit different content to the same file" exception.
+        exclude: /\/res\/.*/,
+
+        // In production mode create external source maps without source code to map stack traces.
+        // Otherwise, stack traces would point to the minified source code which makes it quite impossible to analyze productive issues.
+        noSources: !devMode,
+        moduleFilenameTemplate: devMode ? undefined : prodDevtoolModuleFilenameTemplate
+      })
     ],
     optimization: {
       splitChunks: {
@@ -189,49 +213,181 @@ module.exports = (env, args) => {
     }
   };
 
-  // # Copy resources
+  // Copy resources only add the plugin if there are resources to copy. Otherwise, the plugin fails.
   if (copyPluginConfig.length > 0) {
-    // only add the plugin if there are resources to copy. Otherwise the plugin fails.
     config.plugins.push(new CopyPlugin({patterns: copyPluginConfig}));
   }
 
+  // Shows progress information in the console in dev mode
   if (nvl(args.progress, true)) {
-    // Shows progress information in the console in dev mode
-    const webpack = require('webpack');
-    config.plugins.push(new webpack.ProgressPlugin({profile: args.profile}));
+    config.plugins.push(new ProgressPlugin({profile: args.profile}));
   }
 
-  if (!devMode) {
+  if (devMode) {
+    if (transpileOnly) { // devMode and no type-checks: perform checks asynchronously (watch mode).
+      const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+      const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
+
+      let forkTsCheckerConfig = undefined;
+      if (!fs.existsSync('./tsconfig.json')) {
+        // if the module has no tsconfig: use default from Scout.
+        // Otherwise, each module would need to provide a tsconfig even if there is no typescript code in the module.
+        forkTsCheckerConfig = {
+          typescript: {
+            configFile: require.resolve('@eclipse-scout/tsconfig'),
+            context: process.cwd(),
+            configOverwrite: {
+              compilerOptions: {skipLibCheck: true, sourceMap: false, inlineSourceMap: false, declarationMap: false, allowJs: true},
+              include: isMavenModule ? ['./src/main/js/**/*.ts', './src/main/js/**/*.js', './src/test/js/**/*.ts', './src/test/js/**/*.js']
+                : ['./src/**/*.ts', './src/**/*.js', './test/**/*.ts', './test/**/*.js']
+            }
+          }
+        };
+      }
+      config.plugins.push(new ForkTsCheckerWebpackPlugin(forkTsCheckerConfig));
+      config.plugins.push(new ForkTsCheckerNotifierWebpackPlugin({
+        title: getModuleName(),
+        skipSuccessful: true, // no notification for successful builds
+        excludeWarnings: true // no notification for warnings
+      }));
+    }
+  } else {
     const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
     const TerserPlugin = require('terser-webpack-plugin');
     config.optimization.minimizer = [
       // minify css
       new CssMinimizerPlugin({
-        test: /\.min\.css$/g,
+        test: /\.min\.css$/i, // only minimize required files
+        exclude: /res[\\/]/i, // exclude resources output directory from minimizing as these files are copied
+        parallel: 4, // best ratio between memory consumption and performance on most systems
+        minify: CssMinimizerPlugin.esbuildMinify,
         minimizerOptions: {
-          preset: ['default', {
-            discardComments: {removeAll: true}
-          }]
+          logLevel: 'error', // show messages directly to see the details. The message passed to webpack is only an object which is ignored in isWarningIgnored
+          sourcemap: false, // no sourcemaps for css in prod build (needs more heap memory instead)
+          charset: 'utf8', // default is ASCII which requires more escaping. UTF-8 allows for more compact code.
+          target: minimizerTarget
         }
       }),
       // minify js
       new TerserPlugin({
-        test: /\.js(\?.*)?$/i,
-        parallel: 4
+        test: /\.min\.js$/i, // only minimize required files
+        exclude: [/log4javascript-1\.4\.9[\\/]/i, /res[\\/]/i], // exclude resources output directory from minimizing as these files are copied
+        parallel: 4, // best ratio between memory consumption and performance on most systems
+        minify: TerserPlugin.esbuildMinify,
+        terserOptions: {
+          legalComments: 'none',
+          logLevel: 'error', // show messages directly to see the details. The message passed to webpack is only an object which is ignored in isWarningIgnored
+          charset: 'utf8', // default is ASCII which requires more escaping. UTF-8 allows for more compact code.
+          target: minimizerTarget
+        }
       })
     ];
   }
 
-  if (devMode) {
-    // Use external source maps also in dev mode because the browser is very slow in displaying a file containing large lines which is the case if source maps are inlined
-    config.plugins.push(new webpack.SourceMapDevToolPlugin({
-      filename: '[file].map'
-    }));
-  }
-
   return config;
 };
 
+/**
+ * Creates a new object that contains the same keys as the given object. The values are replaced with the keys.
+ * So the resulting object looks like: {key1: key1, key2: key2}.
+ */
+function toExternals(src, dest) {
+  if (!src) {
+    return;
+  }
+  return Object.keys(src).reduce((obj, current) => {
+    obj[current] = current;
+    return obj;
+  }, dest);
+}
+
+/**
+ * Converts the given base config to a library config meaning that all dependencies declared in the package.json are externalized by default.
+ *
+ * @param {object} config base config to convert to a library config
+ * @param {object} [options]
+ * @param {object} [options.externals] object holding custom externals for the module. See https://webpack.js.org/configuration/externals/ for details about supported formats and types.
+ * @param {boolean} [options.externalizeDevDeps] Add devDependencies as externals. Default is true.
+ * @param {boolean} [options.externalizePeerDeps] Add peerDependencies as externals. Default is true.
+ * @param {boolean} [options.externalizeBundledDeps] Add bundledDependencies as externals. Default is true.
+ * @param {boolean} [options.externalizeOptionalDeps] Add optionalDependencies as externals. Default is true.
+ */
+function libraryConfig(config, options = {}) {
+  const packageJson = require(path.resolve('./package.json'));
+  const packageJsonExternals = {};
+  toExternals(packageJson.dependencies, packageJsonExternals);
+  if (options.externalizeDevDeps ?? true) {
+    toExternals(packageJson.devDependencies, packageJsonExternals);
+  }
+  if (options.externalizePeerDeps ?? true) {
+    toExternals(packageJson.peerDependencies, packageJsonExternals);
+  }
+  if (options.externalizeBundledDeps ?? true) {
+    toExternals(packageJson.bundledDependencies, packageJsonExternals);
+  }
+  if (options.externalizeOptionalDeps ?? true) {
+    toExternals(packageJson.optionalDependencies, packageJsonExternals);
+  }
+  packageJsonExternals.jquery = 'commonjs jquery'; // Make synthetic default import work (import $ from 'jquery') by importing jquery as commonjs module
+  const customExternals = options.externals || {};
+  const allExternals = {...packageJsonExternals, ...config.externals, ...customExternals};
+
+  // FileList is not necessary in library mode
+  let plugins = config.plugins.map(plugin => {
+    if (plugin instanceof AfterEmitWebpackPlugin) {
+      return new AfterEmitWebpackPlugin({outDir: plugin.options.outDir, createFileList: false});
+    }
+    return plugin;
+  });
+
+  return {
+    ...config,
+    optimization: {
+      ...config.optimization,
+      splitChunks: undefined // disable splitting
+    },
+    output: {
+      ...config.output,
+      library: {
+        type: 'module'
+      }
+    },
+    experiments: {
+      // required for library.type = 'module'
+      outputModule: true
+    },
+    plugins,
+    externals: (context, callback) => markExternals(allExternals, context, callback)
+  };
+}
+
+function markExternals(allExternals, context, callback) {
+  const request = context.request;
+  if (request.startsWith('.')) {
+    // fast check: continue without externalizing the import for relative paths
+    return callback();
+  }
+
+  if (allExternals[request]) {
+    // import matches exactly a declared dependency
+    return callback(null, allExternals[request]);
+  }
+
+  // check for files in sub-folders of an external
+  for (const [key, value] of Object.entries(allExternals)) {
+    if (request.startsWith(key + '/')) {
+      let result = request;
+      let spacePos = value.indexOf(' ');
+      if (spacePos > 0) {
+        result = value.substring(0, spacePos + 1) + result;
+      }
+      return callback(null, result);
+    }
+  }
+
+  callback(); // Continue without externalizing the import
+}
+
 /**
  * @param {object} entry the webpack entry object
  * @param {object} options the options object to configure which themes should be built and how
@@ -264,13 +420,6 @@ function addThemes(entry, options = {}) {
   });
 }
 
-function getOutputDir(isMavenModule, outSubDir) {
-  if (isMavenModule) {
-    return path.resolve(scoutBuildConstants.outDir.target, scoutBuildConstants.outDir.dist, outSubDir);
-  }
-  return path.resolve(scoutBuildConstants.outDir.dist);
-}
-
 function computeChunkName(module, chunks, cacheGroupKey) {
   const entryPointDelim = '~';
   const allChunksNames = chunks
@@ -296,6 +445,7 @@ function computeChunkName(module, chunks, cacheGroupKey) {
 
 function computeModuleId(module) {
   const nodeModules = 'node_modules';
+  // noinspection JSUnresolvedVariable
   let id = module.userRequest;
   const nodeModulesPos = id.lastIndexOf(nodeModules);
   if (nodeModulesPos < 0) {
@@ -340,6 +490,17 @@ function nvl(arg, defaultValue) {
   return arg;
 }
 
+function isWarningIgnored(devMode, webpackError) {
+  if (webpackError && webpackError.message === '[object Object]') {
+    return true; // esbuild warnings are not correctly passed to webpack. ignore them. The actual message is printed with the esbuild flag 'logLevel' (see below)
+  }
+
+  if (devMode || !webpackError || !webpackError.warning || !webpackError.warning.message) {
+    return false;
+  }
+  return webpackError.warning.message.startsWith('Failed to parse source map');
+}
+
 /**
  * Don't reveal absolute file paths in production mode -> only return the file name relative to its module.
  * @param info.resourcePath
@@ -363,4 +524,38 @@ function prodDevtoolModuleFilenameTemplate(info) {
   }
 }
 
+function getModuleName() {
+  let packageJsonFile = path.resolve('./package.json');
+  if (fs.existsSync(packageJsonFile)) {
+    let name = require(packageJsonFile).name;
+    if (name) {
+      return name;
+    }
+  }
+  return path.basename(process.cwd());
+}
+
+/**
+ * Externalize every import to the main index and replace it with newImport
+ * Keep imports to the excludedFolder.
+ * @param {string} newImport new name of the replaced import, typically the module name
+ * @param {string} excludedFolder imports to that folder won't be replaced
+ * @return a function that should be added to the webpack externals
+ */
+function rewriteIndexImports(newImport, excludedFolder) {
+  return ({context, request, contextInfo}, callback) => {
+    // Externalize every import to the main index and replace it with @bsi-scout/datamodel
+    // Keep imports to the testing index
+    if (/\/index$/.test(request) && !path.resolve(context, request).includes(excludedFolder)) {
+      return callback(null, newImport);
+    }
+
+    // Continue without externalizing the import
+    callback();
+  };
+}
+
 module.exports.addThemes = addThemes;
+module.exports.libraryConfig = libraryConfig;
+module.exports.markExternals = markExternals;
+module.exports.rewriteIndexImports = rewriteIndexImports;

package/scripts/list-files.js

@@ -1,26 +0,0 @@
-/*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
- *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
- */
-const fs = require('fs');
-const path = require('path');
-
-const _getAllFiles = dir => {
-  if (!fs.existsSync(dir)) {
-    return [];
-  }
-
-  return fs.readdirSync(dir).reduce((files, file) => {
-    const name = path.join(dir, file);
-    const isDirectory = fs.statSync(name).isDirectory();
-    return isDirectory ? [...files, ..._getAllFiles(name)] : [...files, name];
-  }, []);
-};
-
-module.exports = _getAllFiles;