@jsenv/core 39.12.0 → 39.13.0

package/src/plugins/protocol_file/client/directory_listing.jsx

@@ -0,0 +1,250 @@
+import { render } from "preact";
+import { useSyncExternalStore } from "preact/compat";
+
+const directoryIconUrl = import.meta.resolve("./assets/dir.png");
+const fileIconUrl = import.meta.resolve("./assets/file.png");
+const homeIconUrl = import.meta.resolve("./assets/home.svg#root");
+
+let {
+  navItems,
+  mainFilePath,
+  directoryContentItems,
+  enoentDetails,
+  websocketUrl,
+  autoreload,
+} = window.DIRECTORY_LISTING;
+
+const directoryItemsChangeCallbackSet = new Set();
+const updateDirectoryContentItems = (value) => {
+  directoryContentItems = value;
+  for (const dirContentItem of value) {
+    if (dirContentItem.isMainFile && window.location.pathname === "/") {
+      window.location.reload();
+      return;
+    }
+    const isDirectory = new URL(dirContentItem.url).pathname.endsWith("/");
+    if (
+      !isDirectory &&
+      dirContentItem.urlRelativeToServer === window.location.pathname
+    ) {
+      window.location.reload();
+      return;
+    }
+  }
+  for (const directoryItemsChangeCallback of directoryItemsChangeCallbackSet) {
+    directoryItemsChangeCallback();
+  }
+};
+
+const DirectoryListing = () => {
+  const directoryItems = useSyncExternalStore(
+    (callback) => {
+      directoryItemsChangeCallbackSet.add(callback);
+    },
+    () => {
+      return directoryContentItems;
+    },
+  );
+
+  return (
+    <>
+      {enoentDetails ? <ErrorMessage /> : null}
+      <Nav />
+      <DirectoryContent items={directoryItems} />
+    </>
+  );
+};
+
+const ErrorMessage = () => {
+  const { fileUrl, filePathExisting, filePathNotFound } = enoentDetails;
+
+  return (
+    <p className="error_message">
+      <span className="error_text">
+        No filesystem entry at{" "}
+        <code title={fileUrl}>
+          <span className="file_path_good">{filePathExisting}</span>
+          <span className="file_path_bad">{filePathNotFound}</span>
+        </code>
+        .
+      </span>
+    </p>
+  );
+};
+
+const Nav = () => {
+  return (
+    <h1 className="nav">
+      {navItems.map((navItem) => {
+        const {
+          url,
+          urlRelativeToServer,
+          name,
+          isCurrent,
+          isServerRootDirectory,
+        } = navItem;
+        const isDirectory = new URL(url).pathname.endsWith("/");
+        return (
+          <>
+            <NavItem
+              key={url}
+              url={urlRelativeToServer}
+              isCurrent={isCurrent}
+              iconImageUrl={isServerRootDirectory ? homeIconUrl : ""}
+              iconLinkUrl={isServerRootDirectory ? `/${mainFilePath}` : ""}
+            >
+              {name}
+            </NavItem>
+            {isDirectory ? (
+              <span className="directory_separator">/</span>
+            ) : null}
+          </>
+        );
+      })}
+    </h1>
+  );
+};
+const NavItem = ({ url, iconImageUrl, iconLinkUrl, isCurrent, children }) => {
+  return (
+    <span className="nav_item" data-current={isCurrent ? "" : undefined}>
+      {iconLinkUrl ? (
+        <a
+          className="nav_item_icon"
+          // eslint-disable-next-line react/no-unknown-property
+          hot-decline
+          href={iconLinkUrl}
+        >
+          <Icon url={iconImageUrl} />
+        </a>
+      ) : iconImageUrl ? (
+        <span className="nav_item_icon">
+          <Icon url={iconImageUrl} />
+        </span>
+      ) : null}
+      {url ? (
+        <a className="nav_item_text" href={url}>
+          {children}
+        </a>
+      ) : (
+        <span className="nav_item_text">{children}</span>
+      )}
+    </span>
+  );
+};
+
+const DirectoryContent = ({ items }) => {
+  if (items.length === 0) {
+    return <p className="directory_empty_message">Directory is empty</p>;
+  }
+  return (
+    <ul className="directory_content">
+      {items.map((directoryItem) => {
+        return (
+          <DirectoryContentItem
+            key={directoryItem.url}
+            url={directoryItem.urlRelativeToServer}
+            isDirectory={directoryItem.url.endsWith("/")}
+            isMainFile={directoryItem.isMainFile}
+          >
+            {directoryItem.urlRelativeToCurrentDirectory}
+          </DirectoryContentItem>
+        );
+      })}
+    </ul>
+  );
+};
+const DirectoryContentItem = ({ url, isDirectory, isMainFile, children }) => {
+  return (
+    <li
+      className="directory_content_item"
+      data-directory={isDirectory ? "" : undefined}
+      data-file={isDirectory ? undefined : ""}
+    >
+      <a
+        className="directory_content_item_link"
+        href={url}
+        // eslint-disable-next-line react/no-unknown-property
+        hot-decline={isMainFile ? true : undefined}
+      >
+        <span className="directory_content_item_icon">
+          <Icon
+            url={
+              isMainFile
+                ? homeIconUrl
+                : isDirectory
+                  ? directoryIconUrl
+                  : fileIconUrl
+            }
+          />
+        </span>
+        {children}
+        {isDirectory ? (
+          <>
+            <span style="flex:1"></span>
+            <span className="directory_content_item_arrow">
+              <RightArrowSvg />
+            </span>
+          </>
+        ) : null}
+      </a>
+    </li>
+  );
+};
+const RightArrowSvg = () => {
+  return (
+    <svg fill="currentColor" viewBox="0 0 330 330">
+      <path
+        stroke="currentColor"
+        d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001
+	c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
+	C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606
+	C255,161.018,253.42,157.202,250.606,154.389z"
+      />
+    </svg>
+  );
+};
+
+const Icon = ({ url }) => {
+  if (urlToFilename(url).endsWith(".svg")) {
+    return (
+      <svg>
+        <use href={url} />
+      </svg>
+    );
+  }
+  return <img src={url} />;
+};
+
+const urlToFilename = (url) => {
+  const pathname = new URL(url).pathname;
+  const pathnameBeforeLastSlash = pathname.endsWith("/")
+    ? pathname.slice(0, -1)
+    : pathname;
+  const slashLastIndex = pathnameBeforeLastSlash.lastIndexOf("/");
+  const filename =
+    slashLastIndex === -1
+      ? pathnameBeforeLastSlash
+      : pathnameBeforeLastSlash.slice(slashLastIndex + 1);
+  return filename;
+};
+
+if (autoreload) {
+  const socket = new WebSocket(websocketUrl, ["watch-directory"]);
+  socket.onopen = () => {
+    socket.onopen = null;
+    setInterval(() => {
+      socket.send('{"type":"ping"}');
+    }, 30_000);
+  };
+  socket.onmessage = (messageEvent) => {
+    const event = JSON.parse(messageEvent.data);
+    const { type, reason, items } = event;
+    if (type === "change") {
+      console.log(`update list (reason: ${reason})`);
+      // TODO: if index.html is added AND we are at "/" we must reload
+      updateDirectoryContentItems(items);
+    }
+  };
+}
+
+render(<DirectoryListing />, document.querySelector("#root"));

package/src/plugins/protocol_file/file_and_server_urls_converter.js

@@ -0,0 +1,32 @@
+import { urlIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
+
+export const FILE_AND_SERVER_URLS_CONVERTER = {
+  asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
+    if (fileUrl === serverRootDirectoryUrl) {
+      return "/";
+    }
+    if (urlIsInsideOf(fileUrl, serverRootDirectoryUrl)) {
+      const urlRelativeToServer = urlToRelativeUrl(
+        fileUrl,
+        serverRootDirectoryUrl,
+      );
+      return `/${urlRelativeToServer}`;
+    }
+    const urlRelativeToFilesystemRoot = String(fileUrl).slice(
+      "file:///".length,
+    );
+    return `/@fs/${urlRelativeToFilesystemRoot}`;
+  },
+  asFileUrl: (urlRelativeToServer, serverRootDirectoryUrl) => {
+    if (urlRelativeToServer.startsWith("/@fs/")) {
+      const urlRelativeToFilesystemRoot = urlRelativeToServer.slice(
+        "/@fs/".length,
+      );
+      return `file:///${urlRelativeToFilesystemRoot}`;
+    }
+    if (urlRelativeToServer[0] === "/") {
+      return new URL(urlRelativeToServer.slice(1), serverRootDirectoryUrl).href;
+    }
+    return new URL(urlRelativeToServer, serverRootDirectoryUrl).href;
+  },
+};

package/src/plugins/protocol_file/jsenv_plugin_directory_listing.js

@@ -0,0 +1,398 @@
+/*
+ * NICE TO HAVE:
+ * 
+ * - when visiting urls outside server root directory the UI is messed up
+ * 
+ * Let's say I visit file outside the server root directory that is in 404
+ * We must update the enoent message and maybe other things to take into account
+ * that url is no longer /something but "@fs/project_root/something" in the browser url bar
+ * 
+ * - watching directory might result into things that are not properly handled:
+ * 1. the existing directory is deleted
+ *    -> we should update the whole page to use a new "firstExistingDirectoryUrl"
+ * 2. the enoent is impacted
+ *    -> we should update the ENOENT message
+ * It means the websocket should contain more data and we can't assume firstExistingDirectoryUrl won't change
+ *
+
+ */
+
+import {
+  comparePathnames,
+  readEntryStatSync,
+  registerDirectoryLifecycle,
+} from "@jsenv/filesystem";
+import { pickContentType } from "@jsenv/server";
+import {
+  asUrlWithoutSearch,
+  ensurePathnameTrailingSlash,
+  urlIsInsideOf,
+  urlToFilename,
+  urlToRelativeUrl,
+} from "@jsenv/urls";
+import { existsSync, lstatSync, readdirSync } from "node:fs";
+import { lookupPackageDirectory } from "../../helpers/lookup_package_directory.js";
+import { replacePlaceholders } from "../injections/jsenv_plugin_injections.js";
+import { FILE_AND_SERVER_URLS_CONVERTER } from "./file_and_server_urls_converter.js";
+
+const htmlFileUrlForDirectory = new URL(
+  "./client/directory_listing.html",
+  import.meta.url,
+);
+
+export const jsenvPluginDirectoryListing = ({
+  directoryContentMagicName,
+  directoryListingUrlMocks,
+  autoreload = true,
+}) => {
+  return {
+    name: "jsenv:directory_listing",
+    appliesDuring: "dev",
+    redirectReference: (reference) => {
+      if (reference.isInline) {
+        return null;
+      }
+      const url = reference.url;
+      if (!url.startsWith("file:")) {
+        return null;
+      }
+      let { fsStat } = reference;
+      if (!fsStat) {
+        fsStat = readEntryStatSync(url, { nullIfNotFound: true });
+        reference.fsStat = fsStat;
+      }
+      const { request } = reference.ownerUrlInfo.context;
+      if (!fsStat) {
+        if (
+          reference.isDirectRequest &&
+          request &&
+          request.headers["sec-fetch-dest"] === "document"
+        ) {
+          return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(url)}&enoent`;
+        }
+        return null;
+      }
+      const isDirectory = fsStat?.isDirectory();
+      if (!isDirectory) {
+        return null;
+      }
+      if (reference.type === "filesystem") {
+        // TODO: we should redirect to something like /...json
+        // and any file name ...json is a special file serving directory content as json
+        return null;
+      }
+      const acceptsHtml = request
+        ? pickContentType(request, ["text/html"])
+        : false;
+      if (!acceptsHtml) {
+        return null;
+      }
+      reference.fsStat = null; // reset fsStat, now it's not a directory anyor
+      return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(url)}`;
+    },
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const urlWithoutSearch = asUrlWithoutSearch(urlInfo.url);
+        if (urlWithoutSearch !== String(htmlFileUrlForDirectory)) {
+          return null;
+        }
+        const requestedUrl = urlInfo.searchParams.get("url");
+        if (!requestedUrl) {
+          return null;
+        }
+        urlInfo.headers["cache-control"] = "no-cache";
+        const enoent = urlInfo.searchParams.has("enoent");
+        if (enoent) {
+          urlInfo.status = 404;
+          urlInfo.headers["cache-control"] = "no-cache";
+        }
+        const request = urlInfo.context.request;
+        const { rootDirectoryUrl, mainFilePath } = urlInfo.context;
+        return replacePlaceholders(
+          urlInfo.content,
+          {
+            ...generateDirectoryListingInjection(requestedUrl, {
+              autoreload,
+              request,
+              directoryListingUrlMocks,
+              directoryContentMagicName,
+              rootDirectoryUrl,
+              mainFilePath,
+              enoent,
+            }),
+          },
+          urlInfo,
+        );
+      },
+    },
+    serveWebsocket: ({ websocket, request, context }) => {
+      if (!autoreload) {
+        return false;
+      }
+      const secProtocol = request.headers["sec-websocket-protocol"];
+      if (secProtocol !== "watch-directory") {
+        return false;
+      }
+      const { rootDirectoryUrl, mainFilePath } = context;
+      const requestedUrl = FILE_AND_SERVER_URLS_CONVERTER.asFileUrl(
+        request.pathname,
+        rootDirectoryUrl,
+      );
+      const closestDirectoryUrl = getFirstExistingDirectoryUrl(requestedUrl);
+      const sendMessage = (message) => {
+        websocket.send(JSON.stringify(message));
+      };
+      const generateItems = () => {
+        const firstExistingDirectoryUrl = getFirstExistingDirectoryUrl(
+          requestedUrl,
+          rootDirectoryUrl,
+        );
+        const items = getDirectoryContentItems({
+          serverRootDirectoryUrl: rootDirectoryUrl,
+          mainFilePath,
+          requestedUrl,
+          firstExistingDirectoryUrl,
+        });
+        return items;
+      };
+
+      const unwatch = registerDirectoryLifecycle(closestDirectoryUrl, {
+        added: ({ relativeUrl }) => {
+          sendMessage({
+            type: "change",
+            reason: `${relativeUrl} added`,
+            items: generateItems(),
+          });
+        },
+        updated: ({ relativeUrl }) => {
+          sendMessage({
+            type: "change",
+            reason: `${relativeUrl} updated`,
+            items: generateItems(),
+          });
+        },
+        removed: ({ relativeUrl }) => {
+          sendMessage({
+            type: "change",
+            reason: `${relativeUrl} removed`,
+            items: generateItems(),
+          });
+        },
+      });
+      websocket.signal.addEventListener("abort", () => {
+        unwatch();
+      });
+      return true;
+    },
+  };
+};
+
+const generateDirectoryListingInjection = (
+  requestedUrl,
+  {
+    rootDirectoryUrl,
+    mainFilePath,
+    request,
+    directoryListingUrlMocks,
+    directoryContentMagicName,
+    autoreload,
+    enoent,
+  },
+) => {
+  let serverRootDirectoryUrl = rootDirectoryUrl;
+  const firstExistingDirectoryUrl = getFirstExistingDirectoryUrl(
+    requestedUrl,
+    serverRootDirectoryUrl,
+  );
+  const directoryContentItems = getDirectoryContentItems({
+    serverRootDirectoryUrl,
+    mainFilePath,
+    requestedUrl,
+    firstExistingDirectoryUrl,
+  });
+  package_workspaces: {
+    const packageDirectoryUrl = lookupPackageDirectory(serverRootDirectoryUrl);
+    if (!packageDirectoryUrl) {
+      break package_workspaces;
+    }
+    if (String(packageDirectoryUrl) === String(serverRootDirectoryUrl)) {
+      break package_workspaces;
+    }
+    rootDirectoryUrl = packageDirectoryUrl;
+    // if (String(firstExistingDirectoryUrl) === String(serverRootDirectoryUrl)) {
+    //   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));
+    //       }
+    //     }
+    //   }
+    // }
+  }
+  const directoryUrlRelativeToServer =
+    FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+      firstExistingDirectoryUrl,
+      serverRootDirectoryUrl,
+    );
+  const websocketScheme = request.protocol === "https" ? "wss" : "ws";
+  const { host } = new URL(request.url);
+  const websocketUrl = `${websocketScheme}://${host}${directoryUrlRelativeToServer}`;
+
+  const navItems = [];
+  nav_items: {
+    const lastItemUrl = firstExistingDirectoryUrl;
+    const lastItemRelativeUrl = urlToRelativeUrl(lastItemUrl, rootDirectoryUrl);
+    const rootDirectoryUrlName = urlToFilename(rootDirectoryUrl);
+    let parts;
+    if (lastItemRelativeUrl) {
+      parts = `${rootDirectoryUrlName}/${lastItemRelativeUrl}`.split("/");
+    } else {
+      parts = [rootDirectoryUrlName];
+    }
+
+    let i = 0;
+    while (i < parts.length) {
+      const part = parts[i];
+      const isLastPart = i === parts.length - 1;
+      if (isLastPart && part === "") {
+        // ignore trailing slash
+        break;
+      }
+      let navItemRelativeUrl = `${parts.slice(1, i + 1).join("/")}`;
+      let navItemUrl =
+        navItemRelativeUrl === ""
+          ? rootDirectoryUrl
+          : new URL(navItemRelativeUrl, rootDirectoryUrl).href;
+      if (!isLastPart) {
+        navItemUrl = ensurePathnameTrailingSlash(navItemUrl);
+      }
+      let urlRelativeToServer = FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+        navItemUrl,
+        serverRootDirectoryUrl,
+      );
+      let urlRelativeToDocument = urlToRelativeUrl(navItemUrl, requestedUrl);
+      const isServerRootDirectory = navItemUrl === serverRootDirectoryUrl;
+      if (isServerRootDirectory) {
+        urlRelativeToServer = `/${directoryContentMagicName}`;
+        urlRelativeToDocument = `/${directoryContentMagicName}`;
+      }
+      const name = part;
+      const isCurrent = navItemUrl === String(firstExistingDirectoryUrl);
+      navItems.push({
+        url: navItemUrl,
+        urlRelativeToServer,
+        urlRelativeToDocument,
+        isServerRootDirectory,
+        isCurrent,
+        name,
+      });
+      i++;
+    }
+  }
+
+  let enoentDetails = null;
+  if (enoent) {
+    const fileRelativeUrl = urlToRelativeUrl(
+      requestedUrl,
+      serverRootDirectoryUrl,
+    );
+    let filePathExisting;
+    let filePathNotFound;
+    const existingIndex = String(firstExistingDirectoryUrl).length;
+    filePathExisting = urlToRelativeUrl(
+      firstExistingDirectoryUrl,
+      serverRootDirectoryUrl,
+    );
+    filePathNotFound = requestedUrl.slice(existingIndex);
+    enoentDetails = {
+      fileUrl: requestedUrl,
+      fileRelativeUrl,
+      filePathExisting: `/${filePathExisting}`,
+      filePathNotFound,
+    };
+  }
+
+  return {
+    __DIRECTORY_LISTING__: {
+      enoentDetails,
+      navItems,
+      directoryListingUrlMocks,
+      directoryContentMagicName,
+      directoryUrl: firstExistingDirectoryUrl,
+      serverRootDirectoryUrl,
+      rootDirectoryUrl,
+      mainFilePath,
+      directoryContentItems,
+      websocketUrl,
+      autoreload,
+    },
+  };
+};
+const getFirstExistingDirectoryUrl = (requestedUrl, serverRootDirectoryUrl) => {
+  let firstExistingDirectoryUrl = new URL("./", requestedUrl);
+  while (!existsSync(firstExistingDirectoryUrl)) {
+    firstExistingDirectoryUrl = new URL("../", firstExistingDirectoryUrl);
+    if (!urlIsInsideOf(firstExistingDirectoryUrl, serverRootDirectoryUrl)) {
+      firstExistingDirectoryUrl = new URL(serverRootDirectoryUrl);
+      break;
+    }
+  }
+  return firstExistingDirectoryUrl;
+};
+const getDirectoryContentItems = ({
+  serverRootDirectoryUrl,
+  mainFilePath,
+  firstExistingDirectoryUrl,
+}) => {
+  const directoryContentArray = readdirSync(new URL(firstExistingDirectoryUrl));
+  const fileUrls = [];
+  for (const filename of directoryContentArray) {
+    const fileUrlObject = new URL(filename, firstExistingDirectoryUrl);
+    if (lstatSync(fileUrlObject).isDirectory()) {
+      fileUrls.push(ensurePathnameTrailingSlash(fileUrlObject));
+    } else {
+      fileUrls.push(fileUrlObject);
+    }
+  }
+  fileUrls.sort((a, b) => {
+    return comparePathnames(a.pathname, b.pathname);
+  });
+  const items = [];
+  for (const fileUrl of fileUrls) {
+    const urlRelativeToCurrentDirectory = urlToRelativeUrl(
+      fileUrl,
+      firstExistingDirectoryUrl,
+    );
+    const urlRelativeToServer = FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(
+      fileUrl,
+      serverRootDirectoryUrl,
+    );
+    const url = String(fileUrl);
+    const mainFileUrl = new URL(mainFilePath, serverRootDirectoryUrl).href;
+    const isMainFile = url === mainFileUrl;
+
+    items.push({
+      url,
+      urlRelativeToCurrentDirectory,
+      urlRelativeToServer,
+      isMainFile,
+    });
+  }
+  return items;
+};