@eclipse-scout/cli 22.0.41 → 23.1.1

package/scripts/post-build.js

@@ -1,41 +1,50 @@
 /*
- * Copyright (c) 2014-2019 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
+ * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
  *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
  */
 
 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 +64,5 @@ module.exports = {
     listFiles(dir)
       .filter(themeJsOutFilter)
       .forEach(f => deleteFile(f));
-
   }
 };

package/scripts/webpack-defaults.js

@@ -1,34 +1,37 @@
 /*
- * 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
+ * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
  *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
  */
+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 +44,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 +102,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 +118,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 +161,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 +212,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 +419,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 +444,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 +489,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 +523,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;