@elliemae/pui-cli 6.0.0-beta.55 → 6.0.0-beta.56

package/lib/cli-commands/build.js

@@ -6,6 +6,7 @@ const {
   logSuccess,
   writeAppInfo,
 } = require('./utils');
+const { esBuild, TARGETS } = require('../transpile/esbuild');
 
 const { name } = require('../../package.json');
 
@@ -20,9 +21,13 @@ 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,
+  });
 }
 
 async function handler({ service = false }) {

package/lib/cli-commands/pack.js

@@ -1,58 +1,22 @@
-/* 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('../transpile/esbuild');
-
 const { name } = require('../../package.json');
 
-async function compileTypeScript() {
+const compileTypeScript = async () => {
   logInfo('Compiling typescript files...');
   await exec('tsc');
-  await exec('tsc-alias');
-}
+};
 
-async function webBuild(productionBuild) {
+const webBuild = async (productionBuild) => {
   logInfo('Compiling 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}`);
+};
 
-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 +24,12 @@ 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 });
   }
-}
+};
 
-async function handler(argv) {
+const handler = async (argv) => {
   try {
     await pack(argv);
     logSuccess('Build completed');
@@ -89,7 +37,7 @@ async function handler(argv) {
     logError('Build failed', err);
     exit(-1, err);
   }
-}
+};
 
 exports.command = 'pack';
 
@@ -107,17 +55,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/transpile/esbuild.js

@@ -1,63 +1,108 @@
-const esbuild = require('esbuild');
+const { build } = require('esbuild');
 const fg = require('fast-glob');
-const fs = require('fs');
+const { writeFile, copyFile, readFile } = require('fs/promises');
 const path = require('path');
-const { getPUIConfig } = require('../pui-config');
-// const browserslistToEsbuild = require('browserslist-to-esbuild');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
-const { esBuild } = getPUIConfig();
+const TARGETS = {
+  browerslist: browserslistToEsbuild(),
+  web: 'es2020',
+  node: 'node14',
+};
+
+const ESBUILD_FORMAT = {
+  CJS: 'cjs',
+  ESM: 'esm',
+};
+
+const NODE_MODULE_TYPES = {
+  CJS: 'commonjs',
+  ESM: 'module',
+};
 
-const commonConfig = {
+const getCommonConfig = ({ injectReactShim }) => ({
   bundle: false,
-  target: esBuild.target, // browserslistToEsbuild(),
   loader: { '.js': 'jsx' },
   mainFields: ['module', 'browser', 'main'],
-  inject: [path.resolve(__dirname, './react-shim.js')],
-};
-
-const distFolder = 'dist';
+  inject: [
+    injectReactShim ? path.resolve(__dirname, './react-shim.js') : '',
+  ].filter(Boolean),
+});
 
 const copyFiles = async ({ srcdir, outdir }) => {
   const files = await fg([
     `${srcdir}/**/*.*`,
     `!${srcdir}/**/*.{js,jsx,ts,tsx,cjs,mjs}`,
   ]);
-  files.forEach((srcFilePath) => {
+  files.forEach(async (srcFilePath) => {
     const destFilePath = srcFilePath.replace(srcdir, outdir);
-    fs.copyFileSync(srcFilePath, destFilePath);
+    await copyFile(srcFilePath, destFilePath);
   });
 };
 
-const build = async ({ srcPath, commonJS }) => {
+const getSideEffects = async () => {
+  const data = await readFile(path.join(process.cwd(), './package.json'));
+  const packageJSON = JSON.parse(data);
+  return packageJSON?.sideEffects || false;
+};
+
+const createPackageJson = async ({ outdir, type = NODE_MODULE_TYPES.ESM }) => {
+  const filePath = path.join(process.cwd(), outdir, 'package.json');
+  const packageJSON = JSON.stringify(
+    {
+      type,
+      sideEffects: await getSideEffects(),
+    },
+    null,
+    2,
+  );
+  await writeFile(filePath, packageJSON);
+};
+
+exports.esBuild = async ({
+  srcdir,
+  outdir = 'dist',
+  esmOnly = false,
+  target = TARGETS.browerslist,
+  injectReactShim = true,
+}) => {
   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}`,
+    `${srcdir}/**/*.{js,jsx,ts,tsx}`,
+    `!${srcdir}/**/*.test.{js,jsx,ts,tsx}`,
+    `!${srcdir}/**/*.stories.{js,jsx,ts,tsx}`,
+    `!${srcdir}/**/*.endpoint.{js,jsx,ts,tsx}`,
   ];
-  if (commonJS) {
-    const outdir = `${distFolder}/cjs`;
+
+  // build commonjs
+  if (!esmOnly) {
+    const cjsOutdir = `${outdir}/cjs`;
     const commonJSEntryPoints = await fg(inputFiles);
-    await esbuild.build({
+    await build({
       entryPoints: commonJSEntryPoints,
-      ...commonConfig,
-      outdir,
-      format: 'cjs',
+      ...getCommonConfig({ injectReactShim }),
+      outdir: cjsOutdir,
+      format: ESBUILD_FORMAT.CJS,
+      target,
     });
-    await copyFiles({ srcdir: srcPath, outdir });
-  } else {
-    const outdir = `${distFolder}/es`;
-    const entryPoints = await fg(
-      inputFiles.concat([`!${srcPath}/**/cjs/**/*.{js,jsx,ts,tsx}`]),
-    );
-    await esbuild.build({
-      entryPoints,
-      ...commonConfig,
-      outdir,
-      format: 'esm',
-    });
-    await copyFiles({ srcdir: srcPath, outdir });
+    // copy files that are not built by esbuild
+    await copyFiles({ srcdir, outdir: cjsOutdir });
+    await createPackageJson({ outdir: cjsOutdir, type: NODE_MODULE_TYPES.CJS });
   }
-};
 
-exports.esBuild = build;
+  // build esm
+  const esmOutdir = esmOnly ? outdir : `${outdir}/esm`;
+  const entryPoints = await fg(
+    inputFiles.concat([`!${srcdir}/**/cjs/**/*.{js,jsx,ts,tsx}`]),
+  );
+  await build({
+    entryPoints,
+    ...getCommonConfig({ injectReactShim }),
+    outdir: esmOutdir,
+    format: ESBUILD_FORMAT.ESM,
+    target,
+  });
+  // copy files that are not built by esbuild
+  await copyFiles({ srcdir, outdir: esmOutdir });
+  await createPackageJson({ outdir: esmOutdir, type: NODE_MODULE_TYPES.ESM });
+};
+exports.TARGETS = TARGETS;

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

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 const path = require('path');
-const webpack = require('webpack');
+const { EnvironmentPlugin, DefinePlugin } = require('webpack');
 const {
   optimize: { LimitChunkCountPlugin },
   ProgressPlugin,
@@ -10,6 +10,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const PostcssPresetEnv = require('postcss-preset-env');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const {
   excludeNodeModulesExcept,
@@ -18,9 +19,8 @@ const {
   modulesToTranspile,
   getAssetPath,
   getAlias,
+  filterByFilePresence,
 } = require('./helpers');
-const { getPUIConfig } = require('../pui-config');
-const { esBuild } = getPUIConfig();
 
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
@@ -31,16 +31,16 @@ const finalCSSLoader = (mode) =>
   mode !== 'production' ? { loader: 'style-loader' } : minicssLoader;
 
 const plugins = [
-  new webpack.EnvironmentPlugin({
+  new EnvironmentPlugin({
     NODE_ENV: 'development',
     ASSET_PATH: '/',
     CI: 'false',
   }),
-  new webpack.DefinePlugin({
+  new DefinePlugin({
     APP_CONFIG: getAppConfig(true),
   }),
   new CopyWebpackPlugin({
-    patterns: [
+    patterns: filterByFilePresence([
       {
         from: 'lib/app.config.json',
         to: 'app.config.json',
@@ -50,7 +50,7 @@ const plugins = [
         from: 'lib/public',
         noErrorOnMissing: true,
       },
-    ],
+    ]),
   }),
   new DuplicatePackageCheckerPlugin(),
   new LimitChunkCountPlugin({
@@ -84,7 +84,7 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'jsx',
-            target: esBuild.target,
+            target: browserslistToEsbuild(),
           },
         },
       },
@@ -98,7 +98,7 @@ module.exports = (options) => ({
           loader: 'esbuild-loader',
           options: {
             loader: 'tsx',
-            target: esBuild.target,
+            target: browserslistToEsbuild(),
           },
         },
       },
@@ -157,6 +157,7 @@ module.exports = (options) => ({
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
         resourceQuery: /^((?!url).)*$/,
+        exclude: excludeNodeModulesExcept(['@elliemae/*']),
         use: ['@svgr/webpack'],
       },
       {
@@ -177,10 +178,12 @@ module.exports = (options) => ({
       {
         resourceQuery: /resource/,
         type: 'asset/resource',
+        exclude: excludeNodeModulesExcept(['@elliemae/*']),
       },
       {
         type: 'asset',
         resourceQuery: /url/,
+        exclude: excludeNodeModulesExcept(['@elliemae/*']),
       },
     ],
   },

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

@@ -35,7 +35,7 @@ module.exports = require('./webpack.lib.base.babel')({
       libraryName,
     }),
     new CircularDependencyPlugin({
-      exclude: /a\.js|node_modules/, // exclude node_modules
+      exclude: /a\.(js|ts|jsx|tsx)|node_modules/, // exclude node_modules
       failOnError: false, // show a warning when there is a circular dependency
     }),
     new MiniCssExtractPlugin({

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

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

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

@@ -6,6 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const baseConfigFactory = require('./webpack.base.babel');
 const {
@@ -17,8 +18,6 @@ const {
   isGoogleTagManagerEnabled,
   getCompressionPlugins,
 } = require('./helpers');
-const { getPUIConfig } = require('../pui-config');
-const { esBuild } = getPUIConfig();
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
   const { buildPath, publicPath } = getPaths(latestVersion);
@@ -43,7 +42,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
       moduleIds: 'deterministic',
       minimizer: [
         new ESBuildMinifyPlugin({
-          target: esBuild.target,
+          target: browserslistToEsbuild(),
           css: true,
         }),
       ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "6.0.0-beta.55",
+  "version": "6.0.0-beta.56",
   "private": false,
   "description": "ICE MT UI Platform CLI",
   "sideEffects": false,
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@babel/cli": "~7.16.8",
-    "@babel/core": "~7.16.7",
+    "@babel/core": "~7.16.10",
     "@babel/eslint-parser": "~7.16.5",
     "@babel/node": "~7.16.8",
     "@babel/plugin-proposal-class-properties": "~7.16.7",
@@ -58,14 +58,14 @@
     "@babel/plugin-transform-react-constant-elements": "~7.16.7",
     "@babel/plugin-transform-react-inline-elements": "~7.16.7",
     "@babel/plugin-transform-react-jsx-source": "~7.16.7",
-    "@babel/plugin-transform-runtime": "~7.16.8",
-    "@babel/preset-env": "~7.16.8",
+    "@babel/plugin-transform-runtime": "~7.16.10",
+    "@babel/preset-env": "~7.16.11",
     "@babel/preset-react": "~7.16.7",
     "@babel/preset-typescript": "~7.16.7",
     "@babel/runtime": "~7.16.7",
-    "@commitlint/cli": "~16.0.2",
+    "@commitlint/cli": "~16.1.0",
     "@commitlint/config-conventional": "~16.0.0",
-    "@elliemae/browserslist-config-elliemae": "~1.2.1",
+    "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.2.1",
     "@pmmmwh/react-refresh-webpack-plugin": "~0.5.4",
     "@semantic-release/changelog": "~6.0.1",
     "@semantic-release/exec": "~6.0.3",
@@ -83,7 +83,7 @@
     "@stylelint/postcss-css-in-js": "~0.37.2",
     "@svgr/webpack": "~6.2.0",
     "@swc/cli": "~0.1.55",
-    "@swc/core": "~1.2.130",
+    "@swc/core": "~1.2.133",
     "@swc/jest": "~0.2.17",
     "@testing-library/jest-dom": "~5.16.1",
     "@testing-library/react": "~12.1.2",
@@ -117,7 +117,7 @@
     "circular-dependency-plugin": "~5.2.2",
     "compression": "~1.7.4",
     "compression-webpack-plugin": "~9.2.0",
-    "copy-webpack-plugin": "~10.2.0",
+    "copy-webpack-plugin": "~10.2.1",
     "cors": "~2.8.5",
     "cross-env": "~7.0.3",
     "css-loader": "~6.5.1",
@@ -151,7 +151,7 @@
     "eslint-plugin-react": "~7.28.0",
     "eslint-plugin-react-hooks": "~4.3.0",
     "eslint-plugin-redux-saga": "~1.3.2",
-    "eslint-plugin-storybook": "~0.5.5",
+    "eslint-plugin-storybook": "~0.5.6",
     "eslint-plugin-testing-library": "~5.0.3",
     "eslint-plugin-wdio": "~7.4.2",
     "execa": "~5.1.1",
@@ -160,7 +160,7 @@
     "express-static-gzip": "~2.1.1",
     "favicons": "~6.2.2",
     "favicons-webpack-plugin": "~5.0.2",
-    "happy-dom": "~2.27.0",
+    "happy-dom": "~2.27.2",
     "helmet-csp": "~3.4.0",
     "html-webpack-plugin": "~5.5.0",
     "http-server": "~14.1.0",
@@ -174,7 +174,7 @@
     "jest-styled-components": "~7.0.8",
     "jscodeshift": "~0.13.1",
     "jsdoc": "~3.6.7",
-    "lint-staged": "~12.2.0",
+    "lint-staged": "~12.2.2",
     "mini-css-extract-plugin": "~2.5.2",
     "minimist": "~1.2.5",
     "moment": "~2.29.1",
@@ -185,8 +185,8 @@
     "nodemon": "~2.0.15",
     "npm-check-updates": "12.1.0",
     "null-loader": "~4.0.1",
-    "pino": "~7.6.3",
-    "pino-pretty": "~7.3.0",
+    "pino": "~7.6.4",
+    "pino-pretty": "~7.5.0",
     "pinst": "~2.1.6",
     "plop": "~3.0.5",
     "postcss": "~8.4.5",
@@ -221,12 +221,12 @@
     "terser-webpack-plugin": "~5.3.0",
     "ts-node": "~10.4.0",
     "tsc-alias": "~1.5.0",
-    "typescript": "~4.5.4",
+    "typescript": "~4.5.5",
     "update-notifier": "~5.1.0",
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
     "vite": "~2.7.13",
-    "vitest": "~0.1.21",
+    "vitest": "~0.1.24",
     "webpack": "~5.65.0",
     "webpack-bundle-analyzer": "~4.5.0",
     "webpack-cli": "~4.9.1",