@elliemae/pui-cli 5.18.0 → 5.21.0

package/lib/testing/jest.config.js

@@ -74,6 +74,7 @@ const jestConfig = {
   testRegex: '(app|lib).*/tests/.*\\.test\\.(js|ts)$',
   snapshotSerializers: [],
   testResultsProcessor: 'jest-sonar-reporter',
+  resolver: 'ts-jest-resolver',
   transformIgnorePatterns: [
     'node_modules/(?!(@elliemae/*|lodash-es/*)/)',
     'node_modules/@elliemae/em-platform-document-viewer',

package/lib/webpack/helpers.js

@@ -1,6 +1,9 @@
+/* eslint-disable max-lines */
 const path = require('path');
 const fs = require('fs');
 const _ = require('lodash');
+const CompressionPlugin = require('compression-webpack-plugin');
+const zlib = require('zlib');
 
 let pathSep = path.sep;
 if (pathSep === '\\')
@@ -122,7 +125,6 @@ const getAppLoaderFileName = () => {
 
 const getDiagnosticsFileName = () => {
   const libName = 'emuiDiagnostics';
-  // eslint-disable-next-line max-lines
   const libPath = path.join(
     process.cwd(),
     'node_modules/@elliemae/pui-diagnostics/dist/public/js',
@@ -185,6 +187,38 @@ const isGoogleTagManagerEnabled = () => {
   return !!appConfig?.googleTagManager;
 };
 
+const getCompressionPlugins = () => {
+  const commonConfig = {
+    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,
+  };
+  return [
+    new CompressionPlugin({
+      filename: '[path][base].gz',
+      algorithm: 'gzip',
+      ...commonConfig,
+    }),
+    new CompressionPlugin({
+      filename: '[path][base].br',
+      algorithm: 'brotliCompress',
+      ...commonConfig,
+      compressionOptions: {
+        params: {
+          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
+        },
+      },
+    }),
+  ];
+};
+
 exports.excludeNodeModulesExcept = excludeNodeModulesExcept;
 exports.getLibraryName = getLibraryName;
 exports.getAppConfig = getAppConfig;
@@ -209,3 +243,4 @@ exports.resolveExtensions = [
 ];
 exports.mainFields = ['browser', 'module', 'main'];
 exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;
+exports.getCompressionPlugins = getCompressionPlugins;

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

@@ -15,7 +15,6 @@ const {
   modulesToTranspile,
   getAlias,
   getPaths,
-  getMediaPath,
 } = require('./helpers');
 const { isTypeScriptEnabled } = require('../typescript/util');
 
@@ -64,21 +63,29 @@ const plugins = [
       {
         from: 'node_modules/@elliemae/pui-user-monitoring/dist/public/js',
         to: 'js',
+        toType: 'dir',
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/pui-app-loader/dist/public/js/emuiAppLoader*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/pui-app-loader/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/encw-loader/dist/public/js/emuiEncwLoader*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/encw-loader/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js/emuiDiagnostics*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
         from: 'public',
@@ -120,21 +127,6 @@ module.exports = (options) => ({
   optimization: options.optimization,
   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',
@@ -195,22 +187,12 @@ module.exports = (options) => ({
         type: 'asset/resource',
       },
       {
-        test: /\.svg$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-          {
-            loader: 'file-loader',
-            options: {
-              name: getMediaPath(),
-            },
-          },
-        ],
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },
@@ -223,6 +205,10 @@ module.exports = (options) => ({
         resourceQuery: /resource/,
         type: 'asset/resource',
       },
+      {
+        type: 'asset',
+        resourceQuery: /url/,
+      },
     ],
   },
   plugins: plugins.concat(options.plugins),

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

@@ -11,6 +11,7 @@ const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ResolveTypeScriptPlugin = require('resolve-typescript-plugin').default;
 
 const {
   excludeNodeModulesExcept,
@@ -19,7 +20,6 @@ const {
   modulesToTranspile,
   getAssetPath,
   getAlias,
-  getMediaPath,
 } = require('./helpers');
 const { isTypeScriptEnabled } = require('../typescript/util');
 
@@ -87,21 +87,6 @@ module.exports = (options) => ({
   optimization: options.optimization,
   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',
@@ -186,22 +171,12 @@ module.exports = (options) => ({
         type: 'asset/resource',
       },
       {
-        test: /\.svg$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-          {
-            loader: 'file-loader',
-            options: {
-              name: getMediaPath(),
-            },
-          },
-        ],
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },
@@ -219,6 +194,10 @@ module.exports = (options) => ({
         resourceQuery: /resource/,
         type: 'asset/resource',
       },
+      {
+        type: 'asset',
+        resourceQuery: /url/,
+      },
     ],
   },
   plugins: plugins.concat(options.plugins || []),
@@ -231,6 +210,7 @@ module.exports = (options) => ({
       ...getAlias(),
       ...((options.resolve || {}).alias || {}),
     },
+    plugins: [new ResolveTypeScriptPlugin()],
   },
   externals: {
     '@elliemae/pui-user-monitoring': 'emuiUserMonitoring',

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

@@ -1,11 +1,10 @@
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { getLibraryName } = require('./helpers');
+const { getLibraryName, getCompressionPlugins } = require('./helpers');
 
 const libraryName = getLibraryName();
 
@@ -69,13 +68,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(),
 
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',

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

@@ -1,8 +1,8 @@
+/* eslint-disable max-lines */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { GenerateSW } = require('workbox-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
@@ -15,6 +15,7 @@ const {
   getPaths,
   getAppVersion,
   isGoogleTagManagerEnabled,
+  getCompressionPlugins,
 } = require('./helpers');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
@@ -74,14 +75,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
         chunkFilename: 'css/[name].[contenthash].chunk.css',
       }),
 
-      new CompressionPlugin({
-        filename: '[path][base].gz',
-        algorithm: 'gzip',
-        test: /\.js$|\.css$$/,
-        exclude: [/\/adrum-ext/, /\/emuiUserMonitoring/],
-        // 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',
@@ -120,7 +114,6 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
     ? 'app/index.html'
     : 'app/index-app-loader.html',
   minify: {
-    // eslint-disable-next-line max-lines
     removeComments: true,
     collapseWhitespace: true,
     removeRedundantAttributes: true,

package/lib/webpack/webpack.storybook.js

@@ -2,7 +2,6 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const {
   getAppConfig,
@@ -12,7 +11,7 @@ const {
   modulesToTranspile,
   resolveExtensions,
   mainFields,
-  getMediaPath,
+  getCompressionPlugins,
 } = require('./helpers');
 
 const IS_APP = isApp();
@@ -50,30 +49,7 @@ const getAdditionalPlugins = () => [
   }),
 ];
 
-const compressionPlugin = 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,
-});
-
 const getModulePreRules = () => [
-  {
-    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',
@@ -113,22 +89,16 @@ const getModuleRules = () => [
     type: 'asset/resource',
   },
   {
-    test: /\.svg$/,
-    exclude: excludeNodeModulesExcept(['@elliemae/*']),
-    use: [
-      {
-        loader: '@svgr/webpack',
-      },
-      {
-        loader: 'file-loader',
-        options: {
-          name: getMediaPath(),
-        },
-      },
-    ],
+    type: 'asset',
+    resourceQuery: /url/,
+  },
+  {
+    test: /\.svg$/i,
+    issuer: /\.[jt]sx?$/,
+    use: ['@svgr/webpack'],
   },
   {
-    test: /\.(jpe?g|png|gif)$/i,
+    test: /\.(jpe?g|png|gif|ico)$/i,
     exclude: excludeNodeModulesExcept(['@elliemae/*']),
     type: 'asset',
   },
@@ -150,7 +120,7 @@ exports.webpackFinal = async (config, { configType }) => {
 
   config.plugins.push(...getAdditionalPlugins());
   if (isProd) {
-    config.plugins.push(compressionPlugin);
+    config.plugins = config.plugins.concat(getCompressionPlugins());
   }
 
   config.resolve.alias = { ...config.resolve.alias, ...getAlias() };
@@ -168,7 +138,7 @@ exports.webpackFinal = async (config, { configType }) => {
 
 // storybook manager webpack
 exports.managerWebpack = async (config) => {
-  config.plugins.push(compressionPlugin);
+  config.plugins = config.plugins.concat(getCompressionPlugins());
   config.resolve.alias = { ...config.resolve.alias, ...getAlias() };
   return config;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "5.18.0",
+  "version": "5.21.0",
   "private": false,
   "description": "EllieMae Platform UI CLI",
   "sideEffects": false,
@@ -88,16 +88,16 @@
     "@storybook/react": "~6.3.12",
     "@storybook/theming": "~6.3.12",
     "@stylelint/postcss-css-in-js": "~0.37.2",
-    "@svgr/webpack": "~5.5.0",
-    "@testing-library/jest-dom": "~5.15.1",
+    "@svgr/webpack": "~6.1.1",
+    "@testing-library/jest-dom": "~5.16.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~7.0.2",
     "@types/jest": "~27.0.3",
-    "@types/node": "~16.11.10",
+    "@types/node": "~16.11.11",
     "@types/rimraf": "~3.0.2",
-    "@types/testing-library__jest-dom": "~5.14.1",
-    "@typescript-eslint/eslint-plugin": "~5.4.0",
-    "@typescript-eslint/parser": "~5.4.0",
+    "@types/testing-library__jest-dom": "~5.14.2",
+    "@typescript-eslint/eslint-plugin": "~5.6.0",
+    "@typescript-eslint/parser": "~5.6.0",
     "autoprefixer": "~10.4.0",
     "axe-core": "~4.3.5",
     "babel-loader": "~8.2.3",
@@ -132,7 +132,7 @@
     "dotenv": "~10.0.0",
     "dotenv-webpack": "~7.0.3",
     "duplicate-package-checker-webpack-plugin": "~3.0.0",
-    "eslint": "~8.3.0",
+    "eslint": "~8.4.0",
     "eslint-config-airbnb": "~18.2.1",
     "eslint-config-airbnb-base": "~15.0.0",
     "eslint-config-airbnb-typescript": "~15.0.0",
@@ -145,20 +145,20 @@
     "eslint-plugin-eslint-comments": "~3.2.0",
     "eslint-plugin-import": "~2.25.3",
     "eslint-plugin-jest": "~25.3.0",
-    "eslint-plugin-jsdoc": "~37.0.3",
+    "eslint-plugin-jsdoc": "~37.1.0",
     "eslint-plugin-jsx-a11y": "~6.5.1",
     "eslint-plugin-mdx": "~1.16.0",
     "eslint-plugin-prettier": "~4.0.0",
     "eslint-plugin-react": "~7.27.1",
     "eslint-plugin-react-hooks": "~4.3.0",
     "eslint-plugin-redux-saga": "~1.2.1",
-    "eslint-plugin-testing-library": "~5.0.0",
+    "eslint-plugin-testing-library": "~5.0.1",
     "eslint-plugin-wdio": "~7.4.2",
     "execa": "~5.1.1",
     "express": "~4.17.1",
     "express-pino-logger": "~7.0.0",
     "file-loader": "~6.2.0",
-    "fork-ts-checker-webpack-plugin": "~6.4.2",
+    "fork-ts-checker-webpack-plugin": "~6.5.0",
     "helmet-csp": "~3.4.0",
     "html-loader": "~3.0.1",
     "html-webpack-plugin": "~5.5.0",
@@ -169,7 +169,7 @@
     "imports-loader": "~3.1.1",
     "ip": "~1.1.5",
     "jest-axe": "~5.0.1",
-    "jest-cli": "~27.4.0",
+    "jest-cli": "~27.4.3",
     "jest-sonar-reporter": "~2.0.0",
     "jest-styled-components": "~7.0.8",
     "jscodeshift": "~0.13.0",
@@ -179,15 +179,16 @@
     "minimist": "~1.2.5",
     "moment": "~2.29.1",
     "moment-locales-webpack-plugin": "~1.2.0",
-    "msw": "~0.35.0",
+    "msw": "~0.36.0",
+    "node-gyp": "~8.4.1",
     "node-plop": "~0.30.0",
     "nodemon": "~2.0.15",
-    "npm-check-updates": "12.0.2",
+    "npm-check-updates": "12.0.3",
     "null-loader": "~4.0.1",
-    "pino": "~7.5.0",
+    "pino": "~7.5.1",
     "pino-pretty": "~7.2.0",
     "pinst": "~2.1.6",
-    "plop": "~3.0.1",
+    "plop": "~3.0.2",
     "postcss": "~8.4.4",
     "postcss-jsx": "~0.36.4",
     "postcss-html": "~1.3.0",
@@ -195,7 +196,7 @@
     "postcss-syntax": "~0.36.2",
     "postcss-loader": "~6.2.1",
     "postcss-preset-env": "~7.0.1",
-    "prettier": "~2.5.0",
+    "prettier": "~2.5.1",
     "pug": "~3.0.2",
     "pug-loader": "~2.4.0",
     "raf": "~3.4.1",
@@ -204,6 +205,7 @@
     "react-docgen": "~5.4.0",
     "react-refresh": "~0.11.0",
     "react-test-renderer": "~17.0.2",
+    "resolve-typescript-plugin": "~1.1.1",
     "resize-observer-polyfill": "~1.5.1",
     "rimraf": "~3.0.2",
     "script-loader": "~0.7.2",
@@ -220,17 +222,18 @@
     "svg-url-loader": "~7.1.1",
     "svgo": "~2.8.0",
     "terser-webpack-plugin": "~5.2.5",
+    "ts-jest-resolver": "~2.0.0",
     "ts-node": "~10.4.0",
-    "tsc-alias": "~1.4.1",
+    "tsc-alias": "~1.4.2",
     "tsc-files": "~1.1.3",
     "tsconfig-paths": "~3.12.0",
     "tsconfig-paths-webpack-plugin": "~3.5.2",
-    "type-fest": "~2.6.0",
+    "type-fest": "~2.8.0",
     "typescript": "~4.5.2",
     "update-notifier": "~5.1.0",
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
-    "webpack": "~5.64.4",
+    "webpack": "~5.65.0",
     "webpack-bundle-analyzer": "~4.5.0",
     "webpack-cli": "~4.9.1",
     "webpack-dev-middleware": "~5.2.2",
@@ -240,8 +243,8 @@
     "webpack-pwa-manifest": "~4.3.0",
     "webpack-strip-block": "~0.3.0",
     "whatwg-fetch": "~3.6.2",
-    "workbox-webpack-plugin": "~6.4.1",
-    "yargs": "~17.2.1"
+    "workbox-webpack-plugin": "~6.4.2",
+    "yargs": "~17.3.0"
   },
   "devDependencies": {
     "redux": "~4.1.2",