@jsenv/core 40.12.2 → 40.12.4

package/src/plugins/protocol_file/jsenv_plugin_directory_listing.js

@@ -39,9 +39,8 @@ import { existsSync, lstatSync, readdirSync } from "node:fs";
 import { getDirectoryWatchPatterns } from "../../helpers/watch_source_files.js";
 import { FILE_AND_SERVER_URLS_CONVERTER } from "../../kitchen/file_and_server_urls_converter.js";
 
-const htmlFileUrlForDirectory = import.meta.resolve(
-  "./client/directory_listing.html",
-);
+const htmlFileUrlForDirectory = import.meta
+  .resolve("./client/directory_listing.html");
 
 export const jsenvPluginDirectoryListing = ({
   spa,
@@ -103,7 +102,7 @@ export const jsenvPluginDirectoryListing = ({
       if (!acceptsHtml) {
         return null;
       }
-      reference.fsStat = null; // reset fsStat, now it's not a directory anyor
+      reference.fsStat = null; // reset fsStat as it's not a directory anymore
       return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(url)}`;
     },
     transformUrlContent: {

package/src/plugins/protocol_file/jsenv_plugin_fs_redirection.js

@@ -3,12 +3,7 @@ import {
   applyFileSystemMagicResolution,
   getExtensionsToTry,
 } from "@jsenv/node-esm-resolution";
-import {
-  urlIsOrIsInsideOf,
-  urlToExtension,
-  urlToFilename,
-  urlToPathname,
-} from "@jsenv/urls";
+import { urlIsOrIsInsideOf, urlToExtension, urlToFilename } from "@jsenv/urls";
 import { existsSync, realpathSync } from "node:fs";
 import { pathToFileURL } from "node:url";
 
@@ -94,19 +89,13 @@ export const jsenvPluginFsRedirection = ({
           applyFsStatEffectsOnUrlObject(urlObject, fsStat);
         }
       }
-      if (!fsStat) {
-        // for SPA we want to serve the root HTML file only when:
-        // 1. There is no corresponding file on the filesystem
-        // 2. The url pathname does not have an extension
-        //    This point assume client is requesting a file when there is an extension
-        //    and it assumes all routes will not use extension
-        // 3. The url pathname does not ends with "/"
-        //    In that case we assume client explicitely asks to load a directory
-        if (
-          spa &&
-          !urlToExtension(urlObject) &&
-          !urlToPathname(urlObject).endsWith("/")
-        ) {
+      if (spa) {
+        // for SPA we want to serve the root HTML file most of the time
+        if (!fsStat) {
+          if (urlToExtension(urlObject)) {
+            // url has an extension, we assume it's a file request -> let 404 happen
+            return null;
+          }
           const { requestedUrl, rootDirectoryUrl, mainFilePath } =
             reference.ownerUrlInfo.context;
           const closestHtmlRootFile = getClosestHtmlRootFile(
@@ -118,6 +107,16 @@ export const jsenvPluginFsRedirection = ({
           }
           return new URL(mainFilePath, rootDirectoryUrl);
         }
+        if (fsStat.isDirectory()) {
+          // When requesting a directory, check if we have an HTML entry file for that directory
+          const directoryEntryFileUrl = getDirectoryEntryFileUrl(urlObject);
+          if (directoryEntryFileUrl) {
+            reference.fsStat = readEntryStatSync(directoryEntryFileUrl);
+            return directoryEntryFileUrl;
+          }
+        }
+      }
+      if (!fsStat) {
         return null;
       }
       const urlBeforeSymlinkResolution = urlObject.href;
@@ -165,17 +164,24 @@ const resolveSymlink = (fileUrl) => {
   return realUrlObject.href;
 };
 
+const getDirectoryEntryFileUrl = (directoryUrl) => {
+  const indexHtmlFileUrl = new URL(`index.html`, directoryUrl);
+  if (existsSync(indexHtmlFileUrl)) {
+    return indexHtmlFileUrl.href;
+  }
+  const filename = urlToFilename(directoryUrl);
+  const htmlFileUrlCandidate = new URL(`${filename}.html`, directoryUrl);
+  if (existsSync(htmlFileUrlCandidate)) {
+    return htmlFileUrlCandidate.href;
+  }
+  return null;
+};
 const getClosestHtmlRootFile = (requestedUrl, serverRootDirectoryUrl) => {
   let directoryUrl = new URL("./", requestedUrl);
   while (true) {
-    const indexHtmlFileUrl = new URL(`index.html`, directoryUrl);
-    if (existsSync(indexHtmlFileUrl)) {
-      return indexHtmlFileUrl.href;
-    }
-    const filename = urlToFilename(directoryUrl);
-    const htmlFileUrlCandidate = new URL(`${filename}.html`, directoryUrl);
-    if (existsSync(htmlFileUrlCandidate)) {
-      return htmlFileUrlCandidate.href;
+    const directoryEntryFileUrl = getDirectoryEntryFileUrl(directoryUrl);
+    if (directoryEntryFileUrl) {
+      return directoryEntryFileUrl;
     }
     if (!urlIsOrIsInsideOf(directoryUrl, serverRootDirectoryUrl)) {
       return null;

package/src/plugins/ribbon/client/ribbon.js

@@ -2,14 +2,14 @@ export const injectRibbon = ({ text }) => {
   const css = /* css */ `
     #jsenv_ribbon_container {
       position: fixed;
-      z-index: 1001;
       top: 0;
       right: 0;
+      z-index: 1001;
       width: 100px;
       height: 100px;
-      overflow: hidden;
       opacity: 0.5;
       pointer-events: none;
+      overflow: hidden;
     }
     #jsenv_ribbon {
       position: absolute;
@@ -20,20 +20,20 @@ export const injectRibbon = ({ text }) => {
     }
     #jsenv_ribbon_text {
       position: absolute;
-      left: 0px;
       top: 20px;
-      transform: rotate(45deg);
+      left: 0px;
       display: block;
       width: 125px;
-      line-height: 36px;
-      background-color: orange;
       color: rgb(55, 7, 7);
-      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
       font-weight: 700;
       font-size: 16px;
       font-family: "Lato", sans-serif;
-      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       text-align: center;
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      line-height: 36px;
+      background-color: orange;
+      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+      transform: rotate(45deg);
       user-select: none;
     }
   `;