panel - npm Package Compare versions

Comparing version 5.6.0 to 5.7.0

build/isorender/dom-shims.js

@@ -52,2 +52,3 @@ 'use strict';
       if (!child.initialized && child.connectedCallback) {
+        child.isConnected = true;
         child.connectedCallback();
@@ -59,2 +60,21 @@ }
 
+// patch removeChild to call disconnectedCallback
+var origRemoveChild = Element.prototype.removeChild;
+Element.prototype.removeChild = function (child) {
+  origRemoveChild.call(this, child);
+  var childNode = child;
+  if (childNode && childNode.disconnectedCallback && childNode.initialized) {
+    childNode.isConnected = false;
+    childNode.disconnectedCallback();
+  }
+  return child;
+};
+
+Node.DOCUMENT_FRAGMENT_NODE = 11;
+
+// html-element does not provide hasAttribute
+Element.prototype.hasAttribute = function (name) {
+  return this.getAttribute(name) !== null;
+};
+
 // html-element only provides Element (with a lot of the HTMLElement API baked in).
@@ -77,14 +97,20 @@ // Use HTMLElement as our Web Components-ready extension.
       _get(HTMLElement.prototype.__proto__ || Object.getPrototypeOf(HTMLElement.prototype), 'setAttribute', this).apply(this, arguments);
-      if (this.attributeChangedCallback && this.__attrIsObserved(name)) {
-        this.attributeChangedCallback(name, oldValue, value);
-      }
+      this.__onAttrChanged(name, oldValue, value);
     }
   }, {
-    key: 'hasAttribute',
-    value: function hasAttribute(name) {
-      return !!this.attributes.find(function (attr) {
-        return attr.name === name;
-      });
+    key: 'removeAttribute',
+    value: function removeAttribute(name) {
+      var oldValue = this.getAttribute(name);
+      _get(HTMLElement.prototype.__proto__ || Object.getPrototypeOf(HTMLElement.prototype), 'removeAttribute', this).apply(this, arguments);
+      this.__onAttrChanged(name, oldValue, null);
     }
   }, {
+    key: 'attachShadow',
+    value: function attachShadow() {
+      this.shadowRoot = document.createElement('shadow-root');
+      this.shadowRoot.nodeType = Node.DOCUMENT_FRAGMENT_NODE;
+      this.shadowRoot.host = this;
+      return this.shadowRoot;
+    }
+  }, {
     key: '__attrIsObserved',
@@ -98,5 +124,7 @@ value: function __attrIsObserved(name) {
   }, {
-    key: 'attachShadow',
-    value: function attachShadow() {
-      return document.createElement('shadow-root');
+    key: '__onAttrChanged',
+    value: function __onAttrChanged(name, oldValue, newValue) {
+      if (this.attributeChangedCallback && this.__attrIsObserved(name)) {
+        this.attributeChangedCallback && this.attributeChangedCallback(name, oldValue, newValue);
+      }
     }
@@ -103,0 +131,0 @@ }]);

lib/index.d.ts

@@ -68,5 +68,5 @@ // Type definitions for panel
 export interface PanelLifecycleContext {
-  // optional callback that executes each time the component is connected to the DOM
+  // optional callback that executes each time a component using this context is connected to the DOM
   bindToComponent?(component: Component<any>): void;
-  // optional callback that executes each time the component is disconnected from the DOM
+  // optional callback that executes each time a component using this context is disconnected from the DOM
   unbindFromComponent?(component: Component<any>): void;
@@ -73,0 +73,0 @@ }

lib/isorender/dom-shims.js

@@ -33,6 +33,7 @@ /* eslint-env node */
   const origFunc = Element.prototype[funcName];
-  Element.prototype[funcName] = function() {
+  Element.prototype[funcName] = function () {
     const child = origFunc.apply(this, arguments);
     requestAnimationFrame(() => {
       if (!child.initialized && child.connectedCallback) {
+        child.isConnected = true;
         child.connectedCallback();
@@ -44,2 +45,21 @@ }
 
+// patch removeChild to call disconnectedCallback
+const origRemoveChild = Element.prototype.removeChild;
+Element.prototype.removeChild = function (child) {
+  origRemoveChild.call(this, child);
+  const childNode = child;
+  if (childNode && childNode.disconnectedCallback && childNode.initialized) {
+    childNode.isConnected = false;
+    childNode.disconnectedCallback();
+  }
+  return child;
+};
+
+Node.DOCUMENT_FRAGMENT_NODE = 11;
+
+// html-element does not provide hasAttribute
+Element.prototype.hasAttribute = function (name) {
+  return this.getAttribute(name) !== null;
+};
+
 // html-element only provides Element (with a lot of the HTMLElement API baked in).
@@ -51,11 +71,18 @@ // Use HTMLElement as our Web Components-ready extension.
     super.setAttribute(...arguments);
-    if (this.attributeChangedCallback && this.__attrIsObserved(name)) {
-      this.attributeChangedCallback(name, oldValue, value);
-    }
+    this.__onAttrChanged(name, oldValue, value);
   }
 
-  hasAttribute(name) {
-    return !!this.attributes.find((attr) => attr.name === name);
+  removeAttribute(name) {
+    const oldValue = this.getAttribute(name);
+    super.removeAttribute(...arguments);
+    this.__onAttrChanged(name, oldValue, null);
   }
 
+  attachShadow() {
+    this.shadowRoot = document.createElement(`shadow-root`);
+    this.shadowRoot.nodeType = Node.DOCUMENT_FRAGMENT_NODE;
+    this.shadowRoot.host = this;
+    return this.shadowRoot;
+  }
+
   __attrIsObserved(name) {
@@ -68,4 +95,6 @@ if (!this.__observedAttrs) {
 
-  attachShadow() {
-    return document.createElement(`shadow-root`);
+  __onAttrChanged(name, oldValue, newValue) {
+    if (this.attributeChangedCallback && this.__attrIsObserved(name)) {
+      this.attributeChangedCallback && this.attributeChangedCallback(name, oldValue, newValue);
+    }
   }
@@ -81,3 +110,3 @@ }
 const originalCreateElement = Document.prototype.createElement;
-Document.prototype.createElement = function(tagName) {
+Document.prototype.createElement = function (tagName) {
   tagName = tagName.toLowerCase();
@@ -84,0 +113,0 @@ const customElClass = customElementsRegistry[tagName];

package.json

 {
   "name": "panel",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -68,3 +68,3 @@ "main": "build/index.js",
     "babel-preset-es2015": "6.24.1",
-    "chai": "3.5.0",
+    "chai": "4.2.0",
     "chrome-store-api": "1.0.5",
@@ -82,2 +82,4 @@ "domsuite": "0.2.0",
     "readline-sync": "1.4.7",
+    "sinon": "9.2.3",
+    "sinon-chai": "3.5.0",
     "tslint": "5.18.0",
@@ -84,0 +86,0 @@ "typescript": "4.0.2",

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

134801

increased by1.59%

Lines of code

3034

increased by1.68%

Worsened metrics

Dev dependency count

30

increased by7.14%

No dependency changes