@jsenv/server 15.5.2 → 16.0.0

package/src/services/autoreload_on_server_restart/client/autoreload_on_server_restart.js

@@ -0,0 +1,125 @@
+const css = /* css */ `
+dialog {
+  opacity: 0;
+  transition: all 0.3s allow-discrete;
+}
+dialog::backdrop {
+   background-image: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
+  opacity: 0;
+  transition: all 0.3s allow-discrete;
+}
+dialog:open {
+  opacity: 1;
+}
+dialog:open::backdrop {
+  opacity: 0.75;
+}`;
+
+const html = /* html */ `<style>
+    ${css}
+</style>
+<dialog>
+    <p>Connection with server is lost</p>
+    <button autofocus name="reconnect">Retry</button>
+</dialog>`;
+
+class JsenvAutoreloadOnServerRestart extends HTMLElement {
+  constructor({ url } = {}) {
+    super();
+    const root = this.attachShadow({ mode: "open" });
+    root.innerHTML = html;
+
+    const dialog = root.querySelector("dialog");
+    const reconnectButton = dialog.querySelector('button[name="reconnect"]');
+
+    (async () => {
+      const connect = () => {
+        const websocket = new WebSocket(url);
+        const connectedPromise = new Promise((resolve) => {
+          websocket.onerror = () => {
+            resolve(null);
+          };
+          websocket.onopen = () => {
+            resolve(websocket);
+          };
+        });
+        return connectedPromise;
+      };
+
+      const initialWebSocket = await connect();
+      initialWebSocket.onclose = async () => {
+        console.info("connection to server lost, trying to reconnect");
+        const retry = async () => {
+          let attemptCount = 0;
+          let timeToWait = 100;
+          const tryToReconnect = async () => {
+            const newWebsocket = await connect();
+            if (newWebsocket) {
+              dialog.close();
+              console.info("reconnected to server, reloading the page...");
+              window.location.reload(true);
+              return;
+            }
+            attemptCount++;
+            if (attemptCount === 10) {
+              dialog.showModal();
+              reconnectButton.onclick = async () => {
+                reconnectButton.disabled = true;
+                const previousContext = reconnectButton.textContent;
+                reconnectButton.textContent = "Retrying...";
+                await retry();
+                reconnectButton.textContent = previousContext;
+                reconnectButton.disabled = false;
+              };
+              return;
+            }
+            timeToWait += 100;
+            await new Promise((resolve) => setTimeout(resolve, timeToWait));
+            await tryToReconnect();
+          };
+          await tryToReconnect();
+        };
+        retry();
+      };
+    })();
+  }
+}
+if (!customElements.get("jsenv-autoreload-on-server-restart")) {
+  customElements.define(
+    "jsenv-autoreload-on-server-restart",
+    JsenvAutoreloadOnServerRestart,
+  );
+}
+
+const jsenvAutoreloadOnServerRestartElement =
+  new JsenvAutoreloadOnServerRestart({
+    url: (() => {
+      const websocketScheme =
+        self.location.protocol === "https:" ? "wss" : "ws";
+      const websocketUrl = `${websocketScheme}://${self.location.host}/.internal/alive.websocket`;
+      return websocketUrl;
+    })(),
+  });
+
+// script is injected into document.body
+if (document.body) {
+  document.currentScript.parentNode.replaceChild(
+    jsenvAutoreloadOnServerRestartElement,
+    document.currentScript,
+  );
+}
+// script injected outisde document.body (likely in head)
+else {
+  document.currentScript.parentNode.removeChild(document.currentScript);
+  document.onreadystatechange = () => {
+    if (document.readyState === "interactive") {
+      document.body.appendChild(jsenvAutoreloadOnServerRestartElement);
+    }
+  };
+}

package/src/services/autoreload_on_server_restart/jsenv_service_autoreload_on_server_restart.js

@@ -0,0 +1,45 @@
+import { LazyServerEvents } from "../../server_events.js";
+
+export const jsenvServiceAutoreloadOnRestart = () => {
+  const aliveServerEvents = new LazyServerEvents(() => {});
+
+  return {
+    name: "jsenv:autoreload_on_server_restart",
+
+    routes: [
+      {
+        endpoint: "GET /.internal/alive.websocket",
+        description:
+          "Client can connect to this websocket endpoint to detect when server connection is lost.",
+        declarationSource: import.meta.url,
+        /* eslint-disable no-undef */
+        clientCodeExample: () => {
+          const websocket = new WebSocket(
+            "ws://localhost/.internal/alive.websocket",
+          );
+          websocket.onclose = () => {
+            // server connection closed
+            window.location.reload();
+          };
+        },
+        fetch: aliveServerEvents.fetch,
+      },
+      {
+        endpoint: "GET /.internal/alive.eventsource",
+        description: `Client can connect to this eventsource endpoint to detect when server connection is lost.
+This endpoint exists mostly to demo eventsource as there is already the websocket endpoint.`,
+        declarationSource: import.meta.url,
+        /* eslint-disable no-undef */
+        clientCodeExample: async () => {
+          const eventSource = new EventSource("/.internal/alive.eventsource");
+          eventSource.onerror = () => {
+            // server connection closed
+            window.location.reload();
+          };
+        },
+        /* eslint-enable no-undef */
+        fetch: aliveServerEvents.fetch,
+      },
+    ],
+  };
+};

package/src/services/cors/jsenv_service_cors.js

@@ -1,3 +1,8 @@
+/**
+ * @jsenv/server is already registering a route to handle OPTIONS request
+ * so here we just need to add the CORS headers to the response
+ */
+
 export const jsenvAccessControlAllowedHeaders = ["x-requested-with"];
 
 export const jsenvAccessControlAllowedMethods = [
@@ -21,7 +26,7 @@ export const jsenvServiceCORS = ({
   accessControlMaxAge = 600,
   timingAllowOrigin = false,
 } = {}) => {
-  // TODO: we should check access control params to throw or warn if we find strange values
+  // TODO: we should check access control params and throw/warn if we find strange values
 
   const corsEnabled =
     accessControlAllowRequestOrigin || accessControlAllowedOrigins.length;
@@ -32,22 +37,7 @@ export const jsenvServiceCORS = ({
 
   return {
     name: "jsenv:cors",
-
-    handleRequest: (request) => {
-      // when request method is "OPTIONS" we must return a 200 without body
-      // So we bypass "requestToResponse" in that scenario using shortcircuitResponse
-      if (request.method === "OPTIONS") {
-        return {
-          status: 200,
-          headers: {
-            "content-length": 0,
-          },
-        };
-      }
-      return null;
-    },
-
-    injectResponseHeaders: (response, { request }) => {
+    injectResponseProperties: (request) => {
       const accessControlHeaders = generateAccessControlHeaders({
         request,
         accessControlAllowedOrigins,
@@ -60,7 +50,9 @@ export const jsenvServiceCORS = ({
         accessControlMaxAge,
         timingAllowOrigin,
       });
-      return accessControlHeaders;
+      return {
+        headers: accessControlHeaders,
+      };
     },
   };
 };

package/src/services/default_body_4xx_5xx/client/4xx.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${status} ${statusText}</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .error_container {
+        text-align: center;
+        background: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+      .error_status {
+        font-size: 5rem;
+        color: #dc3545;
+        margin: 0;
+      }
+      .error_status_text {
+        font-size: 1.5rem;
+        margin: 10px 0;
+        word-break: break-word;
+        text-align: left;
+      }
+      .error_message {
+        font-size: 1rem;
+        color: #555;
+        word-break: break-word;
+        text-align: left;
+      }
+      .home_link {
+        margin-top: 15px;
+        display: inline-block;
+        padding: 10px 15px;
+        background-color: #007bff;
+        color: #fff;
+        text-decoration: none;
+        border-radius: 5px;
+      }
+      .home_link:hover {
+        background-color: #0056b3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error_container">
+      <p class="error_status">${status}</p>
+      <p class="error_status_text">${statusText}</p>
+      <p class="error_message">${statusMessage}</p>
+      <a href="/" jsenv-ignore class="home_link">Return to Home</a>
+    </div>
+    <script src="/@jsenv/server/src/services/autoreload_on_server_restart/client/autoreload_on_server_restart.js?inline"></script>
+  </body>
+</html>

package/src/services/default_body_4xx_5xx/jsenv_service_default_body_4xx_5xx.js

@@ -0,0 +1,82 @@
+import { readFileSync } from "node:fs";
+import { pickContentType } from "../../content_negotiation/pick_content_type.js";
+import { replacePlaceholdersInHtml } from "../../replace_placeholder_in_html.js";
+
+const clientErrorHtmlTemplateFileUrl = import.meta.resolve("./client/4xx.html");
+
+export const jsenvServiceDefaultBody4xx5xx = () => {
+  return {
+    name: "jsenv:default_body_4xx_5xx",
+
+    injectResponseProperties: (request, responseProperties) => {
+      if (responseProperties.body !== undefined) {
+        return null;
+      }
+      if (responseProperties.status >= 400 && responseProperties.status < 500) {
+        return generateBadStatusResponse(request, responseProperties);
+      }
+      if (responseProperties.status >= 500 && responseProperties.status < 600) {
+        return generateBadStatusResponse(request, responseProperties);
+      }
+      return null;
+    },
+  };
+};
+
+const generateBadStatusResponse = (
+  request,
+  { status, statusText, statusMessage },
+) => {
+  const contentTypeNegotiated = pickContentType(request, [
+    "text/html",
+    "text/plain",
+    "application/json",
+  ]);
+  if (contentTypeNegotiated === "text/html") {
+    const htmlTemplate = readFileSync(
+      new URL(clientErrorHtmlTemplateFileUrl),
+      "utf8",
+    );
+    if (statusMessage) {
+      statusMessage = statusMessage.replace(/https?:\/\/\S+/g, (url) => {
+        return `<a href="${url}">${url}</a>`;
+      });
+      statusMessage = statusMessage.replace(
+        /(^|\s)(\/\S+)/g,
+        (match, startOrSpace, resource) => {
+          let end = "";
+          if (resource[resource.length - 1] === ".") {
+            resource = resource.slice(0, -1);
+            end = ".";
+          }
+          return `${startOrSpace}<a href="${resource}">${resource}</a>${end}`;
+        },
+      );
+      statusMessage = statusMessage.replace(/\r\n|\r|\n/g, "<br />");
+    }
+
+    const html = replacePlaceholdersInHtml(htmlTemplate, {
+      status,
+      statusText,
+      statusMessage: statusMessage || "",
+    });
+    return new Response(html, {
+      headers: { "content-type": "text/html" },
+      status,
+      statusText,
+    });
+  }
+  if (contentTypeNegotiated === "text/plain") {
+    return new Response(statusMessage, {
+      status,
+      statusText,
+    });
+  }
+  return Response.json(
+    { statusMessage },
+    {
+      status,
+      statusText,
+    },
+  );
+};

package/src/services/error_handler/client/500.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Internal server error</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <h1>Internal server error</h1>
+    <p>${errorMessage}</p>
+    <details>
+      <summary>See internal error details</summary>
+      ${errorDetailsContent}
+    </details>
+  </body>
+</html>

package/src/services/error_handler/jsenv_service_error_handler.js

@@ -1,4 +1,8 @@
+import { readFileSync } from "node:fs";
 import { pickContentType } from "../../content_negotiation/pick_content_type.js";
+import { replacePlaceholdersInHtml } from "../../replace_placeholder_in_html.js";
+
+const internalErrorHtmlFileUrl = import.meta.resolve("./client/500.html");
 
 export const jsenvServiceErrorHandler = ({ sendErrorDetails = false } = {}) => {
   return {
@@ -31,7 +35,6 @@ export const jsenvServiceErrorHandler = ({ sendErrorDetails = false } = {}) => {
           const renderHtmlForErrorWithoutDetails = () => {
             return `<p>Details not available: to enable them use jsenvServiceErrorHandler({ sendErrorDetails: true }).</p>`;
           };
-
           const renderHtmlForErrorWithDetails = () => {
             if (serverInternalErrorIsAPrimitive) {
               return `<pre>${JSON.stringify(
@@ -43,38 +46,54 @@ export const jsenvServiceErrorHandler = ({ sendErrorDetails = false } = {}) => {
             return `<pre>${serverInternalError.stack}</pre>`;
           };
 
-          const body = `<!DOCTYPE html>
-<html>
-  <head>
-    <title>Internal server error</title>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-  </head>
-
-  <body>
-    <h1>Internal server error</h1>
-    <p>${
-      serverInternalErrorIsAPrimitive
-        ? `Code inside server has thrown a literal.`
-        : `Code inside server has thrown an error.`
-    }</p>
-    <details>
-      <summary>See internal error details</summary>
-      ${
-        sendErrorDetails
-          ? renderHtmlForErrorWithDetails()
-          : renderHtmlForErrorWithoutDetails()
-      }
-    </details>
-  </body>
-</html>`;
+          const internalErrorHtmlTemplate = readFileSync(
+            new URL(internalErrorHtmlFileUrl),
+            "utf8",
+          );
+          const internalErrorHtml = replacePlaceholdersInHtml(
+            internalErrorHtmlTemplate,
+            {
+              errorMessage: serverInternalErrorIsAPrimitive
+                ? `Code inside server has thrown a literal.`
+                : `Code inside server has thrown an error.`,
+              errorDetailsContent: sendErrorDetails
+                ? renderHtmlForErrorWithDetails()
+                : renderHtmlForErrorWithoutDetails(),
+            },
+          );
 
           return {
             headers: {
               "content-type": "text/html",
-              "content-length": Buffer.byteLength(body),
+              "content-length": Buffer.byteLength(internalErrorHtml),
             },
-            body,
+            body: internalErrorHtml,
+          };
+        },
+        "text/plain": () => {
+          let internalErrorMessage = serverInternalErrorIsAPrimitive
+            ? `Code inside server has thrown a literal:`
+            : `Code inside server has thrown an error:`;
+          if (sendErrorDetails) {
+            if (serverInternalErrorIsAPrimitive) {
+              internalErrorMessage += `\n${JSON.stringify(
+                serverInternalError,
+                null,
+                "  ",
+              )}`;
+            } else {
+              internalErrorMessage += `\n${serverInternalError.stack}`;
+            }
+          } else {
+            internalErrorMessage += `\nDetails not available: to enable them use jsenvServiceErrorHandler({ sendErrorDetails: true }).`;
+          }
+
+          return {
+            headers: {
+              "content-type": "text/plain",
+              "content-length": Buffer.byteLength(internalErrorMessage),
+            },
+            body: internalErrorMessage,
           };
         },
         "application/json": () => {

package/src/services/internal_client_files/jsenv_service_internal_client_files.js

@@ -0,0 +1,34 @@
+import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js";
+import { readFileSync } from "node:fs";
+
+const jsenvServerRootDirectoryUrl = import.meta.resolve("../../../");
+
+export const jsenvServiceInternalClientFiles = () => {
+  return {
+    name: "jsenv:internal_client_files",
+
+    routes: [
+      {
+        endpoint: "GET /@jsenv/server/*",
+        description: "Serve @jsenv/server internal files.",
+        availableMediaTypes: ["text/javascript"],
+        declarationSource: import.meta.url,
+        fetch: (request) => {
+          const path = request.params[0];
+          const jsenvServerClientFileUrl = new URL(
+            `./${path}`,
+            jsenvServerRootDirectoryUrl,
+          );
+          const fileContent = readFileSync(jsenvServerClientFileUrl, "utf8");
+          return new Response(fileContent, {
+            headers: {
+              "content-type": CONTENT_TYPE.fromUrlExtension(
+                jsenvServerClientFileUrl,
+              ),
+            },
+          });
+        },
+      },
+    ],
+  };
+};

package/src/services/open_file/jsenv_service_open_file.js

@@ -0,0 +1,37 @@
+import { urlToFileSystemPath } from "@jsenv/urls";
+import { createRequire } from "node:module";
+
+export const jsenvServiceOpenFile = () => {
+  return {
+    name: "jsenv:open_file",
+    routes: [
+      {
+        endpoint: "GET /.internal/open_file/*",
+        description: "Can be used to open a given file in your editor.",
+        declarationSource: import.meta.url,
+        fetch: (request) => {
+          let file = decodeURIComponent(request.params[0]);
+          if (!file) {
+            return {
+              status: 400,
+              body: "Missing file in url",
+            };
+          }
+          const fileUrl = new URL(file);
+          const filePath = urlToFileSystemPath(fileUrl);
+          const require = createRequire(import.meta.url);
+          const launch = require("launch-editor");
+          launch(filePath, () => {
+            // ignore error for now
+          });
+          return {
+            status: 200,
+            headers: {
+              "cache-control": "no-store",
+            },
+          };
+        },
+      },
+    ],
+  };
+};