@elliemae/pui-cli 6.0.0-beta.8 → 6.0.2

package/lib/testing/jest.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { getAppConfig, getAssetPath } = require('../webpack/helpers');
+const swcrcConfig = require('../transpile/swcrc.config.js');
 
 const name = '@elliemae/pui-cli';
 const rootDir = path.join('<rootDir>', 'node_modules', name);
@@ -42,8 +43,8 @@ const jestConfig = {
     '!app/*/RbGenerated*/*.{js, ts, jsx, tsx}',
     '!app/index.{js, ts, jsx, tsx}',
     '!app/global-styles.{js, ts, jsx, tsx}',
-    '!app/*/*/loadable.{js, ts, jsx, tsx}',
-    '!lib/*/*/loadable.{js, ts, jsx, tsx}',
+    '!app/**/loadable.{js, ts, jsx, tsx}',
+    '!lib/**/loadable.{js, ts, jsx, tsx}',
   ],
   coverageThreshold: {
     // Todo: enable the coverage threshold later
@@ -58,6 +59,7 @@ const jestConfig = {
   coverageReporters: ['lcov', 'html', 'text-summary'],
   moduleDirectories: ['node_modules', 'app', 'lib'],
   moduleNameMapper: {
+    '.*\\webpack-hmr(.[t|j]s)?$': `${getRootDir()}/lib/testing/mocks/webpack-hmr.js`,
     '.*\\.(css|scss)$': `${getRootDir()}/lib/testing/mocks/cssModule.js`,
     '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico)$': `${getRootDir()}/lib/testing/mocks/image.js`,
     '.*\\.svg$': `${getRootDir()}/lib/testing/mocks/svg.js`,
@@ -66,17 +68,24 @@ const jestConfig = {
     '@elliemae/pui-user-monitoring': `${getRootDir()}/lib/testing/mocks/pui-user-monitoring.js`,
     '@elliemae/pui-app-loader': `${getRootDir()}/lib/testing/mocks/pui-app-loader.js`,
     '@elliemae/pui-diagnostics': `${getRootDir()}/lib/testing/mocks/pui-diagnostics.js`,
+    'react-spring/web': '<rootDir>/node_modules/react-spring/web.cjs.js',
+    'react-spring/renderprops':
+      '<rootDir>/node_modules/react-spring/renderprops.cjs.js',
     'styled-components':
       '<rootDir>/node_modules/styled-components/dist/styled-components.cjs.js',
   },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   setupFilesAfterEnv: [`${getRootDir()}/lib/testing/setup-tests.js`],
   setupFiles: ['raf/polyfill', 'whatwg-fetch'],
-  testRegex: '(app|lib).*/tests/.*\\.test\\.(js|ts)$',
+  testRegex: '(app|lib).*/tests/.*\\.test\\.[jt]sx?$',
   snapshotSerializers: [],
   testResultsProcessor: 'jest-sonar-reporter',
+  resolver: path.resolve(__dirname, './resolver.js'),
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest', swcrcConfig],
+  },
   transformIgnorePatterns: [
-    'node_modules/(?!(@elliemae/*|lodash-es/*)/)',
-    'node_modules/@elliemae/em-platform-document-viewer',
+    'node_modules/(?!(.*@elliemae/pui-cli|lodash-es|react-select|react-dates)/)',
   ],
   globals: {
     APP_CONFIG: getAppConfig(),
@@ -86,8 +95,9 @@ const jestConfig = {
   testEnvironment: 'jsdom',
 };
 
-if (isReactModule)
+if (isReactModule && jestConfig.setupFilesAfterEnv)
   jestConfig.setupFilesAfterEnv.push(
-    `${getRootDir()}/lib/testing/setup-styled-components-tests.js`,
+    `${getRootDir()}/lib/testing/setup-react-env.js`,
   );
-module.exports = jestConfig;
+
+exports.jestConfig = jestConfig;

package/lib/testing/jest.node.config.js

@@ -0,0 +1,8 @@
+const { jestConfig } = require('./jest.config');
+exports.jestNodeConfig = {
+  ...jestConfig,
+  testEnvironment: 'node',
+  transformIgnorePatterns: [],
+  setupFiles: [],
+  setupFilesAfterEnv: [],
+};

package/lib/testing/mocks/matchMedia.js

@@ -1,13 +1,19 @@
 /**
  *
  */
-export default function () {
+export default () => {
   Object.defineProperty(window, 'matchMedia', {
-    value: () => ({
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
       matches: false,
-      addListener: () => {},
-      removeListener: () => {},
-    }),
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
   });
 
   Object.defineProperty(window, 'getComputedStyle', {
@@ -15,4 +21,4 @@ export default function () {
       getPropertyValue: () => {},
     }),
   });
-}
+};

package/lib/testing/mocks/pui-app-loader.js

@@ -1,3 +1 @@
-module.exports = {
-  load: () => {},
-};
+export const load = () => {};

package/lib/testing/mocks/pui-diagnostics.js

@@ -1,36 +1,28 @@
-module.exports = {
-  logger() {
-    return {
-      setLogLevel() {},
-      setOptions() {},
-      info() {},
-      warn() {},
-      error() {},
-      trace() {},
-      debug() {},
-      audit() {},
-      fatal() {},
-    };
-  },
-  LogLevel: {
-    info: 'info',
-    debug: 'debug',
-    trace: 'trace',
-    warn: 'warn',
-    error: 'error',
-    audit: 'audit',
-    fatal: 'fatal',
-  },
-  Console() {
-    return {
-      log() {},
-    };
-  },
-  http() {
-    return {
-      log() {},
-    };
-  },
-  webvitals() {},
-  logUnhandledErrors() {},
+export const logger = () => ({
+  setLogLevel() {},
+  setOptions() {},
+  info() {},
+  warn() {},
+  error() {},
+  trace() {},
+  debug() {},
+  audit() {},
+  fatal() {},
+});
+export const LogLevel = {
+  info: 'info',
+  debug: 'debug',
+  trace: 'trace',
+  warn: 'warn',
+  error: 'error',
+  audit: 'audit',
+  fatal: 'fatal',
 };
+export const Console = () => ({
+  log: () => {},
+});
+export const http = () => ({
+  log() {},
+});
+export const webvitals = () => {};
+export const logUnhandledErrors = () => {};

package/lib/testing/mocks/pui-user-monitoring.js

@@ -1,5 +1,3 @@
-module.exports = {
-  setCustomUserData: () => {},
-  setCustomVirtualPageName: () => {},
-  startVirtualPageMonitoringWithAutoEnd: () => {},
-};
+export const setCustomUserData = () => {};
+export const setCustomVirtualPageName = () => {};
+export const startVirtualPageMonitoringWithAutoEnd = () => {};

package/lib/testing/mocks/retry-axios.js

@@ -1,5 +1,3 @@
-module.exports = {
-  attach: jest.fn(),
-  detach: jest.fn(),
-  getConfig: jest.fn(),
-};
+export const attach = jest.fn();
+export const detach = jest.fn();
+export const getConfig = jest.fn();

package/lib/testing/mocks/svg.js

@@ -1,3 +1,5 @@
-module.exports = {
-  ReactComponent: 'IMAGE_MOCK',
-};
+// eslint-disable-next-line no-unused-vars
+import * as React from 'react';
+
+export default 'SvgrURL';
+export const ReactComponent = 'div';

package/lib/testing/mocks/webpack-hmr.js

@@ -0,0 +1 @@
+exports.enableHotReloading = () => {};

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,116 @@
+const { build } = require('esbuild');
+const fg = require('fast-glob');
+const { writeFile, copyFile, readFile, mkdir } = require('fs/promises');
+const path = require('path');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
+
+const TARGETS = {
+  browserslist: browserslistToEsbuild(),
+  web: 'es2020',
+  node: 'node14',
+};
+
+const ESBUILD_FORMAT = {
+  CJS: 'cjs',
+  ESM: 'esm',
+};
+
+const NODE_MODULE_TYPES = {
+  CJS: 'commonjs',
+  ESM: 'module',
+};
+
+const getCommonConfig = ({ injectReactShim }) => ({
+  bundle: false,
+  loader: { '.js': 'jsx' },
+  mainFields: ['module', 'browser', 'main'],
+  inject: [
+    injectReactShim ? path.resolve(__dirname, './react-shim.js') : '',
+  ].filter(Boolean),
+});
+
+const copyFiles = async ({ srcdir, outdir }) => {
+  const files = await fg([
+    `${srcdir}/**/*.*`,
+    `!${srcdir}/**/*.{js,jsx,ts,tsx,cjs,mjs}`,
+  ]);
+  await Promise.all(
+    files.map(async (srcFilePath) => {
+      const destFilePath = srcFilePath.replace(srcdir, outdir);
+      const fileDir = path.dirname(destFilePath);
+      await mkdir(fileDir, { recursive: true });
+      await copyFile(srcFilePath, destFilePath);
+    }),
+  );
+};
+
+const getSideEffects = async () => {
+  const data = await readFile(path.join(process.cwd(), './package.json'));
+  const packageJSON = JSON.parse(data);
+  return packageJSON?.sideEffects || false;
+};
+
+const createPackageJson = async ({ outdir, type = NODE_MODULE_TYPES.ESM }) => {
+  const filePath = path.join(process.cwd(), outdir, 'package.json');
+  const packageJSON = JSON.stringify(
+    {
+      type,
+      sideEffects: await getSideEffects(),
+    },
+    null,
+    2,
+  );
+  await writeFile(filePath, packageJSON);
+};
+
+exports.esBuild = async ({
+  srcdir,
+  outdir = 'dist',
+  esmOnly = false,
+  target = TARGETS.browserslist,
+  injectReactShim = true,
+  skipNestedPackageJSON = false,
+}) => {
+  const inputFiles = [
+    `${srcdir}/**/*.{js,jsx,ts,tsx}`,
+    `!${srcdir}/**/*.d.ts`,
+    `!${srcdir}/**/*.test.{js,jsx,ts,tsx}`,
+    `!${srcdir}/**/*.stories.{js,jsx,ts,tsx}`,
+    `!${srcdir}/**/*.endpoint.{js,jsx,ts,tsx}`,
+  ];
+
+  // build commonjs
+  if (!esmOnly) {
+    const cjsOutdir = `${outdir}/cjs`;
+    const commonJSEntryPoints = await fg(inputFiles);
+    await build({
+      entryPoints: commonJSEntryPoints,
+      ...getCommonConfig({ injectReactShim }),
+      outdir: cjsOutdir,
+      format: ESBUILD_FORMAT.CJS,
+      target,
+    });
+    // copy files that are not built by esbuild
+    await copyFiles({ srcdir, outdir: cjsOutdir });
+    await createPackageJson({ outdir: cjsOutdir, type: NODE_MODULE_TYPES.CJS });
+  }
+
+  // build esm
+  const esmOutdir = esmOnly ? outdir : `${outdir}/esm`;
+  const entryPoints = await fg(
+    inputFiles.concat([`!${srcdir}/**/cjs/**/*.{js,jsx,ts,tsx}`]),
+  );
+  await build({
+    entryPoints,
+    ...getCommonConfig({ injectReactShim }),
+    outdir: esmOutdir,
+    format: ESBUILD_FORMAT.ESM,
+    target,
+  });
+  // copy files that are not built by esbuild
+  await copyFiles({ srcdir, outdir: esmOutdir });
+  if (!skipNestedPackageJSON)
+    await createPackageJson({ outdir: esmOutdir, type: NODE_MODULE_TYPES.ESM });
+};
+
+exports.TARGETS = TARGETS;

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,45 @@ 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,
+        },
+      },
+    }),
+  ];
+};
+
+const filterByFilePresence = (patterns) =>
+  patterns.filter(
+    ({ from, noErrorOnMissing }) =>
+      !noErrorOnMissing || fs.existsSync(path.resolve(process.cwd(), from)),
+  );
+
 exports.excludeNodeModulesExcept = excludeNodeModulesExcept;
 exports.getLibraryName = getLibraryName;
 exports.getAppConfig = getAppConfig;
@@ -209,3 +248,5 @@ exports.resolveExtensions = [
 ];
 exports.mainFields = ['browser', 'module', 'main'];
 exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;
+exports.getCompressionPlugins = getCompressionPlugins;
+exports.filterByFilePresence = filterByFilePresence;