Toolbar revival

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

dist/html/explorer.html

@@ -133,6 +133,7 @@
   padding-top: 25px;
   padding-left: 25px;
   padding-right: 25px;
+  position: relative;
 }
 
 #explorables_header_bottom_spacing {
@@ -177,7 +178,7 @@
   fill: #24b1b0;
 }
 
-#fileIconSvgConfig {
+#explorables_icon {
   width: 25px;
   height: 25px;
   stroke: none;
@@ -285,8 +286,8 @@ <h2>
         <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>

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);
   }
 });

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,15 +48,14 @@ 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
           if (readyState.value === READY_STATES.OPEN) {
             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 = () => {

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();
             }
           };

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.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": {

packages/create-jsenv/demo-node-package/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@jsenv/assert": "2.8.0",
-    "@jsenv/core": "29.9.0",
+    "@jsenv/core": "29.9.1",
     "@jsenv/eslint-config": "16.2.9",
     "@jsenv/eslint-import-resolver": "0.4.1",
     "eslint": "8.28.0",

packages/create-jsenv/demo-web-preact/package.json

@@ -20,7 +20,7 @@
     "@babel/plugin-syntax-import-assertions": "7.20.0",
     "@babel/plugin-transform-react-jsx": "7.19.0",
     "@jsenv/assert": "2.8.0",
-    "@jsenv/core": "29.9.0",
+    "@jsenv/core": "29.9.1",
     "@jsenv/plugin-preact": "1.2.7",
     "@jsenv/eslint-config": "16.2.9",
     "@jsenv/eslint-import-resolver": "0.4.1",

packages/create-jsenv/demo-web-react/package.json

@@ -21,7 +21,7 @@
     "@babel/plugin-syntax-import-assertions": "7.20.0",
     "@babel/plugin-transform-react-jsx": "7.19.0",
     "@jsenv/assert": "2.8.0",
-    "@jsenv/core": "29.9.0",
+    "@jsenv/core": "29.9.1",
     "@jsenv/plugin-react": "1.1.10",
     "@jsenv/eslint-config": "16.2.9",
     "@jsenv/eslint-import-resolver": "0.4.1",

packages/create-jsenv/demo-web/package.json

@@ -16,7 +16,7 @@
     "@babel/eslint-parser": "7.19.1",
     "@babel/plugin-syntax-import-assertions": "7.20.0",
     "@jsenv/assert": "2.8.0",
-    "@jsenv/core": "29.9.0",
+    "@jsenv/core": "29.9.1",
     "@jsenv/eslint-config": "16.2.9",
     "@jsenv/eslint-import-resolver": "0.4.1",
     "eslint": "8.28.0",

packages/create-jsenv/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jsenv",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "npm initializer for jsenv",
   "license": "MIT",
   "repository": {

packages/jsenv-plugin-toolbar/.eslintignore

@@ -0,0 +1,3 @@
+.jsenv/
+dist/
+node_modules/