@jsenv/core 40.8.4 → 40.9.1

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";