lit-element - npm Package Compare versions

Comparing version 0.2.5 to 0.4.0

lit-element.js

@@ -1,102 +0,6 @@
-import { html, render as litRender } from '../lit-html/lit-html.js'
-
-export const LitElement = (superclass) => class extends superclass {
-
-    static get observedAttributes() {
-        let attrs = [];
-        for (const prop in this.properties)
-            if (this.properties[prop].reflectToAttribute)
-                attrs.push(prop)
-        return attrs;
-    }
-
-    constructor() {
-        super();
-        this.__data = {};
-        this._methodsToCall = {};
-        this.attachShadow({ mode: "open" });
-    }
-
-    connectedCallback() {
-        const props = this.constructor.properties;
-        this._wait = true;
-        for (let prop in props)
-            this._makeGetterSetter(prop, props[prop])
-        delete this._wait;
-        litRender(this.render(), this.shadowRoot);
-        if (this.afterFirstRender)
-            this.afterFirstRender();
-    }
-
-    _makeGetterSetter(prop, info) {
-        Object.defineProperty(this, prop, {
-            get() {
-                return this.__data[prop]
-            },
-            set(val) {
-                if (typeof info === 'object')
-                    if (info.reflectToAttribute && (info.type === Object || info.type === Array))
-                        console.warn('Rich Data shouldn\'t be set as attribte!')
-                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)
-            }
-        });
-
-        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;
-            }
-        }
-
-        this[prop] = this.getAttribute(prop);
-    }
-
-    _propertiesChanged(prop, val) {
-        if (this._methodsToCall[prop]) {
-            this._methodsToCall[prop](val);
-        }
-        if (!this._wait) {
-            litRender(this.render(), this.shadowRoot)
-        }
-    }
-
-    attributeChangedCallback(prop, old, val) {
-        if (this[prop] !== val) {
-            const { type } = this.constructor.properties[prop];
-            if (type.name === 'Boolean') {
-                if (val !== 'false') {
-                    this.__data[prop] = this.hasAttribute(prop);
-                } else {
-                    this.__data[prop] = false
-                }
-            } else this.__data[prop] = type(val);
-            this._propertiesChanged(prop, val);
-        }
-    }
-
-    render() {
-        return html`Render Function not defined`
-    }
-
-    get $() {
-        const arr = this.shadowRoot.querySelectorAll('[id]');
-        const obj = {};
-        for (const el of arr)
-            obj[el.id] = el;
-
-        return obj;
-    }
-}
+import { html, svg, render, TemplateResult } from '../node_modules/lit-html/lit-html.js';
+import { LitLite, camelCaseToKebab } from './lit-lite.js';
+export const LitElement = (superclass) => LitLite(superclass, html, render);
+export { html, svg, TemplateResult };
+export { camelCaseToKebab };
+//# sourceMappingURL=lit-element.js.map

package.json

@@ -6,3 +6,3 @@ {
   "name": "lit-element",
-  "version": "0.2.5",
+  "version": "0.4.0",
   "description": "Implements lit-html via a LitElement class. Made for custom Elements.",
@@ -14,8 +14,14 @@ "main": "lit-element.js",
   "devDependencies": {
+    "eslint": "^4.9.0",
+    "eslint-plugin-html": "^3.2.2",
     "gulp": "^3.9.1",
-    "gulp-minify": "^1.0.0"
+    "gulp-minify": "^1.0.0",
+    "typescript": "^2.6.1",
+    "uglify-es": "^3.1.9"
   },
   "scripts": {
-    "prepublish": "gulp"
+    "checksize": "uglifyjs lit-element.js -mc --toplevel | gzip -9 | wc -c",
+    "prepublish": "gulp",
+    "build": "tsc"
   }
 }

README.md

@@ -6,2 +6,13 @@ # lit-element
 
+## New in 0.4.0
+- We now allow you to switch out the standard lit-html `render` and `html` functions
+- You can now use `lit-html-extended` via `lit-element-extended.js`
+- Added `notify` option for properties, which will fire an event, if the value changes
+- A lot of bug fixes
+
+## New in 0.3.0
+- You can now set any property of your element to a promise and LitElement will set the property to the resolved value of the promise. (credit: [depeele](https://github.com/depeele))
+- Attributes of properties with `reflectToAttribute: true` are now transformed to kebab-case. (credit: [depeele](https://github.com/depeele))
+- Codebase moved to TypeScript.
+
 ## Installation
@@ -25,3 +36,3 @@
 // import lit-element
-import {LitElement} from '../node_modules/lit-element/lit-element.min.js'
+import {LitElement} from '../node_modules/lit-element/lit-element.js'
 
@@ -39,3 +50,4 @@ // define Custom Element
                 observer: '_bodyChanged',
-                reflectToAttribute: true
+                reflectToAttribute: true,
+                notify: true
             }
@@ -60,6 +72,11 @@ }
     // If you want work done after the first render, like accessing elements with ids, do it here
-    afterFirstRender() {
-        
-        // access the element with id 'title'
-        this.$.title.classList.add('title--main')
+    afterRender(isFirstRender) {
+        if(isFirstRender) {
+            // access the element with id 'title'
+            this.$.title.classList.add('title--main');
+            this.addEventListener('body-changed', e => {
+                const body = e.detail;
+                ...
+            })
+        }
     }
@@ -72,2 +89,2 @@ }
  - This Element does not use Polymer, just Polymer-like syntax for properties.
- - Currently only `type`, `reflectToAttribute`, `observer` and `value` are supported for properties.
+ - Currently only `type`, `reflectToAttribute`, `observer`, `value` and `notify` 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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

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

242148

increased by2826.61%

Number of package files

15

increased by114.29%

Lines of code

498

increased by398%

Number of lines in readme file

85

increased by25%

Worsened metrics

Dev dependency count

6

increased by200%

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes