@elliemae/pui-cli 6.0.0-beta.2 → 6.0.0-beta.23

package/lib/babel/babel.config.js

@@ -10,7 +10,7 @@ const nodeEnvPreset = {
 const webEnvPreset = {
   modules: process.env.ES_MODULES === 'false' ? 'commonjs' : false,
   useBuiltIns: 'usage',
-  corejs: { version: '3.18', proposals: true },
+  corejs: { version: '3.19', proposals: true },
 };
 
 const presetEnvOptions =
@@ -39,13 +39,14 @@ const config = {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-export-default-from',
+    'lodash',
+    'date-fns',
   ],
   env: {
     development: {
       plugins: [
         ['babel-plugin-styled-components', { displayName: true }],
         '@babel/plugin-transform-react-jsx-source',
-        'react-refresh/babel',
       ],
     },
     production: {
@@ -79,7 +80,11 @@ if (process.env.MODULE_EXTENSIONS === 'true') {
   config.plugins.push('babel-plugin-add-import-extension');
 }
 
-// ToDo: Once ECC team migrates from webpack 3 to webpack 5 remove tis strip-block plugin from commonjs output. without this they are receiving error when import.meta is used in app sdk
+if (process.env.STORYBOOK_BUILD !== 'true') {
+  config.env?.development?.plugins?.push?.('react-refresh/babel');
+}
+
+// ToDo: Once ECC team migrates from webpack 3 to webpack 5 remove this strip-block plugin from commonjs output. without this they are receiving error when import.meta is used in app sdk
 if (process.env.ES_MODULES === 'false') {
   config.plugins.push([
     'babel-plugin-transform-strip-block',

package/lib/cli-commands/build.js

@@ -21,7 +21,7 @@ async function buildWebApp() {
 async function buildService() {
   await exec('rimraf ./build');
   await exec(
-    `cross-env NODE_ENV=production MODULE_EXTENSIONS=true TARGET_ENV=node babel --extensions '.ts,.js' --config-file ./babel.config.cjs --out-dir ./build --ignore '**/*.test.js','**/*.test.ts' ./app`,
+    `cross-env NODE_ENV=production MODULE_EXTENSIONS=true TARGET_ENV=node babel --extensions '.ts,.js' --config-file ./babel.config.cjs --out-dir ./build --copy-files --no-copy-ignored --ignore '**/*.test.ts','**/*.test.js','**/*.spec.ts','**/*.test.js' ./app`,
   );
 }
 

package/lib/cli-commands/lint.js

@@ -1,10 +1,11 @@
 const { exit } = require('yargs');
 const { exec, logError, logSuccess } = require('./utils');
-const { isTypeScripEnabled } = require('../typescript/util');
+const { isTypeScriptEnabled } = require('../typescript/util');
 
-async function lintCSS() {
+async function lintCSS(fix = false) {
+  const fixIssues = fix ? '--fix' : '';
   await exec(
-    `stylelint "./**/*.{js, ts}" --color --allowEmptyInput --ignore-pattern '/dist/**/*'`,
+    `stylelint ./{lib,app}/**/*.{js,jsx,ts,tsx} ${fixIssues} --color --allowEmptyInput --ignore-pattern /dist/**/*`,
   );
 }
 
@@ -18,7 +19,8 @@ async function lintJS(fix = false) {
 async function handler(argv) {
   if (argv.js) {
     // run typescript compilation
-    if (isTypeScripEnabled) await exec('tsc');
+    if (isTypeScriptEnabled())
+      await exec('tsc --noEmit --emitDeclarationOnly false');
     try {
       await exec('rimraf ./reports/eslint.json');
       await lintJS(argv.fix);

package/lib/cli-commands/pack.js

@@ -1,8 +1,10 @@
+/* eslint-disable max-lines */
 const { exit } = require('yargs');
 const path = require('path');
 const { writeFile, readFile } = require('fs/promises');
 const { exec, logInfo, logError, logSuccess } = require('./utils');
-const { isTypeScripEnabled } = require('../typescript/util');
+const { isTypeScriptEnabled } = require('../typescript/util');
+const { esBuild } = require('../transpile/esbuild');
 
 const { name } = require('../../package.json');
 
@@ -37,14 +39,9 @@ async function createPackageJson(file, commonJS, sideEffects) {
   await writeFile(file, packageJSON);
 }
 
-async function nodeBuild({ srcPath, commonJS, emitModuleType, target }) {
+async function nodeBuild({ srcPath, commonJS, emitModuleType }) {
   const outDir = `./dist/${commonJS ? 'cjs' : 'es'}`;
-  const targetEnv = target === 'node' ? 'TARGET_ENV=node' : '';
-  const babelEnv = commonJS ? ' ES_MODULES=false' : '';
-  await exec(
-    `cross-env NODE_ENV=production MODULE_EXTENSIONS=true ${targetEnv}${babelEnv} babel --extensions ".ts,.tsx,.js,.jsx"  ${srcPath} --out-dir ${outDir} --copy-files --ignore **/*.test.js --ignore **/*.test.ts --ignore **/*.spec.js --ignore **/*.spec.ts --ignore **/*.test.jsx --ignore **/*.test.tsx --ignore **/*.spec.jsx --ignore **/*.spec.tsx`,
-    { shell: true, stdio: 'inherit' },
-  );
+  await esBuild({ srcPath, commonJS });
   if (emitModuleType) {
     const sideEffects = await getSideEffects();
     await createPackageJson(
@@ -58,7 +55,7 @@ async function nodeBuild({ srcPath, commonJS, emitModuleType, target }) {
 async function pack({ production, target, module, srcPath, emitModuleType }) {
   logInfo('Build in-progress...');
   await exec('rimraf ./dist');
-  if (isTypeScripEnabled()) {
+  if (isTypeScriptEnabled()) {
     await compileTypeScript();
   }
   if (target !== 'node') await webBuild(production);
@@ -79,7 +76,6 @@ async function pack({ production, target, module, srcPath, emitModuleType }) {
         srcPath,
         commonJS: false,
         emitModuleType,
-        target,
       });
     }
   }
@@ -118,7 +114,6 @@ exports.builder = {
   },
   emitModuleType: {
     type: 'boolean',
-    // eslint-disable-next-line max-lines
     default: true,
     description:
       'creates type attribute in the package.json and sets its value to commonjs or module based on module cli argument. default: true',

package/lib/cli-commands/storybook.js

@@ -10,7 +10,7 @@ async function buildStoryBook(isDoc = false) {
 
 async function startStoryBook(isDoc = false) {
   await exec(
-    `cross-env FORCE_COLOR=true start-storybook ${
+    `cross-env NODE_ENV=development STORYBOOK_BUILD=true FORCE_COLOR=true start-storybook ${
       isDoc && '--docs'
     } -p 11000 --quiet`,
   );

package/lib/cli-commands/test.js

@@ -1,11 +1,13 @@
 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;
 
 async function test(commandOptions) {
-  await exec(`cross-env FORCE_COLOR=true NODE_ENV=test jest ${commandOptions}`);
+  await exec(
+    `cross-env FORCE_COLOR=true NODE_OPTIONS=--experimental-vm-modules NODE_ENV=test jest ${commandOptions}`,
+  );
 }
 
 // eslint-disable-next-line max-statements
@@ -13,25 +15,24 @@ async function handler(argv) {
   let commandOptions = '--coverage';
   if (argv.fix) commandOptions = '-u';
   else if (argv.watch) commandOptions = '--watchAll';
-  if (CI) commandOptions += ' --ci';
+  if (CI) commandOptions += ' --ci --runInBand';
+  else commandOptions += ' --maxWorkers=50%';
   if (argv.p) commandOptions += ' --passWithNoTests';
   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

@@ -9,6 +9,7 @@ exports.baseExtends = [
   'plugin:jsdoc/recommended',
   'plugin:wdio/recommended',
   'plugin:testing-library/dom',
+  'plugin:storybook/recommended',
 ];
 
 const basePlugins = ['testing-library', 'jest', 'jsdoc', 'wdio'];
@@ -36,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: [
@@ -104,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,
@@ -112,16 +111,15 @@ const reactRules = {
 exports.reactRules = reactRules;
 
 exports.baseConfig = {
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   plugins: basePlugins,
   env: {
     jest: true,
     browser: true,
     node: true,
-    es6: true,
+    es2021: true,
   },
   parserOptions: {
-    ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,

package/lib/lint/lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  '*.{ts,tsx}': ['tsc-files'],
+  '*.{ts,tsx}': ['tsc-files --noEmit --emitDeclarationOnly false'],
   '*.{js,ts,jsx,tsx}': [
     'npm run lint:fix',
     'npm run test:staged',

package/lib/lint/stylelint.config.js

@@ -1,16 +1,9 @@
 module.exports = {
-  processors: [
-    [
-      'stylelint-processor-styled-components',
-      {
-        ignoreFiles: ['**/*.scss'],
-      },
-    ],
-  ],
+  customSyntax: '@stylelint/postcss-css-in-js',
   plugins: [],
   extends: [
     'stylelint-config-recommended',
     'stylelint-config-styled-components',
   ],
-  rules: { 'selector-type-no-unknown': null },
+  rules: { 'selector-type-no-unknown': null, 'no-extra-semicolons': null },
 };

package/lib/release/release.config.js

@@ -2,11 +2,11 @@ module.exports = {
   branches: [
     '+([0-9])?(.{+([0-9]),x}).x',
     'master',
-    'next',
     'next-major',
     { name: 'beta', prerelease: true },
     { name: 'alpha', prerelease: true },
     { name: 'hotfix', prerelease: true },
+    { name: 'next', prerelease: true },
   ],
   plugins: [
     '@semantic-release/commit-analyzer',

package/lib/server/csp.js

@@ -12,6 +12,8 @@ const sources = [
   '*.ellielabs.com',
   'http://pdx-col.eum-appdynamics.com',
   'https://pdx-col.eum-appdynamics.com/',
+  'https://www.google-analytics.com',
+  'https://www.googletagmanager.com',
 ];
 
 const sendFileWithCSPNonce = ({

package/lib/server/index.js

@@ -13,8 +13,11 @@ const { loadRoutes } = require('./util');
 const { getAssetPath } = require('../webpack/helpers');
 
 const pino = expressPinoLogger({
-  prettyPrint: {
-    levelFirst: true,
+  transport: {
+    target: 'pino-pretty',
+    options: {
+      colorize: true,
+    },
   },
 });
 pino.logger.level = 'warn';
@@ -57,13 +60,6 @@ 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');
-  next();
-});
-
 // Start your app.
 app.listen(port, host, async (err) => {
   if (err) {

package/lib/server/middlewares/addDevMiddlewares.js

@@ -1,5 +1,5 @@
 const webpack = require('webpack');
-const express = require('express');
+const expressStaticGzip = require('express-static-gzip');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
 const { sendFileWithCSPNonce } = require('../csp');
@@ -25,7 +25,7 @@ module.exports = function addDevMiddlewares(app, webpackConfig) {
       heartbeat: 10 * 1000,
     }),
   );
-  app.use(express.static('cdn'));
+  app.use(expressStaticGzip('cdn'));
 
   const { outputFileSystem } = (middleware || {}).context || {};
 

package/lib/server/middlewares/addProdMiddlewares.js

@@ -1,6 +1,6 @@
 const path = require('path');
-const express = require('express');
 const compression = require('compression');
+const expressStaticGzip = require('express-static-gzip');
 const { sendFileWithCSPNonce } = require('../csp');
 
 module.exports = function addProdMiddlewares(app, options) {
@@ -17,8 +17,15 @@ module.exports = function addProdMiddlewares(app, options) {
     sendFileWithCSPNonce({ outputPath, res });
   });
 
-  app.use(publicPath, express.static(outputPath, { index: false }));
-  app.use(express.static('cdn'));
+  app.use(
+    publicPath,
+    expressStaticGzip(outputPath, {
+      index: false,
+      enableBrotli: true,
+      orderPreference: ['br'],
+    }),
+  );
+  app.use(expressStaticGzip('cdn'));
 
   app.get('*', (req, res) => sendFileWithCSPNonce({ outputPath, res }));
 };

package/lib/server/util/index.js

@@ -3,9 +3,9 @@ const path = require('path');
 
 const getCWD = () => process.cwd();
 
-const allJS = new RegExp(/\.js$/);
+const allJS = /\.js$/;
 
-const serviceEndpoints = new RegExp(/\.endpoint\.js$/);
+const serviceEndpoints = /\.endpoint\.js$/;
 
 const getFilesMatching = (filePattern) => {
   const getFiles = (dir) => {

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
@@ -62,6 +62,7 @@ const jestConfig = {
     '.*\\.(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`,
     '.*\\.(html)$': `${getRootDir()}/lib/testing/mocks/html.js`,
+    '^lodash-es$': 'lodash',
     '@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`,
@@ -70,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/*)/)',
-    'node_modules/@elliemae/em-platform-document-viewer',
+    'node_modules/(?!(@elliemae/pui-cli/lib/testing/*)/)',
   ],
   globals: {
     APP_CONFIG: getAppConfig(),
@@ -85,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/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/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/transpile/esbuild.js

@@ -0,0 +1,62 @@
+const esbuild = require('esbuild');
+const fg = require('fast-glob');
+const fs = require('fs');
+const path = require('path');
+
+const ESBUILD_TARGET = 'es2020';
+
+const commonConfig = {
+  bundle: false,
+  target: ESBUILD_TARGET,
+  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}/es`;
+    const entryPoints = await fg(inputFiles);
+    await esbuild.build({
+      entryPoints,
+      ...commonConfig,
+      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,
+      format: 'cjs',
+    });
+    await copyFiles({ srcdir: srcPath, outdir });
+  }
+};
+
+exports.esBuild = build;
+exports.ESBUILD_TARGET = ESBUILD_TARGET;

package/lib/transpile/react-shim.js

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

package/lib/typescript/util.js

@@ -1,5 +1,5 @@
 const fs = require('fs');
 const path = require('path');
 
-exports.isTypeScripEnabled = () =>
+exports.isTypeScriptEnabled = () =>
   fs.existsSync(path.join(process.cwd(), 'tsconfig.json'));