@jsenv/core 29.9.0 → 29.9.1

package/README.md

@@ -17,7 +17,7 @@ https://github.com/jsenv/jsenv-core/wiki
 npm install --save-dev @jsenv/core
 ```
 
-_@jsenv/core_ is tested on Mac, Windows, Linux with Node.js 18.12.1.
+_@jsenv/core_ is tested on Mac, Windows, Linux with Node.js 18.
 Other operating systems and Node.js versions are not tested.
 
 # Name

package/dist/html/explorer.html

@@ -133,6 +133,7 @@ h4 {
   padding-top: 25px;
   padding-left: 25px;
   padding-right: 25px;
+  position: relative;
 }
 
 #explorables_header_bottom_spacing {
@@ -177,7 +178,7 @@ h4 {
   fill: #24b1b0;
 }
 
-#fileIconSvgConfig {
+#explorables_icon {
   width: 25px;
   height: 25px;
   stroke: none;
@@ -285,8 +286,8 @@ h4 {
         <section id="explorables">
           <div id="explorables-header">
             <div id="explorables_header_and_menu">
-              <h2 style="white-space: nowrap">
-                <svg id="fileIconSvgConfig" viewBox="0 0 24 24" width="32" height="32">
+              <h2>
+                <svg id="explorables_icon" viewBox="0 0 24 24" width="32" height="32">
                   <path d="M0 0h24v24H0V0z" fill="none"></path>
                   <path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"></path>
                 </svg>

package/dist/js/autoreload.js

@@ -1,24 +1,19 @@
 import { urlHotMetas } from "./import_meta_hot.js";
 import { parseSrcSet, stringifySrcSet } from "@jsenv/ast/src/html/html_src_set.js";
 
-const isAutoreloadEnabled = () => {
-  const value = window.localStorage.getItem("autoreload");
-  if (value === "0") {
-    return false;
-  }
-  return true;
-};
-const setAutoreloadPreference = value => {
-  window.localStorage.setItem("autoreload", value ? "1" : "0");
-};
-
 const compareTwoUrlPaths = (url, otherUrl) => {
   if (url === otherUrl) {
     return true;
   }
   const urlObject = new URL(url);
   const otherUrlObject = new URL(otherUrl);
-  return urlObject.origin === otherUrlObject.origin && urlObject.pathname === otherUrlObject.pathname;
+  if (urlObject.origin !== otherUrlObject.origin) {
+    return false;
+  }
+  if (urlObject.pathname !== otherUrlObject.pathname) {
+    return false;
+  }
+  return true;
 };
 const injectQuery = (url, query) => {
   const urlObject = new URL(url);
@@ -157,44 +152,68 @@ const reloadJsImport = async url => {
 
 const reloader = {
   urlHotMetas,
-  isAutoreloadEnabled,
-  setAutoreloadPreference,
-  status: "idle",
-  currentExecution: null,
-  onstatuschange: () => {},
-  setStatus: status => {
-    reloader.status = status;
-    reloader.onstatuschange();
+  status: {
+    value: "idle",
+    onchange: () => {},
+    goTo: value => {
+      reloader.status.value = value;
+      reloader.status.onchange();
+    }
   },
-  messages: [],
-  addMessage: reloadMessage => {
-    reloader.messages.push(reloadMessage);
-    if (isAutoreloadEnabled()) {
-      reloader.reload();
-    } else {
-      reloader.setStatus("can_reload");
+  autoreload: {
+    enabled: ["1", null].includes(window.localStorage.getItem("autoreload")),
+    onchange: () => {},
+    enable: () => {
+      reloader.autoreload.enabled = true;
+      window.localStorage.setItem("autoreload", "1");
+      reloader.autoreload.onchange();
+    },
+    disable: () => {
+      reloader.autoreload.enabled = false;
+      window.localStorage.setItem("autoreload", "0");
+      reloader.autoreload.onchange();
     }
   },
+  changes: {
+    value: [],
+    onchange: () => {},
+    add: reloadMessage => {
+      reloader.changes.value.push(reloadMessage);
+      reloader.changes.onchange();
+      if (reloader.autoreload.enabled) {
+        reloader.reload();
+      } else {
+        reloader.status.goTo("can_reload");
+      }
+    },
+    remove: reloadMessage => {
+      const index = reloader.changes.value.indexOf(reloadMessage);
+      if (index > -1) {
+        reloader.changes.value.splice(index, 1);
+        if (reloader.changes.value.length === 0) {
+          reloader.status.goTo("idle");
+        }
+        reloader.changes.onchange();
+      }
+    }
+  },
+  currentExecution: null,
   reload: () => {
-    const someEffectIsFullReload = reloader.messages.some(reloadMessage => reloadMessage.type === "full");
+    const someEffectIsFullReload = reloader.changes.value.some(reloadMessage => reloadMessage.type === "full");
     if (someEffectIsFullReload) {
       reloadHtmlPage();
       return;
     }
-    reloader.setStatus("reloading");
+    reloader.status.goTo("reloading");
     const onApplied = reloadMessage => {
-      const index = reloader.messages.indexOf(reloadMessage);
-      reloader.messages.splice(index, 1);
-      if (reloader.messages.length === 0) {
-        reloader.setStatus("idle");
-      }
+      reloader.changes.remove(reloadMessage);
     };
     const setReloadMessagePromise = (reloadMessage, promise) => {
       promise.then(() => {
         onApplied(reloadMessage);
         reloader.currentExecution = null;
       }, e => {
-        reloader.setStatus("failed");
+        reloader.status.goTo("failed");
         if (typeof window.reportError === "function") {
           window.reportError(e);
         } else {
@@ -205,7 +224,7 @@ This could be due to syntax errors or importing non-existent modules (see errors
         reloader.currentExecution = null;
       });
     };
-    reloader.messages.forEach(reloadMessage => {
+    reloader.changes.value.forEach(reloadMessage => {
       if (reloadMessage.type === "hot") {
         const promise = addToHotQueue(() => {
           return applyHotReload(reloadMessage);
@@ -297,7 +316,8 @@ const applyHotReload = async ({
       return namespace;
     }
     if (type === "html") {
-      if (!compareTwoUrlPaths(urlToFetch, window.location.href)) {
+      const isRootHtmlFile = window.location.pathname === "/" && new URL(urlToFetch).pathname.slice(1).indexOf("/") === -1;
+      if (!isRootHtmlFile && !compareTwoUrlPaths(urlToFetch, window.location.href)) {
         // we are not in that HTML page
         return null;
       }
@@ -325,6 +345,6 @@ const applyHotReload = async ({
 window.__reloader__ = reloader;
 window.__server_events__.listenEvents({
   reload: reloadServerEvent => {
-    reloader.addMessage(reloadServerEvent.data);
+    reloader.changes.add(reloadServerEvent.data);
   }
 });

package/dist/js/server_events_client.js

@@ -30,7 +30,8 @@ const createConnectionManager = (attemptConnection, {
     let msSpent = 0;
     const attempt = () => {
       readyState.goTo(READY_STATES.CONNECTING);
-      _disconnect = attemptConnection({
+      let timeout;
+      const cancelAttempt = attemptConnection({
         onClosed: () => {
           if (!retry) {
             readyState.goTo(READY_STATES.CLOSED);
@@ -47,7 +48,6 @@ const createConnectionManager = (attemptConnection, {
             console.info(`[jsenv] could not connect to server in less than ${retryAllocatedMs}ms`);
             return;
           }
-
           // if closed while open -> connection lost
           // otherwise it's the attempt to connect for the first time
           // or to reconnect
@@ -55,7 +55,7 @@ const createConnectionManager = (attemptConnection, {
             console.info(`[jsenv] server connection lost; retrying to connect`);
           }
           retryCount++;
-          setTimeout(() => {
+          timeout = setTimeout(() => {
             msSpent += retryAfter;
             attempt();
           }, retryAfter);
@@ -65,8 +65,13 @@ const createConnectionManager = (attemptConnection, {
           // console.info(`[jsenv] connected to server`)
         }
       });
-    };
 
+      _disconnect = () => {
+        cancelAttempt();
+        clearTimeout(timeout);
+        readyState.goTo(READY_STATES.CLOSED);
+      };
+    };
     attempt();
   };
   const disconnect = () => {

package/dist/js/supervisor.js

@@ -650,8 +650,10 @@ window.__supervisor__ = (() => {
           errorDetailsPromise
         });
         if (window.__reloader__) {
-          window.__reloader__.onstatuschange = () => {
-            if (window.__reloader__.status === "reloading") {
+          const onchange = window.__reloader__.status.onchange;
+          window.__reloader__.status.onchange = () => {
+            onchange();
+            if (window.__reloader__.status.value === "reloading") {
               removeErrorOverlay();
             }
           };

package/dist/main.js

@@ -20701,7 +20701,7 @@ const jsenvPluginRibbon = ({
     appliesDuring: "dev",
     transformUrlContent: {
       html: (urlInfo, context) => {
-        if (urlInfo.data.noribbon) {
+        if (urlInfo.data.isJsenvToolbar || urlInfo.data.noribbon) {
           return null;
         }
         const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "29.9.0",
+  "version": "29.9.1",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {

package/src/plugins/autoreload/client/autoreload.js

@@ -1,8 +1,4 @@
 import { urlHotMetas } from "../../import_meta_hot/client/import_meta_hot.js"
-import {
-  isAutoreloadEnabled,
-  setAutoreloadPreference,
-} from "./autoreload_preference.js"
 import { compareTwoUrlPaths } from "./url_helpers.js"
 import {
   reloadHtmlPage,
@@ -12,39 +8,63 @@ import {
 
 const reloader = {
   urlHotMetas,
-  isAutoreloadEnabled,
-  setAutoreloadPreference,
-  status: "idle",
-  currentExecution: null,
-  onstatuschange: () => {},
-  setStatus: (status) => {
-    reloader.status = status
-    reloader.onstatuschange()
+  status: {
+    value: "idle",
+    onchange: () => {},
+    goTo: (value) => {
+      reloader.status.value = value
+      reloader.status.onchange()
+    },
   },
-  messages: [],
-  addMessage: (reloadMessage) => {
-    reloader.messages.push(reloadMessage)
-    if (isAutoreloadEnabled()) {
-      reloader.reload()
-    } else {
-      reloader.setStatus("can_reload")
-    }
+  autoreload: {
+    enabled: ["1", null].includes(window.localStorage.getItem("autoreload")),
+    onchange: () => {},
+    enable: () => {
+      reloader.autoreload.enabled = true
+      window.localStorage.setItem("autoreload", "1")
+      reloader.autoreload.onchange()
+    },
+    disable: () => {
+      reloader.autoreload.enabled = false
+      window.localStorage.setItem("autoreload", "0")
+      reloader.autoreload.onchange()
+    },
   },
+  changes: {
+    value: [],
+    onchange: () => {},
+    add: (reloadMessage) => {
+      reloader.changes.value.push(reloadMessage)
+      reloader.changes.onchange()
+      if (reloader.autoreload.enabled) {
+        reloader.reload()
+      } else {
+        reloader.status.goTo("can_reload")
+      }
+    },
+    remove: (reloadMessage) => {
+      const index = reloader.changes.value.indexOf(reloadMessage)
+      if (index > -1) {
+        reloader.changes.value.splice(index, 1)
+        if (reloader.changes.value.length === 0) {
+          reloader.status.goTo("idle")
+        }
+        reloader.changes.onchange()
+      }
+    },
+  },
+  currentExecution: null,
   reload: () => {
-    const someEffectIsFullReload = reloader.messages.some(
+    const someEffectIsFullReload = reloader.changes.value.some(
       (reloadMessage) => reloadMessage.type === "full",
     )
     if (someEffectIsFullReload) {
       reloadHtmlPage()
       return
     }
-    reloader.setStatus("reloading")
+    reloader.status.goTo("reloading")
     const onApplied = (reloadMessage) => {
-      const index = reloader.messages.indexOf(reloadMessage)
-      reloader.messages.splice(index, 1)
-      if (reloader.messages.length === 0) {
-        reloader.setStatus("idle")
-      }
+      reloader.changes.remove(reloadMessage)
     }
     const setReloadMessagePromise = (reloadMessage, promise) => {
       promise.then(
@@ -53,7 +73,7 @@ const reloader = {
           reloader.currentExecution = null
         },
         (e) => {
-          reloader.setStatus("failed")
+          reloader.status.goTo("failed")
           if (typeof window.reportError === "function") {
             window.reportError(e)
           } else {
@@ -67,7 +87,7 @@ This could be due to syntax errors or importing non-existent modules (see errors
         },
       )
     }
-    reloader.messages.forEach((reloadMessage) => {
+    reloader.changes.value.forEach((reloadMessage) => {
       if (reloadMessage.type === "hot") {
         const promise = addToHotQueue(() => {
           return applyHotReload(reloadMessage)
@@ -162,7 +182,13 @@ const applyHotReload = async ({ hotInstructions }) => {
         return namespace
       }
       if (type === "html") {
-        if (!compareTwoUrlPaths(urlToFetch, window.location.href)) {
+        const isRootHtmlFile =
+          window.location.pathname === "/" &&
+          new URL(urlToFetch).pathname.slice(1).indexOf("/") === -1
+        if (
+          !isRootHtmlFile &&
+          !compareTwoUrlPaths(urlToFetch, window.location.href)
+        ) {
           // we are not in that HTML page
           return null
         }
@@ -194,6 +220,6 @@ const applyHotReload = async ({ hotInstructions }) => {
 window.__reloader__ = reloader
 window.__server_events__.listenEvents({
   reload: (reloadServerEvent) => {
-    reloader.addMessage(reloadServerEvent.data)
+    reloader.changes.add(reloadServerEvent.data)
   },
 })

package/src/plugins/autoreload/client/url_helpers.js

@@ -4,10 +4,13 @@ export const compareTwoUrlPaths = (url, otherUrl) => {
   }
   const urlObject = new URL(url)
   const otherUrlObject = new URL(otherUrl)
-  return (
-    urlObject.origin === otherUrlObject.origin &&
-    urlObject.pathname === otherUrlObject.pathname
-  )
+  if (urlObject.origin !== otherUrlObject.origin) {
+    return false
+  }
+  if (urlObject.pathname !== otherUrlObject.pathname) {
+    return false
+  }
+  return true
 }
 
 export const injectQuery = (url, query) => {

package/src/plugins/explorer/client/explorer.html

@@ -175,6 +175,7 @@
         padding-right: 25px;
         padding-top: 25px;
         background-color: #204143;
+        position: relative;
       }
 
       #explorables_header_bottom_spacing {
@@ -220,7 +221,7 @@
         fill: #24b1b0;
       }
 
-      #fileIconSvgConfig {
+      #explorables_icon {
         width: 25px;
         height: 25px;
         stroke: none;
@@ -325,9 +326,9 @@
         <section id="explorables">
           <div id="explorables-header">
             <div id="explorables_header_and_menu">
-              <h2 style="white-space: nowrap">
+              <h2>
                 <svg
-                  id="fileIconSvgConfig"
+                  id="explorables_icon"
                   viewBox="0 0 24 24"
                   width="32"
                   height="32"

package/src/plugins/ribbon/jsenv_plugin_ribbon.js

@@ -25,7 +25,7 @@ export const jsenvPluginRibbon = ({
     appliesDuring: "dev",
     transformUrlContent: {
       html: (urlInfo, context) => {
-        if (urlInfo.data.noribbon) {
+        if (urlInfo.data.isJsenvToolbar || urlInfo.data.noribbon) {
           return null
         }
         const { ribbon } = URL_META.applyAssociations({

package/src/plugins/server_events/client/connection_manager.js

@@ -34,7 +34,8 @@ export const createConnectionManager = (
     let msSpent = 0
     const attempt = () => {
       readyState.goTo(READY_STATES.CONNECTING)
-      _disconnect = attemptConnection({
+      let timeout
+      const cancelAttempt = attemptConnection({
         onClosed: () => {
           if (!retry) {
             readyState.goTo(READY_STATES.CLOSED)
@@ -55,7 +56,6 @@ export const createConnectionManager = (
             )
             return
           }
-
           // if closed while open -> connection lost
           // otherwise it's the attempt to connect for the first time
           // or to reconnect
@@ -63,7 +63,7 @@ export const createConnectionManager = (
             console.info(`[jsenv] server connection lost; retrying to connect`)
           }
           retryCount++
-          setTimeout(() => {
+          timeout = setTimeout(() => {
             msSpent += retryAfter
             attempt()
           }, retryAfter)
@@ -73,6 +73,11 @@ export const createConnectionManager = (
           // console.info(`[jsenv] connected to server`)
         },
       })
+      _disconnect = () => {
+        cancelAttempt()
+        clearTimeout(timeout)
+        readyState.goTo(READY_STATES.CLOSED)
+      }
     }
     attempt()
   }

package/src/plugins/supervisor/client/supervisor.js

@@ -664,8 +664,10 @@ window.__supervisor__ = (() => {
           errorDetailsPromise,
         })
         if (window.__reloader__) {
-          window.__reloader__.onstatuschange = () => {
-            if (window.__reloader__.status === "reloading") {
+          const onchange = window.__reloader__.status.onchange
+          window.__reloader__.status.onchange = () => {
+            onchange()
+            if (window.__reloader__.status.value === "reloading") {
               removeErrorOverlay()
             }
           }

package/src/plugins/autoreload/client/autoreload_preference.js

@@ -1,11 +0,0 @@
-export const isAutoreloadEnabled = () => {
-  const value = window.localStorage.getItem("autoreload")
-  if (value === "0") {
-    return false
-  }
-  return true
-}
-
-export const setAutoreloadPreference = (value) => {
-  window.localStorage.setItem("autoreload", value ? "1" : "0")
-}