@ideasonpurpose/build-tools-wordpress 2.1.1 → 2.1.3

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.2
+
+> 14 April 2025
+
+- bump deps
+- experimental html & php formatter
+
+#### v2.1.1
+
+> 9 April 2025
+
+- Clean up outputs a little
+
 #### v2.1.0
 
 > 1 April 2025

package/README.md

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

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+
+/**
+ * This is an experimental proof-of-concept for formatting mixed HTML & PHP
+ * files from a single function.
+ *
+ * TODO: Testing, naming, modularization, VS Code extension
+ */
+import prettier from "prettier";
+import prettierConfig from "@ideasonpurpose/prettier-config" with { type: "json" };
+
+import { readFile, writeFile } from "fs/promises";
+import { resolve, basename } from "path";
+
+/**
+ * Prettier API doesn't recognize overrides, so we extract them
+ */
+const htmlOptions = prettierConfig.overrides.find(
+  (o) => o.files === "*.html",
+)?.options;
+
+const phpOptions = prettierConfig.overrides.find(
+  (o) => o.files === "*.php",
+)?.options;
+
+/**
+ * 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;
+
+  // 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(
+    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 `${before}${token}${after}`;
+    },
+  );
+
+  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]);
+  }
+  return phpContent;
+}
+
+async function formatHTMLThenPHP(filepath) {
+  try {
+    const startTime = process.hrtime.bigint();
+    const rawFile = await readFile(filepath, "utf8");
+
+    const { tokenizedHTML, phpCodeBlocks } = tokenizeHTML(rawFile);
+
+    const htmlFormatted = await prettier.format(tokenizedHTML, {
+      ...prettierConfig,
+      ...htmlOptions,
+      parser: "html",
+    });
+
+    const phpUnTokenized = unTokenizeHTML(htmlFormatted, phpCodeBlocks);
+
+    const phpFormatted = await prettier.format(phpUnTokenized, {
+      ...prettierConfig,
+      ...phpOptions,
+      parser: "php",
+    });
+
+    await writeFile(filepath, phpFormatted, "utf8");
+    const endTime = process.hrtime.bigint();
+    const duration = Number(endTime - startTime);
+
+    console.log(`${basename(filepath)} ${(duration / 1e6).toFixed(2)}ms`);
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+
+if (process.argv[2]) {
+  const fullPath = resolve(process.argv[2]);
+  formatHTMLThenPHP(fullPath);
+} else {
+  console.error("Error: A filepath is required.");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "2.1.1",
+  "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": {
@@ -21,7 +21,8 @@
   "bin": {
     "iop-build-port-reporter": "./bin/port-reporter.js",
     "iop-build-zip-archive": "./bin/zip.js",
-    "iop-project-init": "./bin/project-init.js"
+    "iop-project-init": "./bin/project-init.js",
+    "iop-html-php-prettier": "./bin/format-php-prettier.js"
   },
   "directories": {
     "lib": "lib"
@@ -32,19 +33,19 @@
   },
   "prettier": "@ideasonpurpose/prettier-config",
   "dependencies": {
-    "@ideasonpurpose/prettier-config": "^1.0.0",
+    "@ideasonpurpose/prettier-config": "^1.0.1",
     "@ideasonpurpose/stylelint-config": "^1.1.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^6.20.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.22.0",
     "ansi-html": "^0.0.9",
     "archiver": "^7.0.1",
     "auto-changelog": "^2.5.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001707",
+    "caniuse-lite": "^1.0.30001713",
     "chalk": "^5.4.1",
     "chalk-cli": "^5.0.1",
     "classnames": "^2.5.1",
@@ -54,9 +55,9 @@
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
-    "dotenv": "^16.4.7",
+    "dotenv": "^16.5.0",
     "esbuild-loader": "^4.3.0",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "filesize": "^10.1.6",
     "fs-extra": "^11.3.0",
     "globby": "^14.1.0",
@@ -73,17 +74,17 @@
     "pretty-hrtime": "^1.0.3",
     "read-package-up": "^11.0.0",
     "replacestream": "^4.0.3",
-    "sass-embedded": "^1.86.1",
+    "sass-embedded": "^1.86.3",
     "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
-    "sharp": "^0.33.5",
+    "sharp": "^0.34.1",
     "sort-package-json": "^3.0.0",
     "string-length": "^6.0.0",
     "style-loader": "^4.0.0",
     "svgo": "^3.3.2",
     "svgo-loader": "^4.0.0",
     "version-everything": "^0.11.4",
-    "webpack": "^5.98.0",
+    "webpack": "^5.99.5",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-dev-server": "^5.2.1"

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