@jsenv/core 38.4.16 → 38.4.18

package/dist/jsenv_core.js

@@ -1,4 +1,4 @@
-import { readdir, chmod, stat, lstat, promises, writeFileSync as writeFileSync$1, mkdirSync, unlink, openSync, closeSync, rmdir, watch, readdirSync, statSync, createReadStream, readFile, existsSync, readFileSync, realpathSync } from "node:fs";
+import { readdir, chmod, stat, lstat, promises, writeFileSync as writeFileSync$1, mkdirSync, unlink, openSync, closeSync, rmdir, watch, readdirSync, statSync, createReadStream, lstatSync, readFile, existsSync, readFileSync, realpathSync } from "node:fs";
 import process$1 from "node:process";
 import os, { networkInterfaces } from "node:os";
 import tty from "node:tty";
@@ -13,7 +13,7 @@ import http from "node:http";
 import { Readable, Stream, Writable } from "node:stream";
 import { Http2ServerResponse } from "node:http2";
 import { lookup } from "node:dns";
-import { injectJsImport, visitJsAstUntil, applyBabelPlugins, parseHtml, visitHtmlNodes, getHtmlNodeAttribute, analyzeScriptNode, getHtmlNodeText, stringifyHtmlAst, setHtmlNodeAttributes, parseJsUrls, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, generateUrlForInlineContent, parseJsWithAcorn, getHtmlNodePosition, getUrlForContentInsideHtml, getHtmlNodeAttributePosition, parseSrcSet, removeHtmlNodeText, setHtmlNodeText, removeHtmlNode, parseCssUrls, getUrlForContentInsideJs, analyzeLinkNode, findHtmlNode, insertHtmlNodeAfter } from "@jsenv/ast";
+import { injectJsImport, visitJsAstUntil, applyBabelPlugins, parseHtml, visitHtmlNodes, getHtmlNodeAttribute, analyzeScriptNode, getHtmlNodeText, stringifyHtmlAst, setHtmlNodeAttributes, parseJsUrls, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, generateUrlForInlineContent, parseJsWithAcorn, getHtmlNodePosition, getHtmlNodeAttributePosition, parseSrcSet, getUrlForContentInsideHtml, removeHtmlNodeText, setHtmlNodeText, removeHtmlNode, parseCssUrls, getUrlForContentInsideJs, analyzeLinkNode, findHtmlNode, insertHtmlNodeAfter } from "@jsenv/ast";
 import { sourcemapConverter, createMagicSource, composeTwoSourcemaps, SOURCEMAP, generateSourcemapFileUrl, generateSourcemapDataUrl } from "@jsenv/sourcemap";
 import { createRequire } from "node:module";
 import { systemJsClientFileUrlDefault, convertJsModuleToJsClassic } from "@jsenv/js-module-fallback";
@@ -142,6 +142,19 @@ const applyMatching = (pattern, string) => {
       consumeRemainingString();
       return true;
     }
+    if (remainingPattern.slice(0, 4) === "/**/") {
+      consumePattern(3); // consumes "/**/"
+      const skipResult = skipUntilMatch({
+        pattern: remainingPattern,
+        string: remainingString,
+        canSkipSlash: true,
+      });
+      groups.push(...skipResult.groups);
+      consumePattern(skipResult.patternIndex);
+      consumeRemainingString();
+      restoreIndexes = false;
+      return skipResult.matched;
+    }
     // pattern leading **
     if (remainingPattern.slice(0, 2) === "**") {
       consumePattern(2); // consumes "**"
@@ -3159,6 +3172,14 @@ const readStat = (
   });
 };
 
+/*
+ * - stats object documentation on Node.js
+ *   https://nodejs.org/docs/latest-v13.x/api/fs.html#fs_class_fs_stats
+ */
+
+
+process.platform === "win32";
+
 const statsToType = (stats) => {
   if (stats.isFile()) return "file";
   if (stats.isDirectory()) return "directory";
@@ -3471,14 +3492,6 @@ const removeDirectoryNaive = (
   });
 };
 
-process.platform === "win32";
-
-/*
- * - stats object documentation on Node.js
- *   https://nodejs.org/docs/latest-v13.x/api/fs.html#fs_class_fs_stats
- */
-
-
 process.platform === "win32";
 
 process.platform === "win32";
@@ -7381,10 +7394,14 @@ const serveDirectory = (
     <h1>Content of directory ${url}</h1>
     <ul>
       ${directoryContentArray.map((filename) => {
-        const fileUrl = String(new URL(filename, url));
-        const fileUrlRelativeToServer = fileUrl.slice(
+        const fileUrlObject = new URL(filename, url);
+        const fileUrl = String(fileUrlObject);
+        let fileUrlRelativeToServer = fileUrl.slice(
           String(rootDirectoryUrl).length,
         );
+        if (lstatSync(fileUrlObject).isDirectory()) {
+          fileUrlRelativeToServer += "/";
+        }
         return `<li>
         <a href="/${fileUrlRelativeToServer}">${fileUrlRelativeToServer}</a>
       </li>`;
@@ -11528,13 +11545,14 @@ const createDependencies = (ownerUrlInfo) => {
     const parentContent = isOriginalPosition
       ? ownerUrlInfo.originalContent
       : ownerUrlInfo.content;
+    const trace = traceFromUrlSite({
+      url: parentUrl,
+      content: parentContent,
+      line: specifierLine,
+      column: specifierColumn,
+    });
     const reference = createResolveAndFinalize({
-      trace: traceFromUrlSite({
-        url: parentUrl,
-        content: parentContent,
-        line: specifierLine,
-        column: specifierColumn,
-      }),
+      trace,
       isOriginalPosition,
       specifierLine,
       specifierColumn,
@@ -13747,9 +13765,12 @@ const createTransformUrlContentError = ({
     if (code === "PARSE_ERROR") {
       transformError.reason = `parse error on ${urlInfo.type}`;
       transformError.cause = error;
+      let line = error.line;
+      if (urlInfo.type === "js_module") {
+        line = line - 1;
+      }
       if (urlInfo.isInline) {
-        transformError.trace.line =
-          urlInfo.firstReference.trace.line + error.line - 1;
+        transformError.trace.line = urlInfo.firstReference.trace.line + line;
         transformError.trace.column =
           urlInfo.firstReference.trace.column + error.column;
         transformError.trace.codeFrame = generateContentFrame({
@@ -13766,16 +13787,16 @@ const createTransformUrlContentError = ({
       } else {
         transformError.trace = {
           url: urlInfo.url,
-          line: error.line,
+          line,
           column: error.column,
           codeFrame: generateContentFrame({
-            line: error.line - 1,
+            line,
             column: error.column,
             content: urlInfo.content,
           }),
           message: stringifyUrlSite({
             url: urlInfo.url,
-            line: error.line - 1,
+            line,
             column: error.column,
             content: urlInfo.content,
           }),
@@ -15779,6 +15800,11 @@ const applyDefaultExtension = ({ url, importer, defaultExtension }) => {
   return url
 };
 
+const htmlSyntaxErrorFileUrl = new URL(
+  "./html/html_syntax_error.html",
+  import.meta.url,
+);
+
 const jsenvPluginHtmlReferenceAnalysis = ({
   inlineContent,
   inlineConvertedScript,
@@ -15886,427 +15912,532 @@ 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);
-          }
-          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"];
+            throw e;
           }
-          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) ; else {
-                  ref.expectedType = decideLinkExpectedType(ref, urlInfo);
+
+            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",
+                  });
                 }
               });
+            });
+            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",
+            return createInlineReference(node, inlineContent, {
+              type,
+              subtype,
+              expectedType,
+              contentType,
+            });
+          };
+
+          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);
+                  }
                 });
               }
-            : 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,
-                  "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",
-                });
-                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$2(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$2 = (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) => {
@@ -18036,6 +18167,16 @@ const jsenvPluginVersionSearchParam = () => {
   };
 };
 
+const html404AndParentDirIsEmptyFileUrl = new URL(
+  "./html/html_404_and_parent_dir_is_empty.html",
+  import.meta.url,
+);
+const html404AndParentDirFileUrl = new URL(
+  "./html/html_404_and_parent_dir.html",
+  import.meta.url,
+);
+const htmlFileUrlForDirectory = new URL("./html/directory.html", import.meta.url);
+
 const jsenvPluginProtocolFile = ({
   magicExtensions = ["inherit", ".js"],
   magicDirectoryIndex = true,
@@ -18122,7 +18263,9 @@ const jsenvPluginProtocolFile = ({
         reference.leadsToADirectory = stat && stat.isDirectory();
         if (reference.leadsToADirectory) {
           let actionForDirectory;
-          if (
+          if (reference.type === "a_href") {
+            actionForDirectory = "ignore";
+          } else if (
             reference.type === "http_request" ||
             reference.type === "filesystem"
           ) {
@@ -18207,17 +18350,33 @@ const jsenvPluginProtocolFile = ({
               urlInfo.filenameHint = `${urlToFilename$1(urlInfo.url)}/`;
             }
           }
-          const { headers, body } = serveDirectory(urlObject.href, {
-            headers: urlInfo.context.request
-              ? urlInfo.context.request.headers
-              : {},
-            rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
-          });
+          const directoryContentArray = readdirSync(urlObject);
+          if (urlInfo.firstReference.type === "filesystem") {
+            const content = JSON.stringify(directoryContentArray, null, "  ");
+            return {
+              type: "directory",
+              contentType: "application/json",
+              content,
+            };
+          }
+          const acceptsHtml = urlInfo.context.request
+            ? pickContentType(urlInfo.context.request, ["text/html"])
+            : false;
+          if (acceptsHtml) {
+            const html = generateHtmlForDirectory(
+              urlObject.href,
+              directoryContentArray,
+              urlInfo.context.rootDirectoryUrl,
+            );
+            return {
+              contentType: "text/html",
+              content: html,
+            };
+          }
           return {
             type: "directory",
-            contentType: headers["content-type"],
-            contentLength: headers["content-length"],
-            content: body,
+            contentType: "application/json",
+            content: JSON.stringify(directoryContentArray, null, "  "),
           };
         }
         if (
@@ -18227,20 +18386,144 @@ const jsenvPluginProtocolFile = ({
           urlInfo.dirnameHint =
             urlInfo.firstReference.ownerUrlInfo.filenameHint;
         }
-        const fileBuffer = readFileSync(urlObject);
         const contentType = CONTENT_TYPE.fromUrlExtension(urlInfo.url);
+        if (contentType === "text/html") {
+          try {
+            const fileBuffer = readFileSync(urlObject);
+            const content = String(fileBuffer);
+            return {
+              content,
+              contentType,
+              contentLength: fileBuffer.length,
+            };
+          } catch (e) {
+            if (e.code !== "ENOENT") {
+              throw e;
+            }
+            const parentDirectoryUrl = new URL("./", urlInfo.url);
+            if (!existsSync(parentDirectoryUrl)) {
+              throw e;
+            }
+            const parentDirectoryContentArray = readdirSync(
+              new URL(parentDirectoryUrl),
+            );
+            const html = generateHtmlForENOENTOnHtmlFile(
+              urlInfo.url,
+              parentDirectoryContentArray,
+              parentDirectoryUrl,
+              urlInfo.context.rootDirectoryUrl,
+            );
+            return {
+              contentType: "text/html",
+              content: html,
+            };
+          }
+        }
+        const fileBuffer = readFileSync(urlObject);
         const content = CONTENT_TYPE.isTextual(contentType)
           ? String(fileBuffer)
           : fileBuffer;
         return {
           content,
           contentType,
+          contentLength: fileBuffer.length,
         };
       },
     },
   ];
 };
 
+const generateHtmlForDirectory = (
+  directoryUrl,
+  directoryContentArray,
+  rootDirectoryUrl,
+) => {
+  directoryUrl = assertAndNormalizeDirectoryUrl(directoryUrl);
+  const htmlForDirectory = String(readFileSync(htmlFileUrlForDirectory));
+  const replacers = {
+    directoryRelativeUrl: urlToRelativeUrl(directoryUrl, rootDirectoryUrl),
+    directoryUrl,
+    directoryContent: () =>
+      generateDirectoryContent(
+        directoryContentArray,
+        directoryUrl,
+        rootDirectoryUrl,
+      ),
+  };
+  const html = replacePlaceholders$1(htmlForDirectory, replacers);
+  return html;
+};
+const generateHtmlForENOENTOnHtmlFile = (
+  url,
+  parentDirectoryContentArray,
+  parentDirectoryUrl,
+  rootDirectoryUrl,
+) => {
+  if (parentDirectoryContentArray.length === 0) {
+    const htmlFor404AndParentDirIsEmpty = String(
+      readFileSync(html404AndParentDirIsEmptyFileUrl),
+    );
+    return replacePlaceholders$1(htmlFor404AndParentDirIsEmpty, {
+      fileRelativeUrl: urlToRelativeUrl(url, rootDirectoryUrl),
+      parentDirectoryRelativeUrl: urlToRelativeUrl(
+        parentDirectoryUrl,
+        rootDirectoryUrl,
+      ),
+    });
+  }
+  const htmlFor404AndParentDir = String(
+    readFileSync(html404AndParentDirFileUrl),
+  );
+
+  const replacers = {
+    fileUrl: url,
+    fileRelativeUrl: urlToRelativeUrl(url, rootDirectoryUrl),
+    parentDirectoryUrl,
+    parentDirectoryRelativeUrl: urlToRelativeUrl(
+      parentDirectoryUrl,
+      rootDirectoryUrl,
+    ),
+    parentDirectoryContent: () =>
+      generateDirectoryContent(
+        parentDirectoryContentArray,
+        parentDirectoryUrl,
+        rootDirectoryUrl,
+      ),
+  };
+  const html = replacePlaceholders$1(htmlFor404AndParentDir, replacers);
+  return html;
+};
+const generateDirectoryContent = (
+  directoryContentArray,
+  directoryUrl,
+  rootDirectoryUrl,
+) => {
+  return directoryContentArray.map((filename) => {
+    const fileUrlObject = new URL(filename, directoryUrl);
+    const fileUrl = String(fileUrlObject);
+    let fileUrlRelative = urlToRelativeUrl(fileUrl, rootDirectoryUrl);
+    if (lstatSync(fileUrlObject).isDirectory()) {
+      fileUrlRelative += "/";
+    }
+    return `<li>
+    <a href="/${fileUrlRelative}">/${fileUrlRelative}</a>
+  </li>`;
+  }).join(`
+  `);
+};
+const replacePlaceholders$1 = (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 resolveSymlink = (fileUrl) => {
   const urlObject = new URL(fileUrl);
   const realpath = realpathSync(urlObject);
@@ -19409,12 +19692,21 @@ const jsenvPluginAutoreloadClient = () => {
           expectedType: "js_module",
           specifier: autoreloadClientFileUrl,
         });
+        const paramsJson = JSON.stringify(
+          {
+            mainFilePath: `/${htmlUrlInfo.kitchen.context.mainFilePath}`,
+          },
+          null,
+          "  ",
+        );
         injectHtmlNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
             tagName: "script",
             type: "module",
-            src: autoreloadClientReference.generatedSpecifier,
+            textContent: `import { initAutoreload } from "${autoreloadClientReference.generatedSpecifier}";
+
+initAutoreload(${paramsJson});`,
           }),
           "jsenv:autoreload_client",
         );
@@ -19465,7 +19757,10 @@ const jsenvPluginAutoreloadServer = ({
                       : `a dependent file accepts hot reload`,
                 };
               }
-              if (urlInfo.data.hotDecline) {
+              if (
+                urlInfo.data.hotDecline ||
+                urlInfo.firstReference?.type === "http_request"
+              ) {
                 return {
                   declined: true,
                   reason: `file declines hot reload`,
@@ -19859,7 +20154,7 @@ const jsenvPluginRibbon = ({
           createHtmlNode({
             tagName: "script",
             type: "module",
-            textContent: `import { injectRibbon } from "${ribbonClientFileReference.generatedSpecifier}"
+            textContent: `import { injectRibbon } from "${ribbonClientFileReference.generatedSpecifier}";
 
 injectRibbon(${paramsJson});`,
           }),
@@ -22302,11 +22597,18 @@ const startDevServer = async ({
       sourceDirectoryUrl,
       "sourceDirectoryUrl",
     );
+    if (!existsSync(new URL(sourceDirectoryUrl))) {
+      throw new Error(`ENOENT on sourceDirectoryUrl at ${sourceDirectoryUrl}`);
+    }
     if (typeof sourceMainFilePath !== "string") {
       throw new TypeError(
         `sourceMainFilePath must be a string, got ${sourceMainFilePath}`,
       );
     }
+    sourceMainFilePath = urlToRelativeUrl(
+      new URL(sourceMainFilePath, sourceDirectoryUrl),
+      sourceDirectoryUrl,
+    );
     if (outDirectoryUrl === undefined) {
       if (!process.env.CI) {
         const packageDirectoryUrl = lookupPackageDirectory(sourceDirectoryUrl);