@jsenv/ast 3.0.6 → 3.0.8

package/src/html/html_inlining.js

@@ -1,22 +1,22 @@
 import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
-} from "./html_node_attributes.js"
-import { setHtmlNodeText } from "./html_node_text.js"
+} from "./html_node_attributes.js";
+import { setHtmlNodeText } from "./html_node_text.js";
 
 export const inlineScriptNode = (script, textContent) => {
-  const src = getHtmlNodeAttribute(script, "src")
+  const src = getHtmlNodeAttribute(script, "src");
   setHtmlNodeAttributes(script, {
     "inlined-from-src": src,
     "src": undefined,
     "crossorigin": undefined,
     "integrity": undefined,
-  })
-  setHtmlNodeText(script, textContent)
-}
+  });
+  setHtmlNodeText(script, textContent);
+};
 
 export const inlineLinkStylesheetNode = (link, textContent) => {
-  const href = getHtmlNodeAttribute(link, "href")
+  const href = getHtmlNodeAttribute(link, "href");
   setHtmlNodeAttributes(link, {
     "inlined-from-href": href,
     "href": undefined,
@@ -25,16 +25,16 @@ export const inlineLinkStylesheetNode = (link, textContent) => {
     "as": undefined,
     "crossorigin": undefined,
     "integrity": undefined,
-  })
-  link.nodeName = "style"
-  link.tagName = "style"
-  setHtmlNodeText(link, textContent)
-}
+  });
+  link.nodeName = "style";
+  link.tagName = "style";
+  setHtmlNodeText(link, textContent);
+};
 
 export const inlineImgNode = (img, contentAsBase64) => {
-  const src = getHtmlNodeAttribute(img, "src")
+  const src = getHtmlNodeAttribute(img, "src");
   setHtmlNodeAttributes(img, {
     "inlined-from-src": src,
     "src": contentAsBase64,
-  })
-}
+  });
+};

package/src/html/html_node.js

@@ -1,157 +1,192 @@
-import { parseFragment } from "parse5"
+import { parseFragment } from "parse5";
 
-import { setHtmlNodeAttributes } from "./html_node_attributes.js"
-import { findHtmlNode } from "./html_search.js"
-import { analyzeScriptNode } from "./html_analysis.js"
+import { setHtmlNodeAttributes } from "./html_node_attributes.js";
+import { findHtmlNode } from "./html_search.js";
+import { analyzeScriptNode } from "./html_analysis.js";
+import {
+  getIndentation,
+  increaseIndentation,
+  getHtmlNodeText,
+  setHtmlNodeText,
+} from "./html_node_text.js";
 
 export const removeHtmlNode = (htmlNode) => {
-  const { childNodes } = htmlNode.parentNode
-  childNodes.splice(childNodes.indexOf(htmlNode), 1)
-}
+  const { childNodes } = htmlNode.parentNode;
+  childNodes.splice(childNodes.indexOf(htmlNode), 1);
+};
 
 export const createHtmlNode = ({ tagName, textContent = "", ...rest }) => {
   const html = `<${tagName} ${stringifyAttributes(
     rest,
-  )}>${textContent}</${tagName}>`
-  const fragment = parseFragment(html)
-  return fragment.childNodes[0]
-}
+  )}>${textContent}</${tagName}>`;
+  const fragment = parseFragment(html);
+  return fragment.childNodes[0];
+};
 
 export const injectHtmlNode = (htmlAst, node, jsenvPluginName = "jsenv") => {
   setHtmlNodeAttributes(node, {
     "jsenv-injected-by": jsenvPluginName,
-  })
-  const htmlHtmlNode = findChild(htmlAst, (node) => node.nodeName === "html")
-  const bodyNode = findChild(htmlHtmlNode, (node) => node.nodeName === "body")
-  return insertHtmlNodeAfter(node, bodyNode)
-}
+  });
+  const htmlNode = findChild(htmlAst, (node) => node.nodeName === "html");
+  const bodyNode = findChild(htmlNode, (node) => node.nodeName === "body");
+  let after;
+  if (node.nodeName !== "#text") {
+    // last child that is not a text
+    for (const child of bodyNode.childNodes) {
+      if (child.nodeName !== "#text") {
+        after = child;
+        break;
+      }
+      after = child;
+    }
+  }
+  if (after) {
+    insertHtmlNodeAfter(node, after);
+  } else {
+    injectWithWhitespaces(node, bodyNode, 0);
+  }
+};
 
-export const injectScriptNodeAsEarlyAsPossible = (
+export const injectHtmlNodeAsEarlyAsPossible = (
   htmlAst,
-  scriptNode,
+  node,
   jsenvPluginName = "jsenv",
 ) => {
-  setHtmlNodeAttributes(scriptNode, {
+  setHtmlNodeAttributes(node, {
     "jsenv-injected-by": jsenvPluginName,
-  })
-  const isJsModule = analyzeScriptNode(scriptNode).type === "js_module"
-  if (isJsModule) {
-    const firstImportmapScript = findHtmlNode(htmlAst, (node) => {
-      return (
-        node.nodeName === "script" &&
-        analyzeScriptNode(node).type === "importmap"
-      )
-    })
-
-    if (firstImportmapScript) {
-      const importmapParent = firstImportmapScript.parentNode
-      const importmapSiblings = importmapParent.childNodes
-      const nextSiblings = importmapSiblings.slice(
-        importmapSiblings.indexOf(firstImportmapScript) + 1,
-      )
-      let after = firstImportmapScript
-      for (const nextSibling of nextSiblings) {
-        if (nextSibling.nodeName === "script") {
-          return insertHtmlNodeBefore(scriptNode, importmapParent, nextSibling)
-        }
-        if (nextSibling.nodeName === "link") {
-          after = nextSibling
+  });
+  const isScript = node.nodeName === "script";
+
+  if (isScript) {
+    const isJsModule = analyzeScriptNode(node).type === "js_module";
+    if (isJsModule) {
+      const firstImportmapScript = findHtmlNode(htmlAst, (node) => {
+        return (
+          node.nodeName === "script" &&
+          analyzeScriptNode(node).type === "importmap"
+        );
+      });
+
+      if (firstImportmapScript) {
+        const importmapParent = firstImportmapScript.parentNode;
+        const importmapSiblings = importmapParent.childNodes;
+        const nextSiblings = importmapSiblings.slice(
+          importmapSiblings.indexOf(firstImportmapScript) + 1,
+        );
+        let after = firstImportmapScript;
+        for (const nextSibling of nextSiblings) {
+          if (nextSibling.nodeName === "script") {
+            insertHtmlNodeBefore(node, nextSibling);
+            return;
+          }
+          if (nextSibling.nodeName === "link") {
+            after = nextSibling;
+          }
         }
+        insertHtmlNodeAfter(node, after);
+        return;
       }
-      return insertHtmlNodeAfter(scriptNode, importmapParent, after)
     }
-  }
-  const headNode = findChild(htmlAst, (node) => node.nodeName === "html")
-    .childNodes[0]
-  let after = headNode.childNodes[0]
-  for (const child of headNode.childNodes) {
-    if (child.nodeName === "script") {
-      return insertHtmlNodeBefore(scriptNode, headNode, child)
+    const headNode = findChild(htmlAst, (node) => node.nodeName === "html")
+      .childNodes[0];
+    let after = headNode.childNodes[0];
+    for (const child of headNode.childNodes) {
+      if (child.nodeName === "script") {
+        insertHtmlNodeBefore(node, child);
+        return;
+      }
+      if (child.nodeName === "link") {
+        after = child;
+      }
     }
-    if (child.nodeName === "link") {
-      after = child
+    if (after) {
+      insertHtmlNodeAfter(node, after);
     }
+    return;
   }
-  return insertHtmlNodeAfter(scriptNode, headNode, after)
-}
 
-export const insertHtmlNodeBefore = (
-  nodeToInsert,
-  futureParentNode,
-  futureNextSibling,
-) => {
-  const { childNodes = [] } = futureParentNode
-  const futureIndex = futureNextSibling
-    ? childNodes.indexOf(futureNextSibling)
-    : 0
-  injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex)
-}
-
-export const insertHtmlNodeAfter = (
-  nodeToInsert,
-  futureParentNode,
-  futurePrevSibling,
-) => {
-  const { childNodes = [] } = futureParentNode
-  const futureIndex = futurePrevSibling
-    ? childNodes.indexOf(futurePrevSibling) + 1
-    : childNodes.length
-  injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex)
-}
+  injectHtmlNode(htmlAst, node);
+  return;
+};
+
+export const insertHtmlNodeBefore = (nodeToInsert, futureNextSibling) => {
+  const futureParentNode = futureNextSibling.parentNode;
+  const { childNodes = [] } = futureParentNode;
+  const futureIndex = childNodes.indexOf(futureNextSibling);
+  injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex);
+};
+
+export const insertHtmlNodeAfter = (nodeToInsert, futurePrevSibling) => {
+  const futureParentNode = futurePrevSibling.parentNode;
+  const { childNodes = [] } = futureParentNode;
+  const futureIndex = childNodes.indexOf(futurePrevSibling) + 1;
+  injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex);
+};
 
 const injectWithWhitespaces = (nodeToInsert, futureParentNode, futureIndex) => {
-  const { childNodes = [] } = futureParentNode
-  const previousSiblings = childNodes.slice(0, futureIndex)
-  const nextSiblings = childNodes.slice(futureIndex)
-  const futureChildNodes = []
-  const previousSibling = previousSiblings[previousSiblings.length - 1]
-  if (previousSibling) {
-    futureChildNodes.push(...previousSiblings)
+  const { childNodes = [] } = futureParentNode;
+  const previousSiblings = childNodes.slice(0, futureIndex);
+  const nextSiblings = childNodes.slice(futureIndex);
+  const futureChildNodes = [];
+
+  if (previousSiblings.length) {
+    futureChildNodes.push(...previousSiblings);
   }
-  if (!previousSibling || !isWhitespaceNode(previousSibling)) {
+  const previousSibling = childNodes[futureIndex - 1];
+  if (
+    nodeToInsert.nodeName !== "#text" &&
+    (!previousSibling || !isWhitespaceNode(previousSibling))
+  ) {
+    let indentation;
+    if (childNodes.length) {
+      indentation = getIndentation(childNodes[childNodes.length - 1]);
+    } else {
+      const parentIndentation = getIndentation(futureParentNode);
+      indentation = increaseIndentation(parentIndentation, 2);
+    }
     futureChildNodes.push({
       nodeName: "#text",
-      value: "\n    ",
+      value: `\n${indentation}`,
       parentNode: futureParentNode,
-    })
+    });
   }
-  futureChildNodes.push(nodeToInsert)
-  const nextSibling = nextSiblings[0]
-  if (!nextSibling || !isWhitespaceNode(nextSibling)) {
-    futureChildNodes.push({
-      nodeName: "#text",
-      value: "\n    ",
-      parentNode: futureParentNode,
-    })
+  futureChildNodes.push(nodeToInsert);
+  nodeToInsert.parentNode = futureParentNode;
+  if (nextSiblings.length) {
+    futureChildNodes.push(...nextSiblings);
   }
-  if (nextSibling) {
-    futureChildNodes.push(...nextSiblings)
+  futureParentNode.childNodes = futureChildNodes;
+
+  // update indentation when node contains text
+  const text = getHtmlNodeText(nodeToInsert);
+  if (text) {
+    setHtmlNodeText(nodeToInsert, text, { indentation: "auto" });
   }
-  futureParentNode.childNodes = futureChildNodes
-}
+};
 
 const isWhitespaceNode = (node) => {
-  if (node.nodeName !== "#text") return false
-  if (node.value.length === 0) return false
-  return /^\s+$/.test(node.value)
-}
+  if (node.nodeName !== "#text") return false;
+  if (node.value.length === 0) return false;
+  return /^\s+$/.test(node.value);
+};
 
-const findChild = ({ childNodes = [] }, predicate) => childNodes.find(predicate)
+const findChild = ({ childNodes = [] }, predicate) =>
+  childNodes.find(predicate);
 
 const stringifyAttributes = (object) => {
-  let string = ""
+  let string = "";
   Object.keys(object).forEach((key) => {
-    const value = object[key]
-    if (value === undefined) return
-    if (string !== "") string += " "
-    string += `${key}=${valueToHtmlAttributeValue(value)}`
-  })
-  return string
-}
+    const value = object[key];
+    if (value === undefined) return;
+    if (string !== "") string += " ";
+    string += `${key}=${valueToHtmlAttributeValue(value)}`;
+  });
+  return string;
+};
 
 const valueToHtmlAttributeValue = (value) => {
   if (typeof value === "string") {
-    return JSON.stringify(value)
+    return JSON.stringify(value);
   }
-  return `"${JSON.stringify(value)}"`
-}
+  return `"${JSON.stringify(value)}"`;
+};

package/src/html/html_node_attributes.js

@@ -1,43 +1,43 @@
 export const getHtmlNodeAttribute = (htmlNode, attributeName) => {
-  const attribute = getHtmlAttributeByName(htmlNode, attributeName)
-  return attribute ? attribute.value || "" : undefined
-}
+  const attribute = getHtmlAttributeByName(htmlNode, attributeName);
+  return attribute ? attribute.value || "" : undefined;
+};
 
 export const setHtmlNodeAttributes = (htmlNode, attributesToAssign) => {
   if (typeof attributesToAssign !== "object") {
-    throw new TypeError(`attributesToAssign must be an object`)
+    throw new TypeError(`attributesToAssign must be an object`);
   }
-  const { attrs } = htmlNode
-  if (!attrs) return
+  const { attrs } = htmlNode;
+  if (!attrs) return;
   Object.keys(attributesToAssign).forEach((key) => {
-    const existingAttributeIndex = attrs.findIndex(({ name }) => name === key)
-    const value = attributesToAssign[key]
+    const existingAttributeIndex = attrs.findIndex(({ name }) => name === key);
+    const value = attributesToAssign[key];
     // remove no-op
     if (existingAttributeIndex === -1 && value === undefined) {
-      return
+      return;
     }
     // add
     if (existingAttributeIndex === -1 && value !== undefined) {
       attrs.push({
         name: key,
         value,
-      })
-      return
+      });
+      return;
     }
     // remove
     if (value === undefined) {
-      attrs.splice(existingAttributeIndex, 1)
-      return
+      attrs.splice(existingAttributeIndex, 1);
+      return;
     }
     // update
-    attrs[existingAttributeIndex].value = value
-  })
-}
+    attrs[existingAttributeIndex].value = value;
+  });
+};
 
 const getHtmlAttributeByName = (htmlNode, attributeName) => {
-  const attrs = htmlNode.attrs
+  const attrs = htmlNode.attrs;
   const attribute = attrs
     ? attrs.find((attr) => attr.name === attributeName)
-    : null
-  return attribute
-}
+    : null;
+  return attribute;
+};

package/src/html/html_node_position.js

@@ -1,99 +1,99 @@
 import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
-} from "./html_node_attributes.js"
+} from "./html_node_attributes.js";
 
 export const storeHtmlNodePosition = (node) => {
-  const originalPositionAttributeName = `original-position`
+  const originalPositionAttributeName = `original-position`;
   const originalPosition = getHtmlNodeAttribute(
     node,
     originalPositionAttributeName,
-  )
+  );
   if (originalPosition !== undefined) {
-    return true
+    return true;
   }
-  const { sourceCodeLocation } = node
+  const { sourceCodeLocation } = node;
   if (!sourceCodeLocation) {
-    return false
+    return false;
   }
-  const { startLine, startCol, endLine, endCol } = sourceCodeLocation
+  const { startLine, startCol, endLine, endCol } = sourceCodeLocation;
   setHtmlNodeAttributes(node, {
     [originalPositionAttributeName]: `${startLine}:${startCol};${endLine}:${endCol}`,
-  })
-  return true
-}
+  });
+  return true;
+};
 export const storeHtmlNodeAttributePosition = (node, attributeName) => {
-  const { sourceCodeLocation } = node
+  const { sourceCodeLocation } = node;
   if (!sourceCodeLocation) {
-    return false
+    return false;
   }
-  const attributeValue = getHtmlNodeAttribute(node, attributeName)
+  const attributeValue = getHtmlNodeAttribute(node, attributeName);
   if (attributeValue === undefined) {
-    return false
+    return false;
   }
-  const attributeLocation = sourceCodeLocation.attrs[attributeName]
+  const attributeLocation = sourceCodeLocation.attrs[attributeName];
   if (!attributeLocation) {
-    return false
+    return false;
   }
-  const originalPositionAttributeName = `original-${attributeName}-position`
+  const originalPositionAttributeName = `original-${attributeName}-position`;
   const originalPosition = getHtmlNodeAttribute(
     node,
     originalPositionAttributeName,
-  )
+  );
   if (originalPosition !== undefined) {
-    return true
+    return true;
   }
-  const { startLine, startCol, endLine, endCol } = attributeLocation
+  const { startLine, startCol, endLine, endCol } = attributeLocation;
   setHtmlNodeAttributes(node, {
     [originalPositionAttributeName]: `${startLine}:${startCol};${endLine}:${endCol}`,
-  })
-  return true
-}
+  });
+  return true;
+};
 
 export const getHtmlNodePosition = (node, { preferOriginal = false } = {}) => {
-  const position = {}
-  const { sourceCodeLocation } = node
+  const position = {};
+  const { sourceCodeLocation } = node;
   if (sourceCodeLocation) {
-    const { startLine, startCol, endLine, endCol } = sourceCodeLocation
+    const { startLine, startCol, endLine, endCol } = sourceCodeLocation;
     Object.assign(position, {
       line: startLine,
       lineEnd: endLine,
       column: startCol,
       columnEnd: endCol,
-    })
+    });
   }
-  const originalPosition = getHtmlNodeAttribute(node, "original-position")
+  const originalPosition = getHtmlNodeAttribute(node, "original-position");
   if (originalPosition === undefined) {
-    return position
+    return position;
   }
-  const [start, end] = originalPosition.split(";")
-  const [originalLine, originalColumn] = start.split(":")
-  const [originalLineEnd, originalColumnEnd] = end.split(":")
+  const [start, end] = originalPosition.split(";");
+  const [originalLine, originalColumn] = start.split(":");
+  const [originalLineEnd, originalColumnEnd] = end.split(":");
   Object.assign(position, {
     originalLine: parseInt(originalLine),
     originalColumn: parseInt(originalColumn),
     originalLineEnd: parseInt(originalLineEnd),
     originalColumnEnd: parseInt(originalColumnEnd),
-  })
+  });
   if (preferOriginal) {
-    position.line = position.originalLine
-    position.column = position.originalColumn
-    position.lineEnd = position.originalLineEnd
-    position.columnEnd = position.originalColumnEnd
-    position.isOriginal = true
+    position.line = position.originalLine;
+    position.column = position.originalColumn;
+    position.lineEnd = position.originalLineEnd;
+    position.columnEnd = position.originalColumnEnd;
+    position.isOriginal = true;
   }
-  return position
-}
+  return position;
+};
 export const getHtmlNodeAttributePosition = (node, attributeName) => {
-  const position = {}
-  const { sourceCodeLocation } = node
+  const position = {};
+  const { sourceCodeLocation } = node;
   if (sourceCodeLocation) {
-    const attributeLocation = sourceCodeLocation.attrs[attributeName]
+    const attributeLocation = sourceCodeLocation.attrs[attributeName];
     if (attributeLocation) {
       Object.assign(position, {
         line: attributeLocation.startLine,
         column: attributeLocation.startCol,
-      })
+      });
     }
   }
   const originalPositionAttributeName =
@@ -101,22 +101,22 @@ export const getHtmlNodeAttributePosition = (node, attributeName) => {
       ? "original-src-position"
       : attributeName === "inlined-from-href"
       ? "original-href-position"
-      : `original-${attributeName}-position`
+      : `original-${attributeName}-position`;
   const originalPosition = getHtmlNodeAttribute(
     node,
     originalPositionAttributeName,
-  )
+  );
   if (originalPosition === undefined) {
-    return position
+    return position;
   }
-  const [start, end] = originalPosition.split(";")
-  const [originalLine, originalColumn] = start.split(":")
-  const [originalLineEnd, originalColumnEnd] = end.split(":")
+  const [start, end] = originalPosition.split(";");
+  const [originalLine, originalColumn] = start.split(":");
+  const [originalLineEnd, originalColumnEnd] = end.split(":");
   Object.assign(position, {
     originalLine: parseInt(originalLine),
     originalColumn: parseInt(originalColumn),
     originalLineEnd: parseInt(originalLineEnd),
     originalColumnEnd: parseInt(originalColumnEnd),
-  })
-  return position
-}
+  });
+  return position;
+};