lit-element
Advanced tools
lit-element - npm Package Compare versions
Comparing version 0.2.5 to 0.4.0
@@ -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 |
@@ -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" | ||
| } | ||
| } |
@@ -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. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
LicenseThis 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
- increased by2826.61%
242148
- Number of package files
- increased by114.29%
15
- Lines of code
- increased by398%
498
- Number of lines in readme file
- increased by25%
85
Worsened metrics
- Dev dependency count
- increased by200%
6
- Number of low license alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes