@elliemae/pui-cli 6.13.0-beta.1 → 7.0.0-beta.1

package/lib/cli-commands/build.js

@@ -1,20 +1,24 @@
 const { exit } = require('yargs');
+const path = require('path');
 const {
   exec,
   logInfo,
   logError,
   logSuccess,
   writeAppInfo,
+  copyBuildAssetsToVersionedFolder,
 } = require('./utils');
 const { esBuild, TARGETS } = require('../transpile/esbuild');
 
-const { name } = require('../../package.json');
-
 async function buildWebApp() {
   await exec(`rimraf ./build`);
   await exec(
-    `cross-env NODE_ENV=production webpack --config node_modules/${name}/lib/webpack/webpack.prod.babel.js --color`,
+    `cross-env NODE_ENV=production webpack --config ${path.resolve(
+      __dirname,
+      '../webpack/webpack.prod.babel.js',
+    )} --color`,
   );
+  await copyBuildAssetsToVersionedFolder();
   await writeAppInfo();
 }
 

package/lib/cli-commands/start.js

@@ -1,17 +1,22 @@
+const path = require('path');
 const { exit } = require('yargs');
 const { exec, logError, logSuccess } = require('./utils');
 
-const { name } = require('../../package.json');
-
 async function startProdServer() {
   await exec(
-    `cross-env NODE_ENV=production ts-node node_modules/${name}/lib/server --color always`,
+    `cross-env NODE_ENV=production ts-node ${path.resolve(
+      __dirname,
+      '../server',
+    )} --color always`,
   );
 }
 
 async function startDevServer() {
   await exec(
-    `cross-env NODE_ENV=development ts-node node_modules/${name}/lib/server --color always`,
+    `cross-env NODE_ENV=development webpack serve --config ${path.resolve(
+      __dirname,
+      '../webpack/webpack.dev.babel.js',
+    )}`,
   );
 }
 

package/lib/cli-commands/utils.js

@@ -1,9 +1,21 @@
+/* eslint-disable max-lines */
 /* eslint-disable no-console */
 const execa = require('execa');
 const chalk = require('chalk');
 const path = require('path');
-const { readFile, writeFile } = require('fs/promises');
-const { getPaths } = require('../webpack/helpers');
+const {
+  readFile,
+  writeFile,
+  mkdir,
+  readdir,
+  copyFile,
+} = require('fs/promises');
+const {
+  getPaths,
+  isAppLoaderEnabled,
+  getAppVersion,
+  LATEST_VERSION,
+} = require('../webpack/helpers');
 
 const browsersMapping = {
   and_chr: 'Chrome for Android',
@@ -87,3 +99,29 @@ exports.writeAppInfo = async () => {
     path.join(process.cwd(), 'build', 'public', 'info.json'),
   ].forEach(async (infoPath) => writeFile(infoPath, infoJSON));
 };
+
+const copyDir = async (src, dest) => {
+  const entries = await readdir(src, {
+    withFileTypes: true,
+  });
+  await mkdir(dest);
+  return Promise.all(
+    entries.map((entry) => {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+      if (entry.isDirectory()) {
+        return copyDir(srcPath, destPath);
+      }
+      return copyFile(srcPath, destPath);
+    }),
+  );
+};
+
+exports.copyBuildAssetsToVersionedFolder = async () => {
+  const appVersion = getAppVersion();
+  const isVersionedApp = isAppLoaderEnabled() && appVersion !== LATEST_VERSION;
+  if (!isVersionedApp) return;
+  const src = path.resolve(process.cwd(), 'build/public/latest');
+  const dest = path.resolve(process.cwd(), `build/public/${appVersion}`);
+  copyDir(src, dest);
+};

package/lib/webpack/helpers.js

@@ -150,7 +150,6 @@ const getENCWLoaderFileName = () => {
   )[0];
 };
 
-// base path for index page
 const getAssetPath = () => (process.env.ASSET_PATH || '/').replace(/\/?$/, '/');
 
 const getAppVersion = () => {
@@ -161,19 +160,19 @@ const getAppVersion = () => {
 
 const getPaths = (latestVersion = true) => {
   const version = latestVersion ? LATEST_VERSION : getAppVersion();
-  const publicPath = `${getAssetPath()}${version}/`;
+  const publicPath = `${version}/`;
   const timeStampQuery =
     process.env.PUI_PIPELINE !== 'true' ? `?timeStamp=${Date.now()}` : '';
   return {
     appVersion: version,
-    buildPath: path.resolve(process.cwd(), `build/public/${version}`),
+    buildPath: path.resolve(process.cwd(), `build/public/`),
     // base path for all assets
     publicPath,
-    userMonScriptPath: `${publicPath}js/${getUserMonitoringFileName()}`,
-    appLoaderScriptPath: `${publicPath}js/${getAppLoaderFileName()}`,
-    diagnosticsScriptPath: `${publicPath}js/${getDiagnosticsFileName()}`,
-    globalScriptPath: `${publicPath}js/global.js${timeStampQuery}`,
-    encwLoaderScriptPath: `${publicPath}js/${getENCWLoaderFileName()}`,
+    userMonScriptPath: `latest/js/${getUserMonitoringFileName()}`,
+    appLoaderScriptPath: `latest/js/${getAppLoaderFileName()}`,
+    diagnosticsScriptPath: `latest/js/${getDiagnosticsFileName()}`,
+    globalScriptPath: `latest/js/global.js${timeStampQuery}`,
+    encwLoaderScriptPath: `latest/js/${getENCWLoaderFileName()}`,
   };
 };
 
@@ -227,6 +226,7 @@ const filterByFilePresence = (patterns) =>
       !noErrorOnMissing || fs.existsSync(path.resolve(process.cwd(), from)),
   );
 
+exports.LATEST_VERSION = LATEST_VERSION;
 exports.excludeNodeModulesExcept = excludeNodeModulesExcept;
 exports.getLibraryName = getLibraryName;
 exports.getAppConfig = getAppConfig;

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

@@ -48,46 +48,47 @@ const plugins = [
     patterns: filterByFilePresence([
       {
         from: 'app/app.config.json',
-        to: 'app.config.json',
+        to: './latest/app.config.json',
       },
       {
         from: 'app/robots.txt',
-        to: '../robots.txt',
+        to: 'robots.txt',
         noErrorOnMissing: true,
       },
       {
         from: 'app/global*.js',
-        to: 'js/[name][ext]',
+        to: './latest/js/[name][ext]',
       },
       {
         from: 'node_modules/@elliemae/pui-user-monitoring/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         info: { minimized: true },
       },
       {
         from: 'node_modules/@elliemae/pui-app-loader/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         noErrorOnMissing: true,
         info: { minimized: true },
       },
       {
         from: 'node_modules/@elliemae/encw-loader/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         noErrorOnMissing: true,
         info: { minimized: true },
       },
       {
         from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         noErrorOnMissing: true,
         info: { minimized: true },
       },
       {
         from: 'public',
+        to: './latest',
         noErrorOnMissing: true,
         globOptions: {
           ignore: ['readme.md'],
@@ -95,7 +96,6 @@ const plugins = [
       },
       {
         from: 'webroot',
-        to: '../',
         noErrorOnMissing: true,
         globOptions: {
           ignore: ['readme.md'],
@@ -105,8 +105,16 @@ const plugins = [
   }),
   new DuplicatePackageCheckerPlugin(),
   new MomentLocalesPlugin({ localesToKeep: ['es-us'] }),
-  new WebpackManifestPlugin(),
+  new WebpackManifestPlugin({
+    fileName: './latest/manifest.json',
+    publicPath: '',
+    map: (file) => {
+      file.name = file.name.replace(/^latest\//, '');
+      return file;
+    },
+  }),
   new FaviconsWebpackPlugin({
+    outputPath: './latest/assets',
     logo: './app/view/images/favicon.png',
     favicons: {
       developerName: 'ICE MT',

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

@@ -1,5 +1,4 @@
 const path = require('path');
-const { HotModuleReplacementPlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -74,7 +73,6 @@ const devConfig = {
   // Add development plugins
   plugins: [
     new HtmlWebpackPlugin({
-      scriptLoading: 'module',
       inject: !isAppLoaderEnabled(), // Inject all files that are generated by webpack, e.g. bundle.js
       template: !isAppLoaderEnabled()
         ? 'app/index.html'
@@ -104,11 +102,12 @@ const devConfig = {
   performance: {
     hints: false,
   },
+
+  devServer: {},
 };
 
 const config = smp.wrap(baseConfigFactory(devConfig));
 config.plugins = config.plugins.concat([
-  new HotModuleReplacementPlugin(),
   new ReactRefreshWebpackPlugin({
     overlay: {
       sockIntegration: 'whm',

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

@@ -11,9 +11,7 @@ const browserslistToEsbuild = require('browserslist-to-esbuild');
 const baseConfigFactory = require('./webpack.base.babel');
 const {
   isAppLoaderEnabled,
-  LATEST_VERSION,
   getPaths,
-  getAppVersion,
   isGoogleTagManagerEnabled,
   getCompressionPlugins,
 } = require('./helpers');
@@ -32,9 +30,9 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     output: {
       path: buildPath,
       publicPath: 'auto',
-      filename: 'js/[name].[contenthash].js',
-      chunkFilename: 'js/[name].[contenthash].chunk.js',
-      assetModuleFilename: 'assets/[name].[hash][ext][query]',
+      filename: 'latest/js/[name].[contenthash].js',
+      chunkFilename: 'latest/js/[name].[contenthash].chunk.js',
+      assetModuleFilename: 'latest/assets/[name].[hash][ext][query]',
     },
 
     optimization: {
@@ -63,11 +61,6 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     },
 
     plugins: [
-      // new MiniCssExtractPlugin({
-      //   filename: 'css/[name].[contenthash].css',
-      //   chunkFilename: 'css/[name].[contenthash].chunk.css',
-      // }),
-
       ...getCompressionPlugins(),
 
       new BundleAnalyzerPlugin({
@@ -77,7 +70,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
       }),
 
       new GenerateSW({
-        swDest: '../sw.js',
+        swDest: 'sw.js',
         clientsClaim: true,
         skipWaiting: true,
       }),
@@ -100,8 +93,6 @@ const {
   encwLoaderScriptPath,
 } = getPaths();
 const htmlWebpackPlugin = new HtmlWebpackPlugin({
-  scriptLoading: 'module',
-  filename: '../index.html',
   inject: !isAppLoaderEnabled(),
   template: !isAppLoaderEnabled()
     ? 'app/index.html'
@@ -129,33 +120,21 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
   },
 });
 
-// user want to version the web app to support backward compatible releases
-const isVersionedApp =
-  isAppLoaderEnabled() && getAppVersion() !== LATEST_VERSION;
-
-const latestVersionConfig = baseConfigFactory(getProdConfig());
-latestVersionConfig.plugins.push(htmlWebpackPlugin);
+const config = baseConfigFactory(getProdConfig());
+config.plugins.push(htmlWebpackPlugin);
 
-const appVersionConfig = baseConfigFactory(
-  getProdConfig({ latestVersion: false }),
-);
-
-const addSMPPlugin = (config) => {
+const addSMPPlugin = (webpackConfig) => {
   const smpConfig = new SpeedMeasurePlugin({
     disable: !process.env.MEASURE,
-  }).wrap(config);
+  }).wrap(webpackConfig);
   // mini css extract plugin is not working fine with smp
   smpConfig.plugins.push(
     new MiniCssExtractPlugin({
-      filename: 'css/[name].[contenthash].css',
-      chunkFilename: 'css/[name].[contenthash].chunk.css',
+      filename: 'latest/css/[name].[contenthash].css',
+      chunkFilename: 'latest/css/[name].[contenthash].chunk.css',
     }),
   );
   return smpConfig;
 };
 
-const config = isVersionedApp
-  ? [latestVersionConfig, appVersionConfig].map(addSMPPlugin)
-  : addSMPPlugin(latestVersionConfig);
-
-module.exports = config;
+module.exports = addSMPPlugin(config);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "6.13.0-beta.1",
+  "version": "7.0.0-beta.1",
   "private": false,
   "description": "ICE MT UI Platform CLI",
   "sideEffects": false,
@@ -67,9 +67,9 @@
     "@commitlint/config-conventional": "~16.2.1",
     "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.3.0",
     "@faker-js/faker": "6.0.0",
-    "@nrwl/cli": "13.9.1",
-    "@nrwl/tao": "13.9.1",
-    "@nrwl/workspace": "13.9.1",
+    "@nrwl/cli": "13.9.3",
+    "@nrwl/tao": "13.9.3",
+    "@nrwl/workspace": "13.9.3",
     "@pmmmwh/react-refresh-webpack-plugin": "~0.5.4",
     "@semantic-release/changelog": "~6.0.1",
     "@semantic-release/exec": "~6.0.3",
@@ -87,7 +87,7 @@
     "@stylelint/postcss-css-in-js": "~0.37.2",
     "@svgr/webpack": "~6.2.1",
     "@swc/cli": "~0.1.55",
-    "@swc/core": "~1.2.156",
+    "@swc/core": "~1.2.158",
     "@swc/jest": "~0.2.20",
     "@testing-library/jest-dom": "~5.16.2",
     "@testing-library/react": "~12.1.4",
@@ -137,7 +137,7 @@
     "eslint": "~8.11.0",
     "eslint-config-airbnb": "~19.0.4",
     "eslint-config-airbnb-base": "~15.0.0",
-    "eslint-config-airbnb-typescript": "~16.1.2",
+    "eslint-config-airbnb-typescript": "~16.1.3",
     "eslint-config-prettier": "~8.5.0",
     "eslint-config-react-app": "~7.0.0",
     "eslint-import-resolver-babel-module": "~5.3.1",
@@ -180,7 +180,7 @@
     "jscodeshift": "~0.13.1",
     "jsdoc": "~3.6.10",
     "lerna": "~4.0.0",
-    "lint-staged": "~12.3.6",
+    "lint-staged": "~12.3.7",
     "mini-css-extract-plugin": "~2.6.0",
     "minimist": "~1.2.5",
     "moment": "~2.29.1",
@@ -190,10 +190,10 @@
     "node-plop": "~0.30.0",
     "nodemon": "~2.0.15",
     "normalize-path": "~3.0.0",
-    "npm-check-updates": "12.5.3",
+    "npm-check-updates": "12.5.4",
     "null-loader": "~4.0.1",
-    "pino": "~7.8.1",
-    "pino-pretty": "~7.5.3",
+    "pino": "~7.9.1",
+    "pino-pretty": "~7.5.4",
     "pinst": "~3.0.0",
     "plop": "~3.0.5",
     "postcss": "~8.4.12",
@@ -218,7 +218,7 @@
     "slackify-markdown": "~4.3.1",
     "speed-measure-webpack-plugin": "~1.5.0",
     "storybook-addon-turbo-build": "~1.1.0",
-    "storybook-builder-vite": "~0.1.20",
+    "storybook-builder-vite": "~0.1.21",
     "storybook-react-router": "~1.0.8",
     "style-loader": "~3.3.1",
     "stylelint": "~14.6.0",
@@ -233,11 +233,12 @@
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
     "vite": "~2.8.6",
-    "vitest": "~0.6.3",
-    "webpack": "~5.65.0",
+    "vitest": "~0.7.4",
+    "webpack": "~5.70.0",
     "webpack-bundle-analyzer": "~4.5.0",
     "webpack-cli": "~4.9.2",
     "webpack-dev-middleware": "~5.3.1",
+    "webpack-dev-server": "~4.7.4",
     "webpack-hot-middleware": "~2.25.1",
     "webpack-manifest-plugin": "~5.0.0",
     "webpack-merge": "~5.8.0",