@jsenv/core 40.7.0 → 40.7.1

package/src/dev/start_dev_server.js

@@ -15,7 +15,7 @@ import {
 } from "@jsenv/server";
 import { convertFileSystemErrorToResponseProperties } from "@jsenv/server/src/internal/convertFileSystemErrorToResponseProperties.js";
 import { URL_META } from "@jsenv/url-meta";
-import { urlIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
+import { urlIsOrIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
 import { existsSync, readFileSync } from "node:fs";
 import { defaultRuntimeCompat } from "../build/build_params.js";
 import { createEventEmitter } from "../helpers/event_emitter.js";
@@ -131,7 +131,7 @@ export const startDevServer = async ({
       if (
         process.env.CAPTURING_SIDE_EFFECTS ||
         (!import.meta.build &&
-          urlIsInsideOf(sourceDirectoryUrl, jsenvCoreDirectoryUrl))
+          urlIsOrIsInsideOf(sourceDirectoryUrl, jsenvCoreDirectoryUrl))
       ) {
         outDirectoryUrl = new URL("../.jsenv/", sourceDirectoryUrl);
       } else {
@@ -248,7 +248,7 @@ export const startDevServer = async ({
       read: readPackageAtOrNull,
     };
 
-    const devServerPluginStore = createPluginStore([
+    const devServerPluginStore = await createPluginStore([
       jsenvPluginServerEvents({ clientAutoreload }),
       ...plugins,
       ...getCorePlugins({
@@ -274,7 +274,7 @@ export const startDevServer = async ({
         ribbon,
       }),
     ]);
-    const getOrCreateKitchen = (request) => {
+    const getOrCreateKitchen = async (request) => {
       const { runtimeName, runtimeVersion } = parseUserAgentHeader(
         request.headers["user-agent"] || "",
       );
@@ -397,7 +397,7 @@ export const startDevServer = async ({
           );
         },
       );
-      const devServerPluginController = createPluginController(
+      const devServerPluginController = await createPluginController(
         devServerPluginStore,
         kitchen,
       );
@@ -413,8 +413,8 @@ export const startDevServer = async ({
 
     finalServices.push({
       name: "jsenv:dev_server_routes",
-      augmentRouteFetchSecondArg: (request) => {
-        const kitchen = getOrCreateKitchen(request);
+      augmentRouteFetchSecondArg: async (request) => {
+        const kitchen = await getOrCreateKitchen(request);
         return { kitchen };
       },
       routes: [
@@ -617,6 +617,7 @@ export const startDevServer = async ({
         },
       ],
     });
+    finalServices.push(...devServerPluginStore.allDevServerServices);
   }
   // jsenv error handler service
   {

package/src/helpers/web_url_converter.js

@@ -1,9 +1,9 @@
 import { ensureWindowsDriveLetter } from "@jsenv/filesystem";
-import { moveUrl, urlIsInsideOf } from "@jsenv/urls";
+import { moveUrl, urlIsOrIsInsideOf } from "@jsenv/urls";
 
 export const WEB_URL_CONVERTER = {
   asWebUrl: (fileUrl, webServer) => {
-    if (urlIsInsideOf(fileUrl, webServer.rootDirectoryUrl)) {
+    if (urlIsOrIsInsideOf(fileUrl, webServer.rootDirectoryUrl)) {
       return moveUrl({
         url: fileUrl,
         from: webServer.rootDirectoryUrl,

package/src/kitchen/errors.js

@@ -176,7 +176,7 @@ ${error.message}`,
       name: "TRANSFORM_URL_CONTENT_ERROR",
       code: "PARSE_ERROR",
       reason: error.message,
-      stack: error.stack,
+      stack: transformError.stack,
       trace,
       asResponse: error.asResponse,
     });

package/src/kitchen/out_directory_url.js

@@ -1,6 +1,6 @@
 import { ensureWindowsDriveLetter } from "@jsenv/filesystem";
 import { generateSourcemapFileUrl } from "@jsenv/sourcemap";
-import { moveUrl, setUrlFilename, urlIsInsideOf } from "@jsenv/urls";
+import { moveUrl, setUrlFilename, urlIsOrIsInsideOf } from "@jsenv/urls";
 
 export const determineFileUrlForOutDirectory = (urlInfo) => {
   let { url, filenameHint } = urlInfo;
@@ -11,7 +11,7 @@ export const determineFileUrlForOutDirectory = (urlInfo) => {
   if (!url.startsWith("file:")) {
     return url;
   }
-  if (!urlIsInsideOf(url, rootDirectoryUrl)) {
+  if (!urlIsOrIsInsideOf(url, rootDirectoryUrl)) {
     const fsRootUrl = ensureWindowsDriveLetter("file:///", url);
     url = `${rootDirectoryUrl}@fs/${url.slice(fsRootUrl.length)}`;
   }

package/src/plugins/autoreload/jsenv_plugin_autoreload_server.js

@@ -1,4 +1,4 @@
-import { urlIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
+import { urlIsOrIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
 
 export const jsenvPluginAutoreloadServer = ({
   clientFileChangeEventEmitter,
@@ -10,7 +10,7 @@ export const jsenvPluginAutoreloadServer = ({
     serverEvents: {
       reload: (serverEventInfo) => {
         const formatUrlForClient = (url) => {
-          if (urlIsInsideOf(url, serverEventInfo.rootDirectoryUrl)) {
+          if (urlIsOrIsInsideOf(url, serverEventInfo.rootDirectoryUrl)) {
             return urlToRelativeUrl(url, serverEventInfo.rootDirectoryUrl);
           }
           if (url.startsWith("file:")) {

package/src/plugins/chrome_devtools_json/jsenv_plugin_chrome_devtools_json.js

@@ -28,6 +28,7 @@ export const jsenvPluginChromeDevtoolsJson = () => {
     devServerRoutes: [
       {
         endpoint: "GET /.well-known/appspecific/com.chrome.devtools.json",
+        declarationSource: import.meta.url,
         fetch: (request, { kitchen }) => {
           const { rootDirectoryUrl } = kitchen.context;
           return Response.json({

package/src/plugins/plugin_controller.js

@@ -1,10 +1,19 @@
 import { performance } from "node:perf_hooks";
 import { jsenvPluginHtmlSyntaxErrorFallback } from "./html_syntax_error_fallback/jsenv_plugin_html_syntax_error_fallback.js";
 
-export const createPluginStore = (plugins) => {
+export const createPluginStore = async (plugins) => {
   const allDevServerRoutes = [];
+  const allDevServerServices = [];
   const pluginArray = [];
-  const addPlugin = (plugin) => {
+
+  const pluginPromises = [];
+  const addPlugin = async (plugin) => {
+    if (plugin && typeof plugin.then === "function") {
+      pluginPromises.push(plugin);
+      const value = await plugin;
+      addPlugin(value);
+      return;
+    }
     if (Array.isArray(plugin)) {
       for (const subplugin of plugin) {
         addPlugin(subplugin);
@@ -23,21 +32,28 @@ export const createPluginStore = (plugins) => {
         allDevServerRoutes.push(devServerRoute);
       }
     }
+    if (plugin.devServerServices) {
+      const devServerServices = plugin.devServerServices;
+      for (const devServerService of devServerServices) {
+        allDevServerServices.push(devServerService);
+      }
+    }
     pluginArray.push(plugin);
   };
   addPlugin(jsenvPluginHtmlSyntaxErrorFallback());
   for (const plugin of plugins) {
     addPlugin(plugin);
   }
+  await Promise.all(pluginPromises);
 
   return {
     pluginArray,
-
     allDevServerRoutes,
+    allDevServerServices,
   };
 };
 
-export const createPluginController = (
+export const createPluginController = async (
   pluginStore,
   kitchen,
   { initialPuginsMeta = {} } = {},
@@ -60,7 +76,7 @@ export const createPluginController = (
       pluginCandidate.destroy?.();
       continue;
     }
-    const initPluginResult = initPlugin(pluginCandidate, kitchen);
+    const initPluginResult = await initPlugin(pluginCandidate, kitchen);
     if (!initPluginResult) {
       pluginCandidate.destroy?.();
       continue;
@@ -112,6 +128,7 @@ export const createPluginController = (
         key === "serverEvents" ||
         key === "mustStayFirst" ||
         key === "devServerRoutes" ||
+        key === "devServerServices" ||
         key === "effect"
       ) {
         continue;
@@ -285,6 +302,7 @@ export const createPluginController = (
 const HOOK_NAMES = [
   "init",
   "devServerRoutes", // is called only during dev/tests
+  "devServerServices", // is called only during dev/tests
   "resolveReference",
   "redirectReference",
   "transformReferenceSearchParams",
@@ -339,12 +357,12 @@ const testAppliesDuring = (plugin, kitchen) => {
     `"appliesDuring" must be an object or a string, got ${appliesDuring}`,
   );
 };
-const initPlugin = (plugin, kitchen) => {
+const initPlugin = async (plugin, kitchen) => {
   const { init } = plugin;
   if (!init) {
     return true;
   }
-  const initReturnValue = init(kitchen.context, { plugin });
+  const initReturnValue = await init(kitchen.context, { plugin });
   if (initReturnValue === false) {
     return false;
   }

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

@@ -6,7 +6,7 @@ const fileIconUrl = import.meta.resolve("./assets/file.png");
 const homeIconUrl = import.meta.resolve("./assets/home.svg#root");
 
 let {
-  navItems,
+  breadcrumb,
   mainFilePath,
   directoryContentItems,
   enoentDetails,
@@ -49,38 +49,51 @@ const DirectoryListing = () => {
   return (
     <>
       {enoentDetails ? <ErrorMessage /> : null}
-      <Nav />
+      <Breadcrumb items={breadcrumb} />
       <DirectoryContent items={directoryItems} />
     </>
   );
 };
 
 const ErrorMessage = () => {
-  const { fileUrl, filePathExisting, filePathNotFound } = enoentDetails;
+  const { filePathExisting, filePathNotFound } = enoentDetails;
+
+  let errorText;
+  let errorSuggestion;
+  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.
+    </>
+  );
+  errorSuggestion = (
+    <>
+      <span className="icon">🔍</span> Check available routes in{" "}
+      <a href="/.internal/route_inspector">route inspector</a>
+    </>
+  );
 
   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>
-      <br />
-      <span className="error_text" style="font-size: 70%;">
-        See also available routes in the{" "}
-        <a href="/.internal/route_inspector">route inspector</a>.
-      </span>
-    </p>
+    <div className="error_message">
+      <p className="error_text">{errorText}</p>
+      <p
+        className="error_suggestion"
+        style="font-size: 0.8em; margin-top: 10px;"
+      >
+        {errorSuggestion}
+      </p>
+    </div>
   );
 };
 
-const Nav = () => {
+const Breadcrumb = ({ items }) => {
   return (
     <h1 className="nav">
-      {navItems.map((navItem) => {
+      {items.map((navItem) => {
         const {
           url,
           urlRelativeToServer,
@@ -91,7 +104,7 @@ const Nav = () => {
         const isDirectory = new URL(url).pathname.endsWith("/");
         return (
           <>
-            <NavItem
+            <BreadcrumbItem
               key={url}
               url={urlRelativeToServer}
               isCurrent={isCurrent}
@@ -99,7 +112,7 @@ const Nav = () => {
               iconLinkUrl={isServerRootDirectory ? `/${mainFilePath}` : ""}
             >
               {name}
-            </NavItem>
+            </BreadcrumbItem>
             {isDirectory ? (
               <span className="directory_separator">/</span>
             ) : null}
@@ -109,7 +122,13 @@ const Nav = () => {
     </h1>
   );
 };
-const NavItem = ({ url, iconImageUrl, iconLinkUrl, isCurrent, children }) => {
+const BreadcrumbItem = ({
+  url,
+  iconImageUrl,
+  iconLinkUrl,
+  isCurrent,
+  children,
+}) => {
   return (
     <span className="nav_item" data-current={isCurrent ? "" : undefined}>
       {iconLinkUrl ? (

package/src/plugins/protocol_file/file_and_server_urls_converter.js

@@ -1,11 +1,8 @@
-import { urlIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
+import { urlIsOrIsInsideOf, urlToRelativeUrl } from "@jsenv/urls";
 
 export const FILE_AND_SERVER_URLS_CONVERTER = {
   asServerUrl: (fileUrl, serverRootDirectoryUrl) => {
-    if (fileUrl === serverRootDirectoryUrl) {
-      return "/";
-    }
-    if (urlIsInsideOf(fileUrl, serverRootDirectoryUrl)) {
+    if (urlIsOrIsInsideOf(fileUrl, serverRootDirectoryUrl)) {
       const urlRelativeToServer = urlToRelativeUrl(
         fileUrl,
         serverRootDirectoryUrl,

package/src/plugins/protocol_file/jsenv_plugin_directory_listing.js

@@ -31,7 +31,7 @@ import { pickContentType, WebSocketResponse } from "@jsenv/server";
 import {
   asUrlWithoutSearch,
   ensurePathnameTrailingSlash,
-  urlIsInsideOf,
+  urlIsOrIsInsideOf,
   urlToFilename,
   urlToRelativeUrl,
 } from "@jsenv/urls";
@@ -44,6 +44,7 @@ const htmlFileUrlForDirectory = import.meta.resolve(
 );
 
 export const jsenvPluginDirectoryListing = ({
+  spa,
   urlMocks = false,
   autoreload = true,
   directoryContentMagicName,
@@ -85,7 +86,7 @@ export const jsenvPluginDirectoryListing = ({
             return null;
           }
         }
-        return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(url)}&enoent`;
+        return `${htmlFileUrlForDirectory}?url=${encodeURIComponent(requestedUrl)}&enoent`;
       }
       const isDirectory = fsStat?.isDirectory();
       if (!isDirectory) {
@@ -111,21 +112,22 @@ export const jsenvPluginDirectoryListing = ({
         if (urlWithoutSearch !== String(htmlFileUrlForDirectory)) {
           return null;
         }
-        const requestedUrl = urlInfo.searchParams.get("url");
-        if (!requestedUrl) {
+        const urlNotFound = urlInfo.searchParams.get("url");
+        if (!urlNotFound) {
           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;
         const directoryListingInjections = generateDirectoryListingInjection(
-          requestedUrl,
+          urlNotFound,
           {
+            spa,
             autoreload,
             request,
             urlMocks,
@@ -219,8 +221,9 @@ export const jsenvPluginDirectoryListing = ({
 };
 
 const generateDirectoryListingInjection = (
-  requestedUrl,
+  urlNotFound,
   {
+    spa,
     rootDirectoryUrl,
     mainFilePath,
     packageDirectory,
@@ -233,13 +236,13 @@ const generateDirectoryListingInjection = (
 ) => {
   let serverRootDirectoryUrl = rootDirectoryUrl;
   const firstExistingDirectoryUrl = getFirstExistingDirectoryUrl(
-    requestedUrl,
+    urlNotFound,
     serverRootDirectoryUrl,
   );
   const directoryContentItems = getDirectoryContentItems({
     serverRootDirectoryUrl,
     mainFilePath,
-    requestedUrl,
+    requestedUrl: urlNotFound,
     firstExistingDirectoryUrl,
   });
   package_workspaces: {
@@ -285,8 +288,8 @@ const generateDirectoryListingInjection = (
   const { host } = new URL(request.url);
   const websocketUrl = `${websocketScheme}://${host}/.internal/directory_content.websocket?directory=${encodeURIComponent(directoryUrlRelativeToServer)}`;
 
-  const navItems = [];
-  nav_items: {
+  const generateBreadcrumb = () => {
+    const breadcrumb = [];
     const lastItemUrl = firstExistingDirectoryUrl;
     const lastItemRelativeUrl = urlToRelativeUrl(lastItemUrl, rootDirectoryUrl);
     const rootDirectoryUrlName = urlToFilename(rootDirectoryUrl);
@@ -296,7 +299,6 @@ const generateDirectoryListingInjection = (
     } else {
       parts = [rootDirectoryUrlName];
     }
-
     let i = 0;
     while (i < parts.length) {
       const part = parts[i];
@@ -317,7 +319,7 @@ const generateDirectoryListingInjection = (
         navItemUrl,
         serverRootDirectoryUrl,
       );
-      let urlRelativeToDocument = urlToRelativeUrl(navItemUrl, requestedUrl);
+      let urlRelativeToDocument = urlToRelativeUrl(navItemUrl, urlNotFound);
       const isServerRootDirectory = navItemUrl === serverRootDirectoryUrl;
       if (isServerRootDirectory) {
         urlRelativeToServer = `/${directoryContentMagicName}`;
@@ -325,7 +327,7 @@ const generateDirectoryListingInjection = (
       }
       const name = part;
       const isCurrent = navItemUrl === String(firstExistingDirectoryUrl);
-      navItems.push({
+      breadcrumb.push({
         url: navItemUrl,
         urlRelativeToServer,
         urlRelativeToDocument,
@@ -335,34 +337,47 @@ const generateDirectoryListingInjection = (
       });
       i++;
     }
-  }
+    return breadcrumb;
+  };
+  const breadcrumb = generateBreadcrumb(urlNotFound);
 
   let enoentDetails = null;
   if (enoent) {
+    const buildEnoentPathInfo = (urlBase, closestExistingUrl) => {
+      let filePathExisting;
+      let filePathNotFound;
+      const existingIndex = String(closestExistingUrl).length;
+      filePathExisting = urlToRelativeUrl(
+        closestExistingUrl,
+        serverRootDirectoryUrl,
+      );
+      filePathNotFound = urlBase.slice(existingIndex);
+      return [filePathExisting, filePathNotFound];
+    };
     const fileRelativeUrl = urlToRelativeUrl(
-      requestedUrl,
-      serverRootDirectoryUrl,
-    );
-    let filePathExisting;
-    let filePathNotFound;
-    const existingIndex = String(firstExistingDirectoryUrl).length;
-    filePathExisting = urlToRelativeUrl(
-      firstExistingDirectoryUrl,
+      urlNotFound,
       serverRootDirectoryUrl,
     );
-    filePathNotFound = requestedUrl.slice(existingIndex);
     enoentDetails = {
-      fileUrl: requestedUrl,
+      fileUrl: urlNotFound,
       fileRelativeUrl,
+    };
+
+    const [filePathExisting, filePathNotFound] = buildEnoentPathInfo(
+      urlNotFound,
+      firstExistingDirectoryUrl,
+    );
+    Object.assign(enoentDetails, {
       filePathExisting: `/${filePathExisting}`,
       filePathNotFound,
-    };
+    });
   }
 
   return {
     __DIRECTORY_LISTING__: {
+      spa,
       enoentDetails,
-      navItems,
+      breadcrumb,
       urlMocks,
       directoryContentMagicName,
       directoryUrl: firstExistingDirectoryUrl,
@@ -375,11 +390,11 @@ const generateDirectoryListingInjection = (
     },
   };
 };
-const getFirstExistingDirectoryUrl = (requestedUrl, serverRootDirectoryUrl) => {
-  let directoryUrlCandidate = new URL("./", requestedUrl);
+const getFirstExistingDirectoryUrl = (urlBase, serverRootDirectoryUrl) => {
+  let directoryUrlCandidate = new URL("./", urlBase);
   while (!existsSync(directoryUrlCandidate)) {
     directoryUrlCandidate = new URL("../", directoryUrlCandidate);
-    if (!urlIsInsideOf(directoryUrlCandidate, serverRootDirectoryUrl)) {
+    if (!urlIsOrIsInsideOf(directoryUrlCandidate, serverRootDirectoryUrl)) {
       directoryUrlCandidate = new URL(serverRootDirectoryUrl);
       break;
     }

package/src/plugins/protocol_file/jsenv_plugin_fs_redirection.js

@@ -4,7 +4,7 @@ import {
   getExtensionsToTry,
 } from "@jsenv/node-esm-resolution";
 import {
-  urlIsInsideOf,
+  urlIsOrIsInsideOf,
   urlToExtension,
   urlToFilename,
   urlToPathname,
@@ -13,7 +13,7 @@ import { existsSync, realpathSync } from "node:fs";
 import { pathToFileURL } from "node:url";
 
 export const jsenvPluginFsRedirection = ({
-  spa = true,
+  spa,
   directoryContentMagicName,
   magicExtensions = ["inherit", ".js"],
   magicDirectoryIndex = true,
@@ -172,17 +172,12 @@ const getClosestHtmlRootFile = (requestedUrl, serverRootDirectoryUrl) => {
     if (existsSync(indexHtmlFileUrl)) {
       return indexHtmlFileUrl.href;
     }
-    const htmlFileUrlCandidate = new URL(
-      `${urlToFilename(directoryUrl)}.html`,
-      directoryUrl,
-    );
+    const filename = urlToFilename(directoryUrl);
+    const htmlFileUrlCandidate = new URL(`${filename}.html`, directoryUrl);
     if (existsSync(htmlFileUrlCandidate)) {
       return htmlFileUrlCandidate.href;
     }
-    if (
-      !urlIsInsideOf(directoryUrl, serverRootDirectoryUrl) ||
-      directoryUrl.href === serverRootDirectoryUrl
-    ) {
+    if (!urlIsOrIsInsideOf(directoryUrl, serverRootDirectoryUrl)) {
       return null;
     }
     directoryUrl = new URL("../", directoryUrl);

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -9,7 +9,7 @@ import { jsenvPluginFsRedirection } from "./jsenv_plugin_fs_redirection.js";
 const directoryContentMagicName = "...";
 
 export const jsenvPluginProtocolFile = ({
-  spa,
+  spa = true,
   magicExtensions,
   magicDirectoryIndex,
   preserveSymlinks,
@@ -77,6 +77,7 @@ export const jsenvPluginProtocolFile = ({
     ...(directoryListing
       ? [
           jsenvPluginDirectoryListing({
+            spa,
             ...directoryListing,
             directoryContentMagicName,
             rootDirectoryUrl,

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

@@ -1,43 +1,46 @@
 export const injectRibbon = ({ text }) => {
   const css = /* css */ `
-      #jsenv_ribbon_container {
-        position: fixed;
-        z-index: 1001;
-        top: 0;
-        right: 0;
-        width: 100px;
-        height: 100px;
-        overflow: hidden;
-        opacity: 0.5;
-        pointer-events: none;
-      }
-      #jsenv_ribbon {
-        position: absolute;
-        top: -10px;
-        right: -10px;
-        width: 100%;
-        height: 100%;
-      }
-      #jsenv_ribbon_text {
-        position: absolute;
-        left: 0px;
-        top: 20px;
-        transform: rotate(45deg);
-        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;
-        user-select: none;
-      }`;
+    #jsenv_ribbon_container {
+      position: fixed;
+      z-index: 1001;
+      top: 0;
+      right: 0;
+      width: 100px;
+      height: 100px;
+      overflow: hidden;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    #jsenv_ribbon {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      width: 100%;
+      height: 100%;
+    }
+    #jsenv_ribbon_text {
+      position: absolute;
+      left: 0px;
+      top: 20px;
+      transform: rotate(45deg);
+      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;
+      user-select: none;
+    }
+  `;
   const html = /* html */ `<div id="jsenv_ribbon_container">
-      <style>${css}</style>
+      <style>
+        ${css}
+      </style>
       <div id="jsenv_ribbon">
         <div id="jsenv_ribbon_text">${text}</div>
       </div>