@jsenv/core 28.1.2 → 28.2.1

package/src/plugins/supervisor/client/supervisor.js

@@ -705,7 +705,6 @@ window.__supervisor__ = (() => {
   supervisor.setup = ({
     rootDirectoryUrl,
     logs,
-    measurePerf,
     errorOverlay,
     errorBaseUrl,
     openInEditor,
@@ -718,8 +717,35 @@ window.__supervisor__ = (() => {
     })
 
     const supervisedScripts = []
-    const scriptExecutionPromises = []
-    supervisor.createExecution = ({ type, src, async, execute }) => {
+    const pendingPromises = []
+    // respect execution order
+    // - wait for classic scripts to be done (non async)
+    // - wait module script previous execution (non async)
+    // see https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6#typemodule-vs-non-module-typetextjavascript-vs-script-nomodule
+    const executionQueue = []
+    let executing = false
+    const addToExecutionQueue = async (execution) => {
+      if (execution.async) {
+        execution.start()
+        return
+      }
+      if (executing) {
+        executionQueue.push(execution)
+        return
+      }
+      startThenDequeue(execution)
+    }
+    const startThenDequeue = async (execution) => {
+      executing = true
+      const promise = execution.start()
+      await promise
+      executing = false
+      if (executionQueue.length) {
+        const nextExecution = executionQueue.shift()
+        startThenDequeue(nextExecution)
+      }
+    }
+    supervisor.addExecution = ({ type, src, async, execute }) => {
       const execution = {
         type,
         src,
@@ -733,82 +759,103 @@ window.__supervisor__ = (() => {
         return superviseExecution(execution, { isReload: true })
       }
       supervisedScripts.push(execution)
-      return execution
+      return addToExecutionQueue(execution)
     }
     const superviseExecution = async (execution, { isReload }) => {
       if (logs) {
         console.group(`[jsenv] loading ${execution.type} ${execution.src}`)
       }
-      if (measurePerf) {
-        performance.mark(`execution_start`)
-      }
       const executionResult = {
         status: "pending",
-        startTime: Date.now(),
-        endTime: null,
+        loadDuration: null,
+        executionDuration: null,
+        duration: null,
         exception: null,
         namespace: null,
         coverage: null,
       }
       executionResults[execution.src] = executionResult
-      let resolveScriptExecutionPromise
-      const scriptExecutionPromise = new Promise((resolve) => {
-        resolveScriptExecutionPromise = () => {
-          executionResult.endTime = Date.now()
-          if (measurePerf) {
-            performance.measure(`execution`, `execution_start`)
-          }
-          resolve()
+
+      const monitorScriptLoad = () => {
+        const loadStartTime = Date.now()
+        let resolveScriptLoadPromise
+        const scriptLoadPromise = new Promise((resolve) => {
+          resolveScriptLoadPromise = resolve
+        })
+        pendingPromises.push(scriptLoadPromise)
+        return () => {
+          const loadEndTime = Date.now()
+          executionResult.loadDuration = loadEndTime - loadStartTime
+          resolveScriptLoadPromise()
         }
-      })
-      scriptExecutionPromise.execution = execution
-      scriptExecutionPromises.push(scriptExecutionPromise)
+      }
+      const monitorScriptExecution = () => {
+        const executionStartTime = Date.now()
+        let resolveExecutionPromise
+        const executionPromise = new Promise((resolve) => {
+          resolveExecutionPromise = resolve
+        })
+        pendingPromises.push(executionPromise)
+        return () => {
+          executionResult.coverage = window.__coverage__
+          executionResult.executionDuration = Date.now() - executionStartTime
+          executionResult.duration =
+            executionResult.loadDuration + executionResult.executionDuration
+          resolveExecutionPromise()
+        }
+      }
+
+      const onError = (e) => {
+        executionResult.status = "errored"
+        const exception = supervisor.createException({ reason: e })
+        if (exception.needsReport) {
+          supervisor.reportException(exception)
+        }
+        executionResult.exception = exception
+      }
+
+      const scriptLoadDone = monitorScriptLoad()
       try {
         const result = await execution.execute({ isReload })
-        executionResult.status = "completed"
-        executionResult.namespace = result
-        executionResult.coverage = window.__coverage__
         if (logs) {
           console.log(`${execution.type} load ended`)
           console.groupEnd()
         }
-        resolveScriptExecutionPromise()
-      } catch (e) {
-        executionResult.status = "errored"
-        const exception = supervisor.createException({
-          reason: e,
-        })
-        if (exception.needsReport) {
-          supervisor.reportException(exception)
+        executionResult.status = "loaded"
+        scriptLoadDone()
+
+        const scriptExecutionDone = monitorScriptExecution()
+        if (execution.type === "js_classic") {
+          executionResult.status = "completed"
+          scriptExecutionDone()
+        } else if (execution.type === "js_module") {
+          result.executionPromise.then(
+            (namespace) => {
+              executionResult.status = "completed"
+              executionResult.namespace = namespace
+              scriptExecutionDone()
+            },
+            (e) => {
+              onError(e)
+              scriptExecutionDone()
+            },
+          )
         }
-        executionResult.exception = exception
-        executionResult.coverage = window.__coverage__
+      } catch (e) {
         if (logs) {
           console.groupEnd()
         }
-        resolveScriptExecutionPromise()
+        onError(e)
+        scriptLoadDone()
       }
     }
 
-    // respect execution order
-    // - wait for classic scripts to be done (non async)
-    // - wait module script previous execution (non async)
-    // see  https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6#typemodule-vs-non-module-typetextjavascript-vs-script-nomodule
-    supervisor.getPreviousExecutionDonePromise = async () => {
-      const previousNonAsyncScriptExecutions = scriptExecutionPromises.filter(
-        (promise) => !promise.execution.async,
-      )
-      await Promise.all(previousNonAsyncScriptExecutions)
-    }
     supervisor.superviseScript = async ({ src, async }) => {
       const { currentScript } = document
       const parentNode = currentScript.parentNode
-      if (!async) {
-        await supervisor.getPreviousExecutionDonePromise()
-      }
       let nodeToReplace
       let currentScriptClone
-      const execution = supervisor.createExecution({
+      return supervisor.addExecution({
         src,
         type: "js_classic",
         async,
@@ -858,7 +905,6 @@ window.__supervisor__ = (() => {
           }
         },
       })
-      return execution.start()
     }
     supervisor.reloadSupervisedScript = ({ type, src }) => {
       const supervisedScript = supervisedScripts.find(
@@ -891,12 +937,13 @@ window.__supervisor__ = (() => {
       })
       await documentReadyPromise
       const waitScriptExecutions = async () => {
-        const numberOfScripts = scriptExecutionPromises.length
-        await Promise.all(scriptExecutionPromises)
+        const numberOfPromises = pendingPromises.length
+        await Promise.all(pendingPromises)
         // new scripts added while the other where executing
         // (should happen only on webkit where
         // script might be added after window load event)
-        if (scriptExecutionPromises.length > numberOfScripts) {
+        await new Promise((resolve) => setTimeout(resolve))
+        if (pendingPromises.length > numberOfPromises) {
           await waitScriptExecutions()
         }
       }

package/src/plugins/supervisor/jsenv_plugin_supervisor.js

@@ -70,10 +70,8 @@ export const jsenvPluginSupervisor = ({
   openInEditor = true,
   errorBaseUrl,
 }) => {
-  const supervisorFileUrl = new URL(
-    "./client/supervisor.js?js_classic",
-    import.meta.url,
-  ).href
+  const supervisorFileUrl = new URL("./client/supervisor.js", import.meta.url)
+    .href
   const scriptTypeModuleSupervisorFileUrl = new URL(
     "./client/script_type_module_supervisor.js",
     import.meta.url,

package/src/plugins/transpilation/as_js_classic/async-to-promises.js

@@ -12,6 +12,7 @@ const defaultConfigValues = {
     minify: false,
     target: "es5",
     topLevelAwait: "disabled",
+    asyncAwait: true,
 };
 function readConfigKey(config, key) {
     if (Object.hasOwnProperty.call(config, key)) {
@@ -3649,6 +3650,9 @@ function default_1({ types, traverse, transformFromAst, version, }) {
                 },
             },
             FunctionDeclaration(path) {
+                if (!readConfigKey(this.opts, 'asyncAwait')) {
+                    return
+                }
                 const node = path.node;
                 if (node.async) {
                     const expression = types.functionExpression(undefined, node.params, node.body, node.generator, node.async);
@@ -3680,6 +3684,9 @@ function default_1({ types, traverse, transformFromAst, version, }) {
                 }
             },
             ArrowFunctionExpression(path) {
+                if (!readConfigKey(this.opts, 'asyncAwait')) {
+                    return
+                }
                 const node = path.node;
                 if (node.async) {
                     rewriteThisExpressions(path, path.getFunctionParent() || path.scope.getProgramParent().path);
@@ -3691,6 +3698,9 @@ function default_1({ types, traverse, transformFromAst, version, }) {
                 }
             },
             FunctionExpression(path) {
+                if (!readConfigKey(this.opts, 'asyncAwait')) {
+                    return
+                }
                 if (path.node.async) {
                     const id = path.node.id;
                     if (path.parentPath.isExportDefaultDeclaration() && id !== null && id !== undefined) {
@@ -3773,6 +3783,9 @@ function default_1({ types, traverse, transformFromAst, version, }) {
                 }
             },
             ClassMethod(path) {
+                if (!readConfigKey(this.opts, 'asyncAwait')) {
+                    return
+                }
                 if (path.node.async) {
                     const body = path.get("body");
                     if (path.node.kind === "method") {
@@ -3832,6 +3845,9 @@ function default_1({ types, traverse, transformFromAst, version, }) {
                 }
             },
             ObjectMethod(path) {
+                if (!readConfigKey(this.opts, 'asyncAwait')) {
+                    return
+                }
                 if (path.node.async) {
                     if (path.node.kind === "method") {
                         path.replaceWith(types.objectProperty(path.node.key, types.functionExpression(undefined, path.node.params, path.node.body, path.node.generator, path.node.async), path.node.computed, false, path.node.decorators));

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

@@ -0,0 +1,85 @@
+import { readFileSync } from "@jsenv/filesystem"
+import { createMagicSource, composeTwoSourcemaps } from "@jsenv/sourcemap"
+import { applyBabelPlugins } from "@jsenv/ast"
+
+import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
+import { requireBabelPlugin } from "../babel/require_babel_plugin.js"
+import { babelPluginTransformImportMetaUrl } from "./helpers/babel_plugin_transform_import_meta_url.js"
+
+// import { jsenvPluginAsJsClassicLibrary } from "./jsenv_plugin_as_js_classic_library.js"
+// because of https://github.com/rpetrich/babel-plugin-transform-async-to-promises/issues/84
+import customAsyncToPromises from "./async-to-promises.js"
+
+export const convertJsModuleToJsClassic = async ({
+  systemJsInjection,
+  systemJsClientFileUrl,
+  urlInfo,
+  jsModuleUrlInfo,
+}) => {
+  const jsClassicFormat =
+    // in general html file are entry points, but js can be entry point when:
+    // - passed in entryPoints to build
+    // - is used by web worker
+    // - the reference contains ?entry_point
+    // When js is entry point there can be no HTML to inject systemjs
+    // and systemjs must be injected into the js file
+    urlInfo.isEntryPoint &&
+    // if it's an entry point without dependency (it does not use import)
+    // then we can use UMD, otherwise we have to use systemjs
+    // because it is imported by systemjs
+    !jsModuleUrlInfo.data.usesImport
+      ? "umd"
+      : "system"
+  urlInfo.data.jsClassicFormat = jsClassicFormat
+  const { code, map } = await applyBabelPlugins({
+    babelPlugins: [
+      ...(jsClassicFormat === "system"
+        ? [
+            // proposal-dynamic-import required with systemjs for babel8:
+            // https://github.com/babel/babel/issues/10746
+            requireFromJsenv("@babel/plugin-proposal-dynamic-import"),
+            requireFromJsenv("@babel/plugin-transform-modules-systemjs"),
+            [
+              customAsyncToPromises,
+              {
+                asyncAwait: false, // already handled + we might not needs it at all
+                topLevelAwait: "return",
+              },
+            ],
+          ]
+        : [
+            [
+              requireBabelPlugin("babel-plugin-transform-async-to-promises"),
+              {
+                asyncAwait: false, // already handled + we might not needs it at all
+                topLevelAwait: "simple",
+              },
+            ],
+            babelPluginTransformImportMetaUrl,
+            requireFromJsenv("@babel/plugin-transform-modules-umd"),
+          ]),
+    ],
+    urlInfo: jsModuleUrlInfo,
+  })
+  let sourcemap = jsModuleUrlInfo.sourcemap
+  sourcemap = await composeTwoSourcemaps(sourcemap, map)
+  if (
+    systemJsInjection &&
+    jsClassicFormat === "system" &&
+    urlInfo.isEntryPoint
+  ) {
+    const magicSource = createMagicSource(code)
+    const systemjsCode = readFileSync(systemJsClientFileUrl, { as: "string" })
+    magicSource.prepend(`${systemjsCode}\n\n`)
+    const magicResult = magicSource.toContentAndSourcemap()
+    sourcemap = await composeTwoSourcemaps(sourcemap, magicResult.sourcemap)
+    return {
+      content: magicResult.content,
+      sourcemap,
+    }
+  }
+  return {
+    content: code,
+    sourcemap,
+  }
+}

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

@@ -11,206 +11,64 @@
  * and prefer to unique identifier based solely on the specifier basename for instance
  */
 
-import { urlToFilename, injectQueryParams } from "@jsenv/urls"
-import { readFileSync } from "@jsenv/filesystem"
-import { createMagicSource, composeTwoSourcemaps } from "@jsenv/sourcemap"
-import { applyBabelPlugins } from "@jsenv/ast"
-
-import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
-import { requireBabelPlugin } from "../babel/require_babel_plugin.js"
-import { babelPluginTransformImportMetaUrl } from "./helpers/babel_plugin_transform_import_meta_url.js"
+import { urlToFilename } from "@jsenv/urls"
+import { jsenvPluginAsJsClassicConversion } from "./jsenv_plugin_as_js_classic_conversion.js"
 import { jsenvPluginAsJsClassicHtml } from "./jsenv_plugin_as_js_classic_html.js"
 import { jsenvPluginAsJsClassicWorkers } from "./jsenv_plugin_as_js_classic_workers.js"
-// because of https://github.com/rpetrich/babel-plugin-transform-async-to-promises/issues/84
-import customAsyncToPromises from "./async-to-promises.js"
-
-export const jsenvPluginAsJsClassic = ({ systemJsInjection = true }) => {
-  const systemJsClientFileUrl = new URL(
-    "./client/s.js?js_classic",
-    import.meta.url,
-  ).href
-
-  return [
-    jsenvPluginAsJsClassicConversion({
-      systemJsInjection,
-      systemJsClientFileUrl,
-    }),
-    jsenvPluginAsJsClassicHtml({
-      systemJsInjection,
-      systemJsClientFileUrl,
-      generateJsClassicFilename,
-    }),
-    jsenvPluginAsJsClassicWorkers({
-      generateJsClassicFilename,
-    }),
-  ]
-}
+import { jsenvPluginAsJsClassicLibrary } from "./jsenv_plugin_as_js_classic_library.js"
 
-// propagate ?as_js_classic to referenced urls
-// and perform the conversion during fetchUrlContent
-const jsenvPluginAsJsClassicConversion = ({
+export const jsenvPluginAsJsClassic = ({
+  jsClassicLibrary,
+  jsClassicFallback,
   systemJsInjection,
-  systemJsClientFileUrl,
 }) => {
-  const propagateJsClassicSearchParam = (reference, context) => {
-    const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+  const systemJsClientFileUrl = new URL("./client/s.js", import.meta.url).href
+
+  const generateJsClassicFilename = (url) => {
+    const filename = urlToFilename(url)
+    let [basename, extension] = splitFileExtension(filename)
+    const { searchParams } = new URL(url)
     if (
-      !parentUrlInfo ||
-      !new URL(parentUrlInfo.url).searchParams.has("as_js_classic")
+      searchParams.has("as_json_module") ||
+      searchParams.has("as_css_module") ||
+      searchParams.has("as_text_module")
     ) {
-      return null
+      extension = ".js"
     }
-    const urlTransformed = injectQueryParams(reference.url, {
-      as_js_classic: "",
-    })
-    reference.filename = generateJsClassicFilename(reference.url)
-    return urlTransformed
-  }
-
-  return {
-    name: "jsenv:as_js_classic_conversion",
-    appliesDuring: "*",
-    redirectUrl: {
-      // We want to propagate transformation of js module to js classic to:
-      // - import specifier (static/dynamic import + re-export)
-      // - url specifier when inside System.register/_context.import()
-      //   (because it's the transpiled equivalent of static and dynamic imports)
-      // And not other references otherwise we could try to transform inline resources
-      // or specifiers inside new URL()...
-      js_import_export: propagateJsClassicSearchParam,
-      js_url_specifier: (reference, context) => {
-        if (
-          reference.subtype === "system_register_arg" ||
-          reference.subtype === "system_import_arg"
-        ) {
-          return propagateJsClassicSearchParam(reference, context)
-        }
-        return null
-      },
-    },
-    fetchUrlContent: async (urlInfo, context) => {
-      const originalUrlInfo = await context.fetchOriginalUrlInfo({
-        urlInfo,
-        context,
-        searchParam: "as_js_classic",
-        // override the expectedType to "js_module"
-        // because when there is ?as_js_classic it means the underlying resource
-        // is a js_module
-        expectedType: "js_module",
-      })
-      if (!originalUrlInfo) {
-        return null
-      }
-      const jsClassicFormat =
-        // in general html file are entry points, but js can be entry point when:
-        // - passed in entryPoints to build
-        // - is used by web worker
-        // - the reference contains ?entry_point
-        // When js is entry point there can be no HTML to inject systemjs
-        // and systemjs must be injected into the js file
-        urlInfo.isEntryPoint &&
-        // if it's an entry point without dependency (it does not use import)
-        // then we can use UMD, otherwise we have to use systemjs
-        // because it is imported by systemjs
-        !originalUrlInfo.data.usesImport
-          ? "umd"
-          : "system"
-      const { content, sourcemap } = await convertJsModuleToJsClassic({
-        systemJsInjection,
-        systemJsClientFileUrl,
-        urlInfo,
-        originalUrlInfo,
-        jsClassicFormat,
-      })
-      urlInfo.data.jsClassicFormat = jsClassicFormat
-      return {
-        content,
-        contentType: "text/javascript",
-        type: "js_classic",
-        originalUrl: originalUrlInfo.originalUrl,
-        originalContent: originalUrlInfo.originalContent,
-        sourcemap,
-      }
-    },
-  }
-}
-
-const generateJsClassicFilename = (url) => {
-  const filename = urlToFilename(url)
-  let [basename, extension] = splitFileExtension(filename)
-  const { searchParams } = new URL(url)
-  if (
-    searchParams.has("as_json_module") ||
-    searchParams.has("as_css_module") ||
-    searchParams.has("as_text_module")
-  ) {
-    extension = ".js"
-  }
-  return `${basename}.nomodule${extension}`
-}
-
-const splitFileExtension = (filename) => {
-  const dotLastIndex = filename.lastIndexOf(".")
-  if (dotLastIndex === -1) {
-    return [filename, ""]
+    return `${basename}.nomodule${extension}`
   }
-  return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)]
-}
 
-const convertJsModuleToJsClassic = async ({
-  systemJsInjection,
-  systemJsClientFileUrl,
-  urlInfo,
-  originalUrlInfo,
-  jsClassicFormat,
-}) => {
-  const { code, map } = await applyBabelPlugins({
-    babelPlugins: [
-      ...(jsClassicFormat === "system"
-        ? [
-            // propposal-dynamic-import required with systemjs for babel8:
-            // https://github.com/babel/babel/issues/10746
-            requireFromJsenv("@babel/plugin-proposal-dynamic-import"),
-            requireFromJsenv("@babel/plugin-transform-modules-systemjs"),
-            [
-              customAsyncToPromises,
-              {
-                topLevelAwait: "return",
-              },
-            ],
-          ]
-        : [
-            [
-              requireBabelPlugin("babel-plugin-transform-async-to-promises"),
-              {
-                topLevelAwait: "simple",
-              },
-            ],
-            babelPluginTransformImportMetaUrl,
-            requireFromJsenv("@babel/plugin-transform-modules-umd"),
-          ]),
-    ],
-    urlInfo: originalUrlInfo,
-  })
-  let sourcemap = originalUrlInfo.sourcemap
-  sourcemap = await composeTwoSourcemaps(sourcemap, map)
-  if (
-    systemJsInjection &&
-    jsClassicFormat === "system" &&
-    urlInfo.isEntryPoint
-  ) {
-    const magicSource = createMagicSource(code)
-    const systemjsCode = readFileSync(systemJsClientFileUrl, { as: "string" })
-    magicSource.prepend(`${systemjsCode}\n\n`)
-    const magicResult = magicSource.toContentAndSourcemap()
-    sourcemap = await composeTwoSourcemaps(sourcemap, magicResult.sourcemap)
-    return {
-      content: magicResult.content,
-      sourcemap,
+  const splitFileExtension = (filename) => {
+    const dotLastIndex = filename.lastIndexOf(".")
+    if (dotLastIndex === -1) {
+      return [filename, ""]
     }
+    return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)]
   }
-  return {
-    content: code,
-    sourcemap,
-  }
+
+  return [
+    ...(jsClassicLibrary
+      ? [
+          jsenvPluginAsJsClassicLibrary({
+            systemJsInjection,
+            systemJsClientFileUrl,
+            generateJsClassicFilename,
+          }),
+        ]
+      : []),
+    ...(jsClassicFallback
+      ? [
+          jsenvPluginAsJsClassicHtml({
+            systemJsInjection,
+            systemJsClientFileUrl,
+          }),
+          jsenvPluginAsJsClassicWorkers(),
+          jsenvPluginAsJsClassicConversion({
+            systemJsInjection,
+            systemJsClientFileUrl,
+            generateJsClassicFilename,
+          }),
+        ]
+      : []),
+  ]
 }