lit-html - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

CHANGELOG.md

@@ -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 @@

lib/async-append.js

@@ -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) {

lib/async-replace.js

@@ -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];

lib/lit-extended.d.ts

@@ -70,2 +70,3 @@ /**
     setValue(value: any): void;
+    handleEvent(event: Event): void;
 }

lib/lit-extended.js

@@ -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 @@ }

lit-html.d.ts

@@ -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

lit-html.js

@@ -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 {

package.json

 {
   "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",

README.md

@@ -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.

src/lib/async-append.ts

@@ -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) {

src/lib/lit-extended.ts

@@ -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);
-    }
   }
 }

src/lit-html.ts

@@ -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--;

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

Lines of code

2746

increased by0.92%

Number of lines in readme file

423

increased by1.44%

Worsened metrics

Total package byte prevSize

204348

decreased by-0.32%

No dependency changes