@ideasonpurpose/build-tools-wordpress 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -0,0 +1,58 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### v1.1.3
+
+> 24 January 2024
+
+- reconfigure imports, port-reporter to module, lots of deps
+- add changelog, update readme (badges)
+- fix path to port-reporter script
+
+#### v1.1.2
+
+> 23 January 2024
+
+#### v1.1.1
+
+> 23 January 2024
+
+- versioning, github actions, bump deps, README
+- update version in readme
+
+#### v1.1.0
+
+> 23 January 2024
+
+- add packages
+- name change, prepare for npm publish
+- add port-reporter script, giving up on linking local pacakges
+
+#### v1.0.4
+
+> 16 January 2024
+
+- embed default.config
+
+#### v1.0.3
+
+> 16 January 2024
+
+- buildConfig
+
+#### v1.0.2
+
+> 16 January 2024
+
+- add sass-embedded
+
+#### v1.0.1
+
+> 16 January 2024
+
+- add modules
+- add lib, temp exports
+- Initial commit

package/README.md

@@ -1,6 +1,10 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 1.1.2
+#### Version 1.1.4
+
+![NPM Version](https://img.shields.io/npm/v/%40ideasonpurpose%2Fbuild-tools-wordpress?logo=npm)
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/ideasonpurpose/build-tools-wordpress/npm-publish.yml?logo=github&logoColor=white)
+
 
 Build scripts and dependencies for IOP's WordPress development environments.
 
@@ -8,8 +12,6 @@ Build scripts and dependencies for IOP's WordPress development environments.
 
 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
@@ -18,33 +20,12 @@ This project expects an entirely ES Module based environment and specifies all d
 
 #### Publishing to [npm](https://www.npmjs.com/package/@ideasonpurpose/build-tools-wordpress)
 
-A GitHub action will auto-publish version-tagged releases to npm. In order to publish, the repository must have an `NPM_TOKEN` secret set with the token from npm. Log into npmjs.org with a publish-authorized account, then find the token linked from the Profile page sidebar.
+A GitHub action will auto-publish version-tagged releases to npm. In order to publish, the repository must have an `NPM_TOKEN` secret set with the token from npm. [Log into npmjs.org](https://www.npmjs.com/login) with a publish-authorized account, then find the token page linked from the Profile page sidebar. Generate a new token and update the repository secret. 
 
 ##  
 
-#### 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

@@ -1,22 +1,40 @@
 #! /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(":");
+import { findLocalPort } from "../index.js";
+
+/**
+ * This is a reporting/display wrapper for the local port discovery module
+ */
+const main = async () => {
+  const info = await findLocalPort().catch((error) => ({ error }));
 
-    console.log("\n",
+  if (info && info.port && info.hostname) {
+    console.log(
+      "\n",
       " 🚀 ",
-     chalk.bold( "Local WP site:"),
-      chalk.magenta(`http://localhost:${chalk.bold(port)}`),
+      chalk.bold("Local WP site:"),
+      chalk.magenta(`http://${info.hostname}:${chalk.bold(info.port)}`),
+      "\n",
     );
+  } else {
+    let errString, showDebug;
+
+    if (info.error) {
+      errString = info.error.toString();
+    } else {
+      errString = "Unknown error occurred. Unable to discover local port";
+      showDebug = true;
+    }
+
+    errString = errString.split("\n").join("\n      ");
+
+    console.log("\n", " 🤖 ", chalk.red.bold(errString));
+    if (showDebug) {
+      console.log(chalk.green("  🐛  Debug:"), info);
+    }
   }
-  // console.log(`stdout: ${stdout}`);
-  // console.error(`stderr: ${stderr}`);
-});
+};
+
+main();

package/index.js

@@ -1,16 +1,20 @@
-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 { AfterDoneReporterPlugin } from "./lib/AfterDoneReporterPlugin.js";
+export { buildConfig } from "./lib/buildConfig.js";
+export { DependencyManifestPlugin } from "./lib/DependencyManifestPlugin.js";
+// export *  from "./lib/DependencyManifestPlugin.js";
+export { devserverProxy } from "./lib/devserver-proxy.js";
+export { WatchRunReporterPlugin } from "./lib/WatchRunReporterPlugin.js";
+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";
 
-
-
-// export { };
-export  {
-  AfterDoneReporterPlugin,
-  buildConfig,
-  DependencyManifestPlugin,
-  devserverProxy,
-  WatchRunReporterPlugin,
-};
+// export default {
+//   // AfterDoneReporterPlugin,
+//   //   buildConfig,
+//   // DependencyManifestPlugin,
+//   //   devserverProxy,
+//   //   WatchRunReporterPlugin,
+//   //   findLocalPort,
+//   //   // moo: () => console.log("COW SAYS"),
+// };
+// export const moo = () => console.log("COW SAYS");

package/lib/AfterDoneReporterPlugin.js

@@ -8,7 +8,7 @@ import humanizeDuration from "humanize-duration";
  *
  *    new AfterDoneReporterPlugin({message: "Your Message Here"})
  */
-export default class AfterDoneReporterPlugin {
+export class AfterDoneReporterPlugin {
   constructor(options = {}) {
     const defaults = {
       echo: true,
@@ -23,12 +23,13 @@ export default class AfterDoneReporterPlugin {
   apply(compiler) {
     compiler.hooks.done.tapPromise(this.name, async (stats) => {
       if (this.config.echo) {
+        // console.log(compiler.options, stats);
         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"] })
+          humanizeDuration(endTime - startTime, { units: ["h", "m", "s"] }),
         );
         const mCount = chalk.yellow(modules.size);
         const aCount = chalk.yellow.bold(assetsInfo.size);
@@ -39,10 +40,10 @@ export default class AfterDoneReporterPlugin {
           this.config.message,
         ]
           .filter((m) => m.length)
-          .join("\n" + this.config.prefix);
+          .join("\n" + this.config.prefix + " ");
 
         setTimeout(() =>
-          console.log("\n" + this.config.prefix + " " + messages)
+          console.log("\n" + this.config.prefix + " " + messages),
         );
       }
     });

package/lib/DependencyManifestPlugin.js

@@ -1,7 +1,7 @@
 import fs from "fs-extra";
 import path from "path";
 
-class DependencyManifestPlugin {
+export class DependencyManifestPlugin {
   constructor(options) {
     const defaults = {
       writeManifestFile: false,
@@ -74,4 +74,4 @@ class DependencyManifestPlugin {
   }
 }
 
-export default DependencyManifestPlugin;
+// export default DependencyManifestPlugin;

package/lib/WatchRunReporterPlugin.js

@@ -7,7 +7,7 @@ import chalk from "chalk";
  *
  *    new WatchRunReporterPlugin({message: "Your Message Here"})
  */
-class WatchRunReporterPlugin {
+export class WatchRunReporterPlugin {
   constructor(options = {}) {
     const defaults = {
       echo: true,
@@ -50,5 +50,3 @@ class WatchRunReporterPlugin {
     });
   }
 }
-
-export default WatchRunReporterPlugin;

package/lib/buildConfig.js

@@ -2,6 +2,8 @@ import fs from "fs-extra";
 import { posix as path } from "path";
 import chalk from "chalk";
 
+import { findLocalPort } from "../index.js";
+
 // import defaultConfig from "../default.config.js";
 
 const defaultConfig = {
@@ -12,15 +14,11 @@ const defaultConfig = {
   contentBase: "/dist/", // TODO: Should this be false?
   manifestFile: "./dependency-manifest.json",
   sass: "sass-embedded",
-  port: 8080,
+  // port: 8080,
   transpileDependencies: ["ansi-regex", "normalize-url"],
-  proxy: 'wordpress',
+  proxy: "wordpress",
 };
 
-
-
-
-
 /**
  * This file encapsulates all the config file massaging and allows
  * for asynchronous values.
@@ -29,7 +27,7 @@ const defaultConfig = {
  *  -
  */
 
-export default (configFile = { config: {} }) => {
+export async function buildConfig(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
@@ -42,7 +40,7 @@ export default (configFile = { config: {} }) => {
   if (configFile.filepath) {
     const rawConfigFile = fs.readFileSync(configFile.filepath);
     const packageJson = fs.readJsonSync(
-      path.resolve(configFile.filepath, "../package.json")
+      path.resolve(configFile.filepath, "../package.json"),
     );
     // console.log({ p: process.env.NAME });
     if (
@@ -154,11 +152,11 @@ export default (configFile = { config: {} }) => {
     console.log(
       "⚠️ ",
       chalk.bold.yellow("NOTICE"),
-      chalk.yellow("NOTICE node-sass is no longer supported. The js-compiled")
+      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/")
+      chalk.cyan("     https://sass-lang.com/blog/libsass-is-deprecated/"),
     );
     console.log(chalk.cyan("     https://www.npmjs.com/package/sass"));
   }
@@ -169,9 +167,20 @@ export default (configFile = { config: {} }) => {
   if (config.proxy === true) {
     config.proxy = defaultConfig.proxy;
   }
+  const localPort = await findLocalPort();
+
+  config.proxy = `http://${localPort.hostname}:${localPort.port}`;
+  console.log(
+    chalk.cyan.bold(
+      `FOUND THE PORT IN BUILDCONFIG ${localPort.port}`,
+      config.proxy,
+    ),
+  );
+
+  /// TODO: Move the port-finding stuff in here?
 
   return config;
-};
+}
 
 /**
  * Warnings are broken out below
@@ -180,8 +189,8 @@ const noSrcExists = (src) => {
   console.log(
     "🛑 ",
     chalk.bold.red(
-      `ERROR: The src directory ${chalk.white(src)} does not exist.`
-    )
+      `ERROR: The src directory ${chalk.white(src)} does not exist.`,
+    ),
   );
 };
 
@@ -189,23 +198,23 @@ const nameEnvVarWarning = () => {
   console.log(
     "⚠️ ",
     chalk.yellow.bold(
-      "WARNING: $NAME is set in the environment and the project's config file."
-    )
+      "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"
-    )
+      "   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  "
-    )
+      "   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"
-    )
+      "   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

@@ -10,10 +10,10 @@ import { isIP } from "net";
  * If config.proxy is explicitly not false, return a {proxy} object
  * otherwise return an empty object.
  */
-export default async (config) => {
+export async function devserverProxy(config) {
   let target;
 
-  console.log({config});
+  // console.log({config});
 
   // if (
   //   config.proxy ===
@@ -130,7 +130,7 @@ export default async (config) => {
             if (typeof header == "string") {
               header = header.replace(
                 new RegExp(config.proxyUrl.host, "gi"),
-                req.headers.host
+                req.headers.host,
               );
             }
             res.setHeader(String(key).trim(), header);
@@ -140,11 +140,11 @@ export default async (config) => {
           let newBody;
           const type = (proxyRes.headers["content-type"] || "").split(";")[0];
           const wpRegexp = new RegExp(
-            "^/wp-(?:admin|includes|content/plugins).*(?:css|js|map)$"
+            "^/wp-(?:admin|includes|content/plugins).*(?:css|js|map)$",
           );
           const originRegExp = new RegExp(
             `(http:\\\\/\\\\/|http://)${config.proxyUrl.host}`,
-            "gi"
+            "gi",
           );
 
           if (contentTypes.includes(type) && !wpRegexp.test(req.path)) {
@@ -163,4 +163,4 @@ export default async (config) => {
   };
 
   return { proxy };
-};
+}

package/lib/find-local-docker-port.js

@@ -0,0 +1,19 @@
+import { exec } from "node:child_process";
+
+export function findLocalPort() {
+  // export default () => {
+      return new Promise((resolve, reject) => {
+    exec("docker compose port wordpress 80", (error, stdout, stderr) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      if (stdout) {
+        const [addr, port] = stdout.trim().split(":");
+        const hostname = addr === "0.0.0.0" ? "localhost" : addr;
+        resolve({ hostname, port, stdout: stdout.trim() });
+      }
+    });
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -19,12 +19,18 @@
   "type": "module",
   "main": "index.js",
   "bin": {
-    "iop-build-port-reporter": "port-reporter.js"
+    "iop-build-port-reporter": "./bin/port-reporter.js"
+  },
+  "directories": {
+    "lib": "lib"
   },
   "scripts": {
     "version": "version-everything && auto-changelog && git add -u"
   },
+  "prettier": "@ideasonpurpose/prettier-config",
   "dependencies": {
+    "@ideasonpurpose/prettier-config": "^0.0.4",
+    "@prettier/plugin-php": "^0.22.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -38,14 +44,19 @@
     "body-parser": "^1.20.2",
     "caniuse-lite": "^1.0.30001579",
     "chalk": "^5.3.0",
+    "chalk-cli": "^5.0.1",
+    "classnames": "^2.5.1",
     "cli-truncate": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "cosmiconfig": "^9.0.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.9.1",
     "cssnano": "^6.0.1",
     "del": "^7.1.0",
-    "dotenv": "^16.3.2",
+    "dotenv": "^16.4.0",
     "esbuild-loader": "^4.0.3",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
     "filesize": "^10.0.12",
     "fs-extra": "^11.1.1",
     "globby": "^14.0.0",
@@ -58,19 +69,27 @@
     "node-sass": "^9.0.0",
     "postcss": "^8.4.29",
     "postcss-loader": "^8.0.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.2.4",
+    "prettier-eslint": "^16.3.0",
     "pretty-hrtime": "^1.0.3",
     "replacestream": "^4.0.3",
     "sass": "^1.70.0",
     "sass-embedded": "^1.70.0",
     "sass-loader": "^14.0.0",
+    "semver": "^7.5.4",
     "sharp": "^0.33.2",
+    "sort-package-json": "^2.6.0",
     "source-map-explorer": "^2.5.3",
     "string-length": "^6.0.0",
     "style-loader": "^3.3.3",
+    "stylelint": "^16.2.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-prettier": "^5.0.0",
     "svgo": "^3.0.2",
     "svgo-loader": "^4.0.0",
     "version-everything": "^0.11.0",
-    "webpack": "^5.88.2",
+    "webpack": "^5.90.0",
     "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^7.0.0",
@@ -80,9 +99,5 @@
     "files": [
       "README.md"
     ]
-  },
-  "directories": {
-    "lib": "lib"
-  },
-  "devDependencies": {}
+  }
 }