@jsenv/core 40.8.4 → 40.9.0

package/dist/build/build.js

@@ -527,6 +527,34 @@ const assertFetchedContentCompliance = ({ urlInfo, content }) => {
   }
 };
 
+const FILE_AND_SERVER_URLS_CONVERTER = {
+  asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
+    if (urlIsOrIsInsideOf(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;
+  },
+};
+
 const determineFileUrlForOutDirectory = (urlInfo) => {
   let { url, filenameHint } = urlInfo;
   const { rootDirectoryUrl, outDirectoryUrl } = urlInfo.context;
@@ -2952,6 +2980,10 @@ const createKitchen = ({
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
       isPlaceholderInjection,
+      asServerUrl: (fileUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(fileUrl, rootDirectoryUrl),
+      asFileUrl: (serverUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asFileUrl(serverUrl, rootDirectoryUrl),
       INJECTIONS,
       getPluginMeta: null,
       sourcemaps,
@@ -6486,34 +6518,6 @@ const jsenvPluginVersionSearchParam = () => {
   };
 };
 
-const FILE_AND_SERVER_URLS_CONVERTER = {
-  asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
-    if (urlIsOrIsInsideOf(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;
-  },
-};
-
 /*
  * NICE TO HAVE:
  * 
@@ -8818,6 +8822,49 @@ const jsenvPluginRibbon = ({
   };
 };
 
+/**
+ * HTML page server by jsenv dev server will listen for drop events
+ * and redirect the browser to the dropped file location.
+ *
+ * Works only for VSCode right now (because it sets "resourceurls" dataTransfer type).
+ *
+ */
+
+
+const jsenvPluginDropToOpen = () => {
+  const clientFileUrl = import.meta.resolve("../js/drop_to_open.js");
+  return {
+    name: "jsenv:drop_to_open",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({
+          html: urlInfo.content,
+          url: urlInfo.url,
+        });
+        const clientFileReference = urlInfo.dependencies.inject({
+          type: "script",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: clientFileUrl,
+        });
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: clientFileReference.generatedSpecifier,
+          initCall: {
+            callee: "initDropToOpen",
+            params: {
+              rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
+            },
+          },
+          pluginName: "jsenv:drop_to_open",
+        });
+        return stringifyHtmlAst(htmlAst);
+      },
+    },
+  };
+};
+
 const jsenvPluginCleanHTML = () => {
   return {
     name: "jsenv:cleanup_html_during_dev",
@@ -9198,6 +9245,7 @@ const getCorePlugins = ({
       : []),
     ...(cacheControl ? [jsenvPluginCacheControl(cacheControl)] : []),
     ...(ribbon ? [jsenvPluginRibbon({ rootDirectoryUrl, ...ribbon })] : []),
+    jsenvPluginDropToOpen(),
     jsenvPluginCleanHTML(),
     jsenvPluginChromeDevtoolsJson(),
     ...(packageSideEffects

package/dist/build/jsenv_core_packages.js

@@ -2692,15 +2692,24 @@ const createLookupPackageDirectory = () => {
 };
 
 const readPackageAtOrNull = (packageDirectoryUrl) => {
+  const packageJsonFileUrl = new URL("./package.json", packageDirectoryUrl);
+  let packageJsonFileContentBuffer;
   try {
-    const packageFileContent = readFileSync$1(
-      new URL("./package.json", packageDirectoryUrl),
-      "utf8",
+    packageJsonFileContentBuffer = readFileSync$1(packageJsonFileUrl, "utf8");
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      return null;
+    }
+    throw e;
+  }
+  const packageJsonFileContentString = String(packageJsonFileContentBuffer);
+  try {
+    const packageJsonFileContentObject = JSON.parse(
+      packageJsonFileContentString,
     );
-    const packageJSON = JSON.parse(packageFileContent);
-    return packageJSON;
+    return packageJsonFileContentObject;
   } catch {
-    return null;
+    throw new Error(`Invalid package configuration at ${packageJsonFileUrl}`);
   }
 };
 
@@ -5244,13 +5253,24 @@ const defaultLookupPackageScope = (url) => {
 };
 
 const defaultReadPackageJson = (packageUrl) => {
-  const packageJsonUrl = new URL("package.json", packageUrl);
-  const buffer = readFileSync$1(packageJsonUrl);
-  const string = String(buffer);
+  const packageJsonFileUrl = new URL("./package.json", packageUrl);
+  let packageJsonFileContentBuffer;
   try {
-    return JSON.parse(string);
+    packageJsonFileContentBuffer = readFileSync$1(packageJsonFileUrl, "utf8");
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      return null;
+    }
+    throw e;
+  }
+  const packageJsonFileContentString = String(packageJsonFileContentBuffer);
+  try {
+    const packageJsonFileContentObject = JSON.parse(
+      packageJsonFileContentString,
+    );
+    return packageJsonFileContentObject;
   } catch {
-    throw new Error(`Invalid package configuration`);
+    throw new Error(`Invalid package configuration at ${packageJsonFileUrl}`);
   }
 };
 

package/dist/client/directory_listing/css/directory_listing.css

@@ -99,8 +99,10 @@ a.nav_item_text {
 
 .directory_content {
   border-radius: 3px;
+  flex-direction: column;
   margin: 10px 15px;
   list-style-type: none;
+  display: flex;
 }
 
 .directory_content_item {
@@ -109,7 +111,7 @@ a.nav_item_text {
   min-height: 19px;
   padding: 10px 15px;
   font-size: 15px;
-  display: flex;
+  display: inline-flex;
   position: relative;
 }
 
@@ -117,13 +119,16 @@ a.nav_item_text {
   flex: 1;
   align-items: center;
   gap: 10px;
+  min-width: 0;
+  max-width: 100%;
   text-decoration: none;
-  display: flex;
+  display: inline-flex;
 }
 
 .directory_content_item_icon {
   aspect-ratio: 1;
   color: #f1f1f1;
+  flex-shrink: 0;
   width: 15px;
   display: flex;
 }
@@ -133,7 +138,9 @@ a.nav_item_text {
 }
 
 .directory_content_item_text {
-  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  display: inline-flex;
 }
 
 .directory_content_item:last-child {

package/dist/client/directory_listing/js/directory_listing.js

@@ -53,15 +53,17 @@ const ErrorMessage = () => {
   errorText = u(k, {
     children: [u("strong", {
       children: "File not found:"
-    }), "\xA0", u("code", {
-      children: [u("span", {
-        className: "file_path_good",
-        children: filePathExisting
-      }), u("span", {
-        className: "file_path_bad",
-        children: filePathNotFound
-      })]
-    }), " ", "does not exist on the server."]
+    }), "\xA0", u(Overflow, {
+      children: [u("code", {
+        children: [u("span", {
+          className: "file_path_good",
+          children: filePathExisting
+        }), u("span", {
+          className: "file_path_bad",
+          children: filePathNotFound
+        })]
+      }), " ", "does not exist on the server."]
+    })]
   });
   errorSuggestion = u(k, {
     children: [u("span", {
@@ -84,6 +86,21 @@ const ErrorMessage = () => {
     })]
   });
 };
+const Overflow = ({
+  children,
+  afterContent
+}) => {
+  return u("div", {
+    style: "display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis;",
+    children: u("div", {
+      style: "display: flex; flex-grow: 1; width: 0;",
+      children: [u("div", {
+        style: "overflow: hidden; max-width: 100%; text-overflow: ellipsis;",
+        children: children
+      }), afterContent]
+    })
+  });
+};
 const Breadcrumb = ({
   items
 }) => {
@@ -163,7 +180,7 @@ const DirectoryContent = ({
         url: directoryItem.urlRelativeToServer,
         isDirectory: directoryItem.url.endsWith("/"),
         isMainFile: directoryItem.isMainFile,
-        children: directoryItem.urlRelativeToCurrentDirectory
+        children: decodeURI(directoryItem.urlRelativeToCurrentDirectory)
       }, directoryItem.url);
     })
   });
@@ -189,14 +206,19 @@ const DirectoryContentItem = ({
         children: u(Icon, {
           url: isMainFile ? homeIconUrl : isDirectory ? directoryIconUrl : fileIconUrl
         })
-      }), children, isDirectory ? u(k, {
-        children: [u("span", {
-          style: "flex:1"
-        }), u("span", {
-          className: "directory_content_item_arrow",
-          children: u(RightArrowSvg, {})
-        })]
-      }) : null]
+      }), u("span", {
+        className: "directory_content_item_text",
+        children: [u(Overflow, {
+          children: children
+        }), isDirectory ? u(k, {
+          children: [u("span", {
+            style: "flex:1"
+          }), u("span", {
+            className: "directory_content_item_arrow",
+            children: u(RightArrowSvg, {})
+          })]
+        }) : null]
+      })]
     })
   });
 };

package/dist/js/drop_to_open.js

@@ -0,0 +1,51 @@
+const initDropToOpen = ({ rootDirectoryUrl }) => {
+  const dataTransferCandidates = [
+    (dataTransfer) => {
+      if (!dataTransfer.types.includes("resourceurls")) {
+        return null;
+      }
+      return () => {
+        const data = dataTransfer.getData("resourceurls");
+        const urls = JSON.parse(data);
+        if (!Array.isArray(urls) || urls.length === 0) {
+          return;
+        }
+        const [url] = urls;
+        const fileUrl = new URL(url).href;
+        let serverUrl;
+
+        if (fileUrl.startsWith(rootDirectoryUrl)) {
+          const serverRelativeUrl = fileUrl.slice(rootDirectoryUrl.length);
+          serverUrl = `/${serverRelativeUrl}`;
+        } else {
+          serverUrl = `/@fs/${fileUrl}`;
+        }
+        window.location.href = serverUrl;
+      };
+    },
+  ];
+
+  document.addEventListener("dragover", (event) => {
+    for (const candidate of dataTransferCandidates) {
+      const dataTransferHandler = candidate(event.dataTransfer);
+      if (dataTransferHandler) {
+        event.preventDefault();
+        return;
+      }
+    }
+  });
+  document.addEventListener("drop", (event) => {
+    let handler;
+    for (const candidate of dataTransferCandidates) {
+      const dataTransferHandler = candidate(event.dataTransfer);
+      if (dataTransferHandler) {
+        handler = dataTransferHandler;
+        break;
+      }
+    }
+    event.preventDefault();
+    handler();
+  });
+};
+
+export { initDropToOpen };

package/dist/js/import_meta_css.js

@@ -2,12 +2,17 @@ import "file:///Users/dmail/Documents/dev/jsenv/core/packages/internal/plugin-tr
 
 const installImportMetaCss = importMeta => {
   let cssText = "";
-  let stylesheet = new CSSStyleSheet();
+  let stylesheet = new CSSStyleSheet({
+    baseUrl: importMeta.url
+  });
   let adopted = false;
   const css = {
     toString: () => cssText,
     update: value => {
       cssText = value;
+      cssText += `
+/* sourceURL=${importMeta.url} */
+/* inlined from ${importMeta.url} */`;
       stylesheet.replaceSync(cssText);
     },
     inject: () => {

package/dist/start_dev_server/jsenv_core_packages.js

@@ -267,6 +267,31 @@ const UNICODE = createUnicode({
   ANSI,
 });
 
+const prefixFirstAndIndentRemainingLines = (
+  text,
+  { prefix, indentation, trimLines, trimLastLine },
+) => {
+  const lines = text.split(/\r?\n/);
+  const firstLine = lines.shift();
+  if (indentation === undefined) {
+    {
+      indentation = "  "; // prefix + space
+    }
+  }
+  let result = `${prefix} ${firstLine}` ;
+  let i = 0;
+  while (i < lines.length) {
+    const line = trimLines ? lines[i].trim() : lines[i];
+    i++;
+    result += line.length
+      ? `\n${indentation}${line}`
+      : trimLastLine && i === lines.length
+        ? ""
+        : `\n`;
+  }
+  return result;
+};
+
 const setRoundedPrecision = (
   number,
   { decimals = 1, decimalsWhenSmall = decimals } = {},
@@ -643,10 +668,9 @@ const formatError = (error) => {
   const { cause } = error;
   if (cause) {
     const formatCause = (cause, depth) => {
-      let causeText = prefixFirstAndIndentRemainingLines({
+      let causeText = prefixFirstAndIndentRemainingLines(cause.stack, {
         prefix: "  [cause]:",
         indentation: "  ".repeat(depth + 1),
-        text: cause.stack,
       });
       const nestedCause = cause.cause;
       if (nestedCause) {
@@ -661,34 +685,6 @@ const formatError = (error) => {
   return text;
 };
 
-const prefixFirstAndIndentRemainingLines = ({
-  prefix,
-  indentation,
-  text,
-  trimLines,
-  trimLastLine,
-}) => {
-  const lines = text.split(/\r?\n/);
-  const firstLine = lines.shift();
-  if (indentation === undefined) {
-    {
-      indentation = "  "; // prefix + space
-    }
-  }
-  let result = `${prefix} ${firstLine}` ;
-  let i = 0;
-  while (i < lines.length) {
-    const line = trimLines ? lines[i].trim() : lines[i];
-    i++;
-    result += line.length
-      ? `\n${indentation}${line}`
-      : trimLastLine && i === lines.length
-        ? ""
-        : `\n`;
-  }
-  return result;
-};
-
 const LOG_LEVEL_OFF = "off";
 
 const LOG_LEVEL_DEBUG = "debug";
@@ -1958,15 +1954,24 @@ const lookupPackageDirectory = (currentUrl) => {
 };
 
 const readPackageAtOrNull = (packageDirectoryUrl) => {
+  const packageJsonFileUrl = new URL("./package.json", packageDirectoryUrl);
+  let packageJsonFileContentBuffer;
+  try {
+    packageJsonFileContentBuffer = readFileSync(packageJsonFileUrl, "utf8");
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      return null;
+    }
+    throw e;
+  }
+  const packageJsonFileContentString = String(packageJsonFileContentBuffer);
   try {
-    const packageFileContent = readFileSync(
-      new URL("./package.json", packageDirectoryUrl),
-      "utf8",
+    const packageJsonFileContentObject = JSON.parse(
+      packageJsonFileContentString,
     );
-    const packageJSON = JSON.parse(packageFileContent);
-    return packageJSON;
+    return packageJsonFileContentObject;
   } catch {
-    return null;
+    throw new Error(`Invalid package configuration at ${packageJsonFileUrl}`);
   }
 };
 
@@ -3878,13 +3883,24 @@ const defaultLookupPackageScope = (url) => {
 };
 
 const defaultReadPackageJson = (packageUrl) => {
-  const packageJsonUrl = new URL("package.json", packageUrl);
-  const buffer = readFileSync(packageJsonUrl);
-  const string = String(buffer);
+  const packageJsonFileUrl = new URL("./package.json", packageUrl);
+  let packageJsonFileContentBuffer;
   try {
-    return JSON.parse(string);
+    packageJsonFileContentBuffer = readFileSync(packageJsonFileUrl, "utf8");
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      return null;
+    }
+    throw e;
+  }
+  const packageJsonFileContentString = String(packageJsonFileContentBuffer);
+  try {
+    const packageJsonFileContentObject = JSON.parse(
+      packageJsonFileContentString,
+    );
+    return packageJsonFileContentObject;
   } catch {
-    throw new Error(`Invalid package configuration`);
+    throw new Error(`Invalid package configuration at ${packageJsonFileUrl}`);
   }
 };
 

package/dist/start_dev_server/start_dev_server.js

@@ -586,6 +586,34 @@ const assertFetchedContentCompliance = ({ urlInfo, content }) => {
   }
 };
 
+const FILE_AND_SERVER_URLS_CONVERTER = {
+  asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
+    if (urlIsOrIsInsideOf(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;
+  },
+};
+
 const determineFileUrlForOutDirectory = (urlInfo) => {
   let { url, filenameHint } = urlInfo;
   const { rootDirectoryUrl, outDirectoryUrl } = urlInfo.context;
@@ -2992,6 +3020,10 @@ const createKitchen = ({
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
       isPlaceholderInjection,
+      asServerUrl: (fileUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(fileUrl, rootDirectoryUrl),
+      asFileUrl: (serverUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asFileUrl(serverUrl, rootDirectoryUrl),
       INJECTIONS,
       getPluginMeta: null,
       sourcemaps,
@@ -6191,34 +6223,6 @@ const jsenvPluginVersionSearchParam = () => {
   };
 };
 
-const FILE_AND_SERVER_URLS_CONVERTER = {
-  asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
-    if (urlIsOrIsInsideOf(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;
-  },
-};
-
 /*
  * NICE TO HAVE:
  * 
@@ -8858,6 +8862,49 @@ const jsenvPluginRibbon = ({
   };
 };
 
+/**
+ * HTML page server by jsenv dev server will listen for drop events
+ * and redirect the browser to the dropped file location.
+ *
+ * Works only for VSCode right now (because it sets "resourceurls" dataTransfer type).
+ *
+ */
+
+
+const jsenvPluginDropToOpen = () => {
+  const clientFileUrl = import.meta.resolve("../js/drop_to_open.js");
+  return {
+    name: "jsenv:drop_to_open",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({
+          html: urlInfo.content,
+          url: urlInfo.url,
+        });
+        const clientFileReference = urlInfo.dependencies.inject({
+          type: "script",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: clientFileUrl,
+        });
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: clientFileReference.generatedSpecifier,
+          initCall: {
+            callee: "initDropToOpen",
+            params: {
+              rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
+            },
+          },
+          pluginName: "jsenv:drop_to_open",
+        });
+        return stringifyHtmlAst(htmlAst);
+      },
+    },
+  };
+};
+
 const jsenvPluginCleanHTML = () => {
   return {
     name: "jsenv:cleanup_html_during_dev",
@@ -9238,6 +9285,7 @@ const getCorePlugins = ({
       : []),
     ...(cacheControl ? [jsenvPluginCacheControl(cacheControl)] : []),
     ...(ribbon ? [jsenvPluginRibbon({ rootDirectoryUrl, ...ribbon })] : []),
+    jsenvPluginDropToOpen(),
     jsenvPluginCleanHTML(),
     jsenvPluginChromeDevtoolsJson(),
     ...(packageSideEffects
@@ -9405,6 +9453,7 @@ const startDevServer = async ({
   http2 = false,
   logLevel = EXECUTED_BY_TEST_PLAN ? "warn" : "info",
   serverLogLevel = "warn",
+  serverRouterLogLevel = "warn",
   services = [],
 
   signal = new AbortController().signal,
@@ -10011,6 +10060,7 @@ const startDevServer = async ({
     stopOnInternalError: false,
     keepProcessAlive,
     logLevel: serverLogLevel,
+    routerLogLevel: serverRouterLogLevel,
     startLog: false,
 
     https,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "40.8.4",
+  "version": "40.9.0",
   "description": "Tool to develop, test and build js projects",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
     "@jsenv/plugin-minification": "1.7.0",
     "@jsenv/plugin-supervisor": "1.7.5",
     "@jsenv/plugin-transpilation": "1.5.52",
-    "@jsenv/server": "16.2.1",
+    "@jsenv/server": "16.3.0",
     "@jsenv/sourcemap": "1.3.10",
     "react-table": "7.8.0"
   },
@@ -102,12 +102,12 @@
     "@jsenv/integrity": "workspace:*",
     "@jsenv/md-up": "workspace:*",
     "@jsenv/monorepo": "workspace:*",
+    "@jsenv/navi": "workspace:*",
     "@jsenv/node-esm-resolution": "workspace:*",
     "@jsenv/os-metrics": "workspace:*",
     "@jsenv/performance-impact": "workspace:*",
     "@jsenv/plugin-as-js-classic": "workspace:*",
     "@jsenv/plugin-database-manager": "workspace:*",
-    "@jsenv/router": "workspace:*",
     "@jsenv/runtime-compat": "workspace:*",
     "@jsenv/snapshot": "workspace:*",
     "@jsenv/terminal-table": "workspace:*",
@@ -124,11 +124,11 @@
     "playwright": "1.52.0",
     "preact": "10.26.5",
     "preact-iso": "2.9.1",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "prettier-plugin-embed": "0.5.0",
     "prettier-plugin-organize-imports": "4.1.0",
-    "prettier-plugin-packagejson": "2.5.15",
-    "prettier-plugin-sql": "0.19.0",
+    "prettier-plugin-packagejson": "2.5.18",
+    "prettier-plugin-sql": "0.19.2",
     "strip-ansi": "7.1.0"
   },
   "packageManager": "npm@11.3.0",

package/src/dev/start_dev_server.js

@@ -68,6 +68,7 @@ export const startDevServer = async ({
   http2 = false,
   logLevel = EXECUTED_BY_TEST_PLAN ? "warn" : "info",
   serverLogLevel = "warn",
+  serverRouterLogLevel = "warn",
   services = [],
 
   signal = new AbortController().signal,
@@ -676,6 +677,7 @@ export const startDevServer = async ({
     stopOnInternalError: false,
     keepProcessAlive,
     logLevel: serverLogLevel,
+    routerLogLevel: serverRouterLogLevel,
     startLog: false,
 
     https,

package/src/kitchen/kitchen.js

@@ -12,6 +12,7 @@ import {
   defineNonEnumerableProperties,
 } from "./errors.js";
 import { assertFetchedContentCompliance } from "./fetched_content_compliance.js";
+import { FILE_AND_SERVER_URLS_CONVERTER } from "./file_and_server_urls_converter.js";
 import {
   determineFileUrlForOutDirectory,
   determineSourcemapFileUrl,
@@ -107,6 +108,10 @@ export const createKitchen = ({
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
       isPlaceholderInjection,
+      asServerUrl: (fileUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asServerUrl(fileUrl, rootDirectoryUrl),
+      asFileUrl: (serverUrl) =>
+        FILE_AND_SERVER_URLS_CONVERTER.asFileUrl(serverUrl, rootDirectoryUrl),
       INJECTIONS,
       getPluginMeta: null,
       sourcemaps,

package/src/plugins/drop_to_open/client/drop_to_open.js

@@ -0,0 +1,49 @@
+export const initDropToOpen = ({ rootDirectoryUrl }) => {
+  const dataTransferCandidates = [
+    (dataTransfer) => {
+      if (!dataTransfer.types.includes("resourceurls")) {
+        return null;
+      }
+      return () => {
+        const data = dataTransfer.getData("resourceurls");
+        const urls = JSON.parse(data);
+        if (!Array.isArray(urls) || urls.length === 0) {
+          return;
+        }
+        const [url] = urls;
+        const fileUrl = new URL(url).href;
+        let serverUrl;
+
+        if (fileUrl.startsWith(rootDirectoryUrl)) {
+          const serverRelativeUrl = fileUrl.slice(rootDirectoryUrl.length);
+          serverUrl = `/${serverRelativeUrl}`;
+        } else {
+          serverUrl = `/@fs/${fileUrl}`;
+        }
+        window.location.href = serverUrl;
+      };
+    },
+  ];
+
+  document.addEventListener("dragover", (event) => {
+    for (const candidate of dataTransferCandidates) {
+      const dataTransferHandler = candidate(event.dataTransfer);
+      if (dataTransferHandler) {
+        event.preventDefault();
+        return;
+      }
+    }
+  });
+  document.addEventListener("drop", (event) => {
+    let handler;
+    for (const candidate of dataTransferCandidates) {
+      const dataTransferHandler = candidate(event.dataTransfer);
+      if (dataTransferHandler) {
+        handler = dataTransferHandler;
+        break;
+      }
+    }
+    event.preventDefault();
+    handler();
+  });
+};

package/src/plugins/drop_to_open/jsenv_plugin_drop_to_open.js

@@ -0,0 +1,43 @@
+/**
+ * HTML page server by jsenv dev server will listen for drop events
+ * and redirect the browser to the dropped file location.
+ *
+ * Works only for VSCode right now (because it sets "resourceurls" dataTransfer type).
+ *
+ */
+
+import { injectJsenvScript, parseHtml, stringifyHtmlAst } from "@jsenv/ast";
+
+export const jsenvPluginDropToOpen = () => {
+  const clientFileUrl = import.meta.resolve("./client/drop_to_open.js");
+  return {
+    name: "jsenv:drop_to_open",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({
+          html: urlInfo.content,
+          url: urlInfo.url,
+        });
+        const clientFileReference = urlInfo.dependencies.inject({
+          type: "script",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: clientFileUrl,
+        });
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: clientFileReference.generatedSpecifier,
+          initCall: {
+            callee: "initDropToOpen",
+            params: {
+              rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
+            },
+          },
+          pluginName: "jsenv:drop_to_open",
+        });
+        return stringifyHtmlAst(htmlAst);
+      },
+    },
+  };
+};

package/src/plugins/import_meta_css/client/import_meta_css.js

@@ -1,12 +1,15 @@
 export const installImportMetaCss = (importMeta) => {
   let cssText = "";
-  let stylesheet = new CSSStyleSheet();
+  let stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
   let adopted = false;
 
   const css = {
     toString: () => cssText,
     update: (value) => {
       cssText = value;
+      cssText += `
+/* sourceURL=${importMeta.url} */
+/* inlined from ${importMeta.url} */`;
       stylesheet.replaceSync(cssText);
     },
     inject: () => {

package/src/plugins/plugins.js

@@ -23,6 +23,7 @@ import { jsenvPluginAutoreload } from "./autoreload/jsenv_plugin_autoreload.js";
 import { jsenvPluginCacheControl } from "./cache_control/jsenv_plugin_cache_control.js";
 // other
 import { jsenvPluginRibbon } from "./ribbon/jsenv_plugin_ribbon.js";
+import { jsenvPluginDropToOpen } from "./drop_to_open/jsenv_plugin_drop_to_open.js";
 import { jsenvPluginCleanHTML } from "./clean_html/jsenv_plugin_clean_html.js";
 import { jsenvPluginChromeDevtoolsJson } from "./chrome_devtools_json/jsenv_plugin_chrome_devtools_json.js";
 import { jsenvPluginAutoreloadOnServerRestart } from "./autoreload_on_server_restart/jsenv_plugin_autoreload_on_server_restart.js";
@@ -146,6 +147,7 @@ export const getCorePlugins = ({
       : []),
     ...(cacheControl ? [jsenvPluginCacheControl(cacheControl)] : []),
     ...(ribbon ? [jsenvPluginRibbon({ rootDirectoryUrl, ...ribbon })] : []),
+    jsenvPluginDropToOpen(),
     jsenvPluginCleanHTML(),
     jsenvPluginChromeDevtoolsJson(),
     ...(packageSideEffects

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

@@ -101,9 +101,11 @@ a.nav_item_text {
   margin: 10px 15px 10px 15px;
   list-style-type: none;
   border-radius: 3px;
+  display: flex;
+  flex-direction: column;
 }
 .directory_content_item {
-  display: flex;
+  display: inline-flex;
   position: relative;
   padding: 10px 15px 10px 15px;
   font-size: 15px;
@@ -112,7 +114,9 @@ a.nav_item_text {
   align-items: center;
 }
 .directory_content_item_link {
-  display: flex;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
   flex: 1;
   gap: 10px;
   align-items: center;
@@ -123,12 +127,15 @@ a.nav_item_text {
   aspect-ratio: 1/1;
   display: flex;
   color: #f1f1f1;
+  flex-shrink: 0;
 }
 .directory_content_item_icon img {
   width: 100%;
 }
 .directory_content_item_text {
-  display: flex;
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
 }
 .directory_content_item:last-child {
   border-bottom: none;

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

@@ -63,11 +63,13 @@ const ErrorMessage = () => {
   errorText = (
     <>
       <strong>File not found:</strong>&nbsp;
-      <code>
-        <span className="file_path_good">{filePathExisting}</span>
-        <span className="file_path_bad">{filePathNotFound}</span>
-      </code>{" "}
-      does not exist on the server.
+      <Overflow>
+        <code>
+          <span className="file_path_good">{filePathExisting}</span>
+          <span className="file_path_bad">{filePathNotFound}</span>
+        </code>{" "}
+        does not exist on the server.
+      </Overflow>
     </>
   );
   errorSuggestion = (
@@ -90,6 +92,19 @@ const ErrorMessage = () => {
   );
 };
 
+const Overflow = ({ children, afterContent }) => {
+  return (
+    <div style="display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis;">
+      <div style="display: flex; flex-grow: 1; width: 0;">
+        <div style="overflow: hidden; max-width: 100%; text-overflow: ellipsis;">
+          {children}
+        </div>
+        {afterContent}
+      </div>
+    </div>
+  );
+};
+
 const Breadcrumb = ({ items }) => {
   return (
     <h1 className="nav">
@@ -170,7 +185,7 @@ const DirectoryContent = ({ items }) => {
             isDirectory={directoryItem.url.endsWith("/")}
             isMainFile={directoryItem.isMainFile}
           >
-            {directoryItem.urlRelativeToCurrentDirectory}
+            {decodeURI(directoryItem.urlRelativeToCurrentDirectory)}
           </DirectoryContentItem>
         );
       })}
@@ -201,15 +216,17 @@ const DirectoryContentItem = ({ url, isDirectory, isMainFile, children }) => {
             }
           />
         </span>
-        {children}
-        {isDirectory ? (
-          <>
-            <span style="flex:1"></span>
-            <span className="directory_content_item_arrow">
-              <RightArrowSvg />
-            </span>
-          </>
-        ) : null}
+        <span className="directory_content_item_text">
+          <Overflow>{children}</Overflow>
+          {isDirectory ? (
+            <>
+              <span style="flex:1"></span>
+              <span className="directory_content_item_arrow">
+                <RightArrowSvg />
+              </span>
+            </>
+          ) : null}
+        </span>
       </a>
     </li>
   );

package/src/plugins/protocol_file/jsenv_plugin_directory_listing.js

@@ -37,7 +37,7 @@ import {
 } from "@jsenv/urls";
 import { existsSync, lstatSync, readdirSync } from "node:fs";
 import { getDirectoryWatchPatterns } from "../../helpers/watch_source_files.js";
-import { FILE_AND_SERVER_URLS_CONVERTER } from "./file_and_server_urls_converter.js";
+import { FILE_AND_SERVER_URLS_CONVERTER } from "../../kitchen/file_and_server_urls_converter.js";
 
 const htmlFileUrlForDirectory = import.meta.resolve(
   "./client/directory_listing.html",

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -2,7 +2,7 @@ import { readEntryStatSync } from "@jsenv/filesystem";
 import { ensurePathnameTrailingSlash } from "@jsenv/urls";
 import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js";
 import { readFileSync, readdirSync } from "node:fs";
-import { FILE_AND_SERVER_URLS_CONVERTER } from "./file_and_server_urls_converter.js";
+import { FILE_AND_SERVER_URLS_CONVERTER } from "../../kitchen/file_and_server_urls_converter.js";
 import { jsenvPluginDirectoryListing } from "./jsenv_plugin_directory_listing.js";
 import { jsenvPluginFsRedirection } from "./jsenv_plugin_fs_redirection.js";