@jsenv/core 29.7.0 → 29.8.0

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

@@ -13,16 +13,13 @@ export const jsenvPluginAsJsClassicConversion = ({
 }) => {
   const isReferencingJsModule = (reference) => {
     if (
-      reference.type === "js_import_export" ||
+      reference.type === "js_import" ||
       reference.subtype === "system_register_arg" ||
       reference.subtype === "system_import_arg"
     ) {
       return true
     }
-    if (
-      reference.type === "js_url_specifier" &&
-      reference.expectedType === "js_module"
-    ) {
+    if (reference.type === "js_url" && reference.expectedType === "js_module") {
       return true
     }
     return false
@@ -90,17 +87,14 @@ export const jsenvPluginAsJsClassicConversion = ({
       await context.fetchUrlContent(jsModuleUrlInfo, {
         reference: jsModuleReference,
       })
-      if (context.scenarios.dev) {
+      if (context.dev) {
         context.referenceUtils.found({
-          type: "js_import_export",
+          type: "js_import",
           subtype: jsModuleReference.subtype,
           specifier: jsModuleReference.url,
           expectedType: "js_module",
         })
-      } else if (
-        context.scenarios.build &&
-        jsModuleUrlInfo.dependents.size === 0
-      ) {
+      } else if (context.build && jsModuleUrlInfo.dependents.size === 0) {
         context.urlGraph.deleteUrlInfo(jsModuleUrlInfo.url)
       }
       const { content, sourcemap } = await convertJsModuleToJsClassic({

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

@@ -68,7 +68,7 @@ export const jsenvPluginAsJsClassicHtml = ({
         }
         return null
       },
-      js_url_specifier: (reference) => {
+      js_url: (reference) => {
         if (
           shouldTransformScriptTypeModule &&
           reference.expectedType === "js_module"
@@ -166,7 +166,7 @@ export const jsenvPluginAsJsClassicHtml = ({
                   break
                 }
               } catch (e) {
-                if (context.scenarios.dev) {
+                if (context.dev) {
                   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/as_js_classic/jsenv_plugin_as_js_classic_library.js

@@ -57,15 +57,15 @@ export const jsenvPluginAsJsClassicLibrary = ({
         },
       })
       const jsModuleBundledUrlInfo = bundleUrlInfos[jsModuleUrlInfo.url]
-      if (context.scenarios.dev) {
+      if (context.dev) {
         jsModuleBundledUrlInfo.sourceUrls.forEach((sourceUrl) => {
           context.referenceUtils.inject({
-            type: "js_url_specifier",
+            type: "js_url",
             specifier: sourceUrl,
             isImplicit: true,
           })
         })
-      } else if (context.scenarios.build) {
+      } else if (context.build) {
         jsModuleBundledUrlInfo.sourceUrls.forEach((sourceUrl) => {
           const sourceUrlInfo = context.urlGraph.getUrlInfo(sourceUrl)
           if (sourceUrlInfo && sourceUrlInfo.dependents.size === 0) {

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

@@ -29,7 +29,7 @@ export const jsenvPluginAsJsClassicWorkers = () => {
     name: "jsenv:as_js_classic_workers",
     appliesDuring: "*",
     redirectUrl: {
-      js_url_specifier: (reference, context) => {
+      js_url: (reference, context) => {
         if (reference.expectedType !== "js_module") {
           return null
         }

package/src/plugins/transpilation/as_js_module/convert_js_classic_to_js_module.js

@@ -0,0 +1,45 @@
+import { applyBabelPlugins } from "@jsenv/ast"
+import { composeTwoSourcemaps } from "@jsenv/sourcemap"
+
+import { isWebWorkerUrlInfo } from "@jsenv/core/src/kitchen/web_workers.js"
+
+export const convertJsClassicToJsModule = async ({
+  urlInfo,
+  jsClassicUrlInfo,
+}) => {
+  const { code, map } = await applyBabelPlugins({
+    babelPlugins: [
+      [
+        babelPluginReplaceTopLevelThis,
+        {
+          isWebWorker: isWebWorkerUrlInfo(urlInfo),
+        },
+      ],
+    ],
+    urlInfo: jsClassicUrlInfo,
+  })
+  const sourcemap = await composeTwoSourcemaps(jsClassicUrlInfo.sourcemap, map)
+  return {
+    content: code,
+    sourcemap,
+  }
+}
+
+const babelPluginReplaceTopLevelThis = () => {
+  return {
+    name: "replace-top-level-this",
+    visitor: {
+      Program: (programPath, state) => {
+        const { isWebWorker } = state.opts
+        programPath.traverse({
+          ThisExpression: (path) => {
+            const closestFunction = path.getFunctionParent()
+            if (!closestFunction) {
+              path.replaceWithSourceString(isWebWorker ? "self" : "window")
+            }
+          },
+        })
+      },
+    },
+  }
+}

package/src/plugins/transpilation/as_js_module/jsenv_plugin_as_js_module.js

@@ -0,0 +1,78 @@
+/*
+ * Js modules might not be able to import js meant to be loaded by <script>
+ * Among other things this happens for a top level this:
+ * - With <script> this is window
+ * - With an import this is undefined
+ * Example of this: https://github.com/video-dev/hls.js/issues/2911
+ *
+ * This plugin fix this issue by rewriting top level this into window
+ * and can be used like this for instance import("hls?as_js_module")
+ */
+
+import { urlToFilename } from "@jsenv/urls"
+
+import { convertJsClassicToJsModule } from "./convert_js_classic_to_js_module.js"
+
+export const jsenvPluginAsJsModule = () => {
+  return {
+    name: "jsenv:as_js_module",
+    appliesDuring: "*",
+    redirectUrl: (reference) => {
+      if (reference.searchParams.has("as_js_module")) {
+        reference.expectedType = "js_module"
+        const filename = urlToFilename(reference.url)
+        const [basename] = splitFileExtension(filename)
+        reference.filename = `${basename}.mjs`
+      }
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const [jsClassicReference, jsClassicUrlInfo] =
+        context.getWithoutSearchParam({
+          urlInfo,
+          context,
+          searchParam: "as_js_module",
+          // override the expectedType to "js_classic"
+          // because when there is ?as_js_module it means the underlying resource
+          // is js_classic
+          expectedType: "js_classic",
+        })
+      if (!jsClassicReference) {
+        return null
+      }
+      await context.fetchUrlContent(jsClassicUrlInfo, {
+        reference: jsClassicReference,
+      })
+      if (context.dev) {
+        context.referenceUtils.found({
+          type: "js_import",
+          subtype: jsClassicReference.subtype,
+          specifier: jsClassicReference.url,
+          expectedType: "js_classic",
+        })
+      } else if (context.build && jsClassicUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(jsClassicUrlInfo.url)
+      }
+      const { content, sourcemap } = await convertJsClassicToJsModule({
+        urlInfo,
+        jsClassicUrlInfo,
+      })
+      return {
+        content,
+        contentType: "text/javascript",
+        type: "js_module",
+        originalUrl: jsClassicUrlInfo.originalUrl,
+        originalContent: jsClassicUrlInfo.originalContent,
+        sourcemap,
+        data: jsClassicUrlInfo.data,
+      }
+    },
+  }
+}
+
+const splitFileExtension = (filename) => {
+  const dotLastIndex = filename.lastIndexOf(".")
+  if (dotLastIndex === -1) {
+    return [filename, ""]
+  }
+  return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)]
+}

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

@@ -20,7 +20,7 @@ export const jsenvPluginBabel = ({
       RUNTIME_COMPAT.isSupported(context.clientRuntimeCompat, feature)
     const getImportSpecifier = (clientFileUrl) => {
       const [reference] = context.referenceUtils.inject({
-        type: "js_import_export",
+        type: "js_import",
         expectedType: "js_module",
         specifier: clientFileUrl,
       })
@@ -33,7 +33,7 @@ export const jsenvPluginBabel = ({
       isJsModule,
       getImportSpecifier,
     })
-    if (context.scenarios.dev) {
+    if (context.dev) {
       const requestHeaders = context.request.headers
       if (requestHeaders["x-coverage-instanbul"]) {
         const coverageConfig = JSON.parse(

package/src/plugins/transpilation/import_assertions/jsenv_plugin_import_assertions.js

@@ -57,14 +57,14 @@ export const jsenvPluginImportAssertions = ({
       //     We would have to tell rollup to ignore import with assertion
       //   - means rollup can bundle more js file together
       //   - means url versioning can work for css inlined in js
-      if (context.scenarios.build) {
+      if (context.build) {
         transpilations.json = true
         transpilations.css = true
         transpilations.text = true
       }
     },
     redirectUrl: {
-      js_import_export: (reference, context) => {
+      js_import: (reference, context) => {
         if (!reference.assert) {
           return null
         }
@@ -110,14 +110,14 @@ const jsenvPluginAsModules = () => {
       await context.fetchUrlContent(jsonUrlInfo, {
         reference: jsonReference,
       })
-      if (context.scenarios.dev) {
+      if (context.dev) {
         context.referenceUtils.found({
-          type: "js_import_export",
+          type: "js_import",
           subtype: jsonReference.subtype,
           specifier: jsonReference.url,
           expectedType: "js_module",
         })
-      } else if (context.scenarios.build && jsonUrlInfo.dependents.size === 0) {
+      } else if (context.build && jsonUrlInfo.dependents.size === 0) {
         context.urlGraph.deleteUrlInfo(jsonUrlInfo.url)
       }
       const jsonText = JSON.stringify(jsonUrlInfo.content.trim())
@@ -151,14 +151,14 @@ const jsenvPluginAsModules = () => {
       await context.fetchUrlContent(cssUrlInfo, {
         reference: cssReference,
       })
-      if (context.scenarios.dev) {
+      if (context.dev) {
         context.referenceUtils.found({
-          type: "js_import_export",
+          type: "js_import",
           subtype: cssReference.subtype,
           specifier: cssReference.url,
           expectedType: "js_module",
         })
-      } else if (context.scenarios.build && cssUrlInfo.dependents.size === 0) {
+      } else if (context.build && cssUrlInfo.dependents.size === 0) {
         context.urlGraph.deleteUrlInfo(cssUrlInfo.url)
       }
       const cssText = JS_QUOTES.escapeSpecialChars(cssUrlInfo.content, {
@@ -201,14 +201,14 @@ const jsenvPluginAsModules = () => {
       await context.fetchUrlContent(textUrlInfo, {
         reference: textReference,
       })
-      if (context.scenarios.dev) {
+      if (context.dev) {
         context.referenceUtils.found({
-          type: "js_import_export",
+          type: "js_import",
           subtype: textReference.subtype,
           specifier: textReference.url,
           expectedType: "js_module",
         })
-      } else if (context.scenarios.build && textUrlInfo.dependents.size === 0) {
+      } else if (context.build && textUrlInfo.dependents.size === 0) {
         context.urlGraph.deleteUrlInfo(textUrlInfo.url)
       }
       const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.content, {

package/src/plugins/transpilation/jsenv_plugin_import_meta_resolve.js

@@ -0,0 +1,52 @@
+import { createMagicSource } from "@jsenv/sourcemap"
+
+export const jsenvPluginImportMetaResolve = () => {
+  return {
+    name: "jsenv:import_meta_resolve",
+    appliesDuring: "*",
+    init: (context) => {
+      if (context.isSupportedOnCurrentClients("import_meta_resolve")) {
+        return false
+      }
+      const willTransformJsModules =
+        !context.isSupportedOnCurrentClients("script_type_module") ||
+        !context.isSupportedOnCurrentClients("import_dynamic") ||
+        !context.isSupportedOnCurrentClients("import_meta")
+      // keep it untouched, systemjs will handle it
+      if (willTransformJsModules) {
+        return false
+      }
+      return true
+    },
+    transformUrlContent: {
+      js_module: async (urlInfo, context) => {
+        const magicSource = createMagicSource(urlInfo.content)
+        context.referenceUtils._references.forEach((ref) => {
+          if (ref.subtype === "import_meta_resolve") {
+            const originalSpecifierLength = Buffer.byteLength(ref.specifier)
+            const specifierLength = Buffer.byteLength(
+              ref.generatedSpecifier.slice(1, -1), // remove `"` around
+            )
+            const specifierLengthDiff =
+              specifierLength - originalSpecifierLength
+            const end = ref.node.end + specifierLengthDiff
+            magicSource.replace({
+              start: ref.node.start,
+              end,
+              replacement: `new URL(${ref.generatedSpecifier}, import.meta.url).href`,
+            })
+            const currentLengthBeforeSpecifier = "import.meta.resolve(".length
+            const newLengthBeforeSpecifier = "new URL(".length
+            const lengthDiff =
+              currentLengthBeforeSpecifier - newLengthBeforeSpecifier
+            ref.specifierColumn -= lengthDiff
+            ref.specifierStart -= lengthDiff
+            ref.specifierEnd =
+              ref.specifierStart + Buffer.byteLength(ref.generatedSpecifier)
+          }
+        })
+        return magicSource.toContentAndSourcemap()
+      },
+    },
+  }
+}

package/src/plugins/transpilation/jsenv_plugin_top_level_await.js

@@ -6,19 +6,22 @@ export const jsenvPluginTopLevelAwait = () => {
   return {
     name: "jsenv:top_level_await",
     appliesDuring: "*",
+    init: (context) => {
+      if (context.isSupportedOnCurrentClients("top_level_await")) {
+        return false
+      }
+      // keep it untouched, systemjs will handle it
+      const willTransformJsModules =
+        !context.isSupportedOnCurrentClients("script_type_module") ||
+        !context.isSupportedOnCurrentClients("import_dynamic") ||
+        !context.isSupportedOnCurrentClients("import_meta")
+      if (willTransformJsModules) {
+        return false
+      }
+      return true
+    },
     transformUrlContent: {
-      js_module: async (urlInfo, context) => {
-        if (context.isSupportedOnCurrentClients("top_level_await")) {
-          return null
-        }
-        const willTransformJsModules =
-          !context.isSupportedOnCurrentClients("script_type_module") ||
-          !context.isSupportedOnCurrentClients("import_dynamic") ||
-          !context.isSupportedOnCurrentClients("import_meta")
-        // keep it untouched, systemjs will handle it
-        if (willTransformJsModules) {
-          return null
-        }
+      js_module: async (urlInfo) => {
         const usesTLA = await usesTopLevelAwait(urlInfo)
         if (!usesTLA) {
           return null
@@ -36,7 +39,7 @@ export const jsenvPluginTopLevelAwait = () => {
                 // externalHelpers: true,
                 // externalHelpersPath: JSON.parse(
                 //   context.referenceUtils.inject({
-                //     type: "js_import_export",
+                //     type: "js_import",
                 //     expectedType: "js_module",
                 //     specifier:
                 //       "babel-plugin-transform-async-to-promises/helpers.mjs",

package/src/plugins/transpilation/jsenv_plugin_transpilation.js

@@ -10,8 +10,10 @@
 import { jsenvPluginCssParcel } from "./css_parcel/jsenv_plugin_css_parcel.js"
 import { jsenvPluginImportAssertions } from "./import_assertions/jsenv_plugin_import_assertions.js"
 import { jsenvPluginAsJsClassic } from "./as_js_classic/jsenv_plugin_as_js_classic.js"
+import { jsenvPluginAsJsModule } from "./as_js_module/jsenv_plugin_as_js_module.js"
 import { jsenvPluginBabel } from "./babel/jsenv_plugin_babel.js"
 import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js"
+import { jsenvPluginImportMetaResolve } from "./jsenv_plugin_import_meta_resolve.js"
 
 export const jsenvPluginTranspilation = ({
   importAssertions = true,
@@ -23,6 +25,7 @@ export const jsenvPluginTranspilation = ({
   jsClassicFallback = true,
   systemJsInjection = true,
   topLevelAwait = true,
+  importMetaResolve = true,
   babelHelpersAsImport = true,
   getCustomBabelPlugins,
 }) => {
@@ -30,6 +33,7 @@ export const jsenvPluginTranspilation = ({
     importAssertions = {}
   }
   return [
+    ...(importMetaResolve ? [jsenvPluginImportMetaResolve()] : []),
     ...(importAssertions
       ? [jsenvPluginImportAssertions(importAssertions)]
       : []),
@@ -44,6 +48,7 @@ export const jsenvPluginTranspilation = ({
       jsClassicFallback,
       systemJsInjection,
     }),
+    jsenvPluginAsJsModule(),
     // topLevelAwait must come after jsenvPluginAsJsClassic because it's related to the module format
     // so we want to wait to know the module format before transforming things related to top level await
     ...(topLevelAwait ? [jsenvPluginTopLevelAwait(topLevelAwait)] : []),

package/src/plugins/url_analysis/html/html_urls.js

@@ -14,7 +14,7 @@ export const parseAndTransformHtmlUrls = async (urlInfo, context) => {
   const url = urlInfo.originalUrl
   const content = urlInfo.content
   const htmlAst = parseHtmlString(content, {
-    storeOriginalPositions: context.scenarios.dev,
+    storeOriginalPositions: context.dev,
   })
   const mentions = visitHtmlUrls({
     url,

package/src/plugins/url_analysis/js/js_urls.js

@@ -20,6 +20,7 @@ export const parseAndTransformJsUrls = async (urlInfo, context) => {
       urlInfo.data.usesImport = true
     }
     const [reference] = context.referenceUtils.found({
+      node: jsMention.node,
       type: jsMention.type,
       subtype: jsMention.subtype,
       expectedType: jsMention.expectedType,

package/src/plugins/url_analysis/jsenv_plugin_reference_expected_types.js

@@ -16,11 +16,13 @@ export const jsenvPluginReferenceExpectedTypes = () => {
       searchParams.has("as_js_classic_library")
     ) {
       reference.expectedType = "js_classic"
+    } else if (searchParams.has("as_js_module")) {
+      reference.expectedType = "js_module"
     } else if (searchParams.has("js_module")) {
       searchParams.delete("js_module")
       reference.expectedType = "js_module"
     } else if (
-      reference.type === "js_url_specifier" &&
+      reference.type === "js_url" &&
       reference.expectedType === undefined &&
       CONTENT_TYPE.fromUrlExtension(reference.url) === "text/javascript"
     ) {
@@ -49,7 +51,7 @@ export const jsenvPluginReferenceExpectedTypes = () => {
     appliesDuring: "*",
     redirectUrl: {
       script_src: redirectJsUrls,
-      js_url_specifier: redirectJsUrls,
+      js_url: redirectJsUrls,
     },
   }
 }

package/src/plugins/url_analysis/jsenv_plugin_url_analysis.js

@@ -39,7 +39,7 @@ export const jsenvPluginUrlAnalysis = ({
           // so that urls must be kept intact
           // However for js import specifiers they have a different meaning and we want
           // to resolve them (https://nodejs.org/api/packages.html#imports for instance)
-          reference.type !== "js_import_export"
+          reference.type !== "js_import"
         ) {
           reference.shouldHandle = false
           return

package/src/plugins/url_resolution/jsenv_plugin_url_resolution.js

@@ -7,7 +7,6 @@
  * and the rest uses the web standard url resolution (new URL):
  * - "http_request"
  * - "entry_point"
- * - "js_import_export"
  * - "link_href"
  * - "script_src"
  * - "a_href"
@@ -20,9 +19,10 @@
  * - "use_href"
  * - "css_@import"
  * - "css_url"
- * - "sourcemap_comment"
- * - "js_url_specifier"
+ * - "js_import"
+ * - "js_url"
  * - "js_inline_content"
+ * - "sourcemap_comment"
  * - "webmanifest_icon_src"
  * - "package_json"
  */

package/src/plugins/url_resolution/node_esm_resolver.js

@@ -38,7 +38,7 @@ export const createNodeEsmResolver = ({ runtimeCompat, packageConditions }) => {
       parentUrl,
       specifier: reference.specifier,
     })
-    if (context.scenarios.dev) {
+    if (context.dev) {
       const dependsOnPackageJson =
         type !== "relative_specifier" &&
         type !== "absolute_specifier" &&
@@ -57,7 +57,7 @@ export const createNodeEsmResolver = ({ runtimeCompat, packageConditions }) => {
         })
       }
     }
-    if (context.scenarios.dev) {
+    if (context.dev) {
       // without this check a file inside a project without package.json
       // could be considered as a node module if there is a ancestor package.json
       // but we want to version only node modules