lit-html - npm Package Compare versions

Comparing version 0.6.0-pre.1 to 0.6.0-pre.2

lib/lit-extended.d.ts

@@ -46,3 +46,3 @@ /**
 export declare class PropertyPart extends AttributePart {
-    setValue(values: any[]): void;
+    setValue(values: any[], startIndex: number): void;
 }
@@ -49,0 +49,0 @@ export declare class EventPart extends Part {

lib/lit-extended.js

@@ -61,3 +61,3 @@ /**
 export class PropertyPart extends AttributePart {
-    setValue(values) {
+    setValue(values, startIndex) {
         const s = this.strings;
@@ -68,3 +68,3 @@ let value;
             // leading and trailing empty strings.
-            value = this._getValue(values[0]);
+            value = this._getValue(values[startIndex]);
         }
@@ -77,3 +77,3 @@ else {
                 if (i < s.length - 1) {
-                    value += this._getValue(values[i]);
+                    value += this._getValue(values[startIndex + i]);
                 }
@@ -80,0 +80,0 @@ }

lit-html.d.ts

@@ -6,2 +6,3 @@ /**
 export declare function html(strings: TemplateStringsArray, ...values: any[]): TemplateResult;
+export declare function svg(strings: TemplateStringsArray, ...values: any[]): TemplateResult;
 /**
@@ -50,4 +51,8 @@ * The return type of `html`, which holds a Template and the values from
     element: HTMLTemplateElement;
-    constructor(strings: TemplateStringsArray);
-    private _getHtml(strings);
+    svg: boolean;
+    constructor(strings: TemplateStringsArray, svg?: boolean);
+    /**
+     * Returns a string of HTML used to create a <template> element.
+     */
+    private _getHtml(strings, svg?);
 }
@@ -54,0 +59,0 @@ export declare type DirectiveFn = (part: Part) => any;

lit-html.js

@@ -18,2 +18,3 @@ /**
 const templates = new Map();
+const svgTemplates = new Map();
 /**
@@ -31,2 +32,10 @@ * Interprets a template literal as an HTML template that can efficiently
 }
+export function svg(strings, ...values) {
+    let template = svgTemplates.get(strings);
+    if (template === undefined) {
+        template = new Template(strings, true);
+        svgTemplates.set(strings, template);
+    }
+    return new TemplateResult(template, values);
+}
 /**
@@ -94,6 +103,7 @@ * The return type of `html`, which holds a Template and the values from
 export class Template {
-    constructor(strings) {
+    constructor(strings, svg = false) {
         this.parts = [];
+        this.svg = svg;
         this.element = document.createElement('template');
-        this.element.innerHTML = this._getHtml(strings);
+        this.element.innerHTML = this._getHtml(strings, svg);
         const nodesToRemove = [];
@@ -186,4 +196,10 @@ const attributesToRemove = [];
     }
-    _getHtml(strings) {
+    /**
+     * Returns a string of HTML used to create a <template> element.
+     */
+    _getHtml(strings, svg) {
         const parts = [];
+        if (svg) {
+            parts.push('<svg>');
+        }
         for (let i = 0; i < strings.length; i++) {
@@ -195,2 +211,5 @@ parts.push(strings[i]);
         }
+        if (svg) {
+            parts.push('</svg>');
+        }
         return parts.join('');
@@ -477,2 +496,10 @@ }
         }
+        if (this.template.svg) {
+            const container = fragment.firstChild;
+            fragment.removeChild(container);
+            const nodes = container.childNodes;
+            for (let i = 0; i < nodes.length; i++) {
+                fragment.appendChild(nodes.item(i));
+            }
+        }
         return fragment;
@@ -479,0 +506,0 @@ }

package.json

 {
   "name": "lit-html",
-  "version": "0.6.0-pre.1",
+  "version": "0.6.0-pre.2",
   "description": "HTML template literals in JavaScript",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

src/lib/lit-extended.ts

@@ -66,3 +66,3 @@ /**
 
-  setValue(values: any[]): void {
+  setValue(values: any[], startIndex: number): void {
     const s = this.strings;
@@ -73,3 +73,3 @@ let value: any;
       // leading and trailing empty strings.
-      value = this._getValue(values[0]);
+      value = this._getValue(values[startIndex]);
     } else {
@@ -81,3 +81,3 @@ // Interpolation, so interpolate
         if (i < s.length - 1) {
-          value += this._getValue(values[i]);
+          value += this._getValue(values[startIndex + i]);
         }
@@ -84,0 +84,0 @@ }

src/lit-html.ts

@@ -19,2 +19,3 @@ /**
 const templates = new Map<TemplateStringsArray, Template>();
+const svgTemplates = new Map<TemplateStringsArray, Template>();
 
@@ -34,2 +35,11 @@ /**
 
+export function svg(strings: TemplateStringsArray, ...values: any[]): TemplateResult {
+  let template = svgTemplates.get(strings);
+  if (template === undefined) {
+    template = new Template(strings, true);
+    svgTemplates.set(strings, template);
+  }
+  return new TemplateResult(template, values);
+}
+
 /**
@@ -111,6 +121,8 @@ * The return type of `html`, which holds a Template and the values from
   element: HTMLTemplateElement;
+  svg: boolean
 
-  constructor(strings: TemplateStringsArray) {
+  constructor(strings: TemplateStringsArray, svg: boolean = false) {
+    this.svg = svg;
     this.element = document.createElement('template');
-    this.element.innerHTML = this._getHtml(strings);
+    this.element.innerHTML = this._getHtml(strings, svg);
 
@@ -211,4 +223,8 @@ const nodesToRemove: Node[] = [];
 
-  private _getHtml(strings: TemplateStringsArray): string {
+  /**
+   * Returns a string of HTML used to create a <template> element.
+   */
+  private _getHtml(strings: TemplateStringsArray, svg?: boolean): string {
     const parts = [];
+    if (svg) { parts.push('<svg>')}
     for (let i = 0; i < strings.length; i++) {
@@ -220,2 +236,3 @@ parts.push(strings[i]);
     }
+    if (svg) { parts.push('</svg>')}
     return parts.join('');
@@ -555,2 +572,10 @@ }
 
+    if (this.template.svg) {
+      const container = fragment.firstChild!;
+      fragment.removeChild(container);
+      const nodes = container.childNodes;
+      for (let i = 0; i < nodes.length; i++) {
+        fragment.appendChild(nodes.item(i));
+      }
+    }
     return fragment;
@@ -557,0 +582,0 @@ }

src/test/lib/lit-extended_test.ts

@@ -25,20 +25,29 @@ /**
   suite('render', () => {
+
+    test('sets properties', () => {
+      const container = document.createElement('div');
+      render(html`<div foo=${123} bar=${456}></div>`, container);
+      const div = container.firstChild!;
+      assert.equal((div as any).foo, 123);
+      assert.equal((div as any).bar, 456);
+    });
+
     test('reuses an existing ExtendedTemplateInstance when available', () => {
-        const container = document.createElement('div');
+      const container = document.createElement('div');
 
-        const t = (content: any) => html`<div>${content}</div>`;
+      const t = (content: any) => html`<div>${content}</div>`;
 
-        render(t('foo'), container);
+      render(t('foo'), container);
 
-        assert.equal(container.children.length, 1);
-        const fooDiv = container.children[0];
-        assert.equal(fooDiv.textContent, 'foo');
+      assert.equal(container.children.length, 1);
+      const fooDiv = container.children[0];
+      assert.equal(fooDiv.textContent, 'foo');
 
-        render(t('bar'), container);
+      render(t('bar'), container);
 
-        assert.equal(container.children.length, 1);
-        const barDiv = container.children[0];
-        assert.equal(barDiv.textContent, 'bar');
+      assert.equal(container.children.length, 1);
+      const barDiv = container.children[0];
+      assert.equal(barDiv.textContent, 'bar');
 
-        assert.equal(fooDiv, barDiv);
+      assert.equal(fooDiv, barDiv);
     });
@@ -45,0 +54,0 @@

test/lib/lit-extended_test.js

@@ -21,2 +21,9 @@ /**
     suite('render', () => {
+        test('sets properties', () => {
+            const container = document.createElement('div');
+            render(html `<div foo=${123} bar=${456}></div>`, container);
+            const div = container.firstChild;
+            assert.equal(div.foo, 123);
+            assert.equal(div.bar, 456);
+        });
         test('reuses an existing ExtendedTemplateInstance when available', () => {
@@ -23,0 +30,0 @@ const container = document.createElement('div');

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

Total package byte prevSize

863847

increased by0.91%

Number of package files

75

increased by2.74%

Lines of code

4968

increased by4.19%

No dependency changes