@jsenv/core 38.4.17 → 38.4.18

package/src/plugins/autoreload/client/autoreload.js

@@ -6,134 +6,134 @@ import {
   getDOMNodesUsingUrl,
 } from "./reload.js";
 
-let debug = false;
-const reloader = {
-  urlHotMetas,
-  status: {
-    value: "idle",
-    onchange: () => {},
-    goTo: (value) => {
-      reloader.status.value = value;
-      reloader.status.onchange();
+export const initAutoreload = ({ mainFilePath }) => {
+  let debug = false;
+  const reloader = {
+    urlHotMetas,
+    status: {
+      value: "idle",
+      onchange: () => {},
+      goTo: (value) => {
+        reloader.status.value = value;
+        reloader.status.onchange();
+      },
     },
-  },
-  autoreload: {
-    enabled: ["1", null].includes(window.localStorage.getItem("autoreload")),
-    onchange: () => {},
-    enable: () => {
-      reloader.autoreload.enabled = true;
-      window.localStorage.setItem("autoreload", "1");
-      reloader.autoreload.onchange();
+    autoreload: {
+      enabled: ["1", null].includes(window.localStorage.getItem("autoreload")),
+      onchange: () => {},
+      enable: () => {
+        reloader.autoreload.enabled = true;
+        window.localStorage.setItem("autoreload", "1");
+        reloader.autoreload.onchange();
+      },
+      disable: () => {
+        reloader.autoreload.enabled = false;
+        window.localStorage.setItem("autoreload", "0");
+        reloader.autoreload.onchange();
+      },
     },
-    disable: () => {
-      reloader.autoreload.enabled = false;
-      window.localStorage.setItem("autoreload", "0");
-      reloader.autoreload.onchange();
-    },
-  },
-  changes: {
-    value: [],
-    onchange: () => {},
-    add: (reloadMessage) => {
-      if (debug) {
-        console.debug("received reload message", reloadMessage);
-      }
-      reloader.changes.value.push(reloadMessage);
-      reloader.changes.onchange();
-      if (reloader.autoreload.enabled) {
-        reloader.reload();
-      } else {
-        reloader.status.goTo("can_reload");
-      }
-    },
-    remove: (reloadMessage) => {
-      const index = reloader.changes.value.indexOf(reloadMessage);
-      if (index > -1) {
-        reloader.changes.value.splice(index, 1);
-        if (reloader.changes.value.length === 0) {
-          reloader.status.goTo("idle");
+    changes: {
+      value: [],
+      onchange: () => {},
+      add: (reloadMessage) => {
+        if (debug) {
+          console.debug("received reload message", reloadMessage);
         }
+        reloader.changes.value.push(reloadMessage);
         reloader.changes.onchange();
+        if (reloader.autoreload.enabled) {
+          reloader.reload();
+        } else {
+          reloader.status.goTo("can_reload");
+        }
+      },
+      remove: (reloadMessage) => {
+        const index = reloader.changes.value.indexOf(reloadMessage);
+        if (index > -1) {
+          reloader.changes.value.splice(index, 1);
+          if (reloader.changes.value.length === 0) {
+            reloader.status.goTo("idle");
+          }
+          reloader.changes.onchange();
+        }
+      },
+    },
+    currentExecution: null,
+    reload: () => {
+      const someEffectIsFullReload = reloader.changes.value.some(
+        (reloadMessage) => reloadMessage.type === "full",
+      );
+      if (someEffectIsFullReload) {
+        reloadHtmlPage();
+        return;
       }
+      reloader.status.goTo("reloading");
+      const onApplied = (reloadMessage) => {
+        reloader.changes.remove(reloadMessage);
+      };
+      const setReloadMessagePromise = (reloadMessage, promise) => {
+        promise.then(
+          () => {
+            onApplied(reloadMessage);
+            reloader.currentExecution = null;
+          },
+          (e) => {
+            reloader.status.goTo("failed");
+            if (typeof window.reportError === "function") {
+              window.reportError(e);
+            } else {
+              console.error(e);
+            }
+            console.error(
+              `[jsenv] Hot reload failed after ${reloadMessage.reason}.
+This could be due to syntax errors or importing non-existent modules (see errors in console)`,
+            );
+            reloader.currentExecution = null;
+          },
+        );
+      };
+      reloader.changes.value.forEach((reloadMessage) => {
+        if (reloadMessage.type === "hot") {
+          const promise = addToHotQueue(() => {
+            return applyHotReload(reloadMessage);
+          });
+          setReloadMessagePromise(reloadMessage, promise);
+        } else {
+          setReloadMessagePromise(reloadMessage, Promise.resolve());
+        }
+      });
     },
-  },
-  currentExecution: null,
-  reload: () => {
-    const someEffectIsFullReload = reloader.changes.value.some(
-      (reloadMessage) => reloadMessage.type === "full",
-    );
-    if (someEffectIsFullReload) {
-      reloadHtmlPage();
+  };
+
+  let pendingCallbacks = [];
+  let running = false;
+  const addToHotQueue = async (callback) => {
+    pendingCallbacks.push(callback);
+    dequeue();
+  };
+  const dequeue = async () => {
+    if (running) {
       return;
     }
-    reloader.status.goTo("reloading");
-    const onApplied = (reloadMessage) => {
-      reloader.changes.remove(reloadMessage);
-    };
-    const setReloadMessagePromise = (reloadMessage, promise) => {
-      promise.then(
-        () => {
-          onApplied(reloadMessage);
-          reloader.currentExecution = null;
-        },
-        (e) => {
-          reloader.status.goTo("failed");
-          if (typeof window.reportError === "function") {
-            window.reportError(e);
-          } else {
-            console.error(e);
-          }
-          console.error(
-            `[jsenv] Hot reload failed after ${reloadMessage.reason}.
-This could be due to syntax errors or importing non-existent modules (see errors in console)`,
-          );
-          reloader.currentExecution = null;
-        },
-      );
-    };
-    reloader.changes.value.forEach((reloadMessage) => {
-      if (reloadMessage.type === "hot") {
-        const promise = addToHotQueue(() => {
-          return applyHotReload(reloadMessage);
-        });
-        setReloadMessagePromise(reloadMessage, promise);
-      } else {
-        setReloadMessagePromise(reloadMessage, Promise.resolve());
+    const callbacks = pendingCallbacks.slice();
+    pendingCallbacks = [];
+    running = true;
+    try {
+      await callbacks.reduce(async (previous, callback) => {
+        await previous;
+        await callback();
+      }, Promise.resolve());
+    } finally {
+      running = false;
+      if (pendingCallbacks.length) {
+        dequeue();
       }
-    });
-  },
-};
-
-let pendingCallbacks = [];
-let running = false;
-const addToHotQueue = async (callback) => {
-  pendingCallbacks.push(callback);
-  dequeue();
-};
-const dequeue = async () => {
-  if (running) {
-    return;
-  }
-  const callbacks = pendingCallbacks.slice();
-  pendingCallbacks = [];
-  running = true;
-  try {
-    await callbacks.reduce(async (previous, callback) => {
-      await previous;
-      await callback();
-    }, Promise.resolve());
-  } finally {
-    running = false;
-    if (pendingCallbacks.length) {
-      dequeue();
     }
-  }
-};
+  };
 
-const applyHotReload = async ({ cause, hotInstructions }) => {
-  await hotInstructions.reduce(
-    async (previous, { type, boundary, acceptedBy }) => {
-      await previous;
+  const applyHotReload = async ({ cause, hotInstructions }) => {
+    for (const instruction of hotInstructions) {
+      const { type, boundary, acceptedBy } = instruction;
 
       const hot = Date.now();
       const urlToFetch = new URL(boundary, `${window.location.origin}/`).href;
@@ -141,7 +141,6 @@ const applyHotReload = async ({ cause, hotInstructions }) => {
       // there is no url hot meta when:
       // - code was not executed (code splitting with dynamic import)
       // - import.meta.hot.accept() is not called (happens for HTML and CSS)
-
       if (type === "prune") {
         if (urlHotMeta) {
           delete urlHotMetas[urlToFetch];
@@ -154,9 +153,8 @@ const applyHotReload = async ({ cause, hotInstructions }) => {
             console.groupEnd();
           }
         }
-        return null;
+        continue;
       }
-
       if (acceptedBy === boundary) {
         console.groupCollapsed(`[jsenv] hot reloading ${boundary} (${cause})`);
       } else {
@@ -167,7 +165,7 @@ const applyHotReload = async ({ cause, hotInstructions }) => {
       if (type === "js_module") {
         if (!urlHotMeta) {
           // code was not executed, no need to re-execute it
-          return null;
+          continue;
         }
         if (urlHotMeta.disposeCallback) {
           console.log(`call dispose callback`);
@@ -184,18 +182,23 @@ const applyHotReload = async ({ cause, hotInstructions }) => {
         }
         console.log(`js module import done`);
         console.groupEnd();
-        return namespace;
+        continue;
       }
       if (type === "html") {
-        const isRootHtmlFile =
-          window.location.pathname === "/" &&
-          new URL(urlToFetch).pathname.slice(1).indexOf("/") === -1;
+        let isRootHtmlFile;
+        if (window.location.pathname === "/") {
+          if (new URL(urlToFetch).pathname.slice(1).indexOf("/") === -1) {
+            isRootHtmlFile = true;
+          } else if (new URL(urlToFetch).pathname === mainFilePath) {
+            isRootHtmlFile = true;
+          }
+        }
         if (
           !isRootHtmlFile &&
           !compareTwoUrlPaths(urlToFetch, window.location.href)
         ) {
           // we are not in that HTML page
-          return null;
+          continue;
         }
         const urlToReload = new URL(acceptedBy, `${window.location.origin}/`)
           .href;
@@ -213,18 +216,16 @@ const applyHotReload = async ({ cause, hotInstructions }) => {
           });
         }
         console.groupEnd();
-        return null;
+        continue;
       }
       console.warn(`unknown update type: "${type}"`);
-      return null;
+    }
+  };
+
+  window.__reloader__ = reloader;
+  window.__server_events__.listenEvents({
+    reload: (reloadServerEvent) => {
+      reloader.changes.add(reloadServerEvent.data);
     },
-    Promise.resolve(),
-  );
+  });
 };
-
-window.__reloader__ = reloader;
-window.__server_events__.listenEvents({
-  reload: (reloadServerEvent) => {
-    reloader.changes.add(reloadServerEvent.data);
-  },
-});

package/src/plugins/autoreload/jsenv_plugin_autoreload_client.js

@@ -26,12 +26,21 @@ export const jsenvPluginAutoreloadClient = () => {
           expectedType: "js_module",
           specifier: autoreloadClientFileUrl,
         });
+        const paramsJson = JSON.stringify(
+          {
+            mainFilePath: `/${htmlUrlInfo.kitchen.context.mainFilePath}`,
+          },
+          null,
+          "  ",
+        );
         injectHtmlNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
             tagName: "script",
             type: "module",
-            src: autoreloadClientReference.generatedSpecifier,
+            textContent: `import { initAutoreload } from "${autoreloadClientReference.generatedSpecifier}";
+
+initAutoreload(${paramsJson});`,
           }),
           "jsenv:autoreload_client",
         );

package/src/plugins/autoreload/jsenv_plugin_autoreload_server.js

@@ -38,7 +38,10 @@ export const jsenvPluginAutoreloadServer = ({
                       : `a dependent file accepts hot reload`,
                 };
               }
-              if (urlInfo.data.hotDecline) {
+              if (
+                urlInfo.data.hotDecline ||
+                urlInfo.firstReference?.type === "http_request"
+              ) {
                 return {
                   declined: true,
                   reason: `file declines hot reload`,

package/src/plugins/protocol_file/directory.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Directory explorer</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <h1>
+      <a jsenv-ignore href="/${directoryRelativeUrl}"
+        >/${directoryRelativeUrl}</a
+      >
+      directory content:
+    </h1>
+    <ul>
+      ${directoryContent}
+    </ul>
+  </body>
+</html>

package/src/plugins/protocol_file/html_404_and_parent_dir.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <title>404 ENOENT</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <p>No entry on the filesystem for <strong>/${fileRelativeUrl}</strong></p>
+    <p>
+      <a jsenv-ignore href="/${parentDirectoryRelativeUrl}"
+        >/${parentDirectoryRelativeUrl}</a
+      >
+      directory content:
+    </p>
+    <ul>
+      ${parentDirectoryContent}
+    </ul>
+  </body>
+</html>

package/src/plugins/protocol_file/html_404_and_parent_dir_is_empty.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <title>404 ENOENT</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <p>No entry on the filesystem for <strong>/${fileRelativeUrl}</strong></p>
+    <p>
+      <a jsenv-ignore href="/${parentDirectoryRelativeUrl}"
+        >/${parentDirectoryRelativeUrl}</a
+      >
+      directory is empty.
+    </p>
+  </body>
+</html>

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -1,5 +1,11 @@
-import { readFileSync, realpathSync, statSync } from "node:fs";
-import { serveDirectory } from "@jsenv/server";
+import {
+  existsSync,
+  readFileSync,
+  realpathSync,
+  statSync,
+  lstatSync,
+  readdirSync,
+} from "node:fs";
 import { pathToFileURL } from "node:url";
 import {
   urlIsInsideOf,
@@ -11,7 +17,19 @@ import {
   applyFileSystemMagicResolution,
   getExtensionsToTry,
 } from "@jsenv/node-esm-resolution";
+import { pickContentType } from "@jsenv/server";
 import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js";
+import { assertAndNormalizeDirectoryUrl } from "@jsenv/filesystem";
+
+const html404AndParentDirIsEmptyFileUrl = new URL(
+  "./html_404_and_parent_dir_is_empty.html",
+  import.meta.url,
+);
+const html404AndParentDirFileUrl = new URL(
+  "./html_404_and_parent_dir.html",
+  import.meta.url,
+);
+const htmlFileUrlForDirectory = new URL("./directory.html", import.meta.url);
 
 export const jsenvPluginProtocolFile = ({
   magicExtensions = ["inherit", ".js"],
@@ -99,7 +117,9 @@ export const jsenvPluginProtocolFile = ({
         reference.leadsToADirectory = stat && stat.isDirectory();
         if (reference.leadsToADirectory) {
           let actionForDirectory;
-          if (
+          if (reference.type === "a_href") {
+            actionForDirectory = "ignore";
+          } else if (
             reference.type === "http_request" ||
             reference.type === "filesystem"
           ) {
@@ -184,17 +204,33 @@ export const jsenvPluginProtocolFile = ({
               urlInfo.filenameHint = `${urlToFilename(urlInfo.url)}/`;
             }
           }
-          const { headers, body } = serveDirectory(urlObject.href, {
-            headers: urlInfo.context.request
-              ? urlInfo.context.request.headers
-              : {},
-            rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
-          });
+          const directoryContentArray = readdirSync(urlObject);
+          if (urlInfo.firstReference.type === "filesystem") {
+            const content = JSON.stringify(directoryContentArray, null, "  ");
+            return {
+              type: "directory",
+              contentType: "application/json",
+              content,
+            };
+          }
+          const acceptsHtml = urlInfo.context.request
+            ? pickContentType(urlInfo.context.request, ["text/html"])
+            : false;
+          if (acceptsHtml) {
+            const html = generateHtmlForDirectory(
+              urlObject.href,
+              directoryContentArray,
+              urlInfo.context.rootDirectoryUrl,
+            );
+            return {
+              contentType: "text/html",
+              content: html,
+            };
+          }
           return {
             type: "directory",
-            contentType: headers["content-type"],
-            contentLength: headers["content-length"],
-            content: body,
+            contentType: "application/json",
+            content: JSON.stringify(directoryContentArray, null, "  "),
           };
         }
         if (
@@ -204,20 +240,144 @@ export const jsenvPluginProtocolFile = ({
           urlInfo.dirnameHint =
             urlInfo.firstReference.ownerUrlInfo.filenameHint;
         }
-        const fileBuffer = readFileSync(urlObject);
         const contentType = CONTENT_TYPE.fromUrlExtension(urlInfo.url);
+        if (contentType === "text/html") {
+          try {
+            const fileBuffer = readFileSync(urlObject);
+            const content = String(fileBuffer);
+            return {
+              content,
+              contentType,
+              contentLength: fileBuffer.length,
+            };
+          } catch (e) {
+            if (e.code !== "ENOENT") {
+              throw e;
+            }
+            const parentDirectoryUrl = new URL("./", urlInfo.url);
+            if (!existsSync(parentDirectoryUrl)) {
+              throw e;
+            }
+            const parentDirectoryContentArray = readdirSync(
+              new URL(parentDirectoryUrl),
+            );
+            const html = generateHtmlForENOENTOnHtmlFile(
+              urlInfo.url,
+              parentDirectoryContentArray,
+              parentDirectoryUrl,
+              urlInfo.context.rootDirectoryUrl,
+            );
+            return {
+              contentType: "text/html",
+              content: html,
+            };
+          }
+        }
+        const fileBuffer = readFileSync(urlObject);
         const content = CONTENT_TYPE.isTextual(contentType)
           ? String(fileBuffer)
           : fileBuffer;
         return {
           content,
           contentType,
+          contentLength: fileBuffer.length,
         };
       },
     },
   ];
 };
 
+const generateHtmlForDirectory = (
+  directoryUrl,
+  directoryContentArray,
+  rootDirectoryUrl,
+) => {
+  directoryUrl = assertAndNormalizeDirectoryUrl(directoryUrl);
+  const htmlForDirectory = String(readFileSync(htmlFileUrlForDirectory));
+  const replacers = {
+    directoryRelativeUrl: urlToRelativeUrl(directoryUrl, rootDirectoryUrl),
+    directoryUrl,
+    directoryContent: () =>
+      generateDirectoryContent(
+        directoryContentArray,
+        directoryUrl,
+        rootDirectoryUrl,
+      ),
+  };
+  const html = replacePlaceholders(htmlForDirectory, replacers);
+  return html;
+};
+const generateHtmlForENOENTOnHtmlFile = (
+  url,
+  parentDirectoryContentArray,
+  parentDirectoryUrl,
+  rootDirectoryUrl,
+) => {
+  if (parentDirectoryContentArray.length === 0) {
+    const htmlFor404AndParentDirIsEmpty = String(
+      readFileSync(html404AndParentDirIsEmptyFileUrl),
+    );
+    return replacePlaceholders(htmlFor404AndParentDirIsEmpty, {
+      fileRelativeUrl: urlToRelativeUrl(url, rootDirectoryUrl),
+      parentDirectoryRelativeUrl: urlToRelativeUrl(
+        parentDirectoryUrl,
+        rootDirectoryUrl,
+      ),
+    });
+  }
+  const htmlFor404AndParentDir = String(
+    readFileSync(html404AndParentDirFileUrl),
+  );
+
+  const replacers = {
+    fileUrl: url,
+    fileRelativeUrl: urlToRelativeUrl(url, rootDirectoryUrl),
+    parentDirectoryUrl,
+    parentDirectoryRelativeUrl: urlToRelativeUrl(
+      parentDirectoryUrl,
+      rootDirectoryUrl,
+    ),
+    parentDirectoryContent: () =>
+      generateDirectoryContent(
+        parentDirectoryContentArray,
+        parentDirectoryUrl,
+        rootDirectoryUrl,
+      ),
+  };
+  const html = replacePlaceholders(htmlFor404AndParentDir, replacers);
+  return html;
+};
+const generateDirectoryContent = (
+  directoryContentArray,
+  directoryUrl,
+  rootDirectoryUrl,
+) => {
+  return directoryContentArray.map((filename) => {
+    const fileUrlObject = new URL(filename, directoryUrl);
+    const fileUrl = String(fileUrlObject);
+    let fileUrlRelative = urlToRelativeUrl(fileUrl, rootDirectoryUrl);
+    if (lstatSync(fileUrlObject).isDirectory()) {
+      fileUrlRelative += "/";
+    }
+    return `<li>
+    <a href="/${fileUrlRelative}">/${fileUrlRelative}</a>
+  </li>`;
+  }).join(`
+  `);
+};
+const replacePlaceholders = (html, replacers) => {
+  return html.replace(/\${([\w]+)}/g, (match, name) => {
+    const replacer = replacers[name];
+    if (replacer === undefined) {
+      return match;
+    }
+    if (typeof replacer === "function") {
+      return replacer();
+    }
+    return replacer;
+  });
+};
+
 const resolveSymlink = (fileUrl) => {
   const urlObject = new URL(fileUrl);
   const realpath = realpathSync(urlObject);

package/src/plugins/reference_analysis/html/html_syntax_error.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Syntax error in HTML</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <p>Syntax error: <strong>${reasonCode}</strong></p>
+    <a jsenv-ignore href="${errorLinkHref}">${errorLinkText}</a>
+    <pre>${syntaxError}</pre>
+  </body>
+</html>