@jsenv/core 38.2.10 → 38.3.0

package/dist/jsenv_core.js

@@ -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, parseHtmlString, visitHtmlNodes, getHtmlNodeAttribute, analyzeScriptNode, getHtmlNodeText, stringifyHtmlAst, setHtmlNodeAttributes, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, generateUrlForInlineContent, parseJsWithAcorn, parseSrcSet, getHtmlNodePosition, getHtmlNodeAttributePosition, getUrlForContentInsideHtml, removeHtmlNodeText, setHtmlNodeText, parseCssUrls, parseJsUrls, getUrlForContentInsideJs, findHtmlNode, removeHtmlNode, analyzeLinkNode, injectHtmlNode, insertHtmlNodeAfter } from "@jsenv/ast";
+import { injectJsImport, visitJsAstUntil, applyBabelPlugins, parseHtmlString, visitHtmlNodes, getHtmlNodeAttribute, analyzeScriptNode, getHtmlNodeText, stringifyHtmlAst, setHtmlNodeAttributes, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, generateUrlForInlineContent, parseJsWithAcorn, getHtmlNodePosition, getUrlForContentInsideHtml, getHtmlNodeAttributePosition, parseSrcSet, removeHtmlNodeText, setHtmlNodeText, removeHtmlNode, parseCssUrls, parseJsUrls, 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";
@@ -7355,7 +7355,11 @@ const serveDirectory = (
   const directoryContentArray = readdirSync(new URL(url));
   const responseProducers = {
     "application/json": () => {
-      const directoryContentJson = JSON.stringify(directoryContentArray);
+      const directoryContentJson = JSON.stringify(
+        directoryContentArray,
+        null,
+        "  ",
+      );
       return {
         status: 200,
         headers: {
@@ -9343,6 +9347,7 @@ const babelPluginCompatMap = {
     samsung: "9",
     electron: "3",
   },
+  "proposal-decorators": {},
   "transform-parameters": {
     chrome: "49",
     opera: "36",
@@ -9739,6 +9744,14 @@ const getBaseBabelPluginStructure = ({
     babelPluginStructure["proposal-unicode-property-regex"] =
       requireBabelPlugin("@babel/plugin-proposal-unicode-property-regex");
   }
+  // if (isBabelPluginNeeded("proposal-decorators") && content.includes("@")) {
+  //   babelPluginStructure["proposal-decorators"] = [
+  //     requireBabelPlugin("@babel/plugin-proposal-decorators"),
+  //     {
+  //       version: "2023-05",
+  //     },
+  //   ];
+  // }
   if (isBabelPluginNeeded("transform-async-to-promises")) {
     babelPluginStructure["transform-async-to-promises"] = [
       requireBabelPlugin("babel-plugin-transform-async-to-promises"),
@@ -11801,12 +11814,12 @@ const createReference = ({
     ownerUrlInfo.context.finalizeReference(reference);
   };
 
-  // "formatReferencedUrl" can be async BUT this is an exception
+  // "formatReference" can be async BUT this is an exception
   // for most cases it will be sync. We want to favor the sync signature to keep things simpler
   // The only case where it needs to be async is when
   // the specifier is a `data:*` url
   // in this case we'll wait for the promise returned by
-  // "formatReferencedUrl"
+  // "formatReference"
   reference.readGeneratedSpecifier = () => {
     if (reference.generatedSpecifier.then) {
       return reference.generatedSpecifier.then((value) => {
@@ -12311,6 +12324,7 @@ const createUrlInfo = (url, context) => {
     context,
     error: null,
     modifiedTimestamp: 0,
+    descendantModifiedTimestamp: 0,
     dereferencedTimestamp: 0,
     originalContentEtag: null,
     contentEtag: null,
@@ -12384,6 +12398,9 @@ const createUrlInfo = (url, context) => {
         continue;
       }
       if (ref.gotInlined()) {
+        if (ref.ownerUrlInfo.isUsed()) {
+          return true;
+        }
         // the url info was inlined, an other reference is required
         // to consider the non-inlined urlInfo as used
         continue;
@@ -12483,7 +12500,7 @@ const createUrlInfo = (url, context) => {
   };
   urlInfo.onModified = ({ modifiedTimestamp = Date.now() } = {}) => {
     const visitedSet = new Set();
-    const iterate = (urlInfo) => {
+    const considerModified = (urlInfo) => {
       if (visitedSet.has(urlInfo)) {
         return;
       }
@@ -12493,14 +12510,21 @@ const createUrlInfo = (url, context) => {
       for (const referenceToOther of urlInfo.referenceToOthersSet) {
         const referencedUrlInfo = referenceToOther.urlInfo;
         if (referencedUrlInfo.isInline) {
-          iterate(referencedUrlInfo);
+          considerModified(referencedUrlInfo);
+        }
+      }
+      for (const referenceFromOther of urlInfo.referenceFromOthersSet) {
+        if (referenceFromOther.gotInlined()) {
+          const urlInfoReferencingThisOne = referenceFromOther.ownerUrlInfo;
+          considerModified(urlInfoReferencingThisOne);
         }
       }
       for (const searchParamVariant of urlInfo.searchParamVariantSet) {
-        iterate(searchParamVariant);
+        considerModified(searchParamVariant);
       }
     };
-    iterate(urlInfo);
+    considerModified(urlInfo);
+    visitedSet.clear();
   };
   urlInfo.onDereferenced = (lastReferenceFromOther) => {
     urlInfo.dereferencedTimestamp = Date.now();
@@ -14378,7 +14402,7 @@ ${ANSI.color(normalizedReturnValue, ANSI.YELLOW)}
           // the HTML in itself it still valid
           // keep the syntax error and continue with the HTML
           const errorInfo =
-            e.code === "PARSE_ERROR"
+            e.code === "PARSE_ERROR" && e.cause
               ? `${e.cause.reasonCode}\n${e.traceMessage}`
               : e.stack;
           logger.error(
@@ -14885,6 +14909,9 @@ const jsenvPluginDirectoryReferenceAnalysis = () => {
           urlInfo.url,
           urlInfo.context.rootDirectoryUrl,
         );
+        if (urlInfo.contentType !== "application/json") {
+          return null;
+        }
         const entryNames = JSON.parse(urlInfo.content);
         const newEntryNames = [];
         for (const entryName of entryNames) {
@@ -14994,1598 +15021,1586 @@ const base64ToString = (base64String) =>
   Buffer.from(base64String, "base64").toString("utf8");
 const dataToBase64 = (data) => Buffer.from(data).toString("base64");
 
-const jsenvPluginHtmlReferenceAnalysis = ({
-  inlineContent,
-  inlineConvertedScript,
-}) => {
-  return {
-    name: "jsenv:html_reference_analysis",
-    appliesDuring: "*",
-    transformUrlContent: {
-      html: (urlInfo) =>
-        parseAndTransformHtmlReferences(urlInfo, {
-          inlineContent,
-          inlineConvertedScript,
-        }),
-    },
-  };
-};
+// duplicated from @jsenv/log to avoid the dependency
+const createDetailedMessage = (message, details = {}) => {
+  let string = `${message}`;
 
-const parseAndTransformHtmlReferences = async (
-  urlInfo,
-  { inlineContent, inlineConvertedScript },
-) => {
-  const content = urlInfo.content;
-  const htmlAst = parseHtmlString(content);
+  Object.keys(details).forEach((key) => {
+    const value = details[key];
+    string += `
+    --- ${key} ---
+    ${
+      Array.isArray(value)
+        ? value.join(`
+    `)
+        : value
+    }`;
+  });
 
-  const mutations = [];
-  const actions = [];
-  const finalizeCallbacks = [];
+  return string
+};
 
-  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);
-    } 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 createExternalReference(
-          node,
-          "srcset",
-          srcCandidate.specifier,
-          referenceProps,
-        );
-      });
-    }
-    return null;
-  };
+const assertImportMap = (value) => {
+  if (value === null) {
+    throw new TypeError(`an importMap must be an object, got 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 },
-    });
+  const type = typeof value;
+  if (type !== "object") {
+    throw new TypeError(`an importMap must be an object, received ${value}`)
+  }
 
-    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;
-    }
-    return createInlineReference(node, inlineContent, {
-      type,
-      subtype,
-      expectedType,
-      contentType,
-    });
-  };
+  if (Array.isArray(value)) {
+    throw new TypeError(
+      `an importMap must be an object, received array ${value}`,
+    )
+  }
+};
 
-  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,
-      });
-      if (ref) {
-        finalizeCallbacks.push(() => {
-          if (ref.expectedType) ; else {
-            ref.expectedType = decideLinkExpectedType(ref, urlInfo);
-          }
-        });
-      }
-    },
-    style: inlineContent
-      ? (styleNode) => {
-          visitTextContent(styleNode, {
-            type: "style",
-            expectedType: "css",
-            contentType: "text/css",
-          });
-        }
-      : null,
-    script: (scriptNode) => {
-      // during build the importmap is inlined
-      // and shoud not be considered as a dependency anymore
-      if (
-        getHtmlNodeAttribute(scriptNode, "jsenv-inlined-by") ===
-        "jsenv:importmap"
-      ) {
-        return;
-      }
+const hasScheme = (string) => {
+  return /^[a-zA-Z]{2,}:/.test(string)
+};
 
-      const { type, subtype, contentType, extension } =
-        analyzeScriptNode(scriptNode);
-      // ignore <script type="whatever">foobar</script>
-      // per HTML spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
-      if (type !== "text") {
-        const externalRef = visitSrc(scriptNode, {
-          type: "script",
-          subtype: type,
-          expectedType: type,
-        });
-        if (externalRef) {
-          return;
-        }
-      }
+const urlToScheme = (urlString) => {
+  const colonIndex = urlString.indexOf(":");
+  if (colonIndex === -1) return ""
+  return urlString.slice(0, colonIndex)
+};
 
-      // 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 urlToPathname = (urlString) => {
+  return ressourceToPathname(urlToRessource(urlString))
+};
 
-      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",
-            });
-          });
-        }
-      }
-    },
-    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",
-      });
-    },
-  });
-  finalizeCallbacks.forEach((finalizeCallback) => {
-    finalizeCallback();
-  });
+const urlToRessource = (urlString) => {
+  const scheme = urlToScheme(urlString);
 
-  if (actions.length > 0) {
-    await Promise.all(actions.map((action) => action()));
+  if (scheme === "file") {
+    return urlString.slice("file://".length)
   }
-  if (mutations.length === 0) {
-    return null;
+
+  if (scheme === "https" || scheme === "http") {
+    // remove origin
+    const afterProtocol = urlString.slice(scheme.length + "://".length);
+    const pathnameSlashIndex = afterProtocol.indexOf("/", "://".length);
+    return afterProtocol.slice(pathnameSlashIndex)
   }
-  mutations.forEach((mutation) => mutation());
-  return stringifyHtmlAst(htmlAst);
+
+  return urlString.slice(scheme.length + 1)
 };
 
-const crossOriginCompatibleTagNames = ["script", "link", "img", "source"];
-const integrityCompatibleTagNames = ["script", "link", "img", "source"];
-const readFetchMetas = (node) => {
-  const meta = {};
-  if (crossOriginCompatibleTagNames.includes(node.nodeName)) {
-    const crossorigin = getHtmlNodeAttribute(node, "crossorigin") !== undefined;
-    meta.crossorigin = crossorigin;
+const ressourceToPathname = (ressource) => {
+  const searchSeparatorIndex = ressource.indexOf("?");
+  return searchSeparatorIndex === -1
+    ? ressource
+    : ressource.slice(0, searchSeparatorIndex)
+};
+
+const urlToOrigin = (urlString) => {
+  const scheme = urlToScheme(urlString);
+
+  if (scheme === "file") {
+    return "file://"
   }
-  if (integrityCompatibleTagNames.includes(node.nodeName)) {
-    const integrity = getHtmlNodeAttribute(node, "integrity");
-    meta.integrity = integrity;
+
+  if (scheme === "http" || scheme === "https") {
+    const secondProtocolSlashIndex = scheme.length + "://".length;
+    const pathnameSlashIndex = urlString.indexOf("/", secondProtocolSlashIndex);
+
+    if (pathnameSlashIndex === -1) return urlString
+    return urlString.slice(0, pathnameSlashIndex)
   }
-  return meta;
+
+  return urlString.slice(0, scheme.length + 1)
 };
 
-const decideLinkExpectedType = (linkReference, htmlUrlInfo) => {
-  const rel = getHtmlNodeAttribute(linkReference.astInfo.node, "rel");
-  if (rel === "webmanifest") {
-    return "webmanifest";
+const pathnameToParentPathname = (pathname) => {
+  const slashLastIndex = pathname.lastIndexOf("/");
+  if (slashLastIndex === -1) {
+    return "/"
   }
-  if (rel === "modulepreload") {
-    return "js_module";
+
+  return pathname.slice(0, slashLastIndex + 1)
+};
+
+// could be useful: https://url.spec.whatwg.org/#url-miscellaneous
+
+
+const resolveUrl = (specifier, baseUrl) => {
+  if (baseUrl) {
+    if (typeof baseUrl !== "string") {
+      throw new TypeError(writeBaseUrlMustBeAString({ baseUrl, specifier }))
+    }
+    if (!hasScheme(baseUrl)) {
+      throw new Error(writeBaseUrlMustBeAbsolute({ baseUrl, specifier }))
+    }
   }
-  if (rel === "stylesheet") {
-    return "css";
+
+  if (hasScheme(specifier)) {
+    return specifier
   }
-  if (rel === "preload") {
-    // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
-    const as = getHtmlNodeAttribute(linkReference.astInfo.node, "as");
-    if (as === "document") {
-      return "html";
-    }
-    if (as === "style") {
-      return "css";
-    }
-    if (as === "script") {
-      for (const referenceToOther of htmlUrlInfo.referenceToOthersSet) {
-        if (referenceToOther.url !== linkReference.url) {
-          continue;
-        }
-        if (referenceToOther.type !== "script") {
-          continue;
-        }
-        return referenceToOther.expectedType;
-      }
-      return undefined;
-    }
+
+  if (!baseUrl) {
+    throw new Error(writeBaseUrlRequired({ baseUrl, specifier }))
   }
-  return undefined;
-};
 
-// const applyWebUrlResolution = (url, baseUrl) => {
-//   if (url[0] === "/") {
-//     return new URL(url.slice(1), baseUrl).href;
-//   }
-//   return new URL(url, baseUrl).href;
-// };
+  // scheme relative
+  if (specifier.slice(0, 2) === "//") {
+    return `${urlToScheme(baseUrl)}:${specifier}`
+  }
 
-// css: parseAndTransformCssUrls,
+  // origin relative
+  if (specifier[0] === "/") {
+    return `${urlToOrigin(baseUrl)}${specifier}`
+  }
 
-const jsenvPluginWebmanifestReferenceAnalysis = () => {
-  return {
-    name: "jsenv:webmanifest_reference_analysis",
-    appliesDuring: "*",
-    transformUrlContent: {
-      webmanifest: parseAndTransformWebmanifestUrls,
-    },
-  };
-};
+  const baseOrigin = urlToOrigin(baseUrl);
+  const basePathname = urlToPathname(baseUrl);
 
-const parseAndTransformWebmanifestUrls = async (urlInfo) => {
-  const content = urlInfo.content;
-  const manifest = JSON.parse(content);
-  const actions = [];
-  const { icons = [] } = manifest;
-  icons.forEach((icon) => {
-    const iconReference = urlInfo.dependencies.found({
-      type: "webmanifest_icon_src",
-      specifier: icon.src,
-    });
-    actions.push(async () => {
-      await iconReference.readGeneratedSpecifier();
-      icon.src = iconReference.generatedSpecifier;
-    });
-  });
+  if (specifier === ".") {
+    const baseDirectoryPathname = pathnameToParentPathname(basePathname);
+    return `${baseOrigin}${baseDirectoryPathname}`
+  }
 
-  if (actions.length === 0) {
-    return null;
+  // pathname relative inside
+  if (specifier.slice(0, 2) === "./") {
+    const baseDirectoryPathname = pathnameToParentPathname(basePathname);
+    return `${baseOrigin}${baseDirectoryPathname}${specifier.slice(2)}`
   }
-  await Promise.all(actions.map((action) => action()));
-  return JSON.stringify(manifest, null, "  ");
-};
 
-/*
- * https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/css/src/CSSTransformer.js
- */
+  // pathname relative outside
+  if (specifier.slice(0, 3) === "../") {
+    let unresolvedPathname = specifier;
+    const importerFolders = basePathname.split("/");
+    importerFolders.pop();
 
+    while (unresolvedPathname.slice(0, 3) === "../") {
+      unresolvedPathname = unresolvedPathname.slice(3);
+      // when there is no folder left to resolved
+      // we just ignore '../'
+      if (importerFolders.length) {
+        importerFolders.pop();
+      }
+    }
 
-const jsenvPluginCssReferenceAnalysis = () => {
-  return {
-    name: "jsenv:css_reference_analysis",
-    appliesDuring: "*",
-    transformUrlContent: {
-      css: parseAndTransformCssUrls,
-    },
-  };
-};
+    const resolvedPathname = `${importerFolders.join(
+      "/",
+    )}/${unresolvedPathname}`;
+    return `${baseOrigin}${resolvedPathname}`
+  }
 
-const parseAndTransformCssUrls = async (urlInfo) => {
-  const cssUrls = await parseCssUrls({
-    css: urlInfo.content,
-    url: urlInfo.originalUrl,
-  });
-  const actions = [];
-  const magicSource = createMagicSource(urlInfo.content);
-  for (const cssUrl of cssUrls) {
-    const reference = urlInfo.dependencies.found({
-      type: cssUrl.type,
-      specifier: cssUrl.specifier,
-      specifierStart: cssUrl.start,
-      specifierEnd: cssUrl.end,
-      specifierLine: cssUrl.line,
-      specifierColumn: cssUrl.column,
-    });
-    actions.push(async () => {
-      await reference.readGeneratedSpecifier();
-      const replacement = reference.generatedSpecifier;
-      magicSource.replace({
-        start: cssUrl.start,
-        end: cssUrl.end,
-        replacement,
-      });
-    });
+  // bare
+  if (basePathname === "") {
+    return `${baseOrigin}/${specifier}`
   }
-  if (actions.length > 0) {
-    await Promise.all(actions.map((action) => action()));
+  if (basePathname[basePathname.length] === "/") {
+    return `${baseOrigin}${basePathname}${specifier}`
   }
-  return magicSource.toContentAndSourcemap();
+  return `${baseOrigin}${pathnameToParentPathname(basePathname)}${specifier}`
 };
 
-const jsenvPluginJsReferenceAnalysis = ({ inlineContent }) => {
-  return [
-    {
-      name: "jsenv:js_reference_analysis",
-      appliesDuring: "*",
-      transformUrlContent: {
-        js_classic: (urlInfo) =>
-          parseAndTransformJsReferences(urlInfo, {
-            inlineContent,
-            canUseTemplateLiterals:
-              urlInfo.context.isSupportedOnCurrentClients("template_literals"),
-          }),
-        js_module: (urlInfo) =>
-          parseAndTransformJsReferences(urlInfo, {
-            inlineContent,
-            canUseTemplateLiterals:
-              urlInfo.context.isSupportedOnCurrentClients("template_literals"),
-          }),
-      },
-    },
-  ];
+const writeBaseUrlMustBeAString = ({
+  baseUrl,
+  specifier,
+}) => `baseUrl must be a string.
+--- base url ---
+${baseUrl}
+--- specifier ---
+${specifier}`;
+
+const writeBaseUrlMustBeAbsolute = ({
+  baseUrl,
+  specifier,
+}) => `baseUrl must be absolute.
+--- base url ---
+${baseUrl}
+--- specifier ---
+${specifier}`;
+
+const writeBaseUrlRequired = ({
+  baseUrl,
+  specifier,
+}) => `baseUrl required to resolve relative specifier.
+--- base url ---
+${baseUrl}
+--- specifier ---
+${specifier}`;
+
+const tryUrlResolution = (string, url) => {
+  const result = resolveUrl(string, url);
+  return hasScheme(result) ? result : null
 };
 
-const parseAndTransformJsReferences = async (
-  urlInfo,
-  { inlineContent, canUseTemplateLiterals },
-) => {
-  const magicSource = createMagicSource(urlInfo.content);
-  const parallelActions = [];
-  const sequentialActions = [];
-  const isNodeJs =
-    Object.keys(urlInfo.context.runtimeCompat).toString() === "node";
+const resolveSpecifier = (specifier, importer) => {
+  if (
+    specifier === "." ||
+    specifier[0] === "/" ||
+    specifier.startsWith("./") ||
+    specifier.startsWith("../")
+  ) {
+    return resolveUrl(specifier, importer)
+  }
 
-  const onInlineReference = (inlineReferenceInfo) => {
-    const inlineUrl = getUrlForContentInsideJs(inlineReferenceInfo, {
-      url: urlInfo.url,
-    });
-    let { quote } = inlineReferenceInfo;
-    if (quote === "`" && !canUseTemplateLiterals) {
-      // if quote is "`" and template literals are not supported
-      // we'll use a regular string (single or double quote)
-      // when rendering the string
-      quote = JS_QUOTES.pickBest(inlineReferenceInfo.content);
-    }
-    const inlineReference = urlInfo.dependencies.foundInline({
-      type: "js_inline_content",
-      subtype: inlineReferenceInfo.type, // "new_blob_first_arg", "new_inline_content_first_arg", "json_parse_first_arg"
-      isOriginalPosition: urlInfo.content === urlInfo.originalContent,
-      specifierLine: inlineReferenceInfo.line,
-      specifierColumn: inlineReferenceInfo.column,
-      specifier: inlineUrl,
-      contentType: inlineReferenceInfo.contentType,
-      content: inlineReferenceInfo.content,
-    });
-    const inlineUrlInfo = inlineReference.urlInfo;
-    inlineUrlInfo.jsQuote = quote;
-    inlineReference.escape = (value) => {
-      return JS_QUOTES.escapeSpecialChars(value.slice(1, -1), { quote });
-    };
+  if (hasScheme(specifier)) {
+    return specifier
+  }
 
-    sequentialActions.push(async () => {
-      await inlineUrlInfo.cook();
-      const replacement = JS_QUOTES.escapeSpecialChars(inlineUrlInfo.content, {
-        quote,
-      });
-      magicSource.replace({
-        start: inlineReferenceInfo.start,
-        end: inlineReferenceInfo.end,
-        replacement,
-      });
-    });
-  };
-  const onExternalReference = (externalReferenceInfo) => {
-    if (
-      externalReferenceInfo.subtype === "import_static" ||
-      externalReferenceInfo.subtype === "import_dynamic"
-    ) {
-      urlInfo.data.usesImport = true;
-    }
-    if (
-      isNodeJs &&
-      externalReferenceInfo.type === "js_url" &&
-      externalReferenceInfo.expectedSubtype === "worker" &&
-      externalReferenceInfo.expectedType === "js_classic" &&
-      // TODO: it's true also if closest package.json
-      // is type: module
-      urlToExtension$1(
-        new URL(externalReferenceInfo.specifier, urlInfo.url).href,
-      ) === ".mjs"
-    ) {
-      externalReferenceInfo.expectedType = "js_module";
+  return null
+};
+
+const applyImportMap = ({
+  importMap,
+  specifier,
+  importer,
+  createBareSpecifierError = ({ specifier, importer }) => {
+    return new Error(
+      createDetailedMessage(`Unmapped bare specifier.`, {
+        specifier,
+        importer,
+      }),
+    )
+  },
+  onImportMapping = () => {},
+}) => {
+  assertImportMap(importMap);
+  if (typeof specifier !== "string") {
+    throw new TypeError(
+      createDetailedMessage("specifier must be a string.", {
+        specifier,
+        importer,
+      }),
+    )
+  }
+  if (importer) {
+    if (typeof importer !== "string") {
+      throw new TypeError(
+        createDetailedMessage("importer must be a string.", {
+          importer,
+          specifier,
+        }),
+      )
     }
-    const reference = urlInfo.dependencies.found({
-      type: externalReferenceInfo.type,
-      subtype: externalReferenceInfo.subtype,
-      expectedType: externalReferenceInfo.expectedType,
-      expectedSubtype: externalReferenceInfo.expectedSubtype || urlInfo.subtype,
-      specifier: externalReferenceInfo.specifier,
-      specifierStart: externalReferenceInfo.start,
-      specifierEnd: externalReferenceInfo.end,
-      specifierLine: externalReferenceInfo.line,
-      specifierColumn: externalReferenceInfo.column,
-      data: externalReferenceInfo.data,
-      baseUrl: {
-        "StringLiteral": externalReferenceInfo.baseUrl,
-        "window.location": urlInfo.url,
-        "window.origin": urlInfo.context.rootDirectoryUrl,
-        "import.meta.url": urlInfo.url,
-        "context.meta.url": urlInfo.url,
-        "document.currentScript.src": urlInfo.url,
-      }[externalReferenceInfo.baseUrlType],
-      importAttributes: externalReferenceInfo.importAttributes,
-      astInfo: externalReferenceInfo.astInfo,
-    });
-    parallelActions.push(async () => {
-      await reference.readGeneratedSpecifier();
-      const replacement = reference.generatedSpecifier;
-      magicSource.replace({
-        start: externalReferenceInfo.start,
-        end: externalReferenceInfo.end,
-        replacement,
-      });
-      if (reference.mutation) {
-        reference.mutation(magicSource, urlInfo);
-      }
-    });
-  };
-  const jsReferenceInfos = parseJsUrls({
-    js: urlInfo.content,
-    url: urlInfo.originalUrl,
-    ast: urlInfo.contentAst,
-    isJsModule: urlInfo.type === "js_module",
-    isWebWorker: isWebWorkerUrlInfo(urlInfo),
-    inlineContent,
-    isNodeJs,
-  });
-  for (const jsReferenceInfo of jsReferenceInfos) {
-    if (jsReferenceInfo.isInline) {
-      onInlineReference(jsReferenceInfo);
-    } else {
-      onExternalReference(jsReferenceInfo);
+    if (!hasScheme(importer)) {
+      throw new Error(
+        createDetailedMessage(`importer must be an absolute url.`, {
+          importer,
+          specifier,
+        }),
+      )
     }
   }
-  if (parallelActions.length > 0) {
-    await Promise.all(parallelActions.map((action) => action()));
-  }
-  if (sequentialActions.length > 0) {
-    await sequentialActions.reduce(async (previous, action) => {
-      await previous;
-      await action();
-    }, Promise.resolve());
-  }
-
-  const { content, sourcemap } = magicSource.toContentAndSourcemap();
-  return { content, sourcemap };
-};
 
-const jsenvPluginReferenceAnalysis = ({
-  inlineContent = true,
-  inlineConvertedScript = false,
-  fetchInlineUrls = true,
-}) => {
-  return [
-    jsenvPluginDirectoryReferenceAnalysis(),
-    jsenvPluginHtmlReferenceAnalysis({
-      inlineContent,
-      inlineConvertedScript,
-    }),
-    jsenvPluginWebmanifestReferenceAnalysis(),
-    jsenvPluginCssReferenceAnalysis(),
-    jsenvPluginJsReferenceAnalysis({
-      inlineContent,
-    }),
-    ...(inlineContent ? [jsenvPluginDataUrlsAnalysis()] : []),
-    ...(inlineContent && fetchInlineUrls
-      ? [jsenvPluginInlineContentFetcher()]
-      : []),
-    jsenvPluginReferenceExpectedTypes(),
-  ];
-};
+  const specifierUrl = resolveSpecifier(specifier, importer);
+  const specifierNormalized = specifierUrl || specifier;
 
-const jsenvPluginInlineContentFetcher = () => {
-  return {
-    name: "jsenv:inline_content_fetcher",
-    appliesDuring: "*",
-    fetchUrlContent: async (urlInfo) => {
-      if (!urlInfo.isInline) {
-        return null;
-      }
-      // - we must use last reference because
-      //   when updating the file, first reference is the previous version
-      // - we cannot use urlInfo.lastReference because it can be the reference created by "http_request"
-      let lastInlineReference;
-      for (const reference of urlInfo.referenceFromOthersSet) {
-        if (reference.isInline) {
-          lastInlineReference = reference;
-        }
-      }
-      const { prev } = lastInlineReference;
-      if (prev && !prev.isInline) {
-        // got inlined, cook original url
-        if (lastInlineReference.content === undefined) {
-          const originalUrlInfo = prev.urlInfo;
-          await originalUrlInfo.cook();
-          lastInlineReference.content = originalUrlInfo.content;
-          lastInlineReference.contentType = originalUrlInfo.contentType;
-        }
+  const { scopes } = importMap;
+  if (scopes && importer) {
+    const scopeSpecifierMatching = Object.keys(scopes).find(
+      (scopeSpecifier) => {
+        return (
+          scopeSpecifier === importer ||
+          specifierIsPrefixOf(scopeSpecifier, importer)
+        )
+      },
+    );
+    if (scopeSpecifierMatching) {
+      const scopeMappings = scopes[scopeSpecifierMatching];
+      const mappingFromScopes = applyMappings(
+        scopeMappings,
+        specifierNormalized,
+        scopeSpecifierMatching,
+        onImportMapping,
+      );
+      if (mappingFromScopes !== null) {
+        return mappingFromScopes
       }
-      return {
-        originalContent: urlInfo.originalContent,
-        content: lastInlineReference.content,
-        contentType: lastInlineReference.contentType,
-      };
-    },
-  };
-};
+    }
+  }
 
-// duplicated from @jsenv/log to avoid the dependency
-const createDetailedMessage = (message, details = {}) => {
-  let string = `${message}`;
+  const { imports } = importMap;
+  if (imports) {
+    const mappingFromImports = applyMappings(
+      imports,
+      specifierNormalized,
+      undefined,
+      onImportMapping,
+    );
+    if (mappingFromImports !== null) {
+      return mappingFromImports
+    }
+  }
 
-  Object.keys(details).forEach((key) => {
-    const value = details[key];
-    string += `
-    --- ${key} ---
-    ${
-      Array.isArray(value)
-        ? value.join(`
-    `)
-        : value
-    }`;
-  });
+  if (specifierUrl) {
+    return specifierUrl
+  }
 
-  return string
+  throw createBareSpecifierError({ specifier, importer })
 };
 
-const assertImportMap = (value) => {
-  if (value === null) {
-    throw new TypeError(`an importMap must be an object, got null`)
-  }
+const applyMappings = (
+  mappings,
+  specifierNormalized,
+  scope,
+  onImportMapping,
+) => {
+  const specifierCandidates = Object.keys(mappings);
 
-  const type = typeof value;
-  if (type !== "object") {
-    throw new TypeError(`an importMap must be an object, received ${value}`)
+  let i = 0;
+  while (i < specifierCandidates.length) {
+    const specifierCandidate = specifierCandidates[i];
+    i++;
+    if (specifierCandidate === specifierNormalized) {
+      const address = mappings[specifierCandidate];
+      onImportMapping({
+        scope,
+        from: specifierCandidate,
+        to: address,
+        before: specifierNormalized,
+        after: address,
+      });
+      return address
+    }
+    if (specifierIsPrefixOf(specifierCandidate, specifierNormalized)) {
+      const address = mappings[specifierCandidate];
+      const afterSpecifier = specifierNormalized.slice(
+        specifierCandidate.length,
+      );
+      const addressFinal = tryUrlResolution(afterSpecifier, address);
+      onImportMapping({
+        scope,
+        from: specifierCandidate,
+        to: address,
+        before: specifierNormalized,
+        after: addressFinal,
+      });
+      return addressFinal
+    }
   }
 
-  if (Array.isArray(value)) {
-    throw new TypeError(
-      `an importMap must be an object, received array ${value}`,
-    )
-  }
+  return null
 };
 
-const hasScheme = (string) => {
-  return /^[a-zA-Z]{2,}:/.test(string)
+const specifierIsPrefixOf = (specifierHref, href) => {
+  return (
+    specifierHref[specifierHref.length - 1] === "/" &&
+    href.startsWith(specifierHref)
+  )
 };
 
-const urlToScheme = (urlString) => {
-  const colonIndex = urlString.indexOf(":");
-  if (colonIndex === -1) return ""
-  return urlString.slice(0, colonIndex)
-};
+// https://github.com/systemjs/systemjs/blob/89391f92dfeac33919b0223bbf834a1f4eea5750/src/common.js#L136
 
-const urlToPathname = (urlString) => {
-  return ressourceToPathname(urlToRessource(urlString))
-};
+const composeTwoImportMaps = (leftImportMap, rightImportMap) => {
+  assertImportMap(leftImportMap);
+  assertImportMap(rightImportMap);
 
-const urlToRessource = (urlString) => {
-  const scheme = urlToScheme(urlString);
+  const importMap = {};
 
-  if (scheme === "file") {
-    return urlString.slice("file://".length)
+  const leftImports = leftImportMap.imports;
+  const rightImports = rightImportMap.imports;
+  const leftHasImports = Boolean(leftImports);
+  const rightHasImports = Boolean(rightImports);
+  if (leftHasImports && rightHasImports) {
+    importMap.imports = composeTwoMappings(leftImports, rightImports);
+  } else if (leftHasImports) {
+    importMap.imports = { ...leftImports };
+  } else if (rightHasImports) {
+    importMap.imports = { ...rightImports };
   }
 
-  if (scheme === "https" || scheme === "http") {
-    // remove origin
-    const afterProtocol = urlString.slice(scheme.length + "://".length);
-    const pathnameSlashIndex = afterProtocol.indexOf("/", "://".length);
-    return afterProtocol.slice(pathnameSlashIndex)
+  const leftScopes = leftImportMap.scopes;
+  const rightScopes = rightImportMap.scopes;
+  const leftHasScopes = Boolean(leftScopes);
+  const rightHasScopes = Boolean(rightScopes);
+  if (leftHasScopes && rightHasScopes) {
+    importMap.scopes = composeTwoScopes(
+      leftScopes,
+      rightScopes,
+      importMap.imports || {},
+    );
+  } else if (leftHasScopes) {
+    importMap.scopes = { ...leftScopes };
+  } else if (rightHasScopes) {
+    importMap.scopes = { ...rightScopes };
   }
 
-  return urlString.slice(scheme.length + 1)
-};
-
-const ressourceToPathname = (ressource) => {
-  const searchSeparatorIndex = ressource.indexOf("?");
-  return searchSeparatorIndex === -1
-    ? ressource
-    : ressource.slice(0, searchSeparatorIndex)
+  return importMap
 };
 
-const urlToOrigin = (urlString) => {
-  const scheme = urlToScheme(urlString);
-
-  if (scheme === "file") {
-    return "file://"
-  }
+const composeTwoMappings = (leftMappings, rightMappings) => {
+  const mappings = {};
 
-  if (scheme === "http" || scheme === "https") {
-    const secondProtocolSlashIndex = scheme.length + "://".length;
-    const pathnameSlashIndex = urlString.indexOf("/", secondProtocolSlashIndex);
+  Object.keys(leftMappings).forEach((leftSpecifier) => {
+    if (objectHasKey(rightMappings, leftSpecifier)) {
+      // will be overidden
+      return
+    }
+    const leftAddress = leftMappings[leftSpecifier];
+    const rightSpecifier = Object.keys(rightMappings).find((rightSpecifier) => {
+      return compareAddressAndSpecifier(leftAddress, rightSpecifier)
+    });
+    mappings[leftSpecifier] = rightSpecifier
+      ? rightMappings[rightSpecifier]
+      : leftAddress;
+  });
 
-    if (pathnameSlashIndex === -1) return urlString
-    return urlString.slice(0, pathnameSlashIndex)
-  }
+  Object.keys(rightMappings).forEach((rightSpecifier) => {
+    mappings[rightSpecifier] = rightMappings[rightSpecifier];
+  });
 
-  return urlString.slice(0, scheme.length + 1)
+  return mappings
 };
 
-const pathnameToParentPathname = (pathname) => {
-  const slashLastIndex = pathname.lastIndexOf("/");
-  if (slashLastIndex === -1) {
-    return "/"
-  }
+const objectHasKey = (object, key) =>
+  Object.prototype.hasOwnProperty.call(object, key);
 
-  return pathname.slice(0, slashLastIndex + 1)
+const compareAddressAndSpecifier = (address, specifier) => {
+  const addressUrl = resolveUrl(address, "file:///");
+  const specifierUrl = resolveUrl(specifier, "file:///");
+  return addressUrl === specifierUrl
 };
 
-// could be useful: https://url.spec.whatwg.org/#url-miscellaneous
-
+const composeTwoScopes = (leftScopes, rightScopes, imports) => {
+  const scopes = {};
 
-const resolveUrl = (specifier, baseUrl) => {
-  if (baseUrl) {
-    if (typeof baseUrl !== "string") {
-      throw new TypeError(writeBaseUrlMustBeAString({ baseUrl, specifier }))
+  Object.keys(leftScopes).forEach((leftScopeKey) => {
+    if (objectHasKey(rightScopes, leftScopeKey)) {
+      // will be merged
+      scopes[leftScopeKey] = leftScopes[leftScopeKey];
+      return
     }
-    if (!hasScheme(baseUrl)) {
-      throw new Error(writeBaseUrlMustBeAbsolute({ baseUrl, specifier }))
+    const topLevelSpecifier = Object.keys(imports).find(
+      (topLevelSpecifierCandidate) => {
+        return compareAddressAndSpecifier(
+          leftScopeKey,
+          topLevelSpecifierCandidate,
+        )
+      },
+    );
+    if (topLevelSpecifier) {
+      scopes[imports[topLevelSpecifier]] = leftScopes[leftScopeKey];
+    } else {
+      scopes[leftScopeKey] = leftScopes[leftScopeKey];
     }
-  }
-
-  if (hasScheme(specifier)) {
-    return specifier
-  }
-
-  if (!baseUrl) {
-    throw new Error(writeBaseUrlRequired({ baseUrl, specifier }))
-  }
+  });
 
-  // scheme relative
-  if (specifier.slice(0, 2) === "//") {
-    return `${urlToScheme(baseUrl)}:${specifier}`
-  }
+  Object.keys(rightScopes).forEach((rightScopeKey) => {
+    if (objectHasKey(scopes, rightScopeKey)) {
+      scopes[rightScopeKey] = composeTwoMappings(
+        scopes[rightScopeKey],
+        rightScopes[rightScopeKey],
+      );
+    } else {
+      scopes[rightScopeKey] = {
+        ...rightScopes[rightScopeKey],
+      };
+    }
+  });
 
-  // origin relative
-  if (specifier[0] === "/") {
-    return `${urlToOrigin(baseUrl)}${specifier}`
-  }
+  return scopes
+};
 
-  const baseOrigin = urlToOrigin(baseUrl);
-  const basePathname = urlToPathname(baseUrl);
+const sortImports = (imports) => {
+  const mappingsSorted = {};
 
-  if (specifier === ".") {
-    const baseDirectoryPathname = pathnameToParentPathname(basePathname);
-    return `${baseOrigin}${baseDirectoryPathname}`
-  }
+  Object.keys(imports)
+    .sort(compareLengthOrLocaleCompare)
+    .forEach((name) => {
+      mappingsSorted[name] = imports[name];
+    });
 
-  // pathname relative inside
-  if (specifier.slice(0, 2) === "./") {
-    const baseDirectoryPathname = pathnameToParentPathname(basePathname);
-    return `${baseOrigin}${baseDirectoryPathname}${specifier.slice(2)}`
-  }
+  return mappingsSorted
+};
 
-  // pathname relative outside
-  if (specifier.slice(0, 3) === "../") {
-    let unresolvedPathname = specifier;
-    const importerFolders = basePathname.split("/");
-    importerFolders.pop();
+const sortScopes = (scopes) => {
+  const scopesSorted = {};
 
-    while (unresolvedPathname.slice(0, 3) === "../") {
-      unresolvedPathname = unresolvedPathname.slice(3);
-      // when there is no folder left to resolved
-      // we just ignore '../'
-      if (importerFolders.length) {
-        importerFolders.pop();
-      }
-    }
+  Object.keys(scopes)
+    .sort(compareLengthOrLocaleCompare)
+    .forEach((scopeSpecifier) => {
+      scopesSorted[scopeSpecifier] = sortImports(scopes[scopeSpecifier]);
+    });
 
-    const resolvedPathname = `${importerFolders.join(
-      "/",
-    )}/${unresolvedPathname}`;
-    return `${baseOrigin}${resolvedPathname}`
-  }
+  return scopesSorted
+};
 
-  // bare
-  if (basePathname === "") {
-    return `${baseOrigin}/${specifier}`
-  }
-  if (basePathname[basePathname.length] === "/") {
-    return `${baseOrigin}${basePathname}${specifier}`
-  }
-  return `${baseOrigin}${pathnameToParentPathname(basePathname)}${specifier}`
+const compareLengthOrLocaleCompare = (a, b) => {
+  return b.length - a.length || a.localeCompare(b)
 };
 
-const writeBaseUrlMustBeAString = ({
-  baseUrl,
-  specifier,
-}) => `baseUrl must be a string.
---- base url ---
-${baseUrl}
---- specifier ---
-${specifier}`;
+const normalizeImportMap = (importMap, baseUrl) => {
+  assertImportMap(importMap);
 
-const writeBaseUrlMustBeAbsolute = ({
-  baseUrl,
-  specifier,
-}) => `baseUrl must be absolute.
---- base url ---
-${baseUrl}
---- specifier ---
-${specifier}`;
+  if (!isStringOrUrl(baseUrl)) {
+    throw new TypeError(formulateBaseUrlMustBeStringOrUrl({ baseUrl }))
+  }
 
-const writeBaseUrlRequired = ({
-  baseUrl,
-  specifier,
-}) => `baseUrl required to resolve relative specifier.
---- base url ---
-${baseUrl}
---- specifier ---
-${specifier}`;
+  const { imports, scopes } = importMap;
 
-const tryUrlResolution = (string, url) => {
-  const result = resolveUrl(string, url);
-  return hasScheme(result) ? result : null
+  return {
+    imports: imports ? normalizeMappings(imports, baseUrl) : undefined,
+    scopes: scopes ? normalizeScopes(scopes, baseUrl) : undefined,
+  }
 };
 
-const resolveSpecifier = (specifier, importer) => {
-  if (
-    specifier === "." ||
-    specifier[0] === "/" ||
-    specifier.startsWith("./") ||
-    specifier.startsWith("../")
-  ) {
-    return resolveUrl(specifier, importer)
+const isStringOrUrl = (value) => {
+  if (typeof value === "string") {
+    return true
   }
 
-  if (hasScheme(specifier)) {
-    return specifier
+  if (typeof URL === "function" && value instanceof URL) {
+    return true
   }
 
-  return null
+  return false
 };
 
-const applyImportMap = ({
-  importMap,
-  specifier,
-  importer,
-  createBareSpecifierError = ({ specifier, importer }) => {
-    return new Error(
-      createDetailedMessage(`Unmapped bare specifier.`, {
-        specifier,
-        importer,
-      }),
-    )
-  },
-  onImportMapping = () => {},
-}) => {
-  assertImportMap(importMap);
-  if (typeof specifier !== "string") {
-    throw new TypeError(
-      createDetailedMessage("specifier must be a string.", {
-        specifier,
-        importer,
-      }),
-    )
-  }
-  if (importer) {
-    if (typeof importer !== "string") {
-      throw new TypeError(
-        createDetailedMessage("importer must be a string.", {
-          importer,
-          specifier,
-        }),
-      )
-    }
-    if (!hasScheme(importer)) {
-      throw new Error(
-        createDetailedMessage(`importer must be an absolute url.`, {
-          importer,
+const normalizeMappings = (mappings, baseUrl) => {
+  const mappingsNormalized = {};
+
+  Object.keys(mappings).forEach((specifier) => {
+    const address = mappings[specifier];
+
+    if (typeof address !== "string") {
+      console.warn(
+        formulateAddressMustBeAString({
+          address,
           specifier,
         }),
-      )
+      );
+      return
     }
-  }
 
-  const specifierUrl = resolveSpecifier(specifier, importer);
-  const specifierNormalized = specifierUrl || specifier;
+    const specifierResolved = resolveSpecifier(specifier, baseUrl) || specifier;
 
-  const { scopes } = importMap;
-  if (scopes && importer) {
-    const scopeSpecifierMatching = Object.keys(scopes).find(
-      (scopeSpecifier) => {
-        return (
-          scopeSpecifier === importer ||
-          specifierIsPrefixOf(scopeSpecifier, importer)
-        )
-      },
-    );
-    if (scopeSpecifierMatching) {
-      const scopeMappings = scopes[scopeSpecifierMatching];
-      const mappingFromScopes = applyMappings(
-        scopeMappings,
-        specifierNormalized,
-        scopeSpecifierMatching,
-        onImportMapping,
+    const addressUrl = tryUrlResolution(address, baseUrl);
+    if (addressUrl === null) {
+      console.warn(
+        formulateAdressResolutionFailed({
+          address,
+          baseUrl,
+          specifier,
+        }),
       );
-      if (mappingFromScopes !== null) {
-        return mappingFromScopes
-      }
+      return
     }
-  }
 
-  const { imports } = importMap;
-  if (imports) {
-    const mappingFromImports = applyMappings(
-      imports,
-      specifierNormalized,
-      undefined,
-      onImportMapping,
-    );
-    if (mappingFromImports !== null) {
-      return mappingFromImports
+    if (specifier.endsWith("/") && !addressUrl.endsWith("/")) {
+      console.warn(
+        formulateAddressUrlRequiresTrailingSlash({
+          addressUrl,
+          address,
+          specifier,
+        }),
+      );
+      return
     }
-  }
-
-  if (specifierUrl) {
-    return specifierUrl
-  }
+    mappingsNormalized[specifierResolved] = addressUrl;
+  });
 
-  throw createBareSpecifierError({ specifier, importer })
+  return sortImports(mappingsNormalized)
 };
 
-const applyMappings = (
-  mappings,
-  specifierNormalized,
-  scope,
-  onImportMapping,
-) => {
-  const specifierCandidates = Object.keys(mappings);
+const normalizeScopes = (scopes, baseUrl) => {
+  const scopesNormalized = {};
 
-  let i = 0;
-  while (i < specifierCandidates.length) {
-    const specifierCandidate = specifierCandidates[i];
-    i++;
-    if (specifierCandidate === specifierNormalized) {
-      const address = mappings[specifierCandidate];
-      onImportMapping({
-        scope,
-        from: specifierCandidate,
-        to: address,
-        before: specifierNormalized,
-        after: address,
-      });
-      return address
-    }
-    if (specifierIsPrefixOf(specifierCandidate, specifierNormalized)) {
-      const address = mappings[specifierCandidate];
-      const afterSpecifier = specifierNormalized.slice(
-        specifierCandidate.length,
+  Object.keys(scopes).forEach((scopeSpecifier) => {
+    const scopeMappings = scopes[scopeSpecifier];
+    const scopeUrl = tryUrlResolution(scopeSpecifier, baseUrl);
+    if (scopeUrl === null) {
+      console.warn(
+        formulateScopeResolutionFailed({
+          scope: scopeSpecifier,
+          baseUrl,
+        }),
       );
-      const addressFinal = tryUrlResolution(afterSpecifier, address);
-      onImportMapping({
-        scope,
-        from: specifierCandidate,
-        to: address,
-        before: specifierNormalized,
-        after: addressFinal,
-      });
-      return addressFinal
+      return
     }
-  }
+    const scopeValueNormalized = normalizeMappings(scopeMappings, baseUrl);
+    scopesNormalized[scopeUrl] = scopeValueNormalized;
+  });
 
-  return null
+  return sortScopes(scopesNormalized)
 };
 
-const specifierIsPrefixOf = (specifierHref, href) => {
-  return (
-    specifierHref[specifierHref.length - 1] === "/" &&
-    href.startsWith(specifierHref)
-  )
-};
+const formulateBaseUrlMustBeStringOrUrl = ({
+  baseUrl,
+}) => `baseUrl must be a string or an url.
+--- base url ---
+${baseUrl}`;
+
+const formulateAddressMustBeAString = ({
+  specifier,
+  address,
+}) => `Address must be a string.
+--- address ---
+${address}
+--- specifier ---
+${specifier}`;
+
+const formulateAdressResolutionFailed = ({
+  address,
+  baseUrl,
+  specifier,
+}) => `Address url resolution failed.
+--- address ---
+${address}
+--- base url ---
+${baseUrl}
+--- specifier ---
+${specifier}`;
+
+const formulateAddressUrlRequiresTrailingSlash = ({
+  addressURL,
+  address,
+  specifier,
+}) => `Address must end with /.
+--- address url ---
+${addressURL}
+--- address ---
+${address}
+--- specifier ---
+${specifier}`;
 
-// https://github.com/systemjs/systemjs/blob/89391f92dfeac33919b0223bbf834a1f4eea5750/src/common.js#L136
+const formulateScopeResolutionFailed = ({
+  scope,
+  baseUrl,
+}) => `Scope url resolution failed.
+--- scope ---
+${scope}
+--- base url ---
+${baseUrl}`;
 
-const composeTwoImportMaps = (leftImportMap, rightImportMap) => {
-  assertImportMap(leftImportMap);
-  assertImportMap(rightImportMap);
+const pathnameToExtension = (pathname) => {
+  const slashLastIndex = pathname.lastIndexOf("/");
+  if (slashLastIndex !== -1) {
+    pathname = pathname.slice(slashLastIndex + 1);
+  }
 
-  const importMap = {};
+  const dotLastIndex = pathname.lastIndexOf(".");
+  if (dotLastIndex === -1) return ""
+  // if (dotLastIndex === pathname.length - 1) return ""
+  return pathname.slice(dotLastIndex)
+};
 
-  const leftImports = leftImportMap.imports;
-  const rightImports = rightImportMap.imports;
-  const leftHasImports = Boolean(leftImports);
-  const rightHasImports = Boolean(rightImports);
-  if (leftHasImports && rightHasImports) {
-    importMap.imports = composeTwoMappings(leftImports, rightImports);
-  } else if (leftHasImports) {
-    importMap.imports = { ...leftImports };
-  } else if (rightHasImports) {
-    importMap.imports = { ...rightImports };
+const resolveImport = ({
+  specifier,
+  importer,
+  importMap,
+  defaultExtension = false,
+  createBareSpecifierError,
+  onImportMapping = () => {},
+}) => {
+  let url;
+  if (importMap) {
+    url = applyImportMap({
+      importMap,
+      specifier,
+      importer,
+      createBareSpecifierError,
+      onImportMapping,
+    });
+  } else {
+    url = resolveUrl(specifier, importer);
   }
 
-  const leftScopes = leftImportMap.scopes;
-  const rightScopes = rightImportMap.scopes;
-  const leftHasScopes = Boolean(leftScopes);
-  const rightHasScopes = Boolean(rightScopes);
-  if (leftHasScopes && rightHasScopes) {
-    importMap.scopes = composeTwoScopes(
-      leftScopes,
-      rightScopes,
-      importMap.imports || {},
-    );
-  } else if (leftHasScopes) {
-    importMap.scopes = { ...leftScopes };
-  } else if (rightHasScopes) {
-    importMap.scopes = { ...rightScopes };
+  if (defaultExtension) {
+    url = applyDefaultExtension({ url, importer, defaultExtension });
   }
 
-  return importMap
+  return url
 };
 
-const composeTwoMappings = (leftMappings, rightMappings) => {
-  const mappings = {};
+const applyDefaultExtension = ({ url, importer, defaultExtension }) => {
+  if (urlToPathname(url).endsWith("/")) {
+    return url
+  }
 
-  Object.keys(leftMappings).forEach((leftSpecifier) => {
-    if (objectHasKey(rightMappings, leftSpecifier)) {
-      // will be overidden
-      return
+  if (typeof defaultExtension === "string") {
+    const extension = pathnameToExtension(url);
+    if (extension === "") {
+      return `${url}${defaultExtension}`
     }
-    const leftAddress = leftMappings[leftSpecifier];
-    const rightSpecifier = Object.keys(rightMappings).find((rightSpecifier) => {
-      return compareAddressAndSpecifier(leftAddress, rightSpecifier)
-    });
-    mappings[leftSpecifier] = rightSpecifier
-      ? rightMappings[rightSpecifier]
-      : leftAddress;
-  });
-
-  Object.keys(rightMappings).forEach((rightSpecifier) => {
-    mappings[rightSpecifier] = rightMappings[rightSpecifier];
-  });
-
-  return mappings
-};
+    return url
+  }
 
-const objectHasKey = (object, key) =>
-  Object.prototype.hasOwnProperty.call(object, key);
+  if (defaultExtension === true) {
+    const extension = pathnameToExtension(url);
+    if (extension === "" && importer) {
+      const importerPathname = urlToPathname(importer);
+      const importerExtension = pathnameToExtension(importerPathname);
+      return `${url}${importerExtension}`
+    }
+  }
 
-const compareAddressAndSpecifier = (address, specifier) => {
-  const addressUrl = resolveUrl(address, "file:///");
-  const specifierUrl = resolveUrl(specifier, "file:///");
-  return addressUrl === specifierUrl
+  return url
 };
 
-const composeTwoScopes = (leftScopes, rightScopes, imports) => {
-  const scopes = {};
-
-  Object.keys(leftScopes).forEach((leftScopeKey) => {
-    if (objectHasKey(rightScopes, leftScopeKey)) {
-      // will be merged
-      scopes[leftScopeKey] = leftScopes[leftScopeKey];
-      return
-    }
-    const topLevelSpecifier = Object.keys(imports).find(
-      (topLevelSpecifierCandidate) => {
-        return compareAddressAndSpecifier(
-          leftScopeKey,
-          topLevelSpecifierCandidate,
-        )
-      },
-    );
-    if (topLevelSpecifier) {
-      scopes[imports[topLevelSpecifier]] = leftScopes[leftScopeKey];
+const jsenvPluginHtmlReferenceAnalysis = ({
+  inlineContent,
+  inlineConvertedScript,
+}) => {
+  /*
+   * About importmap found in HTML files:
+   * - feeds importmap files to jsenv kitchen
+   * - use importmap to resolve import (when there is one + fallback to other resolution mecanism)
+   * - inline importmap with [src=""]
+   *
+   * A correct importmap resolution should scope importmap resolution per html file.
+   * It would be doable by adding ?html_id to each js file in order to track
+   * the html file importing it.
+   * Considering it happens only when all the following conditions are met:
+   * - 2+ html files are using an importmap
+   * - the importmap used is not the same
+   * - the importmap contain conflicting mappings
+   * - these html files are both executed during the same scenario (dev, test, build)
+   * And that it would be ugly to see ?html_id all over the place
+   * -> The importmap resolution implemented here takes a shortcut and does the following:
+   * - All importmap found are merged into a single one that is applied to every import specifiers
+   */
+
+  let globalImportmap = null;
+  const importmaps = {};
+  const onImportmapParsed = (htmlUrl, importmap) => {
+    if (importmap) {
+      importmaps[htmlUrl] = normalizeImportMap(importmap, htmlUrl);
     } else {
-      scopes[leftScopeKey] = leftScopes[leftScopeKey];
+      importmaps[htmlUrl] = null;
     }
-  });
+    globalImportmap = Object.keys(importmaps).reduce((previous, url) => {
+      const importmap = importmaps[url];
+      if (!previous) {
+        return importmap;
+      }
+      if (!importmap) {
+        return previous;
+      }
+      return composeTwoImportMaps(previous, importmap);
+    }, null);
+  };
 
-  Object.keys(rightScopes).forEach((rightScopeKey) => {
-    if (objectHasKey(scopes, rightScopeKey)) {
-      scopes[rightScopeKey] = composeTwoMappings(
-        scopes[rightScopeKey],
-        rightScopes[rightScopeKey],
-      );
-    } else {
-      scopes[rightScopeKey] = {
-        ...rightScopes[rightScopeKey],
-      };
-    }
-  });
+  return {
+    name: "jsenv:html_reference_analysis",
+    appliesDuring: "*",
+    resolveReference: {
+      js_import: (reference) => {
+        if (!globalImportmap) {
+          return null;
+        }
+        try {
+          let fromMapping = false;
+          const result = resolveImport({
+            specifier: reference.specifier,
+            importer: reference.ownerUrlInfo.url,
+            importMap: globalImportmap,
+            onImportMapping: () => {
+              fromMapping = true;
+            },
+          });
+          if (fromMapping) {
+            return result;
+          }
+          return null;
+        } catch (e) {
+          if (e.message.includes("bare specifier")) {
+            // in theory we should throw to be compliant with web behaviour
+            // but for now it's simpler to return null
+            // and let a chance to other plugins to handle the bare specifier
+            // (node esm resolution)
+            // and we want importmap to be prio over node esm so we cannot put this plugin after
+            return null;
+          }
+          throw e;
+        }
+      },
+    },
+    transformUrlContent: {
+      html: async (urlInfo) => {
+        let importmapFound = false;
+        let importmapParsedCallbackSet = new Set();
+        const onImportmapReady = (importmap) => {
+          onImportmapParsed(urlInfo.url, importmap);
+          importmapParsedCallbackSet.forEach((callback) => {
+            callback();
+          });
+          importmapParsedCallbackSet.clear();
+        };
 
-  return scopes
-};
+        const content = urlInfo.content;
+        const htmlAst = parseHtmlString(content);
 
-const sortImports = (imports) => {
-  const mappingsSorted = {};
+        const mutations = [];
+        const actions = [];
+        const finalizeCallbacks = [];
 
-  Object.keys(imports)
-    .sort(compareLengthOrLocaleCompare)
-    .forEach((name) => {
-      mappingsSorted[name] = imports[name];
-    });
+        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);
+          } 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 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,
+          });
+          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 },
+          });
 
-  return mappingsSorted
-};
+          actions.push(async () => {
+            if (expectedType === "js_module" && importmapFound) {
+              await new Promise((resolve) => {
+                importmapParsedCallbackSet.add(resolve);
+              });
+            }
+            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;
+          }
+          return createInlineReference(node, inlineContent, {
+            type,
+            subtype,
+            expectedType,
+            contentType,
+          });
+        };
 
-const sortScopes = (scopes) => {
-  const scopesSorted = {};
+        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,
+            });
+            if (ref) {
+              finalizeCallbacks.push(() => {
+                if (ref.expectedType) ; else {
+                  ref.expectedType = decideLinkExpectedType(ref, urlInfo);
+                }
+              });
+            }
+          },
+          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;
+
+              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();
+                  onImportmapReady(JSON.parse(importmapInlineUrlInfo.content));
+                  mutations.push(() => {
+                    setHtmlNodeText(
+                      scriptNode,
+                      importmapInlineUrlInfo.content,
+                      {
+                        indentation: "auto",
+                      },
+                    );
+                    setHtmlNodeAttributes(scriptNode, {
+                      "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 () => {
+                    await inlineImportmapUrlInfo.cook();
+                    onImportmapReady(
+                      JSON.parse(inlineImportmapUrlInfo.content),
+                    );
+                    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;
+            }
+            const externalRef = visitSrc(scriptNode, {
+              type: "script",
+              subtype: type,
+              expectedType: type,
+            });
+            if (externalRef) {
+              return;
+            }
 
-  Object.keys(scopes)
-    .sort(compareLengthOrLocaleCompare)
-    .forEach((scopeSpecifier) => {
-      scopesSorted[scopeSpecifier] = sortImports(scopes[scopeSpecifier]);
-    });
+            // 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;
+            }
 
-  return scopesSorted
-};
+            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",
+                  });
+                });
+              }
+            }
+          },
+          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) {
+          onImportmapReady();
+        }
+        finalizeCallbacks.forEach((finalizeCallback) => {
+          finalizeCallback();
+        });
 
-const compareLengthOrLocaleCompare = (a, b) => {
-  return b.length - a.length || a.localeCompare(b)
+        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);
+      },
+    },
+  };
 };
 
-const normalizeImportMap = (importMap, baseUrl) => {
-  assertImportMap(importMap);
-
-  if (!isStringOrUrl(baseUrl)) {
-    throw new TypeError(formulateBaseUrlMustBeStringOrUrl({ baseUrl }))
+const crossOriginCompatibleTagNames = ["script", "link", "img", "source"];
+const integrityCompatibleTagNames = ["script", "link", "img", "source"];
+const readFetchMetas = (node) => {
+  const meta = {};
+  if (crossOriginCompatibleTagNames.includes(node.nodeName)) {
+    const crossorigin = getHtmlNodeAttribute(node, "crossorigin") !== undefined;
+    meta.crossorigin = crossorigin;
   }
-
-  const { imports, scopes } = importMap;
-
-  return {
-    imports: imports ? normalizeMappings(imports, baseUrl) : undefined,
-    scopes: scopes ? normalizeScopes(scopes, baseUrl) : undefined,
+  if (integrityCompatibleTagNames.includes(node.nodeName)) {
+    const integrity = getHtmlNodeAttribute(node, "integrity");
+    meta.integrity = integrity;
   }
+  return meta;
 };
 
-const isStringOrUrl = (value) => {
-  if (typeof value === "string") {
-    return true
+const decideLinkExpectedType = (linkReference, htmlUrlInfo) => {
+  const rel = getHtmlNodeAttribute(linkReference.astInfo.node, "rel");
+  if (rel === "webmanifest") {
+    return "webmanifest";
   }
-
-  if (typeof URL === "function" && value instanceof URL) {
-    return true
+  if (rel === "modulepreload") {
+    return "js_module";
   }
-
-  return false
-};
-
-const normalizeMappings = (mappings, baseUrl) => {
-  const mappingsNormalized = {};
-
-  Object.keys(mappings).forEach((specifier) => {
-    const address = mappings[specifier];
-
-    if (typeof address !== "string") {
-      console.warn(
-        formulateAddressMustBeAString({
-          address,
-          specifier,
-        }),
-      );
-      return
-    }
-
-    const specifierResolved = resolveSpecifier(specifier, baseUrl) || specifier;
-
-    const addressUrl = tryUrlResolution(address, baseUrl);
-    if (addressUrl === null) {
-      console.warn(
-        formulateAdressResolutionFailed({
-          address,
-          baseUrl,
-          specifier,
-        }),
-      );
-      return
+  if (rel === "stylesheet") {
+    return "css";
+  }
+  if (rel === "preload") {
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
+    const as = getHtmlNodeAttribute(linkReference.astInfo.node, "as");
+    if (as === "document") {
+      return "html";
     }
-
-    if (specifier.endsWith("/") && !addressUrl.endsWith("/")) {
-      console.warn(
-        formulateAddressUrlRequiresTrailingSlash({
-          addressUrl,
-          address,
-          specifier,
-        }),
-      );
-      return
+    if (as === "style") {
+      return "css";
     }
-    mappingsNormalized[specifierResolved] = addressUrl;
-  });
-
-  return sortImports(mappingsNormalized)
-};
-
-const normalizeScopes = (scopes, baseUrl) => {
-  const scopesNormalized = {};
-
-  Object.keys(scopes).forEach((scopeSpecifier) => {
-    const scopeMappings = scopes[scopeSpecifier];
-    const scopeUrl = tryUrlResolution(scopeSpecifier, baseUrl);
-    if (scopeUrl === null) {
-      console.warn(
-        formulateScopeResolutionFailed({
-          scope: scopeSpecifier,
-          baseUrl,
-        }),
-      );
-      return
+    if (as === "script") {
+      for (const referenceToOther of htmlUrlInfo.referenceToOthersSet) {
+        if (referenceToOther.url !== linkReference.url) {
+          continue;
+        }
+        if (referenceToOther.type !== "script") {
+          continue;
+        }
+        return referenceToOther.expectedType;
+      }
+      return undefined;
     }
-    const scopeValueNormalized = normalizeMappings(scopeMappings, baseUrl);
-    scopesNormalized[scopeUrl] = scopeValueNormalized;
-  });
-
-  return sortScopes(scopesNormalized)
+  }
+  return undefined;
 };
 
-const formulateBaseUrlMustBeStringOrUrl = ({
-  baseUrl,
-}) => `baseUrl must be a string or an url.
---- base url ---
-${baseUrl}`;
-
-const formulateAddressMustBeAString = ({
-  specifier,
-  address,
-}) => `Address must be a string.
---- address ---
-${address}
---- specifier ---
-${specifier}`;
+// const applyWebUrlResolution = (url, baseUrl) => {
+//   if (url[0] === "/") {
+//     return new URL(url.slice(1), baseUrl).href;
+//   }
+//   return new URL(url, baseUrl).href;
+// };
 
-const formulateAdressResolutionFailed = ({
-  address,
-  baseUrl,
-  specifier,
-}) => `Address url resolution failed.
---- address ---
-${address}
---- base url ---
-${baseUrl}
---- specifier ---
-${specifier}`;
+// css: parseAndTransformCssUrls,
 
-const formulateAddressUrlRequiresTrailingSlash = ({
-  addressURL,
-  address,
-  specifier,
-}) => `Address must end with /.
---- address url ---
-${addressURL}
---- address ---
-${address}
---- specifier ---
-${specifier}`;
+const jsenvPluginWebmanifestReferenceAnalysis = () => {
+  return {
+    name: "jsenv:webmanifest_reference_analysis",
+    appliesDuring: "*",
+    transformUrlContent: {
+      webmanifest: parseAndTransformWebmanifestUrls,
+    },
+  };
+};
 
-const formulateScopeResolutionFailed = ({
-  scope,
-  baseUrl,
-}) => `Scope url resolution failed.
---- scope ---
-${scope}
---- base url ---
-${baseUrl}`;
+const parseAndTransformWebmanifestUrls = async (urlInfo) => {
+  const content = urlInfo.content;
+  const manifest = JSON.parse(content);
+  const actions = [];
+  const { icons = [] } = manifest;
+  icons.forEach((icon) => {
+    const iconReference = urlInfo.dependencies.found({
+      type: "webmanifest_icon_src",
+      specifier: icon.src,
+    });
+    actions.push(async () => {
+      await iconReference.readGeneratedSpecifier();
+      icon.src = iconReference.generatedSpecifier;
+    });
+  });
 
-const pathnameToExtension = (pathname) => {
-  const slashLastIndex = pathname.lastIndexOf("/");
-  if (slashLastIndex !== -1) {
-    pathname = pathname.slice(slashLastIndex + 1);
+  if (actions.length === 0) {
+    return null;
   }
+  await Promise.all(actions.map((action) => action()));
+  return JSON.stringify(manifest, null, "  ");
+};
 
-  const dotLastIndex = pathname.lastIndexOf(".");
-  if (dotLastIndex === -1) return ""
-  // if (dotLastIndex === pathname.length - 1) return ""
-  return pathname.slice(dotLastIndex)
+/*
+ * https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/css/src/CSSTransformer.js
+ */
+
+
+const jsenvPluginCssReferenceAnalysis = () => {
+  return {
+    name: "jsenv:css_reference_analysis",
+    appliesDuring: "*",
+    transformUrlContent: {
+      css: parseAndTransformCssUrls,
+    },
+  };
 };
 
-const resolveImport = ({
-  specifier,
-  importer,
-  importMap,
-  defaultExtension = false,
-  createBareSpecifierError,
-  onImportMapping = () => {},
-}) => {
-  let url;
-  if (importMap) {
-    url = applyImportMap({
-      importMap,
-      specifier,
-      importer,
-      createBareSpecifierError,
-      onImportMapping,
+const parseAndTransformCssUrls = async (urlInfo) => {
+  const cssUrls = await parseCssUrls({
+    css: urlInfo.content,
+    url: urlInfo.originalUrl,
+  });
+  const actions = [];
+  const magicSource = createMagicSource(urlInfo.content);
+  for (const cssUrl of cssUrls) {
+    const reference = urlInfo.dependencies.found({
+      type: cssUrl.type,
+      specifier: cssUrl.specifier,
+      specifierStart: cssUrl.start,
+      specifierEnd: cssUrl.end,
+      specifierLine: cssUrl.line,
+      specifierColumn: cssUrl.column,
+    });
+    actions.push(async () => {
+      await reference.readGeneratedSpecifier();
+      const replacement = reference.generatedSpecifier;
+      magicSource.replace({
+        start: cssUrl.start,
+        end: cssUrl.end,
+        replacement,
+      });
     });
-  } else {
-    url = resolveUrl(specifier, importer);
   }
-
-  if (defaultExtension) {
-    url = applyDefaultExtension({ url, importer, defaultExtension });
+  if (actions.length > 0) {
+    await Promise.all(actions.map((action) => action()));
   }
+  return magicSource.toContentAndSourcemap();
+};
 
-  return url
+const jsenvPluginJsReferenceAnalysis = ({ inlineContent }) => {
+  return [
+    {
+      name: "jsenv:js_reference_analysis",
+      appliesDuring: "*",
+      transformUrlContent: {
+        js_classic: (urlInfo) =>
+          parseAndTransformJsReferences(urlInfo, {
+            inlineContent,
+            canUseTemplateLiterals:
+              urlInfo.context.isSupportedOnCurrentClients("template_literals"),
+          }),
+        js_module: (urlInfo) =>
+          parseAndTransformJsReferences(urlInfo, {
+            inlineContent,
+            canUseTemplateLiterals:
+              urlInfo.context.isSupportedOnCurrentClients("template_literals"),
+          }),
+      },
+    },
+  ];
 };
 
-const applyDefaultExtension = ({ url, importer, defaultExtension }) => {
-  if (urlToPathname(url).endsWith("/")) {
-    return url
-  }
+const parseAndTransformJsReferences = async (
+  urlInfo,
+  { inlineContent, canUseTemplateLiterals },
+) => {
+  const magicSource = createMagicSource(urlInfo.content);
+  const parallelActions = [];
+  const sequentialActions = [];
+  const isNodeJs =
+    Object.keys(urlInfo.context.runtimeCompat).toString() === "node";
 
-  if (typeof defaultExtension === "string") {
-    const extension = pathnameToExtension(url);
-    if (extension === "") {
-      return `${url}${defaultExtension}`
+  const onInlineReference = (inlineReferenceInfo) => {
+    const inlineUrl = getUrlForContentInsideJs(inlineReferenceInfo, {
+      url: urlInfo.url,
+    });
+    let { quote } = inlineReferenceInfo;
+    if (quote === "`" && !canUseTemplateLiterals) {
+      // if quote is "`" and template literals are not supported
+      // we'll use a regular string (single or double quote)
+      // when rendering the string
+      quote = JS_QUOTES.pickBest(inlineReferenceInfo.content);
+    }
+    const inlineReference = urlInfo.dependencies.foundInline({
+      type: "js_inline_content",
+      subtype: inlineReferenceInfo.type, // "new_blob_first_arg", "new_inline_content_first_arg", "json_parse_first_arg"
+      isOriginalPosition: urlInfo.content === urlInfo.originalContent,
+      specifierLine: inlineReferenceInfo.line,
+      specifierColumn: inlineReferenceInfo.column,
+      specifier: inlineUrl,
+      contentType: inlineReferenceInfo.contentType,
+      content: inlineReferenceInfo.content,
+    });
+    const inlineUrlInfo = inlineReference.urlInfo;
+    inlineUrlInfo.jsQuote = quote;
+    inlineReference.escape = (value) => {
+      return JS_QUOTES.escapeSpecialChars(value.slice(1, -1), { quote });
+    };
+
+    sequentialActions.push(async () => {
+      await inlineUrlInfo.cook();
+      const replacement = JS_QUOTES.escapeSpecialChars(inlineUrlInfo.content, {
+        quote,
+      });
+      magicSource.replace({
+        start: inlineReferenceInfo.start,
+        end: inlineReferenceInfo.end,
+        replacement,
+      });
+    });
+  };
+  const onExternalReference = (externalReferenceInfo) => {
+    if (
+      externalReferenceInfo.subtype === "import_static" ||
+      externalReferenceInfo.subtype === "import_dynamic"
+    ) {
+      urlInfo.data.usesImport = true;
+    }
+    if (
+      isNodeJs &&
+      externalReferenceInfo.type === "js_url" &&
+      externalReferenceInfo.expectedSubtype === "worker" &&
+      externalReferenceInfo.expectedType === "js_classic" &&
+      // TODO: it's true also if closest package.json
+      // is type: module
+      urlToExtension$1(
+        new URL(externalReferenceInfo.specifier, urlInfo.url).href,
+      ) === ".mjs"
+    ) {
+      externalReferenceInfo.expectedType = "js_module";
+    }
+    const reference = urlInfo.dependencies.found({
+      type: externalReferenceInfo.type,
+      subtype: externalReferenceInfo.subtype,
+      expectedType: externalReferenceInfo.expectedType,
+      expectedSubtype: externalReferenceInfo.expectedSubtype || urlInfo.subtype,
+      specifier: externalReferenceInfo.specifier,
+      specifierStart: externalReferenceInfo.start,
+      specifierEnd: externalReferenceInfo.end,
+      specifierLine: externalReferenceInfo.line,
+      specifierColumn: externalReferenceInfo.column,
+      data: externalReferenceInfo.data,
+      baseUrl: {
+        "StringLiteral": externalReferenceInfo.baseUrl,
+        "window.location": urlInfo.url,
+        "window.origin": urlInfo.context.rootDirectoryUrl,
+        "import.meta.url": urlInfo.url,
+        "context.meta.url": urlInfo.url,
+        "document.currentScript.src": urlInfo.url,
+      }[externalReferenceInfo.baseUrlType],
+      importAttributes: externalReferenceInfo.importAttributes,
+      astInfo: externalReferenceInfo.astInfo,
+    });
+    parallelActions.push(async () => {
+      await reference.readGeneratedSpecifier();
+      const replacement = reference.generatedSpecifier;
+      magicSource.replace({
+        start: externalReferenceInfo.start,
+        end: externalReferenceInfo.end,
+        replacement,
+      });
+      if (reference.mutation) {
+        reference.mutation(magicSource, urlInfo);
+      }
+    });
+  };
+  const jsReferenceInfos = parseJsUrls({
+    js: urlInfo.content,
+    url: urlInfo.originalUrl,
+    ast: urlInfo.contentAst,
+    isJsModule: urlInfo.type === "js_module",
+    isWebWorker: isWebWorkerUrlInfo(urlInfo),
+    inlineContent,
+    isNodeJs,
+  });
+  for (const jsReferenceInfo of jsReferenceInfos) {
+    if (jsReferenceInfo.isInline) {
+      onInlineReference(jsReferenceInfo);
+    } else {
+      onExternalReference(jsReferenceInfo);
     }
-    return url
   }
-
-  if (defaultExtension === true) {
-    const extension = pathnameToExtension(url);
-    if (extension === "" && importer) {
-      const importerPathname = urlToPathname(importer);
-      const importerExtension = pathnameToExtension(importerPathname);
-      return `${url}${importerExtension}`
-    }
+  if (parallelActions.length > 0) {
+    await Promise.all(parallelActions.map((action) => action()));
+  }
+  if (sequentialActions.length > 0) {
+    await sequentialActions.reduce(async (previous, action) => {
+      await previous;
+      await action();
+    }, Promise.resolve());
   }
 
-  return url
+  const { content, sourcemap } = magicSource.toContentAndSourcemap();
+  return { content, sourcemap };
 };
 
-/*
- * Plugin to read and apply importmap files found in html files.
- * - feeds importmap files to jsenv kitchen
- * - use importmap to resolve import (when there is one + fallback to other resolution mecanism)
- * - inline importmap with [src=""]
- *
- * A correct importmap resolution should scope importmap resolution per html file.
- * It would be doable by adding ?html_id to each js file in order to track
- * the html file importing it.
- * Considering it happens only when all the following conditions are met:
- * - 2+ html files are using an importmap
- * - the importmap used is not the same
- * - the importmap contain conflicting mappings
- * - these html files are both executed during the same scenario (dev, test, build)
- * And that it would be ugly to see ?html_id all over the place
- * -> The importmap resolution implemented here takes a shortcut and does the following:
- * - All importmap found are merged into a single one that is applied to every import specifiers
- */
-
-
-const jsenvPluginImportmap = () => {
-  let finalImportmap = null;
-  const importmaps = {};
-  const onHtmlImportmapParsed = (importmap, htmlUrl) => {
-    importmaps[htmlUrl] = importmap
-      ? normalizeImportMap(importmap, htmlUrl)
-      : null;
-    finalImportmap = Object.keys(importmaps).reduce((previous, url) => {
-      const importmap = importmaps[url];
-      if (!previous) {
-        return importmap;
-      }
-      if (!importmap) {
-        return previous;
-      }
-      return composeTwoImportMaps(previous, importmap);
-    }, null);
-  };
+const jsenvPluginReferenceAnalysis = ({
+  inlineContent = true,
+  inlineConvertedScript = false,
+  fetchInlineUrls = true,
+}) => {
+  return [
+    jsenvPluginDirectoryReferenceAnalysis(),
+    jsenvPluginHtmlReferenceAnalysis({
+      inlineContent,
+      inlineConvertedScript,
+    }),
+    jsenvPluginWebmanifestReferenceAnalysis(),
+    jsenvPluginCssReferenceAnalysis(),
+    jsenvPluginJsReferenceAnalysis({
+      inlineContent,
+    }),
+    ...(inlineContent ? [jsenvPluginDataUrlsAnalysis()] : []),
+    ...(inlineContent && fetchInlineUrls
+      ? [jsenvPluginInlineContentFetcher()]
+      : []),
+    jsenvPluginReferenceExpectedTypes(),
+  ];
+};
 
+const jsenvPluginInlineContentFetcher = () => {
   return {
-    name: "jsenv:importmap",
+    name: "jsenv:inline_content_fetcher",
     appliesDuring: "*",
-    resolveReference: {
-      js_import: (reference) => {
-        if (!finalImportmap) {
-          return null;
-        }
-        try {
-          let fromMapping = false;
-          const result = resolveImport({
-            specifier: reference.specifier,
-            importer: reference.ownerUrlInfo.url,
-            importMap: finalImportmap,
-            onImportMapping: () => {
-              fromMapping = true;
-            },
-          });
-          if (fromMapping) {
-            return result;
-          }
-          return null;
-        } catch (e) {
-          if (e.message.includes("bare specifier")) {
-            // in theory we should throw to be compliant with web behaviour
-            // but for now it's simpler to return null
-            // and let a chance to other plugins to handle the bare specifier
-            // (node esm resolution)
-            // and we want importmap to be prio over node esm so we cannot put this plugin after
-            return null;
-          }
-          throw e;
-        }
-      },
-    },
-    transformUrlContent: {
-      html: async (htmlUrlInfo) => {
-        const htmlAst = parseHtmlString(htmlUrlInfo.content);
-        const importmap = findHtmlNode(htmlAst, (node) => {
-          if (node.nodeName !== "script") {
-            return false;
-          }
-          const type = getHtmlNodeAttribute(node, "type");
-          if (type === undefined || type !== "importmap") {
-            return false;
-          }
-          return true;
-        });
-        if (!importmap) {
-          onHtmlImportmapParsed(null, htmlUrlInfo.url);
-          return null;
-        }
-        const handleInlineImportmap = async (importmap, htmlNodeText) => {
-          const { line, column, isOriginal } = getHtmlNodePosition(importmap, {
-            preferOriginal: true,
-          });
-          const inlineImportmapUrl = getUrlForContentInsideHtml(importmap, {
-            htmlUrl: htmlUrlInfo.url,
-          });
-          const inlineImportmapReference = htmlUrlInfo.dependencies.foundInline(
-            {
-              type: "script",
-              isOriginalPosition: isOriginal,
-              specifierLine: line - 1,
-              specifierColumn: column,
-              specifier: inlineImportmapUrl,
-              contentType: "application/importmap+json",
-              content: htmlNodeText,
-            },
-          );
-          const inlineImportmapUrlInfo = inlineImportmapReference.urlInfo;
-          await inlineImportmapUrlInfo.cook();
-          setHtmlNodeText(importmap, inlineImportmapUrlInfo.content, {
-            indentation: "auto",
-          });
-          setHtmlNodeAttributes(importmap, {
-            "jsenv-cooked-by": "jsenv:importmap",
-          });
-          onHtmlImportmapParsed(
-            JSON.parse(inlineImportmapUrlInfo.content),
-            htmlUrlInfo.url,
-          );
-        };
-        const handleImportmapWithSrc = async (importmap, 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
-          // In this situation the ref to the importmap was already discovered
-          // when parsing the HTML
-          let importmapReference = null;
-          for (const referenceToOther of htmlUrlInfo.referenceToOthersSet) {
-            if (referenceToOther.generatedSpecifier === src) {
-              importmapReference = referenceToOther;
-              break;
-            }
-          }
-          const { line, column, isOriginal } = getHtmlNodePosition(importmap, {
-            preferOriginal: true,
-          });
-          const importmapInlineUrl = getUrlForContentInsideHtml(importmap, {
-            htmlUrl: htmlUrlInfo.url,
-          });
-          const importmapReferenceInlined = importmapReference.inline({
-            line: line - 1,
-            column,
-            isOriginal,
-            specifier: importmapInlineUrl,
-            contentType: "application/importmap+json",
-          });
-          const importmapInlineUrlInfo = importmapReferenceInlined.urlInfo;
-          await importmapInlineUrlInfo.cook();
-          onHtmlImportmapParsed(
-            JSON.parse(importmapInlineUrlInfo.content),
-            htmlUrlInfo.url,
-          );
-          setHtmlNodeText(importmap, importmapInlineUrlInfo.content, {
-            indentation: "auto",
-          });
-          setHtmlNodeAttributes(importmap, {
-            "src": undefined,
-            "jsenv-inlined-by": "jsenv:importmap",
-            "inlined-from-src": src,
-          });
-        };
-
-        const src = getHtmlNodeAttribute(importmap, "src");
-        if (src) {
-          await handleImportmapWithSrc(importmap, src);
-        } else {
-          const htmlNodeText = getHtmlNodeText(importmap);
-          if (htmlNodeText) {
-            await handleInlineImportmap(importmap, htmlNodeText);
-          }
+    fetchUrlContent: async (urlInfo) => {
+      if (!urlInfo.isInline) {
+        return null;
+      }
+      // - we must use last reference because
+      //   when updating the file, first reference is the previous version
+      // - we cannot use urlInfo.lastReference because it can be the reference created by "http_request"
+      let lastInlineReference;
+      for (const reference of urlInfo.referenceFromOthersSet) {
+        if (reference.isInline) {
+          lastInlineReference = reference;
         }
-        // once this plugin knows the importmap, it will use it
-        // to map imports. These import specifiers will be normalized
-        // by "formatReferencedUrl" 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 (htmlUrlInfo.context.build) {
-          removeHtmlNode(importmap);
+      }
+      const { prev } = lastInlineReference;
+      if (prev && !prev.isInline) {
+        // got inlined, cook original url
+        if (lastInlineReference.content === undefined) {
+          const originalUrlInfo = prev.urlInfo;
+          await originalUrlInfo.cook();
+          lastInlineReference.content = originalUrlInfo.content;
+          lastInlineReference.contentType = originalUrlInfo.contentType;
         }
-        return {
-          content: stringifyHtmlAst(htmlAst),
-        };
-      },
+      }
+      return {
+        originalContent: urlInfo.originalContent,
+        content: lastInlineReference.content,
+        contentType: lastInlineReference.contentType,
+      };
     },
   };
 };
@@ -18050,6 +18065,7 @@ const jsenvPluginProtocolFile = ({
         reference.leadsToADirectory = stat && stat.isDirectory();
         if (reference.leadsToADirectory) {
           const directoryAllowed =
+            reference.type === "http_request" ||
             reference.type === "filesystem" ||
             (typeof directoryReferenceAllowed === "function" &&
               directoryReferenceAllowed(reference)) ||
@@ -18115,7 +18131,6 @@ const jsenvPluginProtocolFile = ({
         }
         const urlObject = new URL(urlInfo.url);
         if (urlInfo.firstReference.leadsToADirectory) {
-          const directoryEntries = readdirSync(urlObject);
           if (!urlInfo.filenameHint) {
             if (urlInfo.firstReference.type === "filesystem") {
               urlInfo.filenameHint = `${
@@ -18125,10 +18140,17 @@ 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,
+          });
           return {
             type: "directory",
-            contentType: "application/json",
-            content: JSON.stringify(directoryEntries, null, "  "),
+            contentType: headers["content-type"],
+            contentLength: headers["content-length"],
+            content: body,
           };
         }
         if (
@@ -19254,8 +19276,16 @@ const jsenvPluginHotSearchParam = () => {
       // At this stage the parent is using ?hot and we are going to decide if
       // we propagate the search param to child.
       const referencedUrlInfo = reference.urlInfo;
-      const { modifiedTimestamp, dereferencedTimestamp } = referencedUrlInfo;
-      if (!modifiedTimestamp && !dereferencedTimestamp) {
+      const {
+        modifiedTimestamp,
+        descendantModifiedTimestamp,
+        dereferencedTimestamp,
+      } = referencedUrlInfo;
+      if (
+        !modifiedTimestamp &&
+        !descendantModifiedTimestamp &&
+        !dereferencedTimestamp
+      ) {
         return null;
       }
       // The goal is to send an url that will bypass client (the browser) cache
@@ -19268,10 +19298,11 @@ const jsenvPluginHotSearchParam = () => {
       // We use the latest timestamp to ensure it's fresh
       // The dereferencedTimestamp is needed because when a js module is re-referenced
       // browser must re-execute it, even if the code is not modified
-      const latestTimestamp =
-        dereferencedTimestamp && modifiedTimestamp
-          ? Math.max(dereferencedTimestamp, modifiedTimestamp)
-          : dereferencedTimestamp || modifiedTimestamp;
+      const latestTimestamp = Math.max(
+        modifiedTimestamp,
+        descendantModifiedTimestamp,
+        dereferencedTimestamp,
+      );
       return {
         hot: latestTimestamp,
       };
@@ -19333,89 +19364,157 @@ const jsenvPluginAutoreloadServer = ({
           }
           return url;
         };
-        const propagateUpdate = (firstUrlInfo) => {
-          const iterate = (urlInfo, seen) => {
-            if (urlInfo.data.hotAcceptSelf) {
-              return {
-                accepted: true,
-                reason:
-                  urlInfo === firstUrlInfo
-                    ? `file accepts hot reload`
-                    : `a dependent file accepts hot reload`,
-                instructions: [
-                  {
-                    type: urlInfo.type,
-                    boundary: formatUrlForClient(urlInfo.url),
+        const update = (firstUrlInfo) => {
+          const boundaries = new Set();
+          const instructions = [];
+          const propagateUpdate = (firstUrlInfo) => {
+            const iterate = (urlInfo, chain) => {
+              if (urlInfo.data.hotAcceptSelf) {
+                boundaries.add(urlInfo);
+                instructions.push({
+                  type: urlInfo.type,
+                  boundary: formatUrlForClient(urlInfo.url),
+                  acceptedBy: formatUrlForClient(urlInfo.url),
+                });
+                return {
+                  accepted: true,
+                  reason:
+                    urlInfo === firstUrlInfo
+                      ? `file accepts hot reload`
+                      : `a dependent file accepts hot reload`,
+                };
+              }
+              if (urlInfo.data.hotDecline) {
+                return {
+                  declined: true,
+                  reason: `file declines hot reload`,
+                  declinedBy: formatUrlForClient(urlInfo.url),
+                };
+              }
+              let instructionCountBefore = instructions.length;
+              for (const referenceFromOther of urlInfo.referenceFromOthersSet) {
+                if (
+                  referenceFromOther.isImplicit &&
+                  referenceFromOther.isWeak
+                ) {
+                  if (!referenceFromOther.original) {
+                    continue;
+                  }
+                  if (referenceFromOther.original.isWeak) {
+                    continue;
+                  }
+                }
+                const urlInfoReferencingThisOne =
+                  referenceFromOther.ownerUrlInfo;
+                if (urlInfoReferencingThisOne.data.hotDecline) {
+                  return {
+                    declined: true,
+                    reason: `a dependent file declines hot reload`,
+                    declinedBy: formatUrlForClient(
+                      urlInfoReferencingThisOne.url,
+                    ),
+                  };
+                }
+                const { hotAcceptDependencies = [] } =
+                  urlInfoReferencingThisOne.data;
+                if (hotAcceptDependencies.includes(urlInfo.url)) {
+                  boundaries.add(urlInfoReferencingThisOne);
+                  instructions.push({
+                    type: urlInfoReferencingThisOne.type,
+                    boundary: formatUrlForClient(urlInfoReferencingThisOne.url),
                     acceptedBy: formatUrlForClient(urlInfo.url),
-                  },
-                ],
-              };
-            }
-            const instructions = [];
-            for (const referenceFromOther of urlInfo.referenceFromOthersSet) {
-              if (referenceFromOther.isImplicit && referenceFromOther.isWeak) {
-                if (!referenceFromOther.original) {
+                  });
                   continue;
                 }
-                if (referenceFromOther.original.isWeak) {
+                if (chain.includes(urlInfoReferencingThisOne.url)) {
+                  return {
+                    declined: true,
+                    reason: "dead end",
+                    declinedBy: formatUrlForClient(
+                      urlInfoReferencingThisOne.url,
+                    ),
+                  };
+                }
+                const dependentPropagationResult = iterateMemoized(
+                  urlInfoReferencingThisOne,
+                  [...chain, urlInfoReferencingThisOne.url],
+                );
+                if (dependentPropagationResult.accepted) {
                   continue;
                 }
+                if (
+                  // declined explicitely by an other file, it must decline the whole update
+                  dependentPropagationResult.declinedBy
+                ) {
+                  return dependentPropagationResult;
+                }
+                // declined by absence of boundary, we can keep searching
               }
-              const urlInfoReferencingThisOne = referenceFromOther.ownerUrlInfo;
-              if (urlInfoReferencingThisOne.data.hotDecline) {
+              if (instructionCountBefore === instructions.length) {
                 return {
                   declined: true,
-                  reason: `a dependent file declines hot reload`,
-                  declinedBy: urlInfoReferencingThisOne.url,
+                  reason: `there is no file accepting hot reload while propagating update`,
                 };
               }
-              const { hotAcceptDependencies = [] } =
-                urlInfoReferencingThisOne.data;
-              if (hotAcceptDependencies.includes(urlInfo.url)) {
-                instructions.push({
-                  type: urlInfoReferencingThisOne.type,
-                  boundary: formatUrlForClient(urlInfoReferencingThisOne.url),
-                  acceptedBy: formatUrlForClient(urlInfo.url),
-                });
-                continue;
+              return {
+                accepted: true,
+                reason: `${instructions.length} dependent file(s) accepts hot reload`,
+              };
+            };
+
+            const map = new Map();
+            const iterateMemoized = (urlInfo, chain) => {
+              const resultFromCache = map.get(urlInfo.url);
+              if (resultFromCache) {
+                return resultFromCache;
               }
-              if (seen.includes(urlInfoReferencingThisOne.url)) {
-                return {
+              const result = iterate(urlInfo, chain);
+              map.set(urlInfo.url, result);
+              return result;
+            };
+            map.clear();
+            return iterateMemoized(firstUrlInfo, []);
+          };
+
+          let propagationResult = propagateUpdate(firstUrlInfo);
+          const seen = new Set();
+          const invalidateImporters = (urlInfo) => {
+            // to indicate this urlInfo should be modified
+            for (const referenceFromOther of urlInfo.referenceFromOthersSet) {
+              const urlInfoReferencingThisOne = referenceFromOther.ownerUrlInfo;
+              const { hotDecline, hotAcceptDependencies = [] } =
+                urlInfoReferencingThisOne.data;
+              if (hotDecline) {
+                propagationResult = {
                   declined: true,
-                  reason: "circular dependency",
+                  reason: `file declines hot reload`,
                   declinedBy: formatUrlForClient(urlInfoReferencingThisOne.url),
                 };
+                return;
               }
-              const dependentPropagationResult = iterate(
-                urlInfoReferencingThisOne,
-                [...seen, urlInfoReferencingThisOne.url],
-              );
-              if (dependentPropagationResult.accepted) {
-                instructions.push(...dependentPropagationResult.instructions);
+              if (hotAcceptDependencies.includes(urlInfo.url)) {
                 continue;
               }
-              if (
-                // declined explicitely by an other file, it must decline the whole update
-                dependentPropagationResult.declinedBy
-              ) {
-                return dependentPropagationResult;
+              if (seen.has(urlInfoReferencingThisOne)) {
+                continue;
               }
-              // declined by absence of boundary, we can keep searching
-            }
-            if (instructions.length === 0) {
-              return {
-                declined: true,
-                reason: `there is no file accepting hot reload while propagating update`,
-              };
+              seen.add(urlInfoReferencingThisOne);
+              // see https://github.com/vitejs/vite/blob/ab5bb40942c7023046fa6f6d0b49cabc105b6073/packages/vite/src/node/server/moduleGraph.ts#L205C5-L207C6
+              if (boundaries.has(urlInfoReferencingThisOne)) {
+                return;
+              }
+              urlInfoReferencingThisOne.descendantModifiedTimestamp =
+                Date.now();
+              invalidateImporters(urlInfoReferencingThisOne);
             }
-            return {
-              accepted: true,
-              reason: `${instructions.length} dependent file(s) accepts hot reload`,
-              instructions,
-            };
           };
-          const seen = [];
-          return iterate(firstUrlInfo, seen);
+          invalidateImporters(firstUrlInfo);
+          boundaries.clear();
+          seen.clear();
+          return {
+            ...propagationResult,
+            instructions,
+          };
         };
 
         // We are delaying the moment we tell client how to reload because:
@@ -19449,7 +19548,7 @@ const jsenvPluginAutoreloadServer = ({
               if (!changedUrlInfo.isUsed()) {
                 continue;
               }
-              const hotUpdate = propagateUpdate(changedUrlInfo);
+              const hotUpdate = update(changedUrlInfo);
               const relativeUrl = formatUrlForClient(changedUrlInfo.url);
               if (hotUpdate.declined) {
                 reloadMessage = {
@@ -19486,7 +19585,7 @@ const jsenvPluginAutoreloadServer = ({
               if (!ownerUrlInfo.isUsed()) {
                 continue;
               }
-              const ownerHotUpdate = propagateUpdate(ownerUrlInfo);
+              const ownerHotUpdate = update(ownerUrlInfo);
               const cause = `${formatUrlForClient(
                 prunedUrlInfo.url,
               )} is no longer referenced`;
@@ -19671,7 +19770,7 @@ const jsenvPluginRibbon = ({
           null,
           "  ",
         );
-        injectHtmlNode(
+        injectHtmlNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
             tagName: "script",
@@ -19736,7 +19835,6 @@ const getCorePlugins = ({
     jsenvPluginReferenceAnalysis(referenceAnalysis),
     ...(injections ? [jsenvPluginInjections(injections)] : []),
     jsenvPluginTranspilation(transpilation),
-    jsenvPluginImportmap(),
     ...(inlining ? [jsenvPluginInlining()] : []),
     ...(supervisor ? [jsenvPluginSupervisor(supervisor)] : []), // after inline as it needs inline script to be cooked
 
@@ -22186,7 +22284,7 @@ const createFileService = ({
         associations: watchAssociations,
       });
       urlInfoCreated.isWatched = watch;
-      // wehn an url depends on many others, we check all these (like package.json)
+      // when an url depends on many others, we check all these (like package.json)
       urlInfoCreated.isValid = () => {
         if (!urlInfoCreated.url.startsWith("file:")) {
           return false;