@jsenv/core 38.4.16 → 38.4.18

package/src/plugins/reference_analysis/html/jsenv_plugin_html_reference_analysis.js

@@ -1,3 +1,6 @@
+import { readFileSync } from "node:fs";
+import { urlToRelativeUrl } from "@jsenv/urls";
+import { generateContentFrame } from "@jsenv/humanize";
 import {
   parseHtml,
   visitHtmlNodes,
@@ -20,6 +23,11 @@ import {
   normalizeImportMap,
 } from "@jsenv/importmap";
 
+const htmlSyntaxErrorFileUrl = new URL(
+  "./html_syntax_error.html",
+  import.meta.url,
+);
+
 export const jsenvPluginHtmlReferenceAnalysis = ({
   inlineContent,
   inlineConvertedScript,
@@ -127,429 +135,532 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
       },
       html: async (urlInfo) => {
         let importmapFound = false;
-        const importmapLoaded = startLoadingImportmap(urlInfo);
-
-        const htmlAst = parseHtml({
-          html: urlInfo.content,
-          url: urlInfo.url,
-        });
-
-        const mutations = [];
-        const actions = [];
-        const finalizeCallbacks = [];
 
-        const createExternalReference = (
-          node,
-          attributeName,
-          attributeValue,
-          { type, subtype, expectedType, ...rest },
-        ) => {
-          let position;
-          if (getHtmlNodeAttribute(node, "jsenv-cooked-by")) {
-            // when generated from inline content,
-            // line, column is not "src" nor "inlined-from-src" but "original-position"
-            position = getHtmlNodePosition(node);
+        let htmlAst;
+        try {
+          htmlAst = parseHtml({
+            html: urlInfo.content,
+            url: urlInfo.url,
+          });
+        } catch (e) {
+          if (e.code === "PARSE_ERROR") {
+            const line = e.line;
+            const column = e.column;
+            const htmlErrorContentFrame = generateContentFrame({
+              content: urlInfo.content,
+              line,
+              column,
+            });
+            console.error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
+${e.reasonCode}
+${urlInfo.url}:${line}:${column}
+${htmlErrorContentFrame}`);
+            const html = generateHtmlForSyntaxError(e, {
+              htmlUrl: urlInfo.url,
+              rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
+              htmlErrorContentFrame,
+            });
+            htmlAst = parseHtml({
+              html,
+              url: htmlSyntaxErrorFileUrl,
+            });
           } else {
-            position = getHtmlNodeAttributePosition(node, attributeName);
+            throw e;
           }
-          const {
-            line,
-            column,
-            // originalLine, originalColumn
-          } = position;
-          const debug = getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
+        }
 
-          const { crossorigin, integrity } = readFetchMetas(node);
-          const isResourceHint = [
-            "preconnect",
-            "dns-prefetch",
-            "prefetch",
-            "preload",
-            "modulepreload",
-          ].includes(subtype);
-          let attributeLocation = node.sourceCodeLocation.attrs[attributeName];
-          if (
-            !attributeLocation &&
-            attributeName === "href" &&
-            (node.tagName === "use" || node.tagName === "image")
-          ) {
-            attributeLocation = node.sourceCodeLocation.attrs["xlink:href"];
-          }
-          const attributeStart = attributeLocation.startOffset;
-          const attributeValueStart = urlInfo.content.indexOf(
+        const importmapLoaded = startLoadingImportmap(urlInfo);
+
+        try {
+          const mutations = [];
+          const actions = [];
+          const finalizeCallbacks = [];
+
+          const createExternalReference = (
+            node,
+            attributeName,
             attributeValue,
-            attributeStart + `${attributeName}=`.length,
-          );
-          const attributeValueEnd = attributeValueStart + attributeValue.length;
-          const reference = urlInfo.dependencies.found({
-            type,
-            subtype,
-            expectedType,
-            specifier: attributeValue,
-            specifierLine: line,
-            specifierColumn: column,
-            specifierStart: attributeValueStart,
-            specifierEnd: attributeValueEnd,
-            isResourceHint,
-            isWeak: isResourceHint,
-            crossorigin,
-            integrity,
-            debug,
-            astInfo: { node, attributeName },
-            ...rest,
-          });
-          actions.push(async () => {
-            await reference.readGeneratedSpecifier();
-            mutations.push(() => {
-              setHtmlNodeAttributes(node, {
-                [attributeName]: reference.generatedSpecifier,
+            { type, subtype, expectedType, ...rest },
+          ) => {
+            let position;
+            if (getHtmlNodeAttribute(node, "jsenv-cooked-by")) {
+              // when generated from inline content,
+              // line, column is not "src" nor "inlined-from-src" but "original-position"
+              position = getHtmlNodePosition(node);
+            } else {
+              position = getHtmlNodeAttributePosition(node, attributeName);
+            }
+            const {
+              line,
+              column,
+              // originalLine, originalColumn
+            } = position;
+            const debug =
+              getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
+
+            const { crossorigin, integrity } = readFetchMetas(node);
+            const isResourceHint = [
+              "preconnect",
+              "dns-prefetch",
+              "prefetch",
+              "preload",
+              "modulepreload",
+            ].includes(subtype);
+            let attributeLocation =
+              node.sourceCodeLocation.attrs[attributeName];
+            if (
+              !attributeLocation &&
+              attributeName === "href" &&
+              (node.tagName === "use" || node.tagName === "image")
+            ) {
+              attributeLocation = node.sourceCodeLocation.attrs["xlink:href"];
+            }
+            const attributeStart = attributeLocation.startOffset;
+            const attributeValueStart = urlInfo.content.indexOf(
+              attributeValue,
+              attributeStart + `${attributeName}=`.length,
+            );
+            const attributeValueEnd =
+              attributeValueStart + attributeValue.length;
+            const reference = urlInfo.dependencies.found({
+              type,
+              subtype,
+              expectedType,
+              specifier: attributeValue,
+              specifierLine: line,
+              specifierColumn: column,
+              specifierStart: attributeValueStart,
+              specifierEnd: attributeValueEnd,
+              isResourceHint,
+              isWeak: isResourceHint,
+              crossorigin,
+              integrity,
+              debug,
+              astInfo: { node, attributeName },
+              ...rest,
+            });
+            actions.push(async () => {
+              await reference.readGeneratedSpecifier();
+              mutations.push(() => {
+                setHtmlNodeAttributes(node, {
+                  [attributeName]: reference.generatedSpecifier,
+                });
               });
             });
-          });
-          return reference;
-        };
-        const visitHref = (node, referenceProps) => {
-          const href = getHtmlNodeAttribute(node, "href");
-          if (href) {
-            return createExternalReference(node, "href", href, referenceProps);
-          }
-          return null;
-        };
-        const visitSrc = (node, referenceProps) => {
-          const src = getHtmlNodeAttribute(node, "src");
-          if (src) {
-            return createExternalReference(node, "src", src, referenceProps);
-          }
-          return null;
-        };
-        const visitSrcset = (node, referenceProps) => {
-          const srcset = getHtmlNodeAttribute(node, "srcset");
-          if (srcset) {
-            const srcCandidates = parseSrcSet(srcset);
-            return srcCandidates.map((srcCandidate) => {
+            return reference;
+          };
+          const visitHref = (node, referenceProps) => {
+            const href = getHtmlNodeAttribute(node, "href");
+            if (href) {
               return createExternalReference(
                 node,
-                "srcset",
-                srcCandidate.specifier,
+                "href",
+                href,
                 referenceProps,
               );
+            }
+            return null;
+          };
+          const visitSrc = (node, referenceProps) => {
+            const src = getHtmlNodeAttribute(node, "src");
+            if (src) {
+              return createExternalReference(node, "src", src, referenceProps);
+            }
+            return null;
+          };
+          const visitSrcset = (node, referenceProps) => {
+            const srcset = getHtmlNodeAttribute(node, "srcset");
+            if (srcset) {
+              const srcCandidates = parseSrcSet(srcset);
+              return srcCandidates.map((srcCandidate) => {
+                return createExternalReference(
+                  node,
+                  "srcset",
+                  srcCandidate.specifier,
+                  referenceProps,
+                );
+              });
+            }
+            return null;
+          };
+          const createInlineReference = (
+            node,
+            inlineContent,
+            { type, expectedType, contentType },
+          ) => {
+            const hotAccept =
+              getHtmlNodeAttribute(node, "hot-accept") !== undefined;
+            const { line, column, isOriginal } = getHtmlNodePosition(node, {
+              preferOriginal: true,
             });
-          }
-          return null;
-        };
-
-        const createInlineReference = (
-          node,
-          inlineContent,
-          { type, expectedType, contentType },
-        ) => {
-          const hotAccept =
-            getHtmlNodeAttribute(node, "hot-accept") !== undefined;
-          const { line, column, isOriginal } = getHtmlNodePosition(node, {
-            preferOriginal: true,
-          });
-          const inlineContentUrl = getUrlForContentInsideHtml(node, {
-            htmlUrl: urlInfo.url,
-          });
-          const debug = getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
-          const inlineReference = urlInfo.dependencies.foundInline({
-            type,
-            expectedType,
-            isOriginalPosition: isOriginal,
-            // we remove 1 to the line because imagine the following html:
-            // <style>body { color: red; }</style>
-            // -> content starts same line as <style> (same for <script>)
-            specifierLine: line - 1,
-            specifierColumn: column,
-            specifier: inlineContentUrl,
-            contentType,
-            content: inlineContent,
-            debug,
-            astInfo: { node },
-          });
-
-          actions.push(async () => {
-            await inlineReference.urlInfo.cook();
-            mutations.push(() => {
-              if (hotAccept) {
-                removeHtmlNodeText(node);
-                setHtmlNodeAttributes(node, {
-                  "jsenv-cooked-by": "jsenv:html_inline_content_analysis",
-                });
-              } else {
-                setHtmlNodeText(node, inlineReference.urlInfo.content, {
-                  indentation: false, // indentation would decrease stack trace precision
-                });
-                setHtmlNodeAttributes(node, {
-                  "jsenv-cooked-by": "jsenv:html_inline_content_analysis",
-                });
-              }
+            const inlineContentUrl = getUrlForContentInsideHtml(node, {
+              htmlUrl: urlInfo.url,
             });
-          });
-          return inlineReference;
-        };
-        const visitTextContent = (
-          node,
-          { type, subtype, expectedType, contentType },
-        ) => {
-          const inlineContent = getHtmlNodeText(node);
-          if (!inlineContent) {
-            return null;
-          }
-          return createInlineReference(node, inlineContent, {
-            type,
-            subtype,
-            expectedType,
-            contentType,
-          });
-        };
-
-        visitHtmlNodes(htmlAst, {
-          link: (linkNode) => {
-            const rel = getHtmlNodeAttribute(linkNode, "rel");
-            const type = getHtmlNodeAttribute(linkNode, "type");
-            const ref = visitHref(linkNode, {
-              type: "link_href",
-              subtype: rel,
-              // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#including_a_mime_type
-              expectedContentType: type,
+            const debug =
+              getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
+            const inlineReference = urlInfo.dependencies.foundInline({
+              type,
+              expectedType,
+              isOriginalPosition: isOriginal,
+              // we remove 1 to the line because imagine the following html:
+              // <style>body { color: red; }</style>
+              // -> content starts same line as <style> (same for <script>)
+              specifierLine: line - 1,
+              specifierColumn: column,
+              specifier: inlineContentUrl,
+              contentType,
+              content: inlineContent,
+              debug,
+              astInfo: { node },
             });
-            if (ref) {
-              finalizeCallbacks.push(() => {
-                if (ref.expectedType) {
-                  // might be set by other plugins, in that case respect it
+
+            actions.push(async () => {
+              await inlineReference.urlInfo.cook();
+              mutations.push(() => {
+                if (hotAccept) {
+                  removeHtmlNodeText(node);
+                  setHtmlNodeAttributes(node, {
+                    "jsenv-cooked-by": "jsenv:html_inline_content_analysis",
+                  });
                 } else {
-                  ref.expectedType = decideLinkExpectedType(ref, urlInfo);
+                  setHtmlNodeText(node, inlineReference.urlInfo.content, {
+                    indentation: false, // indentation would decrease stack trace precision
+                  });
+                  setHtmlNodeAttributes(node, {
+                    "jsenv-cooked-by": "jsenv:html_inline_content_analysis",
+                  });
                 }
               });
+            });
+            return inlineReference;
+          };
+          const visitTextContent = (
+            node,
+            { type, subtype, expectedType, contentType },
+          ) => {
+            const inlineContent = getHtmlNodeText(node);
+            if (!inlineContent) {
+              return null;
             }
-          },
-          style: inlineContent
-            ? (styleNode) => {
-                visitTextContent(styleNode, {
-                  type: "style",
-                  expectedType: "css",
-                  contentType: "text/css",
-                });
-              }
-            : null,
-          script: (scriptNode) => {
-            const { type, subtype, contentType, extension } =
-              analyzeScriptNode(scriptNode);
-            if (type === "text") {
-              // ignore <script type="whatever">foobar</script>
-              // per HTML spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
-              return;
-            }
-            if (type === "importmap") {
-              importmapFound = true;
+            return createInlineReference(node, inlineContent, {
+              type,
+              subtype,
+              expectedType,
+              contentType,
+            });
+          };
 
-              const src = getHtmlNodeAttribute(scriptNode, "src");
-              if (src) {
-                // Browser would throw on remote importmap
-                // and won't sent a request to the server for it
-                // We must precook the importmap to know its content and inline it into the HTML
-                const importmapReference = createExternalReference(
-                  scriptNode,
-                  "src",
-                  src,
-                  {
-                    type: "script",
-                    subtype: "importmap",
-                    expectedType: "importmap",
-                  },
-                );
-                const { line, column, isOriginal } = getHtmlNodePosition(
-                  scriptNode,
-                  {
-                    preferOriginal: true,
-                  },
-                );
-                const importmapInlineUrl = getUrlForContentInsideHtml(
-                  scriptNode,
-                  {
-                    htmlUrl: urlInfo.url,
-                  },
-                );
-                const importmapReferenceInlined = importmapReference.inline({
-                  line: line - 1,
-                  column,
-                  isOriginal,
-                  specifier: importmapInlineUrl,
-                  contentType: "application/importmap+json",
+          visitNonIgnoredHtmlNode(htmlAst, {
+            link: (linkNode) => {
+              const rel = getHtmlNodeAttribute(linkNode, "rel");
+              const type = getHtmlNodeAttribute(linkNode, "type");
+              const ref = visitHref(linkNode, {
+                type: "link_href",
+                subtype: rel,
+                // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#including_a_mime_type
+                expectedContentType: type,
+              });
+              if (ref) {
+                finalizeCallbacks.push(() => {
+                  if (ref.expectedType) {
+                    // might be set by other plugins, in that case respect it
+                  } else {
+                    ref.expectedType = decideLinkExpectedType(ref, urlInfo);
+                  }
                 });
-                const importmapInlineUrlInfo =
-                  importmapReferenceInlined.urlInfo;
-                actions.push(async () => {
-                  await importmapInlineUrlInfo.cook();
-                  importmapLoaded(importmapInlineUrlInfo);
-                  mutations.push(() => {
-                    setHtmlNodeText(
-                      scriptNode,
-                      importmapInlineUrlInfo.content,
-                      {
-                        indentation: "auto",
-                      },
-                    );
-                    setHtmlNodeAttributes(scriptNode, {
-                      "src": undefined,
-                      "jsenv-inlined-by": "jsenv:html_reference_analysis",
-                      "inlined-from-src": src,
-                    });
+              }
+            },
+            style: inlineContent
+              ? (styleNode) => {
+                  visitTextContent(styleNode, {
+                    type: "style",
+                    expectedType: "css",
+                    contentType: "text/css",
                   });
-                });
-              } else {
-                const htmlNodeText = getHtmlNodeText(scriptNode);
-                if (htmlNodeText) {
-                  const importmapReference = createInlineReference(
+                }
+              : null,
+            script: (scriptNode) => {
+              const { type, subtype, contentType, extension } =
+                analyzeScriptNode(scriptNode);
+              if (type === "text") {
+                // ignore <script type="whatever">foobar</script>
+                // per HTML spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
+                return;
+              }
+              if (type === "importmap") {
+                importmapFound = true;
+
+                const src = getHtmlNodeAttribute(scriptNode, "src");
+                if (src) {
+                  // Browser would throw on remote importmap
+                  // and won't sent a request to the server for it
+                  // We must precook the importmap to know its content and inline it into the HTML
+                  const importmapReference = createExternalReference(
                     scriptNode,
-                    htmlNodeText,
+                    "src",
+                    src,
                     {
                       type: "script",
+                      subtype: "importmap",
                       expectedType: "importmap",
-                      contentType: "application/importmap+json",
                     },
                   );
-                  const inlineImportmapUrlInfo = importmapReference.urlInfo;
+                  const { line, column, isOriginal } = getHtmlNodePosition(
+                    scriptNode,
+                    {
+                      preferOriginal: true,
+                    },
+                  );
+                  const importmapInlineUrl = getUrlForContentInsideHtml(
+                    scriptNode,
+                    {
+                      htmlUrl: urlInfo.url,
+                    },
+                  );
+                  const importmapReferenceInlined = importmapReference.inline({
+                    line: line - 1,
+                    column,
+                    isOriginal,
+                    specifier: importmapInlineUrl,
+                    contentType: "application/importmap+json",
+                  });
+                  const importmapInlineUrlInfo =
+                    importmapReferenceInlined.urlInfo;
                   actions.push(async () => {
-                    await inlineImportmapUrlInfo.cook();
-                    importmapLoaded(inlineImportmapUrlInfo);
+                    try {
+                      await importmapInlineUrlInfo.cook();
+                    } finally {
+                      importmapLoaded(importmapInlineUrlInfo);
+                    }
                     mutations.push(() => {
                       setHtmlNodeText(
                         scriptNode,
-                        inlineImportmapUrlInfo.content,
+                        importmapInlineUrlInfo.content,
                         {
                           indentation: "auto",
                         },
                       );
                       setHtmlNodeAttributes(scriptNode, {
-                        "jsenv-cooked-by": "jsenv:html_reference_analysis",
+                        "src": undefined,
+                        "jsenv-inlined-by": "jsenv:html_reference_analysis",
+                        "inlined-from-src": src,
                       });
                     });
                   });
+                } else {
+                  const htmlNodeText = getHtmlNodeText(scriptNode);
+                  if (htmlNodeText) {
+                    const importmapReference = createInlineReference(
+                      scriptNode,
+                      htmlNodeText,
+                      {
+                        type: "script",
+                        expectedType: "importmap",
+                        contentType: "application/importmap+json",
+                      },
+                    );
+                    const inlineImportmapUrlInfo = importmapReference.urlInfo;
+                    actions.push(async () => {
+                      try {
+                        await inlineImportmapUrlInfo.cook();
+                      } finally {
+                        importmapLoaded(inlineImportmapUrlInfo);
+                      }
+                      mutations.push(() => {
+                        setHtmlNodeText(
+                          scriptNode,
+                          inlineImportmapUrlInfo.content,
+                          {
+                            indentation: "auto",
+                          },
+                        );
+                        setHtmlNodeAttributes(scriptNode, {
+                          "jsenv-cooked-by": "jsenv:html_reference_analysis",
+                        });
+                      });
+                    });
+                  }
                 }
+                // once this plugin knows the importmap, it will use it
+                // to map imports. These import specifiers will be normalized
+                // by "formatReference" making the importmap presence useless.
+                // In dev/test we keep importmap into the HTML to see it even if useless
+                // Duing build we get rid of it
+                if (urlInfo.context.build) {
+                  mutations.push(() => {
+                    removeHtmlNode(scriptNode);
+                  });
+                }
+                return;
               }
-              // once this plugin knows the importmap, it will use it
-              // to map imports. These import specifiers will be normalized
-              // by "formatReference" making the importmap presence useless.
-              // In dev/test we keep importmap into the HTML to see it even if useless
-              // Duing build we get rid of it
-              if (urlInfo.context.build) {
-                mutations.push(() => {
-                  removeHtmlNode(scriptNode);
-                });
+              const externalRef = visitSrc(scriptNode, {
+                type: "script",
+                subtype: type,
+                expectedType: type,
+              });
+              if (externalRef) {
+                return;
               }
-              return;
-            }
-            const externalRef = visitSrc(scriptNode, {
-              type: "script",
-              subtype: type,
-              expectedType: type,
-            });
-            if (externalRef) {
-              return;
-            }
 
-            // now visit the content, if any
-            if (!inlineContent) {
-              return;
-            }
-            // If the inline script was already handled by an other plugin, ignore it
-            // - we want to preserve inline scripts generated by html supervisor during dev
-            // - we want to avoid cooking twice a script during build
-            if (
-              !inlineConvertedScript &&
-              getHtmlNodeAttribute(scriptNode, "jsenv-injected-by") ===
-                "jsenv:js_module_fallback"
-            ) {
-              return;
-            }
+              // now visit the content, if any
+              if (!inlineContent) {
+                return;
+              }
+              // If the inline script was already handled by an other plugin, ignore it
+              // - we want to preserve inline scripts generated by html supervisor during dev
+              // - we want to avoid cooking twice a script during build
+              if (
+                !inlineConvertedScript &&
+                getHtmlNodeAttribute(scriptNode, "jsenv-injected-by") ===
+                  "jsenv:js_module_fallback"
+              ) {
+                return;
+              }
 
-            const inlineRef = visitTextContent(scriptNode, {
-              type: "script",
-              subtype,
-              expectedType: type,
-              contentType,
-            });
-            if (inlineRef) {
-              // 1. <script type="jsx"> becomes <script>
-              if (type === "js_classic" && extension !== ".js") {
-                mutations.push(() => {
-                  setHtmlNodeAttributes(scriptNode, {
-                    type: undefined,
+              const inlineRef = visitTextContent(scriptNode, {
+                type: "script",
+                subtype,
+                expectedType: type,
+                contentType,
+              });
+              if (inlineRef) {
+                // 1. <script type="jsx"> becomes <script>
+                if (type === "js_classic" && extension !== ".js") {
+                  mutations.push(() => {
+                    setHtmlNodeAttributes(scriptNode, {
+                      type: undefined,
+                    });
                   });
-                });
-              }
-              // 2. <script type="module/jsx"> becomes <script type="module">
-              if (type === "js_module" && extension !== ".js") {
-                mutations.push(() => {
-                  setHtmlNodeAttributes(scriptNode, {
-                    type: "module",
+                }
+                // 2. <script type="module/jsx"> becomes <script type="module">
+                if (type === "js_module" && extension !== ".js") {
+                  mutations.push(() => {
+                    setHtmlNodeAttributes(scriptNode, {
+                      type: "module",
+                    });
                   });
-                });
+                }
               }
-            }
-          },
-          a: (aNode) => {
-            visitHref(aNode, {
-              type: "a_href",
-            });
-          },
-          iframe: (iframeNode) => {
-            visitSrc(iframeNode, {
-              type: "iframe_src",
-            });
-          },
-          img: (imgNode) => {
-            visitSrc(imgNode, {
-              type: "img_src",
-            });
-            visitSrcset(imgNode, {
-              type: "img_srcset",
-            });
-          },
-          source: (sourceNode) => {
-            visitSrc(sourceNode, {
-              type: "source_src",
-            });
-            visitSrcset(sourceNode, {
-              type: "source_srcset",
-            });
-          },
-          // svg <image> tag
-          image: (imageNode) => {
-            visitHref(imageNode, {
-              type: "image_href",
-            });
-          },
-          use: (useNode) => {
-            visitHref(useNode, {
-              type: "use_href",
-            });
-          },
-        });
-        if (!importmapFound) {
-          importmapLoaded();
-        }
-        finalizeCallbacks.forEach((finalizeCallback) => {
-          finalizeCallback();
-        });
+            },
+            a: (aNode) => {
+              visitHref(aNode, {
+                type: "a_href",
+              });
+            },
+            iframe: (iframeNode) => {
+              visitSrc(iframeNode, {
+                type: "iframe_src",
+              });
+            },
+            img: (imgNode) => {
+              visitSrc(imgNode, {
+                type: "img_src",
+              });
+              visitSrcset(imgNode, {
+                type: "img_srcset",
+              });
+            },
+            source: (sourceNode) => {
+              visitSrc(sourceNode, {
+                type: "source_src",
+              });
+              visitSrcset(sourceNode, {
+                type: "source_srcset",
+              });
+            },
+            // svg <image> tag
+            image: (imageNode) => {
+              visitHref(imageNode, {
+                type: "image_href",
+              });
+            },
+            use: (useNode) => {
+              visitHref(useNode, {
+                type: "use_href",
+              });
+            },
+          });
+          if (!importmapFound) {
+            importmapLoaded();
+          }
+          finalizeCallbacks.forEach((finalizeCallback) => {
+            finalizeCallback();
+          });
 
-        if (actions.length > 0) {
-          await Promise.all(actions.map((action) => action()));
-          actions.length = 0;
-        }
-        if (mutations.length === 0) {
-          return null;
+          if (actions.length > 0) {
+            await Promise.all(actions.map((action) => action()));
+            actions.length = 0;
+          }
+          if (mutations.length === 0) {
+            return null;
+          }
+          mutations.forEach((mutation) => mutation());
+          mutations.length = 0;
+          return stringifyHtmlAst(htmlAst);
+        } catch (e) {
+          importmapLoaded();
+          throw e;
         }
-        mutations.forEach((mutation) => mutation());
-        mutations.length = 0;
-        return stringifyHtmlAst(htmlAst);
       },
     },
   };
 };
 
+const visitNonIgnoredHtmlNode = (htmlAst, visitors) => {
+  const visitorsInstrumented = {};
+  for (const key of Object.keys(visitors)) {
+    visitorsInstrumented[key] = (node) => {
+      const jsenvIgnoreAttribute = getHtmlNodeAttribute(node, "jsenv-ignore");
+      if (jsenvIgnoreAttribute !== undefined) {
+        return;
+      }
+      visitors[key](node);
+    };
+  }
+  visitHtmlNodes(htmlAst, visitorsInstrumented);
+};
+
+const generateHtmlForSyntaxError = (
+  htmlSyntaxError,
+  { htmlUrl, rootDirectoryUrl, htmlErrorContentFrame },
+) => {
+  const htmlForSyntaxError = String(readFileSync(htmlSyntaxErrorFileUrl));
+  const htmlRelativeUrl = urlToRelativeUrl(htmlUrl, rootDirectoryUrl);
+  const { line, column } = htmlSyntaxError;
+  const urlWithLineAndColumn = `${htmlUrl}:${line}:${column}`;
+  const replacers = {
+    fileRelativeUrl: htmlRelativeUrl,
+    reasonCode: htmlSyntaxError.reasonCode,
+    errorLinkHref: `javascript:window.fetch('/__open_in_editor__/${encodeURIComponent(
+      urlWithLineAndColumn,
+    )}')`,
+    errorLinkText: `${htmlRelativeUrl}:${line}:${column}`,
+    syntaxError: escapeHtml(htmlErrorContentFrame),
+  };
+  const html = replacePlaceholders(htmlForSyntaxError, replacers);
+  return html;
+};
+const escapeHtml = (string) => {
+  return string
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+const replacePlaceholders = (html, replacers) => {
+  return html.replace(/\${([\w]+)}/g, (match, name) => {
+    const replacer = replacers[name];
+    if (replacer === undefined) {
+      return match;
+    }
+    if (typeof replacer === "function") {
+      return replacer();
+    }
+    return replacer;
+  });
+};
+
 const crossOriginCompatibleTagNames = ["script", "link", "img", "source"];
 const integrityCompatibleTagNames = ["script", "link", "img", "source"];
 const readFetchMetas = (node) => {