@jsenv/core 38.3.11 → 38.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "38.3.11",
+  "version": "38.4.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -53,32 +53,33 @@
     "monorepo:upgrade_versions": "node ./scripts/monorepo/upgrade_external_versions.mjs",
     "monorepo:sync_packages_versions": "node ./scripts/monorepo/sync_packages_versions.mjs",
     "monorepo:publish": "node ./scripts/monorepo/publish_packages.mjs",
+    "monorepo:node_modules_clear": "npm @jsenv/snapshot clear **/node_modules/",
     "performances": "node --expose-gc ./scripts/performance/generate_performance_report.mjs --log --once",
     "prettier": "prettier --write .",
-    "playwright:install": "npx playwright install-deps && npx playwright install",
     "certificate:install": "node ./scripts/dev/install_certificate_authority.mjs",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@financial-times/polyfill-useragent-normaliser": "1.10.2",
-    "@jsenv/abort": "4.2.4",
-    "@jsenv/ast": "6.0.1",
-    "@jsenv/filesystem": "4.6.0",
+    "@jsenv/abort": "4.3.0",
+    "@jsenv/ast": "6.0.2",
+    "@jsenv/filesystem": "4.6.3",
     "@jsenv/importmap": "1.2.1",
+    "@jsenv/inspect": "2.0.0",
     "@jsenv/integrity": "0.0.1",
-    "@jsenv/js-module-fallback": "1.3.9",
-    "@jsenv/log": "3.4.3",
-    "@jsenv/node-esm-resolution": "1.0.1",
-    "@jsenv/plugin-bundling": "2.6.2",
+    "@jsenv/js-module-fallback": "1.3.10",
+    "@jsenv/log": "3.5.1",
+    "@jsenv/node-esm-resolution": "1.0.2",
+    "@jsenv/plugin-bundling": "2.6.3",
     "@jsenv/plugin-minification": "1.5.4",
-    "@jsenv/plugin-supervisor": "1.4.0",
-    "@jsenv/plugin-transpilation": "1.3.9",
-    "@jsenv/runtime-compat": "1.2.1",
-    "@jsenv/server": "15.1.8",
-    "@jsenv/sourcemap": "1.2.4",
-    "@jsenv/url-meta": "8.2.0",
-    "@jsenv/urls": "2.2.1",
-    "@jsenv/utils": "2.1.0"
+    "@jsenv/plugin-supervisor": "1.4.1",
+    "@jsenv/plugin-transpilation": "1.3.10",
+    "@jsenv/runtime-compat": "1.2.2",
+    "@jsenv/server": "15.2.0",
+    "@jsenv/sourcemap": "1.2.5",
+    "@jsenv/url-meta": "8.4.0",
+    "@jsenv/urls": "2.2.2",
+    "@jsenv/utils": "2.1.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.23.3",
@@ -94,12 +95,15 @@
     "@jsenv/snapshot": "./packages/independent/snapshot/",
     "@jsenv/test": "./packages/related/test/",
     "babel-plugin-transform-async-to-promises": "0.8.18",
-    "eslint": "8.54.0",
+    "eslint": "8.56.0",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react": "7.33.2",
-    "open": "9.1.0",
-    "playwright": "1.40.0",
-    "prettier": "3.1.0"
+    "open": "10.0.3",
+    "playwright": "1.40.1",
+    "@playwright/browser-chromium": "1.40.1",
+    "@playwright/browser-firefox": "1.40.1",
+    "@playwright/browser-webkit": "1.40.1",
+    "prettier": "3.1.1"
   }
 }

package/src/build/build.js

@@ -105,7 +105,7 @@ export const build = async ({
   nodeEsmResolution,
   magicExtensions,
   magicDirectoryIndex,
-  directoryReferenceAllowed,
+  directoryReferenceEffect,
   scenarioPlaceholders,
   injections,
   transpilation = {},
@@ -195,6 +195,17 @@ export const build = async ({
     }
   }
 
+  if (assetsDirectory && assetsDirectory[assetsDirectory.length - 1] !== "/") {
+    assetsDirectory = `${assetsDirectory}/`;
+  }
+  if (directoryToClean === undefined) {
+    if (assetsDirectory === undefined) {
+      directoryToClean = buildDirectoryUrl;
+    } else {
+      directoryToClean = new URL(assetsDirectory, buildDirectoryUrl).href;
+    }
+  }
+
   const operation = Abort.startOperation();
   operation.addAbortSignal(signal);
   if (handleSIGINT) {
@@ -208,17 +219,6 @@ export const build = async ({
     });
   }
 
-  if (assetsDirectory && assetsDirectory[assetsDirectory.length - 1] !== "/") {
-    assetsDirectory = `${assetsDirectory}/`;
-  }
-  if (directoryToClean === undefined) {
-    if (assetsDirectory === undefined) {
-      directoryToClean = buildDirectoryUrl;
-    } else {
-      directoryToClean = new URL(assetsDirectory, buildDirectoryUrl).href;
-    }
-  }
-
   const runBuild = async ({ signal, logLevel }) => {
     const logger = createLogger({ logLevel });
     const createBuildTask = (label) => {
@@ -291,7 +291,7 @@ build ${entryPointKeys.length} entry points`);
           nodeEsmResolution,
           magicExtensions,
           magicDirectoryIndex,
-          directoryReferenceAllowed,
+          directoryReferenceEffect,
           injections,
           transpilation: {
             babelHelpersAsImport: !explicitJsModuleConversion,
@@ -661,7 +661,15 @@ build ${entryPointKeys.length} entry points`);
   };
 
   if (!watch) {
-    return runBuild({ signal: operation.signal, logLevel });
+    try {
+      const result = await runBuild({
+        signal: operation.signal,
+        logLevel,
+      });
+      return result;
+    } finally {
+      await operation.end();
+    }
   }
 
   let resolveFirstBuild;

package/src/dev/start_dev_server.js

@@ -4,7 +4,6 @@ import {
   assertAndNormalizeDirectoryUrl,
   bufferToEtag,
 } from "@jsenv/filesystem";
-import { Abort, raceProcessTeardownEvents } from "@jsenv/abort";
 import { createLogger, createTaskLog } from "@jsenv/log";
 import {
   jsenvAccessControlAllowedHeaders,
@@ -123,25 +122,13 @@ export const startDevServer = async ({
   }
 
   const logger = createLogger({ logLevel });
-  const operation = Abort.startOperation();
-  operation.addAbortSignal(signal);
-  if (handleSIGINT) {
-    operation.addAbortSource((abort) => {
-      return raceProcessTeardownEvents(
-        {
-          SIGINT: true,
-        },
-        abort,
-      );
-    });
-  }
   const startDevServerTask = createTaskLog("start dev server", {
     disabled: !logger.levels.info,
   });
 
-  const serverStopCallbacks = [];
+  const serverStopCallbackSet = new Set();
   const serverEventsDispatcher = createServerEventsDispatcher();
-  serverStopCallbacks.push(() => {
+  serverStopCallbackSet.add(() => {
     serverEventsDispatcher.destroy();
   });
   const kitchenCache = new Map();
@@ -216,7 +203,7 @@ export const startDevServer = async ({
         cooldownBetweenFileEvents: clientAutoreload.cooldownBetweenFileEvents,
       },
     );
-    serverStopCallbacks.push(stopWatchingSourceFiles);
+    serverStopCallbackSet.add(stopWatchingSourceFiles);
 
     const getOrCreateKitchen = (request) => {
       const { runtimeName, runtimeVersion } = parseUserAgentHeader(
@@ -341,7 +328,7 @@ export const startDevServer = async ({
         },
       );
 
-      serverStopCallbacks.push(() => {
+      serverStopCallbackSet.add(() => {
         kitchen.pluginController.callHooks("destroy", kitchen.context);
       });
       server_events: {
@@ -505,7 +492,7 @@ export const startDevServer = async ({
             if (urlInfo.content !== undefined) {
               kitchen.context.logger.error(`Error while handling ${request.url}:
 ${originalError.reasonCode || originalError.code}
-${e.traceMessage}`);
+${e.trace?.message}`);
               return {
                 url: reference.url,
                 status: 200,
@@ -638,10 +625,10 @@ ${e.traceMessage}`);
   });
   server.stoppedPromise.then((reason) => {
     onStop();
-    serverStopCallbacks.forEach((serverStopCallback) => {
+    for (const serverStopCallback of serverStopCallbackSet) {
       serverStopCallback(reason);
-    });
-    serverStopCallbacks.length = 0;
+    }
+    serverStopCallbackSet.clear();
   });
   startDevServerTask.done();
   if (hostname) {

package/src/kitchen/errors.js

@@ -1,6 +1,7 @@
 import { pathToFileURL } from "node:url";
 import { createDetailedMessage } from "@jsenv/log";
 import { stringifyUrlSite } from "@jsenv/urls";
+import { inspectFileContent } from "@jsenv/inspect";
 
 export const createResolveUrlError = ({
   pluginController,
@@ -68,15 +69,9 @@ export const createFetchUrlContentError = ({
     fetchError.reason = reason;
     fetchError.url = urlInfo.url;
     if (code === "PARSE_ERROR") {
-      fetchError.traceUrl = error.traceUrl;
-      fetchError.traceLine = error.traceLine;
-      fetchError.traceColumn = error.traceColumn;
-      fetchError.traceMessage = error.traceMessage;
+      fetchError.trace = error.trace;
     } else {
-      fetchError.traceUrl = urlInfo.firstReference.trace.url;
-      fetchError.traceLine = urlInfo.firstReference.trace.line;
-      fetchError.traceColumn = urlInfo.firstReference.trace.column;
-      fetchError.traceMessage = urlInfo.firstReference.trace.message;
+      fetchError.trace = urlInfo.firstReference.trace;
     }
     fetchError.asResponse = error.asResponse;
     return fetchError;
@@ -111,7 +106,7 @@ export const createFetchUrlContentError = ({
       "code": "PARSE_ERROR",
       "reason": error.reasonCode,
       ...(error.cause ? { "parse error message": error.cause.message } : {}),
-      "parse error trace": error.traceMessage,
+      "parse error trace": error.trace?.message,
     });
   }
   return createFailedToFetchUrlContentError({
@@ -150,33 +145,43 @@ export const createTransformUrlContentError = ({
     transformError.reason = reason;
     transformError.stack = error.stack;
     transformError.url = urlInfo.url;
-    transformError.traceUrl = urlInfo.firstReference.trace.url;
-    transformError.traceLine = urlInfo.firstReference.trace.line;
-    transformError.traceColumn = urlInfo.firstReference.trace.column;
-    transformError.traceMessage = urlInfo.firstReference.trace.message;
+    transformError.trace = urlInfo.firstReference.trace;
     if (code === "PARSE_ERROR") {
       transformError.reason = `parse error on ${urlInfo.type}`;
       transformError.cause = error;
       if (urlInfo.isInline) {
-        transformError.traceLine =
+        transformError.trace.line =
           urlInfo.firstReference.trace.line + error.line - 1;
-        transformError.traceColumn =
+        transformError.trace.column =
           urlInfo.firstReference.trace.column + error.column;
-        transformError.traceMessage = stringifyUrlSite({
+        transformError.trace.codeFrame = inspectFileContent({
+          line: transformError.trace.line,
+          column: transformError.trace.column,
+          content: urlInfo.inlineUrlSite.content,
+        });
+        transformError.trace.message = stringifyUrlSite({
           url: urlInfo.inlineUrlSite.url,
-          line: transformError.traceLine,
-          column: transformError.traceColumn,
+          line: transformError.trace.line,
+          column: transformError.trace.column,
           content: urlInfo.inlineUrlSite.content,
         });
       } else {
-        transformError.traceLine = error.line;
-        transformError.traceColumn = error.column;
-        transformError.traceMessage = stringifyUrlSite({
+        transformError.trace = {
           url: urlInfo.url,
-          line: error.line - 1,
+          line: error.line,
           column: error.column,
-          content: urlInfo.content,
-        });
+          codeFrame: inspectFileContent({
+            line: error.line - 1,
+            column: error.column,
+            content: urlInfo.content,
+          }),
+          message: stringifyUrlSite({
+            url: urlInfo.url,
+            line: error.line - 1,
+            column: error.column,
+            content: urlInfo.content,
+          }),
+        };
       }
     }
     transformError.asResponse = error.asResponse;

package/src/kitchen/kitchen.js

@@ -487,7 +487,7 @@ ${ANSI.color(normalizedReturnValue, ANSI.YELLOW)}
         ) {
           const errorInfo =
             e.code === "PARSE_ERROR" && e.cause
-              ? `${e.cause.reasonCode}\n${e.traceMessage}`
+              ? `${e.cause.reasonCode}\n${e.trace?.message}`
               : e.stack;
           // When something like <style> or <script> contains syntax error
           // the HTML in itself it still valid

package/src/kitchen/url_graph/references.js

@@ -5,6 +5,7 @@ import {
   urlToExtension,
 } from "@jsenv/urls";
 import { generateUrlForInlineContent } from "@jsenv/ast";
+import { inspectFileContent } from "@jsenv/inspect";
 
 import { isWebWorkerEntryPointReference } from "../web_workers.js";
 import { prependContent } from "../prepend_content.js";
@@ -619,6 +620,13 @@ const applyDependencyRemovalEffects = (reference) => {
 
 const traceFromUrlSite = (urlSite) => {
   return {
+    codeFrame: urlSite.content
+      ? inspectFileContent({
+          content: urlSite.content,
+          line: urlSite.line,
+          column: urlSite.column,
+        })
+      : "",
     message: stringifyUrlSite(urlSite),
     url: urlSite.url,
     line: urlSite.line,

package/src/kitchen/url_graph/url_graph_report.js

@@ -1,4 +1,6 @@
-import { ANSI, byteAsFileSize, distributePercentages } from "@jsenv/log";
+import { inspectFileSize, distributePercentages } from "@jsenv/inspect";
+import { ANSI } from "@jsenv/log";
+
 import { GRAPH_VISITOR } from "./url_graph_visitor.js";
 
 export const createUrlGraphSummary = (
@@ -166,7 +168,7 @@ const determineCategory = (urlInfo) => {
 const createRepartitionMessage = ({ html, css, js, json, other, total }) => {
   const addPart = (name, { count, size, percentage }) => {
     parts.push(
-      `${ANSI.color(`${name}:`, ANSI.GREY)} ${count} (${byteAsFileSize(
+      `${ANSI.color(`${name}:`, ANSI.GREY)} ${count} (${inspectFileSize(
         size,
       )} / ${percentage} %)`,
     );
@@ -177,7 +179,7 @@ const createRepartitionMessage = ({ html, css, js, json, other, total }) => {
   //   parts.push(
   //     `${ANSI.color(`sourcemaps:`, ANSI.GREY)} ${
   //       sourcemaps.count
-  //     } (${byteAsFileSize(sourcemaps.size)})`,
+  //     } (${inspectFileSize(sourcemaps.size)})`,
   //   )
   // }
   if (html.count) {

package/src/plugins/plugins.js

@@ -29,7 +29,7 @@ export const getCorePlugins = ({
   nodeEsmResolution = {},
   magicExtensions,
   magicDirectoryIndex,
-  directoryReferenceAllowed,
+  directoryReferenceEffect,
   supervisor,
   injections,
   transpilation = true,
@@ -64,7 +64,7 @@ export const getCorePlugins = ({
        - All the rest uses web standard url resolution
      */
     jsenvPluginProtocolFile({
-      directoryReferenceAllowed,
+      directoryReferenceEffect,
       magicExtensions,
       magicDirectoryIndex,
     }),

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -17,7 +17,7 @@ export const jsenvPluginProtocolFile = ({
   magicExtensions = ["inherit", ".js"],
   magicDirectoryIndex = true,
   preserveSymlinks = false,
-  directoryReferenceAllowed = false,
+  directoryReferenceEffect = "error",
 }) => {
   return [
     {
@@ -98,17 +98,27 @@ export const jsenvPluginProtocolFile = ({
         }
         reference.leadsToADirectory = stat && stat.isDirectory();
         if (reference.leadsToADirectory) {
-          const directoryAllowed =
+          let actionForDirectory;
+          if (
             reference.type === "http_request" ||
-            reference.type === "filesystem" ||
-            (typeof directoryReferenceAllowed === "function" &&
-              directoryReferenceAllowed(reference)) ||
-            directoryReferenceAllowed;
-          if (!directoryAllowed) {
+            reference.type === "filesystem"
+          ) {
+            actionForDirectory = "copy";
+          } else if (typeof directoryReferenceEffect === "string") {
+            actionForDirectory = directoryReferenceEffect;
+          } else if (typeof directoryReferenceEffect === "function") {
+            actionForDirectory = directoryReferenceEffect(reference);
+          } else {
+            actionForDirectory = "error";
+          }
+          if (actionForDirectory === "error") {
             const error = new Error("Reference leads to a directory");
             error.code = "DIRECTORY_REFERENCE_NOT_ALLOWED";
             throw error;
           }
+          if (actionForDirectory === "preserve") {
+            return `ignore:${url}${search}${hash}`;
+          }
         }
         const urlRaw = preserveSymlinks ? url : resolveSymlink(url);
         const resolvedUrl = `${urlRaw}${search}${hash}`;

package/src/plugins/reference_analysis/js/jsenv_plugin_js_reference_analysis.js

@@ -11,18 +11,20 @@ export const jsenvPluginJsReferenceAnalysis = ({ inlineContent }) => {
       name: "jsenv:js_reference_analysis",
       appliesDuring: "*",
       transformUrlContent: {
-        js_classic: (urlInfo) =>
-          parseAndTransformJsReferences(urlInfo, {
+        js_classic: (urlInfo) => {
+          return parseAndTransformJsReferences(urlInfo, {
             inlineContent,
             canUseTemplateLiterals:
               urlInfo.context.isSupportedOnCurrentClients("template_literals"),
-          }),
-        js_module: (urlInfo) =>
-          parseAndTransformJsReferences(urlInfo, {
+          });
+        },
+        js_module: (urlInfo) => {
+          return parseAndTransformJsReferences(urlInfo, {
             inlineContent,
             canUseTemplateLiterals:
               urlInfo.context.isSupportedOnCurrentClients("template_literals"),
-          }),
+          });
+        },
       },
     },
   ];
@@ -151,13 +153,9 @@ const parseAndTransformJsReferences = async (
   if (parallelActions.length > 0) {
     await Promise.all(parallelActions.map((action) => action()));
   }
-  if (sequentialActions.length > 0) {
-    await sequentialActions.reduce(async (previous, action) => {
-      await previous;
-      await action();
-    }, Promise.resolve());
+  for (const sequentialAction of sequentialActions) {
+    await sequentialAction();
   }
-
   const { content, sourcemap } = magicSource.toContentAndSourcemap();
   return { content, sourcemap };
 };

package/src/plugins/ribbon/client/ribbon.js

@@ -1,7 +1,7 @@
 export const injectRibbon = ({ text }) => {
   const css = /* css */ `
       #jsenv_ribbon_container {
-        position: absolute;
+        position: fixed;
         z-index: 1001;
         top: 0;
         right: 0;