@christianmurphy/reactive-elements - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

babel.config.js

@@ -5,4 +5,3 @@ module.exports = function(api) {
     presets: ['@babel/preset-env'],
-    plugins: ['babel-plugin-transform-custom-element-classes'],
   };
 };

CHANGELOG.md

@@ -6,3 +6,3 @@ _ReactiveElements has not had a changelog in the past, but this one started as
 
-* **Breaking Change**: previously, an empty string attribute would be passed
+- **Breaking Change**: previously, an empty string attribute would be passed
   through to React as `null`, so `some-prop=""` would give React
@@ -14,6 +14,6 @@ `props.someProp === null`. In this release this behaviour is gone, and an
 
-* Add `ignoreAttributeChanged` option.
+- Add `ignoreAttributeChanged` option.
 
 **0.8.0** 02 May 18
 
-* First release that we're tracking in the changelog.
+- First release that we're tracking in the changelog.

demo/jsx/my-reactive-element.jsx

@@ -32,3 +32,5 @@ /* @jsx React.DOM */
       <div>
-        &lt;my-reactive-element&gt;<ul style={styleObject}>{rows}</ul>&lt;/my-reactive-element&gt;
+        &lt;my-reactive-element&gt;
+        <ul style={styleObject}>{rows}</ul>
+        &lt;/my-reactive-element&gt;
       </div>
@@ -35,0 +37,0 @@ );

dist/reactive-elements.cjs.js

@@ -61,2 +61,70 @@ 'use strict';
 
+function isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _construct(Parent, args, Class) {
+  if (isNativeReflectConstruct()) {
+    _construct = Reflect.construct;
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
+    };
+  }
+
+  return _construct.apply(null, arguments);
+}
+
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
+
+  _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !_isNativeFunction(Class)) return Class;
+
+    if (typeof Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
+
+      _cache.set(Class, Wrapper);
+    }
+
+    function Wrapper() {
+      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    }
+
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class);
+  };
+
+  return _wrapNativeSuper(Class);
+}
+
 function _assertThisInitialized(self) {
@@ -223,7 +291,2 @@ if (self === void 0) {
 
-function _CustomElement() {
-  return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
-}
-Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
-Object.setPrototypeOf(_CustomElement, HTMLElement);
 function reactiveElements(elementName, ReactComponent, options) {
@@ -246,4 +309,4 @@ function create(parent, props) {
   /*#__PURE__*/
-  function (_CustomElement2) {
-    _inherits(CustomElement, _CustomElement2);
+  function (_HTMLElement) {
+    _inherits(CustomElement, _HTMLElement);
 
@@ -261,3 +324,3 @@ function CustomElement() {
       var observer = new MutationObserver(function () {
-        ReactDOM.unmountComponentAtNode(self);
+        ReactDOM.unmountComponentAtNode(self.shadowRoot);
         var props = getProps(self);
@@ -296,3 +359,3 @@ props.children = getChildren(self);
       value: function disconnectedCallback() {
-        ReactDOM.unmountComponentAtNode(this);
+        ReactDOM.unmountComponentAtNode(this.shadowRoot);
       }
@@ -302,3 +365,3 @@ }]);
     return CustomElement;
-  }(_CustomElement);
+  }(_wrapNativeSuper(HTMLElement));
 
@@ -305,0 +368,0 @@ customElements.define(elementName, CustomElement);

dist/reactive-elements.iife.js

@@ -57,2 +57,70 @@ var ReactiveElements = (function (exports,React,ReactDOM) {
 
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function _construct(Parent, args, Class) {
+    if (isNativeReflectConstruct()) {
+      _construct = Reflect.construct;
+    } else {
+      _construct = function _construct(Parent, args, Class) {
+        var a = [null];
+        a.push.apply(a, args);
+        var Constructor = Function.bind.apply(Parent, a);
+        var instance = new Constructor();
+        if (Class) _setPrototypeOf(instance, Class.prototype);
+        return instance;
+      };
+    }
+
+    return _construct.apply(null, arguments);
+  }
+
+  function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  }
+
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !_isNativeFunction(Class)) return Class;
+
+      if (typeof Class !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
+      }
+
+      if (typeof _cache !== "undefined") {
+        if (_cache.has(Class)) return _cache.get(Class);
+
+        _cache.set(Class, Wrapper);
+      }
+
+      function Wrapper() {
+        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+      }
+
+      Wrapper.prototype = Object.create(Class.prototype, {
+        constructor: {
+          value: Wrapper,
+          enumerable: false,
+          writable: true,
+          configurable: true
+        }
+      });
+      return _setPrototypeOf(Wrapper, Class);
+    };
+
+    return _wrapNativeSuper(Class);
+  }
+
   function _assertThisInitialized(self) {
@@ -219,7 +287,2 @@ if (self === void 0) {
 
-  function _CustomElement() {
-    return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
-  }
-  Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
-  Object.setPrototypeOf(_CustomElement, HTMLElement);
   function reactiveElements(elementName, ReactComponent, options) {
@@ -242,4 +305,4 @@ function create(parent, props) {
     /*#__PURE__*/
-    function (_CustomElement2) {
-      _inherits(CustomElement, _CustomElement2);
+    function (_HTMLElement) {
+      _inherits(CustomElement, _HTMLElement);
 
@@ -257,3 +320,3 @@ function CustomElement() {
         var observer = new MutationObserver(function () {
-          ReactDOM.unmountComponentAtNode(self);
+          ReactDOM.unmountComponentAtNode(self.shadowRoot);
           var props = getProps(self);
@@ -292,3 +355,3 @@ props.children = getChildren(self);
         value: function disconnectedCallback() {
-          ReactDOM.unmountComponentAtNode(this);
+          ReactDOM.unmountComponentAtNode(this.shadowRoot);
         }
@@ -298,3 +361,3 @@ }]);
       return CustomElement;
-    }(_CustomElement);
+    }(_wrapNativeSuper(HTMLElement));
 
@@ -301,0 +364,0 @@ customElements.define(elementName, CustomElement);

package.json

 {
   "name": "@christianmurphy/reactive-elements",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "publishConfig": {
@@ -9,3 +9,3 @@ "access": "public"
   "main": "dist/reactive-elements.cjs.js",
-  "module": "dist/reactive-elements.esm.mjs",
+  "module": "dist/reactive-elements.esm.js",
   "source": "src/reactive-elements.js",
@@ -88,3 +88,2 @@ "scripts": {
     "@babel/preset-env": "^7.1.0",
-    "babel-plugin-transform-custom-element-classes": "^0.1.0",
     "jasmine": "^3.0.0",
@@ -91,0 +90,0 @@ "jasmine-core": "^3.0.0",

README.md

@@ -131,19 +131,19 @@ <a href="http://pixelscommander.com/polygon/reactive-elements/example/#.U0LMA62Sy7o">
 
-* [React.js](https://github.com/facebook/react)
-* [React DOM](https://github.com/facebook/react)
-* Custom elements support or
+- [React.js](https://github.com/facebook/react)
+- [React DOM](https://github.com/facebook/react)
+- Custom elements support or
   [polyfill](https://github.com/WebComponents/webcomponentsjs)
-* Support or [polyfills](https://github.com/zloirock/core-js) for:
-  * `regexp.match`
-  * `regexp.replace`
-  * `object.define-setter`
-  * `object.define-getter`
-  * `object.define-property`
-  * `function.name`
-  * `web.dom.iterable`
-  * `array.iterator`
-  * `object.keys`
-  * `object.set-prototype-of`
-  * `reflect.construct`
-  * `function.bind`
+- Support or [polyfills](https://github.com/zloirock/core-js) for:
+  - `regexp.match`
+  - `regexp.replace`
+  - `object.define-setter`
+  - `object.define-getter`
+  - `object.define-property`
+  - `function.name`
+  - `web.dom.iterable`
+  - `array.iterator`
+  - `object.keys`
+  - `object.set-prototype-of`
+  - `reflect.construct`
+  - `function.bind`
 
@@ -150,0 +150,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

458214

increased by6.38%

Dev dependency count

15

decreased by-6.25%

Number of package files

30

increased by7.14%

Lines of code

1791

increased by33.06%

Worsened metrics

Number of medium supply chain risk alerts

5

increased by25%

No dependency changes