@jsenv/core 41.4.9 → 41.4.11

package/src/kitchen/package_dependencies.js

@@ -12,6 +12,7 @@
  * would pick, which is way beyond what is needed here.
  */
 
+import { urlToRelativeUrl } from "@jsenv/urls";
 import { existsSync } from "node:fs";
 
 const DEPENDENCY_FIELDS = [
@@ -93,12 +94,21 @@ const createStatus = (
     declaredVersion,
     declaredBy,
     installedVersion: null,
+    // the file telling this dependency apart; it is what an install rewrites and
+    // what the dev server looks at to know the dependency became the declared one
+    watchedPath: null,
     state: "missing",
   };
   const installedDirectoryUrl = findInstalledDirectoryUrl(
     declaringDirectoryUrl,
     packageName,
   );
+  status.watchedPath = watchedPathFromDirectoryUrl(
+    packageDirectory,
+    // not installed yet: name the place where it is expected to appear
+    installedDirectoryUrl ||
+      `${declaringDirectoryUrl}node_modules/${packageName}/`,
+  );
   if (!installedDirectoryUrl) {
     return status;
   }
@@ -117,6 +127,14 @@ const createStatus = (
   return status;
 };
 
+const watchedPathFromDirectoryUrl = (packageDirectory, directoryUrl) => {
+  const packageJsonUrl = `${directoryUrl}package.json`;
+  if (!packageDirectory.url) {
+    return packageJsonUrl;
+  }
+  return urlToRelativeUrl(packageJsonUrl, packageDirectory.url);
+};
+
 const findInstalledDirectoryUrl = (declaringDirectoryUrl, packageName) => {
   let directoryUrl = declaringDirectoryUrl;
   while (directoryUrl) {

package/src/plugins/dependency_status/client/dependency_status.js

@@ -3,11 +3,22 @@
  *
  * A missing dependency is not handled here: it makes the import fail, so the
  * error overlay already says it, with more precision (which import, where).
+ *
+ * The overlay does not only describe the problem, it shows the dev server
+ * watching for the fix: the paths being looked at are named and kept alive on
+ * screen, so waiting for "npm install" feels like waiting for something that is
+ * actually going to happen.
  */
 
 let removeOverlay = () => {};
+let watchInfoFromServer = {};
+// packages listed as outdated at some point, and the path watched for each;
+// what leaves this map has been installed while the overlay was open, which is
+// worth showing as such
+const outdatedPathMap = new Map();
 
-export const initDependencyStatus = ({ problems }) => {
+export const initDependencyStatus = ({ problems, watchInfo }) => {
+  watchInfoFromServer = watchInfo || {};
   render(problems);
   // without the server events channel the page only knows the state it was
   // served with, which is still better than nothing
@@ -24,9 +35,19 @@ const render = (problems) => {
   const outdatedList = problems.filter(({ state }) => state === "outdated");
   removeOverlay();
   removeOverlay = () => {};
+  const installedList = [];
+  for (const [packageName, watchedPath] of outdatedPathMap) {
+    if (!outdatedList.some((problem) => problem.packageName === packageName)) {
+      installedList.push({ packageName, watchedPath });
+    }
+  }
   if (outdatedList.length === 0) {
+    outdatedPathMap.clear();
     return;
   }
+  for (const { packageName, watchedPath } of outdatedList) {
+    outdatedPathMap.set(packageName, watchedPath);
+  }
   const supervisor = window.__supervisor__;
   if (!supervisor || !supervisor.reportWarning) {
     console.warn(summarize(outdatedList));
@@ -41,8 +62,8 @@ const render = (problems) => {
     details: [
       "The page is running with what is installed in node_modules, which is not what package.json asks for. It may work, but it is not the code the project expects.",
       "Run npm install to fix it. If an install is already running, there is nothing to do but wait.",
-      "This page reloads on its own as soon as node_modules matches package.json.",
     ],
+    node: createWatchNode(outdatedList, installedList),
   });
 };
 
@@ -57,3 +78,213 @@ const summarize = (outdatedList) => {
     .map(({ packageName }) => packageName)
     .join(", ")}`;
 };
+
+const createWatchNode = (outdatedList, installedList) => {
+  const { packageJsonPath = "package.json", pollInterval } =
+    watchInfoFromServer;
+  const node = document.createElement("div");
+  node.className = "dependency_watch";
+  const rows = [];
+  rows.push(
+    createRow({
+      state: "watching",
+      path: packageJsonPath,
+      // a file watcher, not a poll: an edit here is what puts a dependency out
+      // of date in the first place
+      note: "on every change",
+      pollInterval,
+    }),
+  );
+  for (const { packageName, declaredVersion, watchedPath } of outdatedList) {
+    rows.push(
+      createRow({
+        state: "watching",
+        path: watchedPath || `node_modules/${packageName}/package.json`,
+        note: pollInterval
+          ? `waiting for ${declaredVersion}, read every ${pollInterval}ms`
+          : `waiting for ${declaredVersion}`,
+        pollInterval,
+      }),
+    );
+  }
+  for (const { packageName, watchedPath } of installedList) {
+    rows.push(
+      createRow({
+        state: "done",
+        path: watchedPath || `node_modules/${packageName}/package.json`,
+        note: "installed",
+      }),
+    );
+  }
+  node.innerHTML = `
+<style>
+  ${watchCSS}
+</style>
+<div class="dependency_watch_head">
+  <span class="dependency_watch_live">
+    <span class="dependency_watch_live_dot"></span>watching
+  </span>
+  <span class="dependency_watch_head_text">
+    the files that will tell the install is over
+  </span>
+</div>
+<div class="dependency_watch_rows">
+  ${rows.join("\n  ")}
+</div>
+<div class="dependency_watch_effect" data-copy-line>
+  As soon as node_modules matches package.json, this page reloads by itself.
+</div>`;
+  return node;
+};
+
+const createRow = ({ state, path, note, pollInterval }) => {
+  const sweepStyle = pollInterval
+    ? ` style="animation-duration: ${pollInterval}ms"`
+    : "";
+  return `<div class="dependency_watch_row" data-state="${state}">
+    <span class="dependency_watch_row_icon"></span>
+    <code class="dependency_watch_row_path">${escapeHtml(path)}</code>
+    <span class="dependency_watch_row_note">${escapeHtml(note)}</span>
+    ${
+      state === "watching"
+        ? `<span class="dependency_watch_row_sweep"${sweepStyle}></span>`
+        : ""
+    }
+  </div>`;
+};
+
+const escapeHtml = (string) => {
+  return String(string)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+
+const watchCSS = /* css */ `
+  .dependency_watch_head {
+    display: flex;
+    margin-bottom: 8px;
+    align-items: center;
+    gap: 8px;
+  }
+  .dependency_watch_live {
+    display: flex;
+    padding: 2px 8px;
+    align-items: center;
+    gap: 6px;
+    color: #ffab40;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    border: 1px solid currentColor;
+    border-radius: 999px;
+  }
+  .dependency_watch_live_dot {
+    width: 7px;
+    height: 7px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: dependency_watch_pulse 1.4s ease-in-out infinite;
+  }
+  @keyframes dependency_watch_pulse {
+    0%,
+    100% {
+      opacity: 0.25;
+      transform: scale(0.8);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.15);
+    }
+  }
+  .dependency_watch_head_text {
+    font-size: 13px;
+  }
+
+  .dependency_watch_rows {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .dependency_watch_row {
+    position: relative;
+    display: flex;
+    padding: 6px 10px;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid #333;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .dependency_watch_row_icon {
+    width: 8px;
+    height: 8px;
+    flex: none;
+    border: 1px solid #ffab40;
+    border-radius: 50%;
+  }
+  .dependency_watch_row[data-state="done"] .dependency_watch_row_icon {
+    background: #7fd67f;
+    border-color: #7fd67f;
+  }
+  .dependency_watch_row_path {
+    color: #eee;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .dependency_watch_row_note {
+    margin-left: auto;
+    padding-left: 8px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0.8;
+  }
+  .dependency_watch_row[data-state="done"] .dependency_watch_row_note {
+    color: #7fd67f;
+    opacity: 1;
+  }
+  /* the sweep is the watching made visible: one pass per read */
+  .dependency_watch_row_sweep {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 35%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 171, 64, 0.16),
+      transparent
+    );
+    animation: dependency_watch_sweep 2s linear infinite;
+    pointer-events: none;
+  }
+  @keyframes dependency_watch_sweep {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(340%);
+    }
+  }
+
+  .dependency_watch_effect {
+    margin-top: 8px;
+    color: #ffab40;
+    font-size: 13px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dependency_watch_live_dot {
+      animation: none;
+    }
+    .dependency_watch_row_sweep {
+      display: none;
+    }
+  }
+`;

package/src/plugins/dependency_status/jsenv_plugin_dependency_status.js

@@ -15,6 +15,7 @@ const clientFileUrl = import.meta.resolve("./client/dependency_status.js");
 export const jsenvPluginDependencyStatus = ({
   dependencyProblemEventEmitter,
   getDependencyProblems,
+  getDependencyWatchInfo = () => ({}),
 }) => {
   return {
     name: "jsenv:dependency_status",
@@ -51,7 +52,10 @@ export const jsenvPluginDependencyStatus = ({
           src: clientReference.generatedSpecifier,
           initCall: {
             callee: "initDependencyStatus",
-            params: { problems: getDependencyProblems() },
+            params: {
+              problems: getDependencyProblems(),
+              watchInfo: getDependencyWatchInfo(),
+            },
           },
           pluginName: "jsenv:dependency_status",
         });

package/src/plugins/directory_reference_effect/jsenv_plugin_directory_reference_effect.js

@@ -54,7 +54,9 @@ export const jsenvPluginDirectoryReferenceEffect = (
       } else {
         const directoryRelativeUrl = urlToRelativeUrl(
           reference.url,
-          reference.ownerUrlInfo.originalUrl,
+          // the root url info has no originalUrl; it owns the reference
+          // created for an incoming request ("http_request")
+          reference.ownerUrlInfo.originalUrl || reference.ownerUrlInfo.url,
         );
         reference.filenameHint = directoryRelativeUrl;
       }

package/src/plugins/protocol_file/jsenv_plugin_fs_redirection.js

@@ -67,6 +67,9 @@ export const jsenvPluginFsRedirection = ({
       const { search, hash } = urlObject;
       urlObject.search = "";
       urlObject.hash = "";
+      // must be read before applyFsStatEffectsOnUrlObject which forces the
+      // trailing slash on directories
+      const specifierUsesTrailingSlash = urlObject.pathname.endsWith("/");
       applyFsStatEffectsOnUrlObject(urlObject, fsStat);
       const shouldApplyFilesystemMagicResolution =
         reference.type === "js_import";
@@ -96,20 +99,16 @@ export const jsenvPluginFsRedirection = ({
             // url has an extension, we assume it's a file request -> let 404 happen
             return null;
           }
-          const { requestedUrl, rootDirectoryUrl, mainFilePath } =
-            reference.ownerUrlInfo.context;
-          if (!requestedUrl) {
-            // the SPA fallback answers a request; during build there is none
+          if (specifierUsesTrailingSlash) {
+            // the trailing slash asks for a directory and there is none here
+            // -> let 404 happen (same reasoning as the extension above)
             return null;
           }
-          const closestHtmlRootFile = getClosestHtmlRootFile(
-            requestedUrl,
-            rootDirectoryUrl,
-          );
-          if (closestHtmlRootFile) {
-            return closestHtmlRootFile;
+          const spaFallbackUrl = getSpaFallbackUrl(reference);
+          if (spaFallbackUrl) {
+            return spaFallbackUrl;
           }
-          return new URL(mainFilePath, rootDirectoryUrl);
+          return null;
         }
         if (fsStat.isDirectory()) {
           // When requesting a directory, check if we have an HTML entry file for that directory
@@ -118,6 +117,21 @@ export const jsenvPluginFsRedirection = ({
             reference.fsStat = readEntryStatSync(directoryEntryFileUrl);
             return directoryEntryFileUrl;
           }
+          if (!specifierUsesTrailingSlash) {
+            // the trailing slash is what tells a directory apart from a route:
+            // "/join/" is the directory, "/join" is a route owned by the SPA
+            // even when "join/" exists in the source files.
+            // Without this a source directory would shadow the route having
+            // the same name and the SPA would be unreachable in dev while
+            // being perfectly fine once built
+            const spaFallbackUrl = getSpaFallbackUrl(reference);
+            if (spaFallbackUrl) {
+              reference.fsStat = readEntryStatSync(spaFallbackUrl, {
+                nullIfNotFound: true,
+              });
+              return spaFallbackUrl;
+            }
+          }
         }
       }
       if (!fsStat) {
@@ -180,6 +194,22 @@ const getDirectoryEntryFileUrl = (directoryUrl) => {
   }
   return null;
 };
+const getSpaFallbackUrl = (reference) => {
+  const { requestedUrl, rootDirectoryUrl, mainFilePath } =
+    reference.ownerUrlInfo.context;
+  if (!requestedUrl) {
+    // the SPA fallback answers a request; during build there is none
+    return null;
+  }
+  const closestHtmlRootFile = getClosestHtmlRootFile(
+    requestedUrl,
+    rootDirectoryUrl,
+  );
+  if (closestHtmlRootFile) {
+    return closestHtmlRootFile;
+  }
+  return String(new URL(mainFilePath, rootDirectoryUrl));
+};
 const getClosestHtmlRootFile = (requestedUrl, serverRootDirectoryUrl) => {
   let directoryUrl = new URL("./", requestedUrl);
   while (true) {