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

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('../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

@@ -5,7 +5,9 @@ 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,7 +15,8 @@ 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';

package/lib/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/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'];
@@ -112,16 +113,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/react-shim.js

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

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

@@ -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`,
@@ -74,7 +75,7 @@ const jestConfig = {
   snapshotSerializers: [],
   testResultsProcessor: 'jest-sonar-reporter',
   transformIgnorePatterns: [
-    'node_modules/(?!(@elliemae/*)/)',
+    'node_modules/(?!(@elliemae/*|lodash-es/*)/)',
     'node_modules/@elliemae/em-platform-document-viewer',
   ],
   globals: {

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/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'));

package/lib/webpack/helpers.js

@@ -2,7 +2,8 @@
 const path = require('path');
 const fs = require('fs');
 const _ = require('lodash');
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const zlib = require('zlib');
 
 let pathSep = path.sep;
 if (pathSep === '\\')
@@ -71,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',
@@ -89,7 +88,12 @@ const getAlias = () =>
     './node_modules',
   );
 
-const modulesToTranspile = ['@elliemae/pui-*', '@elliemae/ds-*', '@dnd-kit/*'];
+const modulesToTranspile = [
+  '@elliemae/pui-*',
+  '@elliemae/ds-*',
+  '@dnd-kit/*',
+  '@elliemae/em-platform-document-viewer',
+];
 
 const getUserMonitoringFileName = () => {
   const libName = 'emuiUserMonitoring';
@@ -176,37 +180,42 @@ const isAppLoaderEnabled = () => process.env.APP_LOADER === 'true';
 
 const getMediaPath = () => `assets/[name].[contenthash].[ext]`;
 
-const getImageMinimizerPlugin = () =>
-  new ImageMinimizerPlugin({
-    minimizerOptions: {
-      // Lossless optimization with custom option
-      // Feel free to experiment with options for better result for you
-      plugins: [
-        ['gifsicle', { interlaced: true }],
-        ['jpegtran', { progressive: true }],
-        ['optipng', { optimizationLevel: 5 }],
-        // Svgo configuration here https://github.com/svg/svgo#configuration
-        [
-          'svgo',
-          {
-            plugins: [
-              {
-                name: 'preset-default',
-                params: {
-                  overrides: {
-                    removeViewBox: false,
-                    addAttributesToSVGElement: {
-                      attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
-                    },
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      ],
-    },
-  });
+const isGoogleTagManagerEnabled = () => {
+  const appConfig = JSON.parse(getAppConfig());
+  return !!appConfig?.googleTagManager;
+};
+
+const getCompressionPlugins = () => {
+  const commonConfig = {
+    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,
+  };
+  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;
@@ -221,7 +230,6 @@ exports.isAppLoaderEnabled = isAppLoaderEnabled;
 exports.LATEST_VERSION = LATEST_VERSION;
 exports.getPaths = getPaths;
 exports.getMediaPath = getMediaPath;
-exports.getImageMinimizerPlugin = getImageMinimizerPlugin;
 exports.resolveExtensions = [
   '.wasm',
   '.mjs',
@@ -232,3 +240,5 @@ exports.resolveExtensions = [
   '.json',
 ];
 exports.mainFields = ['browser', 'module', 'main'];
+exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;
+exports.getCompressionPlugins = getCompressionPlugins;