@elliemae/pui-cli 6.0.0-beta.3 → 6.0.0-beta.4

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 { 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 --no-copy-ignored --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(
@@ -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/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/webpack/helpers.js

@@ -209,4 +209,3 @@ exports.resolveExtensions = [
 ];
 exports.mainFields = ['browser', 'module', 'main'];
 exports.isGoogleTagManagerEnabled = isGoogleTagManagerEnabled;
-exports.ESBUILD_TARGET = 'es2020';

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

@@ -17,8 +17,8 @@ const {
   getAlias,
   getPaths,
   getMediaPath,
-  ESBUILD_TARGET,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 const { isTypeScriptEnabled } = require('../typescript/util');
 
 // get the application configuration
@@ -236,7 +236,7 @@ module.exports = (options) => ({
         ],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },

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

@@ -21,6 +21,7 @@ const {
   getAlias,
   getMediaPath,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 const { isTypeScriptEnabled } = require('../typescript/util');
 
 const devMode = process.env.NODE_ENV !== 'production';
@@ -126,11 +127,10 @@ module.exports = (options) => ({
           fullySpecified: false,
         },
         use: {
-          loader: 'babel-loader',
+          loader: 'esbuild-loader',
           options: {
-            cacheDirectory: true,
-            compact: !devMode,
-            ...(options.babelQuery || {}),
+            loader: 'jsx',
+            target: ESBUILD_TARGET,
           },
         },
       },
@@ -201,7 +201,7 @@ module.exports = (options) => ({
         ],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },

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

@@ -1,11 +1,11 @@
 const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const { getLibraryName } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const libraryName = getLibraryName();
 
@@ -23,17 +23,10 @@ module.exports = require('./webpack.lib.base.babel')({
     moduleIds: 'deterministic',
     minimize: true,
     minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          compress: {
-            comparisons: false,
-          },
-          format: {
-            comments: false,
-          },
-        },
+      new ESBuildMinifyPlugin({
+        target: ESBUILD_TARGET,
+        css: true,
       }),
-      new CssMinimizerPlugin(),
     ],
     nodeEnv: 'production',
     sideEffects: true,

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

@@ -15,8 +15,8 @@ const {
   getPaths,
   getAppVersion,
   isGoogleTagManagerEnabled,
-  ESBUILD_TARGET,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
   const { buildPath, publicPath } = getPaths(latestVersion);

package/lib/webpack/webpack.storybook.js

@@ -14,6 +14,7 @@ const {
   mainFields,
   getMediaPath,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const IS_APP = isApp();
 const CWD = process.cwd();
@@ -101,9 +102,10 @@ const getModuleRules = () => [
       fullySpecified: false,
     },
     use: {
-      loader: 'babel-loader',
+      loader: 'esbuild-loader',
       options: {
-        cacheDirectory: true,
+        loader: 'jsx',
+        target: ESBUILD_TARGET,
       },
     },
   },
@@ -128,7 +130,7 @@ const getModuleRules = () => [
     ],
   },
   {
-    test: /\.(jpe?g|png|gif)$/i,
+    test: /\.(jpe?g|png|gif|ico)$/i,
     exclude: excludeNodeModulesExcept(['@elliemae/*']),
     type: 'asset',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "private": false,
   "description": "EllieMae Platform UI CLI",
   "sideEffects": false,
@@ -132,6 +132,7 @@
     "dotenv": "~10.0.0",
     "dotenv-webpack": "~7.0.3",
     "duplicate-package-checker-webpack-plugin": "~3.0.0",
+    "esbuild": "~0.13.15",
     "esbuild-loader": "~2.16.0",
     "eslint": "~8.3.0",
     "eslint-config-airbnb": "~18.2.1",