@jsenv/core 33.0.2 → 34.0.1

package/src/plugins/supervisor/jsenv_plugin_supervisor.js

@@ -1,68 +1,19 @@
 /*
- * Jsenv needs to wait for all js execution inside an HTML page before killing the browser.
- * A naive approach would consider execution done when "load" event is dispatched on window but:
- *
- * scenario                                    | covered by window "load"
- * ------------------------------------------- | -------------------------
- * js referenced by <script src>               | yes
- * js inlined into <script>                    | yes
- * js referenced by <script type="module" src> | partially (not for import and top level await)
- * js inlined into <script type="module">      | not at all
- *
  * This plugin provides a way for jsenv to know when js execution is done
- * As a side effect this plugin enables ability to hot reload js inlined into <script hot-accept>
- *
- * <script src="file.js">
- * becomes
- * <script>
- *   window.__supervisor__.superviseScript({ src: 'file.js' })
- * </script>
- *
- * <script>
- *    console.log(42)
- * </script>
- * becomes
- * <script>
- *   window.__supervisor__.superviseScript({ src: 'main.html@L10-L13.js' })
- * </script>
- *
- * <script type="module" src="module.js"></script>
- * becomes
- * <script type="module">
- *   import { superviseScriptTypeModule } from 'supervisor'
- *   superviseScriptTypeModule({ src: "module.js" })
- * </script>
- *
- * <script type="module">
- *   console.log(42)
- * </script>
- * becomes
- * <script type="module">
- *   import { superviseScriptTypeModule } from 'supervisor'
- *   superviseScriptTypeModule({ src: 'main.html@L10-L13.js' })
- * </script>
  */
 
 import { fileURLToPath } from "node:url"
-import {
-  parseHtmlString,
-  stringifyHtmlAst,
-  visitHtmlNodes,
-  getHtmlNodeAttribute,
-  setHtmlNodeAttributes,
-  analyzeScriptNode,
-  injectScriptNodeAsEarlyAsPossible,
-  createHtmlNode,
-  getHtmlNodePosition,
-  getHtmlNodeText,
-  removeHtmlNodeText,
-  setHtmlNodeText,
-} from "@jsenv/ast"
-import { generateInlineContentUrl, stringifyUrlSite } from "@jsenv/urls"
 import { getOriginalPosition } from "@jsenv/sourcemap"
+import { stringifyUrlSite } from "@jsenv/urls"
 
+import { injectSupervisorIntoHTML } from "./html_supervisor_injection.js"
 import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
 
+export const supervisorFileUrl = new URL(
+  "./client/supervisor.js",
+  import.meta.url,
+).href
+
 export const jsenvPluginSupervisor = ({
   logs = false,
   measurePerf = false,
@@ -70,13 +21,6 @@ export const jsenvPluginSupervisor = ({
   openInEditor = true,
   errorBaseUrl,
 }) => {
-  const supervisorFileUrl = new URL("./client/supervisor.js", import.meta.url)
-    .href
-  const scriptTypeModuleSupervisorFileUrl = new URL(
-    "./client/script_type_module_supervisor.js",
-    import.meta.url,
-  ).href
-
   return {
     name: "jsenv:supervisor",
     appliesDuring: "dev",
@@ -216,184 +160,55 @@ export const jsenvPluginSupervisor = ({
     },
     transformUrlContent: {
       html: ({ url, content }, context) => {
-        const htmlAst = parseHtmlString(content)
-        const scriptsToSupervise = []
-
-        const handleInlineScript = (node, htmlNodeText) => {
-          const { type, extension } = analyzeScriptNode(node)
-          const { line, column, lineEnd, columnEnd, isOriginal } =
-            getHtmlNodePosition(node, { preferOriginal: true })
-          let inlineScriptUrl = generateInlineContentUrl({
-            url,
-            extension: extension || ".js",
-            line,
-            column,
-            lineEnd,
-            columnEnd,
-          })
-          const [inlineScriptReference] = context.referenceUtils.foundInline({
-            type: "script",
-            subtype: "inline",
-            expectedType: type,
-            isOriginalPosition: isOriginal,
-            specifierLine: line - 1,
-            specifierColumn: column,
-            specifier: inlineScriptUrl,
-            contentType: "text/javascript",
-            content: htmlNodeText,
-          })
-          removeHtmlNodeText(node)
-          if (extension) {
-            setHtmlNodeAttributes(node, {
-              type: type === "js_module" ? "module" : undefined,
-            })
-          }
-          scriptsToSupervise.push({
-            node,
-            isInline: true,
-            type,
-            src: inlineScriptReference.generatedSpecifier,
-          })
-        }
-        const handleScriptWithSrc = (node, src) => {
-          const { type } = analyzeScriptNode(node)
-          const integrity = getHtmlNodeAttribute(node, "integrity")
-          const crossorigin =
-            getHtmlNodeAttribute(node, "crossorigin") !== undefined
-          const defer = getHtmlNodeAttribute(node, "defer") !== undefined
-          const async = getHtmlNodeAttribute(node, "async") !== undefined
-          scriptsToSupervise.push({
-            node,
-            type,
-            src,
-            defer,
-            async,
-            integrity,
-            crossorigin,
-          })
-        }
-        visitHtmlNodes(htmlAst, {
-          script: (node) => {
-            const { type } = analyzeScriptNode(node)
-            if (type !== "js_classic" && type !== "js_module") {
-              return
-            }
-            if (
-              getHtmlNodeAttribute(node, "jsenv-cooked-by") ||
-              getHtmlNodeAttribute(node, "jsenv-inlined-by") ||
-              getHtmlNodeAttribute(node, "jsenv-injected-by")
-            ) {
-              return
-            }
-            const noSupervisor = getHtmlNodeAttribute(node, "no-supervisor")
-            if (noSupervisor !== undefined) {
-              return
-            }
-            const htmlNodeText = getHtmlNodeText(node)
-            if (htmlNodeText) {
-              handleInlineScript(node, htmlNodeText)
-              return
-            }
-            const src = getHtmlNodeAttribute(node, "src")
-            if (src) {
-              handleScriptWithSrc(node, src)
-              return
-            }
-          },
-        })
-        const [scriptTypeModuleSupervisorFileReference] =
-          context.referenceUtils.inject({
-            type: "js_import",
-            expectedType: "js_module",
-            specifier: scriptTypeModuleSupervisorFileUrl,
-          })
         const [supervisorFileReference] = context.referenceUtils.inject({
           type: "script",
           expectedType: "js_classic",
           specifier: supervisorFileUrl,
         })
-        injectScriptNodeAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            tagName: "script",
-            textContent: `
-      window.__supervisor__.setup(${JSON.stringify(
-        {
-          rootDirectoryUrl: context.rootDirectoryUrl,
-          errorBaseUrl,
-          logs,
-          measurePerf,
-          errorOverlay,
-          openInEditor,
-        },
-        null,
-        "        ",
-      )})
-    `,
-          }),
-          "jsenv:supervisor",
-        )
-        injectScriptNodeAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            tagName: "script",
-            src: supervisorFileReference.generatedSpecifier,
-          }),
-          "jsenv:supervisor",
-        )
 
-        scriptsToSupervise.forEach(
-          ({
-            node,
-            isInline,
-            type,
-            src,
-            defer,
-            async,
-            integrity,
-            crossorigin,
-          }) => {
-            const paramsAsJson = JSON.stringify({
-              src,
-              isInline,
-              defer,
-              async,
-              integrity,
-              crossorigin,
-            })
-            if (type === "js_module") {
-              setHtmlNodeText(
-                node,
-                `
-      import { superviseScriptTypeModule } from ${scriptTypeModuleSupervisorFileReference.generatedSpecifier}
-      superviseScriptTypeModule(${paramsAsJson})
-        `,
-              )
-            } else {
-              setHtmlNodeText(
-                node,
-                `
-      window.__supervisor__.superviseScript(${paramsAsJson})
-        `,
-              )
-            }
-            if (src) {
-              setHtmlNodeAttributes(node, {
-                "jsenv-inlined-by": "jsenv:supervisor",
-                "src": undefined,
-                "inlined-from-src": src,
-              })
-            } else {
-              setHtmlNodeAttributes(node, {
-                "jsenv-cooked-by": "jsenv:supervisor",
-              })
-            }
+        return injectSupervisorIntoHTML(
+          {
+            content,
+            url,
+          },
+          {
+            supervisorScriptSrc: supervisorFileReference.generatedSpecifier,
+            supervisorOptions: {
+              errorBaseUrl,
+              logs,
+              measurePerf,
+              errorOverlay,
+              openInEditor,
+            },
+            webServer: {
+              rootDirectoryUrl: context.rootDirectoryUrl,
+              isJsenvDevServer: true,
+            },
+            inlineAsRemote: true,
+            generateInlineScriptSrc: ({
+              type,
+              textContent,
+              inlineScriptUrl,
+              isOriginal,
+              line,
+              column,
+            }) => {
+              const [inlineScriptReference] =
+                context.referenceUtils.foundInline({
+                  type: "script",
+                  subtype: "inline",
+                  expectedType: type,
+                  isOriginalPosition: isOriginal,
+                  specifierLine: line - 1,
+                  specifierColumn: column,
+                  specifier: inlineScriptUrl,
+                  contentType: "text/javascript",
+                  content: textContent,
+                })
+              return inlineScriptReference.generatedSpecifier
+            },
           },
         )
-        const htmlModified = stringifyHtmlAst(htmlAst)
-        return {
-          content: htmlModified,
-        }
       },
     },
   }

package/src/plugins/transpilation/as_js_classic/convert_js_module_to_js_classic.js

@@ -1,4 +1,3 @@
-import { fileURLToPath } from "node:url"
 import { urlToRelativeUrl } from "@jsenv/urls"
 import { readFileSync } from "@jsenv/filesystem"
 import {
@@ -17,24 +16,7 @@ import { babelPluginTransformImportMetaResolve } from "./helpers/babel_plugin_tr
 // because of https://github.com/rpetrich/babel-plugin-transform-async-to-promises/issues/84
 import customAsyncToPromises from "./async-to-promises.js"
 
-/*
- * When systemjs format is used by babel, it will generated UID based on
- * the import specifier:
- * https://github.com/babel/babel/blob/97d1967826077f15e766778c0d64711399e9a72a/packages/babel-plugin-transform-modules-systemjs/src/index.ts#L498
- * But at this stage import specifier are absolute file urls
- * So without minification these specifier are long and dependent
- * on where the files are on the filesystem.
- * This can be mitigated by minification that will rename them.
- * But to fix this issue once and for all I have copy-pasted
- * "@babel/plugin-transform-modules-systemjs" to introduce
- * "generateIdentifierHint" options and prevent that from hapenning
- */
-const TRANSFORM_MODULES_SYSTEMJS_PATH = fileURLToPath(
-  new URL("./babel_plugin_transform_modules_systemjs.cjs", import.meta.url),
-)
-
 export const convertJsModuleToJsClassic = async ({
-  rootDirectoryUrl,
   systemJsInjection,
   systemJsClientFileUrl,
   urlInfo,
@@ -60,18 +42,8 @@ export const convertJsModuleToJsClassic = async ({
             // proposal-dynamic-import required with systemjs for babel8:
             // https://github.com/babel/babel/issues/10746
             requireFromJsenv("@babel/plugin-proposal-dynamic-import"),
-            [
-              // eslint-disable-next-line import/no-dynamic-require
-              requireFromJsenv(TRANSFORM_MODULES_SYSTEMJS_PATH),
-              {
-                generateIdentifierHint: (key) => {
-                  if (key.startsWith("file://")) {
-                    return urlToRelativeUrl(key, rootDirectoryUrl)
-                  }
-                  return key
-                },
-              },
-            ],
+            requireFromJsenv("@babel/plugin-transform-modules-systemjs"),
+            [babelPluginRelativeImports, { rootUrl: jsModuleUrlInfo.url }],
             [
               customAsyncToPromises,
               {
@@ -91,6 +63,7 @@ export const convertJsModuleToJsClassic = async ({
             babelPluginTransformImportMetaUrl,
             babelPluginTransformImportMetaResolve,
             requireFromJsenv("@babel/plugin-transform-modules-umd"),
+            [babelPluginRelativeImports, { rootUrl: jsModuleUrlInfo.url }],
           ]),
     ],
     urlInfo: jsModuleUrlInfo,
@@ -132,3 +105,67 @@ export const convertJsModuleToJsClassic = async ({
     sourcemap,
   }
 }
+
+/*
+ * When systemjs or umd format is used by babel, it will generated UID based on
+ * the import specifier:
+ * https://github.com/babel/babel/blob/97d1967826077f15e766778c0d64711399e9a72a/packages/babel-plugin-transform-modules-systemjs/src/index.ts#L498
+ * But at this stage import specifier are absolute file urls
+ * This can be mitigated by minification that will rename them.
+ * But to fix this issue once and for all there is babelPluginRelativeImports below
+ */
+const babelPluginRelativeImports = (babel) => {
+  const t = babel.types
+
+  const replaceSpecifierAtPath = (path, state) => {
+    const specifier = path.node.value
+    if (specifier.startsWith("file://")) {
+      const specifierRelative = urlToRelativeUrl(specifier, state.opts.rootUrl)
+      path.replaceWith(t.stringLiteral(specifierRelative))
+    }
+  }
+
+  return {
+    name: "relative-imports",
+    visitor: {
+      CallExpression: (path, state) => {
+        if (path.node.callee.type !== "Import") {
+          // Some other function call, not import();
+          return
+        }
+        if (path.node.arguments[0].type !== "StringLiteral") {
+          // Non-string argument, probably a variable or expression, e.g.
+          // import(moduleId)
+          // import('./' + moduleName)
+          return
+        }
+        const sourcePath = path.get("arguments")[0]
+        if (sourcePath.node.type === "StringLiteral") {
+          replaceSpecifierAtPath(sourcePath, state)
+        }
+      },
+      ImportDeclaration: (path, state) => {
+        const sourcePath = path.get("source")
+        replaceSpecifierAtPath(sourcePath, state)
+      },
+      ExportAllDeclaration: (path, state) => {
+        const sourcePath = path.get("source")
+        replaceSpecifierAtPath(sourcePath, state)
+      },
+      ExportNamedDeclaration: (path, state) => {
+        if (!path.node.source) {
+          // This export has no "source", so it's probably
+          // a local variable or function, e.g.
+          // export { varName }
+          // export const constName = ...
+          // export function funcName() {}
+          return
+        }
+        const sourcePath = path.get("source")
+        if (sourcePath.node.type === "StringLiteral") {
+          replaceSpecifierAtPath(sourcePath, state)
+        }
+      },
+    },
+  }
+}

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic_html.js

@@ -157,7 +157,7 @@ export const jsenvPluginAsJsClassicHtml = ({
                   break
                 }
               } catch (e) {
-                if (context.dev) {
+                if (context.dev && e.code !== "PARSE_ERROR") {
                   needsSystemJs = true
                   // ignore cooking error, the browser will trigger it again on fetch
                   // + disable cache for this html file because when browser will reload

package/src/plugins/transpilation/babel/jsenv_plugin_babel.js

@@ -97,6 +97,11 @@ export const jsenvPluginBabel = ({
     const { code, map } = await applyBabelPlugins({
       babelPlugins,
       urlInfo,
+      options: {
+        generatorOpts: {
+          retainLines: context.dev,
+        },
+      },
     })
     return {
       content: code,

package/src/plugins/transpilation/jsenv_plugin_top_level_await.js

@@ -74,7 +74,7 @@ const babelPluginMetadataUsesTopLevelAwait = () => {
         programPath.traverse({
           AwaitExpression: (path) => {
             const closestFunction = path.getFunctionParent()
-            if (!closestFunction) {
+            if (!closestFunction || closestFunction.type === "Program") {
               usesTopLevelAwait = true
               path.stop()
             }

package/src/test/execute_steps.js

@@ -1,7 +1,6 @@
 import { existsSync } from "node:fs"
 import { memoryUsage } from "node:process"
 import { takeCoverage } from "node:v8"
-import wrapAnsi from "wrap-ansi"
 import stripAnsi from "strip-ansi"
 
 import { urlToFileSystemPath } from "@jsenv/urls"
@@ -31,8 +30,7 @@ export const executeSteps = async (
     completedExecutionLogMerging,
     completedExecutionLogAbbreviation,
     rootDirectoryUrl,
-    devServerOrigin,
-    sourceDirectoryUrl,
+    webServer,
 
     keepRunning,
     defaultMsAllocatedPerExecution,
@@ -119,8 +117,7 @@ export const executeSteps = async (
 
     let runtimeParams = {
       rootDirectoryUrl,
-      devServerOrigin,
-      sourceDirectoryUrl,
+      webServer,
 
       coverageEnabled,
       coverageConfig,
@@ -279,7 +276,7 @@ export const executeSteps = async (
           global.gc()
         }
         if (executionLogsEnabled) {
-          let log = createExecutionLog(afterExecutionInfo, {
+          const log = createExecutionLog(afterExecutionInfo, {
             completedExecutionLogAbbreviation,
             counters,
             logRuntime,
@@ -293,16 +290,6 @@ export const executeSteps = async (
               ? { memoryHeap: memoryUsage().heapUsed }
               : {}),
           })
-          log = `${log}
-  
-`
-          const { columns = 80 } = process.stdout
-          log = wrapAnsi(log, columns, {
-            trim: false,
-            hard: true,
-            wordWrap: false,
-          })
-
           // replace spinner with this execution result
           if (spinner) spinner.stop()
           executionLog.write(log)
@@ -319,11 +306,16 @@ export const executeSteps = async (
             executionLog = createLog({ newLine: "" })
           }
         }
-        if (
+        const isLastExecutionLog = executionIndex === executionSteps.length - 1
+        const cancelRemaining =
           failFast &&
           executionResult.status !== "completed" &&
           counters.done < counters.total
-        ) {
+        if (isLastExecutionLog) {
+          executionLog.write("\n")
+        }
+
+        if (cancelRemaining) {
           logger.info(`"failFast" enabled -> cancel remaining executions`)
           failFastAbortController.abort()
         }

package/src/test/execute_test_plan.js

@@ -8,8 +8,7 @@ import {
 } from "@jsenv/filesystem"
 import { createLogger, createDetailedMessage } from "@jsenv/log"
 
-import { pingServer } from "../ping_server.js"
-import { basicFetch } from "../basic_fetch.js"
+import { assertAndNormalizeWebServer } from "../execute/web_server_param.js"
 import { generateCoverageJsonFile } from "./coverage/coverage_reporter_json_file.js"
 import { generateCoverageHtmlDirectory } from "./coverage/coverage_reporter_html_directory.js"
 import { generateCoverageTextLog } from "./coverage/coverage_reporter_text_log.js"
@@ -20,7 +19,7 @@ import { executeSteps } from "./execute_steps.js"
  * Execute a list of files and log how it goes.
  * @param {Object} testPlanParameters
  * @param {string|url} testPlanParameters.rootDirectoryUrl Directory containing test files;
- * @param {string|url} [testPlanParameters.devServerOrigin=undefined] Jsenv dev server origin; required when executing test on browsers
+ * @param {Object} [testPlanParameters.webServer] Web server info; required when executing test on browsers
  * @param {Object} testPlanParameters.testPlan Object associating files with runtimes where they will be executed
  * @param {boolean} [testPlanParameters.completedExecutionLogAbbreviation=false] Abbreviate completed execution information to shorten terminal output
  * @param {boolean} [testPlanParameters.completedExecutionLogMerging=false] Merge completed execution logs to shorten terminal output
@@ -46,10 +45,9 @@ export const executeTestPlan = async ({
   logFileRelativeUrl = ".jsenv/test_plan_debug.txt",
   completedExecutionLogAbbreviation = false,
   completedExecutionLogMerging = false,
-  rootDirectoryUrl,
-  devServerModuleUrl,
-  devServerOrigin,
 
+  rootDirectoryUrl,
+  webServer,
   testPlan,
   updateProcessExitCode = true,
   maxExecutionsInParallel = 1,
@@ -96,8 +94,6 @@ export const executeTestPlan = async ({
 }) => {
   let someNeedsServer = false
   let someNodeRuntime = false
-  let stopDevServerNeeded = false
-  let sourceDirectoryUrl
   const runtimes = {}
   // param validation
   {
@@ -137,44 +133,7 @@ export const executeTestPlan = async ({
     })
 
     if (someNeedsServer) {
-      if (!devServerOrigin) {
-        throw new TypeError(
-          `devServerOrigin is required when running tests on browser(s)`,
-        )
-      }
-      let devServerStarted = await pingServer(devServerOrigin)
-      if (!devServerStarted) {
-        if (!devServerModuleUrl) {
-          throw new TypeError(
-            `devServerModuleUrl is required when dev server is not started in order to run tests on browser(s)`,
-          )
-        }
-        try {
-          process.env.IMPORTED_BY_TEST_PLAN = "1"
-          await import(devServerModuleUrl)
-          delete process.env.IMPORTED_BY_TEST_PLAN
-        } catch (e) {
-          if (e.code === "ERR_MODULE_NOT_FOUND") {
-            throw new Error(
-              `Cannot find file responsible to start dev server at "${devServerModuleUrl}"`,
-            )
-          }
-          throw e
-        }
-        devServerStarted = await pingServer(devServerOrigin)
-        if (!devServerStarted) {
-          throw new Error(
-            `dev server not started after importing "${devServerModuleUrl}", ensure this module file is starting a server at "${devServerOrigin}"`,
-          )
-        }
-        stopDevServerNeeded = true
-      }
-
-      const devServerParams = await basicFetch(
-        `${devServerOrigin}/__server_params__.json`,
-        { rejectUnauthorized: false },
-      )
-      sourceDirectoryUrl = devServerParams.sourceDirectoryUrl
+      await assertAndNormalizeWebServer(webServer)
     }
 
     if (coverageEnabled) {
@@ -290,7 +249,12 @@ export const executeTestPlan = async ({
     }
   }
 
-  testPlan = { ...testPlan, "**/.jsenv/": null }
+  testPlan = {
+    "file:///**/node_modules/": null,
+    "**/*./": null,
+    ...testPlan,
+    "**/.jsenv/": null,
+  }
   logger.debug(`Generate executions`)
   const executionSteps = await executionStepsFromTestPlan({
     signal,
@@ -313,8 +277,7 @@ export const executeTestPlan = async ({
     completedExecutionLogMerging,
     completedExecutionLogAbbreviation,
     rootDirectoryUrl,
-    devServerOrigin,
-    sourceDirectoryUrl,
+    webServer,
 
     maxExecutionsInParallel,
     defaultMsAllocatedPerExecution,
@@ -331,17 +294,6 @@ export const executeTestPlan = async ({
     coverageV8ConflictWarning,
     coverageTempDirectoryUrl,
   })
-  if (stopDevServerNeeded) {
-    // we are expecting ECONNRESET because server will be stopped by the request
-    basicFetch(`${devServerOrigin}/__stop__`, {
-      rejectUnauthorized: false,
-    }).catch((e) => {
-      if (e.code === "ECONNRESET") {
-        return
-      }
-      throw e
-    })
-  }
   if (
     updateProcessExitCode &&
     result.planSummary.counters.total !== result.planSummary.counters.completed