@ideasonpurpose/build-tools-wordpress 2.1.2 → 2.1.4

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.3
+
+> 16 April 2025
+
+- Use self-closing html tags as tokens. Closes #11
+
+#### v2.1.2
+
+> 14 April 2025
+
+- bump deps
+- experimental html & php formatter
+
 #### v2.1.1
 
 > 9 April 2025

package/README.md

@@ -1,6 +1,6 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 2.1.2
+#### 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

@@ -23,17 +23,69 @@ const phpOptions = prettierConfig.overrides.find(
   (o) => o.files === "*.php",
 )?.options;
 
-function tokenizeHTML(htmlContent) {
+/**
+ * Replaces PHP Code Blocks with tokens, returns tokenized HTML and an object containing
+ * PHP Code Blocks
+ *
+ * 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.
+ *
+ * All other PHP Code Blocks are represented as HTML attribute-safe padded strings, up
+ * to 80 characters long.
+ *
+ * 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
+ * being mutilated by the HTML formatting step. Cleaner than adding a string.replace
+ * to unTokenizeHTML().
+ */
+export function tokenizeHTML(htmlContent) {
   const phpCodeBlocks = {};
   let tokenCount = 0;
 
-  // Tokens are end-padded to the length of the span, up to 80 characters
-  const tokenizedHTML = htmlContent.replace(
-    /<\?(?:php|=)[\s\S]*?\?>/gs,
-    (phpCodeBlock) => {
-      const codeLength = Math.min(phpCodeBlock.length, 80);
-      const token = `__php_${tokenCount++}__`.padEnd(codeLength, "_");
+  // 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]|$))/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;
+    },
+  );
+
+  /**
+   * 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 === "<" ? " />" : "___";
+
+      const codeLength = Math.min(phpCodeBlock.length, 80 - end.length);
+      const token =
+        `${start}php_${tokenCount++}__`.padEnd(codeLength, "_") + end;
       phpCodeBlocks[token] = phpCodeBlock;
+
       return token;
     },
   );
@@ -41,7 +93,7 @@ function tokenizeHTML(htmlContent) {
   return { tokenizedHTML, phpCodeBlocks };
 }
 
-function unTokenizeHTML(htmlContent, tokens) {
+export function unTokenizeHTML(htmlContent, tokens) {
   let phpContent = htmlContent;
   for (const token in tokens) {
     phpContent = phpContent.replace(new RegExp(token, "g"), tokens[token]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.2",
+  "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/basic-html.php

@@ -0,0 +1,7 @@
+<?php $a = 1; ?>
+
+<div>
+  <a href="<?= $href ?>"> <?php echo $text; ?></a>
+</div>
+
+<?php $end = 1;

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/single-open-php-block.php

@@ -0,0 +1,6 @@
+
+    <?php
+
+
+
+  $x    =       1;

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

@@ -0,0 +1,71 @@
+//@ts-check
+
+import { describe, expect, test } from "vitest";
+
+import { readFile } from "node:fs/promises";
+
+import { tokenizeHTML } from "../bin/format-php-prettier.js";
+
+describe("HTML-PHP Prettier", () => {
+  test("All tokens exist", async () => {
+    const input = (
+      await readFile("./test/fixtures/format-php-prettier/basic-html.php")
+    ).toString();
+
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(input);
+
+    Object.keys(phpCodeBlocks).forEach((token) =>
+      expect(tokenizedHTML.includes(token)).toBe(true),
+    );
+  });
+
+  test("make tokens self-closing tags", async () => {
+    const input = (
+      await readFile("./test/fixtures/format-php-prettier/basic-html.php")
+    ).toString();
+
+    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+_* \/>$/);
+  });
+
+  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 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);
+  });
+});