@jsenv/ast 4.0.2 → 4.1.0

package/package.json

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

package/src/html/html_node.js

@@ -1,6 +1,9 @@
 import { parseFragment } from "parse5";
 
-import { setHtmlNodeAttributes } from "./html_node_attributes.js";
+import {
+  getHtmlNodeAttribute,
+  setHtmlNodeAttributes,
+} from "./html_node_attributes.js";
 import { findHtmlNode } from "./html_search.js";
 import { analyzeScriptNode } from "./html_analysis.js";
 import {
@@ -56,9 +59,43 @@ export const injectHtmlNodeAsEarlyAsPossible = (
     "jsenv-injected-by": jsenvPluginName,
   });
   const isScript = node.nodeName === "script";
-
   if (isScript) {
-    const isJsModule = analyzeScriptNode(node).type === "js_module";
+    const { type } = analyzeScriptNode(node);
+    const headNode = findChild(htmlAst, (node) => node.nodeName === "html")
+      .childNodes[0];
+
+    // <script type="importmap">
+    // - after any <link>
+    // - but before first <link rel="modulepreload">
+    // - and before <script type="module">
+    const isImportmap = type === "importmap";
+    if (isImportmap) {
+      let after = headNode.childNodes[0];
+      for (const child of headNode.childNodes) {
+        if (child.nodeName === "link") {
+          if (getHtmlNodeAttribute(child, "rel") === "modulepreload") {
+            return insertHtmlNodeBefore(node, child);
+          }
+          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);
+    }
+    // <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 (
@@ -66,47 +103,46 @@ export const injectHtmlNodeAsEarlyAsPossible = (
           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;
-          }
+        return insertHtmlNodeAfter(node, firstImportmapScript);
+      }
+      let after = headNode.childNodes[0];
+      for (const child of headNode.childNodes) {
+        if (child.nodeName === "link") {
+          after = child;
+          continue;
         }
-        insertHtmlNodeAfter(node, after);
-        return;
+        if (
+          child.nodeName === "script" &&
+          analyzeScriptNode(child).type === "module"
+        ) {
+          return insertHtmlNodeBefore(node, child);
+        }
+      }
+      if (after) {
+        return insertHtmlNodeAfter(node, after);
       }
+      return injectHtmlNode(htmlAst, node);
     }
-    const headNode = findChild(htmlAst, (node) => node.nodeName === "html")
-      .childNodes[0];
+    // <script> or <script type="text/jsx">, ...
+    // - after any <link>
+    // - before any <script>
     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;
+        continue;
+      }
+      if (child.nodeName === "script") {
+        return insertHtmlNodeBefore(node, child);
       }
     }
     if (after) {
-      insertHtmlNodeAfter(node, after);
+      return insertHtmlNodeAfter(node, after);
     }
-    return;
+    return injectHtmlNode(htmlAst, node);
   }
-
-  injectHtmlNode(htmlAst, node);
-  return;
+  return injectHtmlNode(htmlAst, node);
 };
 
 export const insertHtmlNodeBefore = (nodeToInsert, futureNextSibling) => {

package/src/js/apply_babel_plugins.js

@@ -9,34 +9,28 @@ import { createJsParseError } from "./js_parse_error.js";
 
 export const applyBabelPlugins = async ({
   babelPlugins,
-  urlInfo,
+  input,
+  inputIsJsModule,
+  inputUrl,
+  outputUrl,
   ast,
   options = {},
 }) => {
-  const sourceType = {
-    [urlInfo.type]: undefined,
-    js_module: "module",
-    js_classic: "classic",
-  }[urlInfo.type];
-  const url = urlInfo.originalUrl;
-  const generatedUrl = urlInfo.generatedUrl;
-  const content = urlInfo.content;
-
   if (babelPlugins.length === 0) {
-    return { code: content };
+    return { code: input };
   }
   const { transformAsync, transformFromAstAsync } = await import("@babel/core");
-  const sourceFileName = url.startsWith("file:")
-    ? fileURLToPath(url)
+  const sourceFileName = inputUrl.startsWith("file:")
+    ? fileURLToPath(inputUrl)
     : undefined;
   options = {
     ast: false,
     // https://babeljs.io/docs/en/options#source-map-options
     sourceMaps: true,
     sourceFileName,
-    filename: generatedUrl
-      ? generatedUrl.startsWith("file:")
-        ? fileURLToPath(url)
+    filename: outputUrl
+      ? outputUrl.startsWith("file:")
+        ? fileURLToPath(inputUrl)
         : undefined
       : sourceFileName,
     configFile: false,
@@ -45,19 +39,17 @@ export const applyBabelPlugins = async ({
     // consider using startColumn and startLine for inline scripts?
     // see https://github.com/babel/babel/blob/3ee9db7afe741f4d2f7933c519d8e7672fccb08d/packages/babel-parser/src/options.js#L36-L39
     parserOpts: {
-      sourceType,
+      sourceType: inputIsJsModule ? "module" : "classic",
       // allowAwaitOutsideFunction: true,
       plugins: [
         // "importMeta",
         // "topLevelAwait",
-        ...(sourceType === "module"
-          ? ["dynamicImport", "importAssertions"]
-          : []),
+        ...(inputIsJsModule ? ["dynamicImport", "importAssertions"] : []),
         "jsx",
         "classProperties",
         "classPrivateProperties",
         "classPrivateMethods",
-        ...(useTypeScriptExtension(url) ? ["typescript"] : []),
+        ...(useTypeScriptExtension(inputUrl) ? ["typescript"] : []),
         ...(options.parserPlugins || []),
       ].filter(Boolean),
     },
@@ -70,18 +62,18 @@ export const applyBabelPlugins = async ({
   };
   try {
     if (ast) {
-      const result = await transformFromAstAsync(ast, content, options);
+      const result = await transformFromAstAsync(ast, input, options);
       return result;
     }
-    const result = await transformAsync(content, options);
+    const result = await transformAsync(input, options);
     return result;
   } catch (error) {
     if (error && error.code === "BABEL_PARSE_ERROR") {
       throw createJsParseError({
         message: error.message,
         reasonCode: error.reasonCode,
-        content,
-        url,
+        content: input,
+        url: inputUrl,
         line: error.loc.line,
         column: error.loc.column,
       });

package/src/js/parse_js_urls.js

@@ -48,19 +48,22 @@ import {
   analyzeJSONParseCall,
 } from "./js_static_analysis/json_parse.js";
 
-export const parseJsUrls = async ({
+export const parseJsUrls = ({
   js,
   url,
+  ast,
   isJsModule = false,
   isWebWorker = false,
   inlineContent = true,
 } = {}) => {
   const jsUrls = [];
-  const jsAst = await parseJsWithAcorn({
-    js,
-    url,
-    isJsModule,
-  });
+  if (ast === undefined) {
+    ast = parseJsWithAcorn({
+      js,
+      url,
+      isJsModule,
+    });
+  }
   const onUrl = (jsUrl) => {
     jsUrls.push(jsUrl);
   };
@@ -70,7 +73,7 @@ export const parseJsUrls = async ({
       ...inlineContentInfo,
     });
   };
-  ancestor(jsAst, {
+  ancestor(ast, {
     ImportDeclaration: (node) => {
       analyzeImportDeclaration(node, { onUrl });
     },

package/src/js/parse_js_with_acorn.js

@@ -1,10 +1,11 @@
+import { Parser, getLineInfo } from "acorn";
+import { importAssertions } from "acorn-import-assertions";
+
 import { createJsParseError } from "./js_parse_error.js";
 
-let AcornParser;
-let _getLineInfo;
+export const parseJsWithAcorn = ({ js, url, isJsModule }) => {
+  const AcornParser = Parser.extend(importAssertions);
 
-export const parseJsWithAcorn = async ({ js, url, isJsModule }) => {
-  await initAcornParser();
   try {
     // https://github.com/acornjs/acorn/tree/master/acorn#interface
     const jsAst = AcornParser.parse(js, {
@@ -16,10 +17,11 @@ export const parseJsWithAcorn = async ({ js, url, isJsModule }) => {
     return jsAst;
   } catch (e) {
     if (e && e.name === "SyntaxError") {
-      const { line, column } = _getLineInfo(js, e.raisedAt);
+      const { line, column } = getLineInfo(js, e.raisedAt);
       throw createJsParseError({
         message: e.message,
         reasonCode: e.message,
+        content: js,
         url,
         line,
         column,
@@ -28,14 +30,3 @@ export const parseJsWithAcorn = async ({ js, url, isJsModule }) => {
     throw e;
   }
 };
-
-const initAcornParser = async () => {
-  if (AcornParser) {
-    return;
-  }
-  const { Parser, getLineInfo } = await import("acorn");
-  const { importAssertions } = await import("acorn-import-assertions");
-
-  AcornParser = Parser.extend(importAssertions);
-  _getLineInfo = getLineInfo;
-};

package/src/js/visit_js_ast_until.js

@@ -0,0 +1,30 @@
+import { simple } from "acorn-walk";
+
+const stop = {};
+
+export const visitJsAstUntil = (ast, visitors) => {
+  const visitorsMapped = {};
+  let returnValue = null;
+  Object.keys(visitors).forEach((key) => {
+    visitorsMapped[key] = (node, ...args) => {
+      const visitorReturnValue = visitors[key](node, ...args);
+      if (visitorReturnValue === true) {
+        returnValue = node;
+        throw stop;
+      }
+      if (typeof visitorReturnValue === "object" && returnValue !== null) {
+        returnValue = visitorReturnValue;
+        throw stop;
+      }
+    };
+  });
+  try {
+    simple(ast, visitorsMapped);
+    return returnValue;
+  } catch (e) {
+    if (e === stop) {
+      return returnValue;
+    }
+    throw e;
+  }
+};

package/src/main.js

@@ -42,3 +42,4 @@ export { applyBabelPlugins } from "./js/apply_babel_plugins.js";
 export { injectJsImport } from "./js/babel_utils.js";
 export { parseJsWithAcorn } from "./js/parse_js_with_acorn.js";
 export { parseJsUrls } from "./js/parse_js_urls.js";
+export { visitJsAstUntil } from "./js/visit_js_ast_until.js";