@jsenv/ast 3.0.6 → 3.0.7

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@jsenv/ast",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Parse and transform HTML,CSS and JS",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/jsenv/jsenv-core",
+    "url": "https://github.com/jsenv/core",
     "directory": "packages/ast"
   },
   "publishConfig": {
@@ -33,12 +33,12 @@
     "test": "node --conditions=development ./scripts/test.mjs"
   },
   "dependencies": {
-    "@babel/parser": "7.21.4",
+    "@babel/parser": "7.21.8",
     "acorn": "8.8.2",
     "acorn-import-assertions": "1.8.0",
     "acorn-walk": "8.2.0",
     "parse5": "7.1.2",
-    "postcss": "8.4.22",
+    "postcss": "8.4.23",
     "postcss-value-parser": "4.2.0"
   }
 }

package/src/html/html_node.js

@@ -3,6 +3,12 @@ import { parseFragment } from "parse5"
 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
@@ -21,81 +27,93 @@ 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
+    }
+  }
+  insertHtmlNodeAfter(node, after)
 }
 
-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"
-      )
-    })
+  const isScript = node.nodeName === "script"
 
-    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
+  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)
     }
-    if (child.nodeName === "link") {
-      after = 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
+      }
     }
+    insertHtmlNodeAfter(node, after)
+    return
   }
-  return insertHtmlNodeAfter(scriptNode, headNode, after)
+
+  injectHtmlNode(htmlAst, node)
+  return
 }
 
-export const insertHtmlNodeBefore = (
-  nodeToInsert,
-  futureParentNode,
-  futureNextSibling,
-) => {
+export const insertHtmlNodeBefore = (nodeToInsert, futureNextSibling) => {
+  const futureParentNode = futureNextSibling.parentNode
   const { childNodes = [] } = futureParentNode
-  const futureIndex = futureNextSibling
-    ? childNodes.indexOf(futureNextSibling)
-    : 0
+  const futureIndex = childNodes.indexOf(futureNextSibling)
   injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex)
 }
 
-export const insertHtmlNodeAfter = (
-  nodeToInsert,
-  futureParentNode,
-  futurePrevSibling,
-) => {
+export const insertHtmlNodeAfter = (nodeToInsert, futurePrevSibling) => {
+  const futureParentNode = futurePrevSibling.parentNode
   const { childNodes = [] } = futureParentNode
-  const futureIndex = futurePrevSibling
-    ? childNodes.indexOf(futurePrevSibling) + 1
-    : childNodes.length
+  const futureIndex = childNodes.indexOf(futurePrevSibling) + 1
   injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex)
 }
 
@@ -104,30 +122,40 @@ const injectWithWhitespaces = (nodeToInsert, futureParentNode, futureIndex) => {
   const previousSiblings = childNodes.slice(0, futureIndex)
   const nextSiblings = childNodes.slice(futureIndex)
   const futureChildNodes = []
-  const previousSibling = previousSiblings[previousSiblings.length - 1]
-  if (previousSibling) {
+
+  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,
-    })
-  }
-  if (nextSibling) {
+  nodeToInsert.parentNode = futureParentNode
+  if (nextSiblings.length) {
     futureChildNodes.push(...nextSiblings)
   }
   futureParentNode.childNodes = futureChildNodes
+
+  // update indentation when node contains text
+  const text = getHtmlNodeText(nodeToInsert)
+  if (text) {
+    setHtmlNodeText(nodeToInsert, text, { indentation: "auto" })
+  }
 }
 
 const isWhitespaceNode = (node) => {

package/src/html/html_node_text.js

@@ -1,9 +1,17 @@
+import {
+  getHtmlNodeAttribute,
+  setHtmlNodeAttributes,
+} from "./html_node_attributes.js"
+
 export const getHtmlNodeText = (htmlNode) => {
   const textNode = getTextNode(htmlNode)
   return textNode ? textNode.value : undefined
 }
 
 const getTextNode = (htmlNode) => {
+  if (htmlNode.nodeName === "#text") {
+    return null
+  }
   const firstChild = htmlNode.childNodes[0]
   const textNode =
     firstChild && firstChild.nodeName === "#text" ? firstChild : null
@@ -17,7 +25,24 @@ export const removeHtmlNodeText = (htmlNode) => {
   }
 }
 
-export const setHtmlNodeText = (htmlNode, textContent) => {
+export const setHtmlNodeText = (
+  htmlNode,
+  textContent,
+  { indentation } = {},
+) => {
+  if (indentation === "auto") {
+    const contentIndentedAttribute = getHtmlNodeAttribute(
+      htmlNode,
+      "content-indented",
+    )
+    if (contentIndentedAttribute === undefined) {
+      const indentation = getIndentation(htmlNode)
+      textContent = setIndentation(textContent, indentation)
+      setHtmlNodeAttributes(htmlNode, {
+        "content-indented": "",
+      })
+    }
+  }
   const textNode = getTextNode(htmlNode)
   if (textNode) {
     textNode.value = textContent
@@ -30,3 +55,64 @@ export const setHtmlNodeText = (htmlNode, textContent) => {
     htmlNode.childNodes.splice(0, 0, newTextNode)
   }
 }
+
+export const getIndentation = (htmlNode) => {
+  const parentNode = htmlNode.parentNode
+  if (!parentNode) {
+    return ""
+  }
+
+  const siblings = parentNode.childNodes
+  const index = siblings.indexOf(htmlNode)
+  if (index === 0) {
+    if (htmlNode.nodeName === "#text") {
+      return extractIndentation(htmlNode)
+    }
+    return ""
+  }
+
+  let textNodeIndex = 0
+  let textNode
+  while (textNodeIndex !== index) {
+    const previousSibling = siblings[textNodeIndex]
+    textNodeIndex++
+    if (previousSibling.nodeName === "#text") {
+      textNode = previousSibling
+      break
+    }
+  }
+  if (!textNode) {
+    return ""
+  }
+
+  return extractIndentation(textNode)
+}
+
+const extractIndentation = (textNode) => {
+  const text = textNode.value
+  const lines = text.split(/\r?\n/)
+  const lastLine = lines[lines.length - 1]
+  if (lastLine.match(/^[\t ]+$/)) {
+    return lastLine
+  }
+  return ""
+}
+
+const setIndentation = (htmlNodeText, indentation) => {
+  const contentIdentation = increaseIndentation(indentation, 2)
+  const lines = htmlNodeText.trimEnd().split(/\r?\n/)
+  let result = `\n`
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i]
+    i++
+    result += `${contentIdentation}${line}\n`
+  }
+  result += `${indentation}`
+  return result
+}
+
+export const increaseIndentation = (indentation, size) => {
+  const char = indentation[0]
+  return char ? `${indentation}${char.repeat(size)}` : " ".repeat(size)
+}

package/src/html/html_parse.js

@@ -1,5 +1,6 @@
 import { parse, serialize, parseFragment } from "parse5"
 
+import { insertHtmlNodeAfter, insertHtmlNodeBefore } from "./html_node.js"
 import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
@@ -40,14 +41,29 @@ export const parseHtmlString = (
       })
     }
   }
+  const htmlNode = htmlAst.childNodes.find((node) => node.nodeName === "html")
+  if (htmlNode) {
+    const bodyNode = htmlNode.childNodes.find(
+      (node) => node.nodeName === "body",
+    )
+    // for some reason "parse5" adds "\n\n" to the last text node of <body>
+    const lastBodyNode = bodyNode.childNodes[bodyNode.childNodes.length - 1]
+    if (
+      lastBodyNode &&
+      lastBodyNode.nodeName === "#text" &&
+      lastBodyNode.value.endsWith("\n\n")
+    ) {
+      lastBodyNode.value = lastBodyNode.value.slice(0, -2)
+    }
+  }
   return htmlAst
 }
 
 export const stringifyHtmlAst = (
   htmlAst,
-  { cleanupJsenvAttributes = false } = {},
+  { cleanupJsenvAttributes = false, cleanupPositionAttributes = false } = {},
 ) => {
-  if (cleanupJsenvAttributes) {
+  if (cleanupJsenvAttributes || cleanupPositionAttributes) {
     const htmlNode = findHtmlChildNode(
       htmlAst,
       (node) => node.nodeName === "html",
@@ -66,21 +82,77 @@ export const stringifyHtmlAst = (
             "original-position": undefined,
             "original-src-position": undefined,
             "original-href-position": undefined,
-            "inlined-from-src": undefined,
-            "inlined-from-href": undefined,
-            "jsenv-cooked-by": undefined,
-            "jsenv-inlined-by": undefined,
-            "jsenv-injected-by": undefined,
-            "jsenv-debug": undefined,
+            ...(cleanupJsenvAttributes
+              ? {
+                  "inlined-from-src": undefined,
+                  "inlined-from-href": undefined,
+                  "jsenv-cooked-by": undefined,
+                  "jsenv-inlined-by": undefined,
+                  "jsenv-injected-by": undefined,
+                  "jsenv-debug": undefined,
+                  "content-indented": undefined,
+                }
+              : {}),
           })
         },
       })
     }
   }
+  // ensure body and html have \n
+  ensureLineBreaksBetweenHtmlNodes(htmlAst)
   const htmlString = serialize(htmlAst)
   return htmlString
 }
 
+const ensureLineBreaksBetweenHtmlNodes = (rootNode) => {
+  const mutations = []
+
+  const documentType = rootNode.childNodes[0]
+  if (documentType.nodeName === "#documentType") {
+    const html = rootNode.childNodes[1]
+    if (html.nodeName === "html") {
+      mutations.push(() => {
+        insertHtmlNodeAfter({ nodeName: "#text", value: "\n" }, documentType)
+      })
+
+      const head = html.childNodes[0]
+      if (head.nodeName === "head") {
+        mutations.push(() => {
+          insertHtmlNodeBefore({ nodeName: "#text", value: "\n  " }, head)
+        })
+      }
+
+      const body = html.childNodes.find((node) => node.nodeName === "body")
+      if (body) {
+        const bodyLastChild = body.childNodes[body.childNodes.length - 1]
+        if (bodyLastChild.nodeName !== "#text") {
+          mutations.push(() => {
+            insertHtmlNodeAfter(
+              { nodeName: "#text", value: "\n  " },
+              bodyLastChild,
+            )
+          })
+        }
+        if (
+          bodyLastChild.nodeName === "#text" &&
+          bodyLastChild.value[bodyLastChild.value.length - 1] === "\n"
+        ) {
+          bodyLastChild.value = bodyLastChild.value.slice(0, -1)
+        }
+      }
+
+      const htmlLastChild = html.childNodes[html.childNodes.length - 1]
+      if (htmlLastChild.nodeName !== "#text") {
+        mutations.push(() => {
+          insertHtmlNodeAfter({ nodeName: "#text", value: "\n" }, htmlLastChild)
+        })
+      }
+    }
+  }
+
+  mutations.forEach((m) => m())
+}
+
 export const parseSvgString = (svgString) => {
   const svgAst = parseFragment(svgString, {
     sourceCodeLocationInfo: true,

package/src/main.js

@@ -21,7 +21,7 @@ export {
   removeHtmlNode,
   createHtmlNode,
   injectHtmlNode,
-  injectScriptNodeAsEarlyAsPossible,
+  injectHtmlNodeAsEarlyAsPossible,
   insertHtmlNodeAfter,
 } from "./html/html_node.js"
 export {