@jsenv/core 27.0.0-alpha.4 → 27.0.0-alpha.40

package/src/{dev/plugins/autoreload/jsenv_plugin_autoreload.js → plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_server.js}

@@ -1,177 +1,35 @@
 import { urlToRelativeUrl } from "@jsenv/filesystem"
 import { createCallbackList } from "@jsenv/abort"
 
-import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
-import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
-import {
-  parseHtmlString,
-  stringifyHtmlAst,
-  injectScriptAsEarlyAsPossible,
-  createHtmlNode,
-} from "@jsenv/utils/html_ast/html_ast.js"
-import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { createSSEService } from "@jsenv/utils/event_source/sse_service.js"
 
-import { createSSEService } from "./sse_service.js"
-import { collectHotDataFromHtmlAst } from "./html_hot_dependencies.js"
-import { babelPluginMetadataImportMetaHot } from "./babel_plugin_metadata_import_meta_hot.js"
-
-export const jsenvPluginAutoreload = ({
+export const jsenvPluginDevSSEServer = ({
   rootDirectoryUrl,
   urlGraph,
-  autoreloadPatterns,
+  watchedFilePatterns,
+  cooldownBetweenFileEvents,
 }) => {
-  return [
-    jsenvPluginHot(),
-    jsenvPluginHotSSE({
-      rootDirectoryUrl,
-      urlGraph,
-      autoreloadPatterns,
-    }),
-  ]
-}
-
-const jsenvPluginHot = () => {
-  const eventSourceClientFileUrl = new URL(
-    "./client/event_source_client.js",
-    import.meta.url,
-  ).href
-  const importMetaHotClientFileUrl = new URL(
-    "./client/import_meta_hot.js",
-    import.meta.url,
-  ).href
-
-  return {
-    name: "jsenv:hot",
-    appliesDuring: { dev: true },
-    normalize: ({ url, data }) => {
-      const urlObject = new URL(url)
-      if (!urlObject.searchParams.has("hmr")) {
-        data.hmr = false
-        return null
-      }
-      data.hmr = true
-      // "hmr" search param goal is to mark url as enabling hmr:
-      // this goal is achieved when we reach this part of the code
-      // We get rid of this params so that urlGraph and other parts of the code
-      // recognize the url (it is not considered as a different url)
-      urlObject.searchParams.delete("hmr")
-      urlObject.searchParams.delete("v")
-      return urlObject.href
-    },
-    transformReferencedUrl: ({ parentUrl, url, data }, { urlGraph }) => {
-      const parentUrlInfo = urlGraph.getUrlInfo(parentUrl)
-      if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
-        return null
-      }
-      if (!data.hmrTimestamp) {
-        return null
-      }
-      return injectQueryParams(url, {
-        hmr: "",
-        v: data.hmrTimestamp,
-      })
-    },
-    transform: {
-      html: ({ data, content }, { referenceUtils }) => {
-        const htmlAst = parseHtmlString(content)
-        const { hotReferences } = collectHotDataFromHtmlAst(htmlAst)
-        data.hotDecline = false
-        data.hotAcceptSelf = false
-        data.hotAcceptDependencies = hotReferences.map(
-          ({ type, specifier }) => {
-            const [reference] = referenceUtils.inject({
-              type,
-              specifier,
-            })
-            return reference.url
-          },
-        )
-        const [eventSourceClientReference] = referenceUtils.inject({
-          type: "script_src",
-          specifier: eventSourceClientFileUrl,
-        })
-        injectScriptAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            "tagName": "script",
-            "type": "module",
-            "src": eventSourceClientReference.generatedSpecifier,
-            "injected-by": "jsenv:hot",
-          }),
-        )
-        const htmlModified = stringifyHtmlAst(htmlAst)
-        return {
-          content: htmlModified,
-        }
-      },
-      css: ({ data }) => {
-        data.hotDecline = false
-        data.hotAcceptSelf = false
-        data.hotAcceptDependencies = []
-      },
-      js_module: async (
-        { url, generatedUrl, data, content },
-        { referenceUtils },
-      ) => {
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [babelPluginMetadataImportMetaHot],
-          url,
-          generatedUrl,
-          content,
-        })
-        const {
-          importMetaHotDetected,
-          hotDecline,
-          hotAcceptSelf,
-          hotAcceptDependencies,
-        } = metadata
-        data.hotDecline = hotDecline
-        data.hotAcceptSelf = hotAcceptSelf
-        data.hotAcceptDependencies = hotAcceptDependencies
-        if (!importMetaHotDetected) {
-          return null
-        }
-        // For some reason using magic source here produce
-        // better sourcemap than doing the equivalent with babel
-        // I suspect it's because I was doing injectAstAfterImport(programPath, ast.program.body[0])
-        // which is likely not well supported by babel
-        const [importMetaHotClientFileReference] = referenceUtils.inject({
-          parentUrl: url,
-          type: "js_import_export",
-          specifier: importMetaHotClientFileUrl,
-        })
-        const magicSource = createMagicSource(content)
-        magicSource.prepend(
-          `import { createImportMetaHot } from ${importMetaHotClientFileReference.generatedSpecifier}
-import.meta.hot = createImportMetaHot(import.meta.url)
-`,
-        )
-        return magicSource.toContentAndSourcemap()
-      },
-    },
-  }
-}
-
-const jsenvPluginHotSSE = ({
-  rootDirectoryUrl,
-  urlGraph,
-  autoreloadPatterns,
-}) => {
-  const hotUpdateCallbackList = createCallbackList()
+  const serverEventCallbackList = createCallbackList()
   const notifyDeclined = ({ cause, reason, declinedBy }) => {
-    hotUpdateCallbackList.notify({
-      declined: true,
-      cause,
-      reason,
-      declinedBy,
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "full",
+        typeReason: reason,
+        declinedBy,
+      }),
     })
   }
   const notifyAccepted = ({ cause, reason, instructions }) => {
-    hotUpdateCallbackList.notify({
-      accepted: true,
-      cause,
-      reason,
-      instructions,
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "hot",
+        typeReason: reason,
+        hotInstructions: instructions,
+      }),
     })
   }
   const updateHmrTimestamp = (urlInfo, hmrTimestamp) => {
@@ -185,9 +43,8 @@ const jsenvPluginHotSSE = ({
       urlInfo.data.hmrTimestamp = hmrTimestamp
       urlInfo.dependents.forEach((dependentUrl) => {
         const dependentUrlInfo = urlInfos[dependentUrl]
-        if (
-          !dependentUrlInfo.data.hotAcceptDependencies.includes(urlInfo.url)
-        ) {
+        const { hotAcceptDependencies = [] } = dependentUrlInfo.data
+        if (!hotAcceptDependencies.includes(urlInfo.url)) {
           iterate(dependentUrlInfo, hmrTimestamp)
         }
       })
@@ -224,7 +81,8 @@ const jsenvPluginHotSSE = ({
             declinedBy: dependentUrl,
           }
         }
-        if (dependentUrlInfo.data.hotAcceptDependencies.includes(urlInfo.url)) {
+        const { hotAcceptDependencies = [] } = dependentUrlInfo.data
+        if (hotAcceptDependencies.includes(urlInfo.url)) {
           instructions.push({
             type: dependentUrlInfo.type,
             boundary: urlToRelativeUrl(dependentUrl, rootDirectoryUrl),
@@ -273,9 +131,11 @@ const jsenvPluginHotSSE = ({
   }
   const sseService = createSSEService({
     rootDirectoryUrl,
-    autoreloadPatterns,
-    onFileChange: ({ relativeUrl, event }) => {
-      const url = new URL(relativeUrl, rootDirectoryUrl).href
+    watchedFilePatterns,
+    cooldownBetweenFileEvents,
+    serverEventCallbackList,
+    onFileChange: ({ url, event }) => {
+      const relativeUrl = urlToRelativeUrl(url, rootDirectoryUrl)
       const urlInfo = urlGraph.urlInfos[url]
       // file not part of dependency graph
       if (!urlInfo) {
@@ -297,7 +157,6 @@ const jsenvPluginHotSSE = ({
         })
       }
     },
-    hotUpdateCallbackList,
   })
   urlGraph.prunedCallbackList.add(({ prunedUrlInfos, firstUrlInfo }) => {
     prunedUrlInfos.forEach((prunedUrlInfo) => {
@@ -346,7 +205,7 @@ const jsenvPluginHotSSE = ({
   })
 
   return {
-    name: "jsenv:hot_sse",
+    name: "jsenv:sse_server",
     appliesDuring: { dev: true },
     serve: (request, { urlGraph, rootDirectoryUrl }) => {
       if (request.ressource === "/__graph__") {

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -0,0 +1,27 @@
+import { jsenvPluginHmr } from "./jsenv_plugin_hmr.js"
+import { jsenvPluginDevSSEClient } from "./dev_sse/jsenv_plugin_dev_sse_client.js"
+import { jsenvPluginDevSSEServer } from "./dev_sse/jsenv_plugin_dev_sse_server.js"
+
+export const jsenvPluginAutoreload = ({
+  rootDirectoryUrl,
+  urlGraph,
+  scenario,
+  watchedFilePatterns,
+  cooldownBetweenFileEvents,
+}) => {
+  if (scenario === "build") {
+    return []
+  }
+  return [
+    jsenvPluginHmr(),
+    jsenvPluginDevSSEClient({
+      rootDirectoryUrl,
+    }),
+    jsenvPluginDevSSEServer({
+      rootDirectoryUrl,
+      urlGraph,
+      watchedFilePatterns,
+      cooldownBetweenFileEvents,
+    }),
+  ]
+}

package/src/plugins/autoreload/jsenv_plugin_hmr.js

@@ -0,0 +1,35 @@
+export const jsenvPluginHmr = () => {
+  return {
+    name: "jsenv:hmr",
+    appliesDuring: { dev: true },
+    normalizeUrl: (reference) => {
+      const urlObject = new URL(reference.url)
+      if (!urlObject.searchParams.has("hmr")) {
+        reference.data.hmr = false
+        return null
+      }
+      reference.data.hmr = true
+      // "hmr" search param goal is to mark url as enabling hmr:
+      // this goal is achieved when we reach this part of the code
+      // We get rid of this params so that urlGraph and other parts of the code
+      // recognize the url (it is not considered as a different url)
+      urlObject.searchParams.delete("hmr")
+      urlObject.searchParams.delete("v")
+      return urlObject.href
+    },
+    transformUrlSearchParams: (reference, context) => {
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+      if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
+        return null
+      }
+      const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+      if (!urlInfo.data.hmrTimestamp) {
+        return null
+      }
+      return {
+        hmr: "",
+        v: urlInfo.data.hmrTimestamp,
+      }
+    },
+  }
+}

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

@@ -0,0 +1,21 @@
+import { bundleWithParcel } from "@jsenv/utils/css_ast/parcel_css.js"
+
+export const bundleCss = async ({ cssUrlInfos, context }) => {
+  const bundledCssUrlInfos = {}
+  cssUrlInfos.forEach((cssUrlInfo) => {
+    const { code, map } = bundleWithParcel(cssUrlInfo, context)
+    const content = String(code)
+    const sourcemap = map
+    // here we need to replace css urls to ensure
+    // all urls targets the correct stuff
+    bundledCssUrlInfos[cssUrlInfo.url] = {
+      data: {
+        generatedBy: "parcel",
+      },
+      contentType: "text/css",
+      content,
+      sourcemap,
+    }
+  })
+  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
       })
@@ -131,24 +131,25 @@ const rollupPluginJsenv = ({
         const rollupFileInfo = rollupResult[fileName]
         // there is 3 types of file: "placeholder", "asset", "chunk"
         if (rollupFileInfo.type === "chunk") {
-          const { facadeModuleId } = rollupFileInfo
-          let url
-          if (facadeModuleId) {
-            url = fileUrlConverter.asFileUrl(facadeModuleId)
-          } else {
-            const { sources } = rollupFileInfo.map
-            const sourcePath = sources[sources.length - 1]
-            url = fileUrlConverter.asFileUrl(sourcePath)
-          }
           const jsModuleBundleUrlInfo = {
-            // buildRelativeUrl: rollupFileInfo.fileName,
             data: {
               generatedBy: "rollup",
+              bundleRelativeUrl: rollupFileInfo.fileName,
+              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,
           }
+          let url
+          if (rollupFileInfo.facadeModuleId) {
+            url = fileUrlConverter.asFileUrl(rollupFileInfo.facadeModuleId)
+          } else {
+            url = new URL(rollupFileInfo.fileName, buildDirectoryUrl).href
+          }
           jsModuleBundleUrlInfos[url] = jsModuleBundleUrlInfo
         }
       })
@@ -170,14 +171,23 @@ const rollupPluginJsenv = ({
           return `[name].js`
         },
         chunkFileNames: (chunkInfo) => {
-          // preserves relative path parts:
-          // the goal is to mantain 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
-          const { facadeModuleId } = chunkInfo
-          const fileUrl = fileUrlConverter.asFileUrl(facadeModuleId)
-          const relativePath = urlToRelativeUrl(fileUrl, rootDirectoryUrl)
-          return relativePath
+          const insideJs = willBeInsideJsDirectory({
+            chunkInfo,
+            fileUrlConverter,
+            jsModuleUrlInfos,
+          })
+          let nameFromUrlInfo
+          if (chunkInfo.facadeModuleId) {
+            const url = fileUrlConverter.asFileUrl(chunkInfo.facadeModuleId)
+            const urlInfo = jsModuleUrlInfos.find(
+              (jsModuleUrlInfo) => jsModuleUrlInfo.url === url,
+            )
+            if (urlInfo) {
+              nameFromUrlInfo = urlInfo.filename
+            }
+          }
+          const name = nameFromUrlInfo || `${chunkInfo.name}.js`
+          return insideJs ? `js/${name}` : `${name}`
         },
         // https://rollupjs.org/guide/en/#outputpaths
         // paths: (id) => {
@@ -195,7 +205,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
@@ -223,3 +233,34 @@ 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 &&
+    !jsModuleUrlInfo.data.isWebWorkerEntryPoint
+  ) {
+    // 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,
+    },
+  }
+}