@jsenv/core 24.1.0-alpha.0 → 24.3.1

package/src/internal/{runtime/createBrowserRuntime → browser_runtime}/createBrowserRuntime.js

@@ -1,12 +1,14 @@
+/* eslint-env browser */
+
 import { normalizeImportMap } from "@jsenv/importmap/src/normalizeImportMap.js"
 
 // do not use memoize from @jsenv/filesystem to avoid pulling @jsenv/filesystem code into the browser build
-import { memoize } from "../../memoize.js"
-import { fetchUrl } from "../../browser-utils/fetch-browser.js"
-import { createImportResolverForImportmap } from "../../import-resolution/import-resolver-importmap.js"
-import { measureAsyncFnPerf } from "../../perf_browser.js"
+import { fetchUrl } from "../browser_utils/fetch-browser.js"
+import { createImportResolverForImportmap } from "../import-resolution/import-resolver-importmap.js"
+import { memoize } from "../memoize.js"
+import { measureAsyncFnPerf } from "../perf_browser.js"
 
-import { createBrowserSystem } from "./createBrowserSystem.js"
+import { createBrowserSystem } from "./browser_system.js"
 import { makeNamespaceTransferable } from "./makeNamespaceTransferable.js"
 
 const memoizedCreateBrowserSystem = memoize(createBrowserSystem)

package/src/internal/{browser-launcher → browser_runtime}/displayErrorNotification.js

@@ -3,10 +3,8 @@ const { Notification } = window
 
 const displayErrorNotificationNotAvailable = () => {}
 
-const displayErrorNotificationImplementation = async (error, { icon } = {}) => {
-  const permission = await Notification.requestPermission()
-
-  if (permission === "granted") {
+const displayErrorNotificationImplementation = (error, { icon } = {}) => {
+  if (Notification.permission === "granted") {
     const notification = new Notification("An error occured", {
       lang: "en",
       body: error.stack,

package/src/internal/{runtime/createBrowserRuntime → browser_runtime}/evalSource.js

@@ -1,3 +1,5 @@
+/* eslint-env browser */
+
 export const evalSource = (code, href) => {
   // eslint-disable-next-line no-eval
   return window.eval(appendSourceURL(code, href))

package/src/internal/{browser-utils → browser_utils}/fetch-browser.js

@@ -1,3 +1,5 @@
+/* eslint-env browser */
+
 import { fetchUsingXHR } from "./fetchUsingXHR.js"
 
 const fetchNative = async (url, { mode = "cors", ...options } = {}) => {

package/src/internal/{browser-utils → browser_utils}/fetchAndEvalUsingFetch.js

@@ -1,4 +1,7 @@
+/* eslint-env browser */
+
 import { createDetailedMessage } from "@jsenv/logger"
+
 import { fetchUrl } from "./fetch-browser.js"
 
 export const fetchAndEvalUsingFetch = async (url) => {

package/src/internal/{browser-utils → browser_utils}/fetchAndEvalUsingScript.js

@@ -1,3 +1,5 @@
+/* eslint-env browser */
+
 export const fetchAndEvalUsingScript = async (src) => {
   return new Promise((resolve, reject) => {
     const script = document.createElement("script")

package/src/internal/{browser-utils → browser_utils}/fetchUsingXHR.js

@@ -1,4 +1,4 @@
-import { createDetailedMessage } from "@jsenv/logger"
+/* eslint-env browser */
 
 export const fetchUsingXHR = async (
   url,
@@ -206,9 +206,9 @@ const hasSearchParams = typeof window.URLSearchParams === "function"
 
 const createRequestError = (error, { url }) => {
   return new Error(
-    createDetailedMessage(`error during xhr request on ${url}.`, {
-      ["error stack"]: error.stack,
-    }),
+    `error during xhr request on ${url}.
+--- error stack ---
+${error.stack}`,
   )
 }
 

package/src/internal/building/buildUsingRollup.js

@@ -50,8 +50,10 @@ export const buildUsingRollup = async ({
   importPaths,
 
   urlVersioning,
+  urlVersionningForEntryPoints,
   lineBreakNormalization,
   jsConcatenation,
+  cssConcatenation,
   useImportMapToMaximizeCacheReuse,
   preserveEntrySignatures,
   treeshake,
@@ -121,8 +123,10 @@ export const buildUsingRollup = async ({
     importPaths,
 
     urlVersioning,
+    urlVersionningForEntryPoints,
     lineBreakNormalization,
     jsConcatenation,
+    cssConcatenation,
     useImportMapToMaximizeCacheReuse,
 
     minify,

package/src/internal/building/createJsenvRollupPlugin.js

@@ -12,6 +12,7 @@ import {
   urlIsInsideOf,
   normalizeStructuredMetaMap,
   urlToMeta,
+  urlToBasename,
 } from "@jsenv/filesystem"
 import { UNICODE } from "@jsenv/log"
 
@@ -72,8 +73,10 @@ export const createJsenvRollupPlugin = async ({
   importAssertionsSupport,
 
   urlVersioning,
+  urlVersionningForEntryPoints,
   lineBreakNormalization,
   jsConcatenation,
+  cssConcatenation,
   useImportMapToMaximizeCacheReuse,
 
   minify,
@@ -468,6 +471,7 @@ export const createJsenvRollupPlugin = async ({
               minifyJs,
               minifyHtml,
               minifyCssOptions,
+              cssConcatenation,
             })
           },
         },
@@ -586,9 +590,10 @@ export const createJsenvRollupPlugin = async ({
               atleastOneChunkEmitted = true
               emitChunk({
                 id: ensureRelativeUrlNotation(entryProjectRelativeUrl),
-                name: entryBuildRelativeUrl,
-                // don't hash js entry points
-                fileName: entryBuildRelativeUrl,
+                name: urlToBasename(`file:///${entryBuildRelativeUrl}`),
+                ...(urlVersionningForEntryPoints
+                  ? {}
+                  : { fileName: entryBuildRelativeUrl }),
               })
               return
             }
@@ -601,15 +606,16 @@ export const createJsenvRollupPlugin = async ({
                 `Unusual content type for entry point, got "${entryContentType}" for ${entryProjectRelativeUrl}`,
               )
             }
-            const entryUrl = resolveUrl(
-              entryProjectRelativeUrl,
-              compileServerOrigin,
-            )
+            const entryUrl =
+              entryContentType === "text/html"
+                ? resolveUrl(entryProjectRelativeUrl, compileServerOrigin)
+                : resolveUrl(entryProjectRelativeUrl, compileDirectoryRemoteUrl)
             await ressourceBuilder.createReferenceForEntryPoint({
               entryContentType,
               entryUrl,
               entryBuffer,
               entryBuildRelativeUrl,
+              urlVersionningForEntryPoints,
             })
           },
         ),
@@ -1015,6 +1021,9 @@ export const createJsenvRollupPlugin = async ({
         return id
       }
       outputOptions.entryFileNames = () => {
+        if (urlVersionningForEntryPoints) {
+          return `[name]-[hash]${outputExtension}`
+        }
         return `[name]${outputExtension}`
       }
       outputOptions.chunkFileNames = () => {
@@ -1097,7 +1106,9 @@ export const createJsenvRollupPlugin = async ({
         const file = jsChunks[fileName]
         let buildRelativeUrl
         const canBeVersioned =
-          asRollupUrl(file.url) in jsModulesFromEntry || !file.isEntry
+          asRollupUrl(file.url) in jsModulesFromEntry ||
+          urlVersionningForEntryPoints ||
+          !file.isEntry
 
         if (urlVersioning) {
           if (canBeVersioned && useImportMapToMaximizeCacheReuse) {
@@ -1133,7 +1144,6 @@ export const createJsenvRollupPlugin = async ({
           buildInlineFileContents[buildRelativeUrl] = file.code
         } else {
           markBuildRelativeUrlAsUsedByJs(buildRelativeUrl)
-          buildManifest[fileName] = buildRelativeUrl
           buildMappings[originalProjectRelativeUrl] = buildRelativeUrl
         }
       })

package/src/internal/building/css/applyPostCss.js

@@ -1,23 +1,35 @@
 import { urlToFileSystemPath } from "@jsenv/filesystem"
 
-export const applyPostCss = async (
-  cssString,
-  cssUrl,
+export const applyPostCss = async ({
+  code,
+  url,
+  map,
+  sourcemapMethod = "comment",
   plugins,
   // https://github.com/postcss/postcss#options
   options = {},
-) => {
+}) => {
   const { default: postcss } = await import("postcss")
 
-  let result
   try {
-    const cssFileUrl = urlToFileUrl(cssUrl)
-    result = await postcss(plugins).process(cssString, {
+    const cssFileUrl = urlToFileUrl(url)
+    const result = await postcss(plugins).process(code, {
       collectUrls: true,
       from: urlToFileSystemPath(cssFileUrl),
       to: urlToFileSystemPath(cssFileUrl),
+      map: {
+        annotation: sourcemapMethod === "comment",
+        inline: sourcemapMethod === "inline",
+        // https://postcss.org/api/#sourcemapoptions
+        ...(map ? { prev: JSON.stringify(map) } : {}),
+      },
       ...options,
     })
+    return {
+      code: result.css,
+      map: result.map.toJSON(),
+      postCssMessages: result.messages,
+    }
   } catch (error) {
     if (error.name === "CssSyntaxError") {
       console.error(String(error))
@@ -25,7 +37,6 @@ export const applyPostCss = async (
     }
     throw error
   }
-  return result
 }
 
 // the goal of this function is to take an url that is likely an http url

package/src/internal/building/css/moveCssUrls.js

@@ -0,0 +1,44 @@
+import { urlToRelativeUrl } from "@jsenv/filesystem"
+
+import { applyPostCss } from "./applyPostCss.js"
+import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
+
+export const moveCssUrls = async ({
+  code,
+  from,
+  to,
+  map,
+  sourcemapMethod,
+} = {}) => {
+  const fromDirectoryUrl = new URL("./", from).href
+  const toDirectoryUrl = new URL("./", to).href
+  // same directory, nothing to do
+  if (fromDirectoryUrl === toDirectoryUrl) {
+    return { code, map }
+  }
+
+  const result = await applyPostCss({
+    code,
+    url: from,
+    map,
+    sourcemapMethod,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({ specifier }) => {
+          if (specifier[0] === "#") {
+            return null
+          }
+          const url = new URL(specifier, fromDirectoryUrl).href
+          const relativeUrl = urlToRelativeUrl(url, toDirectoryUrl)
+          return relativeUrl
+        },
+      }),
+    ],
+  })
+  code = result.code
+  map = result.map
+  return {
+    code,
+    map,
+  }
+}

package/src/internal/building/css/parseCssRessource.js

@@ -1,4 +1,9 @@
-import { urlToFilename, urlToRelativeUrl, resolveUrl } from "@jsenv/filesystem"
+import {
+  urlToFilename,
+  urlToRelativeUrl,
+  resolveUrl,
+  fileSystemPathToUrl,
+} from "@jsenv/filesystem"
 
 import {
   getCssSourceMappingUrl,
@@ -7,14 +12,18 @@ import {
 import { getRessourceAsBase64Url } from "../ressource_builder_util.js"
 import { parseCssUrls } from "./parseCssUrls.js"
 import { replaceCssUrls } from "./replaceCssUrls.js"
+import { moveCssUrls } from "./moveCssUrls.js"
 
 export const parseCssRessource = async (
   cssRessource,
   { notifyReferenceFound },
-  { asProjectUrl, asOriginalUrl, minify, minifyCssOptions },
+  { asProjectUrl, asOriginalUrl, minify, minifyCssOptions, cssConcatenation },
 ) => {
   const cssString = String(cssRessource.bufferBeforeBuild)
   const cssSourcemapUrl = getCssSourceMappingUrl(cssString)
+  const url = cssRessource.url
+  let code = cssString
+  let map
   let sourcemapReference
   if (cssSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
@@ -26,6 +35,8 @@ export const parseCssRessource = async (
       referenceColumn: 0,
       isSourcemap: true,
     })
+    await sourcemapReference.ressource.getBufferAvailablePromise()
+    map = JSON.parse(String(sourcemapReference.ressource.bufferBeforeBuild))
   } else {
     sourcemapReference = notifyReferenceFound({
       contentType: "application/octet-stream",
@@ -35,20 +46,25 @@ export const parseCssRessource = async (
     })
   }
 
-  const { atImports, urlDeclarations } = await parseCssUrls(
-    cssString,
-    cssRessource.url,
-  )
-
+  const { atImports, urlDeclarations } = await parseCssUrls({
+    code,
+    url,
+  })
   const urlNodeReferenceMapping = new Map()
+  const atImportReferences = []
   atImports.forEach((atImport) => {
     const importReference = notifyReferenceFound({
       ressourceSpecifier: atImport.specifier,
       ...cssNodeToReferenceLocation(atImport.urlDeclarationNode),
     })
     urlNodeReferenceMapping.set(atImport.urlNode, importReference)
+    atImportReferences.push(importReference)
   })
   urlDeclarations.forEach((urlDeclaration) => {
+    if (urlDeclaration.specifier[0] === "#") {
+      return
+    }
+
     const urlReference = notifyReferenceFound({
       ressourceSpecifier: urlDeclaration.specifier,
       ...cssNodeToReferenceLocation(urlDeclaration.urlDeclarationNode),
@@ -56,22 +72,20 @@ export const parseCssRessource = async (
     urlNodeReferenceMapping.set(urlDeclaration.urlNode, urlReference)
   })
 
-  return async ({ getUrlRelativeToImporter, buildDirectoryUrl }) => {
+  return async ({
+    getUrlRelativeToImporter,
+    precomputeBuildRelativeUrl,
+    buildDirectoryUrl,
+  }) => {
     const sourcemapRessource = sourcemapReference.ressource
-
-    let code = cssString
-    let map = sourcemapRessource.isPlaceholder
-      ? undefined
-      : JSON.parse(String(sourcemapRessource.bufferBeforeBuild))
-
     const cssCompiledUrl = cssRessource.url
     const cssOriginalUrl = asOriginalUrl(cssCompiledUrl)
 
     const replaceCssResult = await replaceCssUrls({
-      url: map ? asProjectUrl(cssCompiledUrl) : cssOriginalUrl,
-      code: cssString,
+      url: asProjectUrl(cssCompiledUrl),
+      code,
       map,
-      getUrlReplacementValue: ({ urlNode }) => {
+      urlVisitor: ({ urlNode }) => {
         const nodeCandidates = Array.from(urlNodeReferenceMapping.keys())
         const urlNodeFound = nodeCandidates.find((urlNodeCandidate) =>
           isSameCssDocumentUrlNode(urlNodeCandidate, urlNode),
@@ -95,6 +109,42 @@ export const parseCssRessource = async (
         }
         return getUrlRelativeToImporter(cssUrlRessource)
       },
+      cssConcatenation,
+      loadCssImport: async (path) => {
+        // const cssFileUrl = asProjectUrl(url)
+        const importedCssFileUrl = fileSystemPathToUrl(path)
+        const atImportReference = atImportReferences.find(
+          (atImportReference) => {
+            return (
+              asProjectUrl(atImportReference.ressource.url) ===
+              importedCssFileUrl
+            )
+          },
+        )
+        atImportReference.inlinedCallback()
+        let code = String(atImportReference.ressource.bufferAfterBuild)
+        const moveResult = await moveCssUrls({
+          code,
+          from: resolveUrl(
+            atImportReference.ressource.buildRelativeUrl,
+            buildDirectoryUrl,
+          ),
+          to: resolveUrl(
+            precomputeBuildRelativeUrl(cssRessource),
+            buildDirectoryUrl,
+          ),
+          // moveCssUrls will change the css source code
+          // Ideally we should update the sourcemap referenced by css
+          // to target the one after css urls are moved.
+          // It means we should force sourcemap ressource to the new one
+          // until it's supported we prevent postcss from updating the
+          // sourcemap comment, othwise css would reference a sourcemap
+          // that won't by in the build directory
+          sourcemapMethod: null,
+        })
+        code = moveResult.code
+        return code
+      },
       cssMinification: minify,
       cssMinificationOptions: minifyCssOptions,
     })

package/src/internal/building/css/parseCssUrls.js

@@ -1,32 +1,38 @@
 import { applyPostCss } from "./applyPostCss.js"
 import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
 
-export const parseCssUrls = async (css, cssUrl = "file:///file.css") => {
+export const parseCssUrls = async ({ code, url = "file:///file.css" }) => {
   const atImports = []
   const urlDeclarations = []
-
-  const postCssPlugins = [postCssPluginUrlVisitor]
-  const postCssOptions = { collectUrls: true }
-  const result = await applyPostCss(css, cssUrl, postCssPlugins, postCssOptions)
-
-  result.messages.forEach(
-    ({ type, specifier, atImportNode, declarationNode, urlNode }) => {
-      if (type === "import") {
-        atImports.push({
+  await applyPostCss({
+    code,
+    url,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({
+          type,
           specifier,
+          atImportNode,
+          declarationNode,
           urlNode,
-          urlDeclarationNode: atImportNode,
-        })
-      }
-      if (type === "asset") {
-        urlDeclarations.push({
-          specifier,
-          urlNode,
-          urlDeclarationNode: declarationNode,
-        })
-      }
-    },
-  )
-
+        }) => {
+          if (type === "import") {
+            atImports.push({
+              specifier,
+              urlNode,
+              urlDeclarationNode: atImportNode,
+            })
+          }
+          if (type === "asset") {
+            urlDeclarations.push({
+              specifier,
+              urlNode,
+              urlDeclarationNode: declarationNode,
+            })
+          }
+        },
+      }),
+    ],
+  })
   return { atImports, urlDeclarations }
 }

package/src/internal/building/css/postcss_plugin_url_visitor.js

@@ -14,18 +14,14 @@ hence sourcemap cannot point the original source location
 import { fileSystemPathToUrl, resolveUrl } from "@jsenv/filesystem"
 import { require } from "@jsenv/core/src/internal/require.js"
 
-export const postCssPluginUrlVisitor = () => {
+export const postCssPluginUrlVisitor = ({ urlVisitor = () => null }) => {
   const parseCssValue = require("postcss-value-parser")
   const stringifyCssNodes = parseCssValue.stringify
 
   return {
     postcssPlugin: "url_visitor",
     prepare: (result) => {
-      const {
-        from,
-        collectUrls = false,
-        getUrlReplacementValue = () => undefined,
-      } = result.opts
+      const { from } = result.opts
       const fromUrl = fileSystemPathToUrl(from)
       const mutations = []
       return {
@@ -109,9 +105,12 @@ export const postCssPluginUrlVisitor = () => {
               atImportNode,
               urlNode,
             }
-            const urlNewValue = getUrlReplacementValue(urlReference)
-            if (urlNewValue && urlNewValue !== urlNode.value) {
-              urlNode.value = urlNewValue
+            const urlVisitorReturnValue = urlVisitor(urlReference)
+            if (
+              urlVisitorReturnValue &&
+              urlVisitorReturnValue !== urlNode.value
+            ) {
+              urlNode.value = urlVisitorReturnValue
               const newParams = parsed.toString()
               const newAtImportRule = new AtRule({
                 name: "import",
@@ -120,10 +119,6 @@ export const postCssPluginUrlVisitor = () => {
               })
               atImportNode.replaceWith(newAtImportRule)
             }
-
-            if (collectUrls) {
-              result.messages.push(urlReference)
-            }
           },
         },
         Declaration: (declarationNode) => {
@@ -158,14 +153,10 @@ export const postCssPluginUrlVisitor = () => {
                 urlNode,
               }
 
-              if (collectUrls) {
-                result.messages.push(urlReference)
-              }
-
-              const urlNewValue = getUrlReplacementValue(urlReference)
-              if (urlNewValue) {
+              const urlVisitorReturnValue = urlVisitor(urlReference)
+              if (urlVisitorReturnValue) {
                 urlMutations.push(() => {
-                  urlNode.value = urlNewValue
+                  urlNode.value = urlVisitorReturnValue
                 })
               }
             },

package/src/internal/building/css/replaceCssUrls.js

@@ -1,3 +1,8 @@
+import {
+  assertAndNormalizeDirectoryUrl,
+  urlToFileSystemPath,
+} from "@jsenv/filesystem"
+
 import { require } from "@jsenv/core/src/internal/require.js"
 import { applyPostCss } from "./applyPostCss.js"
 import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
@@ -6,32 +11,46 @@ export const replaceCssUrls = async ({
   url,
   code,
   map,
-  getUrlReplacementValue,
+  urlVisitor,
+  cssConcatenation = false,
+  loadCssImport,
   cssMinification = false,
   cssMinificationOptions,
 } = {}) => {
-  const postcssPlugins = [
-    postCssPluginUrlVisitor,
-    ...(cssMinification
-      ? [await getCssMinificationPlugin(cssMinificationOptions)]
-      : []),
-  ]
-  const postcssOptions = {
-    getUrlReplacementValue,
-    map: {
-      inline: false,
-      // https://postcss.org/api/#sourcemapoptions
-      ...(map ? { prev: JSON.stringify(map) } : {}),
-    },
-  }
-  const result = await applyPostCss(code, url, postcssPlugins, postcssOptions)
-
+  const result = await applyPostCss({
+    code,
+    url,
+    plugins: [
+      postCssPluginUrlVisitor({ urlVisitor }),
+      ...(cssConcatenation
+        ? [await getCssConcatenationPlugin({ url, loadCssImport })]
+        : []),
+      ...(cssMinification
+        ? [await getCssMinificationPlugin(cssMinificationOptions)]
+        : []),
+    ],
+  })
+  code = result.code
+  map = result.map
   return {
-    code: result.css,
-    map: result.map.toJSON(),
+    code,
+    map,
   }
 }
 
+const getCssConcatenationPlugin = async ({ loadCssImport }) => {
+  const postcssImport = require("postcss-import")
+  return postcssImport({
+    resolve: (id, basedir) => {
+      const url = new URL(id, assertAndNormalizeDirectoryUrl(basedir)).href
+      return urlToFileSystemPath(url)
+    },
+    load: (id) => {
+      return loadCssImport(id)
+    },
+  })
+}
+
 const getCssMinificationPlugin = async (cssMinificationOptions = {}) => {
   const cssnano = require("cssnano")
   const cssnanoDefaultPreset = require("cssnano-preset-default")