@adobe/helix-html-pipeline 1.1.3 → 1.3.0

package/src/steps/rewrite-icons.js

@@ -9,8 +9,9 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
 /* eslint-disable no-param-reassign */
+import { h, s } from 'hastscript';
+import { CONTINUE, visit } from 'unist-util-visit';
 
 const REGEXP_ICON = /:(#?[a-zA-Z_-]+[a-zA-Z0-9]*):/g;
 
@@ -18,55 +19,48 @@ const REGEXP_ICON = /:(#?[a-zA-Z_-]+[a-zA-Z0-9]*):/g;
  * Create a <img> or <svg> icon dom element eg:
  * `<img class="icon icon-smile" src="/icons/smile.svg"/>` or
  * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons.svg#smile"></use></svg>`
- * @param {Document} document the dom document
  * @param {string} value the identifier of the icon
  */
-function createIcon(document, value) {
-  value = encodeURIComponent(value);
+function createIcon(value) {
+  let name = encodeURIComponent(value);
 
   // icon starts with #
-  if (value.startsWith('%23')) {
-    value = value.substring(3);
-    const $el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    $el.classList.add('icon', `icon-${value}`);
-    const $use = document.createElement('use');
-    $use.setAttribute('href', `/icons.svg#${value}`);
-    $el.appendChild($use);
-    return $el;
+  if (name.startsWith('%23')) {
+    name = name.substring(3);
+    return s('svg', { class: `icon icon-${name}` }, [
+      s('use', { href: `/icons.svg#${name}` }),
+    ]);
   }
 
   // create normal image
-  const $el = document.createElement('img');
-  $el.classList.add('icon', `icon-${value}`);
-  $el.setAttribute('src', `/icons/${value}.svg`);
-  $el.setAttribute('alt', `${value} icon`);
-  return $el;
+  return h('img', { class: `icon icon-${name}`, src: `/icons/${name}.svg`, alt: `${name} icon` });
 }
 
 /**
  * Rewrite :icons:
  *
- * @param {Document} document The (vdom) document
+ * @type PipelineStep
+ * @param content
  */
-function rewriteIcons(document) {
-  const { NodeFilter } = document.window;
-  const nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_TEXT,
-  );
-
-  let textNode;
-  // eslint-disable-next-line no-cond-assign
-  while (textNode = nodeIterator.nextNode()) {
-    const text = textNode.data;
+export default function rewrite({ content }) {
+  const { hast } = content;
+  visit(hast, (node, idx, parent) => {
+    if (node.type !== 'text') {
+      return CONTINUE;
+    }
+    const text = node.value;
     let lastIdx = 0;
     for (const match of text.matchAll(REGEXP_ICON)) {
       const [matched, icon] = match;
       const before = text.substring(lastIdx, match.index);
       if (before) {
-        textNode.parentNode.insertBefore(document.createTextNode(before), textNode);
+        // textNode.parentNode.insertBefore(document.createTextNode(before), textNode);
+        parent.children.splice(idx, 0, { type: 'text', value: before });
+        idx += 1;
       }
-      textNode.parentNode.insertBefore(createIcon(document, icon), textNode);
+      // textNode.parentNode.insertBefore(createIcon(document, icon), textNode);
+      parent.children.splice(idx, 0, createIcon(icon));
+      idx += 1;
       lastIdx = match.index + matched.length;
     }
 
@@ -74,20 +68,12 @@ function rewriteIcons(document) {
       // there is still some text left
       const after = text.substring(lastIdx);
       if (after) {
-        textNode.data = after;
+        node.value = after;
       } else {
-        textNode.remove();
+        parent.children.splice(idx, 1);
+        idx -= 1;
       }
     }
-  }
-}
-
-/**
- * @type PipelineStep
- * @param content
- */
-export default function rewrite({ content }) {
-  if (content.document) {
-    rewriteIcons(content.document);
-  }
+    return idx + 1;
+  });
 }

package/src/steps/stringify-response.js

@@ -9,6 +9,9 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import { toHtml } from 'hast-util-to-html';
+// import rehypeFormat from 'rehype-format';
+import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 /**
  * Serializes the response document to HTML
  * @param {PipelineState} state
@@ -25,15 +28,12 @@ export default function stringify(state, req, res) {
   if (!doc) {
     throw Error('no response document');
   }
-  if (doc.serialize) {
-    res.body = doc.serialize();
-  } else if (doc.doctype) {
-    res.body = `<!DOCTYPE ${doc.doctype.name}>${doc.documentElement.outerHTML}`;
-  } else if (doc.documentElement) {
-    res.body = doc.documentElement.outerHTML;
-  } else if (doc.innerHTML) {
-    res.body = doc.innerHTML;
-  } else {
-    throw Error(`unexpected context.response.document: ${doc}`);
-  }
+
+  // TODO: for the next breaking release, pretty print the HTML with rehypeFormat.
+  // TODO: but for backward compatibility, output all on 1 line.
+  // rehypeFormat()(doc);
+  rehypeMinifyWhitespace()(doc);
+  res.body = toHtml(doc, {
+    upperDoctype: true,
+  });
 }

package/src/steps/utils.js

@@ -10,6 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+const AZURE_BLOB_REGEXP = /^https:\/\/hlx\.blob\.core\.windows\.net\/external\//;
+
+const MEDIA_BLOB_REGEXP = /^https:\/\/.*\.hlx3?\.(live|page)\/media_.*/;
+
 /**
  * Returns the original host name from the request to the outer CDN.
  * @param {object} headers The request headers
@@ -51,12 +55,12 @@ export function makeCanonicalHtmlUrl(url) {
 /**
  * Wraps the content of $node with a new $parent node and then appends the new parent to the node.
  *
- * @param {DOMNode} $node The content of the node to wrap
- * @param {DOMNode} $parent The new parent node
+ * @param {Element} $node The content of the node to wrap
+ * @param {Element} $parent The new parent node
  */
 export function wrapContent($parent, $node) {
-  $parent.append(...$node.childNodes);
-  $node.append($parent);
+  $parent.children.push(...$node.children);
+  $node.children = [$parent];
 }
 
 /**
@@ -143,3 +147,21 @@ export function getAbsoluteUrl(headers, url) {
   }
   return resolveUrl(`https://${getOriginalHost(headers)}/`, url);
 }
+
+/**
+ * Rewrite a blog image link. if the link is not a blog image link, it is returned as-is.
+ * @param {string} src the image source
+ * @returns {string} the new source
+ */
+export function rewriteBlobLink(src) {
+  if (AZURE_BLOB_REGEXP.test(src)) {
+    const { pathname, hash } = new URL(src);
+    const filename = pathname.split('/').pop();
+    const extension = hash.split('?').shift().split('.').pop() || 'jpg';
+    return `./media_${filename}.${extension}`;
+  } else if (MEDIA_BLOB_REGEXP.test(src)) {
+    const { pathname } = new URL(src);
+    return `.${pathname}`; // don't append fragment until picture tag supports width/height
+  }
+  return src;
+}

package/src/utils/{table-handler.js → hast-utils.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright 2018 Adobe. All rights reserved.
+ * Copyright 2022 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -9,19 +9,17 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { table as fallback } from 'mdast-util-to-hast/lib/handlers/table.js';
+import { EXIT, visit } from 'unist-util-visit';
 
-export default function table() {
-  return function handler(h, node) {
-    // remove 'none' from align (doesn't occur anymore, maybe leftover from prior versions)
-    if (node.align) {
-      for (let i = 0; i < node.align.length; i += 1) {
-        /* c8 ignore next 3 */
-        if (node.align[i] === 'none') {
-          node.align[i] = null;
-        }
-      }
-    }
-    return fallback(h, node);
-  };
+export function replace(tree, oldNode, newNode) {
+  // $table.parentNode.replaceChild($div, $table);
+  // replace child in parent
+  visit(tree, oldNode, (node, idx, parent) => {
+    parent.children[idx] = newNode;
+    return EXIT;
+  });
+}
+
+export function childNodes(node) {
+  return node.children.filter((n) => n.type === 'element');
 }

package/src/utils/heading-handler.js

@@ -9,34 +9,21 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { heading as fallback } from 'mdast-util-to-hast/lib/handlers/heading.js';
+import { defaultHandlers } from 'mdast-util-to-hast';
 import { toString } from 'mdast-util-to-string';
 import strip from 'strip-markdown';
 
 /**
- * Utility class injects heading identifiers during the MDAST to VDOM transformation.
+ *Injects heading identifiers during the MDAST to VDOM transformation.
  */
-export default class HeadingHandler {
-  /**
-   * Initializes the handler
-   */
-  constructor(slugger) {
-    this.slugger = slugger;
-  }
+export default function heading(slugger) {
+  return function handler(h, node) {
+    // Prepare the heading id
+    const headingIdentifier = slugger.slug(toString(strip()(node)).trim());
 
-  /**
-   * Returns the handler function
-   */
-  handler() {
-    return (h, node) => {
-      // Prepare the heading id
-      const headingIdentifier = this.slugger.slug(toString(strip()(node)));
-
-      // Inject the id after transformation
-      const n = { ...node };
-      const el = fallback(h, n);
-      el.properties.id = el.properties.id || headingIdentifier;
-      return el;
-    };
-  }
+    // Inject the id after transformation
+    const el = defaultHandlers.heading(h, node);
+    el.properties.id = el.properties.id || headingIdentifier;
+    return el;
+  };
 }

package/src/utils/mdast-to-hast.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2018 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { toHast as mdast2hast, defaultHandlers } from 'mdast-util-to-hast';
+import { raw } from 'hast-util-raw';
+import { visit, CONTINUE } from 'unist-util-visit';
+
+import section from './section-handler.js';
+import heading from './heading-handler.js';
+
+/**
+ * Turns the MDAST into a HAST structure
+ * @param {Node} mdast mdast tree
+ * @param {GithubSlugger} slugger github slugger for the heading ids
+ * @returns {Root} the HAST document
+ */
+export default function getHast(mdast, slugger) {
+  const hast = mdast2hast(mdast, {
+    handlers: {
+      ...defaultHandlers,
+      section: section(),
+      heading: heading(slugger),
+    },
+    allowDangerousHtml: true,
+  });
+
+  // TODO: remove for cleanup
+  // the following recreates a bug with the old vdom transformer that would create a
+  // <p></p> for all raw `<p>` before a block with void elements.
+  visit(hast, (node, idx, parent) => {
+    if (node.type !== 'raw' || node.value !== '<p>') {
+      return CONTINUE;
+    }
+    // check if any other raw empty nodes follow until the </p>
+    for (let i = idx + 1; i < parent.children.length; i += 1) {
+      const next = parent.children[i];
+      if (next.type === 'raw') {
+        if (next.value === '</p>') {
+          return i + 1;
+        }
+        if (next.value === '<br>' || next.value.startsWith('<img ')) {
+          node.value = '<p></p>';
+          return i + 1;
+        }
+      }
+    }
+    /* c8 ignore next */
+    return CONTINUE;
+  });
+
+  return raw(hast);
+}

package/src/utils/path.js

@@ -20,7 +20,10 @@ export function getPathInfo(path) {
     // eslint-disable-next-line no-param-reassign
     path = '/';
   }
-  const segs = path.split(/\/+/);
+  if (path.match(/\/\/+/)) {
+    return null;
+  }
+  const segs = path.split('/');
   segs.shift(); // remove _emptyness_ before first slash
   if (segs.length < 1) {
     return null;

package/src/utils/section-handler.js

@@ -10,7 +10,6 @@
  * governing permissions and limitations under the License.
  */
 import { all } from 'mdast-util-to-hast';
-import { wrap } from 'mdast-util-to-hast/lib/wrap.js';
 
 const HELIX_NAMESPACE = 'hlx-';
 const DEFAULT_SECTION_TAG = 'div';
@@ -61,9 +60,12 @@ export default function sectionHandler() {
 
     const tagName = getTagName(n);
     const props = getAttributes(n);
-    props.class = props.class ? `${DEFAULT_SECTION_CLASS} ${props.class}` : DEFAULT_SECTION_CLASS;
-    const children = wrap(all(h, n), true);
-
+    props.className = [DEFAULT_SECTION_CLASS];
+    if (props.class) {
+      props.className.push(...props.class.split(/\s+/));
+    }
+    delete props.class;
+    const children = all(h, n);
     return h(node, tagName, props, children);
   };
 }

package/src/utils/hast-util-to-dom.js

@@ -1,190 +0,0 @@
-/*
- * (ISC License)
- *
- * Copyright (c) 2018 Keith McKnight <keith@mcknig.ht>
- *
- * Permission to use, copy, modify, and/or distribute this software for any purpose
- * with or without fee is hereby granted, provided that the above copyright notice
- * and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
- * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
- * FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
- * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
- * OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
- * TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
- * THIS SOFTWARE.
- */
-
-// This was copied from https://github.com/syntax-tree/hast-util-to-dom/blob/master/src/index.js
-// and adapted so that it can be used with JSDOM
-// TODO: contribute back to original
-
-/* eslint-disable header/header */
-import { find as infoFind, html as infoHtml } from 'property-information';
-
-const ns = {
-  html: 'http://www.w3.org/1999/xhtml',
-};
-/* istanbul ignore next */
-const wrap = (document) => {
-  // Add all children.
-  function appendAll(node, children, options) {
-    const childrenLength = children.length;
-
-    for (let i = 0; i < childrenLength; i += 1) {
-      // eslint-disable-next-line no-use-before-define
-      node.appendChild(transform(children[i], options));
-    }
-
-    return node;
-  }
-
-  // Create a document.
-  function root(node, options) {
-    const { fragment, namespace: optionsNamespace } = options;
-    const { children = [] } = node;
-    const { length: childrenLength } = children;
-
-    let namespace = optionsNamespace;
-    let rootIsDocument = childrenLength === 0;
-
-    for (let i = 0; i < childrenLength; i += 1) {
-      const { tagName, properties = {} } = children[i];
-
-      /* c8 ignore start */
-      if (tagName === 'html') {
-        // If we have a root HTML node, we don’t need to render as a fragment.
-        rootIsDocument = true;
-
-        // Take namespace of the first child.
-        if (typeof optionsNamespace === 'undefined') {
-          namespace = properties.xmlns || ns.html;
-        }
-      }
-      /* c8 ignore end */
-    }
-
-    // The root node will be a Document, DocumentFragment, or HTMLElement.
-    let el;
-
-    if (rootIsDocument) {
-      el = document.implementation.createDocument(namespace, '', null);
-    } else if (fragment) {
-      el = document.createDocumentFragment();
-    } else {
-      /* c8 ignore next */
-      el = document.createElement('html');
-    }
-
-    return appendAll(el, children, { fragment, namespace, ...options });
-  }
-
-  // Create a `doctype`.
-  function doctype(node) {
-    return document.implementation.createDocumentType(
-      node.name || 'html',
-      node.public || '',
-      node.system || '',
-    );
-  }
-
-  // Create a `text`.
-  function text(node) {
-    return document.createTextNode(node.value);
-  }
-
-  // Create a `comment`.
-  function comment(node) {
-    return document.createComment(node.value);
-  }
-
-  // Create an `element`.
-  function element(node, options) {
-    const { namespace } = options;
-    // TODO: use `g` in SVG space.
-    const { tagName = 'div', properties = {}, children = [] } = node;
-    const el = typeof namespace !== 'undefined'
-      ? document.createElementNS(namespace, tagName)
-      : document.createElement(tagName);
-
-    // Add HTML attributes.
-    const props = Object.keys(properties);
-    const { length } = props;
-
-    for (let i = 0; i < length; i += 1) {
-      const key = props[i];
-
-      const {
-        attribute,
-        property,
-        // `mustUseAttribute`,
-        mustUseProperty,
-        boolean,
-        booleanish,
-        overloadedBoolean,
-        // `number`,
-        // `defined`,
-        commaSeparated,
-        // `spaceSeparated`,
-        // `commaOrSpaceSeparated`,
-      } = infoFind(infoHtml, key);
-
-      let value = properties[key];
-
-      if (Array.isArray(value)) {
-        value = value.join(commaSeparated ? ', ' : ' ');
-      }
-
-      if (mustUseProperty) {
-        el[property] = value;
-      }
-
-      if (boolean || (overloadedBoolean && typeof value === 'boolean')) {
-        if (value) {
-          el.setAttribute(attribute, '');
-        } else {
-          el.removeAttribute(attribute);
-        }
-      } else if (booleanish) {
-        el.setAttribute(attribute, value);
-      } else if (value === true) {
-        el.setAttribute(attribute, '');
-      } else if (value || value === 0 || value === '') {
-        el.setAttribute(attribute, value);
-      }
-    }
-
-    return appendAll(el, children, options);
-  }
-
-  // the raw node is stored in the value directly
-  function raw(node) {
-    return node.frag;
-  }
-
-  function transform(node, options) {
-    switch (node.type) {
-      case 'root':
-        return root(node, options);
-      case 'text':
-        return text(node);
-      case 'element':
-        return element(node, options);
-      case 'doctype':
-        return doctype(node);
-      case 'comment':
-        return comment(node);
-      case 'raw':
-        return raw(node);
-      default:
-        return element(node, options);
-    }
-  }
-
-  return transform;
-};
-
-export default function toDOM(document, hast, options = {}) {
-  return wrap(document)(hast, options);
-}

package/src/utils/icon-handler.js

@@ -1,40 +0,0 @@
-/*
- * Copyright 2019 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * Handles `icon` MDAST nodes by converting them into `img` or `<svg>` tags, e.g.
- * `<img class="icon icon-smile" src="/icons/smile.svg"/>` or
- * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons.svg#smile"></use></svg>`
- * @param {string} id the identifier of the icon
- */
-export default function icon() {
-  return function handler(h, node) {
-    let { value } = node;
-    value = encodeURIComponent(value);
-    if (value.startsWith('%23')) {
-      // icon starts with #
-      value = value.substring(3);
-      return [h(node, 'svg', {
-        xmlns: 'http://www.w3.org/2000/svg',
-        className: `icon icon-${value}`,
-      }, [h(node, 'use', {
-        href: `/icons.svg#${value}`,
-      })])];
-    } else {
-      return [h(node, 'img', {
-        className: `icon icon-${value}`,
-        src: `/icons/${value}.svg`,
-        alt: `${value} icon`,
-      })];
-    }
-  };
-}

package/src/utils/link-handler.js

@@ -1,25 +0,0 @@
-/*
- * Copyright 2018 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-import { link as fallback } from 'mdast-util-to-hast/lib/handlers/link.js';
-import { parse, serialize } from 'uri-js';
-
-export default function link({ extension = 'html' } = {}) {
-  return function handler(h, node) {
-    const n = { ...node };
-    const uriParts = parse(n.url);
-    if (!uriParts.scheme && uriParts.path) {
-      uriParts.path = uriParts.path.replace(/\.md$/, `.${extension}`);
-      n.url = serialize(uriParts, { absolutePath: true });
-    }
-    return fallback(h, n);
-  };
-}