@elliemae/pui-cli 6.0.0-beta.20 → 6.0.0-beta.24

package/lib/cli-commands/pack.js

@@ -4,7 +4,7 @@ const path = require('path');
 const { writeFile, readFile } = require('fs/promises');
 const { exec, logInfo, logError, logSuccess } = require('./utils');
 const { isTypeScriptEnabled } = require('../typescript/util');
-const { esBuild } = require('../esbuild');
+const { esBuild } = require('../transpile/esbuild');
 
 const { name } = require('../../package.json');
 

package/lib/cli-commands/test.js

@@ -1,6 +1,6 @@
 const { exit } = require('yargs');
 const { exec, logError, logSuccess } = require('./utils');
-const { lintCSS, lintJS } = require('./lint');
+// const { lintCSS, lintJS } = require('./lint');
 
 const { CI = false } = process.env;
 
@@ -21,20 +21,18 @@ async function handler(argv) {
   if (argv.r) commandOptions += ' --bail --findRelatedTests';
   if (argv.s) commandOptions += ' --silent';
   try {
-    if (!CI) {
-      try {
-        await lintJS();
-        await lintCSS();
-        logSuccess('Linting completed');
-      } catch (err) {
-        logError('Linting failed');
-        exit(-1, err);
-        return -1;
-      }
-    } else {
-      await exec('rimraf ./reports');
-    }
-
+    // if (!CI) {
+    //   try {
+    //     await lintJS();
+    //     await lintCSS();
+    //     logSuccess('Linting completed');
+    //   } catch (err) {
+    //     logError('Linting failed');
+    //     exit(-1, err);
+    //     return -1;
+    //   }
+    // }
+    await exec('rimraf ./reports');
     // eslint-disable-next-line jest/valid-title, jest/no-disabled-tests, jest/expect-expect
     await test(commandOptions);
     logSuccess('Unit test execution completed');

package/lib/lint/eslint/common.js

@@ -37,12 +37,10 @@ const baseRules = {
   'import/prefer-default-export': 0,
   'import/extensions': [
     2,
-    'ignorePackages',
+    'never',
     {
-      js: 'never',
-      jsx: 'never',
-      ts: 'never',
-      tsx: 'never',
+      json: 'ignorePackages',
+      js: 'ignorePackages',
     },
   ],
   indent: [
@@ -105,7 +103,7 @@ const reactRules = {
   'react/react-in-jsx-scope': 0,
   'react/jsx-filename-extension': [
     1,
-    { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    { extensions: ['.js', '.jsx', '.tsx', '.mdx'] },
   ],
   'redux-saga/no-yield-in-race': 2,
   'redux-saga/yield-effects': 2,

package/lib/pui-config/index.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const fs = require('fs');
+const { merge } = require('lodash');
+
+const baseConfig = {
+  esBuild: {
+    target: 'es2020',
+  },
+};
+
+const getPUIConfig = () => {
+  const configPath = path.resolve(process.cwd(), './pui.config.js');
+  if (!fs.existsSync(configPath)) return baseConfig;
+  const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  return merge(baseConfig, config);
+};
+
+exports.getPUIConfig = getPUIConfig;

package/lib/testing/jest.config.js

@@ -42,8 +42,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
@@ -71,12 +71,20 @@ const jestConfig = {
   },
   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: 'ts-jest-resolver',
+  transform: {
+    '^.+\\.[jt]sx?$': [
+      'esbuild-jest',
+      {
+        target: 'node14',
+      },
+    ],
+  },
   transformIgnorePatterns: [
-    'node_modules/(?!(@elliemae/*|lodash-es/*)/)',
-    'node_modules/@elliemae/em-platform-document-viewer',
+    'node_modules/(?!(@elliemae/pui-cli/lib/testing/*)/)',
   ],
   globals: {
     APP_CONFIG: getAppConfig(),
@@ -86,7 +94,7 @@ const jestConfig = {
   testEnvironment: 'jsdom',
 };
 
-if (isReactModule)
+if (isReactModule && jestConfig.setupFilesAfterEnv)
   jestConfig.setupFilesAfterEnv.push(
     `${getRootDir()}/lib/testing/setup-styled-components-tests.js`,
   );

package/lib/testing/mocks/matchMedia.js

@@ -1,7 +1,7 @@
 /**
  *
  */
-export default function () {
+export default () => {
   Object.defineProperty(window, 'matchMedia', {
     value: () => ({
       matches: false,
@@ -15,4 +15,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/setup-tests.js

@@ -3,12 +3,12 @@
 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);
+if (expect) expect.extend(jestAxe.toHaveNoViolations);
 jest.setTimeout(60000);
 
 const addElementToBody = (element) => {

package/lib/{esbuild.js → transpile/esbuild.js}

@@ -2,12 +2,13 @@ const esbuild = require('esbuild');
 const fg = require('fast-glob');
 const fs = require('fs');
 const path = require('path');
+const { getPUIConfig } = require('../pui-config');
 
-const ESBUILD_TARGET = 'es2020';
+const { esBuild } = getPUIConfig();
 
 const commonConfig = {
   bundle: false,
-  target: ESBUILD_TARGET,
+  target: esBuild.target,
   loader: { '.js': 'jsx' },
   mainFields: ['module', 'browser', 'main'],
   inject: [path.resolve(__dirname, './react-shim.js')],
@@ -33,30 +34,29 @@ const build = async ({ srcPath, commonJS }) => {
     `!${srcPath}/**/*.stories.{js,jsx,ts,tsx}`,
     `!${srcPath}/**/*.endpoint.{js,jsx,ts,tsx}`,
   ];
-  if (!commonJS) {
-    const outdir = `${distFolder}/es`;
-    const entryPoints = await fg(inputFiles);
+  if (commonJS) {
+    const outdir = `${distFolder}/cjs`;
+    const commonJSEntryPoints = await fg(inputFiles);
     await esbuild.build({
-      entryPoints,
+      entryPoints: commonJSEntryPoints,
       ...commonConfig,
       outdir,
-      format: 'esm',
+      format: 'cjs',
     });
     await copyFiles({ srcdir: srcPath, outdir });
   } else {
-    const outdir = `${distFolder}/cjs`;
-    const commonJSEntryPoints = await fg(
-      inputFiles.concat([`${srcPath}/**/*.cjs`]),
+    const outdir = `${distFolder}/es`;
+    const entryPoints = await fg(
+      inputFiles.concat([`!${srcPath}/**/cjs/**/*.{js,jsx,ts,tsx}`]),
     );
     await esbuild.build({
-      entryPoints: commonJSEntryPoints,
+      entryPoints,
       ...commonConfig,
       outdir,
-      format: 'cjs',
+      format: 'esm',
     });
     await copyFiles({ srcdir: srcPath, outdir });
   }
 };
 
 exports.esBuild = build;
-exports.ESBUILD_TARGET = ESBUILD_TARGET;

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

@@ -17,7 +17,8 @@ const {
   getAlias,
   getPaths,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
+const { getPUIConfig } = require('../pui-config');
+const { esBuild } = getPUIConfig();
 
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
@@ -152,7 +153,7 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'jsx',
-            target: ESBUILD_TARGET,
+            target: esBuild.target,
           },
         },
       },
@@ -166,7 +167,7 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'tsx',
-            target: ESBUILD_TARGET,
+            target: esBuild.target,
           },
         },
       },
@@ -240,6 +241,6 @@ module.exports = (options) => ({
     '@elliemae/pui-diagnostics': 'emuiDiagnostics',
   },
   devtool: options.devtool || 'eval-source-map',
-  target: 'web', // Make web variables accessible to webpack, e.g. window
+  target: 'web',
   performance: options.performance || {},
 });

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

@@ -105,8 +105,6 @@ const devConfig = {
     }),
   ],
 
-  // 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.base.babel.js

@@ -19,7 +19,8 @@ const {
   getAssetPath,
   getAlias,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
+const { getPUIConfig } = require('../pui-config');
+const { esBuild } = getPUIConfig();
 
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
@@ -74,7 +75,7 @@ module.exports = (options) => ({
   module: {
     rules: [
       {
-        test: /^(?!.*\.exec\.js$).*\.(js|ts|jsx|tsx)$/,
+        test: /^(?!.*\.exec\.js$).*\.[jt]sx?$/,
         enforce: 'pre',
         exclude: /node_modules/,
         resolve: {
@@ -91,7 +92,7 @@ module.exports = (options) => ({
         ],
       },
       {
-        test: /^(?!.*\.exec\.js$).*\.(js|ts|jsx|tsx)$/, // Transform all .js and .jsx files with Babel
+        test: /^(?!.*\.exec\.js$).*\.jsx?$/, // Transform all .js and .jsx files with Babel
         exclude: excludeNodeModulesExcept(modulesToTranspile),
         resolve: {
           fullySpecified: false,
@@ -100,7 +101,21 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'jsx',
-            target: ESBUILD_TARGET,
+            target: esBuild.target,
+          },
+        },
+      },
+      {
+        test: /^(?!.*\.exec\.js$).*\.tsx?$/, // Transform all .js and .jsx files with Babel
+        exclude: excludeNodeModulesExcept(modulesToTranspile),
+        resolve: {
+          fullySpecified: false,
+        },
+        use: {
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'tsx',
+            target: esBuild.target,
           },
         },
       },
@@ -155,10 +170,6 @@ module.exports = (options) => ({
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset/resource',
       },
-      {
-        type: 'asset',
-        resourceQuery: /url/, // *.svg?react
-      },
       {
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
@@ -183,6 +194,10 @@ module.exports = (options) => ({
         resourceQuery: /resource/,
         type: 'asset/resource',
       },
+      {
+        type: 'asset',
+        resourceQuery: /url/,
+      },
     ],
   },
   plugins: plugins.concat(options.plugins || []),
@@ -191,7 +206,6 @@ module.exports = (options) => ({
     extensions: ['.wasm', '.mjs', '.ts', '.tsx', '.js', '.jsx', '.json'],
     mainFields: ['browser', 'module', 'main'],
     alias: {
-      'lodash-es': 'lodash',
       ...getAlias(),
       ...((options.resolve || {}).alias || {}),
     },

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

@@ -43,8 +43,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

@@ -4,7 +4,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const { getLibraryName, getCompressionPlugins } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
+const { getPUIConfig } = require('../pui-config');
+const { esBuild } = getPUIConfig();
 
 const libraryName = getLibraryName();
 
@@ -23,7 +24,7 @@ module.exports = require('./webpack.lib.base.babel')({
     minimize: true,
     minimizer: [
       new ESBuildMinifyPlugin({
-        target: ESBUILD_TARGET,
+        target: esBuild.target,
         css: true,
       }),
     ],

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

@@ -16,7 +16,8 @@ const {
   isGoogleTagManagerEnabled,
   getCompressionPlugins,
 } = require('./helpers');
-const { ESBUILD_TARGET } = require('../esbuild');
+const { getPUIConfig } = require('../pui-config');
+const { esBuild } = getPUIConfig();
 
 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: esBuild.target,
           css: true,
         }),
       ],

package/lib/webpack/webpack.storybook.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ResolveTypeScriptPlugin = require('resolve-typescript-plugin').default;
 const {
   getAppConfig,
   isApp,
@@ -45,7 +46,7 @@ const getAdditionalPlugins = () => [
 
 const getModuleRules = () => [
   {
-    test: /\.(js|ts|jsx|tsx)$/,
+    test: /\.[jt]sx?$/,
     enforce: 'pre',
     exclude: /node_modules/,
     resolve: {
@@ -87,6 +88,10 @@ exports.webpackFinal = async (config, { configType }) => {
   config.resolve.alias = { ...config.resolve.alias, ...getAlias() };
   config.resolve.fallback = { ...config.resolve.fallback, crypto: false };
   config.resolve.extensions.push('.svg');
+  config.resolve.plugins = [
+    ...(config.resolve.plugins || []),
+    new ResolveTypeScriptPlugin(),
+  ];
   config.externals = config.externals || {};
   config.externals['@elliemae/pui-user-monitoring'] = 'emuiUserMonitoring';
   config.externals['@elliemae/pui-app-loader'] = 'emuiAppLoader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "6.0.0-beta.20",
+  "version": "6.0.0-beta.24",
   "private": false,
   "description": "ICE MT UI Platform CLI",
   "sideEffects": false,
@@ -70,27 +70,27 @@
     "@semantic-release/changelog": "~6.0.1",
     "@semantic-release/exec": "~6.0.2",
     "@semantic-release/git": "~10.0.1",
-    "@storybook/addon-a11y": "~6.4.7",
-    "@storybook/addon-essentials": "~6.4.7",
+    "@storybook/addon-a11y": "~6.4.8",
+    "@storybook/addon-essentials": "~6.4.8",
     "@storybook/addon-events": "~6.2.9",
-    "@storybook/addon-interactions": "~6.4.7",
-    "@storybook/addon-links": "~6.4.7",
-    "@storybook/addon-storysource": "~6.4.7",
-    "@storybook/builder-webpack5": "~6.4.7",
-    "@storybook/manager-webpack5": "~6.4.7",
-    "@storybook/react": "~6.4.7",
-    "@storybook/theming": "~6.4.7",
+    "@storybook/addon-interactions": "~6.4.8",
+    "@storybook/addon-links": "~6.4.8",
+    "@storybook/addon-storysource": "~6.4.8",
+    "@storybook/builder-webpack5": "~6.4.8",
+    "@storybook/manager-webpack5": "~6.4.8",
+    "@storybook/react": "~6.4.8",
+    "@storybook/theming": "~6.4.8",
     "@stylelint/postcss-css-in-js": "~0.37.2",
-    "@svgr/webpack": "~6.1.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.11",
     "@types/rimraf": "~3.0.2",
     "@types/testing-library__jest-dom": "~5.14.2",
-    "@typescript-eslint/eslint-plugin": "~5.5.0",
-    "@typescript-eslint/parser": "~5.5.0",
+    "@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",
@@ -125,11 +125,11 @@
     "dotenv": "~10.0.0",
     "dotenv-webpack": "~7.0.3",
     "duplicate-package-checker-webpack-plugin": "~3.0.0",
-    "esbuild": "~0.14.1",
+    "esbuild": "~0.14.2",
     "esbuild-jest": "~0.5.0",
     "esbuild-loader": "~2.16.0",
     "esbuild-plugin-svgr": "~0.0.3",
-    "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",
@@ -179,10 +179,10 @@
     "minimist": "~1.2.5",
     "moment": "~2.29.1",
     "moment-locales-webpack-plugin": "~1.2.0",
-    "msw": "~0.35.0",
+    "msw": "~0.36.0",
     "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.1",
     "pino-pretty": "~7.2.0",
@@ -195,7 +195,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",
@@ -205,6 +205,7 @@
     "react-refresh": "~0.11.0",
     "react-test-renderer": "~17.0.2",
     "resize-observer-polyfill": "~1.5.1",
+    "resolve-typescript-plugin": "~1.1.1",
     "rimraf": "~3.0.2",
     "script-loader": "~0.7.2",
     "semantic-release": "~18.0.1",
@@ -222,6 +223,7 @@
     "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.2",
     "tsc-files": "~1.1.3",
@@ -233,7 +235,7 @@
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
     "vite": "~2.6.14",
-    "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",