@jsenv/core 28.1.3 → 28.2.2

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

@@ -1,10 +1,20 @@
+/*
+ * when {type: "module"} cannot be used on web workers:
+ * - new Worker("worker.js", { type: "module" })
+ *   transformed into
+ *   new Worker("worker.js?as_js_classic", { type: " lassic" })
+ * - navigator.serviceWorker.register("service_worker.js", { type: "module" })
+ *   transformed into
+ *   navigator.serviceWorker.register("service_worker.js?as_js_classic", { type: "classic" })
+ * - new SharedWorker("shared_worker.js", { type: "module" })
+ *   transformed into
+ *   new SharedWorker("shared_worker.js?as_js_classic", { type: "classic" })
+ */
+
 import { injectQueryParams } from "@jsenv/urls"
 
-export const jsenvPluginAsJsClassicWorkers = ({
-  generateJsClassicFilename,
-}) => {
-  const updateReference = (reference) => {
-    reference.filename = generateJsClassicFilename(reference.url)
+export const jsenvPluginAsJsClassicWorkers = () => {
+  const turnIntoJsClassicProxy = (reference) => {
     reference.mutation = (magicSource) => {
       magicSource.replace({
         start: reference.typePropertyNode.value.start,
@@ -12,10 +22,7 @@ export const jsenvPluginAsJsClassicWorkers = ({
         replacement: JSON.stringify("classic"),
       })
     }
-    reference.expectedType = "js_classic"
-    return injectQueryParams(reference.url, {
-      as_js_classic: "",
-    })
+    return injectQueryParams(reference.url, { as_js_classic: "" })
   }
 
   return {
@@ -30,7 +37,7 @@ export const jsenvPluginAsJsClassicWorkers = ({
           if (context.isSupportedOnCurrentClients("worker_type_module")) {
             return null
           }
-          return updateReference(reference)
+          return turnIntoJsClassicProxy(reference)
         }
         if (reference.expectedSubtype === "service_worker") {
           if (
@@ -38,7 +45,7 @@ export const jsenvPluginAsJsClassicWorkers = ({
           ) {
             return null
           }
-          return updateReference(reference)
+          return turnIntoJsClassicProxy(reference)
         }
         if (reference.expectedSubtype === "shared_worker") {
           if (
@@ -46,7 +53,7 @@ export const jsenvPluginAsJsClassicWorkers = ({
           ) {
             return null
           }
-          return updateReference(reference)
+          return turnIntoJsClassicProxy(reference)
         }
         return null
       },

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

@@ -15,31 +15,9 @@ export const jsenvPluginBabel = ({
 } = {}) => {
   const transformWithBabel = async (urlInfo, context) => {
     const isJsModule = urlInfo.type === "js_module"
-    const isWorker = urlInfo.subtype === "worker"
-    const isServiceWorker = urlInfo.subtype === "service_worker"
-    const isSharedWorker = urlInfo.subtype === "shared_worker"
-    const isWorkerContext = isWorker || isServiceWorker || isSharedWorker
-
-    let { clientRuntimeCompat } = context
-    if (isWorker) {
-      clientRuntimeCompat = RUNTIME_COMPAT.add(clientRuntimeCompat, "worker")
-    } else if (isServiceWorker) {
-      // when code is executed by a service worker we can assume
-      // the execution context supports more than the default one
-      // for instance arrow function are supported
-      clientRuntimeCompat = RUNTIME_COMPAT.add(
-        clientRuntimeCompat,
-        "service_worker",
-      )
-    } else if (isSharedWorker) {
-      clientRuntimeCompat = RUNTIME_COMPAT.add(
-        clientRuntimeCompat,
-        "shared_worker",
-      )
-    }
 
     const isSupported = (feature) =>
-      RUNTIME_COMPAT.isSupported(clientRuntimeCompat, feature)
+      RUNTIME_COMPAT.isSupported(context.clientRuntimeCompat, feature)
     const getImportSpecifier = (clientFileUrl) => {
       const [reference] = context.referenceUtils.inject({
         type: "js_import_export",
@@ -52,7 +30,6 @@ export const jsenvPluginBabel = ({
     const babelPluginStructure = getBaseBabelPluginStructure({
       url: urlInfo.url,
       isSupported,
-      isWorkerContext,
       isJsModule,
       getImportSpecifier,
     })

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

@@ -19,9 +19,22 @@ export const jsenvPluginImportAssertions = ({
   css = "auto",
   text = "auto",
 }) => {
-  const updateReference = (reference, searchParam) => {
+  const transpilations = { json, css, text }
+  const shouldTranspileImportAssertion = (context, type) => {
+    const transpilation = transpilations[type]
+    if (transpilation === true) {
+      return true
+    }
+    if (transpilation === "auto") {
+      return !context.isSupportedOnCurrentClients(`import_type_${type}`)
+    }
+    return false
+  }
+  const markAsJsModuleProxy = (reference) => {
     reference.expectedType = "js_module"
     reference.filename = `${urlToFilename(reference.url)}.js`
+  }
+  const turnIntoJsModuleProxy = (reference, type) => {
     reference.mutation = (magicSource) => {
       magicSource.remove({
         start: reference.assertNode.start,
@@ -29,8 +42,9 @@ export const jsenvPluginImportAssertions = ({
       })
     }
     const newUrl = injectQueryParams(reference.url, {
-      [searchParam]: "",
+      [`as_${type}_module`]: "",
     })
+    markAsJsModuleProxy(reference)
     return newUrl
   }
 
@@ -44,9 +58,9 @@ export const jsenvPluginImportAssertions = ({
       //   - means rollup can bundle more js file together
       //   - means url versioning can work for css inlined in js
       if (context.scenarios.build) {
-        json = true
-        css = true
-        text = true
+        transpilations.json = true
+        transpilations.css = true
+        transpilations.text = true
       }
     },
     redirectUrl: {
@@ -54,41 +68,18 @@ export const jsenvPluginImportAssertions = ({
         if (!reference.assert) {
           return null
         }
-        if (reference.assert.type === "json") {
-          const shouldTranspileJsonImportAssertion =
-            json === true
-              ? true
-              : json === "auto"
-              ? !context.isSupportedOnCurrentClients("import_type_json")
-              : false
-          if (shouldTranspileJsonImportAssertion) {
-            return updateReference(reference, "as_json_module")
-          }
+        const { searchParams } = reference
+        if (
+          searchParams.has("as_json_module") ||
+          searchParams.has("as_css_module") ||
+          searchParams.has("as_text_module")
+        ) {
+          markAsJsModuleProxy(reference)
           return null
         }
-        if (reference.assert.type === "css") {
-          const shouldTranspileCssImportAssertion =
-            css === true
-              ? true
-              : css === "auto"
-              ? !context.isSupportedOnCurrentClients("import_type_css")
-              : false
-          if (shouldTranspileCssImportAssertion) {
-            return updateReference(reference, "as_css_module")
-          }
-          return null
-        }
-        if (reference.assert.type === "text") {
-          const shouldTranspileTextImportAssertion =
-            text === true
-              ? true
-              : text === "auto"
-              ? !context.isSupportedOnCurrentClients("import_type_text")
-              : false
-          if (shouldTranspileTextImportAssertion) {
-            return updateReference(reference, "as_text_module")
-          }
-          return null
+        const type = reference.assert.type
+        if (shouldTranspileImportAssertion(context, type)) {
+          return turnIntoJsModuleProxy(reference, type)
         }
         return null
       },
@@ -107,16 +98,29 @@ const jsenvPluginAsModules = () => {
     name: `jsenv:as_json_module`,
     appliesDuring: "*",
     fetchUrlContent: async (urlInfo, context) => {
-      const originalUrlInfo = await context.fetchOriginalUrlInfo({
+      const [jsonReference, jsonUrlInfo] = context.getWithoutSearchParam({
         urlInfo,
         context,
         searchParam: "as_json_module",
         expectedType: "json",
       })
-      if (!originalUrlInfo) {
+      if (!jsonReference) {
         return null
       }
-      const jsonText = JSON.stringify(originalUrlInfo.content.trim())
+      await context.fetchUrlContent(jsonUrlInfo, {
+        reference: jsonReference,
+      })
+      if (context.scenarios.dev) {
+        context.referenceUtils.found({
+          type: "js_import_export",
+          subtype: jsonReference.subtype,
+          specifier: jsonReference.url,
+          expectedType: "js_module",
+        })
+      } else if (context.scenarios.build && jsonUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(jsonUrlInfo.url)
+      }
+      const jsonText = JSON.stringify(jsonUrlInfo.content.trim())
       return {
         // here we could `export default ${jsonText}`:
         // but js engine are optimized to recognize JSON.parse
@@ -124,8 +128,8 @@ const jsenvPluginAsModules = () => {
         content: `export default JSON.parse(${jsonText})`,
         contentType: "text/javascript",
         type: "js_module",
-        originalUrl: originalUrlInfo.originalUrl,
-        originalContent: originalUrlInfo.originalContent,
+        originalUrl: jsonUrlInfo.originalUrl,
+        originalContent: jsonUrlInfo.originalContent,
       }
     },
   }
@@ -134,16 +138,29 @@ const jsenvPluginAsModules = () => {
     name: `jsenv:as_css_module`,
     appliesDuring: "*",
     fetchUrlContent: async (urlInfo, context) => {
-      const originalUrlInfo = await context.fetchOriginalUrlInfo({
+      const [cssReference, cssUrlInfo] = context.getWithoutSearchParam({
         urlInfo,
         context,
         searchParam: "as_css_module",
         expectedType: "css",
       })
-      if (!originalUrlInfo) {
+      if (!cssReference) {
         return null
       }
-      const cssText = JS_QUOTES.escapeSpecialChars(originalUrlInfo.content, {
+      await context.fetchUrlContent(cssUrlInfo, {
+        reference: cssReference,
+      })
+      if (context.scenarios.dev) {
+        context.referenceUtils.found({
+          type: "js_import_export",
+          subtype: cssReference.subtype,
+          specifier: cssReference.url,
+          expectedType: "js_module",
+        })
+      } else if (context.scenarios.build && cssUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(cssUrlInfo.url)
+      }
+      const cssText = JS_QUOTES.escapeSpecialChars(cssUrlInfo.content, {
         // If template string is choosen and runtime do not support template literals
         // it's ok because "jsenv:new_inline_content" plugin executes after this one
         // and convert template strings into raw strings
@@ -160,8 +177,8 @@ const jsenvPluginAsModules = () => {
   export default stylesheet`,
         contentType: "text/javascript",
         type: "js_module",
-        originalUrl: originalUrlInfo.originalUrl,
-        originalContent: originalUrlInfo.originalContent,
+        originalUrl: cssUrlInfo.originalUrl,
+        originalContent: cssUrlInfo.originalContent,
       }
     },
   }
@@ -170,15 +187,28 @@ const jsenvPluginAsModules = () => {
     name: `jsenv:as_text_module`,
     appliesDuring: "*",
     fetchUrlContent: async (urlInfo, context) => {
-      const originalUrlInfo = await context.fetchOriginalUrlInfo({
+      const [textReference, textUrlInfo] = context.getWithoutSearchParam({
         urlInfo,
         context,
         searchParam: "as_text_module",
         expectedType: "text",
       })
-      if (!originalUrlInfo) {
+      if (!textReference) {
         return null
       }
+      await context.fetchUrlContent(textUrlInfo, {
+        reference: textReference,
+      })
+      if (context.scenarios.dev) {
+        context.referenceUtils.found({
+          type: "js_import_export",
+          subtype: textReference.subtype,
+          specifier: textReference.url,
+          expectedType: "js_module",
+        })
+      } else if (context.scenarios.build && textUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(textUrlInfo.url)
+      }
       const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.content, {
         // If template string is choosen and runtime do not support template literals
         // it's ok because "jsenv:new_inline_content" plugin executes after this one
@@ -194,8 +224,8 @@ const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" })
 export default inlineContent.text`,
         contentType: "text/javascript",
         type: "js_module",
-        originalUrl: originalUrlInfo.originalUrl,
-        originalContent: originalUrlInfo.originalContent,
+        originalUrl: textUrlInfo.originalUrl,
+        originalContent: textUrlInfo.originalContent,
       }
     },
   }

package/src/plugins/transpilation/jsenv_plugin_transpilation.js

@@ -16,7 +16,12 @@ import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js"
 export const jsenvPluginTranspilation = ({
   importAssertions = true,
   css = true,
-  jsModuleAsJsClassic = true,
+  jsClassicLibrary = true,
+  // build sets jsClassicFallback: false during first step of the build
+  // and re-enable it in the second phase (when performing the bundling)
+  // so that bundling is applied on js modules THEN it is converted to js classic if needed
+  jsClassicFallback = true,
+  systemJsInjection = true,
   topLevelAwait = true,
   babelHelpersAsImport = true,
   getCustomBabelPlugins,
@@ -24,11 +29,7 @@ export const jsenvPluginTranspilation = ({
   if (importAssertions === true) {
     importAssertions = {}
   }
-  if (jsModuleAsJsClassic === true) {
-    jsModuleAsJsClassic = {}
-  }
   return [
-    // import assertions we want it all the time
     ...(importAssertions
       ? [jsenvPluginImportAssertions(importAssertions)]
       : []),
@@ -38,14 +39,12 @@ export const jsenvPluginTranspilation = ({
       getCustomBabelPlugins,
       babelHelpersAsImport,
     }),
-    // but the conversion from js_module to js_classic
-    // we want to do it after bundling
-    // so the build function will disable jsModuleAsJsClassic during build
-    // and enable it manually during postbuild
-    ...(jsModuleAsJsClassic
-      ? [jsenvPluginAsJsClassic(jsModuleAsJsClassic)]
-      : []),
-    // topLevelAwait must come after js_module_as_js_classic because it's related to the module format
+    jsenvPluginAsJsClassic({
+      jsClassicLibrary,
+      jsClassicFallback,
+      systemJsInjection,
+    }),
+    // 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)] : []),
     ...(css ? [jsenvPluginCssParcel()] : []),

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

@@ -13,15 +13,17 @@ import {
 export const parseAndTransformHtmlUrls = async (urlInfo, context) => {
   const url = urlInfo.originalUrl
   const content = urlInfo.content
-  const { scenarios, referenceUtils } = context
   const htmlAst = parseHtmlString(content, {
-    storeOriginalPositions: scenarios.dev,
+    storeOriginalPositions: context.scenarios.dev,
   })
-  const actions = []
-  visitHtmlUrls({
+  const mentions = visitHtmlUrls({
     url,
     htmlAst,
-    onUrl: ({
+  })
+  const actions = []
+  const mutations = []
+  mentions.forEach(
+    ({
       type,
       subtype,
       expectedType,
@@ -31,10 +33,10 @@ export const parseAndTransformHtmlUrls = async (urlInfo, context) => {
       originalColumn,
       node,
       attributeName,
+      debug,
       specifier,
     }) => {
       const { crossorigin, integrity } = readFetchMetas(node)
-
       const isResourceHint = [
         "preconnect",
         "dns-prefetch",
@@ -42,8 +44,9 @@ export const parseAndTransformHtmlUrls = async (urlInfo, context) => {
         "preload",
         "modulepreload",
       ].includes(subtype)
-      const [reference] = referenceUtils.found({
+      const [reference] = context.referenceUtils.found({
         type,
+        subtype,
         expectedType,
         originalLine,
         originalColumn,
@@ -53,23 +56,26 @@ export const parseAndTransformHtmlUrls = async (urlInfo, context) => {
         isResourceHint,
         crossorigin,
         integrity,
+        debug,
       })
       actions.push(async () => {
+        await context.referenceUtils.readGeneratedSpecifier(reference)
+      })
+      mutations.push(() => {
         setHtmlNodeAttributes(node, {
-          [attributeName]: await referenceUtils.readGeneratedSpecifier(
-            reference,
-          ),
+          [attributeName]: reference.generatedSpecifier,
         })
       })
     },
-  })
-  if (actions.length === 0) {
-    return null
+  )
+  if (actions.length > 0) {
+    await Promise.all(actions.map((action) => action()))
   }
-  await Promise.all(actions.map((action) => action()))
-  return {
-    content: stringifyHtmlAst(htmlAst),
+  if (mutations.length === 0) {
+    return null
   }
+  mutations.forEach((mutation) => mutation())
+  return stringifyHtmlAst(htmlAst)
 }
 
 const crossOriginCompatibleTagNames = ["script", "link", "img", "source"]
@@ -87,8 +93,10 @@ const readFetchMetas = (node) => {
   return meta
 }
 
-const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
-  const addDependency = ({
+const visitHtmlUrls = ({ url, htmlAst }) => {
+  const mentions = []
+  const finalizeCallbacks = []
+  const addMention = ({
     type,
     subtype,
     expectedType,
@@ -111,7 +119,8 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
       column,
       // originalLine, originalColumn
     } = position
-    onUrl({
+    const debug = getHtmlNodeAttribute(node, "jsenv-debug") !== undefined
+    const mention = {
       type,
       subtype,
       expectedType,
@@ -121,7 +130,10 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
       specifier,
       node,
       attributeName,
-    })
+      debug,
+    }
+    mentions.push(mention)
+    return mention
   }
   const visitAttributeAsUrlSpecifier = ({ node, attributeName, ...rest }) => {
     const value = getHtmlNodeAttribute(node, attributeName)
@@ -130,9 +142,9 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
       if (jsenvPluginOwner === "jsenv:importmap") {
         // during build the importmap is inlined
         // and shoud not be considered as a dependency anymore
-        return
+        return null
       }
-      addDependency({
+      return addMention({
         ...rest,
         node,
         attributeName,
@@ -142,26 +154,29 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
             ? new URL(value, url).href
             : value,
       })
-    } else if (attributeName === "src") {
-      visitAttributeAsUrlSpecifier({
+    }
+    if (attributeName === "src") {
+      return visitAttributeAsUrlSpecifier({
         ...rest,
         node,
         attributeName: "inlined-from-src",
       })
-    } else if (attributeName === "href") {
-      visitAttributeAsUrlSpecifier({
+    }
+    if (attributeName === "href") {
+      return visitAttributeAsUrlSpecifier({
         ...rest,
         node,
         attributeName: "inlined-from-href",
       })
     }
+    return null
   }
   const visitSrcset = ({ type, node }) => {
     const srcset = getHtmlNodeAttribute(node, "srcset")
     if (srcset) {
       const srcCandidates = parseSrcSet(srcset)
       srcCandidates.forEach((srcCandidate) => {
-        addDependency({
+        addMention({
           type,
           node,
           attributeName: "srcset",
@@ -174,18 +189,20 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
     link: (node) => {
       const rel = getHtmlNodeAttribute(node, "rel")
       const type = getHtmlNodeAttribute(node, "type")
-      visitAttributeAsUrlSpecifier({
+      const mention = visitAttributeAsUrlSpecifier({
         type: "link_href",
         subtype: rel,
         node,
         attributeName: "href",
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#including_a_mime_type
         expectedContentType: type,
-        expectedType: {
-          manifest: "webmanifest",
-          modulepreload: "js_module",
-          stylesheet: "css",
-        }[rel],
       })
+
+      if (mention) {
+        finalizeCallbacks.push(() => {
+          mention.expectedType = decideLinkExpectedType(mention, mentions)
+        })
+      }
     },
     // style: () => {},
     script: (node) => {
@@ -198,6 +215,7 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
       }
       visitAttributeAsUrlSpecifier({
         type: "script_src",
+        subtype: type,
         expectedType: type,
         node,
         attributeName: "src",
@@ -228,7 +246,7 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
         node,
       })
     },
-    souce: (node) => {
+    source: (node) => {
       visitAttributeAsUrlSpecifier({
         type: "source_src",
         node,
@@ -255,4 +273,43 @@ const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
       })
     },
   })
+  finalizeCallbacks.forEach((finalizeCallback) => {
+    finalizeCallback()
+  })
+  return mentions
+}
+
+const decideLinkExpectedType = (linkMention, mentions) => {
+  const rel = getHtmlNodeAttribute(linkMention.node, "rel")
+  if (rel === "webmanifest") {
+    return "webmanifest"
+  }
+  if (rel === "modulepreload") {
+    return "js_module"
+  }
+  if (rel === "stylesheet") {
+    return "css"
+  }
+  if (rel === "preload") {
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
+    const as = getHtmlNodeAttribute(linkMention.node, "as")
+    if (as === "document") {
+      return "html"
+    }
+    if (as === "style") {
+      return "css"
+    }
+    if (as === "script") {
+      const firstScriptOnThisUrl = mentions.find(
+        (mentionCandidate) =>
+          mentionCandidate.url === linkMention.url &&
+          mentionCandidate.type === "script_src",
+      )
+      if (firstScriptOnThisUrl) {
+        return firstScriptOnThisUrl.expectedType
+      }
+      return undefined
+    }
+  }
+  return undefined
 }

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

@@ -10,7 +10,6 @@ export const parseAndTransformJsUrls = async (urlInfo, context) => {
     isJsModule: urlInfo.type === "js_module",
     isWebWorker: isWebWorkerUrlInfo(urlInfo),
   })
-  const { rootDirectoryUrl, referenceUtils } = context
   const actions = []
   const magicSource = createMagicSource(urlInfo.content)
   jsMentions.forEach((jsMention) => {
@@ -20,7 +19,7 @@ export const parseAndTransformJsUrls = async (urlInfo, context) => {
     ) {
       urlInfo.data.usesImport = true
     }
-    const [reference] = referenceUtils.found({
+    const [reference] = context.referenceUtils.found({
       type: jsMention.type,
       subtype: jsMention.subtype,
       expectedType: jsMention.expectedType,
@@ -33,7 +32,7 @@ export const parseAndTransformJsUrls = async (urlInfo, context) => {
       data: jsMention.data,
       baseUrl: {
         "StringLiteral": jsMention.baseUrl,
-        "window.origin": rootDirectoryUrl,
+        "window.origin": context.rootDirectoryUrl,
         "import.meta.url": urlInfo.url,
         "context.meta.url": urlInfo.url,
         "document.currentScript.src": urlInfo.url,
@@ -43,7 +42,9 @@ export const parseAndTransformJsUrls = async (urlInfo, context) => {
       typePropertyNode: jsMention.typePropertyNode,
     })
     actions.push(async () => {
-      const replacement = await referenceUtils.readGeneratedSpecifier(reference)
+      const replacement = await context.referenceUtils.readGeneratedSpecifier(
+        reference,
+      )
       magicSource.replace({
         start: jsMention.specifierStart,
         end: jsMention.specifierEnd,

package/src/plugins/url_resolution/jsenv_plugin_url_resolution.js

@@ -28,6 +28,7 @@ export const jsenvPluginUrlResolution = () => {
       "js_url_specifier": urlResolver,
       "js_inline_content": urlResolver,
       "webmanifest_icon_src": urlResolver,
+      "package_json": urlResolver,
     },
   }
 }