@ideasonpurpose/build-tools-wordpress 2.1.5 → 2.1.7

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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).
 
+#### v2.1.6
+
+> 1 May 2025
+
+- refactor tokenizeHTML, bug fixes, tests
+- typo
+
+#### v2.1.5
+
+> 17 April 2025
+
+- escape capture group replacement strings when unTokenizing, plus tests
+- change dev site reporter emoji
+
 #### v2.1.4
 
 > 16 April 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.1.5
+#### Version 2.1.7
 
 [![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/bin/format-php-prettier.js

@@ -23,16 +23,26 @@ const phpOptions = prettierConfig.overrides.find(
   (o) => o.files === "*.php",
 )?.options;
 
+const isInTag = (html, offset) => {
+  if (offset === 0) return false;
+
+  for (let i = offset - 1; i >= 0; i--) {
+    if (html[i] === "<") {
+      return true;
+    } else if (html[i] === ">") {
+      return false;
+    }
+  }
+  return false;
+};
+
 /**
- * Replaces PHP Code Blocks with tokens, returns tokenized HTML and an object containing
- * PHP Code Blocks
+ * Replaces all PHP Code Blocks with iterated tokens.
  *
- * For code blocks between tags (bounded by > & <) tokens will be self-closing HTML
- * tags, similar to this: <php_14______ /> PHP Code blocks at the beginning and end of
- * the file will be tokenized as self-closing if they preceed or follow an HTML tag.
+ * Code Blocks inside HTML tags will be replaced with attribute-safe tokens: _php_4____
+ * All other Code Blocks will be replaced with tag-shaped tokens: <php_4___ />
  *
- * All other PHP Code Blocks are represented as HTML attribute-safe padded strings, up
- * to 80 characters long.
+ * Tokens will match the length of their Code Blocks up to 80 characters.
  *
  * NOTE: Because Prettier's HTML formatter will always add a space before self-closing
  * tags' closing slash, we just include the space in the token to prevent it from
@@ -40,9 +50,28 @@ const phpOptions = prettierConfig.overrides.find(
  * to unTokenizeHTML().
  */
 export function tokenizeHTML(htmlContent) {
+  let tokenizedHTML = "";
   const phpCodeBlocks = {};
   let tokenCount = 0;
 
+  /**
+   * Check previous content for a '>' or '<' then return either an attribute-safe
+   * token: _php_4____ or a tag-shaped token: <php_4___ />
+   *
+   * NOTE: This uses tokenCount from the enclosing scope
+   */
+  const tokenizeCodeBlock = (phpCodeBlock, prevContent) => {
+    let start = "<";
+    let end = " />";
+    if (isInTag(prevContent, prevContent.length)) {
+      start = "_";
+      end = "___";
+    }
+
+    const codeLength = Math.min(phpCodeBlock.length, 80) - end.length;
+    return `${start}php_${tokenCount++}__`.padEnd(codeLength, "_") + end;
+  };
+
   // const pattern = /<\?(?:php|=)[\s\S]*?\?>/gs;
   // const pattern =
   //   /(?<before>(?:[^\s]|\s|^)\s*)(?<php><\?(?:php|=).*?(?:\?>|$))(?<after>(?:\s*)[^\s]|$)/gs;
@@ -51,45 +80,28 @@ export function tokenizeHTML(htmlContent) {
   // // const pattern = /([^\s]+)\s*(<\?(?:php|=).*?(?:\?>|$))\s*([^\s]*)/gms;
   // const pattern =
   //   /([^\s]?\s*)?(<\?(?:php|=).*?(?:\?>|$))((?:\s*)[^\s]|$)/gms;
-  const pattern =
-    /(?<=((?:[^\s]|\s|^)\s*))(<\?(?:php|=).*?\?>)(?=((?:\s*)[^\s]|$))/gms;
-
-  let tokenizedHTML = htmlContent.replace(
-    pattern,
-    (string, before, phpCodeBlock, after, offset) => {
-      const start = [">", ""].includes(before.trim()) ? "<" : "_";
-      const end = ["<", ""].includes(after.trim()) ? " />" : "___";
-
-      // end-pad the token to the length of the span, up to 80 characters
-      const codeLength = Math.min(phpCodeBlock.length, 80 - end.length);
-      const token =
-        `${start}php_${tokenCount++}__`.padEnd(codeLength, "_") + end;
-      phpCodeBlocks[token] = phpCodeBlock;
-
-      return token;
-    },
-  );
+  // const pattern =
+  //   /(?<=((?:[^\s]|\s|^)\s*))(<\?(?:php|=).*?\?>)(?=((?:\s*)[^\s]|$))/gms;
+  // try removing look ahead/behind
+  const pattern = /(<\?(?:php|=).*?\?>)/gms;
 
-  /**
-   * special case followup for open-ended PHP tags at the end of the document
-   * TODO: Merge this back up into a single pattern
-   *       Q. Is the 'm' flag breaking the meaning of ^ and $?
-   */
-  tokenizedHTML = tokenizedHTML.replace(
-    /(?<=((?:[^\s]|\s|^)\s*))(<\?(?:php|=).*$)/gms,
+  // const regex = new RegExp(/<\?(?:php|=).*?\?>/, "gs");
+  // Trying to capture open-ended PHP codeBlocks in a single regexp
+  const regex = new RegExp(/<\?(?:php|=).*?(?:\?>|$)/, "gs");
 
-    (string, before, phpCodeBlock, offset) => {
-      const start = [">", ""].includes(before.trim()) ? "<" : "_";
-      const end = start === "<" ? " />" : "___";
+  let match;
+  let token;
+  let lastIndex = 0;
+  while ((match = regex.exec(htmlContent)) !== null) {
+    tokenizedHTML += htmlContent.slice(lastIndex, match.index);
 
-      const codeLength = Math.min(phpCodeBlock.length, 80 - end.length);
-      const token =
-        `${start}php_${tokenCount++}__`.padEnd(codeLength, "_") + end;
-      phpCodeBlocks[token] = phpCodeBlock;
+    token = tokenizeCodeBlock(match[0], tokenizedHTML);
+    phpCodeBlocks[token] = match[0];
+    tokenizedHTML += token;
 
-      return token;
-    },
-  );
+    lastIndex = match.index + match[0].length;
+  }
+  tokenizedHTML += htmlContent.slice(lastIndex);
 
   return { tokenizedHTML, phpCodeBlocks };
 }

package/config/webpack.config.js

@@ -128,12 +128,13 @@ export default async (env) => {
               loader: "css-loader",
               options: {
                 import: false, // imports already handled by Sass or PostCSS
-                // sourceMap: !isProduction,
+                sourceMap: !isProduction,
               },
             },
             {
               loader: "postcss-loader",
               options: {
+                sourceMap: !isProduction,
                 postcssOptions: {
                   plugins: isProduction
                     ? [
@@ -144,13 +145,6 @@ export default async (env) => {
                 },
               },
             },
-            // {
-            //   loader: "resolve-url-loader",
-            //   options: {
-            //     // sourceMap: true,
-            //     // debug: true,
-            //   },
-            // },
             {
               loader: "sass-loader",
               options: {

package/lib/AfterDoneReporterPlugin.js

@@ -27,7 +27,7 @@ export class AfterDoneReporterPlugin {
          * NOTE: As of webpack-dev-server vXX.XX.XXX, auto-assigned ports are
          * not propagated into the compiler.options.devServer object.
          *
-         * As a workaround, this relies on the follining line being added to
+         * As a workaround, this relies on the following line being added to
          * the webpack.config file's devServer.setupMiddlewares method:
          *
          *    devServer.compiler.options.devServer.port = devServer.options.port;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -39,30 +39,30 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^6.22.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.24.0",
     "ansi-html": "^0.0.9",
     "archiver": "^7.0.1",
     "auto-changelog": "^2.5.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001713",
+    "caniuse-lite": "^1.0.30001718",
     "chalk": "^5.4.1",
-    "chalk-cli": "^5.0.1",
+    "chalk-cli": "^6.0.0",
     "classnames": "^2.5.1",
     "cli-truncate": "^4.0.0",
     "copy-webpack-plugin": "^13.0.0",
     "cosmiconfig": "^9.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.0.6",
+    "cssnano": "^7.0.7",
     "dotenv": "^16.5.0",
     "esbuild-loader": "^4.3.0",
-    "eslint": "^9.24.0",
+    "eslint": "^9.27.0",
     "filesize": "^10.1.6",
     "fs-extra": "^11.3.0",
     "globby": "^14.1.0",
     "http-proxy": "^1.18.1",
-    "humanize-duration": "^3.32.1",
+    "humanize-duration": "^3.32.2",
     "image-minimizer-webpack-plugin": "^4.1.3",
     "is-text-path": "^3.0.0",
     "lodash": "^4.17.21",
@@ -74,17 +74,17 @@
     "pretty-hrtime": "^1.0.3",
     "read-package-up": "^11.0.0",
     "replacestream": "^4.0.3",
-    "sass-embedded": "^1.86.3",
+    "sass-embedded": "^1.89.0",
     "sass-loader": "^16.0.5",
-    "semver": "^7.7.1",
-    "sharp": "^0.34.1",
-    "sort-package-json": "^3.0.0",
+    "semver": "^7.7.2",
+    "sharp": "^0.34.2",
+    "sort-package-json": "^3.2.1",
     "string-length": "^6.0.0",
     "style-loader": "^4.0.0",
     "svgo": "^3.3.2",
     "svgo-loader": "^4.0.0",
     "version-everything": "^0.11.4",
-    "webpack": "^5.99.5",
+    "webpack": "^5.99.9",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-dev-server": "^5.2.1"
@@ -93,8 +93,8 @@
     "webpack-cli": "^6.0.1"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^3.1.1",
-    "vitest": "^3.1.1"
+    "@vitest/coverage-v8": "^3.1.4",
+    "vitest": "^3.1.4"
   },
   "version-everything": {
     "files": [

package/test/fixtures/format-php-prettier/length-orphaned-token-bug.php

@@ -0,0 +1,3 @@
+<i aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa="<?= a('a') ?>"><?= b('b') ?> : <?= c('c') ?></i>
+
+<div r="<?= a('a') ?>"><?= b('b') ?> : <?= c('c') ?></div>

package/test/format-php-prettier.test.js

@@ -55,9 +55,11 @@ describe("HTML-PHP Prettier", () => {
       )
     ).toString();
 
-    const { phpCodeBlocks: codeBlocks } = tokenizeHTML(input);
+    const { tokenizedHTML, phpCodeBlocks  } = tokenizeHTML(input);
 
-    const tokens = Object.keys(codeBlocks);
+    // console.log({input, tokenizedHTML})
+
+    const tokens = Object.keys(phpCodeBlocks);
 
     expect(tokens[0]).toMatch(/^_php_\d+_*$/);
     expect(tokens[1]).toMatch(/^_php_\d+_*$/);
@@ -85,4 +87,52 @@ describe("HTML-PHP Prettier", () => {
     expect(formattedContent).toContain("'b $&'");
     expect(formattedContent).toContain("'$0 $1 $2 $3'");
   });
+
+  /**
+   * Not sure what's going on here, but this breaks and returns with the last replacement token still in place.
+   * Something to do with the overall length, if the aaa...aaa attribute is shortened it formats correctly.
+   *
+   * Something about this file, likely the length, is causing it to fail to find
+   * and restore the last PHP token. Trying to format this:
+   *
+   *
+   *   <i aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa="<?= a('a') ?>"><?= b('b') ?> : <?= c('c') ?></i>
+   *
+   * ...ends up returning something like this:
+   *
+   *   <i aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa="<?= a('a') ?>"
+   *     ><?= b('b') ?> : _php_3_______
+   *   /></i>
+   *
+   * It seems to have something to do with HTML whitespace preservation, I can't get this to
+   * happen with a div
+   */
+  test("whitespace orphaned tokens", async () => {
+    const input = (
+      await readFile(
+        "./test/fixtures/format-php-prettier/length-orphaned-token-bug.php",
+      )
+    ).toString();
+
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(input);
+
+    const formattedContent = unTokenizeHTML(tokenizedHTML, phpCodeBlocks);
+
+    // console.log(input, tokenizedHTML, phpCodeBlocks, formattedContent);
+
+    expect(formattedContent).toContain("<?= c('c') ?>");
+  });
+
+  test("tokenization error (drill down from whitespace orphaned tokens)", async () => {
+    const input = "<?= b('b') ?> : <?= c('c') ?>";
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(input);
+
+    // console.log({input, tokenizedHTML, phpCodeBlocks});
+
+
+    expect(tokenizedHTML).toContain("<php_0____ />");
+    expect(tokenizedHTML).toContain("<php_1____ />");
+    expect(phpCodeBlocks).toHaveProperty("<php_0____ />");
+    expect(phpCodeBlocks).toHaveProperty("<php_1____ />");
+  });
 });