@jsenv/core 23.11.1 → 24.1.0-alpha.0

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

@@ -50,7 +50,15 @@ import { createTransformHtmlSourceFileService } from "./html_source_file_service
 export const startCompileServer = async ({
   signal = new AbortController().signal,
   handleSIGINT,
-  compileServerLogLevel,
+  logLevel,
+  protocol = "http",
+  http2 = protocol === "https",
+  privateKey,
+  certificate,
+  ip = "0.0.0.0",
+  port = 0,
+  keepProcessAlive = false,
+  onStop = () => {},
 
   projectDirectoryUrl,
 
@@ -82,16 +90,6 @@ export const startCompileServer = async ({
   babelConfigFileUrl,
   customCompilers = {},
 
-  // options related to the server itself
-  compileServerProtocol = "http",
-  compileServerHttp2 = compileServerProtocol === "https",
-  compileServerPrivateKey,
-  compileServerCertificate,
-  compileServerIp = "0.0.0.0",
-  compileServerPort = 0,
-  keepProcessAlive = false,
-  onStop = () => {},
-
   // remaining options
   runtimeSupport,
 
@@ -103,7 +101,7 @@ export const startCompileServer = async ({
   },
   livereloadLogLevel = "info",
   customServices = {},
-  serverPlugins,
+  plugins,
   livereloadSSE = false,
   transformHtmlSourceFiles = true,
   jsenvToolbarInjection = false,
@@ -134,7 +132,7 @@ export const startCompileServer = async ({
     projectDirectoryUrl,
   )
 
-  const logger = createLogger({ logLevel: compileServerLogLevel })
+  const logger = createLogger({ logLevel })
 
   const browser = isBrowserPartOfSupportedRuntimes(runtimeSupport)
   const babelPluginMapFromFile = await loadBabelPluginMapFromFile({
@@ -241,14 +239,14 @@ export const startCompileServer = async ({
     })
     customServices = {
       ...customServices,
-      "service:sse": serveSSEForLivereload,
+      "jsenv:sse": serveSSEForLivereload,
     }
   } else {
     const roomWhenLivereloadIsDisabled = createSSERoom()
     roomWhenLivereloadIsDisabled.open()
     customServices = {
       ...customServices,
-      "service:sse": (request) => {
+      "jsenv:sse": (request) => {
         const { accept } = request.headers
         if (!accept || !accept.includes("text/event-stream")) {
           return null
@@ -350,16 +348,16 @@ export const startCompileServer = async ({
     sendServerInternalErrorDetails: true,
     keepProcessAlive,
 
-    logLevel: compileServerLogLevel,
+    logLevel,
 
-    protocol: compileServerProtocol,
-    http2: compileServerHttp2,
-    serverCertificate: compileServerCertificate,
-    serverCertificatePrivateKey: compileServerPrivateKey,
-    ip: compileServerIp,
-    port: compileServerPort,
+    protocol,
+    http2,
+    certificate,
+    privateKey,
+    ip,
+    port,
     plugins: {
-      ...serverPlugins,
+      ...plugins,
       ...pluginCORS({
         accessControlAllowRequestOrigin: true,
         accessControlAllowRequestMethod: true,
@@ -391,6 +389,7 @@ export const startCompileServer = async ({
     ...compileServer,
     compileServerGroupMap,
     babelPluginMap,
+    projectFileRequestedCallback,
   }
 }
 
@@ -584,6 +583,9 @@ const setupServerSentEventsForLivereload = ({
   const projectFileAdded = createCallbackList()
 
   const projectFileRequestedCallback = (relativeUrl, request) => {
+    if (relativeUrl[0] === "/") {
+      relativeUrl = relativeUrl.slice(1)
+    }
     const url = `${projectDirectoryUrl}${relativeUrl}`
 
     if (
@@ -629,62 +631,82 @@ const setupServerSentEventsForLivereload = ({
     clearTimeout(timeout)
   })
 
-  const getDependencySet = (mainRelativeUrl) => {
-    if (trackerMap.has(mainRelativeUrl)) {
-      return trackerMap.get(mainRelativeUrl)
+  const startTrackingRoot = (rootFile) => {
+    stopTrackingRoot(rootFile)
+    const set = new Set()
+    set.add(rootFile)
+    const depInfo = {
+      set,
+      cleanup: [],
     }
-    const dependencySet = new Set()
-    dependencySet.add(mainRelativeUrl)
-    trackerMap.set(mainRelativeUrl, dependencySet)
-    return dependencySet
+    trackerMap.set(rootFile, depInfo)
+    return depInfo
+  }
+  const addStopTrackingCalback = (rootFile, callback) => {
+    trackerMap.get(rootFile).cleanup.push(callback)
+  }
+  const stopTrackingRoot = (rootFile) => {
+    const depInfo = trackerMap.get(rootFile)
+    if (depInfo) {
+      depInfo.cleanup.forEach((cb) => {
+        cb()
+      })
+      trackerMap.delete(rootFile)
+    }
+  }
+  const isDependencyOf = (file, rootFile) => {
+    const depInfo = trackerMap.get(rootFile)
+    return depInfo && depInfo.set.has(file)
+  }
+  const markAsDependencyOf = (file, rootFile) => {
+    trackerMap.get(rootFile).set.add(file)
   }
 
   // each time a file is requested for the first time its dependencySet is computed
-  projectFileRequested.add(({ relativeUrl: mainRelativeUrl }) => {
+  projectFileRequested.add((requestInfo) => {
+    const rootRelativeUrl = requestInfo.relativeUrl
     // for now no use case of livereloading on node.js
     // and for browsers only html file can be main files
     // this avoid collecting dependencies of non html files that will never be used
-    if (!mainRelativeUrl.endsWith(".html")) {
+    if (!rootRelativeUrl.endsWith(".html")) {
       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
-    const dependencySet = new Set()
-    dependencySet.add(mainRelativeUrl)
-    trackerMap.set(mainRelativeUrl, dependencySet)
+    startTrackingRoot(rootRelativeUrl)
 
     const removeDependencyRequestedCallback = projectFileRequested.add(
       ({ relativeUrl, request }) => {
-        if (dependencySet.has(relativeUrl)) {
+        if (isDependencyOf(relativeUrl, rootRelativeUrl)) {
           return
         }
-
         const dependencyReport = reportDependency(
           relativeUrl,
-          mainRelativeUrl,
+          rootRelativeUrl,
           request,
         )
         if (dependencyReport.dependency === false) {
           livereloadLogger.debug(
-            `${relativeUrl} not a dependency of ${mainRelativeUrl} because ${dependencyReport.reason}`,
+            `${relativeUrl} not a dependency of ${rootRelativeUrl} because ${dependencyReport.reason}`,
           )
           return
         }
-
         livereloadLogger.debug(
-          `${relativeUrl} is a dependency of ${mainRelativeUrl} because ${dependencyReport.reason}`,
+          `${relativeUrl} is a dependency of ${rootRelativeUrl} because ${dependencyReport.reason}`,
         )
-        dependencySet.add(relativeUrl)
+        markAsDependencyOf(relativeUrl, rootRelativeUrl)
       },
     )
-    const removeMainRemovedCallback = projectFileRemoved.add((relativeUrl) => {
-      if (relativeUrl === mainRelativeUrl) {
-        removeDependencyRequestedCallback()
-        removeMainRemovedCallback()
-        trackerMap.delete(mainRelativeUrl)
+    addStopTrackingCalback(rootRelativeUrl, removeDependencyRequestedCallback)
+    const removeRootRemovedCallback = projectFileRemoved.add((relativeUrl) => {
+      if (relativeUrl === rootRelativeUrl) {
+        stopTrackingRoot(rootRelativeUrl)
+        livereloadLogger.debug(`${rootRelativeUrl} removed -> stop tracking it`)
       }
     })
+    addStopTrackingCalback(rootRelativeUrl, removeRootRemovedCallback)
   })
 
   const trackMainAndDependencies = (
@@ -694,20 +716,17 @@ const setupServerSentEventsForLivereload = ({
     livereloadLogger.debug(`track ${mainRelativeUrl} and its dependencies`)
 
     const removeModifiedCallback = projectFileModified.add((relativeUrl) => {
-      const dependencySet = getDependencySet(mainRelativeUrl)
-      if (dependencySet.has(relativeUrl)) {
+      if (isDependencyOf(relativeUrl, mainRelativeUrl)) {
         modified(relativeUrl)
       }
     })
     const removeRemovedCallback = projectFileRemoved.add((relativeUrl) => {
-      const dependencySet = getDependencySet(mainRelativeUrl)
-      if (dependencySet.has(relativeUrl)) {
+      if (isDependencyOf(relativeUrl, mainRelativeUrl)) {
         removed(relativeUrl)
       }
     })
     const removeAddedCallback = projectFileAdded.add((relativeUrl) => {
-      const dependencySet = getDependencySet(mainRelativeUrl)
-      if (dependencySet.has(relativeUrl)) {
+      if (isDependencyOf(relativeUrl, mainRelativeUrl)) {
         added(relativeUrl)
       }
     })
@@ -746,14 +765,6 @@ const setupServerSentEventsForLivereload = ({
 
     const { referer } = request.headers
     if (referer) {
-      const { origin } = request
-      // referer is likely the exploringServer
-      if (referer !== origin && !urlIsInsideOf(referer, origin)) {
-        return {
-          dependency: false,
-          reason: "referer is an other origin",
-        }
-      }
       // here we know the referer is inside compileServer
       const refererRelativeUrl = urlToOriginalRelativeUrl(
         referer,
@@ -766,7 +777,7 @@ const setupServerSentEventsForLivereload = ({
         for (const tracker of trackerMap) {
           if (
             tracker[0] === mainRelativeUrl &&
-            tracker[1].has(refererRelativeUrl)
+            tracker[1].set.has(refererRelativeUrl)
           ) {
             return {
               dependency: true,
@@ -895,8 +906,7 @@ const createSourceFileService = ({
   projectFileCacheStrategy,
 }) => {
   return async (request) => {
-    const { ressource } = request
-    const relativeUrl = ressource.slice(1)
+    const relativeUrl = request.pathname.slice(1)
     projectFileRequestedCallback(relativeUrl, request)
 
     const responsePromise = fetchFileSystem(

package/src/internal/executing/executePlan.js

@@ -38,11 +38,11 @@ export const executePlan = async (
     coverageV8ConflictWarning,
     coverageTempDirectoryRelativeUrl,
 
-    compileServerProtocol,
-    compileServerPrivateKey,
-    compileServerCertificate,
-    compileServerIp,
-    compileServerPort,
+    protocol,
+    privateKey,
+    certificate,
+    ip,
+    port,
     compileServerCanReadFromFilesystem,
     compileServerCanWriteOnFilesystem,
     babelPluginMap,
@@ -99,7 +99,7 @@ export const executePlan = async (
   try {
     const compileServer = await startCompileServer({
       signal: multipleExecutionsOperation.signal,
-      compileServerLogLevel,
+      logLevel: compileServerLogLevel,
 
       projectDirectoryUrl,
       jsenvDirectoryRelativeUrl,
@@ -109,11 +109,11 @@ export const executePlan = async (
       importResolutionMethod,
       importDefaultExtension,
 
-      compileServerProtocol,
-      compileServerPrivateKey,
-      compileServerCertificate,
-      compileServerIp,
-      compileServerPort,
+      protocol,
+      privateKey,
+      certificate,
+      ip,
+      port,
       compileServerCanReadFromFilesystem,
       compileServerCanWriteOnFilesystem,
       keepProcessAlive: true, // to be sure it stays alive

package/src/internal/exploring/exploring.redirector.js

@@ -1,22 +1,28 @@
 import { scanBrowserRuntimeFeatures } from "../runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js"
-import { fetchExploringJson } from "./fetchExploringJson.js"
 
 const redirect = async () => {
-  const [browserRuntimeFeaturesReport, { exploringHtmlFileRelativeUrl }] =
-    await Promise.all([
-      scanBrowserRuntimeFeatures({
-        failFastOnFeatureDetection: true,
-      }),
-      fetchExploringJson(),
-    ])
+  const redirectTarget = new URLSearchParams(window.location.search).get(
+    "redirect",
+  )
+  const browserRuntimeFeaturesReport = await scanBrowserRuntimeFeatures({
+    failFastOnFeatureDetection: true,
+  })
 
-  if (browserRuntimeFeaturesReport.canAvoidCompilation) {
-    window.location.href = `/${exploringHtmlFileRelativeUrl}`
-    return
-  }
+  const href = `${getDirectoryUrl(
+    browserRuntimeFeaturesReport,
+  )}${redirectTarget}`
+  window.location.href = href
+}
 
-  const { outDirectoryRelativeUrl, compileId } = browserRuntimeFeaturesReport
-  window.location.href = `/${outDirectoryRelativeUrl}${compileId}/${exploringHtmlFileRelativeUrl}`
+const getDirectoryUrl = ({
+  canAvoidCompilation,
+  outDirectoryRelativeUrl,
+  compileId,
+}) => {
+  if (canAvoidCompilation) {
+    return `/`
+  }
+  return `/${outDirectoryRelativeUrl}${compileId}/`
 }
 
 redirect()