1.1.0

Author: daniandl

dist/element-queries.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _utils = require("./utils");
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -17,6 +15,8 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -54,7 +54,7 @@ var ElementQueries = /*#__PURE__*/function () {
 
     if (!('ResizeObserver' in window)) {
       // not throwing to avoid breaking client's apps
-      console.error(_utils.Errors.NOT_SUPPORTED);
+      console.error((0, _utils.prefixLog)(_utils.Errors.NOT_SUPPORTED));
       return;
     }
 
@@ -81,7 +81,7 @@ var ElementQueries = /*#__PURE__*/function () {
 
       if (this.opts.observeDom) {
         if (!('MutationObserver' in window)) {
-          console.error(_utils.Errors.NOT_SUPPORTED_OBSERVE);
+          console.error((0, _utils.prefixLog)(_utils.Errors.NOT_SUPPORTED_OBSERVE));
         } else {
           this.domObserver = new MutationObserver(this.onDomMutation.bind(this));
           this.domObserver.observe(document.body, {
@@ -147,8 +147,8 @@ var ElementQueries = /*#__PURE__*/function () {
             if ((0, _utils.isValidElement)(element) && hasBreakpoints) {
               try {
                 this.watch(element);
-              } catch (e) {
-                console.error(e, element);
+              } catch (error) {
+                console.error((0, _utils.prefixLog)(error), element);
               }
             }
           }
@@ -170,7 +170,6 @@ var ElementQueries = /*#__PURE__*/function () {
       var elements = document.querySelectorAll(attrs.map(function (i) {
         return "[".concat(i, "]");
       }).join(','));
-      console.log(elements);
 
       var _iterator = _createForOfIteratorHelper(elements),
           _step;
@@ -182,7 +181,7 @@ var ElementQueries = /*#__PURE__*/function () {
           try {
             this.watch(element);
           } catch (error) {
-            console.error(error, element);
+            console.error((0, _utils.prefixLog)(error), element);
           }
         }
       } catch (err) {
@@ -194,45 +193,29 @@ var ElementQueries = /*#__PURE__*/function () {
     /**
      * Watch an element manually
      * @param {HTMLElement, SVGElement} element The DOM element you would like to watch
+     * @param {Object} [bps] breakpoints to use instead of looking in html attributes
      */
 
   }, {
     key: "watch",
     value: function watch(element) {
-      var _this$opts3 = this.opts,
-          htmlAttrBreakpoints = _this$opts3.htmlAttrBreakpoints,
-          htmlAttrHeightBreakpoints = _this$opts3.htmlAttrHeightBreakpoints;
+      var bps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
       if (!element || !(0, _utils.isValidElement)(element)) {
         throw new Error(_utils.Errors.INVALID_ELEMENT);
       }
 
-      var breakpointAttrs = {
-        width: element.getAttribute(htmlAttrBreakpoints),
-        height: element.getAttribute(htmlAttrHeightBreakpoints)
-      };
+      if (bps) {
+        if (this.opts.observeDom) {
+          console.warn((0, _utils.prefixLog)(_utils.Errors.DOM_OBSERVE_CONFLICT));
+        }
 
-      if (!Object.values(breakpointAttrs).filter(Boolean).length) {
-        throw new Error(_utils.Errors.BREAKPOINTS_MISSING);
+        if (_typeof(bps) !== 'object' || !bps.width && !bps.height) {
+          throw new Error(_utils.Errors.BREAKPOINTS_INVALID);
+        }
       }
 
-      var breakpoints = Object.entries(breakpointAttrs).reduce(function (acc, _ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            k = _ref2[0],
-            v = _ref2[1];
-
-        if (!v) return acc;
-
-        var matches = _toConsumableArray((0, _utils.removeWhitespace)(v).matchAll(_utils.BREAKPOINT_REGEX));
-
-        if (!matches) return acc;
-        acc[k] = matches.reduce(function (accumulator, match) {
-          if (!match[1] || !match[2]) return accumulator;
-          accumulator[match[1]] = +match[2];
-          return accumulator;
-        }, {});
-        return acc;
-      }, {});
+      var breakpoints = bps || this.getBreakpointsFromAttrs(element);
 
       if (!Object.values(breakpoints).filter(Boolean).length) {
         throw new Error(_utils.Errors.BREAKPOINTS_MISSING);
@@ -281,10 +264,10 @@ var ElementQueries = /*#__PURE__*/function () {
         if (!entry || !ElementQueries.hasBreakpoints(entry)) return {
           v: void 0
         };
-        var activeBreakpoints = Object.entries(entry.breakpoints).reduce(function (acc, _ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-              k = _ref4[0],
-              bps = _ref4[1];
+        var activeBreakpoints = Object.entries(entry.breakpoints).reduce(function (acc, _ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              k = _ref2[0],
+              bps = _ref2[1];
 
           acc[k] = ElementQueries.getActiveBreakpoint(entry[k], bps);
           return acc;
@@ -322,6 +305,39 @@ var ElementQueries = /*#__PURE__*/function () {
       this.elements = new WeakMap();
     } // internal
 
+  }, {
+    key: "getBreakpointsFromAttrs",
+    value: function getBreakpointsFromAttrs(element) {
+      var _this$opts3 = this.opts,
+          htmlAttrBreakpoints = _this$opts3.htmlAttrBreakpoints,
+          htmlAttrHeightBreakpoints = _this$opts3.htmlAttrHeightBreakpoints;
+      var breakpointAttrs = {
+        width: element.getAttribute(htmlAttrBreakpoints),
+        height: element.getAttribute(htmlAttrHeightBreakpoints)
+      };
+
+      if (!Object.values(breakpointAttrs).filter(Boolean).length) {
+        throw new Error(_utils.Errors.BREAKPOINTS_MISSING);
+      }
+
+      return Object.entries(breakpointAttrs).reduce(function (acc, _ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            k = _ref4[0],
+            v = _ref4[1];
+
+        if (!v) return acc;
+
+        var matches = _toConsumableArray((0, _utils.removeWhitespace)(v).matchAll(_utils.BREAKPOINT_REGEX));
+
+        if (!matches) return acc;
+        acc[k] = matches.reduce(function (accumulator, match) {
+          if (!match[1] || !match[2]) return accumulator;
+          accumulator[match[1]] = +match[2];
+          return accumulator;
+        }, {});
+        return acc;
+      }, {});
+    }
   }], [{
     key: "hasBreakpoints",
     value: function hasBreakpoints(entry) {