@jsenv/core 27.0.0-alpha.50 → 27.0.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "27.0.0-alpha.50",
+  "version": "27.0.0-alpha.53",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -68,7 +68,7 @@
     "@jsenv/node-esm-resolution": "0.0.6",
     "@jsenv/server": "12.6.2",
     "@jsenv/uneval": "1.6.0",
-    "@jsenv/utils": "1.7.1",
+    "@jsenv/utils": "1.7.2",
     "construct-style-sheets-polyfill": "3.1.0",
     "cssnano": "5.1.7",
     "cssnano-preset-default": "5.2.7",

package/src/build/build.js

@@ -29,6 +29,7 @@ import {
   parseHtmlString,
   stringifyHtmlAst,
 } from "@jsenv/utils/html_ast/html_ast.js"
+import { sortByDependencies } from "@jsenv/utils/graph/sort_by_dependencies.js"
 
 import { jsenvPluginUrlAnalysis } from "../plugins/url_analysis/jsenv_plugin_url_analysis.js"
 import { jsenvPluginInline } from "../plugins/inline/jsenv_plugin_inline.js"
@@ -38,7 +39,6 @@ import { getCorePlugins } from "../plugins/plugins.js"
 import { createKitchen } from "../omega/kitchen.js"
 import { loadUrlGraph } from "../omega/url_graph/url_graph_load.js"
 import { createUrlGraphSummary } from "../omega/url_graph/url_graph_report.js"
-import { sortUrlGraphByDependencies } from "../omega/url_graph/url_graph_sort.js"
 import { isWebWorkerEntryPointReference } from "../omega/web_workers.js"
 
 import { GRAPH } from "./graph_utils.js"
@@ -618,6 +618,7 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
       urlGraph: finalGraph,
       kitchen: finalGraphKitchen,
       outDirectoryUrl: new URL(".jsenv/postbuild/", rootDirectoryUrl),
+      skipRessourceHint: true,
       startLoading: (cookEntryFile) => {
         entryUrls.forEach((entryUrl) => {
           const [, postBuildEntryUrlInfo] = cookEntryFile({
@@ -698,7 +699,7 @@ ${Object.keys(finalGraph.urlInfos).join("\n")}`,
       urlInfo.dependents.size === 0
     ) {
       cleanupActions.push(() => {
-        delete finalGraph.urlInfos[urlInfo.url]
+        finalGraph.deleteUrlInfo(urlInfo.url)
       })
     }
   })
@@ -783,7 +784,7 @@ const applyUrlVersioning = async ({
 }) => {
   const versioningTask = createTaskLog(logger, "inject version in urls")
   try {
-    const urlsSorted = sortUrlGraphByDependencies(finalGraph)
+    const urlsSorted = sortByDependencies(finalGraph.urlInfos)
     urlsSorted.forEach((url) => {
       if (url.startsWith("data:")) {
         return
@@ -969,6 +970,7 @@ const applyUrlVersioning = async ({
     await loadUrlGraph({
       urlGraph: finalGraph,
       kitchen: versioningKitchen,
+      skipRessourceHint: true,
       startLoading: (cookEntryFile) => {
         postBuildEntryUrls.forEach((postBuildEntryUrl) => {
           cookEntryFile({

package/src/build/build_urls_generator.js

@@ -56,8 +56,8 @@ export const createBuilUrlsGenerator = ({ buildDirectoryUrl }) => {
 // To keep in mind: if you have "user.jsx" and "user.js" AND both file are not bundled
 // you end up with "dist/js/user.js" and "dist/js/user2.js"
 const extensionMappings = {
-  ".ts": ".js",
   ".jsx": ".js",
+  ".ts": ".js",
   ".tsx": ".js",
 }
 

package/src/execute/runtimes/browsers/from_playwright.js

@@ -262,6 +262,9 @@ export const createRuntimeFromPlaywright = ({
                 cb({ reason: "page closed" })
               })
               cleanupCallbackList.add(closePage)
+              cleanupCallbackList.add(() => {
+                browser.removeListener("disconnected", disconnectedCallback)
+              })
               const notifyPrevious = stopAfterAllSignal.notify
               stopAfterAllSignal.notify = async () => {
                 await notifyPrevious()

package/src/omega/kitchen.js

@@ -164,6 +164,12 @@ export const createKitchen = ({
           if (returnValue === reference.url) {
             return
           }
+          const normalizedReturnValue = returnValue.startsWith("data:")
+            ? returnValue
+            : returnValue.replace(/[=](?=&|$)/g, "")
+          if (normalizedReturnValue === reference.url) {
+            return
+          }
           const previousReference = { ...reference }
           reference.url = returnValue
           mutateReference(previousReference, reference)

package/src/omega/url_graph/url_graph_load.js

@@ -6,6 +6,7 @@ export const loadUrlGraph = async ({
   startLoading,
   outDirectoryUrl,
   clientRuntimeCompat,
+  skipRessourceHint = false,
 }) => {
   if (outDirectoryUrl) {
     await ensureEmptyDirectory(outDirectoryUrl)
@@ -33,6 +34,9 @@ export const loadUrlGraph = async ({
     })
     const { references } = urlInfo
     references.forEach((reference) => {
+      if (skipRessourceHint && reference.isRessourceHint) {
+        return
+      }
       // 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(

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

@@ -1,21 +1,140 @@
-import { bundleWithParcel } from "@jsenv/utils/css_ast/parcel_css.js"
+/*
+ * Each @import found in css is replaced by the file content
+ * - There is no need to worry about urls (such as background-image: url())
+ *   because they are absolute (file://*) and will be made relative again by jsenv build
+ * - The sourcemap are not generated but ideally they should be
+ *   It can be quite challenging, see "bundle_sourcemap.js"
+ */
 
+import { applyPostCss } from "@jsenv/utils/css_ast/apply_post_css.js"
+import { postCssPluginUrlVisitor } from "@jsenv/utils/css_ast/postcss_plugin_url_visitor.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { sortByDependencies } from "@jsenv/utils/graph/sort_by_dependencies.js"
+
+// Do not use until https://github.com/parcel-bundler/parcel-css/issues/181
 export const bundleCss = async ({ cssUrlInfos, context }) => {
   const bundledCssUrlInfos = {}
+  const cssBundleInfos = await performCssBundling({
+    cssEntryUrlInfos: cssUrlInfos,
+    context,
+  })
   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,
+      content: cssBundleInfos[cssUrlInfo.url].bundleContent,
     }
   })
   return bundledCssUrlInfos
 }
+
+const performCssBundling = async ({ cssEntryUrlInfos, context }) => {
+  const cssBundleInfos = await loadCssUrls({
+    cssEntryUrlInfos,
+    context,
+  })
+  const cssUrlsSorted = sortByDependencies(cssBundleInfos)
+  cssUrlsSorted.forEach((cssUrl) => {
+    const cssBundleInfo = cssBundleInfos[cssUrl]
+    const magicSource = createMagicSource(cssBundleInfo.content)
+    cssBundleInfo.cssUrls.forEach((cssUrl) => {
+      if (cssUrl.type === "@import") {
+        magicSource.replace({
+          start: cssUrl.atRuleStart,
+          end: cssUrl.atRuleEnd,
+          replacement: cssBundleInfos[cssUrl.url].bundleContent,
+        })
+      }
+    })
+    const { content } = magicSource.toContentAndSourcemap()
+    cssBundleInfo.bundleContent = content.trim()
+  })
+  return cssBundleInfos
+}
+
+const parseCssUrls = async ({ css, url }) => {
+  const cssUrls = []
+  await applyPostCss({
+    sourcemaps: false,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({
+          type,
+          specifier,
+          specifierStart,
+          specifierEnd,
+          atRuleStart,
+          atRuleEnd,
+        }) => {
+          cssUrls.push({
+            type,
+            url: new URL(specifier, url).href,
+            specifierStart,
+            specifierEnd,
+            atRuleStart,
+            atRuleEnd,
+          })
+        },
+      }),
+    ],
+    url,
+    content: css,
+  })
+
+  return cssUrls
+}
+
+const loadCssUrls = async ({ cssEntryUrlInfos, context }) => {
+  const cssBundleInfos = {}
+  const promises = []
+  const promiseMap = new Map()
+
+  const load = (cssUrlInfo) => {
+    const promiseFromData = promiseMap.get(cssUrlInfo.url)
+    if (promiseFromData) return promiseFromData
+    const promise = _load(cssUrlInfo)
+    promises.push(promise)
+    promiseMap.set(cssUrlInfo.url, promise)
+    return promise
+  }
+
+  const _load = async (cssUrlInfo) => {
+    const cssUrls = await parseCssUrls({
+      css: cssUrlInfo.content,
+      url: cssUrlInfo.url,
+    })
+    const cssBundleInfo = {
+      content: cssUrlInfo.content,
+      cssUrls,
+      dependencies: [],
+    }
+    cssBundleInfos[cssUrlInfo.url] = cssBundleInfo
+    cssUrls.forEach((cssUrl) => {
+      if (cssUrl.type === "@import") {
+        cssBundleInfo.dependencies.push(cssUrl.url)
+        const importedCssUrlInfo = context.urlGraph.getUrlInfo(cssUrl.url)
+        load(importedCssUrlInfo)
+      }
+    })
+  }
+
+  cssEntryUrlInfos.forEach((cssEntryUrlInfo) => {
+    load(cssEntryUrlInfo)
+  })
+
+  const waitAll = async () => {
+    if (promises.length === 0) {
+      return
+    }
+    const promisesToWait = promises.slice()
+    promises.length = 0
+    await Promise.all(promisesToWait)
+    await waitAll()
+  }
+  await waitAll()
+  promiseMap.clear()
+
+  return cssBundleInfos
+}

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -147,9 +147,6 @@ export const jsenvPluginHtmlSupervisor = ({
             return
           }
         })
-        if (scriptsToSupervise.length === 0) {
-          return null
-        }
         const [htmlSupervisorInstallerFileReference] = referenceUtils.inject({
           type: "js_import_export",
           expectedType: "js_module",

package/src/plugins/inline/jsenv_plugin_js_inline_content.js

@@ -274,8 +274,9 @@ const getOriginalName = (path, name) => {
     return getOriginalName(path, importedName)
   }
   if (binding.path.type === "VariableDeclarator") {
-    if (binding.path.node.init.type === "Identifier") {
-      const previousName = binding.path.node.init.name
+    const { init } = binding.path.node
+    if (init && init.type === "Identifier") {
+      const previousName = init.name
       return getOriginalName(path, previousName)
     }
   }

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

@@ -119,7 +119,15 @@ const asJsClassic = ({ systemJsInjection, systemJsClientFileUrl }) => {
 
 const generateJsClassicFilename = (url) => {
   const filename = urlToFilename(url)
-  const [basename, extension] = splitFileExtension(filename)
+  let [basename, extension] = splitFileExtension(filename)
+  const { searchParams } = new URL(url)
+  if (
+    searchParams.has("as_json_module") ||
+    searchParams.has("as_css_module") ||
+    searchParams.has("as_text_module")
+  ) {
+    extension = ".js"
+  }
   return `${basename}.es5${extension}`
 }
 

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

@@ -27,10 +27,10 @@ export const jsenvPluginImportAssertions = () => {
         end: reference.assertNode.end,
       })
     }
-
-    return injectQueryParams(reference.url, {
+    const newUrl = injectQueryParams(reference.url, {
       [searchParam]: "",
     })
+    return newUrl
   }
 
   const importAssertions = {

package/src/plugins/url_analysis/css/css_urls.js

@@ -13,19 +13,26 @@ export const parseAndTransformCssUrls = async (urlInfo, context) => {
     sourcemaps: false,
     plugins: [
       postCssPluginUrlVisitor({
-        urlVisitor: ({ type, specifier, line, column, start, end }) => {
+        urlVisitor: ({
+          type,
+          specifier,
+          specifierStart,
+          specifierEnd,
+          specifierLine,
+          specifierColumn,
+        }) => {
           const [reference] = context.referenceUtils.found({
             type: `css_${type}`,
             specifier,
-            specifierStart: start,
-            specifierEnd: end,
-            specifierLine: line,
-            specifierColumn: column,
+            specifierStart,
+            specifierEnd,
+            specifierLine,
+            specifierColumn,
           })
           actions.push(async () => {
             magicSource.replace({
-              start,
-              end,
+              start: specifierStart,
+              end: specifierEnd,
               replacement: await context.referenceUtils.readGeneratedSpecifier(
                 reference,
               ),

package/src/test/logs_file_execution.js

@@ -60,7 +60,7 @@ export const formatExecutionResult = (
       file: fileRelativeUrl,
       runtime: `${runtimeName}/${runtimeVersion}`,
       duration: msAsDuration(duration),
-      ...(error ? { error: error.stack } : {}),
+      ...(error ? { error: error.stack || error.message || error } : {}),
     },
     consoleOutput,
   })

package/src/omega/url_graph/url_graph_sort.js

@@ -1,29 +0,0 @@
-export const sortUrlGraphByDependencies = (urlGraph) => {
-  const { urlInfos } = urlGraph
-
-  const visited = []
-  const sorted = []
-  const circular = []
-  const visit = (url) => {
-    const isSorted = sorted.includes(url)
-    if (isSorted) {
-      return
-    }
-    const isVisited = visited.includes(url)
-    if (isVisited) {
-      circular.push(url)
-      sorted.push(url)
-    } else {
-      visited.push(url)
-      urlInfos[url].dependencies.forEach((dependencyUrl) => {
-        visit(dependencyUrl, url)
-      })
-      sorted.push(url)
-    }
-  }
-  Object.keys(urlInfos).forEach((url) => {
-    visit(url)
-  })
-  sorted.circular = circular
-  return sorted
-}