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

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

@@ -13,7 +13,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,39 @@
+const esbuild = require('esbuild');
+const fg = require('fast-glob');
+
+const ESBUILD_TARGET = 'es2020';
+
+const commonConfig = {
+  bundle: false,
+  target: ESBUILD_TARGET,
+  loader: { '.js': 'jsx' },
+  mainFields: ['module', 'browser', 'main'],
+};
+
+const outDir = 'dist';
+
+const build = async ({ srcPath, commonJS }) => {
+  const entryPoints = await fg([
+    `${srcPath}/**/*.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.test.{js,jsx,ts,tsx}`,
+    `!${srcPath}/**/*.stories.{js,jsx,ts,tsx}`,
+  ]);
+  if (!commonJS) {
+    await esbuild.build({
+      entryPoints,
+      ...commonConfig,
+      outdir: `${outDir}/es`,
+      format: 'esm',
+    });
+  } else {
+    await esbuild.build({
+      entryPoints,
+      ...commonConfig,
+      outdir: `${outDir}/cjs`,
+      format: 'cjs',
+    });
+  }
+};
+
+exports.esBuild = build;
+exports.ESBUILD_TARGET = ESBUILD_TARGET;

package/lib/lint/eslint/common.js

@@ -112,16 +112,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';

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/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

@@ -1,8 +1,6 @@
-/* eslint-disable max-lines */
 const path = require('path');
 const fs = require('fs');
 const _ = require('lodash');
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 let pathSep = path.sep;
 if (pathSep === '\\')
@@ -89,7 +87,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';
@@ -119,6 +122,7 @@ 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',
@@ -176,37 +180,10 @@ 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;
+};
 
 exports.excludeNodeModulesExcept = excludeNodeModulesExcept;
 exports.getLibraryName = getLibraryName;
@@ -221,7 +198,6 @@ exports.isAppLoaderEnabled = isAppLoaderEnabled;
 exports.LATEST_VERSION = LATEST_VERSION;
 exports.getPaths = getPaths;
 exports.getMediaPath = getMediaPath;
-exports.getImageMinimizerPlugin = getImageMinimizerPlugin;
 exports.resolveExtensions = [
   '.wasm',
   '.mjs',
@@ -232,3 +208,4 @@ exports.resolveExtensions = [
   '.json',
 ];
 exports.mainFields = ['browser', 'module', 'main'];
+exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;

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

@@ -1,10 +1,5 @@
 /* eslint-disable max-lines */
-/**
- * COMMON WEBPACK CONFIGURATION
- */
-
 const webpack = require('webpack');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PostcssPresetEnv = require('postcss-preset-env');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -12,9 +7,6 @@ const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const stylelintFormatter = require('stylelint-formatter-pretty');
-// const ESLintPlugin = require('eslint-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { ProvidePlugin } = require('webpack');
 
 const {
@@ -24,14 +16,10 @@ const {
   getAlias,
   getPaths,
   getMediaPath,
-  getImageMinimizerPlugin,
 } = require('./helpers');
-const { isTypeScripEnabled } = require('../typescript/util');
-
-const ESBUILD_TARGET = 'es2020';
+const { ESBUILD_TARGET } = require('../esbuild');
 
 // get the application configuration
-const devMode = process.env.NODE_ENV !== 'production';
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
   options: {},
@@ -61,14 +49,6 @@ const plugins = [
   new ProvidePlugin({
     React: 'react',
   }),
-  new StyleLintPlugin({
-    emitError: true,
-    emitWarning: true,
-    allowEmptyInput: true,
-    failOnError: !devMode,
-    formatter: stylelintFormatter,
-    files: '(lib|app)/**/view/**/*.{js,ts,jsx,tsx}',
-  }),
   new CopyWebpackPlugin({
     patterns: [
       {
@@ -87,21 +67,29 @@ const plugins = [
       {
         from: 'node_modules/@elliemae/pui-user-monitoring/dist/public/js',
         to: 'js',
+        toType: 'dir',
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/pui-app-loader/dist/public/js/emuiAppLoader*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/pui-app-loader/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/encw-loader/dist/public/js/emuiEncwLoader*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/encw-loader/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
-        from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js/emuiDiagnostics*.js',
-        to: 'js/[name][ext]',
+        from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js',
+        to: 'js',
+        toType: 'dir',
         noErrorOnMissing: true,
+        info: { minimized: true },
       },
       {
         from: 'public',
@@ -117,20 +105,8 @@ const plugins = [
   new DuplicatePackageCheckerPlugin(),
   new MomentLocalesPlugin(),
   new WebpackManifestPlugin(),
-  getImageMinimizerPlugin(),
 ];
 
-if (isTypeScripEnabled()) {
-  plugins.push(
-    new ForkTsCheckerWebpackPlugin({
-      async: devMode,
-      eslint: {
-        files: './app/**/*.{ts,js,tsx,jsx}',
-      },
-    }),
-  );
-}
-
 module.exports = (options) => ({
   mode: options.mode,
   entry: options.entry,
@@ -144,6 +120,21 @@ module.exports = (options) => ({
   optimization: options.optimization,
   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',
@@ -239,7 +230,7 @@ module.exports = (options) => ({
         ],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },
@@ -260,6 +251,7 @@ 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.dev.babel.js

@@ -1,7 +1,3 @@
-/**
- * DEVELOPMENT WEBPACK CONFIGURATION
- */
-
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -9,7 +5,12 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
-const { getAssetPath, isAppLoaderEnabled, getPaths } = require('./helpers');
+const {
+  getAssetPath,
+  isAppLoaderEnabled,
+  getPaths,
+  isGoogleTagManagerEnabled,
+} = require('./helpers');
 const baseConfigFactory = require('./webpack.base.babel');
 
 const {
@@ -25,6 +26,14 @@ const {
 const devConfig = {
   mode: 'development',
 
+  cache: {
+    type: 'filesystem',
+    allowCollectingMemory: true,
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+
   // Add hot reloading in development
   entry: {
     app: [
@@ -83,6 +92,7 @@ const devConfig = {
         appLoaderScriptPath,
         diagnosticsScriptPath,
         encwLoaderScriptPath,
+        googleTagManager: isGoogleTagManagerEnabled(),
       },
     }),
     new CircularDependencyPlugin({