@jsenv/core 24.0.2 → 24.1.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "24.0.2",
+  "version": "24.1.0-alpha.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -11,8 +11,7 @@
     "node": ">=14.9.0"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "type": "module",
   "exports": {

package/src/internal/compiling/compile-directory/getOrGenerateCompiledFile.js

@@ -127,8 +127,7 @@ const computeCompileReport = async ({
       logger.warn(`WARNING: meta.sources is empty for ${compiledFileUrl}`)
     }
 
-    const metaIsValid = cacheValidity.meta.isValid
-
+    const metaIsValid = cacheValidity.meta ? cacheValidity.meta.isValid : false
     const [compileTiming, compileResult] = await timeFunction("compile", () =>
       callCompile({
         logger,

package/src/internal/compiling/compile-directory/validateCache.js

@@ -20,6 +20,11 @@ export const validateCache = async ({
 }) => {
   const validity = { isValid: true }
 
+  // disable cahce for html files so that we always parse the importmap file
+  if (compiledFileUrl.endsWith(".html")) {
+    return { isValid: false }
+  }
+
   const metaJsonFileUrl = `${compiledFileUrl}__asset__meta.json`
   const metaValidity = await validateMetaFile(metaJsonFileUrl)
   mergeValidity(validity, "meta", metaValidity)

package/src/internal/compiling/compileFile.js

@@ -5,6 +5,7 @@ import {
   bufferToEtag,
   urlIsInsideOf,
 } from "@jsenv/filesystem"
+import { normalizeImportMap, resolveImport } from "@jsenv/importmap"
 import { convertFileSystemErrorToResponseProperties } from "@jsenv/server/src/internal/convertFileSystemErrorToResponseProperties.js"
 
 import { getOrGenerateCompiledFile } from "./compile-directory/getOrGenerateCompiledFile.js"
@@ -19,6 +20,7 @@ export const compileFile = async ({
   projectFileRequestedCallback = () => {},
   request,
   pushResponse,
+  importmapInfos,
   compile,
   compileCacheStrategy,
   compileCacheSourcesValidation,
@@ -106,30 +108,34 @@ export const compileFile = async ({
       )
     })
 
-    if (
-      request.http2 &&
+    if (request.http2) {
       // js resolution is special, we cannot just do resolveUrl of the import specifier
       // because there can be importmap (bare specifier, import without extension, custom remapping, ...)
       // And we would push 404 to the browser
       // Until we implement import map resolution pushing ressource for js imports is disabled
-      compileResult.contentType !== "application/javascript"
-    ) {
-      compileResult.dependencies.forEach((dependency) => {
-        const requestUrl = resolveUrl(request.ressource, request.origin)
-        const dependencyUrl = resolveUrl(dependency, requestUrl)
-        if (!urlIsInsideOf(dependencyUrl, request.origin)) {
-          // ignore external urls
-          return
-        }
-        if (dependencyUrl.startsWith("data:")) {
-          return
-        }
-        const dependencyRelativeUrl = urlToRelativeUrl(
-          dependencyUrl,
-          request.origin,
-        )
-        pushResponse({ path: `/${dependencyRelativeUrl}` })
+      const dependencyResolver = getDependencyResolver({
+        compileResult,
+        importmapInfos,
+        request,
+        projectDirectoryUrl,
       })
+      if (dependencyResolver) {
+        compileResult.dependencies.forEach((dependency) => {
+          const dependencyUrl = dependencyResolver.resolve(dependency)
+          if (!urlIsInsideOf(dependencyUrl, request.origin)) {
+            // ignore external urls
+            return
+          }
+          if (dependencyUrl.startsWith("data:")) {
+            return
+          }
+          const dependencyRelativeUrl = urlToRelativeUrl(
+            dependencyUrl,
+            request.origin,
+          )
+          pushResponse({ path: `/${dependencyRelativeUrl}` })
+        })
+      }
     }
 
     // when a compiled version of the source file was just created or updated
@@ -229,3 +235,62 @@ export const compileFile = async ({
     return convertFileSystemErrorToResponseProperties(error)
   }
 }
+
+const getDependencyResolver = ({
+  compileResult,
+  importmapInfos,
+  request,
+  projectDirectoryUrl,
+}) => {
+  const importmapKeys = Object.keys(importmapInfos)
+  const requestUrl = resolveUrl(request.ressource, request.origin)
+
+  if (
+    compileResult.contentType !== "application/javascript" ||
+    importmapKeys.length === 0
+  ) {
+    return {
+      type: "url_resolution",
+      resolve: (dependency) => {
+        const dependencyUrl = resolveUrl(dependency, requestUrl)
+        return dependencyUrl
+      },
+    }
+  }
+
+  const firstImportmapInfo = importmapInfos[importmapKeys[0]]
+  if (!firstImportmapInfo.text) {
+    return null
+  }
+
+  if (
+    // we are aware only of 1 importmap
+    importmapKeys.length === 1 ||
+    // all importmaps are the same
+    importmapKeys.slice(1).every(({ url }) => url === firstImportmapInfo.url)
+  ) {
+    const importMapBaseUrl = resolveUrl(
+      urlToRelativeUrl(firstImportmapInfo.url, projectDirectoryUrl),
+      `${request.origin}/`,
+    )
+    const importMap = normalizeImportMap(
+      JSON.parse(firstImportmapInfo.text),
+      importMapBaseUrl,
+    )
+    return {
+      type: "importmap_resolution",
+      resolve: (dependency) => {
+        const dependencyUrl = resolveImport({
+          specifier: dependency,
+          importer: requestUrl,
+          importMap,
+        })
+        return dependencyUrl
+      },
+    }
+  }
+
+  // there is more than 2 importmaps, we cannot know which one to pick
+  // (not supposed ot happen because during dev you usually use a single importmap)
+  return null
+}

package/src/internal/compiling/createCompiledFileService.js

@@ -80,6 +80,8 @@ export const createCompiledFileService = ({
     projectDirectoryUrl,
   )
 
+  const importmapInfos = {}
+
   return (request, { pushResponse, redirectRequest }) => {
     const { origin, ressource } = request
     // we use "ressourceToPathname" to remove eventual query param from the url
@@ -167,6 +169,7 @@ export const createCompiledFileService = ({
       projectFileRequestedCallback,
       request,
       pushResponse,
+      importmapInfos,
       compile: ({ code }) => {
         return compiler({
           logger,
@@ -195,6 +198,9 @@ export const createCompiledFileService = ({
           sourcemapMethod,
           sourcemapExcludeSources,
           jsenvToolbarInjection,
+          onHtmlImportmapInfo: ({ htmlUrl, importmapInfo }) => {
+            importmapInfos[htmlUrl] = importmapInfo
+          },
         })
       },
     })

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -50,6 +50,7 @@ export const compileHtml = async ({
 
   jsenvScriptInjection = true,
   jsenvToolbarInjection,
+  onHtmlImportmapInfo,
 }) => {
   const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
     jsenvBrowserSystemFileInfo.jsenvBuildUrl,
@@ -86,55 +87,127 @@ export const compileHtml = async ({
     ],
   })
 
+  let sources = []
+  let sourcesContent = []
   const { scripts } = parseHtmlAstRessources(htmlAst)
-  const htmlDependencies = collectHtmlDependenciesFromAst(htmlAst)
-
-  let hasImportmap = false
-  const inlineScriptsContentMap = {}
-  const importmapsToInline = []
+  let importmapInfo = null
   scripts.forEach((script) => {
     const typeAttribute = getHtmlNodeAttributeByName(script, "type")
-    const srcAttribute = getHtmlNodeAttributeByName(script, "src")
-
-    // importmap
     if (typeAttribute && typeAttribute.value === "importmap") {
-      hasImportmap = true
-
-      if (srcAttribute) {
-        if (moduleOutFormat === "systemjs") {
-          typeAttribute.value = "jsenv-importmap"
-          return // no need to inline
+      if (importmapInfo) {
+        console.error("HTML file must contain max 1 importmap")
+      } else {
+        const srcAttribute = getHtmlNodeAttributeByName(script, "src")
+        const src = srcAttribute ? srcAttribute.value : ""
+        if (src) {
+          importmapInfo = {
+            script,
+            url: resolveUrl(src, url),
+            loadAsText: async () => {
+              const importMapResponse = await fetchUrl(importmapInfo.url)
+              if (importMapResponse.status !== 200) {
+                logger.warn(
+                  createDetailedMessage(
+                    importMapResponse.status === 404
+                      ? `importmap script file cannot be found.`
+                      : `importmap script file unexpected response status (${importMapResponse.status}).`,
+                    {
+                      "importmap url": importmapInfo.url,
+                      "html url": url,
+                    },
+                  ),
+                )
+                return "{}"
+              }
+              const importmapAsText = await importMapResponse.text()
+              sources.push(importmapInfo.url)
+              sourcesContent.push(importmapAsText)
+
+              const importMapMoved = moveImportMap(
+                JSON.parse(importmapAsText),
+                importmapInfo.url,
+                url,
+              )
+              const compiledImportmapAsText = JSON.stringify(
+                importMapMoved,
+                null,
+                "  ",
+              )
+              return compiledImportmapAsText
+            },
+          }
+        } else {
+          importmapInfo = {
+            script,
+            url: compiledUrl,
+            loadAsText: () => getHtmlNodeTextNode(script).value,
+          }
         }
-
-        // we force inline because browsers supporting importmap supports only when they are inline
-        importmapsToInline.push({
-          script,
-          src: srcAttribute.value,
-        })
-        return
-      }
-
-      const defaultImportMap = getDefaultImportMap({
-        importMapFileUrl: compiledUrl,
-        projectDirectoryUrl,
-        compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
-      })
-      const inlineImportMap = JSON.parse(getHtmlNodeTextNode(script).value)
-      const mappings = composeTwoImportMaps(defaultImportMap, inlineImportMap)
-      if (moduleOutFormat === "systemjs") {
-        typeAttribute.value = "jsenv-importmap"
       }
-      setHtmlNodeText(script, JSON.stringify(mappings, null, "  "))
-      return
     }
+  })
+  if (importmapInfo) {
+    const htmlImportMap = JSON.parse(await importmapInfo.loadAsText())
+    const importMapFromJsenv = getDefaultImportMap({
+      importMapFileUrl: compiledUrl,
+      projectDirectoryUrl,
+      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
+    })
+    const mappings = composeTwoImportMaps(importMapFromJsenv, htmlImportMap)
+    const importmapAsText = JSON.stringify(mappings, null, "  ")
+    replaceHtmlNode(
+      importmapInfo.script,
+      `<script type="${
+        moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap"
+      }">${importmapAsText}</script>`,
+      {
+        attributesToIgnore: ["src"],
+      },
+    )
+    importmapInfo.inlinedFrom = importmapInfo.url
+    importmapInfo.url = compiledUrl
+    importmapInfo.text = importmapAsText
+  } else {
+    // inject a default importmap
+    const defaultImportMap = getDefaultImportMap({
+      importMapFileUrl: compiledUrl,
+      projectDirectoryUrl,
+      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
+    })
+    const importmapAsText = JSON.stringify(defaultImportMap, null, "  ")
+    manipulateHtmlAst(htmlAst, {
+      scriptInjections: [
+        {
+          type:
+            moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap",
+          // in case there is no importmap, force the presence
+          // so that '@jsenv/core/' are still remapped
+          text: importmapAsText,
+        },
+      ],
+    })
+    importmapInfo = {
+      url: compiledUrl,
+      text: importmapAsText,
+    }
+  }
+  onHtmlImportmapInfo({
+    htmlUrl: url,
+    importmapInfo,
+  })
 
+  const htmlDependencies = collectHtmlDependenciesFromAst(htmlAst)
+  const inlineScriptsContentMap = {}
+  scripts.forEach((script) => {
+    const typeAttribute = getHtmlNodeAttributeByName(script, "type")
+    const srcAttribute = getHtmlNodeAttributeByName(script, "src")
+    const src = srcAttribute ? srcAttribute.value : ""
     // remote module script
-    if (typeAttribute && typeAttribute.value === "module" && srcAttribute) {
+    if (typeAttribute && typeAttribute.value === "module" && src) {
       if (moduleOutFormat === "systemjs") {
         removeHtmlNodeAttribute(script, typeAttribute)
       }
       removeHtmlNodeAttribute(script, srcAttribute)
-      const src = srcAttribute.value
       const jsenvMethod =
         moduleOutFormat === "systemjs"
           ? "executeFileUsingSystemJs"
@@ -174,66 +247,6 @@ export const compileHtml = async ({
       return
     }
   })
-
-  if (hasImportmap === false) {
-    const defaultImportMap = getDefaultImportMap({
-      importMapFileUrl: compiledUrl,
-      projectDirectoryUrl,
-      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
-    })
-    manipulateHtmlAst(htmlAst, {
-      scriptInjections: [
-        {
-          type:
-            moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap",
-          // in case there is no importmap, force the presence
-          // so that '@jsenv/core/' are still remapped
-          text: JSON.stringify(defaultImportMap, null, "  "),
-        },
-      ],
-    })
-  }
-
-  await Promise.all(
-    importmapsToInline.map(async ({ script, src }) => {
-      const importMapUrl = resolveUrl(src, url)
-      const importMapResponse = await fetchUrl(importMapUrl)
-      if (importMapResponse.status !== 200) {
-        logger.warn(
-          createDetailedMessage(
-            importMapResponse.status === 404
-              ? `Cannot inline importmap script because file cannot be found.`
-              : `Cannot inline importmap script due to unexpected response status (${importMapResponse.status}).`,
-            {
-              "importmap script src": src,
-              "importmap url": importMapUrl,
-              "html url": url,
-            },
-          ),
-        )
-        return
-      }
-
-      const importMapContent = await importMapResponse.json()
-      const importMapInlined = moveImportMap(
-        importMapContent,
-        importMapUrl,
-        url,
-      )
-      replaceHtmlNode(
-        script,
-        `<script type="importmap">${JSON.stringify(
-          importMapInlined,
-          null,
-          "  ",
-        )}</script>`,
-        {
-          attributesToIgnore: ["src"],
-        },
-      )
-    }),
-  )
-
   const htmlAfterTransformation = stringifyHtmlAst(htmlAst)
 
   let assets = []
@@ -303,12 +316,14 @@ export const compileHtml = async ({
       }
     }),
   )
+  sources.push(url)
+  sourcesContent.push(code)
 
   return {
     contentType: "text/html",
     compiledSource: htmlAfterTransformation,
-    sources: [url],
-    sourcesContent: [code],
+    sources,
+    sourcesContent,
     assets,
     assetsContent,
     dependencies: htmlDependencies.map(({ specifier }) => {

package/src/internal/compiling/startCompileServer.js

@@ -583,6 +583,9 @@ const setupServerSentEventsForLivereload = ({
   const projectFileAdded = createCallbackList()
 
   const projectFileRequestedCallback = (relativeUrl, request) => {
+    if (relativeUrl[0] === "/") {
+      relativeUrl = relativeUrl.slice(1)
+    }
     const url = `${projectDirectoryUrl}${relativeUrl}`
 
     if (
@@ -669,6 +672,7 @@ const setupServerSentEventsForLivereload = ({
       return
     }
 
+    livereloadLogger.debug(`${rootRelativeUrl} requested -> start tracking it`)
     // when a file is requested, always rebuild its dependency in case it has changed
     // since the last time it was requested
     startTrackingRoot(rootRelativeUrl)
@@ -699,6 +703,7 @@ const setupServerSentEventsForLivereload = ({
     const removeRootRemovedCallback = projectFileRemoved.add((relativeUrl) => {
       if (relativeUrl === rootRelativeUrl) {
         stopTrackingRoot(rootRelativeUrl)
+        livereloadLogger.debug(`${rootRelativeUrl} removed -> stop tracking it`)
       }
     })
     addStopTrackingCalback(rootRelativeUrl, removeRootRemovedCallback)