@elliemae/pui-cli 6.0.0-beta.7 → 6.0.1

package/README.md

@@ -22,6 +22,14 @@
 
 ## Migration Guide
 
+### v5 to v6
+
+[ChangeLog](https://confluence.elliemae.io/display/FEAE/CLI+ChangeLog)
+
+### v4 to v5
+
+For most users this upgrade doesn't break functionality. If it does, please reach out to ui-platform-chat channel for assistance
+
 ### v3 to v4
 
 Version 4 has breaking changes that impacts only libraries (e.g: app sdk, app widgets etc) not applications

package/lib/cli-commands/build.js

@@ -6,11 +6,11 @@ const {
   logSuccess,
   writeAppInfo,
 } = require('./utils');
+const { esBuild, TARGETS } = require('../transpile/esbuild');
 
 const { name } = require('../../package.json');
 
 async function buildWebApp() {
-  logInfo('Build in progress...');
   await exec(`rimraf ./build`);
   await exec(
     `cross-env NODE_ENV=production webpack --config node_modules/${name}/lib/webpack/webpack.prod.babel.js --color`,
@@ -20,13 +20,19 @@ 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 --copy-files --no-copy-ignored --ignore '**/*.test.ts','**/*.test.js','**/*.spec.ts','**/*.test.js' ./app`,
-  );
+  await esBuild({
+    srcdir: './app',
+    outdir: 'build',
+    esmOnly: true,
+    target: TARGETS.node,
+    injectReactShim: false,
+    skipNestedPackageJSON: true,
+  });
 }
 
 async function handler({ service = false }) {
   try {
+    logInfo('Build in progress...');
     if (service) await buildService();
     else await buildWebApp();
     logSuccess('Build completed');
@@ -38,7 +44,7 @@ async function handler({ service = false }) {
 
 exports.command = 'build';
 
-exports.describe = 'builds application';
+exports.describe = 'builds front end application or NodeJS service';
 
 exports.builder = {
   service: {

package/lib/cli-commands/pack.js

@@ -1,58 +1,24 @@
-/* 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 { isTypeScriptEnabled } = require('../typescript/util');
-const { esBuild } = require('../esbuild');
-
+const { esBuild } = require('../transpile/esbuild');
 const { name } = require('../../package.json');
 
-async function compileTypeScript() {
-  logInfo('Compiling typescript files...');
-  await exec('tsc');
-  await exec('tsc-alias');
-}
+const compileTypeScript = async () => {
+  logInfo('Generating types...');
+  await exec('tsc --emitDeclarationOnly');
+  logInfo('Types generation completed...');
+};
 
-async function webBuild(productionBuild) {
-  logInfo('Compiling source files for browser environment...');
+const webBuild = async (productionBuild) => {
+  logInfo('Building source files for browser environment...');
   const devCmd = `node_modules/${name}/lib/webpack/webpack.lib.dev.babel.js --color`;
   const prodCmd = `node_modules/${name}/lib/webpack/webpack.lib.prod.babel.js --color`;
-  await exec(
-    `cross-env NODE_ENV=production webpack --config ${
-      productionBuild ? prodCmd : devCmd
-    }`,
-  );
-}
-
-async function getSideEffects() {
-  const data = await readFile(path.join(process.cwd(), './package.json'));
-  const packageJSON = JSON.parse(data);
-  return packageJSON?.sideEffects || false;
-}
-
-async function createPackageJson(file, commonJS, sideEffects) {
-  const packageJSON = JSON.stringify({
-    type: commonJS ? 'commonjs' : 'module',
-    sideEffects,
-  });
-  await writeFile(file, packageJSON);
-}
-
-async function nodeBuild({ srcPath, commonJS, emitModuleType }) {
-  const outDir = `./dist/${commonJS ? 'cjs' : 'es'}`;
-  await esBuild({ srcPath, commonJS });
-  if (emitModuleType) {
-    const sideEffects = await getSideEffects();
-    await createPackageJson(
-      path.join(process.cwd(), outDir, 'package.json'),
-      commonJS,
-      sideEffects,
-    );
-  }
-}
+  await exec(`webpack --config ${productionBuild ? prodCmd : devCmd}`);
+  logInfo('Building source files for browser environment completed...');
+};
 
-async function pack({ production, target, module, srcPath, emitModuleType }) {
+const pack = async ({ production, target, srcPath }) => {
   logInfo('Build in-progress...');
   await exec('rimraf ./dist');
   if (isTypeScriptEnabled()) {
@@ -60,28 +26,13 @@ async function pack({ production, target, module, srcPath, emitModuleType }) {
   }
   if (target !== 'node') await webBuild(production);
   if (target !== 'web') {
-    logInfo('Compiling source files for nodejs environment');
-    if (module !== 'es') {
-      logInfo('output format: commonjs');
-      await nodeBuild({
-        srcPath,
-        commonJS: true,
-        emitModuleType,
-        target,
-      });
-    }
-    if (module !== 'cjs') {
-      logInfo('output format: es');
-      await nodeBuild({
-        srcPath,
-        commonJS: false,
-        emitModuleType,
-      });
-    }
+    logInfo('Building source files for nodejs environment...');
+    await esBuild({ srcdir: srcPath });
+    logInfo('Building source files for nodejs environment completed.');
   }
-}
+};
 
-async function handler(argv) {
+const handler = async (argv) => {
   try {
     await pack(argv);
     logSuccess('Build completed');
@@ -89,7 +40,7 @@ async function handler(argv) {
     logError('Build failed', err);
     exit(-1, err);
   }
-}
+};
 
 exports.command = 'pack';
 
@@ -107,17 +58,6 @@ exports.builder = {
     description:
       'target environment where this library will be used. allowed values are web, node. by default libraries will be compiled for both web and nodejs environments',
   },
-  module: {
-    type: 'string',
-    description:
-      'specify the format in which the library to be compiled. es - es module format, cjs - commonjs module format. by default libraries will be compiled in both es and cjs format ',
-  },
-  emitModuleType: {
-    type: 'boolean',
-    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',
-  },
   srcPath: {
     type: 'string',
     default: './lib',

package/lib/cli-commands/test.js

@@ -1,6 +1,5 @@
 const { exit } = require('yargs');
 const { exec, logError, logSuccess } = require('./utils');
-const { lintCSS, lintJS } = require('./lint');
 
 const { CI = false } = process.env;
 
@@ -19,17 +18,7 @@ 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 {
+    if (CI) {
       await exec('rimraf ./reports');
     }
 

package/lib/cli-commands/tsc.js

@@ -0,0 +1,103 @@
+const { exit } = require('yargs');
+const { dirname, join } = require('path');
+const { spawnSync } = require('child_process');
+const fs = require('fs');
+const { logInfo, logError } = require('./utils');
+
+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);
+
+const validateTypescript = async () => {
+  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: ['shared/typings'],
+  };
+  fs.writeFileSync(tmpTsconfigPath, JSON.stringify(tmpTsconfig, null, 2));
+
+  // Type-check our files
+  const { status } = spawnSync(
+    resolveFromModule(
+      'typescript',
+      `../.bin/tsc${process.platform === 'win32' ? '.cmd' : ''}`,
+    ),
+    ['-p', tmpTsconfigPath, ...remainingArgsToForward],
+    { stdio: 'inherit' },
+  );
+
+  // Delete temp config file
+  fs.unlinkSync(tmpTsconfigPath);
+
+  process.exit(status);
+};
+
+async function handler(argv) {
+  try {
+    await validateTypescript(argv.p);
+    logInfo('Typescript validation started');
+  } catch (err) {
+    logError('Typescript validation failed', err);
+    exit(-1, err);
+  }
+}
+
+exports.command = 'tsc [options]';
+
+exports.describe = 'validate typescript code';
+
+exports.builder = {
+  project: {
+    alias: 'p',
+    type: 'boolean',
+    default: false,
+  },
+  docs: {
+    type: 'boolean',
+    default: false,
+  },
+};
+
+exports.handler = handler;
+
+exports.validateTypescript = validateTypescript;

package/lib/cli-commands/utils.js

@@ -24,10 +24,15 @@ exports.logSuccess = (...args) => console.log(chalk.green(...args));
 exports.logError = console.error;
 
 const readPackageLock = async () => {
-  const appPkgLockFile = path.join(process.cwd(), 'package-lock.json');
-  const pkgLockJSON = await readFile(appPkgLockFile, 'utf8');
-  const { dependencies } = JSON.parse(pkgLockJSON);
-  return (moduleName) => dependencies[moduleName]?.version || '';
+  try {
+    const appPkgLockFile = path.join(process.cwd(), 'package-lock.json');
+    const pkgLockJSON = await readFile(appPkgLockFile, 'utf8');
+    const { dependencies } = JSON.parse(pkgLockJSON);
+    return (moduleName) => dependencies[moduleName]?.version || '';
+  } catch (err) {
+    console.warn('Package lock file not found');
+    return () => '';
+  }
 };
 
 const getSupportedBrowsers = async () => {

package/lib/cli-commands/vitest.js

@@ -0,0 +1,66 @@
+const { exit } = require('yargs');
+const path = require('path');
+const { exec, logError, logSuccess } = require('./utils');
+
+const { CI = false } = process.env;
+
+const configPath = path.resolve(__dirname, '../testing/vitest.config.ts');
+
+async function test(commandOptions) {
+  await exec(
+    `cross-env FORCE_COLOR=true vitest --config ${configPath} ${commandOptions}`,
+  );
+}
+
+// eslint-disable-next-line max-statements
+async function handler(argv) {
+  let commandOptions = '--coverage';
+  if (argv.fix) commandOptions = '-u';
+  else if (argv.watch) commandOptions = '--watch';
+  if (argv.p) commandOptions += ' --passWithNoTests';
+  if (argv.r) commandOptions += ' --related';
+  if (argv.s) commandOptions += ' --silent';
+  try {
+    if (CI) {
+      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');
+  } catch (err) {
+    logError('Unit test execution failed', err);
+    exit(-1, err);
+    return -1;
+  }
+  return 0;
+}
+
+exports.command = 'vitest [options]';
+
+exports.describe = 'unit tests application code using vitest';
+
+exports.builder = {
+  fix: {
+    alias: 'f',
+    type: 'boolean',
+  },
+  watch: {
+    alias: 'w',
+    type: 'boolean',
+  },
+  passWithNoTests: {
+    alias: 'p',
+    type: 'boolean',
+  },
+  related: {
+    alias: 'r',
+    type: 'boolean',
+  },
+  silent: {
+    alias: 's',
+    type: 'boolean',
+  },
+};
+
+exports.handler = handler;

package/lib/cli.js

@@ -12,6 +12,7 @@ const lintCmd = require('./cli-commands/lint');
 const gendocCmd = require('./cli-commands/gendoc');
 const codemodCmd = require('./cli-commands/codemod');
 const storybookCmd = require('./cli-commands/storybook');
+const vitestCmd = require('./cli-commands/vitest');
 
 envConfig();
 process.env.PATH +=
@@ -25,5 +26,6 @@ yargs.command(lintCmd).help().argv;
 yargs.command(gendocCmd).help().argv;
 yargs.command(codemodCmd).help().argv;
 yargs.command(storybookCmd).help().argv;
+yargs.command(vitestCmd).help().argv;
 
 notifyUpdates();

package/lib/index.js

@@ -4,7 +4,8 @@ const { esReactConfig } = require('./lint/eslint/react');
 const stylelintConfig = require('./lint/stylelint.config');
 const prettierConfig = require('./lint/prettier.config');
 const commitlintConfig = require('./lint/commitlint.config');
-const jestConfig = require('./testing/jest.config');
+const { jestConfig } = require('./testing/jest.config');
+const { jestNodeConfig } = require('./testing/jest.node.config');
 const jsdocConfig = require('./docgen/jsdoc.config');
 const lintStagedConfig = require('./lint/lint-staged.config');
 const { loadRoutes } = require('./server/util');
@@ -17,6 +18,7 @@ module.exports = {
   prettierConfig,
   commitlintConfig,
   jestConfig,
+  jestNodeConfig,
   jsdocConfig,
   lintStagedConfig,
   loadRoutes,

package/lib/lint/eslint/common.js

@@ -4,14 +4,17 @@ const webpackConfig = require('../../webpack/webpack.prod.babel');
 
 exports.baseExtends = [
   'plugin:eslint-comments/recommended',
+  'plugin:import/recommended',
   'plugin:prettier/recommended',
   'plugin:jest/recommended',
   'plugin:jsdoc/recommended',
   'plugin:wdio/recommended',
   'plugin:testing-library/dom',
+  'plugin:storybook/recommended',
 ];
 
-const basePlugins = ['testing-library', 'jest', 'jsdoc', 'wdio'];
+const basePlugins = ['testing-library', 'jest', 'jsdoc', 'wdio', 'import'];
+exports.basePlugins = basePlugins;
 
 exports.baseOverrides = [
   {
@@ -31,17 +34,18 @@ const baseRules = {
   'import/no-dynamic-require': 0,
   'import/no-extraneous-dependencies': 0,
   'import/no-named-as-default': 0,
-  'import/no-unresolved': 0, // ToDo: set this to error once this issue is resolved https://github.com/import-js/eslint-plugin-import/issues/1868
+  'import/no-unresolved': [
+    2,
+    { caseSensitive: true, caseSensitiveStrict: true },
+  ], // Tip: https://github.com/import-js/eslint-plugin-import/issues/1868
   'import/no-webpack-loader-syntax': 0,
   '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 +108,11 @@ const reactRules = {
   'react/react-in-jsx-scope': 0,
   'react/jsx-filename-extension': [
     1,
-    { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    { extensions: ['.js', '.jsx', '.tsx', '.mdx'] },
+  ],
+  'react/function-component-definition': [
+    2,
+    { namedComponents: 'arrow-function' },
   ],
   'redux-saga/no-yield-in-race': 2,
   'redux-saga/yield-effects': 2,

package/lib/lint/eslint/typescript/common.js

@@ -1,7 +1,8 @@
-const { baseExtends } = require('../common');
+const { baseExtends, basePlugins } = require('../common');
 
 exports.tsBaseExtends = [
   'plugin:@typescript-eslint/recommended',
+  'plugin:import/typescript',
   'plugin:@typescript-eslint/recommended-requiring-type-checking',
 ].concat(baseExtends);
 
@@ -24,6 +25,7 @@ exports.tsBaseRules = {
 exports.tsBaseConfig = {
   files: ['*.ts', '*.tsx'],
   parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'].concat(basePlugins),
   parserOptions: {
     tsconfigRootDir: process.cwd(),
     project: 'tsconfig.json',
@@ -34,5 +36,8 @@ exports.tsBaseConfig = {
         alwaysTryTypes: true,
       },
     },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
   },
 };

package/lib/lint/eslint/typescript/non-react.js

@@ -4,7 +4,7 @@ const { tsBaseExtends, tsBaseRules, tsBaseConfig } = require('./common');
 
 exports.tsConfig = {
   ...tsBaseConfig,
-  extends: ['airbnb-typescript/base'].concat(tsBaseExtends),
+  extends: ['airbnb-base', 'airbnb-typescript/base'].concat(tsBaseExtends),
   rules: {
     ...baseRules,
     ...tsBaseRules,

package/lib/lint/eslint/typescript/react.js

@@ -4,7 +4,12 @@ const { tsBaseExtends, tsBaseRules, tsBaseConfig } = require('./common');
 
 exports.tsReactConfig = {
   ...tsBaseConfig,
-  extends: ['airbnb-typescript'].concat(tsBaseExtends),
+  extends: [
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:redux-saga/recommended',
+    'airbnb-typescript',
+  ].concat(tsBaseExtends),
   rules: {
     ...baseRules,
     ...tsBaseRules,

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

@@ -1,5 +1,12 @@
+const path = require('path');
+
 module.exports = {
-  '*.{ts,tsx}': ['tsc-files --noEmit --emitDeclarationOnly false'],
+  '*.{ts,tsx}': [
+    `node ${path.resolve(
+      __dirname,
+      '../typescript/tsc-files/index.js',
+    )} --noEmit --emitDeclarationOnly false`,
+  ],
   '*.{js,ts,jsx,tsx}': [
     'npm run lint:fix',
     'npm run test:staged',

package/lib/lint/stylelint.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   customSyntax: '@stylelint/postcss-css-in-js',
-  plugins: [],
   extends: [
     'stylelint-config-recommended',
     'stylelint-config-styled-components',

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/server/index.js

@@ -60,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 }));
 };