@ideasonpurpose/build-tools-wordpress 1.1.0

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,23 @@
+name: Publish to NPM
+
+on:
+  push:
+    tags: ["v*"]
+
+jobs:
+  publish:
+    name: Build and publish to npm
+    # https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources
+    runs-on: ubuntu-22.04
+    steps:
+      # https://github.com/marketplace/actions/checkout
+      - uses: actions/checkout@v3
+      # https://github.com/actions/setup-node
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      # - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/release-from-version-tag.yml

@@ -0,0 +1,32 @@
+name: Create Release from Version Tags
+
+on:
+  push:
+    tags: ["v*"]
+
+jobs:
+  build:
+    name: Build Release
+    # https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources
+    runs-on: ubuntu-22.04
+
+    steps:
+      # https://github.com/marketplace/actions/checkout
+      - uses: actions/checkout@v3
+
+      - name: Set up REPO and TAG environment vars
+        run: |
+          echo "REPO=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV
+          echo "TAG=${GITHUB_SHA:0:6}" >> $GITHUB_ENV
+
+      - name: This run was triggered by a version tag, reset the $TAG variable to the tag name
+        if: startsWith(github.ref, 'refs/tags/v')
+        run: |
+          echo "TAG=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
+
+      - name: Create GitHub release
+        if: ${{ contains(github.ref, 'refs/tags/') }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create v${TAG}

package/.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#ffc1dc",
+        "activityBar.background": "#ffc1dc",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#459f00",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "commandCenter.border": "#15202b99",
+        "sash.hoverBorder": "#ffc1dc",
+        "statusBar.background": "#ff8ebf",
+        "statusBar.foreground": "#15202b",
+        "statusBarItem.hoverBackground": "#ff5ba2",
+        "statusBarItem.remoteBackground": "#ff8ebf",
+        "statusBarItem.remoteForeground": "#15202b",
+        "titleBar.activeBackground": "#ff8ebf",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveBackground": "#ff8ebf99",
+        "titleBar.inactiveForeground": "#15202b99"
+    },
+    "peacock.color": "#ff8ebf"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ideas On Purpose
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# @ideasonpurpose/build-tools-wordpress
+
+#### Version 1.1.0
+
+Build scripts and dependencies for IOP's WordPress development environments.
+
+## About This Project
+
+These tools were migrated from our [Docker-based WordPress build tools](https://github.com/ideasonpurpose/docker-build) to speed up development and began the process of moving our build tools away from webpack. Gathering dependencies also simplifies the package.json files in host projects, making those slightly more manageable.
+
+This may end up being the container for all tools required for building a project. That would allow us to clean out most of the cruft from our project directories and only have a single dependency which packages everything we need.
+
+The included webpack.config.js file works best when paired with a PHP environment like our [Docker WordPress environments](https://github.com/ideasonpurpose/docker-wordpress-dev). It's capable of proxying to other servers, but that's sort of crazy.
+
+### Additional Notes
+
+This project expects an entirely ES Module based environment and specifies all dependencies using standard ESM import syntax. Projects importing this file should set `"type": "module"` in their package.json files. 
+
+##  
+
+#### Brought to you by IOP
+
+<a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-mint-on-black-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
+
+
+#### Brought to you by IOP
+
+<a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-white-on-black-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
+
+
+#### Brought to you by IOP
+
+<a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-clay-on-black-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
+
+
+#### Brought to you by IOP
+
+<a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-white-on-mint-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
+
+
+
+#### Brought to you by IOP
+
+<a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-black-on-mint-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
+
+
+
+#### Brought to you by IOP
+
+<a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-white-on-darkmint-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
+
+
+> *logo test...* 
+>😂

package/bin/port-reporter.js

@@ -0,0 +1,22 @@
+#! /usr/bin/env node
+import { exec } from "node:child_process";
+
+import chalk from "chalk";
+
+exec("docker compose port wordpress 80", (error, stdout, stderr) => {
+  if (error) {
+    console.error(`exec error: ${error}`);
+    return;
+  }
+  if (stdout) {
+    const [addr, port] = stdout.split(":");
+
+    console.log("\n",
+      " 🚀 ",
+     chalk.bold( "Local WP site:"),
+      chalk.magenta(`http://localhost:${chalk.bold(port)}`),
+    );
+  }
+  // console.log(`stdout: ${stdout}`);
+  // console.error(`stderr: ${stderr}`);
+});

package/index.js

@@ -0,0 +1,16 @@
+import AfterDoneReporterPlugin from "./lib/AfterDoneReporterPlugin.js";
+import buildConfig from "./lib/buildConfig.js";
+import DependencyManifestPlugin from "./lib/DependencyManifestPlugin.js";
+import devserverProxy from "./lib/devserver-proxy.js";
+import WatchRunReporterPlugin from "./lib/WatchRunReporterPlugin.js";
+
+
+
+// export { };
+export  {
+  AfterDoneReporterPlugin,
+  buildConfig,
+  DependencyManifestPlugin,
+  devserverProxy,
+  WatchRunReporterPlugin,
+};

package/lib/AfterDoneReporterPlugin.js

@@ -0,0 +1,50 @@
+import chalk from "chalk";
+import humanizeDuration from "humanize-duration";
+
+/**
+ * Simple plugin for printing some text after compilation stats are displayed
+ *
+ * Messages should be configured in an argument object:
+ *
+ *    new AfterDoneReporterPlugin({message: "Your Message Here"})
+ */
+export default class AfterDoneReporterPlugin {
+  constructor(options = {}) {
+    const defaults = {
+      echo: true,
+      prefix: `🟢${chalk.gray("(iop)")}:`,
+      message: "",
+    };
+    this.config = { ...defaults, ...options };
+    this.name = "IOP Reporter Plugin";
+    this.messages = [];
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tapPromise(this.name, async (stats) => {
+      if (this.config.echo) {
+        const { host, port } = compiler.options.devServer;
+        const { startTime, endTime, modules, assetsInfo } = stats.compilation;
+        const hostname = host === "0.0.0.0" ? "localhost" : host;
+
+        const time = chalk.yellow.bold(
+          humanizeDuration(endTime - startTime, { units: ["h", "m", "s"] })
+        );
+        const mCount = chalk.yellow(modules.size);
+        const aCount = chalk.yellow.bold(assetsInfo.size);
+
+        const messages = [
+          `Compiled ${mCount} input modules into ${aCount} files in ${time}`,
+          "Dev site " + chalk.blue(`http://${hostname}:${chalk.bold(port)}`),
+          this.config.message,
+        ]
+          .filter((m) => m.length)
+          .join("\n" + this.config.prefix);
+
+        setTimeout(() =>
+          console.log("\n" + this.config.prefix + " " + messages)
+        );
+      }
+    });
+  }
+}

package/lib/DependencyManifestPlugin.js

@@ -0,0 +1,77 @@
+import fs from "fs-extra";
+import path from "path";
+
+class DependencyManifestPlugin {
+  constructor(options) {
+    const defaults = {
+      writeManifestFile: false,
+      manifestFile: "./dependency-manifest.json",
+    };
+    this.config = { ...defaults, ...options };
+    this.name = "Dependency Manifest Plugin";
+    this.manifest = {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync(this.name, (compilation, callback) => {
+      // const logger = compilation.getLogger("dependency-manifest-plugin");
+
+      // logger.info(compilation.namedChunkGroups.keys());
+
+      Array.from(compilation.namedChunkGroups.entries()).forEach(
+        ([key, group]) => {
+          this.manifest[key] = group.chunks.reduce(
+            (entry, chunk) => {
+              Array.from(chunk.files)
+                /**
+                 * hot-update files will stomp on the main file, filter them out
+                 */
+                .filter((file) => !file.includes("hot-update"))
+                .forEach((file) => {
+                  const { chunkGraph } = compilation;
+                  const ext = path.extname(file);
+
+                  const filepath = path.resolve(
+                    compiler.options.output.publicPath,
+                    file
+                  );
+
+                  let silo, fileKey;
+                  /**
+                   * If the chunk has one or more entryModules, it's a file
+                   * If there are zero entryModules, it's a generated dependency
+                   */
+                  if (chunkGraph.getNumberOfEntryModules(chunk) > 0) {
+                    silo = "files";
+                    fileKey = key + ext;
+                  } else {
+                    silo = "dependencies";
+                    fileKey = chunk.id + ext;
+                  }
+
+                  entry[silo][fileKey] = filepath;
+                });
+              return entry;
+            },
+            { files: {}, dependencies: {} }
+          );
+        }
+      );
+
+      callback();
+    });
+
+    compiler.hooks.afterEmit.tapPromise(this.name, async () => {
+      if (this.config.writeManifestFile) {
+        return await fs.outputJSON(
+          path.resolve(compiler.options.output.path, this.config.manifestFile),
+          this.manifest,
+          { spaces: 2 }
+        );
+      }
+      console.log("in DependencyManifestPlugin afterEmit");
+    });
+  }
+}
+
+export default DependencyManifestPlugin;

package/lib/ImageminPlugins.js

@@ -0,0 +1,60 @@
+/**
+ * Container to provide plugin objects to the imageMin loader
+ */
+
+/**
+ * We use the same svgo config for dev and prod
+ */
+const svgoConfig = {
+  js2svg: { pretty: true },
+  floatPrecision: 3,
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          cleanupIDs: false,
+          removeViewBox: false,
+        },
+      },
+    },
+    "sortAttrs"
+  ],
+};
+
+/**
+ * Optimized for size/quality
+ */
+const imageminProdPlugins = [
+  ["gifsicle", { optimizationLevel: 3 }],
+  [
+    "pngquant",
+    {
+      strip: true,
+      dithering: 0.3,
+      quality: [0.5, 0.8],
+      verbose: true,
+    },
+  ],
+  ["mozjpeg", { quality: 80, progressive: true }],
+  ["svgo", svgoConfig],
+];
+
+/**
+ * Optimized for speed
+ */
+const imageminDevPlugins = [
+  ["gifsicle", { optimizationLevel: 1 }],
+  ["optipng", { optimizationLevel: 0 }],
+  ["jpegtran", { progressive: true }],
+  ["svgo", svgoConfig],
+];
+
+// const plugins = (isProd) => (isProd ? plugins.prod : plugins.dev);
+// plugins.dev = imageminDevPlugins;
+// plugins.prod = imageminProdPlugins;
+// const plugins = (isProd) => (isProd ? imageminDevPlugins : imageminDevPlugins);
+const plugins = (isProd) => (isProd ? imageminProdPlugins : imageminDevPlugins);
+
+export default plugins;
+// module.exports = plugins;

package/lib/WatchRunReporterPlugin.js

@@ -0,0 +1,54 @@
+import chalk from "chalk";
+/**
+ * Simple plugin for restoring the starting compile message which vanished in
+ * DevServer v4
+ *
+ * Messages should be configured in an argument object:
+ *
+ *    new WatchRunReporterPlugin({message: "Your Message Here"})
+ */
+class WatchRunReporterPlugin {
+  constructor(options = {}) {
+    const defaults = {
+      echo: true,
+      prefix: `🟢${chalk.gray("(iop)")}:`,
+      message: chalk.bold("Compiling..."),
+    };
+    this.config = { ...defaults, ...options };
+    this.name = "IOP Reporter Plugin";
+  }
+
+  apply(compiler) {
+    compiler.hooks.watchRun.tapPromise(this.name, async () => {
+      if (this.config.echo) {
+        /**
+         * compiler.modifiedFiles is a Set containing the changed file or files
+         * along ith the base path containing those files (or the entryPoint?)
+         *
+         * Sorting the set (as an Array) puts the base path first (it's the shortest)
+         * then we remove it from the paths to clean up.
+         *
+         * Report a single changed path or the count of changed paths
+         */
+        let msg = "";
+        if (compiler.modifiedFiles) {
+          let modFiles = Array.from(compiler.modifiedFiles).sort();
+          const basePath = modFiles[0];
+          const basePathPattern = new RegExp(`${basePath}/?`, "gi");
+          modFiles = modFiles
+            .map((p) => p.replace(basePathPattern, ""))
+            .filter((p) => p);
+
+          if (modFiles.length > 1) {
+            msg = `Modified ${modFiles.length - 1} files `;
+          } else {
+            msg = `Modified ${chalk.bold.yellow(modFiles[0] || basePath)} `;
+          }
+        }
+        console.log(this.config.prefix, msg + this.config.message);
+      }
+    });
+  }
+}
+
+export default WatchRunReporterPlugin;

package/lib/buildConfig.js

@@ -0,0 +1,211 @@
+import fs from "fs-extra";
+import { posix as path } from "path";
+import chalk from "chalk";
+
+// import defaultConfig from "../default.config.js";
+
+const defaultConfig = {
+  src: "./src",
+  dist: "./dist",
+  entry: ["./js/index.js"],
+  publicPath: "/dist/",
+  contentBase: "/dist/", // TODO: Should this be false?
+  manifestFile: "./dependency-manifest.json",
+  sass: "sass-embedded",
+  port: 8080,
+  transpileDependencies: ["ansi-regex", "normalize-url"],
+  proxy: 'wordpress',
+};
+
+
+
+
+
+/**
+ * This file encapsulates all the config file massaging and allows
+ * for asynchronous values.
+ *
+ * Asynchronous values:
+ *  -
+ */
+
+export default (configFile = { config: {} }) => {
+  /**
+   * This is a temporary workaround for a problem with using `process.env.NAME` in
+   * base ideasonpurpose.config.js files. `NAME` is often set in the environment
+   * and will override the value in package.json, resulting in orphan folders and
+   * misnamed archives.
+   *
+   * 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();
+    }
+  }
+
+  /**
+   * Merge configFile onto defaults
+   */
+  const config = { ...defaultConfig, ...configFile.config };
+
+  /**
+   * Merge transpileDependency arrays
+   */
+  if (configFile.config?.transpileDependencies) {
+    const configDeps =
+      typeof configFile.config.transpileDependencies === "string"
+        ? [configFile.config.transpileDependencies]
+        : configFile.config.transpileDependencies;
+    config.transpileDependencies = [
+      ...defaultConfig.transpileDependencies,
+      ...configDeps,
+    ];
+  }
+
+  /**
+   * Normalize paths relative to the configFile
+   *
+   * When used with ideasonpurpose/docker-wordpress-dev the environment
+   * is set up like this:
+   *
+   * - Tools live in /usr/src/tools
+   * - Site is linked to /src/src/site
+   *
+   * placeholder.file is a sloppy workaround for needing a path ending in a file.
+   * This lets us move up a level in the same way we could if cosmiConfig returned
+   * the path to a config.js or package.json file.
+   */
+  configFile.filepath = configFile.filepath || "../site/placeholder.file";
+  config.src = path.resolve(configFile.filepath, "..", config.src);
+  config.dist = path.resolve(configFile.filepath, "..", config.dist);
+
+  /**
+   * Check for `config.src` and create it if missing
+   * TODO: unresolved, create the file? Fail? Throw error?
+   */
+  if (!fs.existsSync(config.src)) {
+    noSrcExists(config.src);
+    // TODO: Make this optional? User prompt? Throw error?
+    // TODO: This is a massive side-effect which makes testing very difficult
+    // fs.ensureDirSync(config.src);
+    // throw new Error();
+  }
+
+  /**
+   * Generate an entry object from config.entry.
+   * Output names will be based on the source file's basename.
+   *
+   * Config.entry should preferably be an array, but strings or objects will
+   * also work. Strings will be treated as a single-item array. Arrays will be
+   * parsed into an object, objects (or whatever) will pass through unmodified.
+   *
+   * A setting like this:
+   *   [ "./js/index.js" ]
+   *
+   * Yields an entry object like this:
+   *  { index: "./js/index.js"}
+   *
+   * A string will be wrapped in an array:
+   *   "./js/main.js"  =>  [ "./js/main.js" ]
+   *
+   * Objects pass straight through
+   *   { app: "./js/main.js" }
+   *
+   * Overlapping basenames will be joined into a single entrypoint
+   *   ["./index.js", "./app.js", "./index.scss"]  =>  { app: ["./app.js"], index: ["./index.js", "./index.scss"]}
+   */
+  if (typeof config.entry === "string") {
+    config.entry = [config.entry];
+  }
+  if (Array.isArray(config.entry)) {
+    config.entry = config.entry.reduce((obj, src) => {
+      obj[path.parse(src).name] = []
+        .concat(obj[path.parse(src).name], src)
+        .filter((i) => i);
+      return obj;
+    }, {});
+  }
+
+  /**
+   * Normalize the sass implementation, default to 'sass-embedded'
+   *
+   * Returns a known module name (string) which will be dynamically imported into the config
+   */
+  const sassInput = config.sass.toString().toLowerCase();
+  const nodeSass = ["sass", "node-sass"];
+  config.sass = nodeSass.includes(sassInput) ? "sass" : "sass-embedded";
+
+  /**
+   * Print a deprecation warning for node-sass
+   * @link https://sass-lang.com/blog/libsass-is-deprecated/
+   */
+  if (sassInput === "node-sass") {
+    console.log(
+      "⚠️ ",
+      chalk.bold.yellow("NOTICE"),
+      chalk.yellow("NOTICE node-sass is no longer supported. The js-compiled")
+    );
+    console.log(chalk.yellow("   dart-sass package will be used instead."));
+    console.log(
+      chalk.cyan("     https://sass-lang.com/blog/libsass-is-deprecated/")
+    );
+    console.log(chalk.cyan("     https://www.npmjs.com/package/sass"));
+  }
+
+  /**
+   * Remap proxy: true to default value
+   */
+  if (config.proxy === true) {
+    config.proxy = defaultConfig.proxy;
+  }
+
+  return config;
+};
+
+/**
+ * Warnings are broken out below
+ */
+const noSrcExists = (src) => {
+  console.log(
+    "🛑 ",
+    chalk.bold.red(
+      `ERROR: The src directory ${chalk.white(src)} does not exist.`
+    )
+  );
+};
+
+const nameEnvVarWarning = () => {
+  console.log(
+    "⚠️ ",
+    chalk.yellow.bold(
+      "WARNING: $NAME is set in the environment and the project's config file."
+    )
+  );
+  console.log(
+    chalk.yellow(
+      "   The value of $NAME will likely conflict with the name property from"
+    )
+  );
+  console.log(
+    chalk.yellow(
+      "   package.json. Please update the project's config.js file. To silence  "
+    )
+  );
+  console.log(
+    chalk.yellow(
+      "   this message, set $NAME in the environment to match the project's"
+    )
+  );
+  console.log(chalk.yellow("   package.json `name` property."));
+};

package/lib/devserver-proxy.js

@@ -0,0 +1,166 @@
+// const { dns } = require("dns").promises;
+
+// DO NOT destructure this or we won't be able to mock it
+// import {promises as dnsPromises} from "dns";
+import dns from "dns";
+import chalk from "chalk";
+import { isIP } from "net";
+
+/**
+ * If config.proxy is explicitly not false, return a {proxy} object
+ * otherwise return an empty object.
+ */
+export default async (config) => {
+  let target;
+
+  console.log({config});
+
+  // if (
+  //   config.proxy ===
+  //   "http://devserver-proxy-token--d939bef2a41c4aa154ddb8db903ce19fff338b61"
+  // ) {
+  //   /**
+  //    * Deal with the legacy service hostname, re-map to 'wordpress' which will
+  //    * be resolved to an IP address.
+  //    *
+  //    *  TODO: Remove this warning after 2023-02 (extended another year, not hurting anything)
+  //    */
+
+  //   console.log(
+  //     "⚠️ ",
+  //     `The ${chalk.magenta(
+  //       "devserver-proxy-token"
+  //     )} value is no longer necessary`,
+  //     "and can be safely removed from docker-compose"
+  //   );
+
+  //   /**
+  //    * 'wordpress' is the internal hostname used by docker
+  //    */
+  //   target = await dns.promises.resolve("wordpress").catch(() => false);
+  //   if (target) {
+  //     target = "http://" + target.pop();
+  //   }
+  // } else if (!!isIP(config.proxy)) {
+  if (!!isIP(config.proxy)) {
+    /**
+     * Bare IP addresses
+     * net.isIP() returns 4, 6 or 0(IPv4, IPv6 or not-an-IP address)
+     */
+    target = `http://${config.proxy}`;
+  } else if (
+    typeof config.proxy == "string" &&
+    !config.proxy.match(/^https?:\/\//i)
+  ) {
+    /**
+     * Handle plain strings that don't start with http:// or https://
+     * Attempt to resolve these to IP addresses
+     */
+    target = await dns.promises.resolve(config.proxy).catch(() => false);
+
+    if (target) {
+      target = "http://" + target.pop();
+    }
+  } else {
+    /**
+     * Pass anything else straight through
+     */
+    target = config.proxy;
+  }
+
+  /**
+   * Note: This is a sticky bit of code. Everything above gets bottlenecked here, and
+   * if aa previous value of target can't be converted to a URL, the whole proxy will
+   * return an empty object.
+   */
+  try {
+    config.proxyUrl = new URL(target);
+  } catch (err) {
+    // Invalid URL, unable to configure proxy.
+    return {};
+  }
+
+  // console.log({ target , proxyUrl: config.proxyUrl});
+
+  const proxy = {
+    "**": {
+      target,
+      secure: false,
+      autoRewrite: true,
+      selfHandleResponse: true, // necessary to avoid res.end being called automatically
+      changeOrigin: true, // needed for virtual hosted sites
+      cookieDomainRewrite: "", // was `${config.host}:8080` ??
+      headers: { "Accept-Encoding": "identity" },
+
+      onError: (err, req, res) => {
+        if (err.code === "ECONNRESET") {
+          console.log(chalk.yellow("Caught ECONNRESET error, ignoring..."));
+        } else {
+          console.log("PROXY ERROR: ", req.url, err, err.stack);
+          res.writeHead(500, { "Content-Type": "text-plain" });
+          res.end("Webpack DevServer Proxy Error: " + err);
+        }
+      },
+
+      onProxyRes: function (proxyRes, req, res) {
+        /**
+         * Update urls in files with these content-types
+         */
+        const contentTypes = [
+          "application/javascript",
+          "application/json",
+          "multipart/form-data",
+          "text/css",
+          "text/html",
+          "text/plain",
+        ];
+
+        let originalBody = [];
+
+        proxyRes.on("data", (data) => originalBody.push(data));
+
+        proxyRes.on("end", () => {
+          res.statusCode = proxyRes.statusCode;
+          if (proxyRes.statusMessage) {
+            res.statusMessage = proxyRes.statusMessage;
+          }
+
+          Object.keys(proxyRes.headers).forEach((key) => {
+            let header = proxyRes.headers[key];
+            if (typeof header == "string") {
+              header = header.replace(
+                new RegExp(config.proxyUrl.host, "gi"),
+                req.headers.host
+              );
+            }
+            res.setHeader(String(key).trim(), header);
+          });
+
+          originalBody = Buffer.concat(originalBody);
+          let newBody;
+          const type = (proxyRes.headers["content-type"] || "").split(";")[0];
+          const wpRegexp = new RegExp(
+            "^/wp-(?:admin|includes|content/plugins).*(?:css|js|map)$"
+          );
+          const originRegExp = new RegExp(
+            `(http:\\\\/\\\\/|http://)${config.proxyUrl.host}`,
+            "gi"
+          );
+
+          if (contentTypes.includes(type) && !wpRegexp.test(req.path)) {
+            newBody = originalBody
+              .toString("utf8")
+              .replace(originRegExp, `$1${req.headers.host}`);
+            res.setHeader("Content-Length", Buffer.byteLength(newBody));
+          } else {
+            newBody = originalBody;
+          }
+
+          res.end(newBody);
+        });
+      },
+    },
+  };
+
+  return { proxy };
+};

package/lib/prettier-hrtime.js

@@ -0,0 +1,16 @@
+import prettyHrtime from "pretty-hrtime";
+
+export const prettierHrtime = (hrtime) => {
+  let timeString;
+  const seconds = hrtime[1] > 5e6 ? " seconds" : " second";
+  if (hrtime[0] > 60) {
+    timeString = prettyHrtime(hrtime, { verbose: true })
+      .replace(/\d+ (milli|micro|nano)seconds/gi, "")
+      .trim();
+  } else if (hrtime[1] > 5e6) {
+    timeString = prettyHrtime(hrtime).replace(/ s$/, seconds);
+  } else {
+    timeString = prettyHrtime(hrtime);
+  }
+  return timeString;
+};

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@ideasonpurpose/build-tools-wordpress",
+  "version": "1.1.0",
+  "description": "Build scripts and dependencies for IOP's WordPress development environments.",
+  "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
+  "bugs": {
+    "url": "https://github.com/ideasonpurpose/build-tools-wordpress/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ideasonpurpose/build-tools-wordpress.git"
+  },
+  "license": "MIT",
+  "author": "Ideas On Purpose (https://www.ideasonpurpose.com/)",
+  "contributors": [
+    "Joe Maller <joe@ideasonpurpose.com>",
+    "Codrin Pavel <codrin@ideasonpurpose.com>"
+  ],
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "iop-build-port-reporter": "port-reporter.js"
+  },
+  "scripts": {
+    "version": "version-everything && auto-changelog && git add -u"
+  },
+  "dependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@svgr/webpack": "^8.1.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^5.0.0",
+    "ansi-html": "^0.0.9",
+    "archiver": "^6.0.1",
+    "auto-changelog": "^2.4.0",
+    "autoprefixer": "^10.4.17",
+    "babel-loader": "^9.1.3",
+    "body-parser": "^1.20.2",
+    "caniuse-lite": "^1.0.30001579",
+    "chalk": "^5.3.0",
+    "cli-truncate": "^4.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "cosmiconfig": "^9.0.0",
+    "css-loader": "^6.9.1",
+    "cssnano": "^6.0.1",
+    "del": "^7.1.0",
+    "dotenv": "^16.3.2",
+    "esbuild-loader": "^4.0.3",
+    "filesize": "^10.0.12",
+    "fs-extra": "^11.1.1",
+    "globby": "^14.0.0",
+    "http-proxy": "^1.18.1",
+    "humanize-duration": "^3.31.0",
+    "image-minimizer-webpack-plugin": "^4.0.0",
+    "is-text-path": "^2.0.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "postcss": "^8.4.29",
+    "postcss-loader": "^8.0.0",
+    "pretty-hrtime": "^1.0.3",
+    "replacestream": "^4.0.3",
+    "sass": "^1.70.0",
+    "sass-embedded": "^1.70.0",
+    "sass-loader": "^14.0.0",
+    "sharp": "^0.33.2",
+    "source-map-explorer": "^2.5.3",
+    "string-length": "^6.0.0",
+    "style-loader": "^3.3.3",
+    "svgo": "^3.0.2",
+    "svgo-loader": "^4.0.0",
+    "version-everything": "^0.11.0",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-middleware": "^7.0.0",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "version-everything": {
+    "files": [
+      "README.md"
+    ]
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "devDependencies": {}
+}