lit-element - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

lit-element.js

@@ -7,4 +7,4 @@ import { html, render as litRender } from '../lit-html/lit-html.js'
         let attrs = [];
-        for(const prop in this.properties) 
-            if(this.properties[prop].reflectToAttribute)
+        for (const prop in this.properties)
+            if (this.properties[prop].reflectToAttribute)
                 attrs.push(prop)
@@ -18,3 +18,3 @@ return attrs;
         this._methodsToCall = {};
-        this.attachShadow({mode: "open"});
+        this.attachShadow({ mode: "open" });
     }
@@ -25,16 +25,11 @@
         this._wait = true;
-        for(let prop in props) {
-            if(typeof props[prop] === 'object') {
-                this._makeComplexGetterSetter(prop, props[prop])
-            } else {
-                this._makeGetterSetter(prop, props[prop])
-            }
-        }
+        for (let prop in props)
+            this._makeGetterSetter(prop, props[prop])
         delete this._wait;
         litRender(this.render(), this.shadowRoot);
-        if(this.afterFirstRender)
+        if (this.afterFirstRender)
             this.afterFirstRender();
     }
 
-    _makeGetterSetter(prop, val) {
+    _makeGetterSetter(prop, info) {
         Object.defineProperty(this, prop, {
@@ -45,47 +40,37 @@ get() {
             set(val) {
-                this.__data[prop] = val;
-                this._propertiesChanged(prop, val)
-            }
-        })
-        this[prop] = this.getAttribute(prop);
-    }
-
-    _makeComplexGetterSetter(prop, info) {
-        Object.defineProperty(this, prop, {
-            get() {
-                if(info.reflectToAttribute) {
-                    if(info.type === Object || info.type === Array)
+                if (typeof info === 'object')
+                    if (info.reflectToAttribute && (info.type === Object || info.type === Array))
                         console.warn('Rich Data shouldn\'t be set as attribte!')
-                } 
-                return this.__data[prop];
-            },
-
-            set(val) {
-                if(info.reflectToAttribute) {
-                    if(info.type === Object || info.type === Array)
-                        console.warn('Rich Data shouldn\'t be set as attribte!')
-                    this.setAttribute(prop, val);
+                if (typeof info === 'object') {
+                    if (info.reflectToAttribute) {
+                        this.setAttribute(prop, val)
+                    } else this.__data[prop] = val;
                 } else this.__data[prop] = val;
-                this._propertiesChanged(prop, val);
+                this._propertiesChanged(prop, val)
             }
         });
-        if(info.observer) {
-            if(this[info.observer]) {
-                this._methodsToCall[prop] = this[info.observer];
-            } else {
-                console.warn(`Method ${info.observer} not defined!`);
+
+        if (typeof info === 'object') {
+            if (info.observer) {
+                if (this[info.observer]) {
+                    this._methodsToCall[prop] = this[info.observer].bind(this);
+                } else {
+                    console.warn(`Method ${info.observer} not defined!`);
+                }
             }
+            if (info.value) {
+                typeof info.value === 'function'
+                    ? this[prop] = info.value()
+                    : this[prop] = info.value;
+            }
         }
-        if(info.value) {
-            typeof info.value === 'function'
-            ? this[prop] = info.value()
-            : this[prop] = info.value; 
-        }
+
+        this[prop] = this.getAttribute(prop);
     }
 
     _propertiesChanged(prop, val) {
-        if(this._methodsToCall[prop]) {
-            this._methodsToCall[prop](val)
+        if (this._methodsToCall[prop]) {
+            this._methodsToCall[prop](val);
         }
-        if(!this._wait) {
+        if (!this._wait) {
             litRender(this.render(), this.shadowRoot)
@@ -96,6 +81,6 @@ }
     attributeChangedCallback(prop, old, val) {
-        if(this[prop] !== val) {
-            const {type} = this.constructor.properties[prop];
-            if(type.name === 'Boolean') {
-                if(val !== 'false') {
+        if (this[prop] !== val) {
+            const { type } = this.constructor.properties[prop];
+            if (type.name === 'Boolean') {
+                if (val !== 'false') {
                     this.__data[prop] = this.hasAttribute(prop);
@@ -117,3 +102,3 @@ } else {
         const obj = {};
-        for(const el of arr)
+        for (const el of arr)
             obj[el.id] = el;
@@ -120,0 +105,0 @@

lit-element.min.js

@@ -1,1 +0,1 @@
-import{html,render as litRender}from"../lit-html/lit-html.js";export const LitElement=t=>class extends t{static get observedAttributes(){let t=[];for(const e in this.properties)this.properties[e].reflectToAttribute&&t.push(e);return t}constructor(){super(),this.__data={},this._methodsToCall={},this.attachShadow({mode:"open"})}connectedCallback(){const t=this.constructor.properties;this._wait=!0;for(let e in t)"object"==typeof t[e]?this._makeComplexGetterSetter(e,t[e]):this._makeGetterSetter(e,t[e]);delete this._wait,litRender(this.render(),this.shadowRoot),this.afterFirstRender&&this.afterFirstRender()}_makeGetterSetter(t,e){Object.defineProperty(this,t,{get(){return this.__data[t]},set(e){this.__data[t]=e,this._propertiesChanged(t,e)}}),this[t]=this.getAttribute(t)}_makeComplexGetterSetter(t,e){Object.defineProperty(this,t,{get(){return e.reflectToAttribute&&(e.type!==Object&&e.type!==Array||console.warn("Rich Data shouldn't be set as attribte!")),this.__data[t]},set(r){e.reflectToAttribute?(e.type!==Object&&e.type!==Array||console.warn("Rich Data shouldn't be set as attribte!"),this.setAttribute(t,r)):this.__data[t]=r,this._propertiesChanged(t,r)}}),e.observer&&(this[e.observer]?this._methodsToCall[t]=this[e.observer]:console.warn(`Method ${e.observer} not defined!`)),e.value&&("function"==typeof e.value?this[t]=e.value():this[t]=e.value)}_propertiesChanged(t,e){this._methodsToCall[t]&&this._methodsToCall[t](e),this._wait||litRender(this.render(),this.shadowRoot)}attributeChangedCallback(t,e,r){if(this[t]!==r){const{type:e}=this.constructor.properties[t];"Boolean"===e.name?this.__data[t]="false"!==r&&this.hasAttribute(t):this.__data[t]=e(r),this._propertiesChanged(t,r)}}render(){return html`Render Function not defined`}get $(){const t=this.shadowRoot.querySelectorAll("[id]"),e={};for(const r of t)e[r.id]=r;return e}};
+import{html,render as litRender}from"../lit-html/lit-html.js";export const LitElement=t=>class extends t{static get observedAttributes(){let t=[];for(const e in this.properties)this.properties[e].reflectToAttribute&&t.push(e);return t}constructor(){super(),this.__data={},this._methodsToCall={},this.attachShadow({mode:"open"})}connectedCallback(){const t=this.constructor.properties;this._wait=!0;for(let e in t)this._makeGetterSetter(e,t[e]);delete this._wait,litRender(this.render(),this.shadowRoot),this.afterFirstRender&&this.afterFirstRender()}_makeGetterSetter(t,e){Object.defineProperty(this,t,{get(){return this.__data[t]},set(r){"object"==typeof e&&(!e.reflectToAttribute||e.type!==Object&&e.type!==Array||console.warn("Rich Data shouldn't be set as attribte!")),"object"==typeof e&&e.reflectToAttribute?this.setAttribute(t,r):this.__data[t]=r,this._propertiesChanged(t,r)}}),"object"==typeof e&&(e.observer&&(this[e.observer]?this._methodsToCall[t]=this[e.observer].bind(this):console.warn(`Method ${e.observer} not defined!`)),e.value&&("function"==typeof e.value?this[t]=e.value():this[t]=e.value)),this[t]=this.getAttribute(t)}_propertiesChanged(t,e){this._methodsToCall[t]&&this._methodsToCall[t](e),this._wait||litRender(this.render(),this.shadowRoot)}attributeChangedCallback(t,e,r){if(this[t]!==r){const{type:e}=this.constructor.properties[t];"Boolean"===e.name?this.__data[t]="false"!==r&&this.hasAttribute(t):this.__data[t]=e(r),this._propertiesChanged(t,r)}}render(){return html`Render Function not defined`}get $(){const t=this.shadowRoot.querySelectorAll("[id]"),e={};for(const r of t)e[r.id]=r;return e}};

package.json

@@ -6,3 +6,3 @@ {
   "name": "lit-element",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Implements lit-html via a LitElement class. Made for custom Elements.",
@@ -9,0 +9,0 @@ "main": "lit-element.js",

README.md

@@ -33,3 +33,5 @@ # lit-element
                 type: String,
-                value: 'That is a cool LitElement'
+                value: 'That is a cool LitElement',
+                observer: '_bodyChanged',
+                reflectToAttribute: true
             }
@@ -48,2 +50,7 @@ }
 
+    // observer callback
+    _bodyChanged(newValue) {
+        console.log(`Body updated to ${newValue}`);
+    }
+
     // If you want work done after the first render, like accessing elements with ids, do it here
@@ -61,2 +68,2 @@ afterFirstRender() {
  - This Element does not use Polymer, just Polymer-like syntax for properties.
- - Currently only `reflectToAttribute` and `value` are supported for properties.
+ - Currently only `type`, `reflectToAttribute`, `observer` and `value` are supported for properties.

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

Number of lines in readme file

66

increased by11.86%

Worsened metrics

Total package byte prevSize

43588

decreased by-0.86%

Lines of code

89

decreased by-14.42%

No dependency changes