@elliemae/pui-cli 6.0.0-beta.12 → 6.0.0-beta.16

package/lib/esbuild.js

@@ -1,5 +1,7 @@
 const esbuild = require('esbuild');
 const fg = require('fast-glob');
+const fs = require('fs');
+const svgrPlugin = require('esbuild-plugin-svgr');
 
 const ESBUILD_TARGET = 'es2020';
 
@@ -8,9 +10,21 @@ const commonConfig = {
   target: ESBUILD_TARGET,
   loader: { '.js': 'jsx' },
   mainFields: ['module', 'browser', 'main'],
+  plugins: [svgrPlugin()],
 };
 
-const outDir = 'dist';
+const distFolder = 'dist';
+
+const copyFiles = async ({ srcdir, outdir }) => {
+  const files = await fg([
+    `${srcdir}/**/*.*`,
+    `!${srcdir}/**/*.{js,jsx,ts,tsx,cjs,mjs}`,
+  ]);
+  files.forEach((srcFilePath) => {
+    const destFilePath = srcFilePath.replace(srcdir, outdir);
+    fs.copyFileSync(srcFilePath, destFilePath);
+  });
+};
 
 const build = async ({ srcPath, commonJS }) => {
   const inputFiles = [
@@ -20,23 +34,27 @@ const build = async ({ srcPath, commonJS }) => {
     `!${srcPath}/**/*.endpoint.{js,jsx,ts,tsx}`,
   ];
   if (!commonJS) {
+    const outdir = `${distFolder}/es`;
     const entryPoints = await fg(inputFiles);
     await esbuild.build({
       entryPoints,
       ...commonConfig,
-      outdir: `${outDir}/es`,
+      outdir,
       format: 'esm',
     });
+    await copyFiles({ srcdir: srcPath, outdir });
   } else {
+    const outdir = `${distFolder}/cjs`;
     const commonJSEntryPoints = await fg(
       inputFiles.concat([`${srcPath}/**/*.cjs`]),
     );
     await esbuild.build({
       entryPoints: commonJSEntryPoints,
       ...commonConfig,
-      outdir: `${outDir}/cjs`,
+      outdir,
       format: 'cjs',
     });
+    await copyFiles({ srcdir: srcPath, outdir });
   }
 };
 

package/lib/server/index.js

@@ -60,12 +60,20 @@ const customHost = argv.host || process.env.HOST;
 const host = customHost || null; // Let http.Server use its default IPv6/4 host
 const prettyHost = customHost || 'localhost';
 
-// use the gzipped bundle
-app.get('*.js', (req, res, next) => {
-  req.url += '.gz';
-  res.set('Content-Encoding', 'gzip');
+const serveCompressedAssets = (req, res, next) => {
+  if (req.header('Accept-Encoding').includes('br')) {
+    req.url += '.br';
+    res.set('Content-Encoding', 'br');
+  } else {
+    req.url += '.gz';
+    res.set('Content-Encoding', 'gzip');
+  }
   next();
-});
+};
+
+// use the compressed bundle
+app.get('*.js', serveCompressedAssets);
+app.get('*.css', serveCompressedAssets);
 
 // Start your app.
 app.listen(port, host, async (err) => {

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 === '\\')
@@ -69,7 +72,6 @@ const getAlias = () =>
       '@babel/runtime',
       'react',
       'react-dom',
-      'react-router-dom',
       'react-redux',
       'redux',
       'redux-saga',
@@ -122,7 +124,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 +186,38 @@ const isGoogleTagManagerEnabled = () => {
   return !!appConfig?.googleTagManager;
 };
 
+const getCompressionPlugins = () => {
+  const commonConfig = {
+    test: /\.(js|css|html|svg)$/,
+    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 +242,4 @@ exports.resolveExtensions = [
 ];
 exports.mainFields = ['browser', 'module', 'main'];
 exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;
+exports.getCompressionPlugins = getCompressionPlugins;

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

@@ -1,10 +1,9 @@
 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 { getLibraryName, getCompressionPlugins } = require('./helpers');
 const { ESBUILD_TARGET } = require('../esbuild');
 
 const libraryName = getLibraryName();
@@ -62,13 +61,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

@@ -2,7 +2,6 @@
 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');
@@ -15,6 +14,7 @@ const {
   getPaths,
   getAppVersion,
   isGoogleTagManagerEnabled,
+  getCompressionPlugins,
 } = require('./helpers');
 const { ESBUILD_TARGET } = require('../esbuild');
 
@@ -68,20 +68,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/,
-          /\/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',

package/lib/webpack/webpack.storybook.js

@@ -1,13 +1,11 @@
-/* eslint-disable max-lines */
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const {
   getAppConfig,
   isApp,
   getAlias,
-  excludeNodeModulesExcept,
+  getCompressionPlugins,
 } = require('./helpers');
 
 const IS_APP = isApp();
@@ -45,30 +43,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',
-  },
+const getModuleRules = () => [
   {
     test: /\.(js|ts|jsx|tsx)$/,
     enforce: 'pre',
@@ -86,14 +61,6 @@ const getModulePreRules = () => [
       },
     ],
   },
-];
-
-const getModuleRules = () => [
-  {
-    test: /\.(woff|woff2)$/,
-    exclude: excludeNodeModulesExcept(['@elliemae/*']),
-    type: 'asset/resource',
-  },
   {
     type: 'asset',
     resourceQuery: /url/, // *.svg?react
@@ -103,35 +70,23 @@ const getModuleRules = () => [
     issuer: /\.[jt]sx?$/,
     use: ['@svgr/webpack'],
   },
-  {
-    test: /\.(jpe?g|png|gif|ico)$/i,
-    exclude: excludeNodeModulesExcept(['@elliemae/*']),
-    type: 'asset',
-  },
-  {
-    test: /\.(mp4|webm)$/,
-    exclude: excludeNodeModulesExcept(['@elliemae/*']),
-    type: 'asset',
-  },
 ];
 
 exports.webpackFinal = async (config, { configType }) => {
   const isProd = configType === 'PRODUCTION';
-  // remove asset processing that comes with storybook webpack, we will use ours
-  config.module.rules = config.module.rules.filter(
-    ({ type }) => type !== 'asset/resource',
+  const fileLoaderRule = config.module.rules.find((rule) =>
+    rule.test?.test?.('.svg'),
   );
-  config.module.rules.push(...getModulePreRules());
-  config.module.rules.unshift(...getModuleRules(isProd));
-
+  fileLoaderRule.exclude = /\.svg$/i;
+  config.module.rules.unshift(...getModuleRules());
   config.plugins.push(...getAdditionalPlugins());
   if (isProd) {
-    config.plugins.push(compressionPlugin);
+    config.plugins = config.plugins.concat(getCompressionPlugins());
   }
 
   config.resolve.alias = { ...config.resolve.alias, ...getAlias() };
   config.resolve.fallback = { ...config.resolve.fallback, crypto: false };
-
+  config.resolve.extensions.push('.svg');
   config.externals = config.externals || {};
   config.externals['@elliemae/pui-user-monitoring'] = 'emuiUserMonitoring';
   config.externals['@elliemae/pui-app-loader'] = 'emuiAppLoader';
@@ -141,7 +96,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": "6.0.0-beta.12",
+  "version": "6.0.0-beta.16",
   "private": false,
   "description": "EllieMae Platform UI CLI",
   "sideEffects": false,
@@ -70,31 +70,25 @@
     "@semantic-release/changelog": "~6.0.1",
     "@semantic-release/exec": "~6.0.2",
     "@semantic-release/git": "~10.0.1",
-    "@storybook/addon-a11y": "~6.4.1",
-    "@storybook/addon-actions": "~6.4.1",
-    "@storybook/addon-backgrounds": "~6.4.1",
-    "@storybook/addon-controls": "~6.4.1",
-    "@storybook/addon-docs": "~6.4.1",
+    "@storybook/addon-a11y": "~6.4.4",
+    "@storybook/addon-essentials": "~6.4.4",
     "@storybook/addon-events": "~6.2.9",
-    "@storybook/addon-interactions": "~6.4.1",
-    "@storybook/addon-links": "~6.4.1",
-    "@storybook/addon-storysource": "~6.4.1",
-    "@storybook/addon-toolbars": "~6.4.1",
-    "@storybook/addon-viewport": "~6.4.1",
-    "@storybook/addons": "~6.4.1",
-    "@storybook/builder-webpack5": "~6.4.1",
-    "@storybook/manager-webpack5": "~6.4.1",
-    "@storybook/react": "~6.4.1",
-    "@storybook/theming": "~6.4.1",
+    "@storybook/addon-interactions": "~6.4.4",
+    "@storybook/addon-links": "~6.4.4",
+    "@storybook/addon-storysource": "~6.4.4",
+    "@storybook/builder-webpack5": "~6.4.4",
+    "@storybook/manager-webpack5": "~6.4.4",
+    "@storybook/react": "~6.4.4",
+    "@storybook/theming": "~6.4.4",
     "@stylelint/postcss-css-in-js": "~0.37.2",
-    "@svgr/webpack": "~6.0.0",
+    "@svgr/webpack": "~6.1.0",
     "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~7.0.2",
     "@types/jest": "~27.0.3",
     "@types/node": "~16.11.11",
     "@types/rimraf": "~3.0.2",
-    "@types/testing-library__jest-dom": "~5.14.1",
+    "@types/testing-library__jest-dom": "~5.14.2",
     "@typescript-eslint/eslint-plugin": "~5.5.0",
     "@typescript-eslint/parser": "~5.5.0",
     "autoprefixer": "~10.4.0",
@@ -134,6 +128,7 @@
     "esbuild": "~0.14.1",
     "esbuild-jest": "~0.5.0",
     "esbuild-loader": "~2.16.0",
+    "esbuild-plugin-svgr": "~0.0.3",
     "eslint": "~8.3.0",
     "eslint-config-airbnb": "~18.2.1",
     "eslint-config-airbnb-base": "~15.0.0",
@@ -147,15 +142,15 @@
     "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-storybook": "~0.5.1",
-    "eslint-plugin-testing-library": "~5.0.0",
+    "eslint-plugin-storybook": "~0.5.2",
+    "eslint-plugin-testing-library": "~5.0.1",
     "eslint-plugin-wdio": "~7.4.2",
     "execa": "~5.1.1",
     "express": "~4.17.1",
@@ -172,7 +167,7 @@
     "imports-loader": "~3.1.1",
     "ip": "~1.1.5",
     "jest-axe": "~5.0.1",
-    "jest-cli": "~27.4.2",
+    "jest-cli": "~27.4.3",
     "jest-sonar-reporter": "~2.0.0",
     "jest-styled-components": "~7.0.8",
     "jscodeshift": "~0.13.0",
@@ -187,7 +182,7 @@
     "nodemon": "~2.0.15",
     "npm-check-updates": "12.0.2",
     "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",
@@ -230,7 +225,7 @@
     "tsc-files": "~1.1.3",
     "tsconfig-paths": "~3.12.0",
     "tsconfig-paths-webpack-plugin": "~3.5.2",
-    "type-fest": "~2.7.0",
+    "type-fest": "~2.8.0",
     "typescript": "~4.5.2",
     "update-notifier": "~5.1.0",
     "url-loader": "~4.1.1",