@jsenv/core 27.0.0-alpha.12 → 27.0.0-alpha.13

package/src/omega/server/file_service.js

@@ -42,15 +42,11 @@ export const createFileService = ({
     const { runtimeName, runtimeVersion } = parseUserAgentHeader(
       request.headers["user-agent"],
     )
-    const runtimeSupport = {
-      [runtimeName]: runtimeVersion,
-    }
-    const reference = kitchen.createReference({
+    const [reference, urlInfo] = kitchen.prepareEntryPoint({
       parentUrl: inferParentFromRequest(request, rootDirectoryUrl),
       type: "entry_point",
       specifier: request.ressource,
     })
-    const requestedUrlInfo = kitchen.resolveReference(reference)
     const referenceFromGraph = urlGraph.inferReference(
       reference.url,
       reference.parentUrl,
@@ -58,11 +54,13 @@ export const createFileService = ({
     try {
       await kitchen.cook({
         reference: referenceFromGraph || reference,
-        urlInfo: requestedUrlInfo,
+        urlInfo,
         outDirectoryUrl: `${rootDirectoryUrl}.jsenv/${scenario}/${runtimeName}@${runtimeVersion}/`,
-        runtimeSupport,
+        clientRuntimeCompat: {
+          [runtimeName]: runtimeVersion,
+        },
       })
-      const { response, contentType, content } = requestedUrlInfo
+      const { response, contentType, content } = urlInfo
       if (response) {
         return response
       }
@@ -86,11 +84,11 @@ export const createFileService = ({
           statusText: e.reason,
           statusMessage: e.message,
           headers: {
-            "content-type": requestedUrlInfo.contentType,
-            "content-length": Buffer.byteLength(requestedUrlInfo.content),
+            "content-type": urlInfo.contentType,
+            "content-length": Buffer.byteLength(urlInfo.content),
             "cache-control": "no-store",
           },
-          body: requestedUrlInfo.content,
+          body: urlInfo.content,
         }
       }
       if (code === "EISDIR") {

package/src/omega/url_graph/url_graph_load.js

@@ -5,23 +5,24 @@ export const loadUrlGraph = async ({
   kitchen,
   startLoading,
   outDirectoryUrl,
-  runtimeSupport,
+  clientRuntimeCompat,
 }) => {
   if (outDirectoryUrl) {
     await ensureEmptyDirectory(outDirectoryUrl)
   }
   const promises = []
+  const promiseMap = new Map()
   const cook = ({ urlInfo, ...rest }) => {
-    const promiseFromData = urlInfo.data.promise
+    const promiseFromData = promiseMap.get(urlInfo)
     if (promiseFromData) return promiseFromData
     const promise = _cook({
       urlInfo,
       outDirectoryUrl,
-      runtimeSupport,
+      clientRuntimeCompat,
       ...rest,
     })
     promises.push(promise)
-    urlInfo.data.promise = promise
+    promiseMap.set(urlInfo, promise)
     return promise
   }
   const _cook = async ({ urlInfo, ...rest }) => {
@@ -32,21 +33,25 @@ export const loadUrlGraph = async ({
     })
     const { references } = urlInfo
     references.forEach((reference) => {
+      // we use reference.generatedUrl to mimic what a browser would do:
+      // do a fetch to the specifier as found in the file
+      const referencedUrlInfo = urlGraph.reuseOrCreateUrlInfo(
+        reference.generatedUrl,
+      )
       cook({
         reference,
-        urlInfo: urlGraph.getUrlInfo(reference.url),
+        urlInfo: referencedUrlInfo,
       })
     })
   }
   startLoading(
     ({ trace, parentUrl = kitchen.rootDirectoryUrl, type, specifier }) => {
-      const entryReference = kitchen.createReference({
+      const [entryReference, entryUrlInfo] = kitchen.prepareEntryPoint({
         trace,
         parentUrl,
         type,
         specifier,
       })
-      const entryUrlInfo = kitchen.resolveReference(entryReference)
       entryUrlInfo.data.isEntryPoint = true
       cook({
         reference: entryReference,
@@ -66,4 +71,5 @@ export const loadUrlGraph = async ({
     await waitAll()
   }
   await waitAll()
+  promiseMap.clear()
 }

package/src/omega/url_graph/url_graph_report.js

@@ -39,8 +39,10 @@ const createUrlGraphReport = (urlGraph) => {
       return
     }
     const urlInfo = urlInfos[url]
-    // ignore inline files, they are already taken into account in the file where they appear
-    if (urlInfo.isInline) {
+    // ignore:
+    // - inline files: they are already taken into account in the file where they appear
+    // - external files: we don't know their content
+    if (urlInfo.isInline || urlInfo.external) {
       return
     }
     // file loaded via import assertion are already inside the graph
@@ -49,9 +51,9 @@ const createUrlGraphReport = (urlGraph) => {
     // and only the js module remain (likely bundled)
     const urlObject = new URL(urlInfo.url)
     if (
-      urlObject.searchParams.has("json_module") ||
-      urlObject.searchParams.has("css_module") ||
-      urlObject.searchParams.has("text_module")
+      urlObject.searchParams.has("as_json_module") ||
+      urlObject.searchParams.has("as_css_module") ||
+      urlObject.searchParams.has("as_text_module")
     ) {
       return
     }

package/src/omega/url_graph.js

@@ -44,9 +44,19 @@ export const createUrlGraph = () => {
   const updateReferences = (urlInfo, references) => {
     const dependencyUrls = []
     references.forEach((reference) => {
-      if (!dependencyUrls.includes(reference.url)) {
-        dependencyUrls.push(reference.url)
+      if (reference.isRessourceHint) {
+        // ressource hint are a special kind of reference.
+        // They are a sort of weak reference to an url.
+        // We ignore them so that url referenced only by ressource hints
+        // have url.dependents.size === 0 and can be considered as not used
+        // It means html won't consider url referenced solely
+        // by <link> as dependency and it's fine
+        return
       }
+      if (dependencyUrls.includes(reference.url)) {
+        return
+      }
+      dependencyUrls.push(reference.url)
     })
     pruneDependencies(
       urlInfo,
@@ -115,19 +125,21 @@ export const createUrlGraph = () => {
 const createUrlInfo = (url) => {
   return {
     data: {}, // plugins can put whatever they want here
+    references: [],
+    dependencies: new Set(),
+    dependents: new Set(),
+    type: undefined, // "html", "css", "js_classic", "js_module", "importmap", "json", "webmanifest", ...
+    subtype: undefined, // "worker", "service_worker", "shared_worker" for js, otherwise undefined
+    contentType: "", // "text/html", "text/css", "text/javascript", "application/json", ...
     url,
+    filename: "",
     generatedUrl: null,
     isInline: false,
     inlineUrlSite: null,
-    contentType: "",
-    originalContent: "",
-    content: "",
+    external: false,
+    originalContent: undefined,
+    content: undefined,
     sourcemap: null,
     sourcemapReference: null,
-    type: "",
-    subtype: "",
-    references: [],
-    dependencies: new Set(),
-    dependents: new Set(),
   }
 }

package/src/omega/web_workers.js

@@ -0,0 +1,42 @@
+// the following apis are creating js entry points:
+// - new Worker()
+// - new SharedWorker()
+// - navigator.serviceWorker.register()
+export const isWebWorkerEntryPointReference = (reference) => {
+  if (reference.subtype === "new_url_first_arg") {
+    return ["worker", "service_worker", "shared_worker"].includes(
+      reference.expectedSubtype,
+    )
+  }
+  return [
+    "new_worker_first_arg",
+    "new_shared_worker_first_arg",
+    "service_worker_register_first_arg",
+  ].includes(reference.subtype)
+}
+
+export const isWebWorkerUrlInfo = (urlInfo) => {
+  return (
+    urlInfo.subtype === "worker" ||
+    urlInfo.subtype === "service_worker" ||
+    urlInfo.subtype === "shared_worker"
+  )
+}
+
+// export const isEntryPoint = (urlInfo, urlGraph) => {
+//   if (urlInfo.data.isEntryPoint) {
+//     return true
+//   }
+//   if (isWebWorker(urlInfo)) {
+//     // - new Worker("a.js") -> "a.js" is an entry point
+//     // - self.importScripts("b.js") -> "b.js" is not an entry point
+//     // So the following logic applies to infer if the file is a web worker entry point
+//     // "When a non-webworker file references a worker file, the worker file is an entry point"
+//     const dependents = Array.from(urlInfo.dependents)
+//     return dependents.some((dependentUrl) => {
+//       const dependentUrlInfo = urlGraph.getUrlInfo(dependentUrl)
+//       return !isWebWorker(dependentUrlInfo)
+//     })
+//   }
+//   return false
+// }

package/src/plugins/bundling/css/bundle_css.js

@@ -0,0 +1,17 @@
+import { bundleWithParcel } from "@jsenv/utils/css_ast/parcel_css.js"
+
+export const bundleCss = ({ cssUrlInfos, context }) => {
+  const bundledCssUrlInfos = {}
+  cssUrlInfos.forEach((cssUrlInfo) => {
+    const { code, map } = bundleWithParcel(cssUrlInfo, context)
+    bundledCssUrlInfos[cssUrlInfo.url] = {
+      data: {
+        generatedBy: "parcel",
+      },
+      contentType: "text/css",
+      content: String(code),
+      sourcemap: map,
+    }
+  })
+  return bundledCssUrlInfos
+}

package/src/plugins/bundling/js_classic_workers/bundle_js_classic_workers.js

@@ -0,0 +1,13 @@
+/*
+ * TODO:
+ * for each js_classic where subtype is a worker
+ * take the url info and find importScripts calls
+ * and replace them with the corresponding url info file content
+ * we'll ikely need to save the importScripts node location to be able to do that
+ */
+
+// import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+
+export const bundleJsClassicWorkers = () => {
+  return {}
+}

package/src/{build/plugins/bundle_js_module/jsenv_plugin_bundle_js_module.js → plugins/bundling/js_module/bundle_js_module.js}

@@ -1,43 +1,32 @@
-import { isFileSystemPath, urlToRelativeUrl } from "@jsenv/filesystem"
+import { isFileSystemPath } from "@jsenv/filesystem"
+import { createDetailedMessage } from "@jsenv/logger"
 
 import { applyRollupPlugins } from "@jsenv/utils/js_ast/apply_rollup_plugins.js"
 import { sourcemapConverter } from "@jsenv/utils/sourcemap/sourcemap_converter.js"
 import { fileUrlConverter } from "@jsenv/core/src/omega/file_url_converter.js"
 
-export const jsenvPluginBundleJsModule = () => {
-  return {
-    name: "jsenv:bundle_js_module",
-    appliesDuring: {
-      build: true,
-    },
-    bundle: {
-      js_module: async (
-        jsModuleUrlInfos,
-        {
-          signal,
-          logger,
-          rootDirectoryUrl,
-          buildDirectoryUrl,
-          urlGraph,
-          runtimeSupport,
-          sourcemaps,
-        },
-      ) => {
-        const { jsModuleBundleUrlInfos } = await buildWithRollup({
-          signal,
-          logger,
-          rootDirectoryUrl,
-          buildDirectoryUrl,
-          urlGraph,
-          jsModuleUrlInfos,
+export const bundleJsModule = async ({ jsModuleUrlInfos, context }) => {
+  const {
+    signal,
+    logger,
+    rootDirectoryUrl,
+    buildDirectoryUrl,
+    urlGraph,
+    runtimeCompat,
+    sourcemaps,
+  } = context
+  const { jsModuleBundleUrlInfos } = await buildWithRollup({
+    signal,
+    logger,
+    rootDirectoryUrl,
+    buildDirectoryUrl,
+    urlGraph,
+    jsModuleUrlInfos,
 
-          runtimeSupport,
-          sourcemaps,
-        })
-        return jsModuleBundleUrlInfos
-      },
-    },
-  }
+    runtimeCompat,
+    sourcemaps,
+  })
+  return jsModuleBundleUrlInfos
 }
 
 export const buildWithRollup = async ({
@@ -48,36 +37,46 @@ export const buildWithRollup = async ({
   urlGraph,
   jsModuleUrlInfos,
 
-  runtimeSupport,
+  runtimeCompat,
   sourcemaps,
 }) => {
   const resultRef = { current: null }
-  await applyRollupPlugins({
-    rollupPlugins: [
-      rollupPluginJsenv({
-        signal,
-        logger,
-        rootDirectoryUrl,
-        buildDirectoryUrl,
-        urlGraph,
-        jsModuleUrlInfos,
+  try {
+    await applyRollupPlugins({
+      rollupPlugins: [
+        rollupPluginJsenv({
+          signal,
+          logger,
+          rootDirectoryUrl,
+          buildDirectoryUrl,
+          urlGraph,
+          jsModuleUrlInfos,
 
-        runtimeSupport,
-        sourcemaps,
-        resultRef,
-      }),
-    ],
-    inputOptions: {
-      input: [],
-      onwarn: (warning) => {
-        if (warning.code === "CIRCULAR_DEPENDENCY") {
-          return
-        }
-        logger.warn(String(warning))
+          runtimeCompat,
+          sourcemaps,
+          resultRef,
+        }),
+      ],
+      inputOptions: {
+        input: [],
+        onwarn: (warning) => {
+          if (warning.code === "CIRCULAR_DEPENDENCY") {
+            return
+          }
+          logger.warn(String(warning))
+        },
       },
-    },
-  })
-  return resultRef.current
+    })
+    return resultRef.current
+  } catch (e) {
+    if (e.code === "MISSING_EXPORT") {
+      const detailedMessage = createDetailedMessage(e.message, {
+        frame: e.frame,
+      })
+      throw new Error(detailedMessage, { cause: e })
+    }
+    throw e
+  }
 }
 
 const rollupPluginJsenv = ({
@@ -119,6 +118,7 @@ const rollupPluginJsenv = ({
           implicitlyLoadedAfterOneOf: previousNonEntryPointModuleId
             ? [previousNonEntryPointModuleId]
             : null,
+          preserveSignature: "allow-extension",
         })
         previousNonEntryPointModuleId = id
       })
@@ -135,8 +135,12 @@ const rollupPluginJsenv = ({
             // buildRelativeUrl: rollupFileInfo.fileName,
             data: {
               generatedBy: "rollup",
+              usesImport:
+                rollupFileInfo.imports.length > 0 ||
+                rollupFileInfo.dynamicImports.length > 0,
+              usesExport: rollupFileInfo.exports.length > 0,
             },
-            contentType: "application/javascript",
+            contentType: "text/javascript",
             content: rollupFileInfo.code,
             sourcemap: rollupFileInfo.map,
           }
@@ -144,7 +148,7 @@ const rollupPluginJsenv = ({
           if (rollupFileInfo.facadeModuleId) {
             url = fileUrlConverter.asFileUrl(rollupFileInfo.facadeModuleId)
           } else {
-            url = new URL(rollupFileInfo.fileName, rootDirectoryUrl).href
+            url = new URL(rollupFileInfo.fileName, buildDirectoryUrl).href
           }
           jsModuleBundleUrlInfos[url] = jsModuleBundleUrlInfo
         }
@@ -167,19 +171,12 @@ const rollupPluginJsenv = ({
           return `[name].js`
         },
         chunkFileNames: (chunkInfo) => {
-          // preserves relative path parts:
-          // the goal is to maintain the original relative path (relative to the root directory)
-          // so that later in the build process, when resolving these urls, we are able to
-          // re-resolve the specifier againt the original parent url and find the original url
-          if (chunkInfo.facadeModuleId) {
-            const fileUrl = fileUrlConverter.asFileUrl(chunkInfo.facadeModuleId)
-            const relativePath = urlToRelativeUrl(fileUrl, rootDirectoryUrl)
-            return relativePath
-          }
-          // chunk generated dynamically by rollup to share code.
-          // we prefix with "__rollup__/" to avoid potential conflict of filename
-          // between this one and a file with the same name existing in the root directory
-          return `__rollup__/${chunkInfo.name}.js`
+          const insideJs = willBeInsideJsDirectory({
+            chunkInfo,
+            fileUrlConverter,
+            jsModuleUrlInfos,
+          })
+          return insideJs ? `js/${chunkInfo.name}.js` : `${chunkInfo.name}.js`
         },
         // https://rollupjs.org/guide/en/#outputpaths
         // paths: (id) => {
@@ -197,7 +194,7 @@ const rollupPluginJsenv = ({
         urlImporters[url] = importer
       }
       if (!url.startsWith("file:")) {
-        return { url, external: true }
+        return { id: url, external: true }
       }
       const filePath = fileUrlConverter.asFilePath(url)
       return filePath
@@ -225,3 +222,31 @@ const rollupPluginJsenv = ({
     },
   }
 }
+
+const willBeInsideJsDirectory = ({
+  chunkInfo,
+  fileUrlConverter,
+  jsModuleUrlInfos,
+}) => {
+  // if the chunk is generated dynamically by rollup
+  // for an entry point jsenv will put that file inside js/ directory
+  // if it's generated dynamically for a file already in js/ directory
+  // both will be inside the js/ directory
+  if (!chunkInfo.facadeModuleId) {
+    // generated by rollup
+    return true
+  }
+  const url = fileUrlConverter.asFileUrl(chunkInfo.facadeModuleId)
+  const jsModuleUrlInfo = jsModuleUrlInfos.find(
+    (jsModuleUrlInfo) => jsModuleUrlInfo.url === url,
+  )
+  if (!jsModuleUrlInfo) {
+    // generated by rollup
+    return true
+  }
+  if (!jsModuleUrlInfo.data.isEntryPoint) {
+    // not an entry point, jsenv will put it inside js/ directory
+    return true
+  }
+  return false
+}

package/src/plugins/bundling/jsenv_plugin_bundling.js

@@ -0,0 +1,51 @@
+import { bundleCss } from "./css/bundle_css.js"
+import { bundleJsClassicWorkers } from "./js_classic_workers/bundle_js_classic_workers.js"
+import { bundleJsModule } from "./js_module/bundle_js_module.js"
+
+export const jsenvPluginBundling = (bundling) => {
+  if (typeof bundling === "boolean") {
+    bundling = {
+      css: bundling,
+      js_classic_workers: bundling,
+      js_module: bundling,
+    }
+  } else if (typeof bundling !== "object") {
+    throw new Error(`bundling must be a boolean or an object, got ${bundling}`)
+  }
+  Object.keys(bundling).forEach((key) => {
+    if (bundling[key] === true) bundling[key] = {}
+  })
+
+  return {
+    name: "jsenv:bundling",
+    appliesDuring: {
+      build: true,
+    },
+    bundle: {
+      css: bundling.css
+        ? (cssUrlInfos, context) =>
+            bundleCss({
+              cssUrlInfos,
+              context,
+              options: bundling.css,
+            })
+        : undefined,
+      js_classic: bundling.js_classic
+        ? (jsClassicUrlInfos, context) =>
+            bundleJsClassicWorkers({
+              jsClassicUrlInfos,
+              context,
+              options: bundling.js_classic_workers,
+            })
+        : undefined,
+      js_module: bundling.js_module
+        ? (jsModuleUrlInfos, context) =>
+            bundleJsModule({
+              jsModuleUrlInfos,
+              context,
+              options: bundling.js_module,
+            })
+        : undefined,
+    },
+  }
+}

package/src/{omega/core_plugins → plugins}/commonjs_globals/jsenv_plugin_commonjs_globals.js

@@ -11,50 +11,57 @@ import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 
 export const jsenvPluginCommonJsGlobals = () => {
+  const transformCommonJsGlobals = async (urlInfo, { scenario }) => {
+    const isJsModule = urlInfo.type === "js_module"
+
+    const replaceMap = {
+      "process.env.NODE_ENV": `("${
+        scenario === "dev" || scenario === "test" ? "dev" : "prod"
+      }")`,
+      "global": "globalThis",
+      "__filename": isJsModule
+        ? `import.meta.url.slice('file:///'.length)`
+        : `document.currentScript.src`,
+      "__dirname": isJsModule
+        ? `import.meta.url.slice('file:///'.length).replace(/[\\\/\\\\][^\\\/\\\\]*$/, '')`
+        : `new URL('./', document.currentScript.src).href`,
+    }
+    const { metadata } = await applyBabelPlugins({
+      babelPlugins: [
+        [
+          babelPluginMetadataExpressionPaths,
+          {
+            replaceMap,
+            allowConflictingReplacements: true,
+          },
+        ],
+      ],
+      urlInfo,
+    })
+    const { expressionPaths } = metadata
+    const keys = Object.keys(expressionPaths)
+    if (keys.length === 0) {
+      return null
+    }
+    const magicSource = createMagicSource(urlInfo.content)
+    keys.forEach((key) => {
+      expressionPaths[key].forEach((path) => {
+        magicSource.replace({
+          start: path.node.start,
+          end: path.node.end,
+          replacement: replaceMap[key],
+        })
+      })
+    })
+    return magicSource.toContentAndSourcemap()
+  }
+
   return {
     name: "jsenv:commonjs_globals",
     appliesDuring: "*",
-    transform: {
-      js_module: async ({ url, generatedUrl, content }, { scenario }) => {
-        const replaceMap = {
-          "process.env.NODE_ENV": `("${
-            scenario === "dev" || scenario === "test" ? "dev" : "prod"
-          }")`,
-          "global": "globalThis",
-          "__filename": `import.meta.url.slice('file:///'.length)`,
-          "__dirname": `import.meta.url.slice('file:///'.length).replace(/[\\\/\\\\][^\\\/\\\\]*$/, '')`,
-        }
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [
-            [
-              babelPluginMetadataExpressionPaths,
-              {
-                replaceMap,
-                allowConflictingReplacements: true,
-              },
-            ],
-          ],
-          url,
-          generatedUrl,
-          content,
-        })
-        const { expressionPaths } = metadata
-        const keys = Object.keys(expressionPaths)
-        if (keys.length === 0) {
-          return null
-        }
-        const magicSource = createMagicSource(content)
-        keys.forEach((key) => {
-          expressionPaths[key].forEach((path) => {
-            magicSource.replace({
-              start: path.node.start,
-              end: path.node.end,
-              replacement: replaceMap[key],
-            })
-          })
-        })
-        return magicSource.toContentAndSourcemap()
-      },
+    transformUrlContent: {
+      js_classic: transformCommonJsGlobals,
+      js_module: transformCommonJsGlobals,
     },
   }
 }