@ideasonpurpose/build-tools-wordpress 1.1.14 → 1.2.1

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### v1.2.0
+
+> 19 September 2024
+
+- deprecation free build! closes #5
+- bump deps, remove some for deprecations. Ref #5
+- bump deps, update examples and testing
+- export webpackConfig
+
+#### v1.1.14
+
+> 6 May 2024
+
+- minor bumps
+
 #### v1.1.13
 
 > 10 April 2024

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 1.1.14
+#### Version 1.2.1
 
 [![NPM Version](https://img.shields.io/npm/v/%40ideasonpurpose%2Fbuild-tools-wordpress?logo=npm)](https://www.npmjs.com/package/@ideasonpurpose/build-tools-wordpress)
 [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/ideasonpurpose/build-tools-wordpress/npm-publish.yml?logo=github&logoColor=white)](https://github.com/ideasonpurpose/build-tools-wordpress#readme)

package/config/ideasonpurpose.config.js

@@ -0,0 +1,29 @@
+/**
+ * Future node versions should import package.json directly:
+ *   import packageJson from "./package.json" with { type: "json" };
+ *
+ * In the current node.js LTS v20, importing JSON throws the following warnings:
+ *   (node:14509) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+ *   (Use `node --trace-warnings ...` to show where the warning was created)
+ *
+ * NOTE: This file does not work if the build runs from Docker. Inside a Docker volume, the
+ * theme name pulls instead from the docker image's package.json file, which will probably
+ * create a theme named 'iop-build-tools'.
+ */
+import { readFileSync } from "fs";
+const packageJson = JSON.parse(readFileSync("./package.json"));
+// import packageJson from "./package.json" with { type: "json" };
+
+const { name: themeName } = packageJson;
+
+export default {
+  src: `./wp-content/themes/${themeName}/src`,
+  dist: `./wp-content/themes/${themeName}/dist`,
+  entry: ["./js/main.js", "./js/admin.js", "./js/editor.js"],
+  publicPath: `/wp-content/themes/${themeName}/dist/`,
+
+  sass: "sass-embedded",
+  esTarget: "es2020",
+
+  devtool: "source-map",
+};

package/config/webpack.config.js

@@ -0,0 +1,618 @@
+import { posix as path } from "path";
+
+import { statSync } from "fs";
+import { cosmiconfig, cosmiconfigSync } from "cosmiconfig";
+import chalk from "chalk";
+
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { EsbuildPlugin } from "esbuild-loader";
+
+import CopyPlugin from "copy-webpack-plugin";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import ImageMinimizerPlugin from "image-minimizer-webpack-plugin";
+
+import {
+  AfterDoneReporterPlugin,
+  buildConfig,
+  DependencyManifestPlugin,
+  devserverProxy,
+  findLocalPort,
+  WatchRunReporterPlugin,
+} from "../index.js";
+
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+
+/**
+ * Sass flavors for conditional sass-loader implementations
+ */
+// import * as nodeSass from "sass";
+// import * as dartSass from "sass-embedded";
+
+// Experimenting with this
+import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+
+/**
+ * Force `mode: production` when running the analyzer
+ * TODO: webpack5 changed env in here, might need to change WEBPACK_BUNDLE_ANALYZER
+ */
+if (process.env.WEBPACK_BUNDLE_ANALYZER) process.env.NODE_ENV = "production";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+const stats = {
+  preset: "normal",
+  cachedAssets: false,
+  assets: true,
+  // assetsSpace: 12,
+  // context: new URL( import.meta.url).pathname,
+  // all: true,
+  // assets: true,
+  // builtAt: true,
+  // cachedModules: true,
+  // children: false, // Adds a bunch of blank lines to stats output
+  // chunkGroups: false,
+  // chunkModules: false,
+  // chunkOrigins: true,
+  // chunkRelations: true,
+  // chunks: false,
+  // colors: true,
+  // depth: false,
+  // env: true,
+  hash: true,
+  // orphanModules: false,
+  // dependentModules: true,
+  modules: false,
+  groupAssetsByChunk: true,
+  entrypoints: true,
+  // // errorDetails: "auto",
+  children: false,
+  // errorDetails: true,
+  errors: true,
+  errorStack: true,
+  // excludeAssets: [/hot-update/, /_sock-/],
+  // groupAssetsByChunk: true,
+  // logging: "warn",
+  // optimizationBailout: true,
+  // loggingTrace: false,
+  performance: true,
+  reasons: false,
+  relatedAssets: false,
+  timings: true,
+  version: true,
+  warnings: true,
+  loggingDebug: ["sass-loader"],
+};
+
+export default async (env) => {
+  // const siteDir = new URL(import.meta.url).pathname;
+  const siteDir = process.cwd();
+  const explorer = cosmiconfig("ideasonpurpose", { searchStrategy: "project" });
+  const configFile = await explorer.search(siteDir);
+
+  const config = await buildConfig(configFile);
+
+  const proxy = isProduction ? {} : await devserverProxy(config);
+
+  setTimeout(() =>
+    console.log(
+      chalk.magenta.bold("sass implementation"),
+      chalk.yellow.bold(config.sass),
+      // config.sass === "sass" ? nodeSass : dartSass,
+    ),
+  );
+
+  /**
+   * `usePolling` is a placeholder, try and detect native Windows Docker mounts
+   * since they don't support file-watching (no inotify events), if there's
+   * something clean, use that instead. For now, this will force-enable polling.
+   *
+   * TODO: usePolling is likely no longer needed since webpack is running from node and
+   *       not Docker
+   *
+   * TODO: Why so much dancing around defaults when this could just inherit from default.config?
+   */
+  const usePolling = Boolean(config.usePolling); // likely undefined, coerced to false
+  const pollInterval = Math.max(
+    parseInt(config.pollInterval, 10) || parseInt(config.usePolling, 10) || 400,
+    400,
+  );
+
+  const devtool = config.devtool || false;
+
+  const sassLibs = ["sass-embedded", "sass", "node-sass"];
+  const sassImplementation = sassLibs.includes(config.sass)
+    ? { implementation: config.sass }
+    : {};
+
+  // console.log({
+  //   metaurl: new URL("webpack/stats/index.html", import.meta.url),
+  //   config,
+  //   // devServerProxy: await devserverProxy(config),
+  // });
+
+  return {
+    // stats: "errors-warnings",
+    stats,
+    module: {
+      rules: [
+        // {
+        //   test: /\.(js|jsx|mjs)$/,
+        //   include: [
+        //     path.resolve(config.src),
+        //     path.resolve("../tools/node_modules"),
+        //     path.resolve("../site/node_modules"),
+        //   ],
+        //   exclude: function (module) {
+        //     const moduleRegex = new RegExp(
+        //       `node_modules/(${config.transpileDependencies.join("|")})`
+        //     );
+        //     return /node_modules/.test(module) && !moduleRegex.test(module);
+        //   },
+
+        //   /**
+        //    * EXPERIMENTAL!!
+        //    * If JS compilation breaks, try reverting this first.
+        //    */
+        //   loader: "esbuild-loader",
+        //   options: {
+        //     loader: "jsx",
+        //     target: "es2015",
+        //   },
+
+        /**
+         * Updated 2022-09, simpler
+         */
+        {
+          test: /\.[jt]sx?$/,
+          // test: /\.js$/,
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            target: config.esTarget,
+          },
+        },
+        // {
+        //   test: /\.tsx?$/,
+        //   loader: "esbuild-loader",
+        //   options: {
+        //     loader: "tsx",
+        //     target: config.esTarget,
+        //   },
+        // },
+
+        // use: {
+        //   loader: "babel-loader",
+        //   options: {
+        //     cacheDirectory: !isProduction,
+        //     sourceType: "unambiguous",
+        //     plugins: [
+        //       "@babel/plugin-syntax-dynamic-import",
+        //       ...(isProduction
+        //         ? []
+        //         : ["@babel/plugin-transform-react-jsx-source"]),
+        //     ],
+        //     presets: [
+        //       [
+        //         "@babel/preset-env",
+        //         {
+        //           forceAllTransforms: true,
+        //           useBuiltIns: "usage",
+        //           configPath: config.src,
+        //           corejs: 3,
+        //           modules: false,
+        //           debug: false,
+        //         },
+        //       ],
+        //       "@babel/preset-react",
+        //     ],
+        //   },
+        // },
+        // },
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            { loader: MiniCssExtractPlugin.loader },
+            {
+              loader: "css-loader",
+              options: {
+                import: false, // imports already handled by Sass or PostCSS
+                // sourceMap: !isProduction,
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: isProduction
+                    ? [
+                        autoprefixer,
+                        cssnano({ preset: ["default", { colormin: false }] }),
+                      ]
+                    : [autoprefixer],
+                },
+              },
+            },
+            // {
+            //   loader: "resolve-url-loader",
+            //   options: {
+            //     // sourceMap: true,
+            //     // debug: true,
+            //   },
+            // },
+            {
+              loader: "sass-loader",
+              options: {
+                ...sassImplementation,
+                // implementation: config.sass === "sass" ? nodeSass : dartSass,
+                // implementation: nodeSass,
+                // implementation: await import(config.sass),
+                sourceMap: !isProduction,
+                warnRuleAsWarning: true,
+                webpackImporter: false,
+                sassOptions: {
+                  // api: "modern",
+
+                  includePaths: [
+                    path.resolve(config.src, "sass"),
+                    path.resolve(config.src),
+                    // path.resolve("../site/node_modules"),
+                    path.resolve("node_modules"),
+                  ],
+                  style: "expanded",
+                  verbose: true,
+                },
+              },
+            },
+          ],
+        },
+        /**
+         * This image loader is specifically for images which are required or
+         * imported into a webpack processed entry file. Optimization is
+         * handled by image-minimizer-webpack-plugin. These assets will be
+         * renamed with a chunkhash fragment.
+         *
+         * All images under `config.src` will be optimized and copied by
+         * copy-webpack-plugin but will keep their original filenames and
+         * relative paths. Images included in SCSS files will be processed
+         * twice, once with a hashed name and again with its original name.
+         */
+        {
+          test: /\.(jpe?g|png|gif|tif|webp|avif)$/i,
+          type: "asset",
+        },
+
+        /**
+         * SVGs can be imported as asset urls or React components
+         *
+         * To import an SVG file as a src url, append ?url to the filename:
+         *     import svg from './assets/file.svg?url'
+         *
+         * To import an SVG file as a React component
+
+         * @link https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+         */
+        {
+          test: /\.svg$/i,
+          type: "asset",
+          resourceQuery: /url/, // *.svg?url
+        },
+        {
+          test: /\.svg$/i,
+          issuer: /\.[jt]sx?$/,
+          resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+          use: ["@svgr/webpack"],
+        },
+        {
+          test: /fonts\/.*\.(ttf|eot|woff2?)$/i,
+          type: "asset",
+        },
+      ],
+    },
+
+    context: path.resolve(config.src),
+
+    resolve: {
+      modules: [
+        path.resolve("../tools/node_modules"),
+        path.resolve("../site/node_modules"),
+        path.resolve("./node_modules"),
+      ],
+    },
+
+    resolveLoader: {
+      modules: [
+        path.resolve("../tools/node_modules"),
+        path.resolve("./node_modules"), // for local development when running outside of Docker
+      ],
+    },
+
+    entry: config.entry,
+
+    output: {
+      path: new URL(config.dist, import.meta.url).pathname,
+      /**
+       * Primary output filenames SHOULD NOT include hashes in development because
+       * some files are written to disk from devServer middleware. Because those
+       * files are written outside standard webpack output, they aren't cleaned
+       * up by standard webpack cleaning functions.
+       */
+      filename: isProduction ? "[name]-[contenthash:8].js" : "[name].js",
+      chunkFilename: "[id]-[chunkhash:8].js",
+      publicPath: config.publicPath,
+      /**
+       * Assets are not cleaned when writeToDisk is true in devServer
+       * Works correctly with builds.
+       * @link https://github.com/webpack/webpack-dev-middleware/issues/861
+       */
+      clean: true,
+    },
+
+    devServer: {
+      host: "0.0.0.0",
+      allowedHosts: "all",
+      port: "auto",
+      // hot: true, // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
+      hot: "only", // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
+      client: {
+        logging: "info",
+        overlay: {
+          errors: true,
+          warnings: true,
+          runtimeErrors: (error) => {
+            // specific errors can be inspected and handled individually
+            // https://webpack.js.org/configuration/dev-server/#overlay
+            // console.log("webpack devServer runtimeError:", error);
+            return false;
+          },
+        },
+        reconnect: 30,
+        // webSocketURL: {
+        //   port: parseInt(process.env.PORT), // external port, so websockets hit the right endpoint
+        // },
+      },
+      // webSocketServer: "ws",
+      // static: {
+      //   // TODO: Should contentBase be `false` when there's a proxy?
+      //   directory: path.join("/usr/src/site/", config.contentBase),
+      //   /*
+      //    * TODO: Poll options were enabled as a workaround for Docker-win volume inotify
+      //    *       issues. Looking to make this conditional...
+      //    *       Maybe defined `isWindows` or `hasiNotify` for assigning a value
+      //    *       Placeholder defined at the top of the file.
+      //    *       For now, `usePolling` is a boolean (set to true)
+      //    *       ref: https://github.com/docker/for-win/issues/56
+      //    *            https://www.npmjs.com/package/is-windows
+      //    *       TODO: Safe to remove?
+      //    *       TODO: Test on vanilla Windows (should now work in WSL)
+      //    */
+
+      //   watch: {
+      //     poll: usePolling && pollInterval,
+      //     ignored: ["node_modules", "vendor"],
+      //   },
+      // },
+
+      devMiddleware: {
+        index: false, // enable root proxying
+
+        writeToDisk: (filePath) => {
+          /**
+           * Note: If this is an async function, it will write everything to disk
+           *
+           * Never write hot-update files to disk.
+           */
+          // vendors-node_modules_mini-css-extract-plugin_dist_hmr_hotModuleReplacement_js-node_modules_we-780fe4.js.map
+          if (/.+(hot-update)\.(js|json|js\.map)$/.test(filePath)) {
+            return false;
+          }
+          // SHORT_CIRCUIT FOR TESTING
+          return true;
+
+          if (/.+\.(svg|json|php|jpg|png)$/.test(filePath)) {
+            const fileStat = statSync(filePath, { throwIfNoEntry: false });
+
+            /**
+             * Always write SVG, PHP & JSON files
+             */
+            if (/.+\.(svg|json|php)$/.test(filePath)) {
+              return true;
+            } else {
+              /**
+               * Write any images under 100k and anything not yet on disk
+               */
+              if (!fileStat || fileStat.size < 100 * 1024) {
+                return true;
+              }
+              /**
+               * TODO: This might all be unnecessary. Webpack seems to be doing a good job with its native caching
+               */
+              // const randOffset = Math.random() * 300000; // 0-5 minutes
+              // const expired = new Date() - fileStat.mtime > randOffset;
+              // const relPath = filePath.replace(config.dist, "dist");
+              // if (expired) {
+              //   console.log("DEBUG writeToDisk:", { replacing: relPath });
+              //   return true;
+              // }
+              // console.log("DEBUG writeToDisk:", { cached: relPath });
+            }
+          }
+          return false;
+        },
+        // stats,
+        // stats: 'verbose',
+      },
+
+      // NOTE: trying to make injection conditional so wp-admin stops reloading
+      // injectClient: compilerConfig => {
+      //   console.log(compilerConfig);
+      //   return true;
+      // },
+
+      onListening: (devServer) => {
+        const port = devServer.server.address().port;
+        devServer.compiler.options.devServer.port =
+          devServer.server.address().port;
+        devServer.compiler._devServer = devServer;
+
+        console.log("Listening on port:", port);
+      },
+
+      setupMiddlewares: (middlewares, devServer) => {
+        // devServer.compiler.options.devServer.port =  devServer.options.port;
+        // devServer.compiler._devServer =  devServer;
+        // if (!devServer) {
+        //   throw new Error("webpack-dev-server is not defined");
+        // }
+
+        //  devServer.internalIP('v4').then(ip => console.log('!!!!!!', ip));
+
+        /**
+         * The `/inform` route is an annoying bit of code. Here's why:
+         * Ubiquity Wi-fi hardware frequently spams the shit out of their
+         * networks, specifically requesting the `/inform` route from
+         * every device. We still have some Ubiquity hardware on our
+         * networks, so dev servers were constantly responding to
+         * `/inform` requests with 404s, filling logs and cluttering
+         * terminals. So that's why this is here. I hate it.
+         */
+        devServer.app.all("/inform", () => false);
+
+        /**
+         * The "/webpack/reload" endpoint will trigger a full devServer refresh
+         * Originally from our Browsersync implementation:
+         *
+         * https://github.com/ideasonpurpose/wp-theme-init/blob/ad8039c9757ffc3a0a0ed0adcc616a013fdc8604/src/ThemeInit.php#L202
+         */
+        devServer.app.get("/webpack/reload", (req, res) => {
+          console.log(
+            chalk.yellow("Reload triggered by request to /webpack/reload"),
+          );
+
+          devServer.sendMessage(
+            devServer.webSocketServer.clients,
+            "content-changed",
+          );
+          res.json({ status: "Reloading!" });
+        });
+
+        return middlewares;
+      },
+
+      watchFiles: {
+        paths: [
+          path.resolve(config.src, "../**/*.{php,html,svg,json}"), // WordPress
+        ],
+        options: {
+          ignored: [
+            "**/.git/**",
+            "**/vendor/**",
+            "**/node_modules/**",
+            "**/dist/**",
+          ],
+          ignoreInitial: true,
+          ignorePermissionErrors: true,
+          /**
+           * TODO: Can polling be removed everywhere?
+           * @link  https://github.com/docker/for-win/issues/56#issuecomment-576749639
+           */
+          usePolling,
+          interval: pollInterval,
+        },
+      },
+
+      ...proxy,
+    },
+
+    mode: isProduction ? "production" : "development",
+
+    performance: {
+      hints: isProduction ? "warning" : false,
+    },
+
+    devtool,
+
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: isProduction ? "[name]-[contenthash:8].css" : "[name].css",
+      }),
+
+      new CopyPlugin({
+        patterns: [
+          {
+            from: "**/*",
+            globOptions: {
+              dot: true, // TODO: Dangerous? Why is this ever necessary?!
+              ignore: [
+                "**/{.gitignore,.DS_Store,*:Zone.Identifier}",
+                config.src + "/{block,blocks,fonts,js,sass}/**",
+              ],
+            },
+            noErrorOnMissing: true,
+          },
+          {
+            from: config.src + "/{block,blocks}/**/block.json",
+            noErrorOnMissing: true,
+          }, // re-add block.json files for loading from PHP
+        ],
+        options: { concurrency: 50 },
+      }),
+
+      /**
+       * @link https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dependency-extraction-webpack-plugin/
+       */
+      new DependencyExtractionWebpackPlugin(),
+
+      new DependencyManifestPlugin({
+        writeManifestFile: true,
+        manifestFile: config.manifestFile,
+      }),
+
+      new WatchRunReporterPlugin(),
+
+      new AfterDoneReporterPlugin({
+        echo: env && env.WEBPACK_SERVE,
+        // message:
+        //   "Dev site " + chalk.blue.bold(`http://localhost:${process.env.PORT}`),
+      }),
+
+      new BundleAnalyzerPlugin({
+        analyzerMode: isProduction ? "static" : "disabled",
+        openAnalyzer: false,
+        reportFilename: new URL("webpack/stats/index.html", import.meta.url)
+          .pathname,
+      }),
+    ],
+    optimization: {
+      splitChunks: {
+        chunks: "all",
+      },
+      minimizer: [
+        new EsbuildPlugin({
+          target: config.esTarget,
+          css: true,
+        }),
+        new ImageMinimizerPlugin({
+          severityError: "error",
+
+          minimizer: {
+            implementation: ImageMinimizerPlugin.sharpMinify,
+
+            options: {
+              /**
+               * Sharp options
+               */
+              encodeOptions: {
+                jpeg: {
+                  quality: 70,
+                  mozjpeg: true,
+                },
+                png: {},
+              },
+            },
+          },
+        }),
+      ],
+    },
+  };
+};

package/example/ideasonpurpose.config.js

@@ -0,0 +1,29 @@
+/**
+ * Future node versions should import package.json directly:
+ *   import packageJson from "./package.json" with { type: "json" };
+ *
+ * In the current node.js LTS v20, importing JSON throws the following warnings:
+ *   (node:14509) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+ *   (Use `node --trace-warnings ...` to show where the warning was created)
+ *
+ * NOTE: This file does not work if the build runs from Docker. Inside a Docker volume, the
+ * theme name pulls instead from the docker image's package.json file, which will probably
+ * create a theme named 'iop-build-tools'.
+ */
+import { readFileSync } from "fs";
+const packageJson = JSON.parse(readFileSync("./package.json"));
+// import packageJson from "./package.json" with { type: "json" };
+
+const { name: themeName } = packageJson;
+
+export default {
+  src: `./wp-content/themes/${themeName}/src`,
+  dist: `./wp-content/themes/${themeName}/dist`,
+  entry: ["./js/main.js", "./js/admin.js", "./js/editor.js"],
+  publicPath: `/wp-content/themes/${themeName}/dist/`,
+
+  sass: "sass-embedded",
+  esTarget: "es2020",
+
+  devtool: "source-map",
+};

package/example/webpack.config.js

@@ -26,8 +26,8 @@ import cssnano from "cssnano";
 /**
  * Sass flavors for conditional sass-loader implementations
  */
-import * as nodeSass from "sass";
-import * as dartSass from "sass-embedded";
+// import * as nodeSass from "sass";
+// import * as dartSass from "sass-embedded";
 
 // Experimenting with this
 import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
@@ -84,23 +84,19 @@ const stats = {
 };
 
 export default async (env) => {
-  // const siteDir = new URL("../site", import.meta.url).pathname;
   const siteDir = new URL(import.meta.url).pathname;
-  // const explorerSync = cosmiconfigSync("ideasonpurpose");
-  const explorer = cosmiconfig("ideasonpurpose");
-  // const configFile = explorerSync.search(siteDir);
+  const explorer = cosmiconfig("ideasonpurpose", { searchStrategy: "project" });
   const configFile = await explorer.search(siteDir);
 
-  // import buildConfig from "./lib/buildConfig.js";
-  // console.log({ siteDir, configFile, nm: path.resolve("node_modules") });
-
   const config = await buildConfig(configFile);
 
+  const proxy = isProduction ? {} : await devserverProxy(config);
+
   setTimeout(() =>
     console.log(
       chalk.magenta.bold("sass implementation"),
       chalk.yellow.bold(config.sass),
-      config.sass === "sass" ? nodeSass : dartSass,
+      // config.sass === "sass" ? nodeSass : dartSass,
     ),
   );
 
@@ -111,7 +107,7 @@ export default async (env) => {
    *
    * TODO: Why so much dancing around defaults when this could just inherit from default.config?
    */
-  const usePolling = Boolean(config.usePolling);
+  const usePolling = Boolean(config.usePolling); // likely undefined, coerced to false
   const pollInterval = Math.max(
     parseInt(config.pollInterval, 10) || parseInt(config.usePolling, 10) || 400,
     400,
@@ -119,7 +115,19 @@ export default async (env) => {
 
   const devtool = config.devtool || false;
 
-  console.log({ config, devServerProxy: await devserverProxy(config) });
+  const sassLibs = ["sass-embedded", "sass", "node-sass"];
+  const sassImplementation = sassLibs.includes(config.sass)
+    ? { implementation: config.sass }
+    : {};
+
+  // TODO: Move this into buildConfig()
+  config.esTarget = config.esTarget || "es2020"; // was "es2015"
+
+  console.log({
+    metaurl: new URL("webpack/stats/index.html", import.meta.url),
+    config,
+    // devServerProxy: await devserverProxy(config),
+  });
 
   return {
     // stats: "errors-warnings",
@@ -154,21 +162,22 @@ export default async (env) => {
          * Updated 2022-09, simpler
          */
         {
-          test: /\.m?jsx?$/,
+          test: /\.[jt]sx?$/,
+          // test: /\.js$/,
           loader: "esbuild-loader",
           options: {
             loader: "jsx",
-            target: "es2015",
-          },
-        },
-        {
-          test: /\.tsx?$/,
-          loader: "esbuild-loader",
-          options: {
-            loader: "tsx",
-            target: "es2015",
+            target: config.esTarget,
           },
         },
+        // {
+        //   test: /\.tsx?$/,
+        //   loader: "esbuild-loader",
+        //   options: {
+        //     loader: "tsx",
+        //     target: config.esTarget,
+        //   },
+        // },
 
         // use: {
         //   loader: "babel-loader",
@@ -232,7 +241,8 @@ export default async (env) => {
             {
               loader: "sass-loader",
               options: {
-                implementation: config.sass === "sass" ? nodeSass : dartSass,
+                ...sassImplementation,
+                // implementation: config.sass === "sass" ? nodeSass : dartSass,
                 // implementation: nodeSass,
                 // implementation: await import(config.sass),
                 sourceMap: !isProduction,
@@ -243,6 +253,7 @@ export default async (env) => {
 
                   includePaths: [
                     path.resolve(config.src, "sass"),
+                    path.resolve(config.src),
                     // path.resolve("../site/node_modules"),
                     path.resolve("node_modules"),
                   ],
@@ -338,17 +349,21 @@ export default async (env) => {
     devServer: {
       host: "0.0.0.0",
       allowedHosts: "all",
-      // setupExitSignals: true,// default
-
-      compress: config.devServerCompress || false, // TODO: True by default in devServer v4, exposed via config.devServerCompress to test speed impact
       port: "auto",
       // hot: true, // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
-      hot: 'only', // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
+      hot: "only", // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
       client: {
-        // logging: "error", // TODO: New, is this ok?
-        logging: "info", // TODO: New, is this ok?
-        overlay: true, // { warnings: true, errors: true },
-        progress: true, // TODO: New, is this ok?
+        logging: "info",
+        overlay: {
+          errors: true,
+          warnings: true,
+          runtimeErrors: (error) => {
+            // specific errors can be inspected and handled individually
+            // https://webpack.js.org/configuration/dev-server/#overlay
+            // console.log("webpack devServer runtimeError:", error);
+            return false;
+          },
+        },
         reconnect: 30,
         // webSocketURL: {
         //   port: parseInt(process.env.PORT), // external port, so websockets hit the right endpoint
@@ -482,11 +497,15 @@ export default async (env) => {
 
       watchFiles: {
         paths: [
-          path.resolve(config.src, "../**/*.{php,json}"), // WordPress
-          // path.resolve(config.src, `../${config.contentBase}/*.html`), // Jekyll
+          path.resolve(config.src, "../**/*.{php,html,svg,json}"), // WordPress
         ],
         options: {
-          ignored: ["**/.git/**", "**/vendor/**", "**/node_modules/**", "**/dist/**"],
+          ignored: [
+            "**/.git/**",
+            "**/vendor/**",
+            "**/node_modules/**",
+            "**/dist/**",
+          ],
           ignoreInitial: true,
           ignorePermissionErrors: true,
           /**
@@ -498,7 +517,10 @@ export default async (env) => {
         },
       },
 
-      ...(await devserverProxy(config)),
+      // ...(await devserverProxy(config)),
+      // TODO: Move
+      // ...(isProduction ? {} : await devserverProxy(config)),
+      ...proxy,
     },
 
     mode: isProduction ? "production" : "development",
@@ -522,10 +544,15 @@ export default async (env) => {
               dot: true, // TODO: Dangerous? Why is this ever necessary?!
               ignore: [
                 "**/{.gitignore,.DS_Store,*:Zone.Identifier}",
-                config.src + "/{blocks,fonts,js,sass}/**",
+                config.src + "/{block,blocks,fonts,js,sass}/**",
               ],
             },
+            noErrorOnMissing: true,
           },
+          {
+            from: config.src + "/{block,blocks}/**/block.json",
+            noErrorOnMissing: true,
+          }, // re-add block.json files for loading from PHP
         ],
         options: { concurrency: 50 },
       }),
@@ -551,7 +578,8 @@ export default async (env) => {
       new BundleAnalyzerPlugin({
         analyzerMode: isProduction ? "static" : "disabled",
         openAnalyzer: false,
-        reportFilename: path.resolve(siteDir, "webpack/stats/index.html"),
+        reportFilename: new URL("webpack/stats/index.html", import.meta.url)
+          .pathname,
       }),
     ],
     optimization: {
@@ -560,12 +588,8 @@ export default async (env) => {
       },
       minimizer: [
         new EsbuildPlugin({
-          /**
-           * Additional targets, can we bump this up to es2020 yet?
-           * TODO: Expose this to the config
-           * @link https://esbuild.github.io/content-types/#javascript
-           */
-          target: "es2015",
+          target: config.esTarget,
+          css: true,
         }),
         new ImageMinimizerPlugin({
           severityError: "error",

package/index.js

@@ -8,6 +8,8 @@ export { findLocalPort } from "./lib/find-local-docker-port.js";
 // export * from  "./lib/find-local-docker-port.js";
 // import findLocalPort from "./lib/find-local-docker-port.js";
 
+import webpackConfig from "./config/webpack.config.js";
+export { webpackConfig };
 // export default {
 //   // AfterDoneReporterPlugin,
 //   //   buildConfig,

package/lib/AfterDoneReporterPlugin.js

@@ -44,7 +44,8 @@ export class AfterDoneReporterPlugin {
         const aCount = chalk.yellow.bold(assetsInfo.size);
 
         const messages = [
-          `Compiled ${mCount} input modules into ${aCount} files in ${time}`,
+          // `Compiled ${mCount} input modules into ${aCount} files in ${time}`,
+          // "Dev site " + chalk.blue(`http://${hostname}:${chalk.bold(port)}`),
           "Dev site " + chalk.blue(`http://${hostname}:${chalk.bold(port)}`),
           this.config.message,
         ]
@@ -52,7 +53,8 @@ export class AfterDoneReporterPlugin {
           .join("\n" + this.config.prefix + " ");
 
         setTimeout(() =>
-          console.log("\n" + this.config.prefix + " " + messages),
+          // console.log("\n" + this.config.prefix + " " + messages),
+          console.log( "⚙️ " + messages),
         );
 
         setTimeout(() => {

package/lib/WatchRunReporterPlugin.js

@@ -45,7 +45,11 @@ export class WatchRunReporterPlugin {
             msg = `Modified ${chalk.bold.yellow(modFiles[0] || basePath)} `;
           }
         }
-        console.log(this.config.prefix, msg + this.config.message);
+        // console.log(this.config.prefix, msg + this.config.message);
+        console.clear();
+        if (msg) {
+          console.log("\n💫 ", msg);
+        }
       }
     });
   }

package/lib/buildConfig.js

@@ -39,20 +39,20 @@ export async function buildConfig(configFile = { config: {} }) {
    * TODO: This warning can be removed once all process.env.NAME assignments are removed
    * removed from project configuration files.
    */
-  if (configFile.filepath) {
-    const rawConfigFile = fs.readFileSync(configFile.filepath);
-    const packageJson = fs.readJsonSync(
-      path.resolve(configFile.filepath, "../package.json"),
-    );
-    // console.log({ p: process.env.NAME });
-    if (
-      packageJson.name !== process.env.NAME &&
-      rawConfigFile.includes("process.env.NAME") &&
-      configFile.config.src.includes(process.env.NAME)
-    ) {
-      nameEnvVarWarning();
-    }
-  }
+  // if (configFile.filepath) {
+  //   const rawConfigFile = fs.readFileSync(configFile.filepath);
+  //   const packageJson = fs.readJsonSync(
+  //     path.resolve(configFile.filepath, "../package.json"),
+  //   );
+  //   // console.log({ p: process.env.NAME });
+  //   if (
+  //     packageJson.name !== process.env.NAME &&
+  //     rawConfigFile.includes("process.env.NAME") &&
+  //     configFile.config.src.includes(process.env.NAME)
+  //   ) {
+  //     nameEnvVarWarning();
+  //   }
+  // }
 
   /**
    * Merge configFile onto defaults

package/lib/devserver-proxy.js

@@ -57,8 +57,9 @@ export async function devserverProxy(config) {
     return {};
   }
 
-  const proxy = {
-    "**": {
+  const proxy = [
+    {
+      context: ["**"],
       target: target.origin,
       secure: false,
       autoRewrite: true,
@@ -135,7 +136,7 @@ export async function devserverProxy(config) {
         });
       },
     },
-  };
+  ];
 
   return { proxy };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "1.1.14",
+  "version": "1.2.1",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -20,6 +20,7 @@
   "main": "index.js",
   "bin": {
     "iop-build-port-reporter": "./bin/port-reporter.js",
+    "iop-project-init": "./bin/project-init.js",
     "iop-build-zip-archive": "./bin/zip.js"
   },
   "directories": {
@@ -31,19 +32,20 @@
   "prettier": "@ideasonpurpose/prettier-config",
   "dependencies": {
     "@ideasonpurpose/prettier-config": "^0.0.6",
+    "@inquirer/prompts": "^6.0.1",
     "@prettier/plugin-php": "^0.22.2",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^5.8.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.7.0",
     "ansi-html": "^0.0.9",
     "archiver": "^7.0.1",
-    "auto-changelog": "^2.4.0",
-    "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.3",
-    "body-parser": "^1.20.2",
-    "caniuse-lite": "^1.0.30001616",
+    "auto-changelog": "^2.5.0",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
+    "body-parser": "^1.20.3",
+    "caniuse-lite": "^1.0.30001660",
     "chalk": "^5.3.0",
     "chalk-cli": "^5.0.1",
     "classnames": "^2.5.1",
@@ -51,59 +53,55 @@
     "copy-webpack-plugin": "^12.0.2",
     "cosmiconfig": "^9.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.10.0",
-    "cssnano": "^6.1.2",
-    "del": "^7.1.0",
+    "css-loader": "^7.1.2",
+    "cssnano": "^7.0.6",
     "dotenv": "^16.4.5",
-    "esbuild-loader": "^4.1.0",
-    "eslint": "^8",
-    "eslint-plugin-react": "^7.34.1",
-    "filesize": "^10.1.1",
+    "esbuild-loader": "^4.2.2",
+    "eslint": "^9.10.0",
+    "filesize": "^10.1.6",
     "fs-extra": "^11.1.1",
-    "globby": "^14.0.1",
+    "globby": "^14.0.2",
     "http-proxy": "^1.18.1",
-    "humanize-duration": "^3.32.0",
-    "image-minimizer-webpack-plugin": "^4.0.0",
-    "is-text-path": "^2.0.0",
+    "humanize-duration": "^3.32.1",
+    "image-minimizer-webpack-plugin": "^4.1.0",
+    "is-text-path": "^3.0.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.9.0",
-    "node-sass": "^9.0.0",
-    "postcss": "^8.4.38",
+    "mini-css-extract-plugin": "^2.9.1",
+    "ora": "^8.1.0",
+    "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
+    "prettier": "^3.3.3",
     "pretty-hrtime": "^1.0.3",
     "read-package-up": "^11.0.0",
     "replacestream": "^4.0.3",
-    "sass": "^1.76.0",
-    "sass-embedded": "^1.76.0",
-    "sass-loader": "^14.2.1",
-    "semver": "^7.6.0",
-    "sharp": "^0.33.3",
-    "sort-package-json": "^2.10.0",
-    "source-map-explorer": "^2.5.3",
+    "sass": "^1.78.0",
+    "sass-embedded": "^1.78.0",
+    "sass-loader": "^16.0.1",
+    "semver": "^7.6.3",
+    "sharp": "^0.33.5",
+    "sort-package-json": "^2.10.1",
     "string-length": "^6.0.0",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.9.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-prettier": "^5.0.0",
-    "svgo": "^3.0.2",
+    "stylelint-prettier": "^5.0.2",
+    "svgo": "^3.3.2",
     "svgo-loader": "^4.0.0",
-    "version-everything": "^0.11.2",
-    "webpack": "^5.91.0",
+    "version-everything": "^0.11.4",
+    "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-middleware": "^7.2.1",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-middleware": "^7.4.2",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^2.1.1",
+    "vitest": "^2.1.1"
   },
   "version-everything": {
     "files": [
       "README.md"
     ]
-  },
-  "devDependencies": {
-    "@vitest/coverage-v8": "^1.6.0",
-    "vitest": "^1.6.0"
   }
 }