@jsenv/core 41.4.1 → 41.4.3

package/dist/build/build.js

@@ -4,7 +4,7 @@ import { jsenvPluginMinification } from "@jsenv/plugin-minification";
 import { jsenvPluginTranspilation, jsenvPluginJsModuleFallback } from "@jsenv/plugin-transpilation";
 import { memoryUsage } from "node:process";
 import { readFileSync, existsSync, readdirSync, lstatSync, realpathSync } from "node:fs";
-import { lookupPackageDirectory, registerDirectoryLifecycle, urlToRelativeUrl, createDetailedMessage, stringifyUrlSite, generateContentFrame, validateResponseIntegrity, urlIsOrIsInsideOf, ensureWindowsDriveLetter, setUrlFilename, moveUrl, getCallerPosition, urlToBasename, urlToExtension, asSpecifierWithoutSearch, asUrlWithoutSearch, injectQueryParamsIntoSpecifier, bufferToEtag, isFileSystemPath, urlToPathname, setUrlBasename, urlToFileSystemPath, writeFileSync, createLogger, URL_META, applyNodeEsmResolution, normalizeUrl, ANSI, RUNTIME_COMPAT, CONTENT_TYPE, readPackageAtOrNull, urlToFilename, DATA_URL, errorToHTML, normalizeImportMap, composeTwoImportMaps, resolveImport, JS_QUOTES, readCustomConditionsFromProcessArgs, readEntryStatSync, ensurePathnameTrailingSlash, compareFileUrls, applyFileSystemMagicResolution, getExtensionsToTry, setUrlExtension, isSpecifierForNodeBuiltin, injectQueryParams, renderDetails, humanizeDuration, humanizeFileSize, renderTable, renderBigSection, distributePercentages, humanizeMemory, comparePathnames, UNICODE, escapeRegexpSpecialChars, injectQueryParamIntoSpecifierWithoutEncoding, renderUrlOrRelativeUrlFilename, assertAndNormalizeDirectoryUrl, Abort, raceProcessTeardownEvents, startMonitoringCpuUsage, startMonitoringMemoryUsage, inferRuntimeCompatFromClosestPackage, browserDefaultRuntimeCompat, nodeDefaultRuntimeCompat, clearDirectorySync, createTaskLog, createLookupPackageDirectory, ensureEmptyDirectory, updateJsonFileSync, createDynamicLog } from "./jsenv_core_packages.js";
+import { lookupPackageDirectory, registerDirectoryLifecycle, urlToRelativeUrl, createDetailedMessage, stringifyUrlSite, generateContentFrame, validateResponseIntegrity, urlIsOrIsInsideOf, ensureWindowsDriveLetter, setUrlFilename, moveUrl, getCallerPosition, urlToBasename, urlToExtension, asSpecifierWithoutSearch, asUrlWithoutSearch, injectQueryParamsIntoSpecifier, bufferToEtag, isFileSystemPath, urlToPathname, setUrlBasename, urlToFileSystemPath, writeFileSync, createLogger, URL_META, applyNodeEsmResolution, normalizeUrl, ANSI, RUNTIME_COMPAT, CONTENT_TYPE, readPackageAtOrNull, urlToFilename, DATA_URL, errorToHTML, normalizeImportMap, composeTwoImportMaps, resolveImport, JS_QUOTES, readCustomConditionsFromProcessArgs, collectFiles, readEntryStatSync, ensurePathnameTrailingSlash, compareFileUrls, applyFileSystemMagicResolution, getExtensionsToTry, setUrlExtension, isSpecifierForNodeBuiltin, injectQueryParams, renderDetails, humanizeDuration, humanizeFileSize, renderTable, renderBigSection, distributePercentages, humanizeMemory, comparePathnames, UNICODE, escapeRegexpSpecialChars, injectQueryParamIntoSpecifierWithoutEncoding, renderUrlOrRelativeUrlFilename, assertAndNormalizeDirectoryUrl, Abort, raceProcessTeardownEvents, startMonitoringCpuUsage, startMonitoringMemoryUsage, inferRuntimeCompatFromClosestPackage, browserDefaultRuntimeCompat, nodeDefaultRuntimeCompat, clearDirectorySync, createTaskLog, createLookupPackageDirectory, ensureEmptyDirectory, updateJsonFileSync, createDynamicLog } from "./jsenv_core_packages.js";
 import { pathToFileURL } from "node:url";
 import { generateSourcemapFileUrl, createMagicSource, composeTwoSourcemaps, generateSourcemapDataUrl, SOURCEMAP } from "@jsenv/sourcemap";
 import { createPluginsController } from "@jsenv/server/src/plugins_controller.js";
@@ -2286,6 +2286,17 @@ const createUrlInfo = (url, context) => {
         if (referenceFromOther.gotInlined()) {
           const urlInfoReferencingThisOne = referenceFromOther.ownerUrlInfo;
           considerModified(urlInfoReferencingThisOne);
+          continue;
+        }
+        // A reference with a versioning effect writes this url's VERSION into
+        // its owner's cooked content (the ?v= param, read from package.json):
+        // this url modified means that content now embeds a stale version, so
+        // the owner is as modified as an owner of inlined content. Without
+        // this, the owner's cooked content survives the modification and a
+        // validity check that "heals" this url (see isValid re-reading files
+        // from disk) leaves the graph claiming the owner is fresh.
+        if (referenceFromOther.hasVersioningEffect) {
+          considerModified(referenceFromOther.ownerUrlInfo);
         }
       }
       for (const searchParamVariant of urlInfo.searchParamVariantSet) {
@@ -3717,14 +3728,23 @@ ${ANSI.color(normalizedReturnValue, ANSI.YELLOW)}
     if (!urlInfo.url.startsWith("ignore:")) {
       try {
         await urlInfo.dependencies.startCollecting(async () => {
+          // Each phase timed into urlInfo.timing: the dev server turns it into
+          // a server-timing response header, so devtools show where the time
+          // to cook a file goes (fetch vs transform vs finalize).
+          const timePhase = async (name, phase) => {
+            const start = performance.now();
+            await phase();
+            urlInfo.timing[name] = performance.now() - start;
+          };
+
           // "fetchUrlContent" hook
-          await urlInfo.fetchContent();
+          await timePhase("fetch", () => urlInfo.fetchContent());
 
           // "transform" hook
-          await urlInfo.transformContent();
+          await timePhase("transform", () => urlInfo.transformContent());
 
           // "finalize" hook
-          await urlInfo.finalizeContent();
+          await timePhase("finalize", () => urlInfo.finalizeContent());
         });
       } catch (e) {
         urlInfo.error = e;
@@ -6302,6 +6322,11 @@ const addRelationshipWithPackageJson = ({
       String(packageJsonContentAsBuffer),
     );
   }
+  // Checked on disk at every validation rather than trusted to the watcher:
+  // what this file decides (the package version, hence the ?v= importers
+  // embed) ends up in the browser's immutable cache, so a request racing the
+  // watcher must never be answered from a stale package.json.
+  packageJsonReference.urlInfo.revalidateOnFileSystem = true;
 };
 
 const createResolverWithFallbackOnError = (mainResolver, fallbackResolver) => {
@@ -6527,6 +6552,127 @@ const jsenvPluginVersionSearchParam = () => {
   };
 };
 
+/*
+ * The .html files under the served directory, as urls one can navigate to.
+ *
+ * Lives here, next to the plugin that owns the filesystem, because more than
+ * one feature wants the same list: the client dashboard sends a browser to one
+ * of them, the page switcher (cmd+K) opens one in the current tab. Whoever asks
+ * gets the same answer.
+ *
+ * Each page comes with what kind of page it is, read from where it sits and
+ * what it is called — the two conventions this repo already follows:
+ * - "experiment": something tried out, under a lab/ directory or named
+ *   *_experiment.html;
+ * - "demo": something shown, under a demos/ directory or named *_demo.html;
+ * - "page": everything else.
+ *
+ * Scanned on demand rather than watched: the list is asked for when a human
+ * opens a picker, which is rare and never on a hot path, and a short cache is
+ * enough to keep a burst of asks from walking the tree twice.
+ */
+
+
+const SCAN_TTL_MS = 5000;
+
+// What to walk and what to skip, in the shape @jsenv/url-meta reads: the last
+// matching pattern wins, so the exclusions come after the "every .html" rule.
+// Dependencies, build output and jsenv's own caches hold no page worth going to.
+const HTML_PAGE_ASSOCIATIONS = {
+  page: {
+    "**/*.html": true,
+    "**/.*/": false,
+    "**/node_modules/": false,
+    "**/dist/": false,
+    "**/build/": false,
+    "**/coverage/": false,
+    "**/git_ignored/": false,
+    "**/old/": false,
+  },
+  experiment: {
+    "**/lab/**/*.html": true,
+    "**/*_experiment.html": true,
+  },
+  demo: {
+    "**/demos/**/*.html": true,
+    "**/*_demo.html": true,
+  },
+};
+
+// An experiment inside a demos/ directory is an experiment: the more specific
+// of the two wins, and "shown" is the weaker claim.
+const readKind = (meta) => {
+  if (meta.experiment) {
+    return "experiment";
+  }
+  if (meta.demo) {
+    return "demo";
+  }
+  return "page";
+};
+
+// Which package a page belongs to: the nearest directory above it holding a
+// package.json, said as a url so whoever draws a tree can mark that very node.
+// Not the root itself — everything is under it, and "the whole repo" is not a
+// package one distinguishes from another. Memoized per directory: a scan asks
+// the same question once per file and there are hundreds of them.
+const createPackageDirectoryFinder = (rootDirectoryUrl) => {
+  const cache = new Map();
+  const find = (directoryUrl) => {
+    if (cache.has(directoryUrl)) {
+      return cache.get(directoryUrl);
+    }
+    let result = null;
+    if (directoryUrl.length > String(rootDirectoryUrl).length) {
+      result = existsSync(new URL("./package.json", directoryUrl))
+        ? directoryUrl
+        : find(new URL("../", directoryUrl).href);
+    }
+    cache.set(directoryUrl, result);
+    return result;
+  };
+  return find;
+};
+
+const createHtmlPageLister = ({ rootDirectoryUrl }) => {
+  let cache = null;
+  let cachedAt = 0;
+
+  return async () => {
+    if (!rootDirectoryUrl) {
+      return [];
+    }
+    const now = Date.now();
+    if (cache && now - cachedAt < SCAN_TTL_MS) {
+      return cache;
+    }
+    const fileResultArray = await collectFiles({
+      directoryUrl: rootDirectoryUrl,
+      associations: HTML_PAGE_ASSOCIATIONS,
+      predicate: (meta) => Boolean(meta.page),
+    });
+    const findPackageDirectory = createPackageDirectoryFinder(rootDirectoryUrl);
+    const pages = fileResultArray.map(({ relativeUrl, meta }) => {
+      const fileUrl = new URL(relativeUrl, rootDirectoryUrl).href;
+      const packageDirectoryUrl = findPackageDirectory(
+        new URL("./", fileUrl).href,
+      );
+      return {
+        url: `/${relativeUrl}`,
+        kind: readKind(meta),
+        // Relative to the root and without its trailing slash, which is how a
+        // tree names its own nodes.
+        packageUrl: packageDirectoryUrl
+          ? `/${packageDirectoryUrl.slice(String(rootDirectoryUrl).length).replace(/\/$/, "")}`
+          : null,
+      };
+    });
+    cache = pages;
+    cachedAt = now;
+    return pages;
+  };
+};
+
 /*
  * NICE TO HAVE:
  * 
@@ -7171,6 +7317,8 @@ const jsenvPluginProtocolFile = ({
   packageDirectory,
   sourceFilesConfig,
 }) => {
+  const listHtmlPages = createHtmlPageLister({ rootDirectoryUrl });
+
   return [
     jsenvPluginFsRedirection({
       spa,
@@ -7226,6 +7374,27 @@ const jsenvPluginProtocolFile = ({
         );
       },
     },
+    {
+      name: "jsenv:html_pages",
+      appliesDuring: "dev",
+      serverRoutes: [
+        {
+          endpoint: "GET /.internal/pages.json",
+          description:
+            "The .html files served under the source directory, as urls to navigate to.",
+          availableMediaTypes: ["application/json"],
+          declarationSource: import.meta.url,
+          fetch: async () => ({
+            status: 200,
+            headers: {
+              "content-type": "application/json",
+              "cache-control": "no-store",
+            },
+            body: JSON.stringify(await listHtmlPages()),
+          }),
+        },
+      ],
+    },
     ...(directoryListing
       ? [
           jsenvPluginDirectoryListing({

package/dist/build/jsenv_core_packages.js

@@ -3625,6 +3625,96 @@ const readStat = (
   });
 };
 
+const collectFiles = async ({
+  signal = new AbortController().signal,
+  directoryUrl,
+  associations,
+  predicate,
+}) => {
+  const rootDirectoryUrl = assertAndNormalizeDirectoryUrl(directoryUrl);
+  if (typeof predicate !== "function") {
+    throw new TypeError(`predicate must be a function, got ${predicate}`);
+  }
+  associations = URL_META.resolveAssociations(associations, rootDirectoryUrl);
+
+  const collectOperation = Abort.startOperation();
+  collectOperation.addAbortSignal(signal);
+
+  const matchingFileResultArray = [];
+  const visitDirectory = async (directoryUrl) => {
+    collectOperation.throwIfAborted();
+    const directoryItems = await readDirectory(directoryUrl);
+
+    await Promise.all(
+      directoryItems.map(async (directoryItem) => {
+        const directoryChildNodeUrl = `${directoryUrl}${directoryItem}`;
+        collectOperation.throwIfAborted();
+        const directoryChildNodeStats = await readEntryStat(
+          directoryChildNodeUrl,
+          {
+            // we ignore symlink because recursively traversed
+            // so symlinked file will be discovered.
+            // Moreover if they lead outside of directoryPath it can become a problem
+            // like infinite recursion of whatever.
+            // that we could handle using an object of pathname already seen but it will be useless
+            // because directoryPath is recursively traversed
+            followLink: false,
+          },
+        );
+
+        if (directoryChildNodeStats.isDirectory()) {
+          const subDirectoryUrl = `${directoryChildNodeUrl}/`;
+          if (
+            !URL_META.urlChildMayMatch({
+              url: subDirectoryUrl,
+              associations,
+              predicate,
+            })
+          ) {
+            return;
+          }
+          await visitDirectory(subDirectoryUrl);
+          return;
+        }
+
+        if (directoryChildNodeStats.isFile()) {
+          const meta = URL_META.applyAssociations({
+            url: directoryChildNodeUrl,
+            associations,
+          });
+          if (!predicate(meta)) return;
+          const relativeUrl = urlToRelativeUrl(
+            directoryChildNodeUrl,
+            rootDirectoryUrl,
+          );
+          matchingFileResultArray.push({
+            url: new URL(relativeUrl, rootDirectoryUrl).href,
+            relativeUrl: decodeURIComponent(relativeUrl),
+            meta,
+            fileStats: directoryChildNodeStats,
+          });
+          return;
+        }
+      }),
+    );
+  };
+
+  try {
+    await visitDirectory(rootDirectoryUrl);
+
+    // When we operate on thoose files later it feels more natural
+    // to perform operation in the same order they appear in the filesystem.
+    // It also allow to get a predictable return value.
+    // For that reason we sort matchingFileResultArray
+    matchingFileResultArray.sort((leftFile, rightFile) => {
+      return comparePathnames(leftFile.relativeUrl, rightFile.relativeUrl);
+    });
+    return matchingFileResultArray;
+  } finally {
+    await collectOperation.end();
+  }
+};
+
 const writeEntryPermissionsSync = (source, permissions) => {
   const sourceUrl = assertAndNormalizeFileUrl(source);
 
@@ -11141,4 +11231,4 @@ const escapeRegexpSpecialChars = (string) => {
   });
 };
 
-export { ANSI, Abort, CONTENT_TYPE, DATA_URL, JS_QUOTES, RUNTIME_COMPAT, UNICODE, URL_META, applyFileSystemMagicResolution, applyNodeEsmResolution, asSpecifierWithoutSearch, asUrlWithoutSearch, assertAndNormalizeDirectoryUrl, browserDefaultRuntimeCompat, bufferToEtag, clearDirectorySync, compareFileUrls, comparePathnames, composeTwoImportMaps, createDetailedMessage$1 as createDetailedMessage, createDynamicLog, createLogger, createLookupPackageDirectory, createTaskLog, distributePercentages, ensureEmptyDirectory, ensurePathnameTrailingSlash, ensureWindowsDriveLetter, errorToHTML, escapeRegexpSpecialChars, generateContentFrame, getCallerPosition, getExtensionsToTry, humanizeDuration, humanizeFileSize, humanizeMemory, inferRuntimeCompatFromClosestPackage, injectQueryParamIntoSpecifierWithoutEncoding, injectQueryParams, injectQueryParamsIntoSpecifier, isFileSystemPath, isSpecifierForNodeBuiltin, lookupPackageDirectory, moveUrl, nodeDefaultRuntimeCompat, normalizeImportMap, normalizeUrl, raceProcessTeardownEvents, readCustomConditionsFromProcessArgs, readEntryStatSync, readPackageAtOrNull, registerDirectoryLifecycle, renderBigSection, renderDetails, renderTable, renderUrlOrRelativeUrlFilename, resolveImport, setUrlBasename, setUrlExtension, setUrlFilename, startMonitoringCpuUsage, startMonitoringMemoryUsage, stringifyUrlSite, updateJsonFileSync, urlIsOrIsInsideOf, urlToBasename, urlToExtension$1 as urlToExtension, urlToFileSystemPath, urlToFilename$1 as urlToFilename, urlToPathname$1 as urlToPathname, urlToRelativeUrl, validateResponseIntegrity, writeFileSync };
+export { ANSI, Abort, CONTENT_TYPE, DATA_URL, JS_QUOTES, RUNTIME_COMPAT, UNICODE, URL_META, applyFileSystemMagicResolution, applyNodeEsmResolution, asSpecifierWithoutSearch, asUrlWithoutSearch, assertAndNormalizeDirectoryUrl, browserDefaultRuntimeCompat, bufferToEtag, clearDirectorySync, collectFiles, compareFileUrls, comparePathnames, composeTwoImportMaps, createDetailedMessage$1 as createDetailedMessage, createDynamicLog, createLogger, createLookupPackageDirectory, createTaskLog, distributePercentages, ensureEmptyDirectory, ensurePathnameTrailingSlash, ensureWindowsDriveLetter, errorToHTML, escapeRegexpSpecialChars, generateContentFrame, getCallerPosition, getExtensionsToTry, humanizeDuration, humanizeFileSize, humanizeMemory, inferRuntimeCompatFromClosestPackage, injectQueryParamIntoSpecifierWithoutEncoding, injectQueryParams, injectQueryParamsIntoSpecifier, isFileSystemPath, isSpecifierForNodeBuiltin, lookupPackageDirectory, moveUrl, nodeDefaultRuntimeCompat, normalizeImportMap, normalizeUrl, raceProcessTeardownEvents, readCustomConditionsFromProcessArgs, readEntryStatSync, readPackageAtOrNull, registerDirectoryLifecycle, renderBigSection, renderDetails, renderTable, renderUrlOrRelativeUrlFilename, resolveImport, setUrlBasename, setUrlExtension, setUrlFilename, startMonitoringCpuUsage, startMonitoringMemoryUsage, stringifyUrlSite, updateJsonFileSync, urlIsOrIsInsideOf, urlToBasename, urlToExtension$1 as urlToExtension, urlToFileSystemPath, urlToFilename$1 as urlToFilename, urlToPathname$1 as urlToPathname, urlToRelativeUrl, validateResponseIntegrity, writeFileSync };

package/dist/html/client_monitor_page.html

@@ -303,8 +303,11 @@ button:hover {
           const v = version && version !== "unknown" ? ` ${version}` : "";
           return `${label}${v}`;
         };
+        // The ip is part of who a client is: it tells the main client
+        // (localhost — this machine) from a device on the network.
+        const ipLabel = client.local ? "localhost" : client.ip;
         return (
-          [part(client.runtime, RUNTIME_LABELS), part(client.os)]
+          [part(client.runtime, RUNTIME_LABELS), part(client.os), ipLabel]
             .filter(Boolean)
             .join(" · ") || clientId.slice(0, 8)
         );

package/dist/html/clients_page.html

@@ -275,12 +275,12 @@ ul.list li:last-child {
       }
 
       const headHtml = `<tr>
-        <th>First seen</th><th>OS</th><th>Browser</th><th>Active tab</th>
+        <th>First seen</th><th>OS</th><th>Browser</th><th>IP</th><th>Active tab</th>
         <th>Last activity</th><th>Logs</th><th></th>
       </tr>`;
       document.getElementById("head").innerHTML = headHtml;
       document.getElementById("head2").innerHTML = headHtml;
-      const COLSPAN = 7;
+      const COLSPAN = 8;
 
       const ago = (ts) => {
         const s = Math.round((Date.now() - ts) / 1000);
@@ -420,11 +420,21 @@ ul.list li:last-child {
           <a class="monitor" href="/.internal/client?id=${encodeURIComponent(d.id)}">Monitor →</a>
         </div>`;
       };
+      // The ip says how the client reaches the server, which is what tells the
+      // main client (this machine, via localhost) from a device on the network.
+      const ipCell = (d) => {
+        if (!d.ip) {
+          return '<span class="muted">—</span>';
+        }
+        const label = d.local ? "localhost" : d.ip;
+        return `<span title="${escapeHtml(d.ip)}">${escapeHtml(label)}</span>`;
+      };
       const rowHtml = (d) => {
         return `<tr>
           <td>${firstSeenCell(d)}</td>
           <td>${named(d.os)}</td>
           <td>${named(d.runtime)}</td>
+          <td>${ipCell(d)}</td>
           <td>${tabCell(d)}</td>
           <td>${activityCell(d)}</td>
           <td>${d.logCount}</td>
@@ -537,9 +547,7 @@ ul.list li:last-child {
           return navigablePages;
         }
         try {
-          navigablePages = await (
-            await fetch("/.internal/clients/pages.json")
-          ).json();
+          navigablePages = await (await fetch("/.internal/pages.json")).json();
         } catch {
           navigablePages = [];
         }