@ideasonpurpose/build-tools-wordpress 2.1.3 → 2.1.5

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.4
+
+> 16 April 2025
+
+- use look-behind and look-forward to allow overlaps, simplify replacements
+- fix README
+
+#### v2.1.3
+
+> 16 April 2025
+
+- Use self-closing html tags as tokens. Closes #11
+
 #### v2.1.2
 
 > 14 April 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.1.3
+#### Version 2.1.5
 
 [![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)
@@ -44,7 +44,7 @@ Running a simple watch script to re-install on changes will make things somewhat
 ```sh
 cd dev-project-working-dir
 npm chokidar-cli "../../build-tools-wordpress/**/*" -c "npm install"
-
+```
 
 ### Additional Notes
 

package/bin/format-php-prettier.js

@@ -46,34 +46,61 @@ export function tokenizeHTML(htmlContent) {
   // const pattern = /<\?(?:php|=)[\s\S]*?\?>/gs;
   // const pattern =
   //   /(?<before>(?:[^\s]|\s|^)\s*)(?<php><\?(?:php|=).*?(?:\?>|$))(?<after>(?:\s*)[^\s]|$)/gs;
+  // const pattern =
+  //   /((?:[^\s]|\s|^)\s*)(<\?(?:php|=).*?(?:\?>|$))((?:\s*)[^\s]|$)/gms;
+  // // const pattern = /([^\s]+)\s*(<\?(?:php|=).*?(?:\?>|$))\s*([^\s]*)/gms;
+  // const pattern =
+  //   /([^\s]?\s*)?(<\?(?:php|=).*?(?:\?>|$))((?:\s*)[^\s]|$)/gms;
   const pattern =
-    /((?:[^\s]|\s|^)\s*)(<\?(?:php|=).*?(?:\?>|$))((?:\s*)[^\s]|$)/gs;
+    /(?<=((?:[^\s]|\s|^)\s*))(<\?(?:php|=).*?\?>)(?=((?:\s*)[^\s]|$))/gms;
 
-  const tokenizedHTML = htmlContent.replace(
+  let tokenizedHTML = htmlContent.replace(
     pattern,
     (string, before, phpCodeBlock, after, offset) => {
       const start = [">", ""].includes(before.trim()) ? "<" : "_";
       const end = ["<", ""].includes(after.trim()) ? " />" : "___";
 
-      console.log({offset,  string, before, phpCodeBlock, after, offset });
+      // 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;
+    },
+  );
+
+  /**
+   * 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,
+
+    (string, before, phpCodeBlock, offset) => {
+      const start = [">", ""].includes(before.trim()) ? "<" : "_";
+      const end = start === "<" ? " />" : "___";
 
-      // end-pad the token to the lengh 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 `${before}${token}${after}`;
+
+      return token;
     },
   );
 
-  console.log({ tokenizedHTML, phpCodeBlocks });
   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

@@ -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.3",
+  "version": "2.1.5",
   "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/card-attribute-bug.php

@@ -0,0 +1,20 @@
+
+
+
+<!-- START template-parts/items/card.php -->
+
+<a
+  href="<?php the_permalink(); ?>"
+  <?php post_class('card col-12 col-md-6'); ?>
+  data-ga-action="Article"
+>
+  <?php get_template_part('template-parts/partials/card-media'); ?>
+  <div class="card__details">
+         <h4   class="card__title"><?=           $cardTitle ?></h4>
+    <h5 class="card__desc"><?= $cardDesc ?></h5>
+  </div>
+        </a>
+
+<!-- END template-parts/items/card.php -->
+
+

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 () => {
@@ -34,18 +34,55 @@ describe("HTML-PHP Prettier", () => {
     expect(tokens[3]).toMatch(/^<php_\d+_* \/>$/);
   });
 
-  test("single open PHP code block #11"),
-    async () => {
-      const input = (
-        await readFile(
-          "./test/fixtures/format-php-prettier/single-open-php-block.php",
-        )
-      ).toString();
+  test("single open PHP code block #11", async () => {
+    const input = (
+      await readFile(
+        "./test/fixtures/format-php-prettier/single-open-php-block.php",
+      )
+    ).toString();
+
+    const { phpCodeBlocks: codeBlocks } = tokenizeHTML(input);
+
+    const tokens = Object.keys(codeBlocks);
+
+    expect(tokens).toHaveLength(1);
+  });
+
+  test("bare attribute in tag", async () => {
+    const input = (
+      await readFile(
+        "./test/fixtures/format-php-prettier/card-attribute-bug.php",
+      )
+    ).toString();
+
+    const { phpCodeBlocks: codeBlocks } = tokenizeHTML(input);
 
-      const { phpCodeBlocks: codeBlocks } = tokenizeHTML(input);
+    const tokens = Object.keys(codeBlocks);
 
-      const tokens = Object.keys(codeBlocks);
+    expect(tokens[0]).toMatch(/^_php_\d+_*$/);
+    expect(tokens[1]).toMatch(/^_php_\d+_*$/);
+    expect(tokens[2]).toMatch(/^<php_\d+_* \/>$/);
+    expect(tokens[3]).toMatch(/^<php_\d+_* \/>$/);
+    expect(tokens[4]).toMatch(/^<php_\d+_* \/>$/);
 
-      expect(tokens).toHaveLength(1);
-    };
+    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'");
+  });
 });