@jsenv/plugin-toolbar 0.1.14 → 1.0.1

package/src/client/ui/util/responsive.js

@@ -1,104 +1,104 @@
 export const createHorizontalBreakpoint = (breakpointValue) => {
-  return createBreakpoint(windowWidthMeasure, breakpointValue)
-}
+  return createBreakpoint(windowWidthMeasure, breakpointValue);
+};
 
 const createMeasure = ({ compute, register }) => {
-  let currentValue = compute()
+  let currentValue = compute();
 
-  const get = () => compute()
+  const get = () => compute();
 
-  const changed = createSignal()
+  const changed = createSignal();
 
-  let unregister = () => {}
+  let unregister = () => {};
   if (register) {
     unregister = register(() => {
-      const value = compute()
+      const value = compute();
       if (value !== currentValue) {
-        const previousValue = value
-        currentValue = value
-        changed.notify(value, previousValue)
+        const previousValue = value;
+        currentValue = value;
+        changed.notify(value, previousValue);
       }
-    })
+    });
   }
 
-  return { get, changed, unregister }
-}
+  return { get, changed, unregister };
+};
 
 const createSignal = () => {
-  const callbackArray = []
+  const callbackArray = [];
 
   const listen = (callback) => {
-    callbackArray.push(callback)
+    callbackArray.push(callback);
     return () => {
-      const index = callbackArray.indexOf(callback)
+      const index = callbackArray.indexOf(callback);
       if (index > -1) {
-        callbackArray.splice(index, 1)
+        callbackArray.splice(index, 1);
       }
-    }
-  }
+    };
+  };
 
   const notify = (...args) => {
     callbackArray.slice().forEach((callback) => {
-      callback(...args)
-    })
-  }
+      callback(...args);
+    });
+  };
 
-  return { listen, notify }
-}
+  return { listen, notify };
+};
 
 const windowWidthMeasure = createMeasure({
   name: "window-width",
   compute: () => window.innerWidth,
   register: (onchange) => {
-    window.addEventListener("resize", onchange)
-    window.addEventListener("orientationchange", onchange)
+    window.addEventListener("resize", onchange);
+    window.addEventListener("orientationchange", onchange);
     return () => {
-      window.removeEventListener("resize", onchange)
-      window.removeEventListener("orientationchange", onchange)
-    }
+      window.removeEventListener("resize", onchange);
+      window.removeEventListener("orientationchange", onchange);
+    };
   },
-})
+});
 
 const createBreakpoint = (measure, breakpointValue) => {
   const getBreakpointState = () => {
-    const value = measure.get()
+    const value = measure.get();
 
     if (value < breakpointValue) {
-      return "below"
+      return "below";
     }
     if (value > breakpointValue) {
-      return "above"
+      return "above";
     }
-    return "equals"
-  }
+    return "equals";
+  };
 
-  let currentBreakpointState = getBreakpointState()
+  let currentBreakpointState = getBreakpointState();
 
   const isAbove = () => {
-    return measure.get() > breakpointValue
-  }
+    return measure.get() > breakpointValue;
+  };
 
   const isBelow = () => {
-    return measure.get() < breakpointValue
-  }
+    return measure.get() < breakpointValue;
+  };
 
-  const breakpointChanged = createSignal()
+  const breakpointChanged = createSignal();
 
   measure.changed.listen(() => {
-    const breakpointState = getBreakpointState()
+    const breakpointState = getBreakpointState();
     if (breakpointState !== currentBreakpointState) {
-      const breakpointStatePrevious = currentBreakpointState
-      currentBreakpointState = breakpointState
-      breakpointChanged.notify(breakpointState, breakpointStatePrevious)
+      const breakpointStatePrevious = currentBreakpointState;
+      currentBreakpointState = breakpointState;
+      breakpointChanged.notify(breakpointState, breakpointStatePrevious);
     }
-  })
+  });
 
   return {
     isAbove,
     isBelow,
     changed: breakpointChanged,
-  }
-}
+  };
+};
 
 // const windowScrollTop = createMeasure({
 //   name: "window-scroll-top",

package/src/client/ui/util/util.js

@@ -1,19 +1,19 @@
 export const createPromiseAndHooks = () => {
-  let resolve
-  let reject
+  let resolve;
+  let reject;
   const promise = new Promise((res, rej) => {
-    resolve = res
-    reject = rej
-  })
-  promise.resolve = resolve
-  promise.reject = reject
-  return promise
-}
+    resolve = res;
+    reject = rej;
+  });
+  promise.resolve = resolve;
+  promise.reject = reject;
+  return promise;
+};
 
 export const moveElement = (element, from, to) => {
-  to.appendChild(element)
-}
+  to.appendChild(element);
+};
 
 export const replaceElement = (elementToReplace, otherElement) => {
-  elementToReplace.parentNode.replaceChild(otherElement, elementToReplace)
-}
+  elementToReplace.parentNode.replaceChild(otherElement, elementToReplace);
+};

package/src/client/ui/variant.js

@@ -1,74 +1,74 @@
 export const enableVariant = (rootNode, variables) => {
   const nodesNotMatching = Array.from(
     rootNode.querySelectorAll(`[${attributeIndicatingACondition}]`),
-  )
+  );
   nodesNotMatching.forEach((nodeNotMatching) => {
     const conditionAttributeValue = nodeNotMatching.getAttribute(
       attributeIndicatingACondition,
-    )
-    const matches = testCondition(conditionAttributeValue, variables)
+    );
+    const matches = testCondition(conditionAttributeValue, variables);
     if (matches) {
       renameAttribute(
         nodeNotMatching,
         attributeIndicatingACondition,
         attributeIndicatingAMatch,
-      )
+      );
     }
-  })
+  });
 
   const nodesMatching = Array.from(
     rootNode.querySelectorAll(`[${attributeIndicatingAMatch}]`),
-  )
+  );
   nodesMatching.forEach((nodeMatching) => {
     const conditionAttributeValue = nodeMatching.getAttribute(
       attributeIndicatingAMatch,
-    )
-    const matches = testCondition(conditionAttributeValue, variables)
+    );
+    const matches = testCondition(conditionAttributeValue, variables);
     if (!matches) {
       renameAttribute(
         nodeMatching,
         attributeIndicatingAMatch,
         attributeIndicatingACondition,
-      )
+      );
     }
-  })
-}
+  });
+};
 
 const testCondition = (conditionAttributeValue, variables) => {
-  const condition = parseCondition(conditionAttributeValue)
+  const condition = parseCondition(conditionAttributeValue);
   return Object.keys(variables).some((key) => {
     if (condition.key !== key) {
-      return false
+      return false;
     }
     // the condition do not specify a value, any value is ok
     if (condition.value === undefined) {
-      return true
+      return true;
     }
     if (condition.value === variables[key]) {
-      return true
+      return true;
     }
-    return false
-  })
-}
+    return false;
+  });
+};
 
 const parseCondition = (conditionAttributeValue) => {
-  const colonIndex = conditionAttributeValue.indexOf(":")
+  const colonIndex = conditionAttributeValue.indexOf(":");
   if (colonIndex === -1) {
     return {
       key: conditionAttributeValue,
       value: undefined,
-    }
+    };
   }
   return {
     key: conditionAttributeValue.slice(0, colonIndex),
     value: conditionAttributeValue.slice(colonIndex + 1),
-  }
-}
+  };
+};
 
-const attributeIndicatingACondition = `data-when`
-const attributeIndicatingAMatch = `data-when-active`
+const attributeIndicatingACondition = `data-when`;
+const attributeIndicatingAMatch = `data-when-active`;
 
 const renameAttribute = (node, name, newName) => {
-  node.setAttribute(newName, node.getAttribute(name))
-  node.removeAttribute(name)
-}
+  node.setAttribute(newName, node.getAttribute(name));
+  node.removeAttribute(name);
+};

package/src/jsenv_plugin_toolbar.js

@@ -3,7 +3,7 @@ import {
   stringifyHtmlAst,
   injectHtmlNodeAsEarlyAsPossible,
   createHtmlNode,
-} from "@jsenv/ast"
+} from "@jsenv/ast";
 
 export const jsenvPluginToolbar = ({
   logLevel = "warn",
@@ -16,11 +16,11 @@ export const jsenvPluginToolbar = ({
   const toolbarInjectorClientFileUrl = new URL(
     "./client/toolbar_injector.js",
     import.meta.url,
-  ).href
+  ).href;
   const toolbarHtmlClientFileUrl = new URL(
     "./client/toolbar.html",
     import.meta.url,
-  ).href
+  ).href;
 
   return {
     name: "jsenv:toolbar",
@@ -28,20 +28,20 @@ export const jsenvPluginToolbar = ({
     transformUrlContent: {
       html: (urlInfo, context) => {
         if (urlInfo.url.startsWith(toolbarHtmlClientFileUrl)) {
-          urlInfo.data.isJsenvToolbar = true
-          return null
+          urlInfo.data.isJsenvToolbar = true;
+          return null;
         }
-        const htmlAst = parseHtmlString(urlInfo.content)
+        const htmlAst = parseHtmlString(urlInfo.content);
         const [toolbarInjectorReference] = context.referenceUtils.inject({
           type: "js_import",
           expectedType: "js_module",
           specifier: toolbarInjectorClientFileUrl,
-        })
+        });
         const [toolbarClientFileReference] = context.referenceUtils.inject({
           type: "iframe_src",
           expectedType: "html",
           specifier: toolbarHtmlClientFileUrl,
-        })
+        });
         injectHtmlNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
@@ -59,15 +59,15 @@ export const jsenvPluginToolbar = ({
             }),
           }),
           "jsenv:toolbar",
-        )
-        const htmlModified = stringifyHtmlAst(htmlAst)
+        );
+        const htmlModified = stringifyHtmlAst(htmlAst);
         return {
           content: htmlModified,
-        }
+        };
       },
     },
-  }
-}
+  };
+};
 
 const generateCodeToInjectToolbar = ({
   toolbarInjectorReference,
@@ -79,7 +79,7 @@ const generateCodeToInjectToolbar = ({
   animationsEnabled,
   notificationsEnabled,
 }) => {
-  const from = toolbarInjectorReference.generatedSpecifier
+  const from = toolbarInjectorReference.generatedSpecifier;
   const paramsSource = JSON.stringify(
     {
       toolbarUrl: toolbarClientFileReference.generatedSpecifier,
@@ -92,9 +92,9 @@ const generateCodeToInjectToolbar = ({
     },
     null,
     "  ",
-  )
+  );
 
   return `import { injectToolbar } from ${from}
 
-injectToolbar(${paramsSource});`
-}
+injectToolbar(${paramsSource});`;
+};