@ideasonpurpose/build-tools-wordpress 2.1.2 → 2.1.3

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.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.3
 
 [![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,25 +23,54 @@ 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 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]|$)/gs;
+
   const tokenizedHTML = htmlContent.replace(
-    /<\?(?:php|=)[\s\S]*?\?>/gs,
-    (phpCodeBlock) => {
-      const codeLength = Math.min(phpCodeBlock.length, 80);
-      const token = `__php_${tokenCount++}__`.padEnd(codeLength, "_");
+    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 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 token;
+      return `${before}${token}${after}`;
     },
   );
 
+  console.log({ tokenizedHTML, phpCodeBlocks });
   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.3",
   "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/single-open-php-block.php

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

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

@@ -0,0 +1,51 @@
+//@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);
+    };
+});