Merge pull request #47 from posthtml/enhance-plugin-options

metonym · web-flow · commit a0c340412e3d · 2020-07-16T06:32:18.000-07:00
feat: allow options to customize pattern and hash length
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![NPM][npm]][npm-url]
 
-`posthtml-hash` is a [PostHTML](https://github.com/posthtml/posthtml) plugin for hashing static assets to enable caching.
+`posthtml-hash` is a [PostHTML](https://github.com/posthtml/posthtml) plugin for hashing file names to enable caching.
 
 ```diff
 <html>
@@ -29,7 +29,7 @@ npm i -D posthtml-hash
 
 ### Input
 
-The plugin will only attempt to hash files with `[hash]` in the name.
+By default, the plugin will attempt to hash file names that contain `[hash]`. As a qualifier, only nodes with a `href` or `src` attribute are considered.
 
 ```html
 <html>
@@ -81,29 +81,59 @@ For convenience, you can add the post-build script to your package.json. The `po
 }
 ```
 
+### Custom Hash Length
+
+Customize the hash length by specifying an integer after the `hash:{NUMBER}`. The default hash length is `20`.
+
+**Note**: This only works for a pattern that uses square brackets and a colon separator. Use the `hashLength` option for other use cases.
+
+```html
+<script src="src.[hash].js"></script>
+<!-- src.b0dcc67ffc1fd562f212.js -->
+
+<script src="src.[hash:8].js"></script>
+<!-- src.b0dcc67f.js -->
+```
+
 ### Options
 
-This plugin assumes that the file to process is in the same directory as the posthtml script. If not, specify the relative path to the html file in `options.path`:
+This plugin assumes that the file to process is in the same directory as the PostHTML script. If not, specify the relative path to the html file in `options.path`:
 
 ```js
 hash({
   /**
    * Relative path to processed HTML file
    */
   path: "public", // default: ""
+
+  /**
+   * File name pattern (regular expression) to match
+   */
+  pattern: new RegExp(/\custom-file-pattern/), // default: new RegExp(/\[hash.*]/g)
+
+  /**
+   * Custom hash length
+   */
+  hashLength: 8, // default: 20
 });
 ```
 
-### Custom Hash Length
+## Recipes
 
-Customize the hash length by specifying an integer after the `hash:{NUMBER}`. The default hash length is `20`.
+### Custom Pattern and Hash Length
 
-```html
-<script src="src.[hash].js"></script>
-<!-- src.b0dcc67ffc1fd562f212.js -->
+```js
+hash({
+  pattern: new RegExp(/\custom-file-pattern/),
+  hashLength: 8,
+});
+```
 
-<script src="src.[hash:8].js"></script>
-<!-- src.b0dcc67f.js -->
+Result:
+
+```diff
+- <script src="script.custom-file-pattern.js"></script>
++ <script src="script.b0dcc67f.js"></script>
 ```
 
 ## [Examples](examples)
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -4,60 +4,62 @@ import { PostHTML } from "posthtml";
 import hasha from "hasha";
 
 const DEFAULT_HASH_LENGTH = 20;
-const REGEX_HASH = new RegExp(/\[hash.*]/g);
+const DEFAULT_PATTERN = new RegExp(/\[hash.*]/g);
 
-export function replaceHash(str: string, buffer: Buffer) {
-  const match = str.match(REGEX_HASH);
+export function replaceHash(
+  str: string,
+  buffer: Buffer,
+  exp: RegExp,
+  hashLength: number
+) {
+  const match = str.match(exp);
   const [_, len] = match![0].replace(/\[|]/g, "").split(":");
 
-  return str.replace(
-    REGEX_HASH,
-    hasha(buffer).slice(0, Number(len) || DEFAULT_HASH_LENGTH)
-  );
+  return str.replace(exp, hasha(buffer).slice(0, Number(len) || hashLength));
 }
 
 type NodeWithHashRegex = { attrs: { href?: string; src?: string } };
 
-function plugin(options?: { path?: string }) {
+function plugin(options?: {
+  path?: string;
+  hashLength?: number;
+  pattern?: RegExp;
+}) {
   return function posthtmlHash(tree: PostHTML.Node) {
-    tree.match(
-      [{ attrs: { href: REGEX_HASH } }, { attrs: { src: REGEX_HASH } }],
-      (node) => {
-        const _node = (node as unknown) as NodeWithHashRegex;
-        const { href, src } = _node.attrs;
+    const exp = options?.pattern || DEFAULT_PATTERN;
+    const hashLength = options?.hashLength || DEFAULT_HASH_LENGTH;
 
-        let fileName = "";
+    tree.match([{ attrs: { href: exp } }, { attrs: { src: exp } }], (node) => {
+      const _node = (node as unknown) as NodeWithHashRegex;
+      const { href, src } = _node.attrs;
 
-        if (href) {
-          fileName = href;
-        } else if (src) {
-          fileName = src;
-        }
+      let fileName = "";
 
-        const pathToFile = options?.path || "";
-        const file = path.join(process.cwd(), pathToFile, fileName);
+      if (href) {
+        fileName = href;
+      } else if (src) {
+        fileName = src;
+      }
 
-        if (fs.existsSync(file)) {
-          const buffer = fs.readFileSync(file);
-          const hashedFileName = replaceHash(fileName, buffer);
-          const hashedFile = path.join(
-            process.cwd(),
-            pathToFile,
-            hashedFileName
-          );
+      const pathToFile = options?.path || "";
+      const file = path.join(process.cwd(), pathToFile, fileName);
 
-          fs.renameSync(file, hashedFile);
+      if (fs.existsSync(file)) {
+        const buffer = fs.readFileSync(file);
+        const hashedFileName = replaceHash(fileName, buffer, exp, hashLength);
+        const hashedFile = path.join(process.cwd(), pathToFile, hashedFileName);
 
-          if (href) {
-            _node.attrs.href = hashedFileName;
-          } else if (src) {
-            _node.attrs.src = hashedFileName;
-          }
-        }
+        fs.renameSync(file, hashedFile);
 
-        return node;
+        if (href) {
+          _node.attrs.href = hashedFileName;
+        } else if (src) {
+          _node.attrs.src = hashedFileName;
+        }
       }
-    );
+
+      return node;
+    });
   };
 }
 
diff --git a/src/tests/__fixtures__/original/script.oh-my-hash.js b/src/tests/__fixtures__/original/script.oh-my-hash.js
diff --git a/src/tests/plugin.test.ts b/src/tests/plugin.test.ts
@@ -4,24 +4,77 @@ import fs from "fs";
 import path from "path";
 import posthtml from "posthtml";
 
+if (!fs.existsSync("src/tests/__fixtures__/processed")) {
+  fs.mkdirSync("src/tests/__fixtures__/processed");
+}
+
 const buffer = fs.readFileSync(
   path.resolve(__dirname, "__fixtures__/original/bundle.min.[hash].js")
 );
 
-test.equal(replaceHash("[hash].js", buffer), "b0dcc67ffc1fd562f212.js");
+const DEFAULT_HASH_LENGTH = 20;
+const DEFAULT_PATTERN = new RegExp(/\[hash.*]/g);
+
+test.equal(
+  replaceHash("[hash].js", buffer, DEFAULT_PATTERN, DEFAULT_HASH_LENGTH),
+  "b0dcc67ffc1fd562f212.js"
+);
 test.equal(
-  replaceHash("script.[hash].js", buffer),
+  replaceHash("script.[hash].js", buffer, DEFAULT_PATTERN, DEFAULT_HASH_LENGTH),
   "script.b0dcc67ffc1fd562f212.js"
 );
 test.equal(
-  replaceHash("script.[hash:20].js", buffer),
+  replaceHash(
+    "script.[hash:20].js",
+    buffer,
+    DEFAULT_PATTERN,
+    DEFAULT_HASH_LENGTH
+  ),
   "script.b0dcc67ffc1fd562f212.js"
 );
-test.equal(replaceHash("script.[hash:8].js", buffer), "script.b0dcc67f.js");
-test.throws(() => replaceHash("script.js", buffer));
-test.throws(() => replaceHash("script[].js", buffer));
-test.throws(() => replaceHash("script.[has:8].js", buffer));
-test.throws(() => replaceHash("script.js", buffer));
+test.equal(
+  replaceHash(
+    "script.[hash:8].js",
+    buffer,
+    DEFAULT_PATTERN,
+    DEFAULT_HASH_LENGTH
+  ),
+  "script.b0dcc67f.js"
+);
+test.throws(() =>
+  replaceHash("script.js", buffer, DEFAULT_PATTERN, DEFAULT_HASH_LENGTH)
+);
+test.throws(() =>
+  replaceHash("script[].js", buffer, DEFAULT_PATTERN, DEFAULT_HASH_LENGTH)
+);
+test.throws(() =>
+  replaceHash("script.[has:8].js", buffer, DEFAULT_PATTERN, DEFAULT_HASH_LENGTH)
+);
+test.throws(() =>
+  replaceHash("script.js", buffer, DEFAULT_PATTERN, DEFAULT_HASH_LENGTH)
+);
+
+const CUSTOM_EXP = new RegExp(/\[oh-my-hash.*]/g);
+
+test.equal(
+  replaceHash("[oh-my-hash].js", buffer, CUSTOM_EXP, DEFAULT_HASH_LENGTH),
+  "b0dcc67ffc1fd562f212.js"
+);
+test.equal(
+  replaceHash("script.[oh-my-hash].js", buffer, CUSTOM_EXP, 8),
+  "script.b0dcc67f.js"
+);
+
+const CUSTOM_EXP_2 = new RegExp(/\oh-my-hash/);
+
+test.equal(
+  replaceHash("oh-my-hash.js", buffer, CUSTOM_EXP_2, DEFAULT_HASH_LENGTH),
+  "b0dcc67ffc1fd562f212.js"
+);
+test.equal(
+  replaceHash("script.oh-my-hash.js", buffer, CUSTOM_EXP_2, 8),
+  "script.b0dcc67f.js"
+);
 
 function copyFixture(fileName: string) {
   const file = path.join(__dirname, "__fixtures__/original", fileName);
@@ -53,6 +106,29 @@ async function fixture() {
     result.html.replace(/\n|\s+/g, ""),
     '<html><head><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i"><linkrel="stylesheet"href="bundle.min.9a6cf95c41e87b9dc102.css"></head><body><scriptsrc="bundle.min.b0dcc67ffc1fd562f212.js"></script></body></html>'
   );
+
+  copyFixture("script.oh-my-hash.js");
+
+  const result2 = await posthtml()
+    .use(
+      hash({
+        path: "src/tests/__fixtures__/processed",
+        pattern: new RegExp(/\oh-my-hash/),
+        hashLength: 8,
+      })
+    )
+    .process(
+      `<html>
+        <body>
+          <script src="script.oh-my-hash.js"></script>
+        </body>
+      </html>`
+    );
+
+  test.equal(
+    result2.html.replace(/\n|\s+/g, ""),
+    '<html><body><scriptsrc="script.b0dcc67f.js"></script></body></html>'
+  );
 }
 
 fixture();
