@ideasonpurpose/build-tools-wordpress 2.1.3 → 2.1.4

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.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.4
 
 [![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,27 +46,50 @@ 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
+   */
+  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 };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "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/format-php-prettier.test.js

@@ -34,18 +34,38 @@ 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);
+  });
 
-      const { phpCodeBlocks: codeBlocks } = tokenizeHTML(input);
 
-      const tokens = Object.keys(codeBlocks);
+  test("bare attribute in tag", async () => {
+    const input = (
+      await readFile(
+        "./test/fixtures/format-php-prettier/card-attribute-bug.php",
+      )
+    ).toString();
 
-      expect(tokens).toHaveLength(1);
-    };
+    const { phpCodeBlocks: codeBlocks } = tokenizeHTML(input);
+
+    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(5);
+  });
 });