@jsenv/core 24.1.0-alpha.0 → 24.3.1

package/src/dev_server.js

@@ -5,6 +5,7 @@ import {
 } from "@jsenv/filesystem"
 import { setupRoutes } from "@jsenv/server"
 
+import { REDIRECTOR_BUILD_URL } from "@jsenv/core/dist/build_manifest.js"
 import { jsenvCoreDirectoryUrl } from "./internal/jsenvCoreDirectoryUrl.js"
 import {
   assertProjectDirectoryUrl,
@@ -15,14 +16,10 @@ import {
   computeOutDirectoryRelativeUrl,
 } from "./internal/compiling/startCompileServer.js"
 import { jsenvExplorableConfig } from "./jsenvExplorableConfig.js"
+
 import {
   sourcemapMainFileInfo,
   sourcemapMappingFileInfo,
-  jsenvExploringRedirectorHtmlFileInfo,
-  jsenvExploringRedirectorJsFileInfo,
-  jsenvExploringIndexHtmlFileInfo,
-  jsenvExploringIndexJsFileInfo,
-  jsenvToolbarJsFileInfo,
 } from "./internal/jsenvInternalFiles.js"
 import { jsenvRuntimeSupportDuringDev } from "./jsenvRuntimeSupportDuringDev.js"
 
@@ -40,10 +37,7 @@ export const startDevServer = async ({
 
   projectDirectoryUrl,
   explorableConfig = jsenvExplorableConfig,
-  mainFileRelativeUrl = urlToRelativeUrl(
-    jsenvExploringIndexHtmlFileInfo.url,
-    projectDirectoryUrl,
-  ),
+  mainFileRelativeUrl,
   jsenvDirectoryRelativeUrl,
   outDirectoryName = "dev",
   jsenvToolbar = true,
@@ -59,34 +53,28 @@ export const startDevServer = async ({
   sourcemapMethod,
   customCompilers,
   livereloadWatchConfig,
+  livereloadLogLevel,
   jsenvDirectoryClean,
 }) => {
   projectDirectoryUrl = assertProjectDirectoryUrl({ projectDirectoryUrl })
   await assertProjectDirectoryExists({ projectDirectoryUrl })
 
+  if (mainFileRelativeUrl === undefined) {
+    mainFileRelativeUrl = urlToRelativeUrl(
+      new URL(
+        "./src/internal/dev_server/exploring/exploring.html",
+        jsenvCoreDirectoryUrl,
+      ).href,
+      projectDirectoryUrl,
+    )
+  }
+
   const outDirectoryRelativeUrl = computeOutDirectoryRelativeUrl({
     projectDirectoryUrl,
     jsenvDirectoryRelativeUrl,
     outDirectoryName,
   })
 
-  const redirectFiles = createRedirectFilesService({
-    projectDirectoryUrl,
-    outDirectoryRelativeUrl,
-    mainFileRelativeUrl,
-  })
-  const serveExploringData = createExploringDataService({
-    projectDirectoryUrl,
-    outDirectoryRelativeUrl,
-    explorableConfig,
-    livereloading,
-  })
-  const serveExplorableListAsJson = createExplorableListAsJsonService({
-    projectDirectoryUrl,
-    outDirectoryRelativeUrl,
-    explorableConfig,
-  })
-
   const compileServer = await startCompileServer({
     signal,
     handleSIGINT,
@@ -101,13 +89,27 @@ export const startDevServer = async ({
     plugins,
     customServices: {
       ...customServices,
-      "jsenv:redirector": redirectFiles,
-      "jsenv:exploring-data": serveExploringData,
-      "jsenv:explorables": serveExplorableListAsJson,
+      "jsenv:redirector": await createRedirectorService({
+        projectDirectoryUrl,
+        mainFileRelativeUrl,
+      }),
+      "jsenv:exploring_json": createExploringJsonService({
+        projectDirectoryUrl,
+        outDirectoryRelativeUrl,
+        mainFileRelativeUrl,
+        explorableConfig,
+        livereloading,
+      }),
+      "jsenv:explorables_json": createExplorableJsonService({
+        projectDirectoryUrl,
+        outDirectoryRelativeUrl,
+        explorableConfig,
+      }),
     },
 
     projectDirectoryUrl,
     livereloadSSE: livereloading,
+    jsenvEventSourceClientInjection: true,
     jsenvToolbarInjection: jsenvToolbar,
     jsenvDirectoryRelativeUrl,
     outDirectoryName,
@@ -120,109 +122,53 @@ export const startDevServer = async ({
     babelPluginMap,
     runtimeSupport: runtimeSupportDuringDev,
     livereloadWatchConfig,
+    livereloadLogLevel,
     jsenvDirectoryClean,
   })
 
   return compileServer
 }
 
-const createRedirectFilesService = ({
+const createRedirectorService = async ({
   projectDirectoryUrl,
   mainFileRelativeUrl,
 }) => {
-  const jsenvExploringRedirectorHtmlRelativeUrlForProject = urlToRelativeUrl(
-    jsenvExploringRedirectorHtmlFileInfo.url,
-    projectDirectoryUrl,
-  )
-  const jsenvExploringRedirectorJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvExploringRedirectorJsFileInfo.jsenvBuildUrl,
+  const redirectorRelativeUrlForProject = urlToRelativeUrl(
+    REDIRECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
-  const jsenvExploringJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvExploringIndexJsFileInfo.jsenvBuildUrl,
-    projectDirectoryUrl,
-  )
-  const jsenvToolbarJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvToolbarJsFileInfo.jsenvBuildUrl,
-    projectDirectoryUrl,
-  )
-
   return setupRoutes({
     "/": (request) => {
       const redirectTarget = mainFileRelativeUrl
-      const jsenvExploringRedirectorHtmlServerUrl = `${request.origin}/${jsenvExploringRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`
       return {
         status: 307,
         headers: {
-          location: jsenvExploringRedirectorHtmlServerUrl,
+          location: `${request.origin}/${redirectorRelativeUrlForProject}?redirect=${redirectTarget}`,
         },
       }
     },
     "/.jsenv/redirect/:rest*": (request) => {
       const redirectTarget = request.ressource.slice("/.jsenv/redirect/".length)
-      const jsenvExploringRedirectorHtmlServerUrl = `${request.origin}/${jsenvExploringRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`
-      return {
-        status: 307,
-        headers: {
-          location: jsenvExploringRedirectorHtmlServerUrl,
-        },
-      }
-    },
-    "/.jsenv/exploring.redirector.js": (request) => {
-      const jsenvExploringRedirectorBuildServerUrl = `${request.origin}/${jsenvExploringRedirectorJsBuildRelativeUrlForProject}`
-      return {
-        status: 307,
-        headers: {
-          location: jsenvExploringRedirectorBuildServerUrl,
-        },
-      }
-    },
-    "/.jsenv/exploring.index.js": (request) => {
-      const jsenvExploringJsBuildServerUrl = `${request.origin}/${jsenvExploringJsBuildRelativeUrlForProject}`
-      return {
-        status: 307,
-        headers: {
-          location: jsenvExploringJsBuildServerUrl,
-        },
-      }
-    },
-    "/.jsenv/toolbar.main.js": (request) => {
-      const jsenvToolbarJsBuildServerUrl = `${request.origin}/${jsenvToolbarJsBuildRelativeUrlForProject}`
       return {
         status: 307,
         headers: {
-          location: jsenvToolbarJsBuildServerUrl,
-        },
-      }
-    },
-    // unfortunately browser resolves sourcemap to url before redirection (not after).
-    // It means browser tries to load source map from "/.jsenv/jsenv-toolbar.js.map"
-    // we could also inline sourcemap but it's not yet possible
-    // inside buildProject
-    "/.jsenv/jsenv_exploring_index.js.map": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${jsenvExploringJsBuildRelativeUrlForProject}.map`,
-        },
-      }
-    },
-    "/.jsenv/jsenv_toolbar.js.map": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${jsenvToolbarJsBuildRelativeUrlForProject}.map`,
+          location: `${
+            request.origin
+          }/${redirectorRelativeUrlForProject}?redirect=${encodeURIComponent(
+            redirectTarget,
+          )}`,
         },
       }
     },
   })
 }
 
-const createExploringDataService = ({
+const createExploringJsonService = ({
   projectDirectoryUrl,
   outDirectoryRelativeUrl,
   explorableConfig,
   livereloading,
+  mainFileRelativeUrl,
 }) => {
   return (request) => {
     if (
@@ -236,10 +182,7 @@ const createExploringDataService = ({
           jsenvCoreDirectoryUrl,
           projectDirectoryUrl,
         ),
-        exploringHtmlFileRelativeUrl: urlToRelativeUrl(
-          jsenvExploringIndexHtmlFileInfo.url,
-          projectDirectoryUrl,
-        ),
+        exploringHtmlFileRelativeUrl: mainFileRelativeUrl,
         sourcemapMainFileRelativeUrl: urlToRelativeUrl(
           sourcemapMainFileInfo.url,
           jsenvCoreDirectoryUrl,
@@ -266,7 +209,7 @@ const createExploringDataService = ({
   }
 }
 
-const createExplorableListAsJsonService = ({
+const createExplorableJsonService = ({
   projectDirectoryUrl,
   outDirectoryRelativeUrl,
   explorableConfig,

package/src/importUsingChildProcess.js

@@ -1,5 +1,5 @@
 import { launchAndExecute } from "./internal/executing/launchAndExecute.js"
-import { createControllableNodeProcess } from "./internal/node-launcher/createControllableNodeProcess.js"
+import { createControllableNodeProcess } from "./internal/node_launcher/createControllableNodeProcess.js"
 
 export const importUsingChildProcess = async (
   fileUrl,

package/src/internal/{runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js → browser_feature_detection/browser_feature_detection.js}

@@ -1,7 +1,9 @@
-import { fetchJson } from "../../browser-utils/fetchJson.js"
-import { computeCompileIdFromGroupId } from "../computeCompileIdFromGroupId.js"
-import { detectBrowser } from "../detectBrowser/detectBrowser.js"
-import { resolveGroup } from "../resolveGroup.js"
+/* eslint-env browser */
+
+import { computeCompileIdFromGroupId } from "../runtime/computeCompileIdFromGroupId.js"
+import { resolveGroup } from "../runtime/resolveGroup.js"
+import { fetchJson } from "../browser_utils/fetchJson.js"
+import { detectBrowser } from "../browser_detection/browser_detection.js"
 
 export const scanBrowserRuntimeFeatures = async ({
   coverageHandledFromOutside = false,
@@ -61,44 +63,6 @@ export const scanBrowserRuntimeFeatures = async ({
   }
 }
 
-const detectSupportedFeatures = async ({
-  featuresReport,
-  failFastOnFeatureDetection,
-  inlineImportMapIntoHTML,
-}) => {
-  // start testing importmap support first and not in paralell
-  // so that there is not module script loaded beore importmap is injected
-  // it would log an error in chrome console and return undefined
-  const importmap = await supportsImportmap({
-    // chrome supports inline but not remote importmap
-    // https://github.com/WICG/import-maps/issues/235
-
-    // at this stage we won't know if the html file will use
-    // an importmap or not and if that importmap is inline or specified with an src
-    // so we should test if browser support local and remote importmap.
-    // But there exploring server can inline importmap by transforming html
-    // and in that case we can test only the local importmap support
-    // so we test importmap support and the remote one
-    remote: !inlineImportMapIntoHTML,
-  })
-  featuresReport.importmap = importmap
-  if (!importmap && failFastOnFeatureDetection) {
-    return
-  }
-
-  const dynamicImport = await supportsDynamicImport()
-  featuresReport.dynamicImport = dynamicImport
-  if (!dynamicImport && failFastOnFeatureDetection) {
-    return
-  }
-
-  const topLevelAwait = await supportsTopLevelAwait()
-  featuresReport.topLevelAwait = topLevelAwait
-  if (!topLevelAwait && failFastOnFeatureDetection) {
-    return
-  }
-}
-
 const pluginRequiredNamesFromGroupInfo = async (
   groupInfo,
   { featuresReport, coverageHandledFromOutside },
@@ -140,25 +104,51 @@ const pluginRequiredNamesFromGroupInfo = async (
   return requiredPluginNames
 }
 
-const supportsNewStylesheet = () => {
-  try {
-    // eslint-disable-next-line no-new
-    new CSSStyleSheet()
-    return true
-  } catch (e) {
-    return false
+const detectSupportedFeatures = async ({
+  featuresReport,
+  failFastOnFeatureDetection,
+  inlineImportMapIntoHTML,
+}) => {
+  // start testing importmap support first and not in paralell
+  // so that there is not module script loaded beore importmap is injected
+  // it would log an error in chrome console and return undefined
+  const importmap = await supportsImportmap({
+    // chrome supports inline but not remote importmap
+    // https://github.com/WICG/import-maps/issues/235
+
+    // at this stage we won't know if the html file will use
+    // an importmap or not and if that importmap is inline or specified with an src
+    // so we should test if browser support local and remote importmap.
+    // But there exploring server can inline importmap by transforming html
+    // and in that case we can test only the local importmap support
+    // so we test importmap support and the remote one
+    remote: !inlineImportMapIntoHTML,
+  })
+  featuresReport.importmap = importmap
+  if (!importmap && failFastOnFeatureDetection) {
+    return
+  }
+
+  const dynamicImport = await supportsDynamicImport()
+  featuresReport.dynamicImport = dynamicImport
+  if (!dynamicImport && failFastOnFeatureDetection) {
+    return
+  }
+
+  const topLevelAwait = await supportsTopLevelAwait()
+  featuresReport.topLevelAwait = topLevelAwait
+  if (!topLevelAwait && failFastOnFeatureDetection) {
+    return
   }
 }
 
 const supportsImportmap = async ({ remote = true } = {}) => {
   const specifier = asBase64Url(`export default false`)
-
   const importMap = {
     imports: {
       [specifier]: asBase64Url(`export default true`),
     },
   }
-
   const importmapScript = document.createElement("script")
   const importmapString = JSON.stringify(importMap, null, "  ")
   importmapScript.type = "importmap"
@@ -169,59 +159,74 @@ const supportsImportmap = async ({ remote = true } = {}) => {
   } else {
     importmapScript.textContent = importmapString
   }
-
   document.body.appendChild(importmapScript)
 
-  const scriptModule = document.createElement("script")
-  scriptModule.type = "module"
-  scriptModule.src = asBase64Url(
-    `import supported from "${specifier}"; window.__importmap_supported = supported`,
-  )
-
-  return new Promise((resolve, reject) => {
-    scriptModule.onload = () => {
-      const supported = window.__importmap_supported
-      delete window.__importmap_supported
-      document.body.removeChild(scriptModule)
-      document.body.removeChild(importmapScript)
-      resolve(supported)
-    }
-    scriptModule.onerror = () => {
-      document.body.removeChild(scriptModule)
-      document.body.removeChild(importmapScript)
-      reject()
-    }
-    document.body.appendChild(scriptModule)
-  })
+  try {
+    await executeWithScriptModuleInjection(
+      `import supported from "${specifier}"; window.__jsenv_runtime_test_importmap__ = supported`,
+    )
+    document.body.removeChild(importmapScript)
+    return window.__jsenv_runtime_test_importmap__
+  } catch (e) {
+    document.body.removeChild(importmapScript)
+    return false
+  }
 }
 
 const supportsDynamicImport = async () => {
   const moduleSource = asBase64Url(`export default 42`)
   try {
-    const namespace = await import(moduleSource)
+    await executeWithScriptModuleInjection(
+      `window.__jsenv_runtime_test_dynamic_import__ = import(${JSON.stringify(
+        moduleSource,
+      )})`,
+    )
+    const namespace = await window.__jsenv_runtime_test_dynamic_import__
     return namespace.default === 42
   } catch (e) {
     return false
   }
 }
 
+const supportsNewStylesheet = () => {
+  try {
+    // eslint-disable-next-line no-new
+    new CSSStyleSheet()
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 const supportsTopLevelAwait = async () => {
-  const moduleSource = asBase64Url(`export default await Promise.resolve(42)`)
   try {
-    const namespace = await import(moduleSource)
-    return namespace.default === 42
+    await executeWithScriptModuleInjection(
+      `window.__jsenv_runtime_test_top_level_await__ = await Promise.resolve(42)`,
+    )
+    return window.__jsenv_runtime_test_top_level_await__ === 42
   } catch (e) {
     return false
   }
 }
 
+// to execute in a browser devtools
+// const featuresReport = {}
+// await detectSupportedFeatures({ featuresReport, inlineImportMapIntoHTML: true })
+// console.log(featuresReport)
+
 const supportsJsonImportAssertions = async () => {
   const jsonBase64Url = asBase64Url("42", "application/json")
   const moduleSource = asBase64Url(
-    `export { default } from "${jsonBase64Url}" assert { type: "json" }`,
+    `import data from "${jsonBase64Url}" assert { type: "json" }
+export default data`,
   )
   try {
-    const namespace = await import(moduleSource)
+    await executeWithScriptModuleInjection(
+      `window.__jsenv_runtime_test_json_import_assertion__ = import(${JSON.stringify(
+        moduleSource,
+      )})`,
+    )
+    const namespace = await window.__jsenv_runtime_test_json_import_assertion__
     return namespace.default === 42
   } catch (e) {
     return false
@@ -231,16 +236,46 @@ const supportsJsonImportAssertions = async () => {
 const supportsCssImportAssertions = async () => {
   const cssBase64Url = asBase64Url("p { color: red; }", "text/css")
   const moduleSource = asBase64Url(
-    `export { default } from "${cssBase64Url}" assert { type: "css" }`,
+    `import css from "${cssBase64Url}" assert { type: "css" }
+export default css`,
   )
   try {
-    const namespace = await import(moduleSource)
+    await executeWithScriptModuleInjection(
+      `window.__jsenv_runtime_test_css_import_assertion__ = import(${JSON.stringify(
+        moduleSource,
+      )})`,
+    )
+    const namespace = await window.__jsenv_runtime_test_css_import_assertion__
     return namespace.default instanceof CSSStyleSheet
   } catch (e) {
     return false
   }
 }
 
+const executeWithScriptModuleInjection = (code) => {
+  const scriptModule = document.createElement("script")
+  scriptModule.type = "module"
+
+  const loadPromise = new Promise((resolve, reject) => {
+    scriptModule.onload = () => {
+      document.body.removeChild(scriptModule)
+      resolve()
+    }
+    scriptModule.onerror = () => {
+      document.body.removeChild(scriptModule)
+      reject()
+    }
+    document.body.appendChild(scriptModule)
+  })
+
+  scriptModule.src = asBase64Url(code)
+
+  return loadPromise
+}
+
 const asBase64Url = (text, mimeType = "application/javascript") => {
   return `data:${mimeType};base64,${window.btoa(text)}`
 }
+
+// const cssImportAssertions = await supportsCssImportAssertions()
+// console.log({ cssImportAssertions })

package/src/internal/browser_feature_detection/compile_proxy.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Compile proxy</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <script>
+      window.readyPromise = new Promise((resolve) => {
+        window.resolveReadyPromise = resolve
+      })
+    </script>
+    <script
+      type="importmap"
+      src="../../../node_resolution.importmap"
+    ></script>
+    <script type="module">
+      import { scanBrowserRuntimeFeatures } from "./browser_feature_detection.js"
+
+      window.scanBrowserRuntimeFeatures = scanBrowserRuntimeFeatures
+      window.resolveReadyPromise()
+    </script>
+  </body>
+</html>

package/src/internal/{browser-launcher → browser_launcher}/executeHtmlFile.js

@@ -5,10 +5,10 @@ import {
   urlToExtension,
 } from "@jsenv/filesystem"
 
-import { jsenvCompileProxyHtmlFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
+import { COMPILE_PROXY_BUILD_URL } from "@jsenv/core/dist/build_manifest.js"
 import { filterV8Coverage } from "@jsenv/core/src/internal/executing/coverage_utils/v8_coverage_from_directory.js"
 import { composeTwoFileByFileIstanbulCoverages } from "@jsenv/core/src/internal/executing/coverage_utils/istanbul_coverage_composition.js"
-import { evalSource } from "../runtime/createNodeRuntime/evalSource.js"
+import { evalSource } from "../node_runtime/evalSource.js"
 import { escapeRegexpSpecialCharacters } from "../escapeRegexpSpecialCharacters.js"
 
 export const executeHtmlFile = async (
@@ -39,7 +39,7 @@ export const executeHtmlFile = async (
   await assertFilePresence(fileUrl)
 
   const compileProxyProjectRelativeUrl = urlToRelativeUrl(
-    jsenvCompileProxyHtmlFileInfo.url,
+    COMPILE_PROXY_BUILD_URL,
     projectDirectoryUrl,
   )
   const compileProxyClientUrl = resolveUrl(
@@ -55,7 +55,10 @@ export const executeHtmlFile = async (
   executeOperation.throwIfAborted()
   const browserRuntimeFeaturesReport = await page.evaluate(
     /* istanbul ignore next */
-    ({ coverageHandledFromOutside }) => {
+    async ({ coverageHandledFromOutside }) => {
+      // eslint-disable-next-line no-undef
+      await window.readyPromise
+
       // eslint-disable-next-line no-undef
       return window.scanBrowserRuntimeFeatures({
         coverageHandledFromOutside,

package/src/internal/{browser-launcher/jsenv-browser-system.js → browser_runtime/browser_runtime.js}

@@ -1,14 +1,14 @@
 /* eslint-env browser */
 
-import { unevalException } from "../unevalException.js"
-import { createBrowserRuntime } from "../runtime/createBrowserRuntime/createBrowserRuntime.js"
 import { installBrowserErrorStackRemapping } from "../error-stack-remapping/installBrowserErrorStackRemapping.js"
-import { fetchUrl } from "../browser-utils/fetch-browser.js"
-import { fetchAndEvalUsingFetch } from "../browser-utils/fetchAndEvalUsingFetch.js"
+import { fetchUrl } from "../browser_utils/fetch-browser.js"
+import { fetchAndEvalUsingFetch } from "../browser_utils/fetchAndEvalUsingFetch.js"
+import { unevalException } from "../unevalException.js"
 import { memoize } from "../memoize.js"
 
 import { displayErrorInDocument } from "./displayErrorInDocument.js"
 import { displayErrorNotification } from "./displayErrorNotification.js"
+import { createBrowserRuntime } from "./createBrowserRuntime.js"
 
 const getNavigationStartTime = () => {
   try {

package/src/internal/{runtime/createBrowserRuntime/createBrowserSystem.js → browser_runtime/browser_system.js}

@@ -1,6 +1,7 @@
-import { getJavaScriptModuleResponseError } from "../module-registration.js"
+/* eslint-env browser */
 
-import "../s.js"
+import { getJavaScriptModuleResponseError } from "../runtime/module-registration.js"
+import "../runtime/s.js"
 
 export const createBrowserSystem = ({
   compileServerOrigin,