@jsenv/core 25.6.2 → 27.0.0-alpha.0

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

@@ -1,10 +1,9 @@
 @import "./execution/execution.css";
-@import "./compilation/compilation.css";
 @import "./focus/focus.css";
 @import "./eventsource/eventsource.css";
-@import "./responsive/overflow-menu.css";
+@import "./responsive/overflow_menu.css";
 @import "./settings/settings.css";
-@import "./theme/light-theme.css";
+@import "./theme/light_theme.css";
 @import "./tooltip/tooltip.css";
 
 html[data-animation-disabled] * {
@@ -80,29 +79,6 @@ html {
   cursor: pointer;
 }
 
-/* file name input & indicators */
-#file {
-  max-width: 40%;
-  padding: 0 1.2em;
-}
-
-#file-input {
-  width: 100%;
-  padding: 0px;
-  font-family: monospace;
-  font-size: 15px;
-  color: #cecece;
-  background: transparent;
-  border: transparent;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#file-input:focus {
-  border-bottom: 1px solid grey;
-}
-
 /* file and settings icons */
 #fileIconSvg,
 .settings-icon {

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

@@ -1,8 +1,5 @@
-import { urlIsInsideOf } from "@jsenv/filesystem/src/urlIsInsideOf.js"
-import { urlToRelativeUrl } from "@jsenv/filesystem/src/urlToRelativeUrl.js"
-
-import { startJavaScriptAnimation } from "../toolbar/util/animation.js"
-import "./focus/toolbar.focus.js"
+import { startJavaScriptAnimation } from "./util/animation.js"
+import "./focus/toolbar_focus.js"
 import { setLinkHrefForParentWindow } from "./util/iframe_to_parent_href.js"
 import {
   getToolbarIframe,
@@ -14,29 +11,17 @@ import { hideTooltip, hideAllTooltip } from "./tooltip/tooltip.js"
 import {
   renderToolbarSettings,
   hideSettings,
-} from "./settings/toolbar.settings.js"
-import { renderToolbarNotification } from "./notification/toolbar.notification.js"
-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"
+} from "./settings/toolbar_settings.js"
+import { renderToolbarNotification } from "./notification/toolbar_notification.js"
+import { renderToolbarTheme } from "./theme/toolbar_theme.js"
+import { renderToolbarAnimation } from "./animation/toolbar_animation.js"
+import { renderExecutionInToolbar } from "./execution/toolbar_execution.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/browser_utils/fetchUsingXHR.js → dev/plugins/toolbar/client/util/fetch_using_xhr.js}

@@ -1,5 +1,3 @@
-/* eslint-env browser */
-
 export const fetchUsingXHR = async (
   url,
   {

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/fetchUsingXHR.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()
+  }
+}