@jsenv/core 24.4.5 → 24.5.1

package/src/internal/building/{bundleWorker.js → js/babel_plugin_inline_worker_imports.js}

@@ -1,73 +1,24 @@
-import { readFileSync } from "fs"
 import {
   resolveUrl,
-  urlToFileSystemPath,
   fileSystemPathToUrl,
+  urlToFileSystemPath,
 } from "@jsenv/filesystem"
-import { createDetailedMessage } from "@jsenv/logger"
-import { require } from "@jsenv/core/src/internal/require.js"
-
-export const bundleWorker = ({ workerScriptUrl, workerScriptSourceMap }) => {
-  const { code, map } = transformWorkerScript(workerScriptUrl, {
-    workerScriptSourceMap,
-  })
-  return { code, map }
-}
 
-const transformWorkerScript = (
-  scriptUrl,
-  { workerScriptSourceMap, importerUrl },
+export const babelPluginInlineWorkerImports = (
+  babel,
+  { readImportedScript },
 ) => {
-  const scriptPath = urlToFileSystemPath(scriptUrl)
-  let scriptContent
-  try {
-    scriptContent = String(readFileSync(scriptPath))
-  } catch (e) {
-    if (e.code === "ENOENT") {
-      if (importerUrl) {
-        throw new Error(
-          createDetailedMessage(`no file found for an import in a worker.`, {
-            ["worker url"]: importerUrl,
-            ["imported url"]: scriptUrl,
-          }),
-        )
-      }
-      throw new Error(`no worker file at ${scriptUrl}`)
-    }
-    throw e
-  }
-
-  const { transformSync } = require("@babel/core")
-  const { code, map } = transformSync(scriptContent, {
-    filename: scriptPath,
-    configFile: false,
-    babelrc: false, // trust only these options, do not read any babelrc config file
-    ast: false,
-    inputSourceMap: workerScriptSourceMap,
-    sourceMaps: true,
-    // sourceFileName: scriptPath,
-    plugins: [[babelPluginInlineImportScripts, {}]],
-  })
-  return { code, map }
-}
+  const { types } = babel
 
-const babelPluginInlineImportScripts = (api) => {
-  const { types, parse } = api
   return {
-    name: "transform-inline-import-scripts",
+    name: "transform-inline-worker-imports",
 
     visitor: {
-      CallExpression: (
-        path,
-        {
-          file: {
-            opts: { filename },
-          },
-        },
-      ) => {
+      CallExpression: (path, opts) => {
         const calleePath = path.get("callee")
 
         const replaceImportScriptsWithFileContents = () => {
+          const filename = opts.filename
           const fileUrl = fileSystemPathToUrl(filename)
 
           let previousArgType = ""
@@ -97,11 +48,24 @@ const babelPluginInlineImportScripts = (api) => {
 
           if (previousArgType === "local") {
             const nodes = importedUrls.reduce((previous, importedUrl) => {
-              const importedScriptResult = transformWorkerScript(importedUrl, {
-                importerUrl: fileUrl,
+              const importedScriptCode = readImportedScript(importedUrl)
+              const { ast } = babel.transformSync(importedScriptCode, {
+                filename: urlToFileSystemPath(importedUrl),
+                configFile: false,
+                babelrc: false, // trust only these options, do not read any babelrc config file
+                ast: true,
+                sourceMaps: true,
+                // sourceFileName: scriptPath,
+                plugins: [
+                  [
+                    babelPluginInlineWorkerImports,
+                    {
+                      readImportedScript,
+                    },
+                  ],
+                ],
               })
-              const importedSourceAst = parse(importedScriptResult.code)
-              return [...previous, ...importedSourceAst.program.body]
+              return [...previous, ...ast.program.body]
             }, [])
 
             calleePath.parentPath.replaceWithMultiple(nodes)

package/src/internal/building/js/parseJsRessource.js

@@ -4,7 +4,7 @@ import {
   getJavaScriptSourceMappingUrl,
   setJavaScriptSourceMappingUrl,
 } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
-import { bundleWorker } from "@jsenv/core/src/internal/building/bundleWorker.js"
+import { transformWorker } from "./transform_worker.js"
 
 export const parseJsRessource = async (
   jsRessource,
@@ -47,19 +47,18 @@ export const parseJsRessource = async (
       map = JSON.parse(String(sourcemapRessource.bufferBeforeBuild))
     }
 
-    // in case this js asset is a worker, bundle it so that:
-    // importScripts are inlined which is good for:
-    // - not breaking things (otherwise we would have to copy imported files in the build directory)
-    // - perf (one less http request)
-    const mightBeAWorkerScript = !jsRessource.isInline
-    if (mightBeAWorkerScript) {
-      const workerScriptUrl = asOriginalUrl(jsUrl)
-      const workerBundle = await bundleWorker({
-        workerScriptUrl,
-        workerScriptSourceMap: map,
+    // in case this js asset is a worker, we transform it so that
+    // importScripts() calls are inlined
+    // We could also parse each importScripts call and decide to inline
+    // or not. For now inlining/concatenation is forced
+    if (jsRessource.isWorker || jsRessource.isServiceWorker) {
+      const transformResult = await transformWorker({
+        url: asOriginalUrl(jsUrl),
+        code: String(jsRessource.bufferBeforeBuild),
+        map,
       })
-      code = workerBundle.code
-      map = workerBundle.map
+      code = transformResult.code
+      map = transformResult.map
     } else {
       code = jsString
     }

package/src/internal/building/js/transform_worker.js

@@ -0,0 +1,55 @@
+// we could inline a worker by doing
+// var blob = new Blob(code, { type: 'text/javascript' })
+// window.URL.createObjectURL(blob)
+
+import { readFileSync } from "fs"
+import { urlToFileSystemPath } from "@jsenv/filesystem"
+import { createDetailedMessage } from "@jsenv/logger"
+
+import { babelPluginInlineWorkerImports } from "./babel_plugin_inline_worker_imports.js"
+
+export const transformWorker = async ({ url, code, map }) => {
+  const { transformSync } = await import("@babel/core")
+
+  const transformResult = transformSync(code, {
+    filename: urlToFileSystemPath(url),
+    configFile: false,
+    babelrc: false, // trust only these options, do not read any babelrc config file
+    ast: false,
+    inputSourceMap: map,
+    sourceMaps: true,
+    // sourceFileName: scriptPath,
+    plugins: [
+      [
+        babelPluginInlineWorkerImports,
+        {
+          readImportedScript: readWorkerFile,
+        },
+      ],
+    ],
+  })
+  code = transformResult.code
+  map = transformResult.map
+  return { code, map }
+}
+
+export const readWorkerFile = (url, importerUrl) => {
+  const filePath = urlToFileSystemPath(url)
+  try {
+    const code = String(readFileSync(filePath))
+    return code
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      if (importerUrl) {
+        throw new Error(
+          createDetailedMessage(`no file found for an import in a worker.`, {
+            ["worker url"]: importerUrl,
+            ["imported url"]: url,
+          }),
+        )
+      }
+      throw new Error(`no worker file at ${url}`)
+    }
+    throw e
+  }
+}

package/src/internal/building/resolve_import_url_helper.js

@@ -4,7 +4,8 @@ window.__resolveImportUrl__ = (url, baseUrl) => {
 
   if (importmapNode) {
     const importmap = JSON.parse(importmapNode.textContent)
-    return new URL(importmap.imports[url], baseUrl)
+    const specifier = importmap.imports[url] || url
+    return new URL(specifier, baseUrl)
   }
 
   return new URL(url, baseUrl)

package/src/internal/building/ressource_builder.js

@@ -5,7 +5,7 @@ import {
   urlToParentUrl,
   urlToFilename,
 } from "@jsenv/filesystem"
-import { createLogger } from "@jsenv/logger"
+import { createLogger, loggerToLevels } from "@jsenv/logger"
 
 import { setJavaScriptSourceMappingUrl } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
 import { racePromises } from "../promise_race.js"
@@ -143,6 +143,9 @@ export const createRessourceBuilder = (
       contentType,
       bufferBeforeBuild,
     })
+    if (!reference) {
+      return null
+    }
     await reference.ressource.getReadyPromise()
     return reference
   }
@@ -229,10 +232,18 @@ export const createRessourceBuilder = (
 
     let ressourceUrl
     let isExternal = false
+    let isWorker = false
+    let isServiceWorker = false
     if (typeof ressourceUrlResolution === "object") {
-      if (ressourceUrlResolution.external) {
+      if (ressourceUrlResolution.isExternal) {
         isExternal = true
       }
+      if (ressourceUrlResolution.isWorker) {
+        isWorker = true
+      }
+      if (ressourceUrlResolution.isServiceWorker) {
+        isServiceWorker = true
+      }
       ressourceUrl = ressourceUrlResolution.url
     } else {
       ressourceUrl = ressourceUrlResolution
@@ -292,6 +303,8 @@ export const createRessourceBuilder = (
         isExternal,
         isInline,
         isPlaceholder,
+        isWorker,
+        isServiceWorker,
         fileNamePattern,
         urlVersioningDisabled,
       })
@@ -330,14 +343,16 @@ export const createRessourceBuilder = (
     } else {
       ressource.references.push(reference)
       const effects = ressource.applyReferenceEffects(reference, { isJsModule })
-      logger.debug(
-        formatFoundReference({
-          reference,
-          referenceEffects: effects,
-          showReferenceSourceLocation,
-          shortenUrl,
-        }),
-      )
+      if (loggerToLevels(logger).debug) {
+        logger.debug(
+          formatFoundReference({
+            reference,
+            referenceEffects: effects,
+            showReferenceSourceLocation,
+            shortenUrl,
+          }),
+        )
+      }
     }
 
     return reference
@@ -356,9 +371,11 @@ export const createRessourceBuilder = (
     isExternal = false,
     isInline = false,
     isPlaceholder = false,
+    isWorker = false,
+    isServiceWorker = false,
 
     fileNamePattern,
-    urlVersioningDisabled = false,
+    urlVersioningDisabled = isServiceWorker,
   }) => {
     const ressource = {
       contentType,
@@ -373,6 +390,8 @@ export const createRessourceBuilder = (
       isInline,
       isExternal,
       isPlaceholder,
+      isWorker,
+      isServiceWorker,
 
       urlVersioningDisabled,
       fileNamePattern,
@@ -424,12 +443,13 @@ export const createRessourceBuilder = (
 
       const response = await urlFetcher.fetchUrl(ressource.url, {
         contentTypeExpected: ressource.firstStrongReference.contentTypeExpected,
-        urlTrace: () =>
-          createRessourceTrace({
+        urlTrace: () => {
+          return createRessourceTrace({
             ressource,
             createUrlSiteFromReference,
             findRessourceByUrl,
-          }),
+          })
+        },
       })
       if (response.url !== ressource.url) {
         const urlBeforeRedirection = ressource.url
@@ -875,7 +895,7 @@ export const createRessourceBuilder = (
       ? String(referenceSource)
       : ""
 
-    return {
+    const urlSite = {
       type:
         referenceRessource && referenceRessource.isJsModule
           ? "import"
@@ -885,6 +905,30 @@ export const createRessourceBuilder = (
       column: referenceColumn,
       source: referenceSourceAsString,
     }
+
+    if (!referenceRessource.isInline) {
+      return urlSite
+    }
+    const { firstStrongReference } = referenceRessource
+    if (!firstStrongReference) {
+      return urlSite
+    }
+    const htmlUrlSite = createUrlSiteFromReference(firstStrongReference)
+    // when the html node is injected there is no line in the source file to target
+    if (htmlUrlSite.line === undefined) {
+      return urlSite
+    }
+    const importerRessource = findRessourceByUrl(
+      firstStrongReference.referenceUrl,
+    )
+    if (!importerRessource || importerRessource.contentType !== "text/html") {
+      return urlSite
+    }
+    return {
+      ...htmlUrlSite,
+      line: htmlUrlSite.line + urlSite.line,
+      column: htmlUrlSite.column + urlSite.column,
+    }
   }
 
   const showReferenceSourceLocation = (reference) => {

package/src/internal/building/{createJsenvRollupPlugin.js → rollup_plugin_jsenv.js}

@@ -65,6 +65,9 @@ export const createJsenvRollupPlugin = async ({
   externalImportSpecifiers,
   externalImportUrlPatterns,
   importPaths,
+  workers,
+  serviceWorkers,
+  serviceWorkerFinalizer,
 
   format,
   systemJsUrl,
@@ -98,6 +101,15 @@ export const createJsenvRollupPlugin = async ({
     lastErrorMessage = error.message
   }
 
+  const workerUrls = Object.keys(workers).map((key) =>
+    resolveUrl(key, projectDirectoryUrl),
+  )
+  const serviceWorkerUrls = Object.keys(serviceWorkers).map((key) =>
+    resolveUrl(key, projectDirectoryUrl),
+  )
+  const isWorkerUrl = (url) => workerUrls.includes(url)
+  const isServiceWorkerUrl = (url) => serviceWorkerUrls.includes(url)
+
   let ressourceBuilder
   let importResolver
   let rollupEmitFile = () => {}
@@ -194,7 +206,7 @@ export const createJsenvRollupPlugin = async ({
     compileDirectoryRelativeUrl,
     projectDirectoryUrl,
   )
-  const compileDirectoryRemoteUrl = resolveDirectoryUrl(
+  const compileDirectoryServerUrl = resolveDirectoryUrl(
     compileDirectoryRelativeUrl,
     compileServerOrigin,
   )
@@ -371,7 +383,7 @@ export const createJsenvRollupPlugin = async ({
             )
             importMapUrl = applyUrlMappings(importMapUrl)
 
-            if (!urlIsInsideOf(importMapUrl, compileDirectoryRemoteUrl)) {
+            if (!urlIsInsideOf(importMapUrl, compileDirectoryServerUrl)) {
               logger.warn(
                 formatImportmapOutsideCompileDirectory({
                   importMapInfo: importMapInfoFromHtml,
@@ -392,7 +404,7 @@ export const createJsenvRollupPlugin = async ({
               firstHtmlEntryPoint.entryProjectRelativeUrl
             const htmlCompiledUrl = resolveUrl(
               htmlProjectRelativeUrl,
-              compileDirectoryRemoteUrl,
+              compileDirectoryServerUrl,
             )
             importMapUrl = htmlCompiledUrl
             fetchImportMap = () => {
@@ -404,7 +416,7 @@ export const createJsenvRollupPlugin = async ({
         } else if (importMapFileRelativeUrl) {
           importMapUrl = resolveUrl(
             importMapFileRelativeUrl,
-            compileDirectoryRemoteUrl,
+            compileDirectoryServerUrl,
           )
           fetchImportMap = () => {
             return fetchImportMapFromUrl(
@@ -428,7 +440,7 @@ export const createJsenvRollupPlugin = async ({
             })
             const entryCompileServerUrl = resolveUrl(
               entryProjectRelativeUrl,
-              compileDirectoryRemoteUrl,
+              compileDirectoryServerUrl,
             )
             return normalizeImportMap(defaultImportMap, entryCompileServerUrl)
           }
@@ -550,8 +562,26 @@ export const createJsenvRollupPlugin = async ({
             // and ignore them and console.info/debug about remote url (https, http, ...)
             const projectUrl = asProjectUrl(ressourceUrl)
             if (!projectUrl) {
-              return { external: true, url: ressourceUrl }
+              return {
+                isExternal: true,
+                url: ressourceUrl,
+              }
+            }
+
+            const originalUrl = asOriginalUrl(projectUrl)
+            if (isWorkerUrl(originalUrl)) {
+              return {
+                isWorker: true,
+                url: ressourceUrl,
+              }
             }
+            if (isServiceWorkerUrl(originalUrl)) {
+              return {
+                isServiceWorker: true,
+                url: ressourceUrl,
+              }
+            }
+
             return ressourceUrl
           },
           emitChunk,
@@ -565,7 +595,7 @@ export const createJsenvRollupPlugin = async ({
             urlImporterMap[jsModuleUrl] = {
               url: resolveUrl(
                 entryPointsPrepared[0].entryProjectRelativeUrl,
-                compileDirectoryRemoteUrl,
+                compileDirectoryServerUrl,
               ),
               line: undefined,
               column: undefined,
@@ -615,7 +645,7 @@ export const createJsenvRollupPlugin = async ({
             const entryUrl =
               entryContentType === "text/html"
                 ? resolveUrl(entryProjectRelativeUrl, compileServerOrigin)
-                : resolveUrl(entryProjectRelativeUrl, compileDirectoryRemoteUrl)
+                : resolveUrl(entryProjectRelativeUrl, compileDirectoryServerUrl)
             await ressourceBuilder.createReferenceForEntryPoint({
               entryContentType,
               entryUrl,
@@ -640,7 +670,7 @@ export const createJsenvRollupPlugin = async ({
         if (specifier.endsWith(".html")) {
           importer = compileServerOrigin
         } else {
-          importer = compileDirectoryRemoteUrl
+          importer = compileDirectoryServerUrl
         }
       } else {
         importer = asServerUrl(importer)
@@ -1284,6 +1314,18 @@ export const createJsenvRollupPlugin = async ({
         }
       })
 
+      await finalizeServiceWorkers({
+        serviceWorkers,
+        serviceWorkerFinalizer,
+        projectDirectoryUrl,
+        buildDirectoryUrl,
+        rollupBuild,
+        buildMappings,
+        buildManifest,
+        lineBreakNormalization,
+        minify,
+      })
+
       rollupBuild = sortObjectByPathnames(rollupBuild)
       buildManifest = sortObjectByPathnames(buildManifest)
       buildMappings = sortObjectByPathnames(buildMappings)
@@ -1505,3 +1547,34 @@ const acceptsJsonContentType = ({ node, format }) => {
   }
   return false
 }
+
+const finalizeServiceWorkers = async ({
+  serviceWorkers,
+  serviceWorkerFinalizer,
+  buildMappings,
+  buildManifest,
+  rollupBuild,
+  lineBreakNormalization,
+}) => {
+  await Promise.all(
+    Object.keys(serviceWorkers).map(async (projectRelativeUrl) => {
+      const projectUrl = resolveUrl(projectRelativeUrl, "file://")
+      projectRelativeUrl = urlToRelativeUrl(projectUrl, "file://")
+      const buildRelativeUrl = buildMappings[projectRelativeUrl]
+      if (!buildRelativeUrl) {
+        throw new Error(
+          `"${projectRelativeUrl}" service worker file missing in the build`,
+        )
+      }
+      const buildFileContent = rollupBuild[buildRelativeUrl].source
+      rollupBuild[buildRelativeUrl].source = serviceWorkerFinalizer(
+        buildFileContent,
+        {
+          buildManifest,
+          rollupBuild,
+          lineBreakNormalization,
+        },
+      )
+    }),
+  )
+}

package/src/internal/building/url_loader.js

@@ -24,7 +24,6 @@ export const createUrlLoader = ({
   const loadUrl = async (rollupUrl, { signal, logger, ressourceBuilder }) => {
     let url = asServerUrl(rollupUrl)
     const { importType, urlWithoutImportType } = extractImportTypeFromUrl(url)
-
     // importing CSS from JS with import assertions
     if (importType === "css") {
       const importer = urlImporterMap[url]
@@ -79,7 +78,6 @@ export const createUrlLoader = ({
         map,
       }
     }
-
     // importing json from JS with import assertion
     if (importType === "json") {
       const importer = urlImporterMap[url]

package/src/internal/compiling/createCompiledFileService.js

@@ -56,9 +56,9 @@ export const createCompiledFileService = ({
   sourcemapMethod,
   sourcemapExcludeSources,
 }) => {
-  const moduleFormats = {}
+  const compileIdModuleFormats = {}
   Object.keys(groupMap).forEach((groupName) => {
-    moduleFormats[groupName] = canAvoidSystemJs({
+    compileIdModuleFormats[groupName] = canAvoidSystemJs({
       runtimeSupport: groupMap[groupName].minRuntimeVersions,
     })
       ? "esmodule"
@@ -187,7 +187,7 @@ export const createCompiledFileService = ({
           runtimeSupport,
           moduleOutFormat:
             moduleOutFormat === undefined
-              ? moduleFormats[compileId]
+              ? compileIdModuleFormats[compileId]
               : moduleOutFormat,
           importMetaFormat,
           transformTopLevelAwait,

package/src/internal/dev_server/toolbar/toolbar.html

@@ -18,7 +18,7 @@
     <div id="toolbar">
       <div id="toolbar-wrapper">
         <section id="file-list-link" data-responsive-toolbar-element>
-          <a class="toolbar-icon-wrapper" href="/">
+          <a class="toolbar-icon-wrapper" href="javascript:void(0);">
             <svg
               id="fileIconSvg"
               class="iconToolbar"

package/src/internal/dev_server/toolbar/toolbar.main.js

@@ -54,6 +54,10 @@ const renderToolbar = async () => {
     hideToolbar({ animate: false })
   }
 
+  document.querySelector(".toolbar-icon-wrapper").onclick = () => {
+    window.parent.location.href = "/"
+  }
+
   renderToolbarNotification()
   makeToolbarResponsive()
   renderToolbarSettings()

package/src/internal/dev_server/toolbar/util/dom.js

@@ -1,4 +1,9 @@
 export const updateIframeOverflowOnParentWindow = () => {
+  if (!window.parent) {
+    // can happen while parent iframe reloads
+    return
+  }
+
   const aTooltipIsOpened =
     document.querySelector("[data-tooltip-visible]") ||
     document.querySelector("[data-tooltip-auto-visible]")

package/src/internal/executing/coverage_utils/v8_coverage_from_directory.js

@@ -35,9 +35,13 @@ export const visitNodeV8Directory = async ({
       await previous
 
       const dirEntryUrl = resolveUrl(dirEntry, coverageDirectoryUrl)
-      const tryReadJsonFile = async () => {
+      const tryReadJsonFile = async (timeSpentTrying = 0) => {
         const fileContent = await readFile(dirEntryUrl, { as: "string" })
         if (fileContent === "") {
+          if (timeSpentTrying < 400) {
+            await new Promise((resolve) => setTimeout(resolve, 200))
+            return tryReadJsonFile(timeSpentTrying + 200)
+          }
           console.warn(`Coverage JSON file is empty at ${dirEntryUrl}`)
           return null
         }
@@ -46,6 +50,10 @@ export const visitNodeV8Directory = async ({
           const fileAsJson = JSON.parse(fileContent)
           return fileAsJson
         } catch (e) {
+          if (timeSpentTrying < 400) {
+            await new Promise((resolve) => setTimeout(resolve, 200))
+            return tryReadJsonFile(timeSpentTrying + 200)
+          }
           console.warn(
             createDetailedMessage(`Error while reading coverage file`, {
               "error stack": e.stack,

package/src/internal/executing/createSummaryLog.js

@@ -3,12 +3,12 @@ import { ANSI } from "@jsenv/log"
 import { msAsDuration } from "../logs/msAsDuration.js"
 import { EXECUTION_COLORS } from "./execution_colors.js"
 
-export const createSummaryLog = (summary) => `
--------------- summary -----------------
+export const createSummaryLog = (
+  summary,
+) => `-------------- summary -----------------
 ${createSummaryMessage(summary)}
 total duration: ${msAsDuration(summary.duration)}
-----------------------------------------
-`
+----------------------------------------`
 
 const createSummaryMessage = ({
   executionCount,

package/src/internal/executing/executeConcurrently.js

@@ -133,6 +133,7 @@ export const executeConcurrently = async (
     }
   }
 
+  logger.info("")
   let executionLog = createLog({ newLine: "" })
   let abortedCount = 0
   let timedoutCount = 0