@jsenv/ast 6.1.4 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/ast",
-  "version": "6.1.4",
+  "version": "6.2.1",
   "description": "Parse and transform HTML, CSS and JS",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
     "test": "node --conditions=development ./scripts/test.mjs"
   },
   "dependencies": {
-    "@babel/parser": "7.24.7",
+    "@babel/parser": "7.24.8",
     "@jsenv/urls": "2.2.10",
     "acorn": "8.12.1",
     "acorn-import-attributes": "1.9.5",

package/src/html/html_node.js

@@ -18,10 +18,10 @@ export const removeHtmlNode = (htmlNode) => {
   childNodes.splice(childNodes.indexOf(htmlNode), 1);
 };
 
-export const createHtmlNode = ({ tagName, textContent = "", ...rest }) => {
+export const createHtmlNode = ({ tagName, children = "", ...rest }) => {
   const html = `<${tagName} ${stringifyAttributes(
     rest,
-  )}>${textContent}</${tagName}>`;
+  )}>${children}</${tagName}>`;
   const fragment = parseFragment(html);
   return fragment.childNodes[0];
 };
@@ -46,10 +46,108 @@ export const injectHtmlNode = (htmlAst, node, jsenvPluginName = "jsenv") => {
   if (after) {
     insertHtmlNodeAfter(node, after);
   } else {
-    injectWithWhitespaces(node, bodyNode, 0);
+    injectWithLineBreakAndIndent(node, bodyNode, 0);
   }
 };
 
+export const injectJsenvScript = (
+  htmlAst,
+  { type, src, content, initCall, pluginName = "jsenv" },
+) => {
+  const jsenvScriptsNode = getJsenvScriptsNode(htmlAst);
+  if (type === "module") {
+    if (src) {
+      if (initCall) {
+        const paramsSource = stringifyParams(initCall.params, "  ");
+        const inlineScriptNode = createHtmlNode({
+          "tagName": "script",
+          "type": "module",
+          "jsenv-injected-by": pluginName,
+          "children": `import { ${initCall.callee} } from ${src};
+    
+${initCall.callee}({
+  ${paramsSource}
+});`,
+        });
+        insertHtmlNodeInside(inlineScriptNode, jsenvScriptsNode);
+        return;
+      }
+      const remoteScriptNode = createHtmlNode({
+        "tagName": "script",
+        "type": "module",
+        src,
+        "jsenv-injected-by": pluginName,
+      });
+      insertHtmlNodeInside(remoteScriptNode, jsenvScriptsNode);
+      return;
+    }
+    const inlineScriptNode = createHtmlNode({
+      "tagName": "script",
+      "type": "module",
+      "jsenv-injected-by": pluginName,
+      "children": content,
+    });
+    insertHtmlNodeInside(jsenvScriptsNode, inlineScriptNode);
+    return;
+  }
+  if (src) {
+    const remoteScriptNode = createHtmlNode({
+      "tagName": "script",
+      src,
+      "jsenv-injected-by": pluginName,
+    });
+    insertHtmlNodeInside(remoteScriptNode, jsenvScriptsNode);
+    if (initCall) {
+      const paramsSource = stringifyParams(initCall.params, "  ");
+      const inlineScriptNode = createHtmlNode({
+        "tagName": "script",
+        "jsenv-injected-by": pluginName,
+        "children": `${initCall.callee}({
+  ${paramsSource}
+});`,
+      });
+      insertHtmlNodeInside(inlineScriptNode, jsenvScriptsNode);
+    }
+    return;
+  }
+  const inlineScriptNode = createHtmlNode({
+    "tagName": "script",
+    "jsenv-injected-by": pluginName,
+    "children": content,
+  });
+  insertHtmlNodeInside(inlineScriptNode, jsenvScriptsNode);
+};
+
+const getJsenvScriptsNode = (htmlAst) => {
+  // get or insert <jsenv-scripts>
+  let jsenvScripts = findHtmlNode(
+    htmlAst,
+    (node) => node.nodeName === "jsenv-scripts",
+  );
+  if (jsenvScripts) {
+    return jsenvScripts;
+  }
+  jsenvScripts = createHtmlNode({
+    tagName: "jsenv-scripts",
+  });
+  getAsFirstJsModuleInjector(htmlAst, {
+    anyScript: true,
+  })(jsenvScripts);
+  return jsenvScripts;
+};
+const stringifyParams = (params, prefix = "") => {
+  const source = JSON.stringify(params, null, prefix);
+  if (prefix.length) {
+    // remove leading "{\n"
+    // remove leading prefix
+    // remove trailing "\n}"
+    return source.slice(2 + prefix.length, -2);
+  }
+  // remove leading "{"
+  // remove trailing "}"
+  return source.slice(1, -1);
+};
+
 export const injectHtmlNodeAsEarlyAsPossible = (
   htmlAst,
   node,
@@ -68,6 +166,7 @@ export const injectHtmlNodeAsEarlyAsPossible = (
     // - after any <link>
     // - but before first <link rel="modulepreload">
     // - and before <script type="module">
+    // - and after any <meta>
     const isImportmap = type === "importmap";
     if (isImportmap) {
       let after = headNode.childNodes[0];
@@ -85,48 +184,23 @@ export const injectHtmlNodeAsEarlyAsPossible = (
         ) {
           return insertHtmlNodeBefore(node, child);
         }
+        if (child.nodeName === "meta") {
+          after = child;
+        }
       }
       if (after) {
         return insertHtmlNodeAfter(node, after);
       }
       return injectHtmlNode(htmlAst, node);
     }
-    // <script type="module">
-    // - after <script type="importmap">
-    // - and after any <link>
-    // - and before first <script type="module">
     const isJsModule = type === "js_module";
     if (isJsModule) {
-      const firstImportmapScript = findHtmlNode(htmlAst, (node) => {
-        return (
-          node.nodeName === "script" &&
-          analyzeScriptNode(node).type === "importmap"
-        );
-      });
-      if (firstImportmapScript) {
-        return insertHtmlNodeAfter(node, firstImportmapScript);
-      }
-      let after = headNode.childNodes[0];
-      for (const child of headNode.childNodes) {
-        if (child.nodeName === "link") {
-          after = child;
-          continue;
-        }
-        if (
-          child.nodeName === "script" &&
-          analyzeScriptNode(child).type === "module"
-        ) {
-          return insertHtmlNodeBefore(node, child);
-        }
-      }
-      if (after) {
-        return insertHtmlNodeAfter(node, after);
-      }
-      return injectHtmlNode(htmlAst, node);
+      return getAsFirstJsModuleInjector(htmlAst)(node);
     }
     // <script> or <script type="text/jsx">, ...
     // - after any <link>
     // - before any <script>
+    // - after any <meta>
     let after = headNode.childNodes[0];
     for (const child of headNode.childNodes) {
       if (child.nodeName === "link") {
@@ -136,6 +210,9 @@ export const injectHtmlNodeAsEarlyAsPossible = (
       if (child.nodeName === "script") {
         return insertHtmlNodeBefore(node, child);
       }
+      if (child.nodeName === "meta") {
+        after = child;
+      }
     }
     if (after) {
       return insertHtmlNodeAfter(node, after);
@@ -145,49 +222,139 @@ export const injectHtmlNodeAsEarlyAsPossible = (
   return injectHtmlNode(htmlAst, node);
 };
 
+// <script type="module">
+// - after <script type="importmap">
+// - and after any <link>
+// - and before first <script type="module">
+// - after any <meta>
+const getAsFirstJsModuleInjector = (htmlAst, { anyScript } = {}) => {
+  const headNode = findChild(htmlAst, (node) => node.nodeName === "html")
+    .childNodes[0];
+  const firstImportmapScript = findHtmlNode(htmlAst, (node) => {
+    return (
+      node.nodeName === "script" && analyzeScriptNode(node).type === "importmap"
+    );
+  });
+  if (firstImportmapScript) {
+    return (node) => insertHtmlNodeAfter(node, firstImportmapScript);
+  }
+  let after = headNode.childNodes[0];
+  for (const child of headNode.childNodes) {
+    if (child.nodeName === "link") {
+      after = child;
+      continue;
+    }
+    if (
+      child.nodeName === "script" &&
+      (anyScript || analyzeScriptNode(child).type === "module")
+    ) {
+      return (node) => insertHtmlNodeBefore(node, child);
+    }
+    if (child.nodeName === "meta") {
+      after = child;
+    }
+  }
+  if (after) {
+    return (node) => insertHtmlNodeAfter(node, after);
+  }
+  return (node) => injectHtmlNode(htmlAst, node);
+};
+
+export const insertHtmlNodeInside = (nodeToInsert, futureParentNode) => {
+  const { childNodes = [] } = futureParentNode;
+  return injectWithLineBreakAndIndent(
+    nodeToInsert,
+    futureParentNode,
+    childNodes.length,
+  );
+};
+
 export const insertHtmlNodeBefore = (nodeToInsert, futureNextSibling) => {
   const futureParentNode = futureNextSibling.parentNode;
   const { childNodes = [] } = futureParentNode;
   const futureIndex = childNodes.indexOf(futureNextSibling);
-  injectWithWhitespaces(nodeToInsert, futureParentNode, futureIndex);
+  injectWithLineBreakAndIndent(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);
+  injectWithLineBreakAndIndent(nodeToInsert, futureParentNode, futureIndex);
 };
 
-const injectWithWhitespaces = (nodeToInsert, futureParentNode, futureIndex) => {
+const injectWithLineBreakAndIndent = (
+  nodeToInsert,
+  futureParentNode,
+  futureIndex,
+) => {
   const { childNodes = [] } = futureParentNode;
   const previousSiblings = childNodes.slice(0, futureIndex);
   const nextSiblings = childNodes.slice(futureIndex);
   const futureChildNodes = [];
 
+  const previousSibling = childNodes[futureIndex - 1];
+  const parentIndentation = getIndentation(futureParentNode);
+  const nextSibling = childNodes[futureIndex];
+  let childIndentation;
+  if (previousSibling) {
+    childIndentation = getIndentation(previousSibling);
+  } else if (nextSibling) {
+    childIndentation = getIndentation(nextSibling);
+  } else {
+    childIndentation = increaseIndentation(parentIndentation, 2);
+  }
   if (previousSiblings.length) {
     futureChildNodes.push(...previousSiblings);
   }
-  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);
+  line_break_and_indent_before: {
+    if (nodeToInsert.nodeName === "#text") {
+      break line_break_and_indent_before;
+    }
+    if (!previousSibling) {
+      futureChildNodes.push({
+        nodeName: "#text",
+        value: `\n${childIndentation}`,
+        parentNode: futureParentNode,
+      });
+      break line_break_and_indent_before;
+    }
+    if (isLineBreakAndIndent(previousSibling)) {
+      if (!nextSibling) {
+        previousSibling.value = `\n${childIndentation}`;
+      }
+      break line_break_and_indent_before;
     }
     futureChildNodes.push({
       nodeName: "#text",
-      value: `\n${indentation}`,
+      value: `\n${childIndentation}`,
       parentNode: futureParentNode,
     });
   }
   futureChildNodes.push(nodeToInsert);
   nodeToInsert.parentNode = futureParentNode;
+  line_break_and_indent_after: {
+    if (nodeToInsert.nodeName === "#text") {
+      break line_break_and_indent_after;
+    }
+    if (!nextSibling) {
+      futureChildNodes.push({
+        nodeName: "#text",
+        value: `\n${parentIndentation}`,
+        parentNode: futureParentNode,
+      });
+      break line_break_and_indent_after;
+    }
+    if (isLineBreakAndIndent(nextSibling)) {
+      // nextSibling.value = `\n${indentation}`;
+      break line_break_and_indent_after;
+    }
+    futureChildNodes.push({
+      nodeName: "#text",
+      value: `\n${childIndentation}`,
+      parentNode: futureParentNode,
+    });
+  }
   if (nextSiblings.length) {
     futureChildNodes.push(...nextSiblings);
   }
@@ -200,10 +367,15 @@ const injectWithWhitespaces = (nodeToInsert, futureParentNode, futureIndex) => {
   }
 };
 
-const isWhitespaceNode = (node) => {
-  if (node.nodeName !== "#text") return false;
-  if (node.value.length === 0) return false;
-  return /^\s+$/.test(node.value);
+const isLineBreakAndIndent = (htmlNode) => {
+  if (htmlNode.nodeName !== "#text") {
+    return false;
+  }
+  const { value } = htmlNode;
+  if (value[0] !== "\n") {
+    return false;
+  }
+  return value.slice(1).trim() === "";
 };
 
 const findChild = ({ childNodes = [] }, predicate) =>

package/src/html/html_node_text.js

@@ -66,26 +66,25 @@ export const getIndentation = (htmlNode) => {
   const index = siblings.indexOf(htmlNode);
   if (index === 0) {
     if (htmlNode.nodeName === "#text") {
-      return extractIndentation(htmlNode);
+      if (htmlNode.value.length) {
+        return extractIndentation(htmlNode);
+      }
+      return increaseIndentation(getIndentation(parentNode), 2);
     }
-    return "";
   }
 
   let textNodeIndex = 0;
-  let textNode;
   while (textNodeIndex !== index) {
     const previousSibling = siblings[textNodeIndex];
     textNodeIndex++;
     if (previousSibling.nodeName === "#text") {
-      textNode = previousSibling;
-      break;
+      if (previousSibling.value.length) {
+        return extractIndentation(previousSibling);
+      }
+      return increaseIndentation(getIndentation(parentNode), 2);
     }
   }
-  if (!textNode) {
-    return "";
-  }
-
-  return extractIndentation(textNode);
+  return "";
 };
 
 const extractIndentation = (textNode) => {
@@ -116,3 +115,11 @@ export const increaseIndentation = (indentation, size) => {
   const char = indentation[0];
   return char ? `${indentation}${char.repeat(size)}` : " ".repeat(size);
 };
+
+export const decreaseIndentation = (indentation, size) => {
+  const char = indentation[0];
+  if (char) {
+    return char.slice(0, -size);
+  }
+  return "";
+};

package/src/main.js

@@ -23,6 +23,8 @@ export {
   injectHtmlNode,
   injectHtmlNodeAsEarlyAsPossible,
   insertHtmlNodeAfter,
+  insertHtmlNodeInside,
+  injectJsenvScript,
 } from "./html/html_node.js";
 export {
   inlineScriptNode,