@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/toolbar_main.js

@@ -1,7 +1,4 @@
-import { urlIsInsideOf } from "@jsenv/filesystem/src/urlIsInsideOf.js"
-import { urlToRelativeUrl } from "@jsenv/filesystem/src/urlToRelativeUrl.js"
-
-import { startJavaScriptAnimation } from "../toolbar/util/animation.js"
+import { startJavaScriptAnimation } from "./util/animation.js"
 import "./focus/toolbar_focus.js"
 import { setLinkHrefForParentWindow } from "./util/iframe_to_parent_href.js"
 import {
@@ -19,24 +16,12 @@ import { renderToolbarNotification } from "./notification/toolbar_notification.j
 import { renderToolbarTheme } from "./theme/toolbar_theme.js"
 import { renderToolbarAnimation } from "./animation/toolbar_animation.js"
 import { renderExecutionInToolbar } from "./execution/toolbar_execution.js"
-import { renderCompilationInToolbar } from "./compilation/toolbar_compilation.js"
 import { initToolbarEventSource } from "./eventsource/toolbar_eventsource.js"
 import { makeToolbarResponsive } from "./responsive/toolbar_responsive.js"
 
 const toolbarVisibilityPreference = createPreference("toolbar")
 
-const renderToolbar = async ({ exploringJSON }) => {
-  const executedFileCompiledUrl = window.parent.location.href
-  const compileServerOrigin = window.parent.location.origin
-  // this should not block the whole toolbar rendering + interactivity
-  const { jsenvDirectoryRelativeUrl, livereloading } = exploringJSON
-  const compileGroup = getCompileGroup({
-    executedFileCompiledUrl,
-    jsenvDirectoryRelativeUrl,
-    compileServerOrigin,
-  })
-  const executedFileRelativeUrl = compileGroup.fileRelativeUrl
-
+const renderToolbar = async () => {
   const toolbarOverlay = document.querySelector("#toolbar-overlay")
   toolbarOverlay.onclick = () => {
     hideAllTooltip()
@@ -57,20 +42,15 @@ const renderToolbar = async ({ exploringJSON }) => {
     document.querySelector(".toolbar-icon-wrapper"),
     "/",
   )
-
   renderToolbarNotification()
   makeToolbarResponsive()
   renderToolbarSettings()
   renderToolbarAnimation()
   renderToolbarTheme()
-  renderExecutionInToolbar({ executedFileRelativeUrl })
-  renderCompilationInToolbar({ compileGroup })
+  renderExecutionInToolbar()
   // this might become active but we need to detect this somehow
   deactivateToolbarSection(document.querySelector("#file-list-link"))
-  initToolbarEventSource({
-    executedFileRelativeUrl,
-    livereloading,
-  })
+  initToolbarEventSource()
 
   // if user click enter or space quickly while closing toolbar
   // it will cancel the closing
@@ -96,7 +76,7 @@ let hideToolbar = () => {
 }
 
 // (by the way it might be cool to have the toolbar auto show when)
-// it has something to say (being disconnected from livereload server)
+// it has something to say (being disconnected from server)
 const showToolbar = ({ animate = true } = {}) => {
   toolbarVisibilityPreference.set(true)
   if (animate) {
@@ -163,33 +143,6 @@ const showToolbar = ({ animate = true } = {}) => {
   }
 }
 
-const getCompileGroup = ({
-  executedFileCompiledUrl,
-  jsenvDirectoryRelativeUrl,
-  compileServerOrigin,
-}) => {
-  const jsenvDirectoryServerUrl = new URL(
-    jsenvDirectoryRelativeUrl,
-    compileServerOrigin,
-  ).href
-  if (urlIsInsideOf(executedFileCompiledUrl, jsenvDirectoryServerUrl)) {
-    const afterCompileDirectory = urlToRelativeUrl(
-      executedFileCompiledUrl,
-      jsenvDirectoryServerUrl,
-    )
-    const slashIndex = afterCompileDirectory.indexOf("/")
-    const fileRelativeUrl = afterCompileDirectory.slice(slashIndex + 1)
-    return {
-      fileRelativeUrl,
-      compileId: afterCompileDirectory.slice(0, slashIndex),
-    }
-  }
-  return {
-    fileRelativeUrl: new URL(executedFileCompiledUrl).pathname.slice(1),
-    compileId: null,
-  }
-}
-
 const addExternalCommandCallback = (command, callback) => {
   const messageEventCallback = (messageEvent) => {
     const { data } = messageEvent
@@ -200,11 +153,9 @@ const addExternalCommandCallback = (command, callback) => {
     if (!__jsenv__) {
       return
     }
-
     if (__jsenv__.command !== command) {
       return
     }
-
     callback(...__jsenv__.args)
   }
 
@@ -231,8 +182,11 @@ window.toolbar = {
   hide: () => hideToolbar(),
 }
 
-addExternalCommandCallback("renderToolbar", (data) => {
-  renderToolbar(data)
+// const { currentScript } = document
+addExternalCommandCallback("renderToolbar", ({ logs }) => {
+  renderToolbar({
+    logs,
+  })
 })
 addExternalCommandCallback("showToolbar", () => {
   showToolbar()

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/tooltip/tooltip.css

@@ -9,7 +9,7 @@
   padding: 10px;
   font-size: 14px;
   margin-left: -40px;
-  max-width: 160px;
+  max-width: 260px;
   cursor: default;
 }
 

package/src/{internal/dev_server/toolbar → dev/plugins/toolbar/client}/util/fetching.js

@@ -1,13 +1,11 @@
-import { memoize } from "../../../memoize.js"
+import { memoize } from "@jsenv/utils/memoize/memoize.js"
 
 const fetchPolyfill = async (...args) => {
   const { fetchUsingXHR } = await loadPolyfill()
   return fetchUsingXHR(...args)
 }
 
-const loadPolyfill = memoize(() =>
-  import("../../../browser_utils/fetch_using_xhr.js"),
-)
+const loadPolyfill = memoize(() => import("./fetch_using_xhr.js"))
 
 export const fetchUrl =
   typeof window.fetch === "function" &&

package/src/dev/plugins/toolbar/jsenv_plugin_toolbar.js

@@ -0,0 +1,62 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+
+export const jsenvPluginToolbar = ({ logs = false } = {}) => {
+  const toolbarInjectorClientFileUrl = new URL(
+    "./client/toolbar_injector.js",
+    import.meta.url,
+  ).href
+  const toolbarHtmlClientFileUrl = new URL(
+    "./client/toolbar.html",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:toolbar",
+    appliesDuring: {
+      dev: true,
+    },
+    transform: {
+      html: ({ url, content }, { referenceUtils }) => {
+        if (url === toolbarHtmlClientFileUrl) {
+          return null
+        }
+        const htmlAst = parseHtmlString(content)
+        const [toolbarInjectorReference] = referenceUtils.inject({
+          type: "js_import_export",
+          specifier: toolbarInjectorClientFileUrl,
+        })
+        const [toolbarClientFileReference] = referenceUtils.inject({
+          type: "iframe_src",
+          specifier: toolbarHtmlClientFileUrl,
+        })
+        injectScriptAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "type": "module",
+            "textContent": `
+import { injectToolbar } from ${toolbarInjectorReference.generatedSpecifier}
+injectToolbar(${JSON.stringify(
+              {
+                toolbarUrl: toolbarClientFileReference.generatedSpecifier,
+                logs,
+              },
+              null,
+              "  ",
+            )})`,
+            "injected-by": "jsenv:toolbar",
+          }),
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}

package/src/dev/start_dev_server.js

@@ -0,0 +1,105 @@
+import { assertAndNormalizeDirectoryUrl } from "@jsenv/filesystem"
+import { createLogger } from "@jsenv/logger"
+
+import { createTaskLog } from "@jsenv/utils/logs/task_log.js"
+import { createUrlGraph } from "@jsenv/core/src/omega/url_graph.js"
+import { getCorePlugins } from "@jsenv/core/src/omega/core_plugins.js"
+import { createKitchen } from "@jsenv/core/src/omega/kitchen.js"
+import { startOmegaServer } from "@jsenv/core/src/omega/omega_server.js"
+
+import { jsenvPluginAutoreload } from "./plugins/autoreload/jsenv_plugin_autoreload.js"
+import { jsenvPluginExplorer } from "./plugins/explorer/jsenv_plugin_explorer.js"
+import { jsenvPluginToolbar } from "./plugins/toolbar/jsenv_plugin_toolbar.js"
+
+export const startDevServer = async ({
+  signal = new AbortController().signal,
+  logLevel,
+  port,
+  protocol,
+  listenAnyIp,
+  // it's better to use http1 by default because it allows to get statusText in devtools
+  // which gives valuable information when there is errors
+  http2 = false,
+  certificate,
+  privateKey,
+  keepProcessAlive = true,
+
+  rootDirectoryUrl,
+  plugins = [],
+
+  sourcemaps = "inline",
+  autoreload = true,
+  autoreloadPatterns = {
+    "./**": true,
+    "./**/.*/": false, // any folder starting with a dot is ignored (includes .git for instance)
+    "./dist/": false,
+    "./**/node_modules/": false,
+  },
+  explorerGroups = {
+    source: {
+      "./*.html": true,
+      "./src/**/*.html": true,
+    },
+    test: {
+      "./test/**/*.test.html": true,
+    },
+  },
+  toolbar = false,
+}) => {
+  const logger = createLogger({ logLevel })
+  const startServerTask = createTaskLog(logger, "start server")
+
+  rootDirectoryUrl = assertAndNormalizeDirectoryUrl(rootDirectoryUrl)
+  const urlGraph = createUrlGraph()
+  const kitchen = createKitchen({
+    signal,
+    logger,
+    rootDirectoryUrl,
+    urlGraph,
+    plugins: [
+      ...plugins,
+      ...getCorePlugins(),
+      ...(autoreload
+        ? [
+            jsenvPluginAutoreload({
+              rootDirectoryUrl,
+              urlGraph,
+              autoreloadPatterns,
+            }),
+          ]
+        : []),
+      jsenvPluginExplorer({
+        groups: explorerGroups,
+      }),
+      ...(toolbar ? [jsenvPluginToolbar(toolbar)] : []),
+    ],
+    scenario: "dev",
+    sourcemaps,
+  })
+  const server = await startOmegaServer({
+    logger,
+    keepProcessAlive,
+    listenAnyIp,
+    port,
+    protocol,
+    http2,
+    certificate,
+    privateKey,
+    rootDirectoryUrl,
+    urlGraph,
+    kitchen,
+    scenario: "dev",
+  })
+  startServerTask.done()
+  logger.info(``)
+  Object.keys(server.origins).forEach((key) => {
+    logger.info(`- ${server.origins[key]}`)
+  })
+  logger.info(``)
+  server.addEffect(() => {
+    return () => {
+      kitchen.pluginController.callHooks("destroy")
+    }
+  })
+  return server
+}

package/src/execute/execute.js

@@ -0,0 +1,132 @@
+import { Abort, raceProcessTeardownEvents } from "@jsenv/abort"
+
+import { assertAndNormalizeDirectoryUrl } from "@jsenv/filesystem"
+import { createLogger } from "@jsenv/logger"
+
+import { createUrlGraph } from "@jsenv/core/src/omega/url_graph.js"
+import { getCorePlugins } from "@jsenv/core/src/omega/core_plugins.js"
+import { createKitchen } from "@jsenv/core/src/omega/kitchen.js"
+import { startOmegaServer } from "@jsenv/core/src/omega/omega_server.js"
+
+import { run } from "./run.js"
+
+export const execute = async ({
+  signal = new AbortController().signal,
+  handleSIGINT = true,
+  logLevel,
+  rootDirectoryUrl,
+
+  fileRelativeUrl,
+  allocatedMs,
+  mirrorConsole = true,
+  keepRunning = false,
+  collectConsole,
+  collectCoverage,
+  coverageTempDirectoryUrl,
+  runtime,
+  runtimeParams,
+
+  plugins = [],
+  scenario = "dev",
+  sourcemaps = "inline",
+
+  port,
+  protocol,
+  http2,
+  certificate,
+  privateKey,
+
+  ignoreError = false,
+}) => {
+  const logger = createLogger({ logLevel })
+  rootDirectoryUrl = assertAndNormalizeDirectoryUrl(rootDirectoryUrl)
+  const executeOperation = Abort.startOperation()
+  executeOperation.addAbortSignal(signal)
+  if (handleSIGINT) {
+    executeOperation.addAbortSource((abort) => {
+      return raceProcessTeardownEvents(
+        {
+          SIGINT: true,
+        },
+        abort,
+      )
+    })
+  }
+
+  runtimeParams = {
+    rootDirectoryUrl,
+    fileRelativeUrl,
+    ...runtimeParams,
+  }
+  if (runtime.needsServer) {
+    const urlGraph = createUrlGraph()
+    const kitchen = createKitchen({
+      signal,
+      logger,
+      rootDirectoryUrl,
+      urlGraph,
+      plugins: [...plugins, ...getCorePlugins()],
+      scenario,
+      sourcemaps,
+    })
+    const serverLogger = createLogger({ logLevel: "warn" })
+    const server = await startOmegaServer({
+      signal: executeOperation.signal,
+      logger: serverLogger,
+      rootDirectoryUrl,
+      urlGraph,
+      kitchen,
+      scenario,
+      keepProcessAlive: false,
+      port,
+      protocol,
+      http2,
+      certificate,
+      privateKey,
+    })
+    executeOperation.addEndCallback(async () => {
+      await server.stop("execution done")
+    })
+    runtimeParams = {
+      ...runtimeParams,
+      server,
+    }
+  }
+
+  const result = await run({
+    signal: executeOperation.signal,
+    logger,
+    allocatedMs,
+    keepRunning,
+    mirrorConsole,
+    collectConsole,
+    collectCoverage,
+    coverageTempDirectoryUrl,
+    runtime,
+    runtimeParams,
+  })
+
+  try {
+    if (result.status === "errored") {
+      if (ignoreError) {
+        return result
+      }
+      /*
+  Warning: when node launched with --unhandled-rejections=strict, despites
+  this promise being rejected by throw result.error node will completely ignore it.
+
+  The error can be logged by doing
+  ```js
+  process.setUncaughtExceptionCaptureCallback((error) => {
+    console.error(error.stack)
+  })
+  ```
+  But it feels like a hack.
+  */
+      throw result.error
+    }
+    return result
+  } finally {
+    await executeOperation.end()
+  }
+}

package/src/execute/run.js

@@ -0,0 +1,208 @@
+import cuid from "cuid"
+import { Abort, raceCallbacks } from "@jsenv/abort"
+import { resolveUrl, writeFile } from "@jsenv/filesystem"
+import { createDetailedMessage } from "@jsenv/logger"
+
+export const run = async ({
+  signal = new AbortController().signal,
+  logger,
+  allocatedMs,
+  keepRunning = false,
+  mirrorConsole = false,
+  collectConsole = false,
+  collectCoverage = false,
+  coverageTempDirectoryUrl,
+  // measurePerformance,
+  // collectPerformance = false,
+
+  runtime,
+  runtimeParams,
+}) => {
+  const onErrorRef = { current: () => {} }
+  const onConsoleRef = { current: () => {} }
+  const onStopRef = { current: () => {} }
+  const stopSignal = { notify: () => {} }
+
+  let resultTransformer = (result) => result
+  const runtimeLabel = `${runtime.name}/${runtime.version}`
+
+  const runOperation = Abort.startOperation()
+  runOperation.addAbortSignal(signal)
+  if (typeof allocatedMs === "number" && allocatedMs !== Infinity) {
+    const timeoutAbortSource = runOperation.timeout(allocatedMs)
+    resultTransformer = composeTransformer(resultTransformer, (result) => {
+      if (
+        result.status === "errored" &&
+        Abort.isAbortError(result.error) &&
+        timeoutAbortSource.signal.aborted
+      ) {
+        return createTimedoutResult()
+      }
+      return result
+    })
+  }
+  resultTransformer = composeTransformer(resultTransformer, (result) => {
+    if (result.status === "errored" && Abort.isAbortError(result.error)) {
+      return createAbortedResult()
+    }
+    return result
+  })
+  const consoleCalls = []
+  onConsoleRef.current = ({ type, text }) => {
+    if (mirrorConsole) {
+      if (type === "error") {
+        process.stderr.write(text)
+      } else {
+        process.stdout.write(text)
+      }
+    }
+    if (collectConsole) {
+      consoleCalls.push({ type, text })
+    }
+  }
+  if (collectConsole) {
+    resultTransformer = composeTransformer(resultTransformer, (result) => {
+      result.consoleCalls = consoleCalls
+      return result
+    })
+  }
+  if (collectCoverage) {
+    resultTransformer = composeTransformer(
+      resultTransformer,
+      async (result) => {
+        // we do not keep coverage in memory, it can grow very big
+        // instead we store it on the filesystem
+        // and they can be read later at "coverageFileUrl"
+        const { coverage } = result
+        if (coverage) {
+          const coverageFileUrl = resolveUrl(
+            `./${runtime.name}/${cuid()}`,
+            coverageTempDirectoryUrl,
+          )
+          await writeFile(coverageFileUrl, JSON.stringify(coverage, null, "  "))
+          result.coverageFileUrl = coverageFileUrl
+          delete result.coverage
+        }
+        return result
+      },
+    )
+  } else {
+    resultTransformer = composeTransformer(resultTransformer, (result) => {
+      // as collectCoverage is disabled
+      // executionResult.coverage is undefined or {}
+      // we delete it just to have a cleaner object
+      delete result.coverage
+      return result
+    })
+  }
+
+  const startMs = Date.now()
+  resultTransformer = composeTransformer(resultTransformer, (result) => {
+    result.duration = Date.now() - startMs
+    return result
+  })
+
+  try {
+    logger.debug(`run() ${runtimeLabel}`)
+    runOperation.throwIfAborted()
+    const winnerPromise = new Promise((resolve, reject) => {
+      raceCallbacks(
+        {
+          aborted: (cb) => {
+            runOperation.signal.addEventListener("abort", cb)
+            return () => {
+              runOperation.signal.removeEventListener("abort", cb)
+            }
+          },
+          errored: (cb) => {
+            onErrorRef.current = (error) => {
+              logger.debug(
+                createDetailedMessage(`error during execution`, {
+                  ["error stack"]: error.stack,
+                  ["runtime"]: runtimeLabel,
+                }),
+              )
+              cb(error)
+            }
+          },
+          stopped: (cb) => {
+            onStopRef.current = cb
+          },
+          runned: async (cb) => {
+            try {
+              await runtime.run({
+                signal,
+                logger,
+                ...runtimeParams,
+                keepRunning,
+                stopSignal,
+                onStop: (stopInfo) => onStopRef.current(stopInfo),
+                onError: (error) => onErrorRef.current(error),
+                onConsole: (log) => onConsoleRef.current(log),
+                onResult: cb,
+              })
+            } catch (e) {
+              reject(e)
+            }
+          },
+        },
+        resolve,
+      )
+    })
+    const winner = await winnerPromise
+    if (winner.name === "aborted") {
+      runOperation.throwIfAborted()
+    }
+    if (winner.name === "errored") {
+      return await resultTransformer(
+        createErroredExecutionResult({
+          error: winner.data,
+        }),
+      )
+    }
+    if (winner.name === "stopped") {
+      return await resultTransformer(
+        createErroredExecutionResult({
+          error: new Error(`runtime stopped during execution`),
+        }),
+      )
+    }
+    onErrorRef.current = (error) => {
+      throw error
+    }
+    const result = winner.data
+    return await resultTransformer(result)
+  } catch (error) {
+    return await resultTransformer(
+      createErroredExecutionResult({
+        error,
+      }),
+    )
+  } finally {
+    await runOperation.end()
+  }
+}
+
+const composeTransformer = (previousTransformer, transformer) => {
+  return async (value) => {
+    const transformedValue = await previousTransformer(value)
+    return transformer(transformedValue)
+  }
+}
+
+const createAbortedResult = () => {
+  return {
+    status: "aborted",
+  }
+}
+const createTimedoutResult = () => {
+  return {
+    status: "timedout",
+  }
+}
+const createErroredExecutionResult = ({ error }) => {
+  return {
+    status: "errored",
+    error,
+  }
+}

package/src/execute/runtimes/browsers/chromium.js

@@ -0,0 +1,8 @@
+import { createRuntimeFromPlaywright } from "./from_playwright.js"
+
+export const chromium = createRuntimeFromPlaywright({
+  browserName: "chromium",
+  browserVersion: "97.0.4666.0",
+  coveragePlaywrightAPIAvailable: true,
+})
+export const chromiumIsolatedTab = chromium.isolatedTab