@elliemae/pui-cli 6.0.0-beta.5 → 6.0.0-beta.50

package/lib/testing/resolver.js

@@ -0,0 +1,47 @@
+const resolutions = [
+  {
+    matcher: /\.jsx?$/i,
+    extensions: ['.tsx', '.ts'],
+  },
+  {
+    matcher: /\.mjs$/i,
+    extensions: ['.mts'],
+  },
+  {
+    matcher: /\.cjs$/i,
+    extensions: ['.cts'],
+  },
+];
+
+const resolveConfig = {
+  conditionNames: ['import', 'node', 'default'],
+  extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.node'],
+  modules: ['node_modules', 'app', 'lib'],
+};
+
+const importResolver = require('enhanced-resolve').create.sync(resolveConfig);
+const requireResolver = require('enhanced-resolve').create.sync({
+  ...resolveConfig,
+  conditionNames: ['require', 'node', 'default'],
+});
+
+module.exports = (request, options) => {
+  let resolver = requireResolver;
+  if (options.conditions?.includes('import')) {
+    resolver = importResolver;
+  }
+  const resolution = resolutions.find(({ matcher }) => matcher.test(request));
+  if (resolution) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const extension of resolution.extensions) {
+      try {
+        return resolver(
+          options.basedir,
+          request.replace(resolution.matcher, extension),
+        );
+        // eslint-disable-next-line no-empty
+      } catch {}
+    }
+  }
+  return resolver(options.basedir, request);
+};

package/lib/testing/setup-react-env.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import 'jest-styled-components';
+global.React = React;

package/lib/testing/setup-tests.js

@@ -3,12 +3,36 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom/extend-expect';
-import { toHaveNoViolations } from 'jest-axe';
+import jestAxe from 'jest-axe';
 import ResizeObserver from 'resize-observer-polyfill';
-import addMatchMedia from './mocks/matchMedia';
-import { logger } from './mocks/pui-diagnostics';
+import addMatchMedia from './mocks/matchMedia.js';
+import { logger } from './mocks/pui-diagnostics.js';
 
-if (expect) expect.extend(toHaveNoViolations);
+// eslint-disable-next-line no-console
+const originalError = console.error;
+// eslint-disable-next-line no-console
+console.error = (...args) => {
+  const ignoreList = [
+    `Warning: Can't perform a React state update on an unmounted component`,
+    `Warning: Function components cannot be given refs`,
+    `Warning: Failed %s type:`,
+    `Warning: Invalid DOM property`,
+    `Warning: Each child in a list should have a unique`,
+    'Warning: Received `%s` for a non-boolean attribute',
+    'Warning: <%s /> is using incorrect casing.',
+    'Warning: The tag <%s> is unrecognized in this browser',
+    'Warning: Invalid arguments supplied to oneOf',
+  ];
+  if (
+    ignoreList.find(
+      (ignoreMsg) => !!args.find((arg) => arg?.includes?.(ignoreMsg)),
+    )
+  )
+    return false;
+  return originalError(...args);
+};
+
+if (expect) expect.extend(jestAxe.toHaveNoViolations);
 jest.setTimeout(60000);
 
 const addElementToBody = (element) => {

package/lib/testing/vitest.config.ts

@@ -0,0 +1,16 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  test: {
+    global: true,
+    root: process.cwd(),
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache', 'e2e'],
+    setupFiles: [path.resolve(__dirname, './vitest.setup.ts')],
+    coverage: {
+      reportsDirectory: './reports/coverage',
+    },
+    environment: 'happy-dom',
+  },
+});

package/lib/transpile/.swcrc

@@ -0,0 +1,11 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "jsx": true,
+      "tsx": true,
+      "dynamicImport": true
+    },
+    "target": "es2020"
+  }
+}

package/lib/transpile/esbuild.js

@@ -0,0 +1,63 @@
+const esbuild = require('esbuild');
+const fg = require('fast-glob');
+const fs = require('fs');
+const path = require('path');
+const { getPUIConfig } = require('../pui-config');
+// const browserslistToEsbuild = require('browserslist-to-esbuild');
+
+const { esBuild } = getPUIConfig();
+
+const commonConfig = {
+  bundle: false,
+  target: esBuild.target, // browserslistToEsbuild(),
+  loader: { '.js': 'jsx' },
+  mainFields: ['module', 'browser', 'main'],
+  inject: [path.resolve(__dirname, './react-shim.js')],
+};
+
+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 = [
+    `${srcPath}/**/*.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.test.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.stories.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.endpoint.{js,jsx,ts,tsx}`,
+  ];
+  if (commonJS) {
+    const outdir = `${distFolder}/cjs`;
+    const commonJSEntryPoints = await fg(inputFiles);
+    await esbuild.build({
+      entryPoints: commonJSEntryPoints,
+      ...commonConfig,
+      outdir,
+      format: 'cjs',
+    });
+    await copyFiles({ srcdir: srcPath, outdir });
+  } else {
+    const outdir = `${distFolder}/es`;
+    const entryPoints = await fg(
+      inputFiles.concat([`!${srcPath}/**/cjs/**/*.{js,jsx,ts,tsx}`]),
+    );
+    await esbuild.build({
+      entryPoints,
+      ...commonConfig,
+      outdir,
+      format: 'esm',
+    });
+    await copyFiles({ srcdir: srcPath, outdir });
+  }
+};
+
+exports.esBuild = build;

package/lib/transpile/react-shim.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export { React };

package/lib/transpile/swcrc.config.js

@@ -0,0 +1,13 @@
+const fs = require('fs');
+const path = require('path');
+const { merge } = require('lodash');
+
+let projectConfig = {};
+const projectPath = path.join(process.cwd(), '.swcrc');
+if (fs.existsSync(projectPath)) {
+  projectConfig = JSON.parse(fs.readFileSync(projectPath, 'utf-8'));
+}
+const localConfig = JSON.parse(
+  fs.readFileSync(path.join(__dirname, '.swcrc'), 'utf-8'),
+);
+module.exports = merge(localConfig, projectConfig);

package/lib/typescript/tsc-files/index.js

@@ -0,0 +1,66 @@
+const execa = require('execa');
+const fs = require('fs');
+const path = require('path');
+
+const { randomChars, resolveFromRoot } = require('./utils');
+
+const args = process.argv.slice(2);
+const argsProjectIndex = args.findIndex((arg) =>
+  ['-p', '--project'].includes(arg),
+);
+const argsProjectValue =
+  argsProjectIndex !== -1 ? args[argsProjectIndex + 1] : undefined;
+
+const files = args.filter((file) => /\.(ts|tsx)$/.test(file));
+if (files.length === 0) {
+  process.exit(0);
+}
+
+const remainingArgsToForward = args
+  .slice()
+  .filter((arg) => !files.includes(arg));
+
+if (argsProjectIndex !== -1) {
+  remainingArgsToForward.splice(argsProjectIndex, 2);
+}
+
+// Load existing config
+const tsconfigPath = argsProjectValue || resolveFromRoot('tsconfig.json');
+const tsconfigContent = fs.readFileSync(tsconfigPath).toString();
+// Use 'eval' to read the JSON as regular JavaScript syntax so that comments are allowed
+// eslint-disable-next-line prefer-const
+let tsconfig = {};
+// eslint-disable-next-line no-eval
+eval(`tsconfig = ${tsconfigContent}`);
+
+// Write a temp config file
+const tmpTsconfigPath = resolveFromRoot(`tsconfig.${randomChars()}.json`);
+const tmpTsconfig = {
+  ...tsconfig,
+  compilerOptions: {
+    ...tsconfig.compilerOptions,
+    skipLibCheck: true,
+  },
+  files,
+  include: ['app', 'lib'],
+};
+fs.writeFileSync(tmpTsconfigPath, JSON.stringify(tmpTsconfig, null, 2));
+
+// Type-check our files
+let status = 0;
+try {
+  execa.sync(
+    path.resolve(
+      process.cwd(),
+      `./node_modules/.bin/tsc${process.platform === 'win32' ? '.cmd' : ''}`,
+    ),
+    ['-p', tmpTsconfigPath, ...remainingArgsToForward],
+    { stdio: 'inherit' },
+  );
+} catch (ex) {
+  status = ex.exitCode;
+}
+
+// Delete temp config file
+fs.unlinkSync(tmpTsconfigPath);
+process.exit(status);

package/lib/typescript/tsc-files/utils.js

@@ -0,0 +1,16 @@
+const { dirname, join } = require('path');
+
+const randomChars = () => Math.random().toString(36).slice(2);
+
+const resolveFromModule = (moduleName, ...paths) => {
+  const modulePath = dirname(require.resolve(`${moduleName}/package.json`));
+  return join(modulePath, ...paths);
+};
+
+const resolveFromRoot = (...paths) => join(process.cwd(), ...paths);
+
+module.exports = {
+  randomChars,
+  resolveFromModule,
+  resolveFromRoot,
+};

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,13 +72,11 @@ const getAlias = () =>
       '@babel/runtime',
       'react',
       'react-dom',
-      'react-router-dom',
       'react-redux',
       'redux',
       'redux-saga',
       'moment',
       'lodash',
-      'connected-react-router',
       'styled-components',
       'immer',
       'react-dates',
@@ -122,7 +123,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 +185,39 @@ const isGoogleTagManagerEnabled = () => {
   return !!appConfig?.googleTagManager;
 };
 
+const getCompressionPlugins = (isLibrary = false) => {
+  const excludeList = [
+    /\/adrum-ext/,
+    /\/emuiUserMonitoring/,
+    /\/emuiDiagnostics/,
+    /\/emuiAppLoader/,
+    /\/encwLoader/,
+  ];
+  const commonConfig = {
+    test: /\.(js|css)$/,
+    exclude: !isLibrary ? excludeList : [],
+    // 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.base.babel.js

@@ -4,11 +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 ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const { ProvidePlugin } = require('webpack');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const { ProvidePlugin, ProgressPlugin } = require('webpack');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const {
   excludeNodeModulesExcept,
@@ -16,13 +16,8 @@ const {
   modulesToTranspile,
   getAlias,
   getPaths,
-  getMediaPath,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
-const { isTypeScriptEnabled } = require('../typescript/util');
 
-// get the application configuration
-const devMode = process.env.NODE_ENV !== 'production';
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
   options: {},
@@ -35,9 +30,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: '/',
@@ -47,8 +39,6 @@ const plugins = [
   new webpack.DefinePlugin({
     APP_CONFIG: getAppConfig(),
   }),
-  new CaseSensitivePathsPlugin(),
-  // new ESLintPlugin(),
   new ProvidePlugin({
     React: 'react',
   }),
@@ -106,27 +96,27 @@ const plugins = [
     ],
   }),
   new DuplicatePackageCheckerPlugin(),
-  new MomentLocalesPlugin(),
+  new MomentLocalesPlugin({ localesToKeep: ['es-us'] }),
   new WebpackManifestPlugin(),
-];
-
-if (isTypeScriptEnabled()) {
-  plugins.push(
-    new ForkTsCheckerWebpackPlugin({
-      async: devMode,
-      eslint: {
-        files: './app/**/*.{ts,js,tsx,jsx}',
+  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) => ({
   mode: options.mode,
   entry: options.entry,
   output: {
     clean: true,
-    // Compile into js/build.js
     path: buildPath,
     publicPath,
     ...options.output,
@@ -135,39 +125,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,
@@ -176,12 +134,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,
@@ -190,12 +148,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),
           {
@@ -205,13 +166,6 @@ module.exports = (options) => ({
               sourceMap: true,
             },
           },
-          {
-            loader: 'esbuild-loader',
-            options: {
-              loader: 'css',
-              minify: options.mode === 'production',
-            },
-          },
           {
             loader: 'postcss-loader',
             options: {
@@ -225,47 +179,39 @@ module.exports = (options) => ({
       },
       {
         test: /\.(woff|woff2)$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset/resource',
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
       },
       {
-        test: /\.svg$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-          {
-            loader: 'file-loader',
-            options: {
-              name: getMediaPath(),
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(jpe?g|png|gif|ico)$/i,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        type: 'asset',
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: /^((?!url).)*$/,
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
+        use: ['@svgr/webpack'],
       },
       {
-        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 || {}),
     },
@@ -276,6 +222,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

@@ -4,6 +4,9 @@ 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,6 +75,7 @@ const devConfig = {
 
   // Add development plugins
   plugins: [
+    new webpack.ProgressPlugin(),
     new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
     new ReactRefreshWebpackPlugin({
       overlay: {
@@ -79,6 +83,7 @@ const devConfig = {
       },
     }),
     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 +110,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 +117,4 @@ const devConfig = {
   },
 };
 
-module.exports = baseConfigFactory(devConfig);
+module.exports = smp.wrap(baseConfigFactory(devConfig));