@jsenv/core 39.9.7 → 39.10.1

package/dist/html/directory.html

@@ -15,6 +15,7 @@
       }
       
       .directory_nav {
+        gap: .3em;
         margin: 20px 25px 15px;
         font-size: 16px;
         font-weight: bold;
@@ -26,14 +27,6 @@
         position: relative;
       }
       
-      .directory_separator {
-        margin: 0 .3em;
-      }
-      
-      .directory_separator:first-child {
-        margin-left: 0;
-      }
-      
       .directory_content {
         border-radius: 3px;
         margin: 10px 15px;

package/dist/html/html_404_and_ancestor_dir.html

@@ -15,6 +15,7 @@
       }
       
       .directory_nav {
+        gap: .3em;
         margin: 20px 25px 15px;
         font-size: 16px;
         font-weight: bold;
@@ -26,14 +27,6 @@
         position: relative;
       }
       
-      .directory_separator {
-        margin: 0 .3em;
-      }
-      
-      .directory_separator:first-child {
-        margin-left: 0;
-      }
-      
       .directory_content {
         border-radius: 3px;
         margin: 10px 15px;

package/dist/jsenv_core.js

@@ -6981,6 +6981,14 @@ const startServer = async ({
         nodeResponse.end();
         return;
       }
+      try {
+        // eslint-disable-next-line no-new
+        new URL(nodeRequest.url, "http://example.com/");
+      } catch {
+        nodeResponse.writeHead(400, "Request url is not supported");
+        nodeResponse.end();
+        return;
+      }
 
       const receiveRequestOperation = Abort.startOperation();
       receiveRequestOperation.addAbortSource((abort) => {
@@ -8053,6 +8061,7 @@ const fetchFileSystem = async (
       : "no-store",
     canReadDirectory = false,
     rootDirectoryUrl, //  = `${pathToFileURL(process.cwd())}/`,
+    ENOENTFallback = () => {},
   } = {},
 ) => {
   const urlString = asUrlString(filesystemUrl);
@@ -8110,100 +8119,109 @@ const fetchFileSystem = async (
     };
   }
 
-  const sourceUrl = `file://${new URL(urlString).pathname}`;
-  try {
-    const [readStatTiming, sourceStat] = await timeFunction(
-      "file service>read file stat",
-      () => statSync(new URL(sourceUrl)),
-    );
-    if (sourceStat.isDirectory()) {
-      if (canReadDirectory) {
-        return serveDirectory(urlString, {
+  const serveFile = async (fileUrl) => {
+    try {
+      const [readStatTiming, fileStat] = timeFunction(
+        "file service>read file stat",
+        () => statSync(new URL(fileUrl)),
+      );
+      if (fileStat.isDirectory()) {
+        if (canReadDirectory) {
+          return serveDirectory(fileUrl, {
+            headers,
+            canReadDirectory,
+            rootDirectoryUrl,
+          });
+        }
+        return {
+          status: 403,
+          statusText: "not allowed to read directory",
+        };
+      }
+      // not a file, give up
+      if (!fileStat.isFile()) {
+        return {
+          status: 404,
+          timing: readStatTiming,
+        };
+      }
+
+      const clientCacheResponse = await getClientCacheResponse({
+        headers,
+        etagEnabled,
+        etagMemory,
+        etagMemoryMaxSize,
+        mtimeEnabled,
+        fileStat,
+        fileUrl,
+      });
+
+      // send 304 (redirect response to client cache)
+      // because the response body does not have to be transmitted
+      if (clientCacheResponse.status === 304) {
+        return composeTwoResponses(
+          {
+            timing: readStatTiming,
+            headers: {
+              ...(cacheControl ? { "cache-control": cacheControl } : {}),
+            },
+          },
+          clientCacheResponse,
+        );
+      }
+
+      let response;
+      if (compressionEnabled && fileStat.size >= compressionSizeThreshold) {
+        const compressedResponse = await getCompressedResponse({
           headers,
-          canReadDirectory,
-          rootDirectoryUrl,
+          fileUrl,
+        });
+        if (compressedResponse) {
+          response = compressedResponse;
+        }
+      }
+      if (!response) {
+        response = await getRawResponse({
+          fileStat,
+          fileUrl,
         });
       }
-      return {
-        status: 403,
-        statusText: "not allowed to read directory",
-      };
-    }
-    // not a file, give up
-    if (!sourceStat.isFile()) {
-      return {
-        status: 404,
-        timing: readStatTiming,
-      };
-    }
-
-    const clientCacheResponse = await getClientCacheResponse({
-      headers,
-      etagEnabled,
-      etagMemory,
-      etagMemoryMaxSize,
-      mtimeEnabled,
-      sourceStat,
-      sourceUrl,
-    });
 
-    // send 304 (redirect response to client cache)
-    // because the response body does not have to be transmitted
-    if (clientCacheResponse.status === 304) {
-      return composeTwoResponses(
+      const intermediateResponse = composeTwoResponses(
         {
           timing: readStatTiming,
           headers: {
             ...(cacheControl ? { "cache-control": cacheControl } : {}),
+            // even if client cache is disabled, server can still
+            // send his own cache control but client should just ignore it
+            // and keep sending cache-control: 'no-store'
+            // if not, uncomment the line below to preserve client
+            // desire to ignore cache
+            // ...(headers["cache-control"] === "no-store" ? { "cache-control": "no-store" } : {}),
           },
         },
-        clientCacheResponse,
+        response,
       );
-    }
-
-    let response;
-    if (compressionEnabled && sourceStat.size >= compressionSizeThreshold) {
-      const compressedResponse = await getCompressedResponse({
-        headers,
-        sourceUrl,
-      });
-      if (compressedResponse) {
-        response = compressedResponse;
+      return composeTwoResponses(intermediateResponse, clientCacheResponse);
+    } catch (e) {
+      if (e.code === "ENOENT") {
+        const fallbackFileUrl = ENOENTFallback();
+        if (fallbackFileUrl) {
+          return serveFile(fallbackFileUrl);
+        }
       }
+      return composeTwoResponses(
+        {
+          headers: {
+            ...(cacheControl ? { "cache-control": cacheControl } : {}),
+          },
+        },
+        convertFileSystemErrorToResponseProperties(e) || {},
+      );
     }
-    if (!response) {
-      response = await getRawResponse({
-        sourceStat,
-        sourceUrl,
-      });
-    }
+  };
 
-    const intermediateResponse = composeTwoResponses(
-      {
-        timing: readStatTiming,
-        headers: {
-          ...(cacheControl ? { "cache-control": cacheControl } : {}),
-          // even if client cache is disabled, server can still
-          // send his own cache control but client should just ignore it
-          // and keep sending cache-control: 'no-store'
-          // if not, uncomment the line below to preserve client
-          // desire to ignore cache
-          // ...(headers["cache-control"] === "no-store" ? { "cache-control": "no-store" } : {}),
-        },
-      },
-      response,
-    );
-    return composeTwoResponses(intermediateResponse, clientCacheResponse);
-  } catch (e) {
-    return composeTwoResponses(
-      {
-        headers: {
-          ...(cacheControl ? { "cache-control": cacheControl } : {}),
-        },
-      },
-      convertFileSystemErrorToResponseProperties(e) || {},
-    );
-  }
+  return serveFile(`file://${new URL(urlString).pathname}`);
 };
 
 const create500Response = (message) => {
@@ -8223,8 +8241,8 @@ const getClientCacheResponse = async ({
   etagMemory,
   etagMemoryMaxSize,
   mtimeEnabled,
-  sourceStat,
-  sourceUrl,
+  fileStat,
+  fileUrl,
 }) => {
   // here you might be tempted to add || headers["cache-control"] === "no-cache"
   // but no-cache means resource can be cache but must be revalidated (yeah naming is strange)
@@ -8243,15 +8261,15 @@ const getClientCacheResponse = async ({
       headers,
       etagMemory,
       etagMemoryMaxSize,
-      sourceStat,
-      sourceUrl,
+      fileStat,
+      fileUrl,
     });
   }
 
   if (mtimeEnabled) {
     return getMtimeResponse({
       headers,
-      sourceStat,
+      fileStat,
     });
   }
 
@@ -8262,8 +8280,8 @@ const getEtagResponse = async ({
   headers,
   etagMemory,
   etagMemoryMaxSize,
-  sourceUrl,
-  sourceStat,
+  fileUrl,
+  fileStat,
 }) => {
   const [computeEtagTiming, fileContentEtag] = await timeFunction(
     "file service>generate file etag",
@@ -8271,8 +8289,8 @@ const getEtagResponse = async ({
       computeEtag({
         etagMemory,
         etagMemoryMaxSize,
-        sourceUrl,
-        sourceStat,
+        fileUrl,
+        fileStat,
       }),
   );
 
@@ -8300,20 +8318,20 @@ const ETAG_MEMORY_MAP = new Map();
 const computeEtag = async ({
   etagMemory,
   etagMemoryMaxSize,
-  sourceUrl,
-  sourceStat,
+  fileUrl,
+  fileStat,
 }) => {
   if (etagMemory) {
-    const etagMemoryEntry = ETAG_MEMORY_MAP.get(sourceUrl);
+    const etagMemoryEntry = ETAG_MEMORY_MAP.get(fileUrl);
     if (
       etagMemoryEntry &&
-      fileStatAreTheSame(etagMemoryEntry.sourceStat, sourceStat)
+      fileStatAreTheSame(etagMemoryEntry.fileStat, fileStat)
     ) {
       return etagMemoryEntry.eTag;
     }
   }
   const fileContentAsBuffer = await new Promise((resolve, reject) => {
-    readFile(new URL(sourceUrl), (error, buffer) => {
+    readFile(new URL(fileUrl), (error, buffer) => {
       if (error) {
         reject(error);
       } else {
@@ -8327,7 +8345,7 @@ const computeEtag = async ({
       const firstKey = Array.from(ETAG_MEMORY_MAP.keys())[0];
       ETAG_MEMORY_MAP.delete(firstKey);
     }
-    ETAG_MEMORY_MAP.set(sourceUrl, { sourceStat, eTag });
+    ETAG_MEMORY_MAP.set(fileUrl, { fileStat, eTag });
   }
   return eTag;
 };
@@ -8352,7 +8370,7 @@ const fileStatKeysToCompare = [
   "blksize",
 ];
 
-const getMtimeResponse = async ({ headers, sourceStat }) => {
+const getMtimeResponse = async ({ headers, fileStat }) => {
   if ("if-modified-since" in headers) {
     let cachedModificationDate;
     try {
@@ -8364,7 +8382,7 @@ const getMtimeResponse = async ({ headers, sourceStat }) => {
       };
     }
 
-    const actualModificationDate = dateToSecondsPrecision(sourceStat.mtime);
+    const actualModificationDate = dateToSecondsPrecision(fileStat.mtime);
     if (Number(cachedModificationDate) >= Number(actualModificationDate)) {
       return {
         status: 304,
@@ -8375,12 +8393,12 @@ const getMtimeResponse = async ({ headers, sourceStat }) => {
   return {
     status: 200,
     headers: {
-      "last-modified": dateToUTCString(sourceStat.mtime),
+      "last-modified": dateToUTCString(fileStat.mtime),
     },
   };
 };
 
-const getCompressedResponse = async ({ sourceUrl, headers }) => {
+const getCompressedResponse = async ({ fileUrl, headers }) => {
   const acceptedCompressionFormat = pickContentEncoding(
     { headers },
     Object.keys(availableCompressionFormats),
@@ -8389,7 +8407,7 @@ const getCompressedResponse = async ({ sourceUrl, headers }) => {
     return null;
   }
 
-  const fileReadableStream = fileUrlToReadableStream(sourceUrl);
+  const fileReadableStream = fileUrlToReadableStream(fileUrl);
   const body =
     await availableCompressionFormats[acceptedCompressionFormat](
       fileReadableStream,
@@ -8398,7 +8416,7 @@ const getCompressedResponse = async ({ sourceUrl, headers }) => {
   return {
     status: 200,
     headers: {
-      "content-type": CONTENT_TYPE.fromUrlExtension(sourceUrl),
+      "content-type": CONTENT_TYPE.fromUrlExtension(fileUrl),
       "content-encoding": acceptedCompressionFormat,
       "vary": "accept-encoding",
     },
@@ -8428,14 +8446,14 @@ const availableCompressionFormats = {
   },
 };
 
-const getRawResponse = async ({ sourceUrl, sourceStat }) => {
+const getRawResponse = async ({ fileUrl, fileStat }) => {
   return {
     status: 200,
     headers: {
-      "content-type": CONTENT_TYPE.fromUrlExtension(sourceUrl),
-      "content-length": sourceStat.size,
+      "content-type": CONTENT_TYPE.fromUrlExtension(fileUrl),
+      "content-length": fileStat.size,
     },
-    body: fileUrlToReadableStream(sourceUrl),
+    body: fileUrlToReadableStream(fileUrl),
   };
 };
 
@@ -19180,6 +19198,14 @@ const jsenvPluginFsRedirection = ({
       if (reference.subtype === "new_url_second_arg") {
         return `ignore:${reference.url}`;
       }
+      if (reference.specifierPathname.endsWith("/...")) {
+        const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
+        const directoryUrl = new URL(
+          reference.specifierPathname.replace("/...", "/").slice(1),
+          rootDirectoryUrl,
+        ).href;
+        return directoryUrl;
+      }
       // ignore "./" on new URL("./")
       // if (
       //   reference.subtype === "new_url_first_arg" &&
@@ -19331,6 +19357,14 @@ const jsenvPluginProtocolFile = ({
         if (!generatedUrl.startsWith("file:")) {
           return null;
         }
+        if (reference.original) {
+          const originalSpecifierPathname =
+            reference.original.specifierPathname;
+
+          if (originalSpecifierPathname.endsWith("/...")) {
+            return originalSpecifierPathname;
+          }
+        }
         const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
         if (urlIsInsideOf(generatedUrl, rootDirectoryUrl)) {
           const result = `/${urlToRelativeUrl(generatedUrl, rootDirectoryUrl)}`;
@@ -19483,14 +19517,28 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
   const parts = isDir
     ? relativeUrlWithRoot.slice(0, -1).split("/")
     : relativeUrlWithRoot.split("/");
+  const items = [];
+  items.push({
+    href: "/",
+    text: "/",
+  });
   let dirPartsHtml = "";
   let i = 0;
   while (i < parts.length) {
     const part = parts[i];
-    const href = i === 0 ? "/" : `/${parts.slice(1, i + 1).join("/")}/`;
+    const href = i === 0 ? "/..." : `/${parts.slice(1, i + 1).join("/")}/`;
     const text = part;
     const isLastPart = i === parts.length - 1;
-    if (isLastPart) {
+    items.push({
+      href,
+      text,
+      isCurrent: isLastPart,
+    });
+    i++;
+  }
+  i = 0;
+  for (const { href, text, isCurrent } of items) {
+    if (isCurrent) {
       dirPartsHtml += `
       <span class="directory_nav_item" data-current>
         ${text}
@@ -19501,13 +19549,15 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
       <a class="directory_nav_item" href="${href}">
         ${text}
       </a>`;
-    dirPartsHtml += `
-    <span class="directory_separator">/</span>`;
+    if (i > 0) {
+      dirPartsHtml += `
+      <span class="directory_separator">/</span>`;
+    }
     i++;
   }
   if (isDir) {
     dirPartsHtml += `
-    <span class="directory_separator">/</span>`;
+      <span class="directory_separator">/</span>`;
   }
   return dirPartsHtml;
 };
@@ -24497,19 +24547,26 @@ const createBuildFilesService = ({ buildDirectoryUrl, buildMainFilePath }) => {
         resource: `/${buildMainFilePath}`,
       };
     }
-    return fetchFileSystem(
-      new URL(request.resource.slice(1), buildDirectoryUrl),
-      {
-        headers: request.headers,
-        cacheControl: urlIsVersioned
-          ? `private,max-age=${SECONDS_IN_30_DAYS},immutable`
-          : "private,max-age=0,must-revalidate",
-        etagEnabled: true,
-        compressionEnabled: !request.pathname.endsWith(".mp4"),
-        rootDirectoryUrl: buildDirectoryUrl,
-        canReadDirectory: true,
+    const urlObject = new URL(request.resource.slice(1), buildDirectoryUrl);
+    return fetchFileSystem(urlObject, {
+      headers: request.headers,
+      cacheControl: urlIsVersioned
+        ? `private,max-age=${SECONDS_IN_30_DAYS},immutable`
+        : "private,max-age=0,must-revalidate",
+      etagEnabled: true,
+      compressionEnabled: !request.pathname.endsWith(".mp4"),
+      rootDirectoryUrl: buildDirectoryUrl,
+      canReadDirectory: true,
+      ENOENTFallback: () => {
+        if (
+          !urlToExtension$1(urlObject) &&
+          !urlToPathname$1(urlObject).endsWith("/")
+        ) {
+          return new URL(buildMainFilePath, buildDirectoryUrl);
+        }
+        return null;
       },
-    );
+    });
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "39.9.7",
+  "version": "39.10.1",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -81,7 +81,7 @@
     "@jsenv/plugin-supervisor": "1.6.3",
     "@jsenv/plugin-transpilation": "1.4.92",
     "@jsenv/runtime-compat": "1.3.1",
-    "@jsenv/server": "15.3.3",
+    "@jsenv/server": "15.4.0",
     "@jsenv/sourcemap": "1.2.30",
     "@jsenv/url-meta": "8.5.2",
     "@jsenv/urls": "2.6.0",

package/src/build/start_build_server.js

@@ -23,6 +23,7 @@ import {
   jsenvServiceErrorHandler,
   startServer,
 } from "@jsenv/server";
+import { urlToExtension, urlToPathname } from "@jsenv/urls";
 import { existsSync } from "node:fs";
 
 /**
@@ -168,19 +169,26 @@ const createBuildFilesService = ({ buildDirectoryUrl, buildMainFilePath }) => {
         resource: `/${buildMainFilePath}`,
       };
     }
-    return fetchFileSystem(
-      new URL(request.resource.slice(1), buildDirectoryUrl),
-      {
-        headers: request.headers,
-        cacheControl: urlIsVersioned
-          ? `private,max-age=${SECONDS_IN_30_DAYS},immutable`
-          : "private,max-age=0,must-revalidate",
-        etagEnabled: true,
-        compressionEnabled: !request.pathname.endsWith(".mp4"),
-        rootDirectoryUrl: buildDirectoryUrl,
-        canReadDirectory: true,
+    const urlObject = new URL(request.resource.slice(1), buildDirectoryUrl);
+    return fetchFileSystem(urlObject, {
+      headers: request.headers,
+      cacheControl: urlIsVersioned
+        ? `private,max-age=${SECONDS_IN_30_DAYS},immutable`
+        : "private,max-age=0,must-revalidate",
+      etagEnabled: true,
+      compressionEnabled: !request.pathname.endsWith(".mp4"),
+      rootDirectoryUrl: buildDirectoryUrl,
+      canReadDirectory: true,
+      ENOENTFallback: () => {
+        if (
+          !urlToExtension(urlObject) &&
+          !urlToPathname(urlObject).endsWith("/")
+        ) {
+          return new URL(buildMainFilePath, buildDirectoryUrl);
+        }
+        return null;
       },
-    );
+    });
   };
 };
 

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

@@ -20,17 +20,12 @@ button {
   font-weight: bold;
   margin: 20px 25px 15px 25px;
   display: flex;
+  gap: 0.3em;
 }
 .directory_nav_item {
   text-decoration: none;
   position: relative;
 }
-.directory_separator {
-  margin: 0 0.3em;
-}
-.directory_separator:first-child {
-  margin-left: 0;
-}
 .directory_content {
   margin: 10px 15px 10px 15px;
   list-style-type: none;

package/src/plugins/protocol_file/jsenv_plugin_fs_redirection.js

@@ -30,6 +30,14 @@ export const jsenvPluginFsRedirection = ({
       if (reference.subtype === "new_url_second_arg") {
         return `ignore:${reference.url}`;
       }
+      if (reference.specifierPathname.endsWith("/...")) {
+        const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
+        const directoryUrl = new URL(
+          reference.specifierPathname.replace("/...", "/").slice(1),
+          rootDirectoryUrl,
+        ).href;
+        return directoryUrl;
+      }
       // ignore "./" on new URL("./")
       // if (
       //   reference.subtype === "new_url_first_arg" &&

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -69,6 +69,14 @@ export const jsenvPluginProtocolFile = ({
         if (!generatedUrl.startsWith("file:")) {
           return null;
         }
+        if (reference.original) {
+          const originalSpecifierPathname =
+            reference.original.specifierPathname;
+
+          if (originalSpecifierPathname.endsWith("/...")) {
+            return originalSpecifierPathname;
+          }
+        }
         const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
         if (urlIsInsideOf(generatedUrl, rootDirectoryUrl)) {
           const result = `/${urlToRelativeUrl(generatedUrl, rootDirectoryUrl)}`;
@@ -221,14 +229,28 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
   const parts = isDir
     ? relativeUrlWithRoot.slice(0, -1).split("/")
     : relativeUrlWithRoot.split("/");
+  const items = [];
+  items.push({
+    href: "/",
+    text: "/",
+  });
   let dirPartsHtml = "";
   let i = 0;
   while (i < parts.length) {
     const part = parts[i];
-    const href = i === 0 ? "/" : `/${parts.slice(1, i + 1).join("/")}/`;
+    const href = i === 0 ? "/..." : `/${parts.slice(1, i + 1).join("/")}/`;
     const text = part;
     const isLastPart = i === parts.length - 1;
-    if (isLastPart) {
+    items.push({
+      href,
+      text,
+      isCurrent: isLastPart,
+    });
+    i++;
+  }
+  i = 0;
+  for (const { href, text, isCurrent } of items) {
+    if (isCurrent) {
       dirPartsHtml += `
       <span class="directory_nav_item" data-current>
         ${text}
@@ -239,13 +261,15 @@ const generateDirectoryNav = (relativeUrl, rootDirectoryUrl) => {
       <a class="directory_nav_item" href="${href}">
         ${text}
       </a>`;
-    dirPartsHtml += `
-    <span class="directory_separator">/</span>`;
+    if (i > 0) {
+      dirPartsHtml += `
+      <span class="directory_separator">/</span>`;
+    }
     i++;
   }
   if (isDir) {
     dirPartsHtml += `
-    <span class="directory_separator">/</span>`;
+      <span class="directory_separator">/</span>`;
   }
   return dirPartsHtml;
 };