@jsenv/core 28.1.1 → 28.2.0

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

@@ -7,27 +7,17 @@ window.__supervisor__ = (() => {
     reportError: notImplemented,
     superviseScript: notImplemented,
     reloadSupervisedScript: notImplemented,
-    collectScriptResults: notImplemented,
-    getScriptExecutionResults: () => {
-      // wait for page to load before collecting script execution results
-      const htmlReadyPromise = new Promise((resolve) => {
-        if (document.readyState === "complete") {
-          resolve()
-          return
-        }
-        const loadCallback = () => {
-          window.removeEventListener("load", loadCallback)
-          resolve()
-        }
-        window.addEventListener("load", loadCallback)
-      })
-      return htmlReadyPromise.then(() => {
-        return supervisor.collectScriptResults()
-      })
-    },
+    getDocumentExecutionResult: notImplemented,
     executionResults,
   }
 
+  let navigationStartTime
+  try {
+    navigationStartTime = window.performance.timing.navigationStart
+  } catch (e) {
+    navigationStartTime = Date.now()
+  }
+
   supervisor.setupReportException = ({
     rootDirectoryUrl,
     errorNotification,
@@ -715,7 +705,6 @@ window.__supervisor__ = (() => {
   supervisor.setup = ({
     rootDirectoryUrl,
     logs,
-    measurePerf,
     errorOverlay,
     errorBaseUrl,
     openInEditor,
@@ -728,8 +717,35 @@ window.__supervisor__ = (() => {
     })
 
     const supervisedScripts = []
-    const executionPromises = []
-    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,
@@ -743,86 +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",
+        loadDuration: null,
+        executionDuration: null,
+        duration: null,
         exception: null,
         namespace: null,
         coverage: null,
       }
       executionResults[execution.src] = executionResult
-      let resolveExecutionPromise
-      const promise = new Promise((resolve) => {
-        resolveExecutionPromise = () => {
-          const index = executionPromises.indexOf(promise)
-          if (index > -1) {
-            executionPromises.splice(index, 1)
-          }
-          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()
         }
-      })
-      promise.execution = execution
-      executionPromises.push(promise)
+      }
+      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 })
-        if (measurePerf) {
-          performance.measure(`execution`, `execution_start`)
-        }
-        executionResult.status = "completed"
-        executionResult.namespace = result
-        executionResult.coverage = window.__coverage__
         if (logs) {
           console.log(`${execution.type} load ended`)
           console.groupEnd()
         }
-        resolveExecutionPromise()
-      } catch (e) {
-        if (measurePerf) {
-          performance.measure(`execution`, `execution_start`)
-        }
-        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()
         }
-        resolveExecutionPromise()
+        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 previousNonAsyncExecutions = executionPromises.filter(
-        (promise) => !promise.execution.async,
-      )
-      await Promise.all(previousNonAsyncExecutions)
-    }
     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,
@@ -872,7 +905,6 @@ window.__supervisor__ = (() => {
           }
         },
       })
-      return execution.start()
     }
     supervisor.reloadSupervisedScript = ({ type, src }) => {
       const supervisedScript = supervisedScripts.find(
@@ -890,43 +922,40 @@ window.__supervisor__ = (() => {
         supervisedScript.reload()
       }
     }
-    supervisor.collectScriptResults = async () => {
+    supervisor.getDocumentExecutionResult = async () => {
       // just to be super safe and ensure any <script type="module"> got a chance to execute
-      const scriptTypeModuleLoaded = new Promise((resolve) => {
-        const scriptTypeModule = document.createElement("script")
-        scriptTypeModule.type = "module"
-        scriptTypeModule.innerText =
-          "window.__supervisor__.scriptModuleCallback()"
-        window.__supervisor__.scriptModuleCallback = () => {
-          scriptTypeModule.parentNode.removeChild(scriptTypeModule)
+      const documentReadyPromise = new Promise((resolve) => {
+        if (document.readyState === "complete") {
+          resolve()
+          return
+        }
+        const loadCallback = () => {
+          window.removeEventListener("load", loadCallback)
           resolve()
         }
-        document.body.appendChild(scriptTypeModule)
+        window.addEventListener("load", loadCallback)
       })
-      await scriptTypeModuleLoaded
-
-      const waitPendingExecutions = async () => {
-        if (executionPromises.length) {
-          await Promise.all(executionPromises)
-          await waitPendingExecutions()
+      await documentReadyPromise
+      const waitScriptExecutions = async () => {
+        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)
+        await new Promise((resolve) => setTimeout(resolve))
+        if (pendingPromises.length > numberOfPromises) {
+          await waitScriptExecutions()
         }
       }
-      await waitPendingExecutions()
+      await waitScriptExecutions()
+
       return {
         status: "completed",
         executionResults,
-        startTime: getNavigationStartTime(),
+        startTime: navigationStartTime,
         endTime: Date.now(),
       }
     }
-
-    const getNavigationStartTime = () => {
-      try {
-        return window.performance.timing.navigationStart
-      } catch (e) {
-        return Date.now()
-      }
-    }
   }
 
   return supervisor

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/toolbar/client/execution/toolbar_execution.js

@@ -9,7 +9,7 @@ export const renderExecutionInToolbar = async () => {
   removeForceHideElement(document.querySelector("#execution-indicator"))
 
   const { status, startTime, endTime } =
-    await window.parent.__supervisor__.getScriptExecutionResults()
+    await window.parent.__supervisor__.getDocumentExecutionResult()
   const execution = { status, startTime, endTime }
   applyExecutionIndicator(execution)
   const executionStorageKey = window.location.href

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,
+  }
+}