@altano/html-cdnify 1.0.0

package/README.md

@@ -0,0 +1,398 @@
+![logo](./assets/logo.png)
+
+[![npm](https://badgen.net/npm/v/html-cdnify)](https://www.npmjs.com/package/html-cdnify) ![Typed with TypeScript](https://badgen.net/npm/types/html-cdnify) ![ESM only](https://badgen.net/badge/module/esm%20only?icon=js)
+
+Transform the relative URLs in your HTML markup (e.g. scripts, stylesheets, images) to use your CDN URL.
+
+- Uses a real HTML parser, [trumpet](https://www.npmjs.com/package/trumpet), not regular expressions.
+- Doesn't require changes to your HTML, is a purely post-process transformation.
+- Supports relative URLs in your HTML.
+- Will perform minimal modifications to your HTML, only modifying the element that is having an attribute cdnified.
+- Like [grunt-cdnify](https://www.npmjs.com/package/grunt-cdnify) but usable with or without grunt.
+- Like [cdnify](https://www.npmjs.com/package/cdnify) but you don't have to mark up your HTML with magic attributes.
+- This library's scope is limited to HTML and is not meant to process CSS.
+
+# Simplest usage
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+cdnify({
+  cdnUrl: "//cdn.com",
+  buffer: `<img src="/face.png">`,
+})
+  .then((buffer) => buffer.toString())
+  .then((output) => console.log(output));
+
+// Output:
+// <img src="//cdn.com/face.png">
+```
+
+# What gets cdnified
+
+Any URLs where only the path (and after) is specified which are found in the following locations will be cdnified:
+
+       <img data-src="____">
+       <img src="____">
+       <img srcset="____">
+     <video poster="____">
+    <script src="____">
+    <source src="____">
+      <link rel="apple-touch-icon" href="____">
+      <link rel="icon" href="____">
+      <link rel="shortcut icon" href="____">
+      <link rel="stylesheet" href="____">
+
+## Will be cdnified
+
+- `<img src="/logo.png">`
+- `<script src="jquery.js"></script>`
+- `<link rel="stylesheet" href="main.css"></script>`
+
+## Won't be cdnified
+
+| HTMLElement                           | Reason not cdnified                         |
+| ------------------------------------- | ------------------------------------------- |
+| `<img src="http://foo.com/logo.png">` | Absolute URL specified                      |
+| `<img src="//foo.com/logo.png">`      | Scheme-relative/agnostic URL specified      |
+| `<img custom="/logo.png">`            | "custom" attribute not among those cdnified |
+
+Adding the `data-cdn-ignore` attribute to any element will cause the element to be skipped during cdnification, and the `data-cdn-ignore` attribute will be removed to clean up your HTML.
+
+# More Examples
+
+## Using `bufferPath` to deal with subdirectories
+
+You can specify `bufferPath`, the relative path to the buffer being processed. If this isn't specified, all resources with relative paths will be assumed to be at the root of the domain before being cdnified.
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+var input = `
+<img src="figure1.png">
+<img src="articleSubDirectory/figure2.png">
+<img src="/images/logo.png">
+`;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com",
+  bufferPath: "articles/article1/index.html",
+  buffer: input,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <img src="//cdn.com/articles/article1/figure1.png">
+// <img src="//cdn.com/articles/article1/articleSubDirectory/figure2.png">
+// <img src="//cdn.com/images/logo.png">
+```
+
+_Without_ `bufferPath`, the output would be:
+
+```js
+// Output:
+// <img src="//cdn.com/figure1.png">
+// <img src="//cdn.com/articleSubDirectory/figure2.png">
+// <img src="//cdn.com/images/logo.png">
+```
+
+If your CDN has a path specified, it is assumed that both relative URLs AND root-relative URLs in your HTML are relative to the CDN directory. In other words, the CDN subdirectory will always be in the final URL. For example:
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+var input = `
+<img src="figure1.png">
+<img src="articleSubDirectory/figure2.png">
+<img src="/images/logo.png">
+`;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com/sub/directory/in/cdn/is/always/present",
+  bufferPath: "article/index.html",
+  buffer: input,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <img src="//cdn.com/sub/directory/in/cdn/is/always/present/article/figure1.png">
+// <img src="//cdn.com/sub/directory/in/cdn/is/always/present/article/articleSubDirectory/figure2.png">
+// <img src="//cdn.com/sub/directory/in/cdn/is/always/present/images/logo.png">
+```
+
+It should usually be the expectation that a CDN subdir is always present in the cdnified result. If you need to specify a CDN subdirectory AND you need to sometimes escape URLs in your HTML to the root of the CDN domain, you'll have to write a custom transformFunction.
+
+## Using the underlying stream instead of a Promise
+
+If you are dealing with large files or network IO and would like to use the underlying NodeJS Transform Stream rather than buffering all of the input and output, feel free:
+
+```js
+var streamifier = require("streamifier");
+var CDNTransformer = require("html-cdnify").CDNTransformer;
+
+var transformer = new CDNTransformer({
+  cdnUrl: "http://cdn.com",
+});
+
+var outputStream = streamifier
+  .createReadStream(
+    `<img src="face1.png">
+<img src="face2.png">
+<img src="face3.png">`,
+  )
+  .pipe(transformer.stream);
+
+outputStream.pipe(process.stdout);
+
+// Output:
+// <img src="http://cdn.com/face1.png">
+// <img src="http://cdn.com/face2.png">
+// <img src="http://cdn.com/face3.png">
+```
+
+## Specifying a transform defintion to add `<custom-element src="____">` to the list of attributes to be cdnified
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com/cdn/",
+  transformDefinitions: [
+    {
+      selector: "custom-element[src]",
+      attribute: "src",
+    },
+  ],
+  buffer: `<custom-element src="/face7.png">`,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <custom-element src="//cdn.com/cdn/face7.png">
+```
+
+## Specifying a custom transform function
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com",
+  transformFunction: (cdnUrl, oldUrl, bufferPath) => {
+    return cdnUrl + "/subdir" + oldUrl;
+  },
+  buffer: `<img src="/logo.png">`,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <img src="//cdn.com/subdir/logo.png">
+```
+
+## Specifying a custom transform function that delegates to the default
+
+If your assets are on different CDNs, you might need to write something like:
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+var CDNTransformer = require("html-cdnify").CDNTransformer;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com",
+  transformFunction: (cdnUrl, oldUrl, bufferPath) => {
+    if (oldUrl.endsWith(".png")) {
+      var customCdnBaseUrl = "//imagecdn.com";
+    } else {
+      var customCdnBaseUrl = "//assetcdn.com";
+    }
+    return CDNTransformer.defaultTransformFunction(customCdnBaseUrl, oldUrl, bufferPath);
+  },
+  buffer: `<img src="logo.png"><script src="main.js"></script>`,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <img src="//imagecdn.com/logo.png"><script src="//assetcdn.com/main.js"></script>
+```
+
+## Specifying a custom attributeParser
+
+A custom attributeParser is like a custom transformFunction, but is scoped to just one selector rather than being applied to every attribute transformation. For example, to uppercase only PNG image names before cdnifying:
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com",
+  transformDefinitions: [
+    {
+      selector: `img[src$="png"]`,
+      attribute: "src",
+      attributeParser: (oldAttribute, transformFunction) => transformFunction(oldAttribute.toUpperCase()),
+    },
+  ],
+  buffer: `<img src="/logo.gif"><img src="/logo.png">`,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <img src="//cdn.com/logo.gif"><img src="//cdn.com/LOGO.PNG">
+```
+
+## Overriding an existing transform
+
+The default transformDefinitions array is:
+
+```js
+[
+  {
+    selector: `video[poster]:not([data-cdn-ignore])`,
+    attribute: "poster",
+  },
+  {
+    selector: `img[data-src]:not([data-cdn-ignore])`,
+    attribute: "data-src",
+  },
+  {
+    selector: `script[src]:not([data-cdn-ignore])`,
+    attribute: "src",
+  },
+  {
+    selector: `source[src]:not([data-cdn-ignore])`,
+    attribute: "src",
+  },
+  {
+    selector: `link[rel="apple-touch-icon"]:not([data-cdn-ignore])`,
+    attribute: "href",
+  },
+  {
+    selector: `link[rel="icon"]:not([data-cdn-ignore])`,
+    attribute: "href",
+  },
+  {
+    selector: `link[rel="shortcut icon"]:not([data-cdn-ignore])`,
+    attribute: "href",
+  },
+  {
+    selector: `link[rel="stylesheet"]:not([data-cdn-ignore])`,
+    attribute: "href",
+  },
+  {
+    selector: `img[src]:not([data-cdn-ignore])`,
+    attribute: "src",
+  },
+  {
+    selector: `img[srcset]:not([data-cdn-ignore])`,
+    attribute: "srcset",
+    attributeParser: (attr, transformFunction) => {
+      return attr
+        .split(",")
+        .map((imgInfo) => imgInfo.replace(/([^ ]+)/, transformFunction))
+        .join(",");
+    },
+  },
+];
+```
+
+If you'd like to ovverride any of these, specify the same selector and attribute but a different attributeParser. For example:
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+var noopFn = (oldAttribute) => oldAttribute;
+
+var outputPromise = cdnify({
+  cdnUrl: "//cdn.com",
+  transformDefinitions: [
+    {
+      selector: "img[src]:not([data-cdn-ignore])",
+      attribute: "src",
+      attributeParser: noopFn, // pass-through attribute without modification
+    },
+  ],
+  buffer: `<img src="logo.gif">`,
+}).then((buffer) => buffer.toString());
+
+outputPromise.then((output) => console.log(output));
+
+// Output:
+// <img src="logo.gif">
+```
+
+# API
+
+## Promise-based API (recommended for simplicity)
+
+```js
+var cdnify = require("html-cdnify").cdnify;
+
+cdnify({ ... Options ...}) => Promise<Buffer>
+```
+
+### Options
+
+Same options as stream-based API (see below), plus:
+
+| Property | Type             | Optional                                 | Description |
+| -------- | ---------------- | ---------------------------------------- | ----------- |
+| buffer   | Buffer or string | The content that is going to be cdnified |
+
+## Stream-based API
+
+use the stream-based API when you are dealing with large files or network IO and would like to use the underlying NodeJS Transform Stream rather than buffering all of the input and output. The Promisebased API is simpler but the input/output must be completely buffered, which is obviously fine most of the time.
+
+```js
+var CDNTransformer = require("html-cdnify").CDNTransformer;
+
+var transformer = new CDNTransformer({ ... Options ... }) => CDNTransformer
+transformer.stream => NodeJS TransformStream
+```
+
+### Options
+
+| Property             | Type                 | Optional | Description                                                                                                                                                                        |
+| -------------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| cdnUrl               | string               |          | The absolute (or scheme-relative/agnostic) URL to your CDN.                                                                                                                        |
+| bufferPath           | string               | Y        | The relative path to the buffer being processed. If this isn't specified, all resources with relative paths will be assumed to be at the root of the domain before being cdnified. |
+| transformDefinitions | TransformDefinition  | Y        | See below...                                                                                                                                                                       |
+| transformFunction    | CDNTransformFunction | Y        | See below...                                                                                                                                                                       |
+
+### TransformDefinition
+
+```
+interface TransformDefinition {
+  selector: string;
+  attribute: string;
+  attributeParser?: (oldAttribute: string, transformFunction: TransformFunction) => string;
+}
+```
+
+The default attributeParser when one isn't specified is:
+
+```
+HtmlAttributeStreamTransformerOptions.attributeParsers = {
+  default: (attr, transformFunction) => transformFunction(attr)
+};
+```
+
+### CDNTransformFunction
+
+```
+(cdnUrl: string, oldUrl: string, bufferPath: string) => string;
+```
+
+### TransformFunction
+
+```
+(oldAttribute: string) => string;
+```
+
+---
+
+Shield (in logo) by [Flaticon](http://www.flaticon.com) from [Freepik](http://www.freepik.com)

package/dist/CDNTransformer.d.ts

@@ -0,0 +1,25 @@
+import { TransformDefinition, HtmlAttributeStreamTransformer } from './HtmlAttributeStreamTransformer.js';
+import './HtmlTransformer.js';
+import 'trumpet';
+
+type CDNTransformFunction = (cdnUrl: string, oldUrl: string, bufferPath: string) => string;
+interface CDNTransformerOptions {
+    cdnUrl: string;
+    bufferPath?: string;
+    transformDefinitions?: TransformDefinition[];
+    transformFunction?: CDNTransformFunction;
+}
+/**
+ * Wraps a node-trumpet Transform stream, w/ HTML as input and
+ * HTML as output. The output will have all non-absolute-URL
+ * attributes that identify CDN-able resources converted to
+ * use the given CDN URL.
+ */
+declare class CDNTransformer extends HtmlAttributeStreamTransformer {
+    #private;
+    cdnOptions: Required<CDNTransformerOptions>;
+    constructor(cdnOptions: CDNTransformerOptions);
+    static defaultTransformFunction: (newUrlBase: string, oldUrl: string, pathOldUrlIsRelativeTo?: string | undefined) => string;
+}
+
+export { CDNTransformFunction, CDNTransformer, CDNTransformerOptions };

package/dist/CDNTransformer.js

@@ -0,0 +1,9 @@
+import {
+  CDNTransformer
+} from "./chunk-HS44D3X6.js";
+import "./chunk-Z7NH4HT6.js";
+import "./chunk-P5I4BMT3.js";
+import "./chunk-ZHBDQZLT.js";
+export {
+  CDNTransformer
+};

package/dist/HtmlAttributeStreamTransformer.d.ts

@@ -0,0 +1,36 @@
+import HtmlTransformer from './HtmlTransformer.js';
+import 'trumpet';
+
+interface HtmlAttributeStreamTransformerOptions {
+    transformDefinitions: TransformDefinition[];
+    transformFunction: TransformFunction;
+    attributeToMarkElementToBeIgnored?: string;
+}
+interface TransformDefinition {
+    selector: string;
+    attribute: string;
+    attributeParser?: (oldAttribute: string, transformFunction: TransformFunction) => string;
+}
+type TransformFunction = (oldAttribute: string) => string;
+interface AttributeParser {
+    (oldAttribute: string, transformFunction: TransformFunction): string;
+}
+interface AttributeParsers {
+    [index: string]: AttributeParser;
+}
+/**
+ * Wraps a node-trumpet Transform stream, w/ HTML as input and
+ * HTML as output. The output will have all non-absolute-URL
+ * attributes that identify CDN-able resources converted to
+ * use the given CDN URL.
+ */
+declare class HtmlAttributeStreamTransformer extends HtmlTransformer {
+    options: HtmlAttributeStreamTransformerOptions;
+    condensedTransformOptions: TransformDefinition[];
+    constructor(options: HtmlAttributeStreamTransformerOptions);
+    static attributeParsers: AttributeParsers;
+    protected applyTransforms(): void;
+    private processTransforms;
+}
+
+export { AttributeParser, AttributeParsers, HtmlAttributeStreamTransformer, HtmlAttributeStreamTransformerOptions, TransformDefinition, TransformFunction };

package/dist/HtmlAttributeStreamTransformer.js

@@ -0,0 +1,7 @@
+import {
+  HtmlAttributeStreamTransformer
+} from "./chunk-Z7NH4HT6.js";
+import "./chunk-P5I4BMT3.js";
+export {
+  HtmlAttributeStreamTransformer
+};

package/dist/HtmlTransformer.d.ts

@@ -0,0 +1,18 @@
+import { Trumpet } from 'trumpet';
+
+interface TrumpetTransformStream extends Trumpet {
+}
+declare class HtmlTransformer {
+    private transformStream;
+    constructor();
+    /**
+     * Get the underlying transform stream
+     */
+    get stream(): Trumpet;
+    /**
+     * Get a promise to the complete output Buffer (alternative API to dealing with stream)
+     */
+    get outputBufferPromise(): Promise<Buffer>;
+}
+
+export { TrumpetTransformStream, HtmlTransformer as default };

package/dist/HtmlTransformer.js

@@ -0,0 +1,6 @@
+import {
+  HtmlTransformer
+} from "./chunk-P5I4BMT3.js";
+export {
+  HtmlTransformer as default
+};

package/dist/cdnify.d.ts

@@ -0,0 +1,15 @@
+import { CDNTransformerOptions } from './CDNTransformer.js';
+export { CDNTransformFunction, CDNTransformer } from './CDNTransformer.js';
+import './HtmlAttributeStreamTransformer.js';
+import './HtmlTransformer.js';
+import 'trumpet';
+
+interface CdnifyOptions extends CDNTransformerOptions {
+    buffer: string | Buffer;
+}
+/**
+ * Alternative wrapper for simple Promise-based use of library (as opposed to transform stream)
+ */
+declare function cdnify(options: CdnifyOptions): Promise<Buffer>;
+
+export { CDNTransformerOptions, CdnifyOptions, cdnify, cdnify as default };

package/dist/cdnify.js

@@ -0,0 +1,23 @@
+import {
+  CDNTransformer
+} from "./chunk-HS44D3X6.js";
+import "./chunk-Z7NH4HT6.js";
+import "./chunk-P5I4BMT3.js";
+import "./chunk-ZHBDQZLT.js";
+
+// src/cdnify.ts
+import streamifier from "streamifier";
+function cdnify(options) {
+  if (typeof options.buffer !== "string") {
+    options.buffer = options.buffer.toString();
+  }
+  const cdnTransformer = new CDNTransformer(options);
+  streamifier.createReadStream(options.buffer).pipe(cdnTransformer.stream);
+  return cdnTransformer.outputBufferPromise;
+}
+var cdnify_default = cdnify;
+export {
+  CDNTransformer,
+  cdnify,
+  cdnify_default as default
+};

package/dist/chunk-HS44D3X6.js

@@ -0,0 +1,132 @@
+import {
+  HtmlAttributeStreamTransformer
+} from "./chunk-Z7NH4HT6.js";
+import {
+  urlConverter_default
+} from "./chunk-ZHBDQZLT.js";
+
+// src/CDNTransformer.ts
+import { unionBy, merge, mergeWith } from "lodash";
+var OptionsMerger = class _OptionsMerger {
+  static isTransformDefinition(a) {
+    return a != null && typeof a === "object" && "selector" in a && "attribute" in a && typeof a.selector === "string" && typeof a.selector === "string" && typeof a.attribute === "string";
+  }
+  static isTransformDefinitions(a) {
+    return Array.isArray(a) && a.length > 0 && _OptionsMerger.isTransformDefinition(a[0]);
+  }
+  static mergeCustomizer = (objValue, srcValue) => {
+    if (_OptionsMerger.isTransformDefinitions(objValue) || _OptionsMerger.isTransformDefinitions(srcValue)) {
+      const result = unionBy(
+        srcValue,
+        objValue,
+        // reverse order to allow srcValue to take precedence
+        (value) => `${value.selector} / ${value.attribute}`
+      );
+      return result;
+    } else {
+      return void 0;
+    }
+  };
+  static merge(target, source1, source2, source3) {
+    return mergeWith(
+      target,
+      source1,
+      source2,
+      source3,
+      _OptionsMerger.mergeCustomizer
+    );
+  }
+};
+var CDNTransformer = class _CDNTransformer extends HtmlAttributeStreamTransformer {
+  cdnOptions;
+  constructor(cdnOptions) {
+    super(
+      OptionsMerger.merge(
+        {},
+        _CDNTransformer.#defaultHtmlAttributeStreamTransformerOptions,
+        {
+          transformDefinitions: [],
+          transformFunction: (attribute) => this.#cdnifyAttribute(attribute)
+        },
+        {
+          transformDefinitions: cdnOptions.transformDefinitions
+        }
+      )
+    );
+    this.cdnOptions = merge(
+      {
+        transformDefinitions: []
+      },
+      _CDNTransformer.#defaultCdnOptions,
+      cdnOptions
+    );
+    if (typeof this.cdnOptions.cdnUrl !== "string") {
+      throw new Error(`Invalid cdnUrl "${this.cdnOptions.cdnUrl}" specified.`);
+    }
+  }
+  #cdnifyAttribute(oldUrl) {
+    return this.cdnOptions.transformFunction(
+      this.cdnOptions.cdnUrl,
+      oldUrl,
+      this.cdnOptions.bufferPath
+    );
+  }
+  static #defaultCdnOptions = {
+    bufferPath: ".",
+    transformFunction: urlConverter_default
+  };
+  static defaultTransformFunction = _CDNTransformer.#defaultCdnOptions.transformFunction;
+  static #defaultHtmlAttributeStreamTransformerOptions = {
+    attributeToMarkElementToBeIgnored: "data-cdn-ignore",
+    // inspired by https://github.com/callumlocke/grunt-cdnify/blob/master/tasks/cdnify.js#L31
+    transformDefinitions: [
+      {
+        selector: `video[poster]:not([data-cdn-ignore])`,
+        attribute: "poster"
+      },
+      {
+        selector: `img[data-src]:not([data-cdn-ignore])`,
+        attribute: "data-src"
+      },
+      {
+        selector: `script[src]:not([data-cdn-ignore])`,
+        attribute: "src"
+      },
+      {
+        selector: `source[src]:not([data-cdn-ignore])`,
+        attribute: "src"
+      },
+      {
+        selector: `link[rel="apple-touch-icon"]:not([data-cdn-ignore])`,
+        attribute: "href"
+      },
+      {
+        selector: `link[rel="icon"]:not([data-cdn-ignore])`,
+        attribute: "href"
+      },
+      {
+        selector: `link[rel="shortcut icon"]:not([data-cdn-ignore])`,
+        attribute: "href"
+      },
+      {
+        selector: `link[rel="stylesheet"]:not([data-cdn-ignore])`,
+        attribute: "href"
+      },
+      {
+        selector: `img[src]:not([data-cdn-ignore])`,
+        attribute: "src"
+      },
+      {
+        selector: `img[srcset]:not([data-cdn-ignore])`,
+        attribute: "srcset",
+        attributeParser(attr, transformFunction) {
+          return attr.split(",").map((imgInfo) => imgInfo.replace(/([^ ]+)/, transformFunction)).join(",");
+        }
+      }
+    ]
+  };
+};
+
+export {
+  CDNTransformer
+};

package/dist/chunk-P5I4BMT3.js

@@ -0,0 +1,25 @@
+// src/HtmlTransformer.ts
+import trumpet from "trumpet";
+import streamToPromise from "stream-to-promise";
+var HtmlTransformer = class {
+  transformStream;
+  constructor() {
+    this.transformStream = trumpet();
+  }
+  /**
+   * Get the underlying transform stream
+   */
+  get stream() {
+    return this.transformStream;
+  }
+  /**
+   * Get a promise to the complete output Buffer (alternative API to dealing with stream)
+   */
+  get outputBufferPromise() {
+    return streamToPromise(this.stream);
+  }
+};
+
+export {
+  HtmlTransformer
+};

package/dist/chunk-Z7NH4HT6.js

@@ -0,0 +1,84 @@
+import {
+  HtmlTransformer
+} from "./chunk-P5I4BMT3.js";
+
+// src/HtmlAttributeStreamTransformer.ts
+import { groupBy } from "lodash";
+var HtmlAttributeStreamTransformer = class _HtmlAttributeStreamTransformer extends HtmlTransformer {
+  constructor(options) {
+    super();
+    this.options = options;
+    this.processTransforms();
+    this.applyTransforms();
+  }
+  condensedTransformOptions = [];
+  static attributeParsers = {
+    default: (attr, transformFunction) => transformFunction(attr)
+  };
+  applyTransforms() {
+    this.condensedTransformOptions.forEach((settings) => {
+      const selector = settings.selector;
+      const attribute = settings.attribute;
+      const parser = settings.attributeParser;
+      this.stream.selectAll(selector, (elem) => {
+        const oldAttributeValue = elem.getAttribute(attribute);
+        if (typeof oldAttributeValue === "string") {
+          const newAttributeValue = parser && parser(oldAttributeValue, this.options.transformFunction);
+          if (newAttributeValue && newAttributeValue !== oldAttributeValue) {
+            elem.setAttribute(attribute, newAttributeValue);
+          }
+        }
+      });
+    });
+    const { attributeToMarkElementToBeIgnored } = this.options;
+    if (attributeToMarkElementToBeIgnored) {
+      this.stream.selectAll(
+        `[${attributeToMarkElementToBeIgnored}]`,
+        (elem) => {
+          elem.removeAttribute(attributeToMarkElementToBeIgnored);
+        }
+      );
+    }
+  }
+  processTransforms() {
+    this.options.transformDefinitions.forEach((option) => {
+      if (!option.attributeParser) {
+        option.attributeParser = _HtmlAttributeStreamTransformer.attributeParsers["default"];
+      }
+      if (typeof option.selector !== "string") {
+        throw new Error(`Invalid selector "${option.selector}" specified.`);
+      }
+      if (typeof option.attribute !== "string") {
+        throw new Error(`Invalid attribute "${option.attribute}" specified.`);
+      }
+      if (!(option.attributeParser instanceof Function)) {
+        throw new Error("Invalid attributeParser specified.");
+      }
+    });
+    const groupedTransformOptions = groupBy(
+      this.options.transformDefinitions,
+      (obj) => {
+        return [obj.attribute, obj.attributeParser];
+      }
+    );
+    this.condensedTransformOptions = Object.keys(groupedTransformOptions).map(
+      (key) => {
+        const likeTransformOptions = groupedTransformOptions[key];
+        if (likeTransformOptions == null || likeTransformOptions[0] == null) {
+          throw new Error(`No likeTransformOptions`);
+        }
+        const attribute = likeTransformOptions[0].attribute;
+        const attributeParser = likeTransformOptions[0].attributeParser;
+        return {
+          attribute,
+          attributeParser,
+          selector: likeTransformOptions.map((likeTransformOption) => likeTransformOption.selector).join(", ")
+        };
+      }
+    );
+  }
+};
+
+export {
+  HtmlAttributeStreamTransformer
+};

package/dist/chunk-ZHBDQZLT.js

@@ -0,0 +1,32 @@
+// src/urlConverter.ts
+import url from "node:url";
+import path from "node:path";
+function isLocalPath(filePath) {
+  return typeof filePath === "string" && filePath.length > 0 && filePath.indexOf("//") === -1 && filePath.indexOf("data:") !== 0;
+}
+var urlConverter_default = (newUrlBase, oldUrl, pathOldUrlIsRelativeTo) => {
+  if (!isLocalPath(oldUrl)) {
+    return oldUrl;
+  } else {
+    oldUrl = oldUrl.trim();
+    let relativePath = ".";
+    if (pathOldUrlIsRelativeTo) {
+      const isDirAlready = pathOldUrlIsRelativeTo.endsWith("/");
+      const fileDirName = isDirAlready ? pathOldUrlIsRelativeTo : path.dirname(pathOldUrlIsRelativeTo) + "/";
+      relativePath = url.resolve(fileDirName, oldUrl);
+    } else {
+      relativePath = oldUrl;
+    }
+    if (relativePath.startsWith("/")) {
+      relativePath = relativePath.slice(1);
+    }
+    if (!newUrlBase.endsWith("/")) {
+      newUrlBase += "/";
+    }
+    return url.resolve(newUrlBase, relativePath);
+  }
+};
+
+export {
+  urlConverter_default
+};

package/dist/urlConverter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolve oldUrl against pathOldUrlIsRelativeTo, and then prepend newUrlBase
+ */
+declare const _default: (newUrlBase: string, oldUrl: string, pathOldUrlIsRelativeTo?: string) => string;
+
+export { _default as default };

package/dist/urlConverter.js

@@ -0,0 +1,6 @@
+import {
+  urlConverter_default
+} from "./chunk-ZHBDQZLT.js";
+export {
+  urlConverter_default as default
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@altano/html-cdnify",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Transform the relative URLs in your HTML markup (e.g. scripts, stylesheets, images) to use your CDN URL.",
+  "keywords": [
+    "cdn",
+    "html",
+    "cdnify",
+    "cdnification"
+  ],
+  "files": [
+    "assets/logo.png",
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/altano/npm-packages",
+    "directory": "packages/html-cdnify"
+  },
+  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/html-cdnify",
+  "author": {
+    "name": "Alan Norbauer",
+    "email": "altano@gmail.com",
+    "url": "https://alan.norbauer.com"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "glob": "^10.3.3",
+    "lodash": "^4.17.21",
+    "stream-to-promise": "^3.0.0",
+    "streamifier": "^0.1.1",
+    "trumpet": "^1.7.2"
+  },
+  "devDependencies": {
+    "@types/glob": "^8.1.0",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^20.5.3",
+    "@types/stream-to-promise": "^2.2.1",
+    "@types/streamifier": "^0.1.0",
+    "eslint": "^8.47.0",
+    "prettier": "^3.0.2",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.2",
+    "eslint-config-altano": "0.0.0",
+    "@altano/tsconfig": "0.0.0"
+  },
+  "engines": {
+    "node": ">=5.10.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "dev": "tsup --watch",
+    "format": "prettier --write src",
+    "lint": "eslint src/**/*.ts*",
+    "lint:timing": "TIMING=1 eslint src/**/*.ts*",
+    "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
+    "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
+    "test": "vitest --run"
+  }
+}