@jsenv/plugin-toolbar 1.3.9 → 1.4.0

package/dist/js/toolbar_injector.js

@@ -22,25 +22,11 @@ const injectToolbar = async ({
       window.requestAnimationFrame(resolve);
     }
   });
-  const placeholder = getToolbarPlaceholder();
-  const iframe = document.createElement("iframe");
-  iframe.setAttribute("tabindex", -1);
-  iframe.setAttribute("allowtransparency", true);
-  // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
-  // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
-  Object.assign(iframe.style, {
-    "position": "fixed",
-    "zIndex": 1000,
-    "bottom": 0,
-    "left": 0,
-    "width": "100%",
-    "height": 0,
-    /* ensure toolbar children are not focusable when hidden */
-    "visibility": "hidden",
-    "transition-duration": "0",
-    "transition-property": "height, visibility",
-    "border": "none"
-  });
+  const jsenvToolbar = document.createElement("jsenv-toolbar");
+  const iframe = createIframeNode();
+  const toolbarTriggerNode = createToolbarTriggerNode();
+  jsenvToolbar.appendChild(iframe);
+  jsenvToolbar.appendChild(toolbarTriggerNode);
   const iframeLoadedPromise = iframeToLoadedPromise(iframe);
   const toolbarUrlObject = new URL(toolbarUrl, window.location.href);
   toolbarUrlObject.searchParams.set("logLevel", logLevel);
@@ -60,61 +46,43 @@ const injectToolbar = async ({
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
   iframe.setAttribute("src", toolbarUrlObject.href);
   iframe.name = "jsenv toolbar";
-  placeholder.parentNode.replaceChild(iframe, placeholder);
-  const listenToolbarStateChange = callback => {
-    return addToolbarEventCallback(iframe, "toolbar_state_change", callback);
-  };
-  const cleanupInitOnReady = addToolbarEventCallback(iframe, "toolbar_ready", () => {
-    cleanupInitOnReady();
-    sendCommandToToolbar(iframe, "initToolbar");
-    setTimeout(() => {
-      listenToolbarStateChange(({
-        animationsEnabled
-      }) => {
-        if (animationsEnabled) {
-          iframe.style.transitionDuration = "300ms";
-        } else {
-          iframe.style.transitionDuration = "0s";
-        }
-      });
-    });
-  });
-  const div = document.createElement("div");
-  div.innerHTML = "\n<div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n  <svg id=\"jsenv_toolbar_trigger_icon\">\n    <use xlink:href=\"".concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n  </svg>\n  <style>\n    #jsenv_toolbar_trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }\n  </style>\n</div>");
-  const toolbarTrigger = div.firstElementChild;
-  iframe.parentNode.appendChild(toolbarTrigger);
   let timer;
-  toolbarTrigger.onmouseenter = () => {
-    toolbarTrigger.setAttribute("data-animate", "");
+  toolbarTriggerNode.onmouseenter = () => {
+    toolbarTriggerNode.setAttribute("data-animate", "");
     timer = setTimeout(expandToolbarTrigger, 500);
   };
-  toolbarTrigger.onmouseleave = () => {
+  toolbarTriggerNode.onmouseleave = () => {
     clearTimeout(timer);
     collapseToolbarTrigger();
   };
-  toolbarTrigger.onfocus = () => {
-    toolbarTrigger.removeAttribute("data-animate");
+  toolbarTriggerNode.onfocus = () => {
+    toolbarTriggerNode.removeAttribute("data-animate");
     expandToolbarTrigger();
   };
-  toolbarTrigger.onblur = () => {
-    toolbarTrigger.removeAttribute("data-animate");
+  toolbarTriggerNode.onblur = () => {
+    toolbarTriggerNode.removeAttribute("data-animate");
     clearTimeout(timer);
     collapseToolbarTrigger();
   };
-  toolbarTrigger.onclick = () => {
+  toolbarTriggerNode.onclick = () => {
     sendCommandToToolbar(iframe, "openToolbar");
   };
   const showToolbarTrigger = () => {
-    toolbarTrigger.style.display = "block";
+    toolbarTriggerNode.style.display = "block";
   };
   const hideToolbarTrigger = () => {
-    toolbarTrigger.style.display = "none";
+    toolbarTriggerNode.style.display = "none";
   };
   const expandToolbarTrigger = () => {
-    toolbarTrigger.setAttribute("data-expanded", "");
+    toolbarTriggerNode.setAttribute("data-expanded", "");
   };
   const collapseToolbarTrigger = () => {
-    toolbarTrigger.removeAttribute("data-expanded", "");
+    toolbarTriggerNode.removeAttribute("data-expanded", "");
+  };
+  const placeholder = getToolbarPlaceholder();
+  placeholder.parentNode.replaceChild(jsenvToolbar, placeholder);
+  const listenToolbarStateChange = callback => {
+    return addToolbarEventCallback(iframe, "toolbar_state_change", callback);
   };
   listenToolbarStateChange(({
     opened
@@ -125,10 +93,52 @@ const injectToolbar = async ({
       showToolbarTrigger();
     }
   });
+  const cleanupInitOnReady = addToolbarEventCallback(iframe, "toolbar_ready", () => {
+    cleanupInitOnReady();
+    sendCommandToToolbar(iframe, "initToolbar");
+    setTimeout(() => {
+      listenToolbarStateChange(({
+        animationsEnabled
+      }) => {
+        if (animationsEnabled) {
+          iframe.style.transitionDuration = "300ms";
+        } else {
+          iframe.style.transitionDuration = "0s";
+        }
+      });
+    });
+  });
   await iframeLoadedPromise;
   iframe.removeAttribute("tabindex");
   return iframe;
 };
+const createIframeNode = () => {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("tabindex", -1);
+  iframe.setAttribute("allowtransparency", true);
+  // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
+  // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
+  Object.assign(iframe.style, {
+    "position": "fixed",
+    "zIndex": 1000,
+    "bottom": 0,
+    "left": 0,
+    "width": "100%",
+    "height": 0,
+    /* ensure toolbar children are not focusable when hidden */
+    "visibility": "hidden",
+    "transition-duration": "0",
+    "transition-property": "height, visibility",
+    "border": "none"
+  });
+  return iframe;
+};
+const createToolbarTriggerNode = () => {
+  const div = document.createElement("div");
+  div.innerHTML = "\n<div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n  <svg id=\"jsenv_toolbar_trigger_icon\">\n    <use xlink:href=\"".concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n  </svg>\n  <style>\n    #jsenv_toolbar_trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }\n  </style>\n</div>");
+  const toolbarTrigger = div.firstElementChild;
+  return toolbarTrigger;
+};
 const addToolbarEventCallback = (iframe, eventName, callback) => {
   const messageEventCallback = messageEvent => {
     const {
@@ -177,9 +187,9 @@ const queryPlaceholder = () => {
   return document.querySelector("[data-jsenv-toolbar-placeholder]");
 };
 const createTooolbarPlaceholder = () => {
-  const placeholder = document.createElement("span");
-  document.body.appendChild(placeholder);
-  return placeholder;
+  const jsenvToolbar = document.createElement("jsenv-toolbar");
+  document.body.appendChild(jsenvToolbar);
+  return jsenvToolbar;
 };
 const iframeToLoadedPromise = iframe => {
   return new Promise(resolve => {

package/dist/jsenv_plugin_toolbar.js

@@ -1,4 +1,4 @@
-import { parseHtml, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst } from "@jsenv/ast";
+import { parseHtml, injectJsenvScript, stringifyHtmlAst } from "@jsenv/ast";
 
 const jsenvPluginToolbar = ({
   logLevel = "warn",
@@ -35,20 +35,23 @@ const jsenvPluginToolbar = ({
           expectedType: "html",
           specifier: toolbarHtmlClientFileUrl
         });
-        injectHtmlNodeAsEarlyAsPossible(htmlAst, createHtmlNode({
-          tagName: "script",
+        injectJsenvScript(htmlAst, {
           type: "module",
-          textContent: generateCodeToInjectToolbar({
-            toolbarInjectorReference,
-            toolbarClientFileReference,
-            logLevel,
-            theme,
-            opened,
-            autoreload,
-            animationsEnabled,
-            notificationsEnabled
-          })
-        }), "jsenv:toolbar");
+          src: toolbarInjectorReference.generatedSpecifier,
+          initCall: {
+            callee: "injectToolbar",
+            params: {
+              toolbarUrl: toolbarClientFileReference.generatedSpecifier,
+              logLevel,
+              theme,
+              opened,
+              autoreload,
+              animationsEnabled,
+              notificationsEnabled
+            }
+          },
+          pluginName: "jsenv:toolbar"
+        });
         const htmlModified = stringifyHtmlAst(htmlAst);
         return {
           content: htmlModified
@@ -57,27 +60,5 @@ const jsenvPluginToolbar = ({
     }
   };
 };
-const generateCodeToInjectToolbar = ({
-  toolbarInjectorReference,
-  toolbarClientFileReference,
-  logLevel,
-  theme,
-  opened,
-  autoreload,
-  animationsEnabled,
-  notificationsEnabled
-}) => {
-  const from = toolbarInjectorReference.generatedSpecifier;
-  const paramsSource = JSON.stringify({
-    toolbarUrl: toolbarClientFileReference.generatedSpecifier,
-    logLevel,
-    theme,
-    opened,
-    autoreload,
-    animationsEnabled,
-    notificationsEnabled
-  }, null, "  ");
-  return "import { injectToolbar } from ".concat(from, "\n\ninjectToolbar(").concat(paramsSource, ");");
-};
 
 export { jsenvPluginToolbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,8 +26,8 @@
     "/src/"
   ],
   "dependencies": {
-    "@jsenv/ast": "6.1.3",
-    "@preact/signals": "1.2.3"
+    "@jsenv/ast": "6.2.1",
+    "@preact/signals": "1.3.0"
   },
   "scripts": {
     "eslint": "npx eslint . --ext=.js,.mjs,.cjs,.html",

package/src/client/toolbar_injector.js

@@ -21,26 +21,11 @@ export const injectToolbar = async ({
       window.requestAnimationFrame(resolve);
     }
   });
-  const placeholder = getToolbarPlaceholder();
-
-  const iframe = document.createElement("iframe");
-  iframe.setAttribute("tabindex", -1);
-  iframe.setAttribute("allowtransparency", true);
-  // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
-  // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
-  Object.assign(iframe.style, {
-    "position": "fixed",
-    "zIndex": 1000,
-    "bottom": 0,
-    "left": 0,
-    "width": "100%",
-    "height": 0,
-    /* ensure toolbar children are not focusable when hidden */
-    "visibility": "hidden",
-    "transition-duration": "0",
-    "transition-property": "height, visibility",
-    "border": "none",
-  });
+  const jsenvToolbar = document.createElement("jsenv-toolbar");
+  const iframe = createIframeNode();
+  const toolbarTriggerNode = createToolbarTriggerNode();
+  jsenvToolbar.appendChild(iframe);
+  jsenvToolbar.appendChild(toolbarTriggerNode);
   const iframeLoadedPromise = iframeToLoadedPromise(iframe);
   const toolbarUrlObject = new URL(toolbarUrl, window.location.href);
   toolbarUrlObject.searchParams.set("logLevel", logLevel);
@@ -60,12 +45,60 @@ export const injectToolbar = async ({
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
   iframe.setAttribute("src", toolbarUrlObject.href);
   iframe.name = "jsenv toolbar";
-  placeholder.parentNode.replaceChild(iframe, placeholder);
+
+  let timer;
+  toolbarTriggerNode.onmouseenter = () => {
+    toolbarTriggerNode.setAttribute("data-animate", "");
+    timer = setTimeout(expandToolbarTrigger, 500);
+  };
+  toolbarTriggerNode.onmouseleave = () => {
+    clearTimeout(timer);
+    collapseToolbarTrigger();
+  };
+  toolbarTriggerNode.onfocus = () => {
+    toolbarTriggerNode.removeAttribute("data-animate");
+    expandToolbarTrigger();
+  };
+  toolbarTriggerNode.onblur = () => {
+    toolbarTriggerNode.removeAttribute("data-animate");
+    clearTimeout(timer);
+    collapseToolbarTrigger();
+  };
+  toolbarTriggerNode.onclick = () => {
+    sendCommandToToolbar(iframe, "openToolbar");
+  };
+
+  const showToolbarTrigger = () => {
+    toolbarTriggerNode.style.display = "block";
+  };
+
+  const hideToolbarTrigger = () => {
+    toolbarTriggerNode.style.display = "none";
+  };
+
+  const expandToolbarTrigger = () => {
+    toolbarTriggerNode.setAttribute("data-expanded", "");
+  };
+
+  const collapseToolbarTrigger = () => {
+    toolbarTriggerNode.removeAttribute("data-expanded", "");
+  };
+
+  const placeholder = getToolbarPlaceholder();
+  placeholder.parentNode.replaceChild(jsenvToolbar, placeholder);
 
   const listenToolbarStateChange = (callback) => {
     return addToolbarEventCallback(iframe, "toolbar_state_change", callback);
   };
 
+  listenToolbarStateChange(({ opened }) => {
+    if (opened) {
+      hideToolbarTrigger();
+    } else {
+      showToolbarTrigger();
+    }
+  });
+
   const cleanupInitOnReady = addToolbarEventCallback(
     iframe,
     "toolbar_ready",
@@ -84,6 +117,35 @@ export const injectToolbar = async ({
     },
   );
 
+  await iframeLoadedPromise;
+  iframe.removeAttribute("tabindex");
+
+  return iframe;
+};
+
+const createIframeNode = () => {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("tabindex", -1);
+  iframe.setAttribute("allowtransparency", true);
+  // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
+  // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
+  Object.assign(iframe.style, {
+    "position": "fixed",
+    "zIndex": 1000,
+    "bottom": 0,
+    "left": 0,
+    "width": "100%",
+    "height": 0,
+    /* ensure toolbar children are not focusable when hidden */
+    "visibility": "hidden",
+    "transition-duration": "0",
+    "transition-property": "height, visibility",
+    "border": "none",
+  });
+  return iframe;
+};
+
+const createToolbarTriggerNode = () => {
   const div = document.createElement("div");
   div.innerHTML = `
 <div id="jsenv_toolbar_trigger" style="display:none">
@@ -132,58 +194,7 @@ export const injectToolbar = async ({
   </style>
 </div>`;
   const toolbarTrigger = div.firstElementChild;
-  iframe.parentNode.appendChild(toolbarTrigger);
-
-  let timer;
-  toolbarTrigger.onmouseenter = () => {
-    toolbarTrigger.setAttribute("data-animate", "");
-    timer = setTimeout(expandToolbarTrigger, 500);
-  };
-  toolbarTrigger.onmouseleave = () => {
-    clearTimeout(timer);
-    collapseToolbarTrigger();
-  };
-  toolbarTrigger.onfocus = () => {
-    toolbarTrigger.removeAttribute("data-animate");
-    expandToolbarTrigger();
-  };
-  toolbarTrigger.onblur = () => {
-    toolbarTrigger.removeAttribute("data-animate");
-    clearTimeout(timer);
-    collapseToolbarTrigger();
-  };
-  toolbarTrigger.onclick = () => {
-    sendCommandToToolbar(iframe, "openToolbar");
-  };
-
-  const showToolbarTrigger = () => {
-    toolbarTrigger.style.display = "block";
-  };
-
-  const hideToolbarTrigger = () => {
-    toolbarTrigger.style.display = "none";
-  };
-
-  const expandToolbarTrigger = () => {
-    toolbarTrigger.setAttribute("data-expanded", "");
-  };
-
-  const collapseToolbarTrigger = () => {
-    toolbarTrigger.removeAttribute("data-expanded", "");
-  };
-
-  listenToolbarStateChange(({ opened }) => {
-    if (opened) {
-      hideToolbarTrigger();
-    } else {
-      showToolbarTrigger();
-    }
-  });
-
-  await iframeLoadedPromise;
-  iframe.removeAttribute("tabindex");
-
-  return iframe;
+  return toolbarTrigger;
 };
 
 const addToolbarEventCallback = (iframe, eventName, callback) => {
@@ -239,9 +250,9 @@ const queryPlaceholder = () => {
 };
 
 const createTooolbarPlaceholder = () => {
-  const placeholder = document.createElement("span");
-  document.body.appendChild(placeholder);
-  return placeholder;
+  const jsenvToolbar = document.createElement("jsenv-toolbar");
+  document.body.appendChild(jsenvToolbar);
+  return jsenvToolbar;
 };
 
 const iframeToLoadedPromise = (iframe) => {

package/src/jsenv_plugin_toolbar.js

@@ -1,9 +1,4 @@
-import {
-  parseHtml,
-  stringifyHtmlAst,
-  injectHtmlNodeAsEarlyAsPossible,
-  createHtmlNode,
-} from "@jsenv/ast";
+import { parseHtml, stringifyHtmlAst, injectJsenvScript } from "@jsenv/ast";
 
 export const jsenvPluginToolbar = ({
   logLevel = "warn",
@@ -44,24 +39,23 @@ export const jsenvPluginToolbar = ({
           expectedType: "html",
           specifier: toolbarHtmlClientFileUrl,
         });
-        injectHtmlNodeAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            tagName: "script",
-            type: "module",
-            textContent: generateCodeToInjectToolbar({
-              toolbarInjectorReference,
-              toolbarClientFileReference,
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: toolbarInjectorReference.generatedSpecifier,
+          initCall: {
+            callee: "injectToolbar",
+            params: {
+              toolbarUrl: toolbarClientFileReference.generatedSpecifier,
               logLevel,
               theme,
               opened,
               autoreload,
               animationsEnabled,
               notificationsEnabled,
-            }),
-          }),
-          "jsenv:toolbar",
-        );
+            },
+          },
+          pluginName: "jsenv:toolbar",
+        });
         const htmlModified = stringifyHtmlAst(htmlAst);
         return {
           content: htmlModified,
@@ -70,33 +64,3 @@ export const jsenvPluginToolbar = ({
     },
   };
 };
-
-const generateCodeToInjectToolbar = ({
-  toolbarInjectorReference,
-  toolbarClientFileReference,
-  logLevel,
-  theme,
-  opened,
-  autoreload,
-  animationsEnabled,
-  notificationsEnabled,
-}) => {
-  const from = toolbarInjectorReference.generatedSpecifier;
-  const paramsSource = JSON.stringify(
-    {
-      toolbarUrl: toolbarClientFileReference.generatedSpecifier,
-      logLevel,
-      theme,
-      opened,
-      autoreload,
-      animationsEnabled,
-      notificationsEnabled,
-    },
-    null,
-    "  ",
-  );
-
-  return `import { injectToolbar } from ${from}
-
-injectToolbar(${paramsSource});`;
-};