@jsenv/core 24.2.1 → 24.3.3

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,21 +16,12 @@ import {
   computeOutDirectoryRelativeUrl,
 } from "./internal/compiling/startCompileServer.js"
 import { jsenvExplorableConfig } from "./jsenvExplorableConfig.js"
-import {
-  redirectorHtmlFileInfo,
-  redirectorJsFileInfo,
-} from "./internal/dev_server/redirector/redirector_file_info.js"
-import {
-  exploringIndexHtmlFileInfo,
-  exploringIndexJsFileInfo,
-} from "@jsenv/core/src/internal/dev_server/exploring/exploring_file_info.js"
-import { toolbarJsFileInfo } from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+
 import {
   sourcemapMainFileInfo,
   sourcemapMappingFileInfo,
 } from "./internal/jsenvInternalFiles.js"
 import { jsenvRuntimeSupportDuringDev } from "./jsenvRuntimeSupportDuringDev.js"
-import { eventSourceClientFileInfo } from "./internal/dev_server/event_source_client/event_source_client_file_info.js"
 
 export const startDevServer = async ({
   signal = new AbortController().signal,
@@ -45,10 +37,7 @@ export const startDevServer = async ({
 
   projectDirectoryUrl,
   explorableConfig = jsenvExplorableConfig,
-  mainFileRelativeUrl = urlToRelativeUrl(
-    exploringIndexHtmlFileInfo.sourceUrl,
-    projectDirectoryUrl,
-  ),
+  mainFileRelativeUrl,
   jsenvDirectoryRelativeUrl,
   outDirectoryName = "dev",
   jsenvToolbar = true,
@@ -70,6 +59,16 @@ export const startDevServer = async ({
   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,
@@ -90,19 +89,14 @@ export const startDevServer = async ({
     plugins,
     customServices: {
       ...customServices,
-      "jsenv:redirector": createRedirectorService({
+      "jsenv:redirector": await createRedirectorService({
         projectDirectoryUrl,
         mainFileRelativeUrl,
       }),
-      "jsenv:event_source_client": createEventSourceClientService({
-        projectDirectoryUrl,
-      }),
-      "jsenv:exploring_index": createExploringIndexService({
-        projectDirectoryUrl,
-      }),
       "jsenv:exploring_json": createExploringJsonService({
         projectDirectoryUrl,
         outDirectoryRelativeUrl,
+        mainFileRelativeUrl,
         explorableConfig,
         livereloading,
       }),
@@ -111,9 +105,6 @@ export const startDevServer = async ({
         outDirectoryRelativeUrl,
         explorableConfig,
       }),
-      "jsenv:toolbar": createToolbarService({
-        projectDirectoryUrl,
-      }),
     },
 
     projectDirectoryUrl,
@@ -138,16 +129,12 @@ export const startDevServer = async ({
   return compileServer
 }
 
-const createRedirectorService = ({
+const createRedirectorService = async ({
   projectDirectoryUrl,
   mainFileRelativeUrl,
 }) => {
-  const jsenvRedirectorHtmlRelativeUrlForProject = urlToRelativeUrl(
-    redirectorHtmlFileInfo.sourceUrl,
-    projectDirectoryUrl,
-  )
-  const jsenvRedirectorJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    redirectorJsFileInfo.buildUrl,
+  const redirectorRelativeUrlForProject = urlToRelativeUrl(
+    REDIRECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
   return setupRoutes({
@@ -156,7 +143,7 @@ const createRedirectorService = ({
       return {
         status: 307,
         headers: {
-          location: `${request.origin}/${jsenvRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`,
+          location: `${request.origin}/${redirectorRelativeUrlForProject}?redirect=${redirectTarget}`,
         },
       }
     },
@@ -165,100 +152,11 @@ const createRedirectorService = ({
       return {
         status: 307,
         headers: {
-          location: `${request.origin}/${jsenvRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`,
-        },
-      }
-    },
-    "/.jsenv/redirector.js": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${jsenvRedirectorJsBuildRelativeUrlForProject}`,
-        },
-      }
-    },
-  })
-}
-
-const createEventSourceClientService = ({ projectDirectoryUrl }) => {
-  const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
-    projectDirectoryUrl,
-  )
-  return setupRoutes({
-    "/.jsenv/event_source_client.js": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${eventSourceClientBuildRelativeUrlForProject}`,
-        },
-      }
-    },
-    // 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/event_source_client.js.map": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${eventSourceClientBuildRelativeUrlForProject}.map`,
-        },
-      }
-    },
-  })
-}
-
-const createExploringIndexService = ({ projectDirectoryUrl }) => {
-  const jsenvExploringJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    exploringIndexJsFileInfo.buildUrl,
-    projectDirectoryUrl,
-  )
-  return setupRoutes({
-    "/.jsenv/exploring.index.js": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${jsenvExploringJsBuildRelativeUrlForProject}`,
-        },
-      }
-    },
-    // 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`,
-        },
-      }
-    },
-  })
-}
-
-const createToolbarService = ({ projectDirectoryUrl }) => {
-  const toolbarJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarJsFileInfo.buildUrl,
-    projectDirectoryUrl,
-  )
-
-  return setupRoutes({
-    "/.jsenv/toolbar.main.js": (request) => {
-      const jsenvToolbarJsBuildServerUrl = `${request.origin}/${toolbarJsBuildRelativeUrlForProject}`
-      return {
-        status: 307,
-        headers: {
-          location: jsenvToolbarJsBuildServerUrl,
-        },
-      }
-    },
-    "/.jsenv/jsenv_toolbar.js.map": (request) => {
-      return {
-        status: 307,
-        headers: {
-          location: `${request.origin}/${toolbarJsBuildRelativeUrlForProject}.map`,
+          location: `${
+            request.origin
+          }/${redirectorRelativeUrlForProject}?redirect=${encodeURIComponent(
+            redirectTarget,
+          )}`,
         },
       }
     },
@@ -270,6 +168,7 @@ const createExploringJsonService = ({
   outDirectoryRelativeUrl,
   explorableConfig,
   livereloading,
+  mainFileRelativeUrl,
 }) => {
   return (request) => {
     if (
@@ -283,10 +182,7 @@ const createExploringJsonService = ({
           jsenvCoreDirectoryUrl,
           projectDirectoryUrl,
         ),
-        exploringHtmlFileRelativeUrl: urlToRelativeUrl(
-          exploringIndexHtmlFileInfo.sourceUrl,
-          projectDirectoryUrl,
-        ),
+        exploringHtmlFileRelativeUrl: mainFileRelativeUrl,
         sourcemapMainFileRelativeUrl: urlToRelativeUrl(
           sourcemapMainFileInfo.url,
           jsenvCoreDirectoryUrl,

package/src/execute.js

@@ -88,11 +88,7 @@ export const execute = async ({
   }
 
   try {
-    const {
-      outDirectoryRelativeUrl,
-      origin: compileServerOrigin,
-      stop,
-    } = await startCompileServer({
+    const compileServer = await startCompileServer({
       signal: executeOperation.signal,
       logLevel: compileServerLogLevel,
 
@@ -117,7 +113,7 @@ export const execute = async ({
       compileServerCanWriteOnFilesystem,
     })
     executeOperation.addEndCallback(async () => {
-      await stop("execution done")
+      await compileServer.stop("execution done")
     })
 
     const result = await launchAndExecute({
@@ -127,8 +123,9 @@ export const execute = async ({
       runtime,
       runtimeParams: {
         projectDirectoryUrl,
-        compileServerOrigin,
-        outDirectoryRelativeUrl,
+        compileServerOrigin: compileServer.origin,
+        compileServerId: compileServer.id,
+        outDirectoryRelativeUrl: compileServer.outDirectoryRelativeUrl,
         ...runtimeParams,
       },
       executeParams: {
@@ -155,8 +152,8 @@ export const execute = async ({
     })
 
     if (collectCompileServerInfo) {
-      result.outDirectoryRelativeUrl = outDirectoryRelativeUrl
-      result.compileServerOrigin = compileServerOrigin
+      result.compileServerOrigin = compileServer.origin
+      result.outDirectoryRelativeUrl = compileServer.outDirectoryRelativeUrl
     }
 
     if (result.status === "errored") {

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>