@jsenv/core 39.10.1 → 39.11.0

package/dist/html/directory.html

@@ -27,6 +27,12 @@
         position: relative;
       }
       
+      .directory_empty_message {
+        color: #bbb;
+        margin: 1em;
+        padding: .5em;
+      }
+      
       .directory_content {
         border-radius: 3px;
         margin: 10px 15px;

package/dist/html/html_404_and_ancestor_dir.html

@@ -27,6 +27,12 @@
         position: relative;
       }
       
+      .directory_empty_message {
+        color: #bbb;
+        margin: 1em;
+        padding: .5em;
+      }
+      
       .directory_content {
         border-radius: 3px;
         margin: 10px 15px;
@@ -188,7 +194,7 @@
         No entry on the filesystem for <code>/${fileRelativeUrl}</code> (at
         ${fileUrl})
         <br>
-        Content of the ancestor directory is listed below:
+        Content of first ancestor directory is listed below:
       </span>
     </p>
     <h1 class="directory_nav">${ancestorDirectoryNav}</h1>

package/dist/jsenv_core.js

@@ -12648,9 +12648,9 @@ const createEventEmitter = () => {
     callbackSet.delete(callback);
   };
   const emit = (...args) => {
-    callbackSet.forEach((callback) => {
+    for (const callback of callbackSet) {
       callback(...args);
-    });
+    }
   };
   return { on, off, emit };
 };
@@ -12817,7 +12817,7 @@ const createDependencies = (ownerUrlInfo) => {
 
     const stopCollecting = () => {
       for (const prevReferenceToOther of prevReferenceToOthersSet) {
-        applyDependencyRemovalEffects(prevReferenceToOther);
+        checkForDependencyRemovalEffects(prevReferenceToOther);
       }
       prevReferenceToOthersSet.clear();
     };
@@ -13322,7 +13322,7 @@ ${ownerUrlInfo.url}`,
     implicitRef.remove();
   }
   ownerUrlInfo.referenceToOthersSet.delete(reference);
-  return applyDependencyRemovalEffects(reference);
+  return checkForDependencyRemovalEffects(reference);
 };
 
 const canAddOrRemoveReference = (reference) => {
@@ -13351,7 +13351,7 @@ const canAddOrRemoveReference = (reference) => {
   return false;
 };
 
-const applyDependencyRemovalEffects = (reference) => {
+const checkForDependencyRemovalEffects = (reference) => {
   const { ownerUrlInfo } = reference;
   const { referenceToOthersSet } = ownerUrlInfo;
   if (reference.isImplicit && !reference.isInline) {
@@ -13386,6 +13386,7 @@ const applyDependencyRemovalEffects = (reference) => {
   referencedUrlInfo.referenceFromOthersSet.delete(reference);
 
   let firstReferenceFromOther;
+  let wasInlined;
   for (const referenceFromOther of referencedUrlInfo.referenceFromOthersSet) {
     if (referenceFromOther.urlInfo !== referencedUrlInfo) {
       continue;
@@ -13400,7 +13401,8 @@ const applyDependencyRemovalEffects = (reference) => {
     if (referenceFromOther.type === "http_request") {
       continue;
     }
-    if (referenceFromOther.gotInlined()) {
+    wasInlined = referenceFromOther.gotInlined();
+    if (wasInlined) {
       // the url info was inlined, an other reference is required
       // to consider the non-inlined urlInfo as used
       continue;
@@ -13418,6 +13420,9 @@ const applyDependencyRemovalEffects = (reference) => {
     }
     return false;
   }
+  if (wasInlined) {
+    return false;
+  }
   // referencedUrlInfo.firstReference = null;
   // referencedUrlInfo.lastReference = null;
   referencedUrlInfo.onDereferenced(reference);
@@ -19176,6 +19181,7 @@ const jsenvPluginVersionSearchParam = () => {
 };
 
 const jsenvPluginFsRedirection = ({
+  directoryContentMagicName,
   magicExtensions = ["inherit", ".js"],
   magicDirectoryIndex = true,
   preserveSymlinks = false,
@@ -19198,10 +19204,14 @@ const jsenvPluginFsRedirection = ({
       if (reference.subtype === "new_url_second_arg") {
         return `ignore:${reference.url}`;
       }
-      if (reference.specifierPathname.endsWith("/...")) {
+      if (
+        reference.specifierPathname.endsWith(`/${directoryContentMagicName}`)
+      ) {
         const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
         const directoryUrl = new URL(
-          reference.specifierPathname.replace("/...", "/").slice(1),
+          reference.specifierPathname
+            .replace(`/${directoryContentMagicName}`, "/")
+            .slice(1),
           rootDirectoryUrl,
         ).href;
         return directoryUrl;
@@ -19312,6 +19322,7 @@ const htmlFileUrlForDirectory = new URL(
   "./html/directory.html",
   import.meta.url,
 );
+const directoryContentMagicName = "...";
 
 const jsenvPluginProtocolFile = ({
   magicExtensions,
@@ -19321,6 +19332,7 @@ const jsenvPluginProtocolFile = ({
 }) => {
   return [
     jsenvPluginFsRedirection({
+      directoryContentMagicName,
       magicExtensions,
       magicDirectoryIndex,
       preserveSymlinks,
@@ -19360,8 +19372,9 @@ const jsenvPluginProtocolFile = ({
         if (reference.original) {
           const originalSpecifierPathname =
             reference.original.specifierPathname;
-
-          if (originalSpecifierPathname.endsWith("/...")) {
+          if (
+            originalSpecifierPathname.endsWith(`/${directoryContentMagicName}`)
+          ) {
             return originalSpecifierPathname;
           }
         }
@@ -19467,11 +19480,14 @@ const generateHtmlForDirectory = (directoryContentItems) => {
   directoryUrl = assertAndNormalizeDirectoryUrl(directoryUrl);
 
   const htmlForDirectory = String(readFileSync(htmlFileUrlForDirectory));
-  const directoryRelativeUrl = urlToRelativeUrl(directoryUrl, rootDirectoryUrl);
   const replacers = {
     directoryUrl,
     directoryNav: () =>
-      generateDirectoryNav(directoryRelativeUrl, rootDirectoryUrl),
+      generateDirectoryNav(directoryUrl, {
+        rootDirectoryUrl,
+        rootDirectoryUrlForServer:
+          directoryContentItems.rootDirectoryUrlForServer,
+      }),
     directoryContent: () => generateDirectoryContent(directoryContentItems),
   };
   const html = replacePlaceholders$1(htmlForDirectory, replacers);
@@ -19501,44 +19517,60 @@ const generateHtmlForENOENT = (
     ancestorDirectoryUrl,
     ancestorDirectoryRelativeUrl,
     ancestorDirectoryNav: () =>
-      generateDirectoryNav(ancestorDirectoryRelativeUrl, rootDirectoryUrl),
+      generateDirectoryNav(ancestorDirectoryUrl, {
+        rootDirectoryUrl,
+        rootDirectoryUrlForServer:
+          directoryContentItems.rootDirectoryUrlForServer,
+      }),
     ancestorDirectoryContent: () =>
       generateDirectoryContent(directoryContentItems),
   };
   const html = replacePlaceholders$1(htmlFor404AndAncestorDir, replacers);
   return html;
 };
-const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
+const generateDirectoryNav = (
+  entryDirectoryUrl,
+  { rootDirectoryUrl, rootDirectoryUrlForServer },
+) => {
+  const entryDirectoryRelativeUrl = urlToRelativeUrl(
+    entryDirectoryUrl,
+    rootDirectoryUrl,
+  );
+  const isDir = entryDirectoryRelativeUrl.endsWith("/");
   const rootDirectoryUrlName = urlToFilename$1(rootDirectoryUrl);
-  const relativeUrlWithRoot = relativeUrl
-    ? `${rootDirectoryUrlName}/${relativeUrl}`
-    : `${rootDirectoryUrlName}/`;
-  const isDir = relativeUrlWithRoot.endsWith("/");
-  const parts = isDir
-    ? relativeUrlWithRoot.slice(0, -1).split("/")
-    : relativeUrlWithRoot.split("/");
   const items = [];
-  items.push({
-    href: "/",
-    text: "/",
-  });
   let dirPartsHtml = "";
+  const parts =
+    `${rootDirectoryUrlName}/${entryDirectoryRelativeUrl.slice(0, -1)}`.split(
+      "/",
+    );
   let i = 0;
   while (i < parts.length) {
     const part = parts[i];
-    const href = i === 0 ? "/..." : `/${parts.slice(1, i + 1).join("/")}/`;
+    const directoryRelativeUrl = `${parts.slice(1, i + 1).join("/")}`;
+    const directoryUrl =
+      directoryRelativeUrl === ""
+        ? rootDirectoryUrl
+        : new URL(`${directoryRelativeUrl}/`, rootDirectoryUrl).href;
+    let href =
+      directoryUrl === rootDirectoryUrlForServer ||
+      urlIsInsideOf(directoryUrl, rootDirectoryUrlForServer)
+        ? urlToRelativeUrl(directoryUrl, rootDirectoryUrlForServer)
+        : directoryUrl;
+    if (href === "") {
+      href = `/${directoryContentMagicName}`;
+    }
     const text = part;
-    const isLastPart = i === parts.length - 1;
     items.push({
       href,
       text,
-      isCurrent: isLastPart,
     });
     i++;
   }
   i = 0;
-  for (const { href, text, isCurrent } of items) {
-    if (isCurrent) {
+  for (const { href, text } of items) {
+    const isLastPart = i === parts.length - 1;
+    if (isLastPart) {
       dirPartsHtml += `
       <span class="directory_nav_item" data-current>
         ${text}
@@ -19549,10 +19581,8 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
       <a class="directory_nav_item" href="${href}">
         ${text}
       </a>`;
-    if (i > 0) {
-      dirPartsHtml += `
+    dirPartsHtml += `
       <span class="directory_separator">/</span>`;
-    }
     i++;
   }
   if (isDir) {
@@ -19561,12 +19591,15 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
   }
   return dirPartsHtml;
 };
-const generateDirectoryContentItems = (directoryUrl, rootDirectoryUrl) => {
+const generateDirectoryContentItems = (
+  directoryUrl,
+  rootDirectoryUrlForServer,
+) => {
   let firstExistingDirectoryUrl = new URL("./", directoryUrl);
   while (!existsSync(firstExistingDirectoryUrl)) {
     firstExistingDirectoryUrl = new URL("../", firstExistingDirectoryUrl);
-    if (!urlIsInsideOf(firstExistingDirectoryUrl, rootDirectoryUrl)) {
-      firstExistingDirectoryUrl = new URL(rootDirectoryUrl);
+    if (!urlIsInsideOf(firstExistingDirectoryUrl, rootDirectoryUrlForServer)) {
+      firstExistingDirectoryUrl = new URL(rootDirectoryUrlForServer);
       break;
     }
   }
@@ -19576,37 +19609,42 @@ const generateDirectoryContentItems = (directoryUrl, rootDirectoryUrl) => {
     const fileUrlObject = new URL(filename, firstExistingDirectoryUrl);
     fileUrls.push(fileUrlObject);
   }
+  let rootDirectoryUrl = rootDirectoryUrlForServer;
   package_workspaces: {
-    if (String(firstExistingDirectoryUrl) !== String(rootDirectoryUrl)) {
-      break package_workspaces;
-    }
-    const packageDirectoryUrl = lookupPackageDirectory(rootDirectoryUrl);
+    const packageDirectoryUrl = lookupPackageDirectory(
+      rootDirectoryUrlForServer,
+    );
     if (!packageDirectoryUrl) {
       break package_workspaces;
     }
-    if (String(packageDirectoryUrl) === String(rootDirectoryUrl)) {
+    if (String(packageDirectoryUrl) === String(rootDirectoryUrlForServer)) {
       break package_workspaces;
     }
-    let packageContent;
-    try {
-      packageContent = JSON.parse(
-        readFileSync(new URL("package.json", packageDirectoryUrl), "utf8"),
-      );
-    } catch {
-      break package_workspaces;
-    }
-    const { workspaces } = packageContent;
-    if (Array.isArray(workspaces)) {
-      for (const workspace of workspaces) {
-        const workspaceUrlObject = new URL(workspace, packageDirectoryUrl);
-        const workspaceUrl = workspaceUrlObject.href;
-        if (workspaceUrl.endsWith("*")) {
-          const directoryUrl = ensurePathnameTrailingSlash(
-            workspaceUrl.slice(0, -1),
-          );
-          fileUrls.push(new URL(directoryUrl));
-        } else {
-          fileUrls.push(ensurePathnameTrailingSlash(workspaceUrlObject));
+    rootDirectoryUrl = packageDirectoryUrl;
+    if (
+      String(firstExistingDirectoryUrl) === String(rootDirectoryUrlForServer)
+    ) {
+      let packageContent;
+      try {
+        packageContent = JSON.parse(
+          readFileSync(new URL("package.json", packageDirectoryUrl), "utf8"),
+        );
+      } catch {
+        break package_workspaces;
+      }
+      const { workspaces } = packageContent;
+      if (Array.isArray(workspaces)) {
+        for (const workspace of workspaces) {
+          const workspaceUrlObject = new URL(workspace, packageDirectoryUrl);
+          const workspaceUrl = workspaceUrlObject.href;
+          if (workspaceUrl.endsWith("*")) {
+            const directoryUrl = ensurePathnameTrailingSlash(
+              workspaceUrl.slice(0, -1),
+            );
+            fileUrls.push(new URL(directoryUrl));
+          } else {
+            fileUrls.push(ensurePathnameTrailingSlash(workspaceUrlObject));
+          }
         }
       }
     }
@@ -19630,29 +19668,37 @@ const generateDirectoryContentItems = (directoryUrl, rootDirectoryUrl) => {
       sortedUrl,
       firstExistingDirectoryUrl,
     );
-    const fileUrlRelativeToRoot = urlToRelativeUrl(sortedUrl, rootDirectoryUrl);
+    const fileUrlRelativeToServer = urlToRelativeUrl(
+      sortedUrl,
+      rootDirectoryUrlForServer,
+    );
     const type = fileUrlRelativeToParent.endsWith("/") ? "dir" : "file";
     items.push({
       type,
       fileUrlRelativeToParent,
-      fileUrlRelativeToRoot,
+      fileUrlRelativeToServer,
     });
   }
+  items.rootDirectoryUrlForServer = rootDirectoryUrlForServer;
   items.rootDirectoryUrl = rootDirectoryUrl;
   items.firstExistingDirectoryUrl = firstExistingDirectoryUrl;
   return items;
 };
 const generateDirectoryContent = (directoryContentItems) => {
   if (directoryContentItems.length === 0) {
-    return `<p>Directory is empty</p>`;
+    return `<p class="directory_empty_message">Directory is empty</p>`;
   }
   let html = `<ul class="directory_content">`;
   for (const directoryContentItem of directoryContentItems) {
-    const { type, fileUrlRelativeToParent, fileUrlRelativeToRoot } =
+    const { type, fileUrlRelativeToParent, fileUrlRelativeToServer } =
       directoryContentItem;
+    let href = fileUrlRelativeToServer;
+    if (href === "") {
+      href = `${directoryContentMagicName}`;
+    }
     html += `
       <li class="directory_child" data-type="${type}">
-        <a href="/${fileUrlRelativeToRoot}">${fileUrlRelativeToParent}</a>
+        <a href="/${href}">${fileUrlRelativeToParent}</a>
       </li>`;
   }
   html += `\n  </ul>`;
@@ -20827,6 +20873,11 @@ const jsenvPluginAutoreloadServer = ({
                 // are lost and sourcemap is considered as pruned
                 continue;
               }
+              if (lastReferenceFromOther.type === "http_request") {
+                // no need to tell client to reload when a http request is pruned
+                // happens when reloading the current html page for instance
+                continue;
+              }
               const { ownerUrlInfo } = lastReferenceFromOther;
               if (!ownerUrlInfo.isUsed()) {
                 continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "39.10.1",
+  "version": "39.11.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {

package/src/helpers/event_emitter.js

@@ -10,9 +10,9 @@ export const createEventEmitter = () => {
     callbackSet.delete(callback);
   };
   const emit = (...args) => {
-    callbackSet.forEach((callback) => {
+    for (const callback of callbackSet) {
       callback(...args);
-    });
+    }
   };
   return { on, off, emit };
 };

package/src/kitchen/url_graph/references.js

@@ -22,7 +22,7 @@ export const createDependencies = (ownerUrlInfo) => {
 
     const stopCollecting = () => {
       for (const prevReferenceToOther of prevReferenceToOthersSet) {
-        applyDependencyRemovalEffects(prevReferenceToOther);
+        checkForDependencyRemovalEffects(prevReferenceToOther);
       }
       prevReferenceToOthersSet.clear();
     };
@@ -527,7 +527,7 @@ ${ownerUrlInfo.url}`,
     implicitRef.remove();
   }
   ownerUrlInfo.referenceToOthersSet.delete(reference);
-  return applyDependencyRemovalEffects(reference);
+  return checkForDependencyRemovalEffects(reference);
 };
 
 const canAddOrRemoveReference = (reference) => {
@@ -556,7 +556,7 @@ const canAddOrRemoveReference = (reference) => {
   return false;
 };
 
-const applyDependencyRemovalEffects = (reference) => {
+const checkForDependencyRemovalEffects = (reference) => {
   const { ownerUrlInfo } = reference;
   const { referenceToOthersSet } = ownerUrlInfo;
   if (reference.isImplicit && !reference.isInline) {
@@ -591,6 +591,7 @@ const applyDependencyRemovalEffects = (reference) => {
   referencedUrlInfo.referenceFromOthersSet.delete(reference);
 
   let firstReferenceFromOther;
+  let wasInlined;
   for (const referenceFromOther of referencedUrlInfo.referenceFromOthersSet) {
     if (referenceFromOther.urlInfo !== referencedUrlInfo) {
       continue;
@@ -605,7 +606,8 @@ const applyDependencyRemovalEffects = (reference) => {
     if (referenceFromOther.type === "http_request") {
       continue;
     }
-    if (referenceFromOther.gotInlined()) {
+    wasInlined = referenceFromOther.gotInlined();
+    if (wasInlined) {
       // the url info was inlined, an other reference is required
       // to consider the non-inlined urlInfo as used
       continue;
@@ -623,6 +625,9 @@ const applyDependencyRemovalEffects = (reference) => {
     }
     return false;
   }
+  if (wasInlined) {
+    return false;
+  }
   // referencedUrlInfo.firstReference = null;
   // referencedUrlInfo.lastReference = null;
   referencedUrlInfo.onDereferenced(reference);

package/src/plugins/autoreload/jsenv_plugin_autoreload_server.js

@@ -238,6 +238,11 @@ export const jsenvPluginAutoreloadServer = ({
                 // are lost and sourcemap is considered as pruned
                 continue;
               }
+              if (lastReferenceFromOther.type === "http_request") {
+                // no need to tell client to reload when a http request is pruned
+                // happens when reloading the current html page for instance
+                continue;
+              }
               const { ownerUrlInfo } = lastReferenceFromOther;
               if (!ownerUrlInfo.isUsed()) {
                 continue;

package/src/plugins/protocol_file/client/assets/directory.css

@@ -26,6 +26,11 @@ button {
   text-decoration: none;
   position: relative;
 }
+.directory_empty_message {
+  margin: 1em;
+  padding: 0.5em;
+  color: #bbbbbb;
+}
 .directory_content {
   margin: 10px 15px 10px 15px;
   list-style-type: none;

package/src/plugins/protocol_file/client/html_404_and_ancestor_dir.html

@@ -45,7 +45,7 @@
         No entry on the filesystem for <code>/${fileRelativeUrl}</code> (at
         ${fileUrl})
         <br />
-        Content of the ancestor directory is listed below:
+        Content of first ancestor directory is listed below:
       </span>
     </p>
     <h1 class="directory_nav">${ancestorDirectoryNav}</h1>

package/src/plugins/protocol_file/jsenv_plugin_fs_redirection.js

@@ -8,6 +8,7 @@ import { realpathSync } from "node:fs";
 import { pathToFileURL } from "node:url";
 
 export const jsenvPluginFsRedirection = ({
+  directoryContentMagicName,
   magicExtensions = ["inherit", ".js"],
   magicDirectoryIndex = true,
   preserveSymlinks = false,
@@ -30,10 +31,14 @@ export const jsenvPluginFsRedirection = ({
       if (reference.subtype === "new_url_second_arg") {
         return `ignore:${reference.url}`;
       }
-      if (reference.specifierPathname.endsWith("/...")) {
+      if (
+        reference.specifierPathname.endsWith(`/${directoryContentMagicName}`)
+      ) {
         const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
         const directoryUrl = new URL(
-          reference.specifierPathname.replace("/...", "/").slice(1),
+          reference.specifierPathname
+            .replace(`/${directoryContentMagicName}`, "/")
+            .slice(1),
           rootDirectoryUrl,
         ).href;
         return directoryUrl;

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -24,6 +24,7 @@ const htmlFileUrlForDirectory = new URL(
   "./client/directory.html",
   import.meta.url,
 );
+const directoryContentMagicName = "...";
 
 export const jsenvPluginProtocolFile = ({
   magicExtensions,
@@ -33,6 +34,7 @@ export const jsenvPluginProtocolFile = ({
 }) => {
   return [
     jsenvPluginFsRedirection({
+      directoryContentMagicName,
       magicExtensions,
       magicDirectoryIndex,
       preserveSymlinks,
@@ -72,8 +74,9 @@ export const jsenvPluginProtocolFile = ({
         if (reference.original) {
           const originalSpecifierPathname =
             reference.original.specifierPathname;
-
-          if (originalSpecifierPathname.endsWith("/...")) {
+          if (
+            originalSpecifierPathname.endsWith(`/${directoryContentMagicName}`)
+          ) {
             return originalSpecifierPathname;
           }
         }
@@ -179,11 +182,14 @@ const generateHtmlForDirectory = (directoryContentItems) => {
   directoryUrl = assertAndNormalizeDirectoryUrl(directoryUrl);
 
   const htmlForDirectory = String(readFileSync(htmlFileUrlForDirectory));
-  const directoryRelativeUrl = urlToRelativeUrl(directoryUrl, rootDirectoryUrl);
   const replacers = {
     directoryUrl,
     directoryNav: () =>
-      generateDirectoryNav(directoryRelativeUrl, rootDirectoryUrl),
+      generateDirectoryNav(directoryUrl, {
+        rootDirectoryUrl,
+        rootDirectoryUrlForServer:
+          directoryContentItems.rootDirectoryUrlForServer,
+      }),
     directoryContent: () => generateDirectoryContent(directoryContentItems),
   };
   const html = replacePlaceholders(htmlForDirectory, replacers);
@@ -213,44 +219,60 @@ const generateHtmlForENOENT = (
     ancestorDirectoryUrl,
     ancestorDirectoryRelativeUrl,
     ancestorDirectoryNav: () =>
-      generateDirectoryNav(ancestorDirectoryRelativeUrl, rootDirectoryUrl),
+      generateDirectoryNav(ancestorDirectoryUrl, {
+        rootDirectoryUrl,
+        rootDirectoryUrlForServer:
+          directoryContentItems.rootDirectoryUrlForServer,
+      }),
     ancestorDirectoryContent: () =>
       generateDirectoryContent(directoryContentItems),
   };
   const html = replacePlaceholders(htmlFor404AndAncestorDir, replacers);
   return html;
 };
-const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
+const generateDirectoryNav = (
+  entryDirectoryUrl,
+  { rootDirectoryUrl, rootDirectoryUrlForServer },
+) => {
+  const entryDirectoryRelativeUrl = urlToRelativeUrl(
+    entryDirectoryUrl,
+    rootDirectoryUrl,
+  );
+  const isDir = entryDirectoryRelativeUrl.endsWith("/");
   const rootDirectoryUrlName = urlToFilename(rootDirectoryUrl);
-  const relativeUrlWithRoot = relativeUrl
-    ? `${rootDirectoryUrlName}/${relativeUrl}`
-    : `${rootDirectoryUrlName}/`;
-  const isDir = relativeUrlWithRoot.endsWith("/");
-  const parts = isDir
-    ? relativeUrlWithRoot.slice(0, -1).split("/")
-    : relativeUrlWithRoot.split("/");
   const items = [];
-  items.push({
-    href: "/",
-    text: "/",
-  });
   let dirPartsHtml = "";
+  const parts =
+    `${rootDirectoryUrlName}/${entryDirectoryRelativeUrl.slice(0, -1)}`.split(
+      "/",
+    );
   let i = 0;
   while (i < parts.length) {
     const part = parts[i];
-    const href = i === 0 ? "/..." : `/${parts.slice(1, i + 1).join("/")}/`;
+    const directoryRelativeUrl = `${parts.slice(1, i + 1).join("/")}`;
+    const directoryUrl =
+      directoryRelativeUrl === ""
+        ? rootDirectoryUrl
+        : new URL(`${directoryRelativeUrl}/`, rootDirectoryUrl).href;
+    let href =
+      directoryUrl === rootDirectoryUrlForServer ||
+      urlIsInsideOf(directoryUrl, rootDirectoryUrlForServer)
+        ? urlToRelativeUrl(directoryUrl, rootDirectoryUrlForServer)
+        : directoryUrl;
+    if (href === "") {
+      href = `/${directoryContentMagicName}`;
+    }
     const text = part;
-    const isLastPart = i === parts.length - 1;
     items.push({
       href,
       text,
-      isCurrent: isLastPart,
     });
     i++;
   }
   i = 0;
-  for (const { href, text, isCurrent } of items) {
-    if (isCurrent) {
+  for (const { href, text } of items) {
+    const isLastPart = i === parts.length - 1;
+    if (isLastPart) {
       dirPartsHtml += `
       <span class="directory_nav_item" data-current>
         ${text}
@@ -261,10 +283,8 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
       <a class="directory_nav_item" href="${href}">
         ${text}
       </a>`;
-    if (i > 0) {
-      dirPartsHtml += `
+    dirPartsHtml += `
       <span class="directory_separator">/</span>`;
-    }
     i++;
   }
   if (isDir) {
@@ -273,12 +293,15 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
   }
   return dirPartsHtml;
 };
-const generateDirectoryContentItems = (directoryUrl, rootDirectoryUrl) => {
+const generateDirectoryContentItems = (
+  directoryUrl,
+  rootDirectoryUrlForServer,
+) => {
   let firstExistingDirectoryUrl = new URL("./", directoryUrl);
   while (!existsSync(firstExistingDirectoryUrl)) {
     firstExistingDirectoryUrl = new URL("../", firstExistingDirectoryUrl);
-    if (!urlIsInsideOf(firstExistingDirectoryUrl, rootDirectoryUrl)) {
-      firstExistingDirectoryUrl = new URL(rootDirectoryUrl);
+    if (!urlIsInsideOf(firstExistingDirectoryUrl, rootDirectoryUrlForServer)) {
+      firstExistingDirectoryUrl = new URL(rootDirectoryUrlForServer);
       break;
     }
   }
@@ -288,37 +311,42 @@ const generateDirectoryContentItems = (directoryUrl, rootDirectoryUrl) => {
     const fileUrlObject = new URL(filename, firstExistingDirectoryUrl);
     fileUrls.push(fileUrlObject);
   }
+  let rootDirectoryUrl = rootDirectoryUrlForServer;
   package_workspaces: {
-    if (String(firstExistingDirectoryUrl) !== String(rootDirectoryUrl)) {
-      break package_workspaces;
-    }
-    const packageDirectoryUrl = lookupPackageDirectory(rootDirectoryUrl);
+    const packageDirectoryUrl = lookupPackageDirectory(
+      rootDirectoryUrlForServer,
+    );
     if (!packageDirectoryUrl) {
       break package_workspaces;
     }
-    if (String(packageDirectoryUrl) === String(rootDirectoryUrl)) {
-      break package_workspaces;
-    }
-    let packageContent;
-    try {
-      packageContent = JSON.parse(
-        readFileSync(new URL("package.json", packageDirectoryUrl), "utf8"),
-      );
-    } catch {
+    if (String(packageDirectoryUrl) === String(rootDirectoryUrlForServer)) {
       break package_workspaces;
     }
-    const { workspaces } = packageContent;
-    if (Array.isArray(workspaces)) {
-      for (const workspace of workspaces) {
-        const workspaceUrlObject = new URL(workspace, packageDirectoryUrl);
-        const workspaceUrl = workspaceUrlObject.href;
-        if (workspaceUrl.endsWith("*")) {
-          const directoryUrl = ensurePathnameTrailingSlash(
-            workspaceUrl.slice(0, -1),
-          );
-          fileUrls.push(new URL(directoryUrl));
-        } else {
-          fileUrls.push(ensurePathnameTrailingSlash(workspaceUrlObject));
+    rootDirectoryUrl = packageDirectoryUrl;
+    if (
+      String(firstExistingDirectoryUrl) === String(rootDirectoryUrlForServer)
+    ) {
+      let packageContent;
+      try {
+        packageContent = JSON.parse(
+          readFileSync(new URL("package.json", packageDirectoryUrl), "utf8"),
+        );
+      } catch {
+        break package_workspaces;
+      }
+      const { workspaces } = packageContent;
+      if (Array.isArray(workspaces)) {
+        for (const workspace of workspaces) {
+          const workspaceUrlObject = new URL(workspace, packageDirectoryUrl);
+          const workspaceUrl = workspaceUrlObject.href;
+          if (workspaceUrl.endsWith("*")) {
+            const directoryUrl = ensurePathnameTrailingSlash(
+              workspaceUrl.slice(0, -1),
+            );
+            fileUrls.push(new URL(directoryUrl));
+          } else {
+            fileUrls.push(ensurePathnameTrailingSlash(workspaceUrlObject));
+          }
         }
       }
     }
@@ -342,29 +370,37 @@ const generateDirectoryContentItems = (directoryUrl, rootDirectoryUrl) => {
       sortedUrl,
       firstExistingDirectoryUrl,
     );
-    const fileUrlRelativeToRoot = urlToRelativeUrl(sortedUrl, rootDirectoryUrl);
+    const fileUrlRelativeToServer = urlToRelativeUrl(
+      sortedUrl,
+      rootDirectoryUrlForServer,
+    );
     const type = fileUrlRelativeToParent.endsWith("/") ? "dir" : "file";
     items.push({
       type,
       fileUrlRelativeToParent,
-      fileUrlRelativeToRoot,
+      fileUrlRelativeToServer,
     });
   }
+  items.rootDirectoryUrlForServer = rootDirectoryUrlForServer;
   items.rootDirectoryUrl = rootDirectoryUrl;
   items.firstExistingDirectoryUrl = firstExistingDirectoryUrl;
   return items;
 };
 const generateDirectoryContent = (directoryContentItems) => {
   if (directoryContentItems.length === 0) {
-    return `<p>Directory is empty</p>`;
+    return `<p class="directory_empty_message">Directory is empty</p>`;
   }
   let html = `<ul class="directory_content">`;
   for (const directoryContentItem of directoryContentItems) {
-    const { type, fileUrlRelativeToParent, fileUrlRelativeToRoot } =
+    const { type, fileUrlRelativeToParent, fileUrlRelativeToServer } =
       directoryContentItem;
+    let href = fileUrlRelativeToServer;
+    if (href === "") {
+      href = `${directoryContentMagicName}`;
+    }
     html += `
       <li class="directory_child" data-type="${type}">
-        <a href="/${fileUrlRelativeToRoot}">${fileUrlRelativeToParent}</a>
+        <a href="/${href}">${fileUrlRelativeToParent}</a>
       </li>`;
   }
   html += `\n  </ul>`;