@ideasonpurpose/build-tools-wordpress 2.1.4 → 2.1.6

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.5
+
+> 17 April 2025
+
+- escape capture group replacement strings when unTokenizing, plus tests
+- change dev site reporter emoji
+
+#### v2.1.4
+
+> 16 April 2025
+
+- use look-behind and look-forward to allow overlaps, simplify replacements
+- fix README
+
 #### v2.1.3
 
 > 16 April 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.1.4
+#### Version 2.1.6
 
 [![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,52 +80,39 @@ 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
-   */
-  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 };
 }
 
-export function unTokenizeHTML(htmlContent, tokens) {
-  let phpContent = htmlContent;
-  for (const token in tokens) {
-    phpContent = phpContent.replace(new RegExp(token, "g"), tokens[token]);
+export function unTokenizeHTML(tokenizedHTML, phpCodeBlocks) {
+  let phpContent = tokenizedHTML;
+  for (const token in phpCodeBlocks) {
+    phpContent = phpContent.replace(
+      new RegExp(token, "g"),
+      phpCodeBlocks[token].replace(/\$/g, "$$$$"),
+    );
   }
   return phpContent;
 }

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;
@@ -54,7 +54,7 @@ export class AfterDoneReporterPlugin {
 
         setTimeout(() =>
           // console.log("\n" + this.config.prefix + " " + messages),
-          console.log( "⚙️ " + messages),
+          console.log( "🚧  " + messages),
         );
 
         setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {

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/fixtures/format-php-prettier/regex-string-bug.php

@@ -0,0 +1,4 @@
+<?php
+$a = 'a $';
+$b = 'b $&';
+$c = '$0 $1 $2 $3';

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

@@ -4,7 +4,7 @@ import { describe, expect, test } from "vitest";
 
 import { readFile } from "node:fs/promises";
 
-import { tokenizeHTML } from "../bin/format-php-prettier.js";
+import { tokenizeHTML, unTokenizeHTML } from "../bin/format-php-prettier.js";
 
 describe("HTML-PHP Prettier", () => {
   test("All tokens exist", async () => {
@@ -48,7 +48,6 @@ describe("HTML-PHP Prettier", () => {
     expect(tokens).toHaveLength(1);
   });
 
-
   test("bare attribute in tag", async () => {
     const input = (
       await readFile(
@@ -56,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+_*$/);
@@ -68,4 +69,70 @@ describe("HTML-PHP Prettier", () => {
 
     expect(tokens).toHaveLength(5);
   });
+
+  /**
+   * If code blocks contain JS capture-group replacement strings
+   * those strings will vanish from the output.
+   */
+  test("$ capture group references bug", async () => {
+    const input = (
+      await readFile("./test/fixtures/format-php-prettier/regex-string-bug.php")
+    ).toString();
+
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(input);
+
+    const formattedContent = unTokenizeHTML(tokenizedHTML, phpCodeBlocks);
+
+    expect(formattedContent).toContain("'a $'");
+    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____ />");
+  });
 });