@henderea/static-site-builder 1.11.34 → 1.12.0

package/config/webpack.config.dev.js

@@ -11,6 +11,7 @@ import getClientEnvironment from './env.js';
 import * as paths from './paths.js';
 import _ from 'lodash';
 import { createRequire } from 'module';
+import chalk from 'chalk';
 
 const require = createRequire(import.meta.url);
 
@@ -30,7 +31,7 @@ let env = getClientEnvironment(publicUrl);
 let ssbConfig = {};
 
 if(fs.existsSync(paths.ssbConfig)) {
-  let ssbConfigObj = require(paths.ssbConfig);
+  const ssbConfigObj = require(paths.ssbConfig);
   if(ssbConfigObj) {
     if(_.isFunction(ssbConfigObj)) {
       ssbConfig = ssbConfigObj(env.raw, 'development', { publicUrl, ...paths });
@@ -70,6 +71,11 @@ if(ssbConfig.htmlWebpackPluginOptions && _.isPlainObject(ssbConfig.htmlWebpackPl
   htmlWebpackPluginOptions = _.extend({}, htmlWebpackPluginOptions, ssbConfig.htmlWebpackPluginOptions);
 }
 
+function box(text, boxFormat, textFormat) {
+  const border = boxFormat(`+-${'-'.repeat(text.length)}-+`);
+  return `${border}\n${boxFormat('| ')}${textFormat(text)}${boxFormat(' |')}\n${border}`;
+}
+
 const plugins = [
   new webpack.DefinePlugin(env.stringified),
   new HtmlWebpackPlugin(htmlWebpackPluginOptions),
@@ -78,6 +84,22 @@ const plugins = [
     fileName: 'asset-manifest.json',
     publicPath: publicPath
   }),
+  {
+    apply(compiler) {
+      const bld = chalk.bold;
+      const bgr = chalk.bold.green;
+      let first = true;
+      // Taps into the watchRun hook which fires when a watch build begins
+      compiler.hooks.watchRun.tap('WatchStartLoggerPlugin', () => {
+        if(first) {
+          first = false;
+          console.log(`\n${box('Starting initial build...', bld, bgr)}\n`);
+          return;
+        }
+        console.log(`\n${box('File change detected. Starting new build...', bld, bgr)}\n`);
+      });
+    }
+  },
 ];
 
 if(ssbConfig.plugins && _.isArray(ssbConfig.plugins)) {

package/config/webpack.config.prod.js

@@ -21,14 +21,14 @@ const require = createRequire(import.meta.url);
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
-let publicPath = paths.servedPath;
+const publicPath = paths.servedPath;
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
 // const shouldUseRelativeAssetPaths = publicPath === './';
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-let publicUrl = publicPath.slice(0, -1);
+const publicUrl = publicPath.slice(0, -1);
 
 let env = getClientEnvironment(publicUrl);
 
@@ -45,7 +45,7 @@ if(fs.existsSync(paths.publicDir)) {
 let ssbConfig = {};
 
 if(fs.existsSync(paths.ssbConfig)) {
-  let ssbConfigObj = require(paths.ssbConfig);
+  const ssbConfigObj = require(paths.ssbConfig);
   if(ssbConfigObj) {
     if(_.isFunction(ssbConfigObj)) {
       ssbConfig = ssbConfigObj(env.raw, 'production', { publicUrl, ...paths });
@@ -206,14 +206,14 @@ const getSizeValue = (val) => {
   if(_.isNil(val) || val === false) { return null; }
   if(_.isNumber(val) && !_.isNaN(val)) { return Math.round(val); }
   if(_.isString(val)) {
-    let m = val.match(/^(\d+(?:\.\d+)?|\.\d+)([bkmg])?$/i);
+    const m = val.match(/^(\d+(?:\.\d+)?|\.\d+)([bkmg])?$/i);
     if(m) {
-      let num = parseFloat(m[1]);
+      const num = parseFloat(m[1]);
       if(!_.isNaN(num)) {
         let unit = m[2];
         if(!unit || unit === '') { unit = 'b'; }
         unit = unit.toLowerCase();
-        let unitIndex = 'bkmg'.indexOf(unit);
+        const unitIndex = 'bkmg'.indexOf(unit);
         if(unitIndex >= 0 || unitIndex <= 3) {
           return Math.round(num * Math.pow(1024, unitIndex));
         }
@@ -223,13 +223,13 @@ const getSizeValue = (val) => {
   return null;
 };
 
-let maxEntrypointSize = getSizeValue(config && config.maxEntrypointSize);
+const maxEntrypointSize = getSizeValue(config && config.maxEntrypointSize);
 
 if(config && maxEntrypointSize) {
   performance.maxEntrypointSize = maxEntrypointSize;
 }
 
-let maxAssetSize = getSizeValue(config && config.maxAssetSize);
+const maxAssetSize = getSizeValue(config && config.maxAssetSize);
 
 if(config && maxAssetSize) {
   performance.maxAssetSize = maxAssetSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@henderea/static-site-builder",
-  "version": "1.11.34",
+  "version": "1.12.0",
   "description": "A static site builder",
   "main": "index.js",
   "repository": {
@@ -29,21 +29,21 @@
   },
   "type": "module",
   "dependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-runtime": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
     "babel-loader": "^10.1.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^5.6.2",
     "copy-webpack-plugin": "^14.0.0",
     "cross-spawn": "^7.0.6",
     "css-loader": "^7.1.4",
-    "cssnano": "^7.1.7",
+    "cssnano": "^8.0.1",
     "dotenv": "^17.4.2",
     "dotenv-expand": "^13.0.0",
     "ejs": "^5.0.2",
     "file-loader": "^6.2.0",
-    "filesize": "^11.0.16",
+    "filesize": "^11.0.17",
     "find-pkg": "^2.0.0",
     "globby": "^16.2.0",
     "gzip-size": "^7.0.0",
@@ -54,29 +54,32 @@
     "moment": "^2.30.1",
     "moment-locales-webpack-plugin": "^1.2.0",
     "postcss-loader": "^8.2.1",
-    "postcss-preset-env": "^11.2.1",
+    "postcss-preset-env": "^11.3.0",
     "recursive-readdir": "^2.2.3",
-    "sass": "^1.99.0",
-    "sass-loader": "^16.0.7",
+    "sass": "^1.100.0",
+    "sass-loader": "^17.0.0",
     "strip-ansi": "^7.2.0",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.5.0",
+    "terser-webpack-plugin": "^5.6.1",
     "thread-loader": "^4.0.4",
-    "ts-loader": "^9.5.7",
+    "ts-loader": "^9.6.0",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "webpack": "^5.106.2",
+    "webpack": "^5.107.2",
     "webpack-manifest-plugin": "^6.0.1",
-    "workbox-webpack-plugin": "^7.4.0"
+    "workbox-webpack-plugin": "^7.4.1"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.0",
-    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
     "eslint": "^9.39.4",
-    "eslint-config-henderea": "^2.0.123",
+    "eslint-config-henderea": "^2.0.125",
     "eslint-plugin-import": "^2.32.0",
-    "globals": "^17.5.0",
+    "globals": "^17.6.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.0"
+    "typescript-eslint": "^8.60.1"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.5.6": true
   }
 }

package/scripts/watch.js

@@ -43,8 +43,12 @@ measureFileSizesBeforeBuild(paths.appBuild)
     // Start the webpack build
     return build(previousFileSizes,
       ({ stats, previousFileSizes, warnings }) => {
+        const startTime = stats.compilation.startTime;
+        const endTime = stats.compilation.endTime;
+        const totalDuration = endTime - startTime;
+        const durationDisplay = totalDuration < 1000 ? `${totalDuration} ms` : `${totalDuration / 1000.0} s`;
         if(warnings.length) {
-          console.log(chalk.yellow('Compiled with warnings.\n'));
+          console.log(`${chalk.yellow('Compiled with warnings in')} ${chalk.bold(durationDisplay)}\n`);
           console.log(warnings.join('\n\n'));
           console.log(
             '\nSearch for the ' +
@@ -57,7 +61,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
                         ' to the line before.\n'
           );
         } else {
-          console.log(chalk.green('Compiled successfully.\n'));
+          console.log(`${chalk.green('Compiled successfully in')} ${chalk.bold(durationDisplay)}\n`);
         }
 
         console.log('File sizes after gzip:\n');
@@ -83,7 +87,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes, resolve, reject) {
-  let compiler = webpack(config);
+  const compiler = webpack(config);
   compiler.watch({}, (err, stats) => {
     if(err) {
       return reject(err);