use look-behind and look-forward to allow overlaps, simplify replacements

Author: joemaller

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 };
 }
 

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 -->
+
+

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);
+  });
 });