@nrk/core-progress - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

core-progress.jsx

 import CoreProgress from './core-progress.js'
-import { elementToReact } from '../utils.js'
+import { version } from './package.json'
+import customElementToReact from '@nrk/custom-element-to-react'
 
-export default elementToReact(CoreProgress, 'change')
+export default customElementToReact(CoreProgress, {
+  customEvents: ['change'],
+  suffix: version
+})

core-progress.jsx.js

@@ -235,96 +235,3 @@ (function (global, factory) {
   }
-  function elementToReact(elementClass) {
-    for (var _len = arguments.length, attr = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      attr[_key - 1] = arguments[_key];
-    }
 
-    var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
-
-    var tag = "".concat(name.replace(/\W+/, '-'), "-").concat(getUUID()).toLowerCase();
-    if (IS_BROWSER && !window.customElements.get(tag)) window.customElements.define(tag, elementClass);
-    return (
-      /*#__PURE__*/
-      function (_React$Component) {
-        _inherits(_class2, _React$Component);
-
-        function _class2(props) {
-          var _this;
-
-          _classCallCheck(this, _class2);
-
-          _this = _possibleConstructorReturn(this, _getPrototypeOf(_class2).call(this, props));
-
-          _this.ref = function (el) {
-            return _this.el = el;
-          };
-
-          attr.forEach(function (k) {
-            var on = "on".concat(k.replace(/(^|\.)./g, function (m) {
-              return m.slice(-1).toUpperCase();
-            })); // input.filter => onInputFilter
-
-            _this[k] = function (event) {
-              return _this.props[on] && closest(event.target, _this.el.nodeName) === _this.el && _this.props[on](event);
-            };
-          });
-          return _this;
-        }
-
-        _createClass(_class2, [{
-          key: "componentDidMount",
-          value: function componentDidMount() {
-            var _this2 = this;
-
-            attr.forEach(function (k) {
-              return _this2.props[k] ? _this2.el[k] = _this2.props[k] : _this2.el.addEventListener(k, _this2[k]);
-            });
-          }
-        }, {
-          key: "componentDidUpdate",
-          value: function componentDidUpdate(prev) {
-            var _this3 = this;
-
-            attr.forEach(function (k) {
-              return prev[k] !== _this3.props[k] && (_this3.el[k] = _this3.props[k]);
-            });
-          }
-        }, {
-          key: "componentWillUnmount",
-          value: function componentWillUnmount() {
-            var _this4 = this;
-
-            attr.forEach(function (k) {
-              return _this4.el.removeEventListener(k, _this4[k]);
-            });
-          }
-        }, {
-          key: "render",
-          value: function render() {
-            var _this5 = this;
-
-            // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
-            return React.createElement(tag, Object.keys(this.props).reduce(function (props, k) {
-              if (k === 'className') props["class"] = _this5.props[k]; // Fixes className for custom elements
-              else if (_this5.props[k] === true) props[k] = ''; // Fixes boolean attributes
-                else if (_this5.props[k] !== false) props[k] = _this5.props[k];
-              return props;
-            }, {
-              ref: this.ref
-            }));
-          }
-        }]);
-
-        return _class2;
-      }(React.Component)
-    );
-  }
-  /**
-  * getUUID
-  * @return {String} A generated unique ID
-  */
-
-  function getUUID() {
-    return Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
-  }
-
   var CoreProgress =
@@ -408,4 +315,140 @@ /*#__PURE__*/
 
-  var coreProgress = elementToReact(CoreProgress, 'change');
+  var version = "2.0.5";
 
+  /**
+  * closest
+  * @param {Element} element Element to traverse up from
+  * @param {String} selector A selector to search for matching parents or element itself
+  * @return {Element|null}  Element which is the closest ancestor matching selector
+  */
+
+  var closest$1 = function () {
+    var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
+    var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
+    return proto.closest ? function (el, css) {
+      return el.closest(css);
+    } : function (el, css) {
+      for (; el; el = el.parentElement) {
+        if (match.call(el, css)) {
+          return el;
+        }
+      }
+
+      return null;
+    };
+  }();
+  /**
+  * customElementToReact
+  * @param {Class|Function} elem A custom element definition.
+  * @param {Array} attr Props and events
+  * @return {Object} A React component
+  */
+
+
+  function customElementToReact(elementClass, options) {
+    if (options === void 0) options = {};
+    var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
+
+    var dashCase = name.replace(/.[A-Z]/g, function (ref) {
+      var a = ref[0];
+      var b = ref[1];
+      return a + "-" + b;
+    }); // NameName -> name-name
+
+    var customProps = options.props || [];
+    var customEvents = options.customEvents || [];
+    var skipProps = customProps.slice(); // Keep a copy
+
+    var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
+    return (
+      /*@__PURE__*/
+      function (superclass) {
+        function anonymous(props) {
+          var this$1 = this;
+          superclass.call(this, props);
+
+          this.ref = function (el) {
+            return this$1.el = el;
+          };
+
+          customEvents.forEach(function (eventName) {
+            var on = "on" + eventName.replace(/(^|\.)./g, function (m) {
+              return m.slice(-1).toUpperCase();
+            }); // input.filter => onInputFilter
+
+            this$1[eventName] = function (event) {
+              return this$1.props[on] && closest$1(event.target, this$1.el.nodeName) === this$1.el && this$1.props[on](event);
+            };
+
+            skipProps.push(on); // Skip props that are customEvents
+          });
+        }
+
+        if (superclass) anonymous.__proto__ = superclass;
+        anonymous.prototype = Object.create(superclass && superclass.prototype);
+        anonymous.prototype.constructor = anonymous;
+
+        anonymous.prototype.componentDidMount = function componentDidMount() {
+          var this$1 = this; // Do not run connectedCallback before after React componentDidMount, to allow React hydration to run first
+
+          if (!window.customElements.get(tagName)) {
+            window.customElements.define(tagName, elementClass);
+          }
+
+          customProps.forEach(function (key) {
+            return this$1.props.hasOwnProperty(key) && (this$1.el[key] = this$1.props[key]);
+          });
+          customEvents.forEach(function (key) {
+            return this$1.el.addEventListener(key, this$1[key]);
+          });
+        };
+
+        anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
+          var this$1 = this;
+          customProps.forEach(function (key) {
+            return prev[key] !== this$1.props[key] && (this$1.el[key] = this$1.props[key]);
+          });
+        };
+
+        anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
+          var this$1 = this;
+          customEvents.forEach(function (eventName) {
+            return this$1.el.removeEventListener(eventName, this$1[eventName]);
+          });
+        };
+
+        anonymous.prototype.render = function render() {
+          var this$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
+
+          return React.createElement(tagName, Object.keys(this.props).reduce(function (thisProps, key) {
+            if (skipProps.indexOf(key) === -1) {
+              // Do not render customEvents and custom props as attributes
+              if (key === 'className') {
+                thisProps["class"] = this$1.props[key];
+              } // Fixes className for custom elements
+              else if (this$1.props[key] === true) {
+                  thisProps[key] = '';
+                } // Fixes boolean attributes
+                else if (this$1.props[key] !== false) {
+                    thisProps[key] = this$1.props[key];
+                  } // Pass only truthy, non-function props
+
+            }
+
+            return thisProps;
+          }, {
+            ref: this.ref
+          }));
+        };
+
+        return anonymous;
+      }(React.Component)
+    );
+  }
+
+  var coreProgress = customElementToReact(CoreProgress, {
+    customEvents: ['change'],
+    suffix: version
+  });
+
   return coreProgress;
@@ -412,0 +455,0 @@

core-progress.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-progress v2.0.4 - Copyright (c) 2017-2019 NRK */
+/*! @nrk/core-progress v2.0.5 - Copyright (c) 2017-2019 NRK */
 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreProgress=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(t,e,n){return(i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var r=[null];r.push.apply(r,e);var i=new(Function.bind.apply(t,r));return n&&c(i,n.prototype),i}).apply(null,arguments)}function s(t){var r="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==r){if(r.has(t))return r.get(t);r.set(t,n)}function n(){return i(t,arguments,a(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t&&!window.Element.prototype.toggleAttribute&&(window.Element.prototype.toggleAttribute=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:!this.hasAttribute(t);return!e===this.hasAttribute(t)&&this[e?"setAttribute":"removeAttribute"](t,""),e}),t||global.HTMLElement||(global.HTMLElement=function(){return function t(){o(this,t)}}());var e,n;e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest;return function(t){function e(){return o(this,e),l(this,a(e).apply(this,arguments))}var n,r,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(e,s(HTMLElement)),n=e,i=[{key:"observedAttributes",get:function(){return["type","value","max"]}}],(r=[{key:"connectedCallback",value:function(){var t,e,n,r;this.setAttribute("role","img"),this.setAttribute("aria-label",this.getAttribute("aria-label")||"0%"),this.type=this.type,t=this.nodeName,e="".concat(this.nodeName,"{display:block;fill:none;stroke-width:15}"),n="style-".concat(t.toLowerCase()),r=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(r,"</style>"))}},{key:"attributeChangedCallback",value:function(t,e,n){var r=this.parentElement&&"type"===t&&e!==n,i=this.indeterminate?100:this.percentage;this.setAttribute("aria-label",this.indeterminate||"".concat(this.percentage,"%")),this.toggleAttribute("indeterminate",this.indeterminate),"linear"===this.type&&(this.style.width="".concat(i,"%")),"radial"===this.type&&(this.style.strokeDashoffset=Math.round((100-i)*Math.PI)),r&&(this.innerHTML="radial"!==n?"":'<svg style="display:block;overflow:hidden;border-radius:100%" width="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" stroke-dashoffset="0"/><circle cx="50" cy="50" r="50" stroke="currentColor" stroke-dasharray="314.159" transform="rotate(-90 50 50)"/></svg>'),"value"===t&&Number(n)!==Number(e)&&function(t,e){var n,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},i="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[i])return;t[i]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,r);var o=t.dispatchEvent(n);t[i]=null}(this,"change")}},{key:"indeterminate",get:function(){return isNaN(parseFloat(this.getAttribute("value")))&&this.getAttribute("value")}},{key:"percentage",get:function(){return Math.round(this.value/this.max*100)||0}},{key:"value",get:function(){return this.indeterminate||Number(this.getAttribute("value"))},set:function(t){this.setAttribute("value",t)}},{key:"max",get:function(){return Number(this.getAttribute("max"))||1},set:function(t){this.setAttribute("max",t)}},{key:"type",get:function(){return this.getAttribute("type")||"linear"},set:function(t){this.setAttribute("type",t)}}])&&u(n.prototype,r),i&&u(n,i),e}()}),window.customElements.define("core-progress",coreProgress);
 //# sourceMappingURL=core-progress.min.js.map

jsx.js

@@ -233,96 +233,3 @@ 'use strict';
 }
-function elementToReact(elementClass) {
-  for (var _len = arguments.length, attr = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    attr[_key - 1] = arguments[_key];
-  }
 
-  var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
-
-  var tag = "".concat(name.replace(/\W+/, '-'), "-").concat(getUUID()).toLowerCase();
-  if (IS_BROWSER && !window.customElements.get(tag)) window.customElements.define(tag, elementClass);
-  return (
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inherits(_class2, _React$Component);
-
-      function _class2(props) {
-        var _this;
-
-        _classCallCheck(this, _class2);
-
-        _this = _possibleConstructorReturn(this, _getPrototypeOf(_class2).call(this, props));
-
-        _this.ref = function (el) {
-          return _this.el = el;
-        };
-
-        attr.forEach(function (k) {
-          var on = "on".concat(k.replace(/(^|\.)./g, function (m) {
-            return m.slice(-1).toUpperCase();
-          })); // input.filter => onInputFilter
-
-          _this[k] = function (event) {
-            return _this.props[on] && closest(event.target, _this.el.nodeName) === _this.el && _this.props[on](event);
-          };
-        });
-        return _this;
-      }
-
-      _createClass(_class2, [{
-        key: "componentDidMount",
-        value: function componentDidMount() {
-          var _this2 = this;
-
-          attr.forEach(function (k) {
-            return _this2.props[k] ? _this2.el[k] = _this2.props[k] : _this2.el.addEventListener(k, _this2[k]);
-          });
-        }
-      }, {
-        key: "componentDidUpdate",
-        value: function componentDidUpdate(prev) {
-          var _this3 = this;
-
-          attr.forEach(function (k) {
-            return prev[k] !== _this3.props[k] && (_this3.el[k] = _this3.props[k]);
-          });
-        }
-      }, {
-        key: "componentWillUnmount",
-        value: function componentWillUnmount() {
-          var _this4 = this;
-
-          attr.forEach(function (k) {
-            return _this4.el.removeEventListener(k, _this4[k]);
-          });
-        }
-      }, {
-        key: "render",
-        value: function render() {
-          var _this5 = this;
-
-          // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
-          return React.createElement(tag, Object.keys(this.props).reduce(function (props, k) {
-            if (k === 'className') props["class"] = _this5.props[k]; // Fixes className for custom elements
-            else if (_this5.props[k] === true) props[k] = ''; // Fixes boolean attributes
-              else if (_this5.props[k] !== false) props[k] = _this5.props[k];
-            return props;
-          }, {
-            ref: this.ref
-          }));
-        }
-      }]);
-
-      return _class2;
-    }(React.Component)
-  );
-}
-/**
-* getUUID
-* @return {String} A generated unique ID
-*/
-
-function getUUID() {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
-}
-
 var CoreProgress =
@@ -406,4 +313,140 @@ /*#__PURE__*/
 
-var coreProgress = elementToReact(CoreProgress, 'change');
+var version = "2.0.5";
 
+/**
+* closest
+* @param {Element} element Element to traverse up from
+* @param {String} selector A selector to search for matching parents or element itself
+* @return {Element|null}  Element which is the closest ancestor matching selector
+*/
+
+var closest$1 = function () {
+  var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
+  var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
+  return proto.closest ? function (el, css) {
+    return el.closest(css);
+  } : function (el, css) {
+    for (; el; el = el.parentElement) {
+      if (match.call(el, css)) {
+        return el;
+      }
+    }
+
+    return null;
+  };
+}();
+/**
+* customElementToReact
+* @param {Class|Function} elem A custom element definition.
+* @param {Array} attr Props and events
+* @return {Object} A React component
+*/
+
+
+function customElementToReact(elementClass, options) {
+  if (options === void 0) options = {};
+  var name = elementClass.name || String(elementClass).match(/function ([^(]+)/)[1]; // String match for IE11
+
+  var dashCase = name.replace(/.[A-Z]/g, function (ref) {
+    var a = ref[0];
+    var b = ref[1];
+    return a + "-" + b;
+  }); // NameName -> name-name
+
+  var customProps = options.props || [];
+  var customEvents = options.customEvents || [];
+  var skipProps = customProps.slice(); // Keep a copy
+
+  var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
+  return (
+    /*@__PURE__*/
+    function (superclass) {
+      function anonymous(props) {
+        var this$1 = this;
+        superclass.call(this, props);
+
+        this.ref = function (el) {
+          return this$1.el = el;
+        };
+
+        customEvents.forEach(function (eventName) {
+          var on = "on" + eventName.replace(/(^|\.)./g, function (m) {
+            return m.slice(-1).toUpperCase();
+          }); // input.filter => onInputFilter
+
+          this$1[eventName] = function (event) {
+            return this$1.props[on] && closest$1(event.target, this$1.el.nodeName) === this$1.el && this$1.props[on](event);
+          };
+
+          skipProps.push(on); // Skip props that are customEvents
+        });
+      }
+
+      if (superclass) anonymous.__proto__ = superclass;
+      anonymous.prototype = Object.create(superclass && superclass.prototype);
+      anonymous.prototype.constructor = anonymous;
+
+      anonymous.prototype.componentDidMount = function componentDidMount() {
+        var this$1 = this; // Do not run connectedCallback before after React componentDidMount, to allow React hydration to run first
+
+        if (!window.customElements.get(tagName)) {
+          window.customElements.define(tagName, elementClass);
+        }
+
+        customProps.forEach(function (key) {
+          return this$1.props.hasOwnProperty(key) && (this$1.el[key] = this$1.props[key]);
+        });
+        customEvents.forEach(function (key) {
+          return this$1.el.addEventListener(key, this$1[key]);
+        });
+      };
+
+      anonymous.prototype.componentDidUpdate = function componentDidUpdate(prev) {
+        var this$1 = this;
+        customProps.forEach(function (key) {
+          return prev[key] !== this$1.props[key] && (this$1.el[key] = this$1.props[key]);
+        });
+      };
+
+      anonymous.prototype.componentWillUnmount = function componentWillUnmount() {
+        var this$1 = this;
+        customEvents.forEach(function (eventName) {
+          return this$1.el.removeEventListener(eventName, this$1[eventName]);
+        });
+      };
+
+      anonymous.prototype.render = function render() {
+        var this$1 = this; // Convert React props to CustomElement props https://github.com/facebook/react/issues/12810
+
+        return React.createElement(tagName, Object.keys(this.props).reduce(function (thisProps, key) {
+          if (skipProps.indexOf(key) === -1) {
+            // Do not render customEvents and custom props as attributes
+            if (key === 'className') {
+              thisProps["class"] = this$1.props[key];
+            } // Fixes className for custom elements
+            else if (this$1.props[key] === true) {
+                thisProps[key] = '';
+              } // Fixes boolean attributes
+              else if (this$1.props[key] !== false) {
+                  thisProps[key] = this$1.props[key];
+                } // Pass only truthy, non-function props
+
+          }
+
+          return thisProps;
+        }, {
+          ref: this.ref
+        }));
+      };
+
+      return anonymous;
+    }(React.Component)
+  );
+}
+
+var coreProgress = customElementToReact(CoreProgress, {
+  customEvents: ['change'],
+  suffix: version
+});
+
 module.exports = coreProgress;

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-progress.cjs.js",

readme.md

@@ -142,3 +142,3 @@ # Core Progress
 
-### progress.change
+### change
 
@@ -149,3 +149,3 @@ Fired when the progress value changes:
 ```js
-document.addEventListener('progress.change', (event) => {
+document.addEventListener('change', (event) => {
   event.target    // The progress element
@@ -152,0 +152,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89281

increased by7.99%

Lines of code

1157

increased by6.64%

No dependency changes