@elliemae/pui-cli 6.0.0-beta.1 → 6.0.0-beta.13

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

@@ -4,16 +4,12 @@ const webpack = require('webpack');
 const {
   optimize: { LimitChunkCountPlugin },
 } = require('webpack');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const PostcssPresetEnv = require('postcss-preset-env');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-const stylelintFormatter = require('stylelint-formatter-pretty');
-// const ESLintPlugin = require('eslint-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const {
   excludeNodeModulesExcept,
@@ -22,12 +18,9 @@ const {
   modulesToTranspile,
   getAssetPath,
   getAlias,
-  getImageMinimizerPlugin,
-  getMediaPath,
 } = require('./helpers');
-const { isTypeScripEnabled } = require('../typescript/util');
+const { ESBUILD_TARGET } = require('../esbuild');
 
-const devMode = process.env.NODE_ENV !== 'production';
 const minicssLoader = {
   loader: MiniCssExtractPlugin.loader,
   options: {},
@@ -46,15 +39,6 @@ const plugins = [
     APP_CONFIG: getAppConfig(true),
   }),
   new CaseSensitivePathsPlugin(),
-  // new ESLintPlugin(),
-  new StyleLintPlugin({
-    emitError: true,
-    emitWarning: true,
-    allowEmptyInput: true,
-    failOnError: !devMode,
-    formatter: stylelintFormatter,
-    files: '(lib|app)/**/view/**/*.{js,ts,jsx,tsx}',
-  }),
   new CopyWebpackPlugin({
     patterns: [
       {
@@ -73,20 +57,8 @@ const plugins = [
     maxChunks: 1,
   }),
   new MomentLocalesPlugin(),
-  getImageMinimizerPlugin(),
 ];
 
-if (isTypeScripEnabled()) {
-  plugins.push(
-    new ForkTsCheckerWebpackPlugin({
-      async: devMode,
-      eslint: {
-        files: './lib/**/*.{ts,js,tsx,jsx}',
-      },
-    }),
-  );
-}
-
 module.exports = (options) => ({
   mode: options.mode,
   entry: [path.join(process.cwd(), 'lib/index')],
@@ -101,6 +73,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: /^(?!.*\.exec\.js$).*\.(js|ts|jsx|tsx)$/,
         enforce: 'pre',
@@ -125,18 +112,31 @@ module.exports = (options) => ({
           fullySpecified: false,
         },
         use: {
-          loader: 'babel-loader',
+          loader: 'esbuild-loader',
           options: {
-            cacheDirectory: true,
-            compact: !devMode,
-            ...(options.babelQuery || {}),
+            loader: 'jsx',
+            target: ESBUILD_TARGET,
           },
         },
       },
       {
         test: /\.exec\.js$/,
         exclude: /node_modules/,
-        use: ['script-loader'],
+        use: [
+          {
+            loader: 'imports-loader',
+            options: {
+              wrapper: {
+                thisArg: 'window',
+                args: {
+                  module: false,
+                  exports: false,
+                  define: false,
+                },
+              },
+            },
+          },
+        ],
       },
       {
         test: /\.css$/,
@@ -171,22 +171,16 @@ module.exports = (options) => ({
         type: 'asset/resource',
       },
       {
-        test: /\.svg$/,
-        exclude: excludeNodeModulesExcept(['@elliemae/*']),
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-          {
-            loader: 'file-loader',
-            options: {
-              name: getMediaPath(),
-            },
-          },
-        ],
+        type: 'asset',
+        resourceQuery: /url/, // *.svg?react
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
       {
-        test: /\.(jpe?g|png|gif)$/i,
+        test: /\.(jpe?g|png|gif|ico)$/i,
         exclude: excludeNodeModulesExcept(['@elliemae/*']),
         type: 'asset',
       },
@@ -212,6 +206,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.lib.dev.babel.js

@@ -1,7 +1,3 @@
-/**
- * DEVELOPMENT WEBPACK CONFIGURATION
- */
-
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

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

@@ -1,12 +1,11 @@
-// Important modules this config uses
 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();
 
@@ -24,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

@@ -1,7 +1,6 @@
 /* eslint-disable max-lines */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-// const WebpackPwaManifest = require('webpack-pwa-manifest');
 const { GenerateSW } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -15,7 +14,9 @@ const {
   LATEST_VERSION,
   getPaths,
   getAppVersion,
+  isGoogleTagManagerEnabled,
 } = require('./helpers');
+const { ESBUILD_TARGET } = require('../esbuild');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
   const { buildPath, publicPath } = getPaths(latestVersion);
@@ -23,12 +24,10 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
   return {
     mode: 'production',
 
-    // In production, we skip all hot-reloading stuff
     entry: {
       app: path.join(process.cwd(), 'app/index'),
     },
 
-    // eslint-disable-next-line max-len
     // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
     output: {
       path: buildPath,
@@ -42,7 +41,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
       moduleIds: 'deterministic',
       minimizer: [
         new ESBuildMinifyPlugin({
-          target: 'es2015',
+          target: ESBUILD_TARGET,
           css: true,
         }),
       ],
@@ -73,34 +72,17 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
         filename: '[path][base].gz',
         algorithm: 'gzip',
         test: /\.js$|\.css$$/,
-        exclude: [/\/adrum-ext/, /\/emuiUserMonitoring/],
+        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,
       }),
 
-      // new WebpackPwaManifest({
-      //   name: 'Ellie Mae UI Boilerplate',
-      //   short_name: 'EM BP',
-      //   description: 'EllieMae UI Boilerplate-based project!',
-      //   background_color: '#fafafa',
-      //   theme_color: '#b1624d',
-      //   inject: true,
-      //   ios: true,
-      //   icons: [
-      //     {
-      //       src: path.resolve('app/view/images/icon-512x512.png'),
-      //       destination: path.join('media', 'images'),
-      //       sizes: [72, 96, 128, 144, 192, 384, 512],
-      //     },
-      //     {
-      //       src: path.resolve('app/view/images/icon-512x512.png'),
-      //       sizes: [120, 152, 167, 180],
-      //       ios: true,
-      //       destination: path.join('media', 'images'),
-      //     },
-      //   ],
-      // }),
-
       new BundleAnalyzerPlugin({
         analyzerMode: 'static',
         reportFilename: path.join(process.cwd(), 'reports/bundle-stats.html'),
@@ -158,6 +140,7 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
     appLoaderScriptPath,
     diagnosticsScriptPath,
     encwLoaderScriptPath,
+    googleTagManager: isGoogleTagManagerEnabled(),
   },
 });
 

package/lib/webpack/webpack.storybook.js

@@ -1,27 +1,19 @@
-/* eslint-disable max-lines, no-param-reassign */
+/* eslint-disable max-lines */
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-const stylelintFormatter = require('stylelint-formatter-pretty');
 const CompressionPlugin = require('compression-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const {
   getAppConfig,
   isApp,
   getAlias,
   excludeNodeModulesExcept,
-  modulesToTranspile,
-  resolveExtensions,
-  mainFields,
-  getMediaPath,
-  getImageMinimizerPlugin,
 } = require('./helpers');
 
 const IS_APP = isApp();
 const CWD = process.cwd();
 
-const getAdditionalPlugins = (isProd) => [
+const getAdditionalPlugins = () => [
   new webpack.DefinePlugin({
     APP_CONFIG: getAppConfig(),
   }),
@@ -51,15 +43,6 @@ const getAdditionalPlugins = (isProd) => [
       },
     ],
   }),
-  new StyleLintPlugin({
-    emitError: true,
-    emitWarning: true,
-    allowEmptyInput: true,
-    failOnError: isProd,
-    formatter: stylelintFormatter,
-    files: '(lib|app)/**/view/**/*.{js,ts,jsx,tsx}',
-  }),
-  getImageMinimizerPlugin(),
 ];
 
 const compressionPlugin = new CompressionPlugin({
@@ -71,6 +54,21 @@ const compressionPlugin = new CompressionPlugin({
 });
 
 const getModulePreRules = () => [
+  {
+    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',
@@ -91,41 +89,22 @@ const getModulePreRules = () => [
 ];
 
 const getModuleRules = () => [
-  {
-    test: /\.(js|ts|jsx|tsx)$/,
-    exclude: excludeNodeModulesExcept(modulesToTranspile),
-    resolve: {
-      fullySpecified: false,
-    },
-    use: {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: true,
-      },
-    },
-  },
   {
     test: /\.(woff|woff2)$/,
     exclude: excludeNodeModulesExcept(['@elliemae/*']),
     type: 'asset/resource',
   },
   {
-    test: /\.svg$/,
-    exclude: excludeNodeModulesExcept(['@elliemae/*']),
-    use: [
-      {
-        loader: '@svgr/webpack',
-      },
-      {
-        loader: 'file-loader',
-        options: {
-          name: getMediaPath(),
-        },
-      },
-    ],
+    type: 'asset',
+    resourceQuery: /url/, // *.svg?react
+  },
+  {
+    test: /\.svg$/i,
+    issuer: /\.[jt]sx?$/,
+    use: ['@svgr/webpack'],
   },
   {
-    test: /\.(jpe?g|png|gif)$/i,
+    test: /\.(jpe?g|png|gif|ico)$/i,
     exclude: excludeNodeModulesExcept(['@elliemae/*']),
     type: 'asset',
   },
@@ -145,16 +124,13 @@ exports.webpackFinal = async (config, { configType }) => {
   config.module.rules.push(...getModulePreRules());
   config.module.rules.unshift(...getModuleRules(isProd));
 
-  config.plugins.push(...getAdditionalPlugins(isProd));
+  config.plugins.push(...getAdditionalPlugins());
   if (isProd) {
     config.plugins.push(compressionPlugin);
   }
 
   config.resolve.alias = { ...config.resolve.alias, ...getAlias() };
   config.resolve.fallback = { ...config.resolve.fallback, crypto: false };
-  config.resolve.plugins = (config.resolve.plugins || []).concat([
-    new TsconfigPathsPlugin({ extensions: resolveExtensions, mainFields }),
-  ]);
 
   config.externals = config.externals || {};
   config.externals['@elliemae/pui-user-monitoring'] = 'emuiUserMonitoring';