@elliemae/pui-cli 6.0.0-beta.9 → 6.1.0

package/lib/webpack/webpack.base.babel.js

@@ -4,10 +4,11 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PostcssPresetEnv = require('postcss-preset-env');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const { ProvidePlugin } = require('webpack');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const { ProvidePlugin, ProgressPlugin } = require('webpack');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const {
   excludeNodeModulesExcept,
@@ -15,10 +16,9 @@ const {
   modulesToTranspile,
   getAlias,
   getPaths,
+  filterByFilePresence,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
 
-// get the application configuration
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
   options: {},
@@ -31,9 +31,6 @@ const postcssPlugins = [PostcssPresetEnv({ autoprefixer: { grid: true } })];
 const { buildPath, publicPath } = getPaths();
 
 const plugins = [
-  // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
-  // inside your code for any environment checks; Terser will automatically
-  // drop any unreachable code.
   new webpack.EnvironmentPlugin({
     NODE_ENV: 'development',
     ASSET_PATH: '/',
@@ -43,13 +40,11 @@ const plugins = [
   new webpack.DefinePlugin({
     APP_CONFIG: getAppConfig(),
   }),
-  new CaseSensitivePathsPlugin(),
-  // new ESLintPlugin(),
   new ProvidePlugin({
     React: 'react',
   }),
   new CopyWebpackPlugin({
-    patterns: [
+    patterns: filterByFilePresence([
       {
         from: 'app/app.config.json',
         to: 'app.config.json',
@@ -93,17 +88,35 @@ const plugins = [
       {
         from: 'public',
         noErrorOnMissing: true,
+        globOptions: {
+          ignore: ['readme.md'],
+        },
       },
       {
         from: 'webroot',
         to: '../',
         noErrorOnMissing: true,
+        globOptions: {
+          ignore: ['readme.md'],
+        },
       },
-    ],
+    ]),
   }),
   new DuplicatePackageCheckerPlugin(),
-  new MomentLocalesPlugin(),
+  new MomentLocalesPlugin({ localesToKeep: ['es-us'] }),
   new WebpackManifestPlugin(),
+  new FaviconsWebpackPlugin({
+    logo: './app/view/images/favicon.png',
+    favicons: {
+      developerName: 'ICE MT',
+      developerURL: null, // prevent retrieving from the nearest package.json
+      icons: {
+        coast: false,
+        yandex: false,
+      },
+    },
+  }),
+  new ProgressPlugin(),
 ];
 
 module.exports = (options) => ({
@@ -111,7 +124,6 @@ module.exports = (options) => ({
   entry: options.entry,
   output: {
     clean: true,
-    // Compile into js/build.js
     path: buildPath,
     publicPath,
     ...options.output,
@@ -120,39 +132,7 @@ module.exports = (options) => ({
   module: {
     rules: [
       {
-        test: /\.(jpe?g|png|gif|svg|ico)$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              gifsicle: {
-                enabled: false,
-              },
-            },
-          },
-        ],
-        enforce: 'pre',
-      },
-      {
-        test: /\.(js|ts|jsx|tsx)$/,
-        enforce: 'pre',
-        exclude: /node_modules/,
-        resolve: {
-          fullySpecified: false,
-        },
-        use: [
-          {
-            loader: 'webpack-strip-block',
-            options: {
-              start: 'TEST:START',
-              end: 'TEST:END',
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(js|jsx)$/,
+        test: /\.jsx?$/,
         exclude: excludeNodeModulesExcept(modulesToTranspile),
         resolve: {
           fullySpecified: false,
@@ -161,12 +141,12 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'jsx',
-            target: ESBUILD_TARGET,
+            target: browserslistToEsbuild(),
           },
         },
       },
       {
-        test: /\.(ts|tsx)$/,
+        test: /\.tsx?$/,
         exclude: excludeNodeModulesExcept(modulesToTranspile),
         resolve: {
           fullySpecified: false,
@@ -175,12 +155,15 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'tsx',
-            target: ESBUILD_TARGET,
+            target: browserslistToEsbuild(),
           },
         },
       },
       {
         test: /\.css$/,
+        exclude: excludeNodeModulesExcept(
+          modulesToTranspile.concat(['sanitize.css']),
+        ),
         use: [
           finalCSSLoader(options.mode),
           {
@@ -190,13 +173,6 @@ module.exports = (options) => ({
               sourceMap: true,
             },
           },
-          {
-            loader: 'esbuild-loader',
-            options: {
-              loader: 'css',
-              minify: options.mode === 'production',
-            },
-          },
           {
             loader: 'postcss-loader',
             options: {
@@ -210,41 +186,39 @@ module.exports = (options) => ({
       },
       {
         test: /\.(woff|woff2)$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset/resource',
-      },
-      {
-        type: 'asset',
-        resourceQuery: /url/, // *.svg?react
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
       },
       {
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
+        resourceQuery: /^((?!url).)*$/,
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
         use: ['@svgr/webpack'],
       },
       {
-        test: /\.(jpe?g|png|gif|ico)$/i,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        type: 'asset',
-      },
-      {
-        test: /\.(mp4|webm)$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
+        test: /\.(jpe?g|png|gif|ico|mp4|webm)$/i,
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
         type: 'asset',
       },
       {
         resourceQuery: /resource/,
         type: 'asset/resource',
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
+      },
+      {
+        type: 'asset',
+        resourceQuery: /url/,
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
       },
     ],
   },
   plugins: plugins.concat(options.plugins),
   resolve: {
     modules: ['node_modules', 'app', 'lib'],
-    extensions: ['.wasm', '.mjs', '.ts', '.tsx', '.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.wasm', '.mjs'],
     mainFields: ['browser', 'module', 'main'],
     alias: {
-      'lodash-es': 'lodash',
       ...getAlias(),
       ...((options.resolve || {}).alias || {}),
     },
@@ -255,6 +229,5 @@ module.exports = (options) => ({
     '@elliemae/pui-diagnostics': 'emuiDiagnostics',
   },
   devtool: options.devtool || 'eval-source-map',
-  target: 'web', // Make web variables accessible to webpack, e.g. window
   performance: options.performance || {},
 });

package/lib/webpack/webpack.dev.babel.js

@@ -1,9 +1,12 @@
 const path = require('path');
-const webpack = require('webpack');
+const { HotModuleReplacementPlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+
+const smp = new SpeedMeasurePlugin({ disable: !process.env.MEASURE });
 
 const {
   getAssetPath,
@@ -72,13 +75,8 @@ const devConfig = {
 
   // Add development plugins
   plugins: [
-    new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
-    new ReactRefreshWebpackPlugin({
-      overlay: {
-        sockIntegration: 'whm',
-      },
-    }),
     new HtmlWebpackPlugin({
+      scriptLoading: 'module',
       inject: !isAppLoaderEnabled(), // Inject all files that are generated by webpack, e.g. bundle.js
       template: !isAppLoaderEnabled()
         ? 'app/index.html'
@@ -105,8 +103,6 @@ const devConfig = {
     }),
   ],
 
-  // Emit a source map for easier debugging
-  // See https://webpack.js.org/configuration/devtool/#devtool
   devtool: 'eval-source-map',
 
   performance: {
@@ -114,4 +110,14 @@ const devConfig = {
   },
 };
 
-module.exports = baseConfigFactory(devConfig);
+const config = smp.wrap(baseConfigFactory(devConfig));
+config.plugins = config.plugins.concat([
+  new HotModuleReplacementPlugin(),
+  new ReactRefreshWebpackPlugin({
+    overlay: {
+      sockIntegration: 'whm',
+    },
+  }),
+]);
+
+module.exports = config;

package/lib/webpack/webpack.lib.base.babel.js

@@ -1,15 +1,16 @@
 /* eslint-disable max-lines */
 const path = require('path');
-const webpack = require('webpack');
+const { EnvironmentPlugin, DefinePlugin } = require('webpack');
 const {
   optimize: { LimitChunkCountPlugin },
+  ProgressPlugin,
 } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const PostcssPresetEnv = require('postcss-preset-env');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const {
   excludeNodeModulesExcept,
@@ -18,8 +19,8 @@ const {
   modulesToTranspile,
   getAssetPath,
   getAlias,
+  filterByFilePresence,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
 
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
@@ -30,33 +31,33 @@ const finalCSSLoader = (mode) =>
   mode !== 'production' ? { loader: 'style-loader' } : minicssLoader;
 
 const plugins = [
-  new webpack.EnvironmentPlugin({
+  new EnvironmentPlugin({
     NODE_ENV: 'development',
     ASSET_PATH: '/',
     CI: 'false',
   }),
-  new webpack.DefinePlugin({
+  new DefinePlugin({
     APP_CONFIG: getAppConfig(true),
   }),
-  new CaseSensitivePathsPlugin(),
   new CopyWebpackPlugin({
-    patterns: [
+    patterns: filterByFilePresence([
       {
         from: 'lib/app.config.json',
         to: 'app.config.json',
         noErrorOnMissing: true,
       },
       {
-        from: './public',
+        from: 'lib/public',
         noErrorOnMissing: true,
       },
-    ],
+    ]),
   }),
   new DuplicatePackageCheckerPlugin(),
   new LimitChunkCountPlugin({
     maxChunks: 1,
   }),
-  new MomentLocalesPlugin(),
+  new MomentLocalesPlugin({ localesToKeep: ['es-us'] }),
+  new ProgressPlugin(),
 ];
 
 module.exports = (options) => ({
@@ -74,39 +75,21 @@ module.exports = (options) => ({
   module: {
     rules: [
       {
-        test: /\.(jpe?g|png|gif|svg|ico)$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              gifsicle: {
-                enabled: false,
-              },
-            },
-          },
-        ],
-        enforce: 'pre',
-      },
-      {
-        test: /^(?!.*\.exec\.js$).*\.(js|ts|jsx|tsx)$/,
-        enforce: 'pre',
-        exclude: /node_modules/,
+        test: /^(?!.*\.exec\.js$).*\.jsx?$/, // Transform all .js and .jsx files with Babel
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
         resolve: {
           fullySpecified: false,
         },
-        use: [
-          {
-            loader: 'webpack-strip-block',
-            options: {
-              start: 'TEST:START',
-              end: 'TEST:END',
-            },
+        use: {
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'jsx',
+            target: browserslistToEsbuild(),
           },
-        ],
+        },
       },
       {
-        test: /^(?!.*\.exec\.js$).*\.(js|ts|jsx|tsx)$/, // Transform all .js and .jsx files with Babel
+        test: /^(?!.*\.exec\.js$).*\.tsx?$/, // Transform all .js and .jsx files with Babel
         exclude: excludeNodeModulesExcept(modulesToTranspile),
         resolve: {
           fullySpecified: false,
@@ -114,8 +97,8 @@ module.exports = (options) => ({
         use: {
           loader: 'esbuild-loader',
           options: {
-            loader: 'jsx',
-            target: ESBUILD_TARGET,
+            loader: 'tsx',
+            target: browserslistToEsbuild(),
           },
         },
       },
@@ -170,13 +153,11 @@ module.exports = (options) => ({
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset/resource',
       },
-      {
-        type: 'asset',
-        resourceQuery: /url/, // *.svg?react
-      },
       {
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
+        resourceQuery: /^((?!url).)*$/,
+        exclude: excludeNodeModulesExcept(['@elliemae/*']),
         use: ['@svgr/webpack'],
       },
       {
@@ -197,16 +178,21 @@ module.exports = (options) => ({
       {
         resourceQuery: /resource/,
         type: 'asset/resource',
+        exclude: excludeNodeModulesExcept(['@elliemae/*']),
+      },
+      {
+        type: 'asset',
+        resourceQuery: /url/,
+        exclude: excludeNodeModulesExcept(['@elliemae/*']),
       },
     ],
   },
   plugins: plugins.concat(options.plugins || []),
   resolve: {
     modules: ['node_modules', 'app', 'lib'],
-    extensions: ['.wasm', '.mjs', '.ts', '.tsx', '.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.wasm', '.mjs'],
     mainFields: ['browser', 'module', 'main'],
     alias: {
-      'lodash-es': 'lodash',
       ...getAlias(),
       ...((options.resolve || {}).alias || {}),
     },
@@ -217,6 +203,5 @@ module.exports = (options) => ({
     '@elliemae/pui-diagnostics': 'emuiDiagnostics',
   },
   devtool: options.devtool || 'eval-source-map',
-  target: 'web', // Make web variables accessible to webpack, e.g. window
   performance: options.performance || {},
 });

package/lib/webpack/webpack.lib.dev.babel.js

@@ -28,13 +28,14 @@ module.exports = require('./webpack.lib.base.babel')({
   // Add development plugins
   plugins: [
     new HtmlWebpackPlugin({
+      scriptLoading: 'module',
       inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
       template: 'lib/index.pug',
       filename: 'index.html',
       libraryName,
     }),
     new CircularDependencyPlugin({
-      exclude: /a\.js|node_modules/, // exclude node_modules
+      exclude: /a\.(js|ts|jsx|tsx)|node_modules/, // exclude node_modules
       failOnError: false, // show a warning when there is a circular dependency
     }),
     new MiniCssExtractPlugin({
@@ -43,8 +44,6 @@ module.exports = require('./webpack.lib.base.babel')({
     }),
   ],
 
-  // Emit a source map for easier debugging
-  // See https://webpack.js.org/configuration/devtool/#devtool
   devtool: 'eval-source-map',
 
   performance: {

package/lib/webpack/webpack.lib.prod.babel.js

@@ -1,11 +1,10 @@
 const path = require('path');
-const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
-const { getLibraryName } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
+const { getLibraryName, getCompressionPlugins } = require('./helpers');
 
 const libraryName = getLibraryName();
 
@@ -24,7 +23,7 @@ module.exports = require('./webpack.lib.base.babel')({
     minimize: true,
     minimizer: [
       new ESBuildMinifyPlugin({
-        target: ESBUILD_TARGET,
+        target: browserslistToEsbuild(),
         css: true,
       }),
     ],
@@ -39,6 +38,7 @@ module.exports = require('./webpack.lib.base.babel')({
   plugins: [
     // Minify and optimize the index.html
     new HtmlWebpackPlugin({
+      scriptLoading: 'module',
       template: 'lib/index.pug',
       filename: 'index.html',
       libraryName,
@@ -62,13 +62,7 @@ module.exports = require('./webpack.lib.base.babel')({
       chunkFilename: `css/${libraryName}.[contenthash].chunk.css`,
     }),
 
-    new CompressionPlugin({
-      filename: '[path][base].gz',
-      algorithm: 'gzip',
-      test: /\.js$|\.css$$/,
-      // we are compressing all files since in aws cloudfront edge lambda, we don't want to whitelist files that are not compressed due to below limits
-      minRatio: Number.MAX_SAFE_INTEGER,
-    }),
+    ...getCompressionPlugins(true),
 
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',

package/lib/webpack/webpack.prod.babel.js

@@ -2,10 +2,11 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { GenerateSW } = require('workbox-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const baseConfigFactory = require('./webpack.base.babel');
 const {
@@ -15,8 +16,8 @@ const {
   getPaths,
   getAppVersion,
   isGoogleTagManagerEnabled,
+  getCompressionPlugins,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
   const { buildPath, publicPath } = getPaths(latestVersion);
@@ -41,7 +42,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
       moduleIds: 'deterministic',
       minimizer: [
         new ESBuildMinifyPlugin({
-          target: ESBUILD_TARGET,
+          target: browserslistToEsbuild(),
           css: true,
         }),
       ],
@@ -63,25 +64,12 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     },
 
     plugins: [
-      new MiniCssExtractPlugin({
-        filename: 'css/[name].[contenthash].css',
-        chunkFilename: 'css/[name].[contenthash].chunk.css',
-      }),
+      // new MiniCssExtractPlugin({
+      //   filename: 'css/[name].[contenthash].css',
+      //   chunkFilename: 'css/[name].[contenthash].chunk.css',
+      // }),
 
-      new CompressionPlugin({
-        filename: '[path][base].gz',
-        algorithm: 'gzip',
-        test: /\.js$|\.css$$/,
-        exclude: [
-          /\/adrum-ext/,
-          /\/emuiUserMonitoring/,
-          /\/emuiDiagnostics/,
-          /\/emuiAppLoader/,
-          /\/encwLoader/,
-        ],
-        // we are compressing all files since in aws cloudfront edge lambda, we don't want to whitelist files that are not compressed due to below limits
-        minRatio: Number.MAX_SAFE_INTEGER,
-      }),
+      ...getCompressionPlugins(),
 
       new BundleAnalyzerPlugin({
         analyzerMode: 'static',
@@ -114,6 +102,7 @@ const {
   encwLoaderScriptPath,
 } = getPaths();
 const htmlWebpackPlugin = new HtmlWebpackPlugin({
+  scriptLoading: 'module',
   filename: '../index.html',
   inject: !isAppLoaderEnabled(),
   template: !isAppLoaderEnabled()
@@ -155,6 +144,22 @@ const appVersionConfig = baseConfigFactory(
   getProdConfig({ latestVersion: false }),
 );
 
-module.exports = isVersionedApp
-  ? [latestVersionConfig, appVersionConfig]
-  : latestVersionConfig;
+const addSMPPlugin = (config) => {
+  const smpConfig = new SpeedMeasurePlugin({
+    disable: !process.env.MEASURE,
+  }).wrap(config);
+  // mini css extract plugin is not working fine with smp
+  smpConfig.plugins.push(
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].[contenthash].css',
+      chunkFilename: 'css/[name].[contenthash].chunk.css',
+    }),
+  );
+  return smpConfig;
+};
+
+const config = isVersionedApp
+  ? [latestVersionConfig, appVersionConfig].map(addSMPPlugin)
+  : addSMPPlugin(latestVersionConfig);
+
+module.exports = config;