@jsenv/core 38.4.19 → 38.4.20

package/dist/js/ribbon.js

@@ -37,26 +37,34 @@ const injectRibbon = ({ text }) => {
         user-select: none;
       }
     `;
-
   const html = /* html */ `<div id="jsenv_ribbon_container">
       <style>${css}</style>
       <div id="jsenv_ribbon">
         <div id="jsenv_ribbon_text">${text}</div>
       </div>
     </div>`;
-
-  const node = document.createElement("div");
-  node.innerHTML = html;
-
+  class JsenvRibbonHtmlElement extends HTMLElement {
+    constructor({ hidden }) {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = html;
+      if (hidden) {
+        root.style.display = "none";
+      }
+    }
+  }
+  if (customElements && !customElements.get("jsenv-ribbon")) {
+    customElements.define("jsenv-ribbon", JsenvRibbonHtmlElement);
+  }
   const toolbarStateInLocalStorage = localStorage.hasOwnProperty(
     "jsenv_toolbar",
   )
     ? JSON.parse(localStorage.getItem("jsenv_toolbar"))
     : {};
-  if (toolbarStateInLocalStorage.ribbonDisplayed === false) {
-    node.querySelector("#jsenv_ribbon_container").style.display = "none";
-  }
-  document.body.appendChild(node.firstChild);
+  const jsenvRibbonElement = new JsenvRibbonHtmlElement({
+    hidden: toolbarStateInLocalStorage.ribbonDisplayed === false,
+  });
+  document.body.appendChild(jsenvRibbonElement);
 };
 
 export { injectRibbon };

package/dist/jsenv_core.js

@@ -15928,7 +15928,8 @@ const jsenvPluginHtmlReferenceAnalysis = ({
               line,
               column,
             });
-            console.error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
+            urlInfo.kitchen.context.logger
+              .error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
 ${e.reasonCode}
 ${urlInfo.url}:${line}:${column}
 ${htmlErrorContentFrame}`);

package/package.json

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

package/src/plugins/reference_analysis/html/jsenv_plugin_html_reference_analysis.js

@@ -151,7 +151,8 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
               line,
               column,
             });
-            console.error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
+            urlInfo.kitchen.context.logger
+              .error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
 ${e.reasonCode}
 ${urlInfo.url}:${line}:${column}
 ${htmlErrorContentFrame}`);

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

@@ -37,24 +37,32 @@ export const injectRibbon = ({ text }) => {
         user-select: none;
       }
     `;
-
   const html = /* html */ `<div id="jsenv_ribbon_container">
       <style>${css}</style>
       <div id="jsenv_ribbon">
         <div id="jsenv_ribbon_text">${text}</div>
       </div>
     </div>`;
-
-  const node = document.createElement("div");
-  node.innerHTML = html;
-
+  class JsenvRibbonHtmlElement extends HTMLElement {
+    constructor({ hidden }) {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = html;
+      if (hidden) {
+        root.style.display = "none";
+      }
+    }
+  }
+  if (customElements && !customElements.get("jsenv-ribbon")) {
+    customElements.define("jsenv-ribbon", JsenvRibbonHtmlElement);
+  }
   const toolbarStateInLocalStorage = localStorage.hasOwnProperty(
     "jsenv_toolbar",
   )
     ? JSON.parse(localStorage.getItem("jsenv_toolbar"))
     : {};
-  if (toolbarStateInLocalStorage.ribbonDisplayed === false) {
-    node.querySelector("#jsenv_ribbon_container").style.display = "none";
-  }
-  document.body.appendChild(node.firstChild);
+  const jsenvRibbonElement = new JsenvRibbonHtmlElement({
+    hidden: toolbarStateInLocalStorage.ribbonDisplayed === false,
+  });
+  document.body.appendChild(jsenvRibbonElement);
 };