Comparing version 0.9.0 to 0.10.0
@@ -15,2 +15,6 @@ # Change Log | ||
## [0.10.0] - 2018-05-03 | ||
* Added IE11 support | ||
* Declarative events in lit-extended are more efficient when handlers change | ||
## [0.9.0] - 2018-02-01 | ||
@@ -17,0 +21,0 @@ |
@@ -14,3 +14,3 @@ /** | ||
*/ | ||
var __asyncValues = (this && this.__asyncIterator) || function (o) { | ||
var __asyncValues = (this && this.__asyncValues) || function (o) { | ||
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); | ||
@@ -52,3 +52,3 @@ var m = o[Symbol.asyncIterator]; | ||
let v = await value_1_1.value; | ||
// When we get the first value, clear the part. This let's the previous | ||
// When we get the first value, clear the part. This lets the previous | ||
// value display until we can replace it. | ||
@@ -55,0 +55,0 @@ if (i === 0) { |
@@ -14,3 +14,3 @@ /** | ||
*/ | ||
var __asyncValues = (this && this.__asyncIterator) || function (o) { | ||
var __asyncValues = (this && this.__asyncValues) || function (o) { | ||
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); | ||
@@ -17,0 +17,0 @@ var m = o[Symbol.asyncIterator]; |
@@ -70,2 +70,3 @@ /** | ||
setValue(value: any): void; | ||
handleEvent(event: Event): void; | ||
} |
@@ -51,11 +51,12 @@ /** | ||
if (templatePart.type === 'attribute') { | ||
if (templatePart.rawName.startsWith('on-')) { | ||
if (templatePart.rawName.substr(0, 3) === 'on-') { | ||
const eventName = templatePart.rawName.slice(3); | ||
return new EventPart(instance, node, eventName); | ||
} | ||
if (templatePart.name.endsWith('$')) { | ||
const lastChar = templatePart.name.substr(templatePart.name.length - 1); | ||
if (lastChar === '$') { | ||
const name = templatePart.name.slice(0, -1); | ||
return new AttributePart(instance, node, name, templatePart.strings); | ||
} | ||
if (templatePart.name.endsWith('?')) { | ||
if (lastChar === '?') { | ||
const name = templatePart.name.slice(0, -1); | ||
@@ -125,12 +126,19 @@ return new BooleanAttributePart(instance, node, name, templatePart.strings); | ||
const listener = getValue(this, value); | ||
const previous = this._listener; | ||
if (listener === previous) { | ||
if (listener === this._listener) { | ||
return; | ||
} | ||
if (listener == null) { | ||
this.element.removeEventListener(this.eventName, this); | ||
} | ||
else if (this._listener == null) { | ||
this.element.addEventListener(this.eventName, this); | ||
} | ||
this._listener = listener; | ||
if (previous != null) { | ||
this.element.removeEventListener(this.eventName, previous); | ||
} | ||
handleEvent(event) { | ||
if (typeof this._listener === 'function') { | ||
this._listener.call(this.element, event); | ||
} | ||
if (listener != null) { | ||
this.element.addEventListener(this.eventName, listener); | ||
else if (typeof this._listener.handleEvent === 'function') { | ||
this._listener.handleEvent(event); | ||
} | ||
@@ -137,0 +145,0 @@ } |
@@ -85,3 +85,3 @@ /** | ||
* @param result a TemplateResult created by evaluating a template tag like | ||
* `html` or `svg. | ||
* `html` or `svg`. | ||
* @param container A DOM parent to render to. The entire contents are either | ||
@@ -88,0 +88,0 @@ * replaced, or efficiently updated if the same result type was previous |
@@ -109,3 +109,3 @@ /** | ||
* @param result a TemplateResult created by evaluating a template tag like | ||
* `html` or `svg. | ||
* `html` or `svg`. | ||
* @param container A DOM parent to render to. The entire contents are either | ||
@@ -254,2 +254,3 @@ * replaced, or efficiently updated if the same result type was previous | ||
// Find the corresponding attribute | ||
// TODO(justinfagnani): remove non-null assertion | ||
const attribute = attributes.getNamedItem(attributeNameInPart); | ||
@@ -272,12 +273,14 @@ const stringsForAttributeValue = attribute.value.split(markerRegex); | ||
partIndex += lastIndex; | ||
// We keep this current node, but reset its content to the last | ||
// literal part. We insert new literal nodes before this so that the | ||
// tree walker keeps its position correctly. | ||
node.textContent = strings[lastIndex]; | ||
// Generate a new text node for each literal section | ||
// These nodes are also used as the markers for node parts | ||
for (let i = 0; i < lastIndex; i++) { | ||
parent.insertBefore(document.createTextNode(strings[i]), node); | ||
parent.insertBefore((strings[i] === '') | ||
? document.createComment('') | ||
: document.createTextNode(strings[i]), node); | ||
this.parts.push(new TemplatePart('node', index++)); | ||
} | ||
parent.insertBefore(strings[lastIndex] === '' ? | ||
document.createComment('') : | ||
document.createTextNode(strings[lastIndex]), node); | ||
nodesToRemove.push(node); | ||
} | ||
@@ -300,3 +303,3 @@ else if (node.nodeType === 8 /* Node.COMMENT_NODE */ && | ||
previousSibling.nodeType !== Node.TEXT_NODE) { | ||
parent.insertBefore(document.createTextNode(''), node); | ||
parent.insertBefore(document.createComment(''), node); | ||
} | ||
@@ -312,3 +315,3 @@ else { | ||
if (node.nextSibling === null) { | ||
parent.insertBefore(document.createTextNode(''), node); | ||
parent.insertBefore(document.createComment(''), node); | ||
} | ||
@@ -315,0 +318,0 @@ else { |
{ | ||
"name": "lit-html", | ||
"version": "0.9.0", | ||
"version": "0.10.0", | ||
"description": "HTML template literals in JavaScript", | ||
@@ -42,6 +42,6 @@ "license": "BSD-3-Clause", | ||
"typedoc": "^0.9.0", | ||
"typescript": "^2.6.2", | ||
"typescript": "^2.8.3", | ||
"uglify-es": "^3.3.5", | ||
"wct-browser-legacy": "0.0.1-pre.11", | ||
"web-component-tester": "^6.4.3" | ||
"wct-browser-legacy": "0.0.1-pre.12", | ||
"web-component-tester": "^6.6.0-pre.5" | ||
}, | ||
@@ -48,0 +48,0 @@ "typings": "lit-html.d.ts", |
@@ -49,2 +49,8 @@ # lit-html | ||
## Installation | ||
```bash | ||
$ npm install lit-html | ||
``` | ||
## How it Works | ||
@@ -95,3 +101,3 @@ | ||
* It utilizes the built-in JS and HTML parsers - it doesn't include any expression or markup parser of it's own. | ||
* It utilizes the built-in JS and HTML parsers - it doesn't include any expression or markup parser of its own. | ||
* It only updates the dynamic parts of templates - static parts are untouched, not even walked for diffing, after the initial render. | ||
@@ -98,0 +104,0 @@ * It uses cloning for initial render. |
@@ -50,3 +50,3 @@ /** | ||
for await (let v of value) { | ||
// When we get the first value, clear the part. This let's the previous | ||
// When we get the first value, clear the part. This lets the previous | ||
// value display until we can replace it. | ||
@@ -53,0 +53,0 @@ if (i === 0) { |
@@ -60,7 +60,8 @@ /** | ||
if (templatePart.type === 'attribute') { | ||
if (templatePart.rawName!.startsWith('on-')) { | ||
if (templatePart.rawName!.substr(0, 3) === 'on-') { | ||
const eventName = templatePart.rawName!.slice(3); | ||
return new EventPart(instance, node as Element, eventName); | ||
} | ||
if (templatePart.name!.endsWith('$')) { | ||
const lastChar = templatePart.name!.substr(templatePart.name!.length - 1); | ||
if (lastChar === '$') { | ||
const name = templatePart.name!.slice(0, -1); | ||
@@ -70,3 +71,3 @@ return new AttributePart( | ||
} | ||
if (templatePart.name!.endsWith('?')) { | ||
if (lastChar === '?') { | ||
const name = templatePart.name!.slice(0, -1); | ||
@@ -149,15 +150,20 @@ return new BooleanAttributePart( | ||
const listener = getValue(this, value); | ||
const previous = this._listener; | ||
if (listener === previous) { | ||
if (listener === this._listener) { | ||
return; | ||
} | ||
if (listener == null) { | ||
this.element.removeEventListener(this.eventName, this); | ||
} else if (this._listener == null) { | ||
this.element.addEventListener(this.eventName, this); | ||
} | ||
this._listener = listener; | ||
} | ||
this._listener = listener; | ||
if (previous != null) { | ||
this.element.removeEventListener(this.eventName, previous); | ||
handleEvent(event: Event) { | ||
if (typeof this._listener === 'function') { | ||
this._listener.call(this.element, event); | ||
} else if (typeof this._listener.handleEvent === 'function') { | ||
this._listener.handleEvent(event); | ||
} | ||
if (listener != null) { | ||
this.element.addEventListener(this.eventName, listener); | ||
} | ||
} | ||
} |
@@ -150,3 +150,3 @@ /** | ||
* @param result a TemplateResult created by evaluating a template tag like | ||
* `html` or `svg. | ||
* `html` or `svg`. | ||
* @param container A DOM parent to render to. The entire contents are either | ||
@@ -317,3 +317,4 @@ * replaced, or efficiently updated if the same result type was previous | ||
// Find the corresponding attribute | ||
const attribute = attributes.getNamedItem(attributeNameInPart); | ||
// TODO(justinfagnani): remove non-null assertion | ||
const attribute = attributes.getNamedItem(attributeNameInPart)!; | ||
const stringsForAttributeValue = attribute.value.split(markerRegex); | ||
@@ -342,13 +343,18 @@ this.parts.push(new TemplatePart( | ||
// We keep this current node, but reset its content to the last | ||
// literal part. We insert new literal nodes before this so that the | ||
// tree walker keeps its position correctly. | ||
node.textContent = strings[lastIndex]; | ||
// Generate a new text node for each literal section | ||
// These nodes are also used as the markers for node parts | ||
for (let i = 0; i < lastIndex; i++) { | ||
parent.insertBefore(document.createTextNode(strings[i]), node); | ||
parent.insertBefore( | ||
(strings[i] === '') | ||
? document.createComment('') | ||
: document.createTextNode(strings[i]), | ||
node); | ||
this.parts.push(new TemplatePart('node', index++)); | ||
} | ||
parent.insertBefore( | ||
strings[lastIndex] === '' ? | ||
document.createComment('') : | ||
document.createTextNode(strings[lastIndex]), | ||
node); | ||
nodesToRemove.push(node); | ||
} else if ( | ||
@@ -371,3 +377,3 @@ node.nodeType === 8 /* Node.COMMENT_NODE */ && | ||
previousSibling.nodeType !== Node.TEXT_NODE) { | ||
parent.insertBefore(document.createTextNode(''), node); | ||
parent.insertBefore(document.createComment(''), node); | ||
} else { | ||
@@ -382,3 +388,3 @@ index--; | ||
if (node.nextSibling === null) { | ||
parent.insertBefore(document.createTextNode(''), node); | ||
parent.insertBefore(document.createComment(''), node); | ||
} else { | ||
@@ -385,0 +391,0 @@ index--; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
2746
423
204348