@jsenv/core 30.2.0 → 30.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "30.2.0",
+  "version": "30.3.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -67,9 +67,9 @@
     "@c88/v8-coverage": "0.1.1",
     "@financial-times/polyfill-useragent-normaliser": "1.10.2",
     "@jsenv/abort": "4.2.4",
-    "@jsenv/ast": "2.0.0",
+    "@jsenv/ast": "2.0.1",
     "@jsenv/babel-plugins": "1.1.2",
-    "@jsenv/plugin-bundling": "1.1.0",
+    "@jsenv/plugin-bundling": "1.1.1",
     "@jsenv/filesystem": "4.1.9",
     "@jsenv/importmap": "1.2.1",
     "@jsenv/integrity": "0.0.1",

package/src/build/build.js

@@ -56,9 +56,13 @@ import {
 
 import { createUrlGraph } from "../kitchen/url_graph.js"
 import { createKitchen } from "../kitchen/kitchen.js"
+import { RUNTIME_COMPAT } from "../kitchen/compat/runtime_compat.js"
 import { createUrlGraphLoader } from "../kitchen/url_graph/url_graph_loader.js"
 import { createUrlGraphSummary } from "../kitchen/url_graph/url_graph_report.js"
-import { isWebWorkerEntryPointReference } from "../kitchen/web_workers.js"
+import {
+  isWebWorkerEntryPointReference,
+  isWebWorkerUrlInfo,
+} from "../kitchen/web_workers.js"
 import { jsenvPluginUrlAnalysis } from "../plugins/url_analysis/jsenv_plugin_url_analysis.js"
 import { jsenvPluginInline } from "../plugins/inline/jsenv_plugin_inline.js"
 import { jsenvPluginAsJsClassic } from "../plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic.js"
@@ -66,7 +70,10 @@ import { getCorePlugins } from "../plugins/plugins.js"
 
 import { GRAPH } from "./graph_utils.js"
 import { createBuildUrlsGenerator } from "./build_urls_generator.js"
-import { injectVersionMappings } from "./inject_global_version_mappings.js"
+import {
+  injectVersionMappingsAsGlobal,
+  injectVersionMappingsAsImportmap,
+} from "./version_mappings_injection.js"
 import { createVersionGenerator } from "./version_generator.js"
 
 // default runtimeCompat corresponds to
@@ -116,13 +123,13 @@ export const build = async ({
   signal = new AbortController().signal,
   handleSIGINT = true,
   logLevel = "info",
-  runtimeCompat = defaultRuntimeCompat,
   rootDirectoryUrl,
   buildDirectoryUrl,
   assetsDirectory = "",
-  base = runtimeCompat.node ? "./" : "/",
   entryPoints = {},
 
+  runtimeCompat = defaultRuntimeCompat,
+  base = runtimeCompat.node ? "./" : "/",
   plugins = [],
   sourcemaps = false,
   sourcemapsSourcesContent,
@@ -133,6 +140,7 @@ export const build = async ({
   transpilation = {},
   versioning = !runtimeCompat.node,
   versioningMethod = "search_param", // "filename", "search_param"
+  versioningViaImportmap = true,
   lineBreakNormalization = process.platform === "win32",
 
   clientFiles = {
@@ -221,6 +229,28 @@ build ${entryPointKeys.length} entry points`)
     const versioningRedirections = new Map()
     const entryUrls = []
     const rawGraph = createUrlGraph()
+    const contextSharedDuringBuild = {
+      systemJsTranspilation: (() => {
+        const nodeRuntimeEnabled = Object.keys(runtimeCompat).includes("node")
+        if (nodeRuntimeEnabled) return false
+        if (!RUNTIME_COMPAT.isSupported(runtimeCompat, "script_type_module"))
+          return true
+        if (!RUNTIME_COMPAT.isSupported(runtimeCompat, "import_dynamic"))
+          return true
+        if (!RUNTIME_COMPAT.isSupported(runtimeCompat, "import_meta"))
+          return true
+        if (
+          versioning &&
+          versioningViaImportmap &&
+          !RUNTIME_COMPAT.isSupported(runtimeCompat, "importmap")
+        )
+          return true
+        return false
+      })(),
+      minification: plugins.some(
+        (plugin) => plugin.name === "jsenv:minification",
+      ),
+    }
     const rawGraphKitchen = createKitchen({
       signal,
       logLevel,
@@ -228,6 +258,7 @@ build ${entryPointKeys.length} entry points`)
       urlGraph: rawGraph,
       build: true,
       runtimeCompat,
+      ...contextSharedDuringBuild,
       plugins: [
         ...plugins,
         {
@@ -299,6 +330,7 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
       urlGraph: finalGraph,
       build: true,
       runtimeCompat,
+      ...contextSharedDuringBuild,
       plugins: [
         urlAnalysisPlugin,
         jsenvPluginAsJsClassic({
@@ -877,6 +909,56 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
           disabled: logger.levels.debug || !logger.levels.info,
         })
         try {
+          const canUseImportmap =
+            finalEntryUrls.every((finalEntryUrl) => {
+              const finalEntryUrlInfo = finalGraph.getUrlInfo(finalEntryUrl)
+              return finalEntryUrlInfo.type === "html"
+            }) &&
+            finalGraphKitchen.kitchenContext.isSupportedOnCurrentClients(
+              "importmap",
+            )
+          const preferWithoutVersioning = (reference) => {
+            const parentUrlInfo = finalGraph.getUrlInfo(reference.parentUrl)
+            if (parentUrlInfo.jsQuote) {
+              return {
+                type: "global",
+                source: `${parentUrlInfo.jsQuote}+__v__(${JSON.stringify(
+                  reference.specifier,
+                )})+${parentUrlInfo.jsQuote}`,
+              }
+            }
+            if (reference.type === "js_url") {
+              return {
+                type: "global",
+                source: `__v__(${JSON.stringify(reference.specifier)})`,
+              }
+            }
+            if (reference.type === "js_import") {
+              if (reference.subtype === "import_dynamic") {
+                return {
+                  type: "global",
+                  source: `__v__(${JSON.stringify(reference.specifier)})`,
+                }
+              }
+              if (reference.subtype === "import_meta_resolve") {
+                return {
+                  type: "global",
+                  source: `__v__(${JSON.stringify(reference.specifier)})`,
+                }
+              }
+              if (
+                canUseImportmap &&
+                !isReferencedByWorker(reference, finalGraph)
+              ) {
+                return {
+                  type: "importmap",
+                  source: JSON.stringify(reference.specifier),
+                }
+              }
+            }
+            return null
+          }
+
           // see also https://github.com/rollup/rollup/pull/4543
           const contentVersionMap = new Map()
           const hashCallbacks = []
@@ -939,18 +1021,11 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
                     // (inline, data:, sourcemap, shouldHandle is false, ...)
                     return null
                   }
-                  const parentUrlInfo = finalGraph.getUrlInfo(
-                    reference.parentUrl,
-                  )
-                  if (parentUrlInfo.jsQuote) {
-                    // __v__() makes versioning dynamic: no need to take into account
-                    return null
-                  }
-                  if (
-                    reference.type === "js_url" ||
-                    reference.subtype === "import_dynamic"
-                  ) {
-                    // __v__() makes versioning dynamic: no need to take into account
+                  if (preferWithoutVersioning(reference)) {
+                    // when versioning is dynamic no need to take into account
+                    // happend for:
+                    // - specifier mapped by window.__v__()
+                    // - specifier mapped by importmap
                     return null
                   }
                   return dependencyContentVersion
@@ -1004,13 +1079,15 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
           })
 
           const versionMappings = {}
-          const usedVersionMappings = new Set()
+          const versionMappingsOnGlobalMap = new Set()
+          const versionMappingsOnImportmap = new Set()
           const versioningKitchen = createKitchen({
             logLevel: logger.level,
             rootDirectoryUrl: buildDirectoryUrl,
             urlGraph: finalGraph,
             build: true,
             runtimeCompat,
+            ...contextSharedDuringBuild,
             plugins: [
               urlAnalysisPlugin,
               jsenvPluginInline({
@@ -1085,24 +1162,14 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
                   versioningRedirections.set(reference.url, versionedUrl)
                   buildUrls.set(versionedSpecifier, versionedUrl)
 
-                  const parentUrlInfo = finalGraph.getUrlInfo(
-                    reference.parentUrl,
-                  )
-                  if (parentUrlInfo.jsQuote) {
-                    // the url is inline inside js quotes
-                    usedVersionMappings.add(reference.specifier)
-                    return () =>
-                      `${parentUrlInfo.jsQuote}+__v__(${JSON.stringify(
-                        reference.specifier,
-                      )})+${parentUrlInfo.jsQuote}`
-                  }
-                  if (
-                    reference.type === "js_url" ||
-                    reference.subtype === "import_dynamic" ||
-                    reference.subtype === "import_meta_resolve"
-                  ) {
-                    usedVersionMappings.add(reference.specifier)
-                    return () => `__v__(${JSON.stringify(reference.specifier)})`
+                  const withoutVersioning = preferWithoutVersioning(reference)
+                  if (withoutVersioning) {
+                    if (withoutVersioning.type === "importmap") {
+                      versionMappingsOnImportmap.add(reference.specifier)
+                    } else {
+                      versionMappingsOnGlobalMap.add(reference.specifier)
+                    }
+                    return () => withoutVersioning.source
                   }
                   return versionedSpecifier
                 },
@@ -1154,27 +1221,49 @@ ${ANSI.color(buildUrl, ANSI.MAGENTA)}
             })
           })
           await versioningUrlGraphLoader.getAllLoadDonePromise(buildOperation)
-          if (usedVersionMappings.size) {
+          const actions = []
+          const visitors = []
+          if (versionMappingsOnImportmap.size) {
             const versionMappingsNeeded = {}
-            usedVersionMappings.forEach((specifier) => {
+            versionMappingsOnImportmap.forEach((specifier) => {
               versionMappingsNeeded[specifier] = versionMappings[specifier]
             })
-            const actions = []
-            GRAPH.forEach(finalGraph, (urlInfo) => {
+            visitors.push((urlInfo) => {
+              if (urlInfo.type === "html" && urlInfo.isEntryPoint) {
+                actions.push(async () => {
+                  await injectVersionMappingsAsImportmap({
+                    urlInfo,
+                    kitchen: finalGraphKitchen,
+                    versionMappings: versionMappingsNeeded,
+                  })
+                })
+              }
+            })
+          }
+          if (versionMappingsOnGlobalMap.size) {
+            const versionMappingsNeeded = {}
+            versionMappingsOnGlobalMap.forEach((specifier) => {
+              versionMappingsNeeded[specifier] = versionMappings[specifier]
+            })
+            visitors.push((urlInfo) => {
               if (urlInfo.isEntryPoint) {
                 actions.push(async () => {
-                  await injectVersionMappings({
+                  await injectVersionMappingsAsGlobal({
                     urlInfo,
                     kitchen: finalGraphKitchen,
                     versionMappings: versionMappingsNeeded,
-                    minification: plugins.some(
-                      (plugin) => plugin.name === "jsenv:minification",
-                    ),
                   })
                 })
               }
             })
-            await Promise.all(actions.map((action) => action()))
+          }
+          if (visitors.length) {
+            GRAPH.forEach(finalGraph, (urlInfo) => {
+              visitors.forEach((visitor) => visitor(urlInfo))
+            })
+            if (actions.length) {
+              await Promise.all(actions.map((action) => action()))
+            }
           }
         } catch (e) {
           versioningTask.fail()
@@ -1648,3 +1737,11 @@ const canUseVersionedUrl = (urlInfo) => {
   }
   return urlInfo.type !== "webmanifest"
 }
+
+const isReferencedByWorker = (reference, graph) => {
+  const urlInfo = graph.getUrlInfo(reference.url)
+  const dependentWorker = graph.findDependent(urlInfo, (dependentUrlInfo) => {
+    return isWebWorkerUrlInfo(dependentUrlInfo)
+  })
+  return Boolean(dependentWorker)
+}

package/src/build/{inject_global_version_mappings.js → version_mappings_injection.js}

@@ -10,17 +10,16 @@ import {
 
 import { isWebWorkerUrlInfo } from "@jsenv/core/src/kitchen/web_workers.js"
 
-export const injectVersionMappings = async ({
+export const injectVersionMappingsAsGlobal = async ({
   urlInfo,
   kitchen,
   versionMappings,
-  minification,
 }) => {
   const injector = injectors[urlInfo.type]
   if (injector) {
     const { content, sourcemap } = await injector(urlInfo, {
       versionMappings,
-      minification,
+      minification: kitchen.kitchenContext.minification,
     })
     kitchen.urlInfoTransformer.applyFinalTransformations(urlInfo, {
       content,
@@ -28,12 +27,8 @@ export const injectVersionMappings = async ({
     })
   }
 }
-
 const injectors = {
   html: (urlInfo, { versionMappings, minification }) => {
-    // ideally we would inject an importmap but browser support is too low
-    // (even worse for worker/service worker)
-    // so for now we inject code into entry points
     const htmlAst = parseHtmlString(urlInfo.content, {
       storeOriginalPositions: false,
     })
@@ -43,7 +38,7 @@ const injectors = {
         tagName: "script",
         textContent: generateClientCodeForVersionMappings(versionMappings, {
           globalName: "window",
-          minify: minification || minification.js_classic,
+          minification,
         }),
       }),
       "jsenv:versioning",
@@ -52,49 +47,65 @@ const injectors = {
       content: stringifyHtmlAst(htmlAst),
     }
   },
-  js_classic: (urlInfo, { versionMappings, minification }) => {
-    return jsInjector(urlInfo, {
-      versionMappings,
-      minify: minification || minification.js_classic,
-    })
-  },
-  js_module: (urlInfo, { versionMappings, minification }) => {
-    return jsInjector(urlInfo, {
-      versionMappings,
-      minify: minification || minification.js_module,
-    })
-  },
+  js_classic: (...args) => jsInjector(...args),
+  js_module: (...args) => jsInjector(...args),
 }
-
-const jsInjector = (urlInfo, { versionMappings, minify }) => {
+const jsInjector = (urlInfo, { versionMappings, minification }) => {
   const magicSource = createMagicSource(urlInfo.content)
   magicSource.prepend(
     generateClientCodeForVersionMappings(versionMappings, {
       globalName: isWebWorkerUrlInfo(urlInfo) ? "self" : "window",
-      minify,
+      minification,
     }),
   )
   return magicSource.toContentAndSourcemap()
 }
-
 const generateClientCodeForVersionMappings = (
   versionMappings,
-  { globalName, minify },
+  { globalName, minification },
 ) => {
-  if (minify) {
+  if (minification) {
     return `;(function(){var m = ${JSON.stringify(
       versionMappings,
     )}; ${globalName}.__v__ = function (s) { return m[s] || s }; })();`
   }
   return `
 ;(function() {
-
-var __versionMappings__ = ${JSON.stringify(versionMappings, null, "  ")};
-${globalName}.__v__ = function (specifier) {
-  return __versionMappings__[specifier] || specifier
-};
-
+  var __versionMappings__ = ${JSON.stringify(versionMappings, null, "  ")};
+  ${globalName}.__v__ = function (specifier) {
+    return __versionMappings__[specifier] || specifier
+  };
 })();
-
 `
 }
+
+export const injectVersionMappingsAsImportmap = async ({
+  urlInfo,
+  kitchen,
+  versionMappings,
+}) => {
+  const htmlAst = parseHtmlString(urlInfo.content, {
+    storeOriginalPositions: false,
+  })
+  // jsenv_plugin_importmap.js is removing importmap during build
+  // it means at this point we know HTML has no importmap in it
+  // we can safely inject one
+  const importmapNode = createHtmlNode({
+    tagName: "script",
+    type: "importmap",
+    textContent: kitchen.kitchenContext.minification
+      ? JSON.stringify({ imports: versionMappings })
+      : `  
+      {
+        "imports": {${JSON.stringify(versionMappings, null, "          ").slice(
+          1,
+          -1,
+        )}        }
+      }
+    `,
+  })
+  injectScriptNodeAsEarlyAsPossible(htmlAst, importmapNode, "jsenv:versioning")
+  kitchen.urlInfoTransformer.applyFinalTransformations(urlInfo, {
+    content: stringifyHtmlAst(htmlAst),
+  })
+}

package/src/dev/file_service.js

@@ -10,6 +10,7 @@ import { URL_META } from "@jsenv/url-meta"
 
 import { createUrlGraph } from "@jsenv/core/src/kitchen/url_graph.js"
 import { createKitchen } from "@jsenv/core/src/kitchen/kitchen.js"
+import { RUNTIME_COMPAT } from "@jsenv/core/src/kitchen/compat/runtime_compat.js"
 import { getCorePlugins } from "@jsenv/core/src/plugins/plugins.js"
 import { jsenvPluginServerEventsClientInjection } from "@jsenv/core/src/plugins/server_events/jsenv_plugin_server_events_client_injection.js"
 import { parseUserAgentHeader } from "./user_agent.js"
@@ -111,16 +112,22 @@ export const createFileService = ({
         onUrlInfo(urlInfo)
       })
     })
+    const clientRuntimeCompat = { [runtimeName]: runtimeVersion }
     const kitchen = createKitchen({
       signal,
       logLevel,
       rootDirectoryUrl,
+      urlGraph,
       dev: true,
       runtimeCompat,
-      clientRuntimeCompat: {
-        [runtimeName]: runtimeVersion,
-      },
-      urlGraph,
+      clientRuntimeCompat,
+      systemJsTranspilation:
+        !RUNTIME_COMPAT.isSupported(
+          clientRuntimeCompat,
+          "script_type_module",
+        ) ||
+        !RUNTIME_COMPAT.isSupported(clientRuntimeCompat, "import_dynamic") ||
+        !RUNTIME_COMPAT.isSupported(clientRuntimeCompat, "import_meta"),
       plugins: [
         ...plugins,
         ...getCorePlugins({
@@ -141,6 +148,7 @@ export const createFileService = ({
           ribbon,
         }),
       ],
+      minification: false,
       sourcemaps,
       sourcemapsSourcesProtocol,
       sourcemapsSourcesContent,

package/src/kitchen/compat/features_compatibility.js

@@ -60,6 +60,7 @@ export const featuresCompatMap = {
     chrome: "89",
     opera: "76",
     samsung: "15",
+    firefox: "108",
   },
   import_type_json: {
     chrome: "91",
@@ -155,4 +156,62 @@ export const featuresCompatMap = {
     android: "4",
     node: "4",
   },
+  arrow_function: {
+    chrome: "47",
+    opera: "34",
+    edge: "13",
+    firefox: "45",
+    safari: "10",
+    node: "6",
+    ios: "10",
+    samsung: "5",
+    electron: "0.36",
+  },
+  const_bindings: {
+    chrome: "41",
+    opera: "28",
+    edge: "12",
+    firefox: "46",
+    safari: "10",
+    node: "4",
+    ie: "11",
+    ios: "10",
+    samsung: "3.4",
+    electron: "0.22",
+  },
+  object_properties_shorthand: {
+    chrome: "43",
+    opera: "30",
+    edge: "12",
+    firefox: "33",
+    safari: "9",
+    node: "4",
+    ios: "9",
+    samsung: "4",
+    electron: "0.28",
+  },
+  reserved_words: {
+    chrome: "13",
+    opera: "10.50",
+    edge: "12",
+    firefox: "2",
+    safari: "3.1",
+    node: "0.10",
+    ie: "9",
+    android: "4.4",
+    ios: "6",
+    phantom: "2",
+    samsung: "1",
+    electron: "0.20",
+  },
+  symbols: {
+    chrome: "38",
+    opera: "25",
+    edge: "12",
+    firefox: "36",
+    safari: "9",
+    ios: "9",
+    samsung: "4",
+    node: "0.12",
+  },
 }

package/src/kitchen/kitchen.js

@@ -28,14 +28,16 @@ export const createKitchen = ({
   logLevel,
 
   rootDirectoryUrl,
+  urlGraph,
   dev = false,
   build = false,
   runtimeCompat,
   // during dev/test clientRuntimeCompat is a single runtime
   // during build clientRuntimeCompat is runtimeCompat
   clientRuntimeCompat = runtimeCompat,
-  urlGraph,
+  systemJsTranspilation,
   plugins,
+  minification,
   sourcemaps = dev ? "inline" : "none", // "programmatic" and "file" also allowed
   sourcemapsSourcesProtocol,
   sourcemapsSourcesContent,
@@ -53,12 +55,14 @@ export const createKitchen = ({
     build,
     runtimeCompat,
     clientRuntimeCompat,
+    systemJsTranspilation,
     isSupportedOnCurrentClients: (feature) => {
       return RUNTIME_COMPAT.isSupported(clientRuntimeCompat, feature)
     },
     isSupportedOnFutureClients: (feature) => {
       return RUNTIME_COMPAT.isSupported(runtimeCompat, feature)
     },
+    minification,
     sourcemaps,
     outDirectoryUrl,
   }

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

@@ -23,8 +23,6 @@ export const jsenvPluginAsJsClassicHtml = ({
   systemJsInjection,
   systemJsClientFileUrl,
 }) => {
-  let shouldTransformScriptTypeModule
-
   const turnIntoJsClassicProxy = (reference) => {
     return injectQueryParams(reference.url, { as_js_classic: "" })
   }
@@ -32,26 +30,16 @@ export const jsenvPluginAsJsClassicHtml = ({
   return {
     name: "jsenv:as_js_classic_html",
     appliesDuring: "*",
-    init: (context) => {
-      const nodeRuntimeEnabled = Object.keys(context.runtimeCompat).includes(
-        "node",
-      )
-      shouldTransformScriptTypeModule = nodeRuntimeEnabled
-        ? false
-        : !context.isSupportedOnCurrentClients("script_type_module") ||
-          !context.isSupportedOnCurrentClients("import_dynamic") ||
-          !context.isSupportedOnCurrentClients("import_meta")
-    },
     redirectUrl: {
-      link_href: (reference) => {
+      link_href: (reference, context) => {
         if (
-          shouldTransformScriptTypeModule &&
+          context.systemJsTranspilation &&
           reference.subtype === "modulepreload"
         ) {
           return turnIntoJsClassicProxy(reference)
         }
         if (
-          shouldTransformScriptTypeModule &&
+          context.systemJsTranspilation &&
           reference.subtype === "preload" &&
           reference.expectedType === "js_module"
         ) {
@@ -59,18 +47,18 @@ export const jsenvPluginAsJsClassicHtml = ({
         }
         return null
       },
-      script_src: (reference) => {
+      script_src: (reference, context) => {
         if (
-          shouldTransformScriptTypeModule &&
+          context.systemJsTranspilation &&
           reference.expectedType === "js_module"
         ) {
           return turnIntoJsClassicProxy(reference)
         }
         return null
       },
-      js_url: (reference) => {
+      js_url: (reference, context) => {
         if (
-          shouldTransformScriptTypeModule &&
+          context.systemJsTranspilation &&
           reference.expectedType === "js_module"
         ) {
           return turnIntoJsClassicProxy(reference)
@@ -101,7 +89,10 @@ export const jsenvPluginAsJsClassicHtml = ({
             if (!isOrWasExpectingJsModule(reference)) {
               return
             }
-            if (rel === "modulepreload") {
+            if (
+              rel === "modulepreload" &&
+              reference.expectedType === "js_classic"
+            ) {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, {
                   rel: "preload",
@@ -110,7 +101,7 @@ export const jsenvPluginAsJsClassicHtml = ({
                 })
               })
             }
-            if (rel === "preload") {
+            if (rel === "preload" && reference.expectedType === "js_classic") {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, { crossorigin: undefined })
               })
@@ -137,7 +128,7 @@ export const jsenvPluginAsJsClassicHtml = ({
                   setHtmlNodeAttributes(node, { type: undefined })
                 })
               }
-            } else if (shouldTransformScriptTypeModule) {
+            } else if (context.systemJsTranspilation) {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, { type: undefined })
               })