Socket
Socket
Sign inDemoInstall

lit-html

Package Overview
Dependencies
Maintainers
1
Versions
102
Alerts
File Explorer

Advanced tools

npm Scripts
License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.3.0 to 0.4.0

lib/labs/repeat.d.ts
lib/labs/repeat.js
lib/labs/repeat.js.map
lib/test/labs/lit-extended_test.d.ts
lib/test/labs/lit-extended_test.js
lib/test/labs/lit-extended_test.js.map
lib/test/labs/repeat_test.d.ts
lib/test/labs/repeat_test.js
lib/test/labs/repeat_test.js.map
src/labs/repeat.ts
src/test/labs/lit-extended_test.ts
src/test/labs/repeat_test.ts

2

lib/labs/lit-extended.d.ts

@@ -44,3 +44,3 @@ /**

*/
export declare function renderExtendedTo(result: TemplateResult, container: Element | DocumentFragment): void;
export declare function render(result: TemplateResult, container: Element | DocumentFragment): void;
export declare class ExtendedTemplateInstance extends TemplateInstance {

@@ -47,0 +47,0 @@ _createPart(templatePart: TemplatePart, node: Node): Part;

19

lib/labs/lit-extended.js

@@ -44,13 +44,18 @@ /**

*/
export function renderExtendedTo(result, container) {
export function render(result, container) {
let instance = container.__templateInstance;
if (instance === undefined) {
instance = new ExtendedTemplateInstance(result.template);
const fragment = instance._clone();
if (instance !== undefined &&
instance.template === result.template &&
instance instanceof ExtendedTemplateInstance) {
instance.update(result.values);
container.appendChild(fragment);
return;
}
else {
instance.update(result.values);
instance = new ExtendedTemplateInstance(result.template);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(result.values);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(fragment);
}

@@ -57,0 +62,0 @@ export class ExtendedTemplateInstance extends TemplateInstance {

15

lib/lit-html.d.ts

@@ -14,9 +14,11 @@ /**

constructor(template: Template, values: any[]);
/**
* Renders this template to a container. To update a container with new values,
* reevaluate the template literal and call `renderTo` of the new result.
*/
renderTo(container: Element | DocumentFragment): void;
}
/**
* Renders a template to a container.
*
* To update a container with new values, reevaluate the template literal and
* call `render` with the new result.
*/
export declare function render(result: TemplateResult, container: Element | DocumentFragment): void;
/**
* A placeholder for a dynamic expression in an HTML template.

@@ -74,3 +76,3 @@ *

setValue(value: any): void;
clear(): void;
clear(startNode?: Node): void;
}

@@ -83,2 +85,3 @@ export declare class TemplateInstance {

constructor(template: Template);
readonly template: Template;
update(values: any[]): void;

@@ -85,0 +88,0 @@ _clone(): DocumentFragment;

66

lib/lit-html.js

@@ -39,19 +39,25 @@ /**

}
/**
* Renders this template to a container. To update a container with new values,
* reevaluate the template literal and call `renderTo` of the new result.
*/
renderTo(container) {
let instance = container.__templateInstance;
if (instance === undefined) {
instance = new TemplateInstance(this.template);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(this.values);
container.appendChild(fragment);
}
else {
instance.update(this.values);
}
}
/**
* Renders a template to a container.
*
* To update a container with new values, reevaluate the template literal and
* call `render` with the new result.
*/
export function render(result, container) {
let instance = container.__templateInstance;
if (instance !== undefined &&
instance.template === result.template &&
instance instanceof TemplateInstance) {
instance.update(result.values);
return;
}
instance = new TemplateInstance(result.template);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(result.values);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(fragment);
}

@@ -273,7 +279,5 @@ const exprMarker = '{{}}';

// up any residual nodes from a previously longer iterable.
const range = document.createRange();
range.setStartBefore(itemPart.endNode);
range.setEndBefore(this.endNode);
range.deleteContents();
range.detach();
// Remove previousSibling, since we want itemPart.endNode to be
// removed as part of the clear operation.
this.clear(itemPart.endNode.previousSibling);
itemPart.endNode = this.endNode;

@@ -302,2 +306,6 @@ }

}
else if (this.startNode.nextSibling === this.endNode.previousSibling &&
this.startNode.nextSibling.nodeType === Node.TEXT_NODE) {
this.startNode.nextSibling.textContent = value;
}
else {

@@ -311,9 +319,10 @@ this.clear();

}
clear() {
clear(startNode = this.startNode) {
this._previousValue = undefined;
const range = document.createRange();
range.setStartAfter(this.startNode);
range.setEndBefore(this.endNode);
range.deleteContents();
range.detach();
let node = startNode.nextSibling;
while (node !== null && node !== this.endNode) {
let next = node.nextSibling;
node.parentNode.removeChild(node);
node = next;
}
}

@@ -326,2 +335,5 @@ }

}
get template() {
return this._template;
}
update(values) {

@@ -328,0 +340,0 @@ let valueIndex = 0;

126

lib/test/lit-html_test.js

@@ -16,3 +16,3 @@ /**

/// <reference path="../../node_modules/@types/chai/index.d.ts" />
import { html, TemplateResult, TemplateInstance, NodePart, AttributePart } from '../lit-html.js';
import { html, render, TemplateResult, TemplateInstance, NodePart, AttributePart } from '../lit-html.js';
const assert = chai.assert;

@@ -44,3 +44,3 @@ suite('lit-html', () => {

const result = html `
<div
<div
someProp="${1}"

@@ -72,5 +72,5 @@ a-nother="${2}"

};
ul(['a', 'b', 'c']).renderTo(container);
render(ul(['a', 'b', 'c']), container);
assert.equal(container.innerHTML, '<ul><li>a</li><li>b</li><li>c</li></ul>');
ul(['x', 'y']).renderTo(container);
render(ul(['x', 'y']), container);
assert.equal(container.innerHTML, '<ul><li>x</li><li>y</li></ul>');

@@ -83,3 +83,3 @@ });

const container = document.createElement('div');
html `<div>${'foo'}</div>`.renderTo(container);
render(html `<div>${'foo'}</div>`, container);
assert.equal(container.innerHTML, '<div>foo</div>');

@@ -89,3 +89,3 @@ });

const container = document.createElement('div');
html `<div>${123}</div>`.renderTo(container);
render(html `<div>${123}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -95,3 +95,3 @@ });

const container = document.createElement('div');
html `<div>${undefined}</div>`.renderTo(container);
render(html `<div>${undefined}</div>`, container);
assert.equal(container.innerHTML, '<div></div>');

@@ -101,3 +101,3 @@ });

const container = document.createElement('div');
html `<div>${null}</div>`.renderTo(container);
render(html `<div>${null}</div>`, container);
assert.equal(container.innerHTML, '<div></div>');

@@ -107,3 +107,3 @@ });

const container = document.createElement('div');
html `<div>${(_) => 123}</div>`.renderTo(container);
render(html `<div>${(_) => 123}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -113,3 +113,3 @@ });

const container = document.createElement('div');
html `<div>${(_) => { throw new Error('e'); }}</div>`.renderTo(container);
render(html `<div>${(_) => { throw new Error('e'); }}</div>`, container);
assert.equal(container.innerHTML, '<div></div>');

@@ -119,3 +119,3 @@ });

const container = document.createElement('div');
html `<div>${[1, 2, 3]}</div>`.renderTo(container);
render(html `<div>${[1, 2, 3]}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -126,3 +126,3 @@ });

const partial = html `<h1>${'foo'}</h1>`;
html `${partial}${'bar'}`.renderTo(container);
render(html `${partial}${'bar'}`, container);
assert.equal(container.innerHTML, '<h1>foo</h1>bar');

@@ -133,3 +133,3 @@ });

const t = html `${'a'},${'b'},${'c'}`;
t.renderTo(container);
render(t, container);
assert.equal(container.innerHTML, 'a,b,c');

@@ -140,3 +140,3 @@ });

// const partial = html`<h1>${'foo'}</h1>`;
// html`${partial}${'bar'}${partial}${'baz'}qux`.renderTo(container);
// html`${partial}${'bar'}${partial}${'baz'}qux`, container);
// assert.equal(container.innerHTML, '<h1>foo</h1>bar<h1>foo</h1>bazqux');

@@ -146,3 +146,3 @@ // });

const container = document.createElement('div');
html `<div>${[1, 2, 3].map((i) => html `${i}`)}</div>`.renderTo(container);
render(html `<div>${[1, 2, 3].map((i) => html `${i}`)}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -153,3 +153,3 @@ });

const child = document.createElement('p');
html `<div>${child}</div>`.renderTo(container);
render(html `<div>${child}</div>`, container);
assert.equal(container.innerHTML, '<div><p></p></div>');

@@ -164,3 +164,3 @@ });

];
html `<div>${children}</div>`.renderTo(container);
render(html `<div>${children}</div>`, container);
assert.equal(container.innerHTML, '<div><p></p><a></a><span></span></div>');

@@ -170,3 +170,3 @@ });

const container = document.createElement('div');
html `<div foo="${'bar'}"></div>`.renderTo(container);
render(html `<div foo="${'bar'}"></div>`, container);
assert.equal(container.innerHTML, '<div foo="bar"></div>');

@@ -176,3 +176,3 @@ });

const container = document.createElement('div');
html `<div foo=${'bar'}></div>`.renderTo(container);
render(html `<div foo=${'bar'}></div>`, container);
assert.equal(container.innerHTML, '<div foo="bar"></div>');

@@ -182,3 +182,3 @@ });

const container = document.createElement('div');
html `<div foo="1${'bar'}2${'baz'}3"></div>`.renderTo(container);
render(html `<div foo="1${'bar'}2${'baz'}3"></div>`, container);
assert.equal(container.innerHTML, '<div foo="1bar2baz3"></div>');

@@ -188,3 +188,3 @@ });

const container = document.createElement('div');
html `<div foo=${(_) => 123}></div>`.renderTo(container);
render(html `<div foo=${(_) => 123}></div>`, container);
assert.equal(container.innerHTML, '<div foo="123"></div>');

@@ -194,3 +194,3 @@ });

const container = document.createElement('div');
html `<div foo=${[1, 2, 3]}></div>`.renderTo(container);
render(html `<div foo=${[1, 2, 3]}></div>`, container);
assert.equal(container.innerHTML, '<div foo="123"></div>');

@@ -200,3 +200,3 @@ });

const container = document.createElement('div');
html `<div foo="${'bar'}">${'baz'}</div>`.renderTo(container);
render(html `<div foo="${'bar'}">${'baz'}</div>`, container);
assert.equal(container.innerHTML, '<div foo="bar">baz</div>');

@@ -206,3 +206,3 @@ });

const container = document.createElement('div');
html `<div>${'baz'}</div><div foo="${'bar'}"></div>`.renderTo(container);
render(html `<div>${'baz'}</div><div foo="${'bar'}"></div>`, container);
assert.equal(container.innerHTML, '<div>baz</div><div foo="bar"></div>');

@@ -212,8 +212,7 @@ });

const container = document.createElement('div');
html `
render(html `
<div foo="${'bar'}">
${'baz'}
<p>${'qux'}</p>
</div>`
.renderTo(container);
</div>`, container);
assert.equal(container.innerHTML, `<div foo="bar">

@@ -228,4 +227,4 @@ baz

let foo = 'aaa';
const render = () => html `<div>${foo}</div>`;
render().renderTo(container);
const t = () => html `<div>${foo}</div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div>aaa</div>');

@@ -235,3 +234,3 @@ const div = container.firstChild;

foo = 'bbb';
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>bbb</div>');

@@ -246,7 +245,7 @@ const div2 = container.firstChild;

let bar = 'bar';
const render = () => html `<div>${foo}${bar}</div>`;
render().renderTo(container);
const t = () => html `<div>${foo}${bar}</div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div>foobar</div>');
foo = 'bbb';
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>bbbbar</div>');

@@ -258,7 +257,7 @@ });

let bar = 'bar';
const render = () => html `<div a="${foo}:${bar}"></div>`;
render().renderTo(container);
const t = () => html `<div a="${foo}:${bar}"></div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div a="foo:bar"></div>');
foo = 'bbb';
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div a="bbb:bar"></div>');

@@ -271,3 +270,3 @@ });

let baz = 'baz';
const render = (x) => {
const t = (x) => {
let partial;

@@ -282,8 +281,8 @@ if (x) {

};
render(true).renderTo(container);
render(t(true), container);
assert.equal(container.innerHTML, '<h1>foo</h1>baz');
foo = 'bbb';
render(true).renderTo(container);
render(t(true), container);
assert.equal(container.innerHTML, '<h1>bbb</h1>baz');
render(false).renderTo(container);
render(t(false), container);
assert.equal(container.innerHTML, '<h2>bar</h2>baz');

@@ -295,6 +294,6 @@ });

const t = () => html `<div>${items}</div>`;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>123</div>');
items = [3, 2, 1];
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>321</div>');

@@ -306,9 +305,9 @@ });

const t = () => html `<div>${child}<div></div></div>`;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div><p></p><div></div></div>');
child = undefined;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div><div></div></div>');
child = new Text('foo');
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>foo<div></div></div>');

@@ -324,11 +323,24 @@ });

const t = () => html `<div>${children}</div>`;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div><p></p><a></a><span></span></div>');
children = null;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div></div>');
children = new Text('foo');
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>foo</div>');
});
test('overwrites an existing TemplateInstance if one exists and does ' +
'not have a matching Template', () => {
const container = document.createElement('div');
render(html `<div>foo</div>`, container);
assert.equal(container.children.length, 1);
const fooDiv = container.children[0];
assert.equal(fooDiv.textContent, 'foo');
render(html `<div>bar</div>`, container);
assert.equal(container.children.length, 1);
const barDiv = container.children[0];
assert.equal(barDiv.textContent, 'bar');
assert.notEqual(fooDiv, barDiv);
});
});

@@ -475,2 +487,20 @@ suite('extensibility', () => {

});
test('updates a simple value to a complex one', () => {
let value = 'foo';
const t = () => html `<div>${value}</div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div>foo</div>');
value = html `<span>bar</span>`;
render(t(), container);
assert.equal(container.innerHTML, '<div><span>bar</span></div>');
});
test('updates a complex value to a simple one', () => {
let value = html `<span>bar</span>`;
const t = () => html `<div>${value}</div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div><span>bar</span></div>');
value = 'foo';
render(t(), container);
assert.equal(container.innerHTML, '<div>foo</div>');
});
test('updates when called multiple times with simple values', () => {

@@ -477,0 +507,0 @@ part.setValue('abc');

2

package.json
{
"name": "lit-html",
"version": "0.3.0",
"version": "0.4.0",
"description": "HTML template literals in JavaScript",

@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

36

README.md

@@ -12,6 +12,6 @@ # lit-html

const container = document.querySelector('#container');
sayHello('Steve').renderTo(container);
render(sayHello('Steve'), container);
// renders <div>Hello Steve!</div> to container
sayHello('Kevin').renderTo(container);
render(sayHello('Kevin'), container);
// updates to <div>Hello Kevin!</div>, but only updates the ${name} part

@@ -50,6 +50,6 @@ ```

* It uses JavaScript modules, and there's no build set up yet, so out-of-the-box it only runs in Safari 10.1 and Chrome Canary (with the Experimental Web Platform features flag on).
* It has a growing test suite, but it has only been run manually on Chrome Canary and Safari 10.1.
* It has a growing test suite, but it has only been run manually on Chrome Canary, Safari 10.1 and Firefox 54 with modules enabled.
* Much more test coverage is needed for complex templates, especially template composition and Function and Iterable values.
* It has not been benchmarked thouroughly yet.
* The API is likely to change, especially `renderTo()` and the `Template` class used by extensions.
* The API is likely to change.

@@ -68,3 +68,3 @@ Even without a build configuration, `lit-html` minified with `babili` and gzipped measures in at less than 1.5k. We will strive to keep the size extremely small.

let count = 1;
const render = () => html`count: ${count++}`;
const countTemplate = () => html`count: ${count++}`;
```

@@ -96,3 +96,3 @@

#### `TemplateResult.renderTo(container)`:
#### `render(result, container)`:

@@ -103,3 +103,3 @@ 1. Look for an existing `TemplateInstance` on `container`

3. If the instance is from the same `Template`, remove its content from `container`.
3. If the instance is not from the same `Template`, remove its content from `container`.

@@ -297,6 +297,2 @@ 4. If an instance doesn't exist for the node, create one from the `Template`:

* Method `renderTo(container: Element): void`
Renders a `TemplateResult`'s template to an element using the result's values. For re-renders, only the dynamic parts are updated.
* Property `template: Template`

@@ -310,2 +306,6 @@

### Function `render(result: TemplateResult, container: Element): void`
Renders a `TemplateResult`'s template to an element using the result's values. For re-renders, only the dynamic parts are updated.
### Class `Template`

@@ -337,3 +337,3 @@

#### `If(cond, then, else)`
#### `when(cond, then, else)`

@@ -346,3 +346,3 @@ An if-directive that retains the `then` and `else` _instances_ for fast switching between the two states, like `<dom-if>`.

const render = () => html`
${If(state === 'loading',
${when(state === 'loading',
html`<div>Loading...</div>`,

@@ -353,3 +353,3 @@ html`<p>${message}</p>`)}

#### `Repeat(items, keyfn, template)`
#### `repeat(items, keyfn, template)`

@@ -363,3 +363,3 @@ A loop that supports efficient re-ordering by using item keys.

<ul>
${Repeat(items, (i) => i.id, (i, index) => html`
${repeat(items, (i) => i.id, (i, index) => html`
<li>${index}: ${i.name}</li>`)}

@@ -370,4 +370,6 @@ </ul>

#### `Guard(guardExpr, template)`
Note, initial version is in `lib/labs/repeat.ts`: https://github.com/PolymerLabs/lit-html/blob/master/src/labs/repeat.ts
#### `guard(guardExpr, template)`
Only re-renders an instance if the guard expression has changed since the last render.

@@ -381,4 +383,4 @@

const render = () => html`
<div>Current User: ${Guard(user, () => user.getProfile())}</div>
<div>Current User: ${guard(user, () => user.getProfile())}</div>
`;
```

45

src/labs/lit-extended.ts

@@ -18,7 +18,7 @@ /**

/**
*
*
* @param result Renders a `TemplateResult` to a container using an
* `ExtendedTemplateInstance`, which allows templates to set properties and
* event handlers.
*
*
* Properties are set by default, instead of attributes. Attribute names in

@@ -30,29 +30,38 @@ * lit-html templates preserve case, so properties are case sensitive. If an

* interpolation.
*
*
* To set an attribute instead of a property, append a `$` suffix to the
* attribute name.
*
*
* Example:
*
*
* html`<button class$="primary">Buy Now</button>`
*
*
* To set an event handler, prefix the attribute name with `on-` and use a
* function to return the handler, so that the event handler itself is not
* called as a template directive.
*
*
* Example:
*
*
* html`<button on-click=${_=> this.onClickHandler}>Buy Now</button>`
*
*
*/
export function renderExtendedTo(result: TemplateResult, container: Element|DocumentFragment) {
let instance = container.__templateInstance as TemplateInstance;
if (instance === undefined) {
instance = new ExtendedTemplateInstance(result.template);
const fragment = instance._clone();
export function render(result: TemplateResult, container: Element|DocumentFragment) {
let instance = container.__templateInstance as any;
if (instance !== undefined &&
instance.template === result.template &&
instance instanceof ExtendedTemplateInstance) {
instance.update(result.values);
container.appendChild(fragment);
} else {
instance.update(result.values);
return;
}
instance = new ExtendedTemplateInstance(result.template);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(result.values);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(fragment);
}

@@ -121,3 +130,3 @@

console.error('event handlers must be functions', listener);
return;
return;
}

@@ -124,0 +133,0 @@ if (listener === this._listener) {

36

src/labs/README.md
# lit-html Labs
Add-ons for lit-html
This folder contains examples of extending lit-html via custom `TemplateInstance` subclasses.
## lit-extended.ts
An example of extending lit-html via a custom `TemplateInstance` subclasses.
The `render` function exported by `lit-extended.ts` supports setting properties
and event handlers in templates:
```javascript
import {render} from '../lit-html/lib/labs/lit-extended.js';
function t = (data) => html`
<button
class$="${data.isPrimary ? 'primary' : 'secondary'}"
on-click="${()=>data.onClick}">
${data.label}
</button>
<!-- property and event names are case-sensitive -->
<my-element someProperty=${data.someProperty}></my-element>
`;
```
## repeat.ts
Implements a keyed-repeat that reuses DOM generated for items when possible.
```javascript
import {repeat} from '../lit-html/lib/labs/repeat.js';
function t = (data) => html`
<ul>
${repeat(data, (d) => d.id, (d) => html`
<li>${d.title}</li>
`)}
</ul>
`;
```

79

src/lit-html.ts

@@ -45,20 +45,29 @@ /**

}
}
/**
* Renders this template to a container. To update a container with new values,
* reevaluate the template literal and call `renderTo` of the new result.
*/
renderTo(container: Element|DocumentFragment) {
let instance = container.__templateInstance as TemplateInstance;
if (instance === undefined) {
instance = new TemplateInstance(this.template);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(this.values);
container.appendChild(fragment);
} else {
instance.update(this.values);
}
/**
* Renders a template to a container.
*
* To update a container with new values, reevaluate the template literal and
* call `render` with the new result.
*/
export function render(result: TemplateResult, container: Element|DocumentFragment) {
let instance = container.__templateInstance as any;
if (instance !== undefined &&
instance.template === result.template &&
instance instanceof TemplateInstance) {
instance.update(result.values);
return;
}
instance = new TemplateInstance(result.template);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(result.values);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(fragment);
}

@@ -70,7 +79,7 @@

* A placeholder for a dynamic expression in an HTML template.
*
*
* There are two built-in part types: AttributePart and NodePart. NodeParts
* always represent a single dynamic expression, while AttributeParts may
* represent as many expressions are contained in the attribute.
*
*
* A Template's parts are mutable, so parts can be replaced or modified

@@ -80,3 +89,3 @@ * (possibly to implement different template semantics). The contract is that

* always consume the correct number of values in their `update()` method.
*
*
* TODO(justinfagnani): That requirement is a little fragile. A

@@ -244,3 +253,3 @@ * TemplateInstance could instead be more careful about which values it gives

}
get size(): number {

@@ -314,7 +323,6 @@ return this.strings.length - 1;

// up any residual nodes from a previously longer iterable.
const range = document.createRange();
range.setStartBefore(itemPart.endNode);
range.setEndBefore(this.endNode);
range.deleteContents();
range.detach();
// Remove previousSibling, since we want itemPart.endNode to be
// removed as part of the clear operation.
this.clear(itemPart.endNode.previousSibling!);
itemPart.endNode = this.endNode;

@@ -342,2 +350,5 @@ }

this._previousValue = itemParts;
} else if (this.startNode.nextSibling! === this.endNode.previousSibling! &&
this.startNode.nextSibling!.nodeType === Node.TEXT_NODE) {
this.startNode.nextSibling!.textContent = value;
} else {

@@ -352,11 +363,13 @@ this.clear();

clear() {
clear(startNode: Node = this.startNode) {
this._previousValue = undefined;
const range = document.createRange();
range.setStartAfter(this.startNode);
range.setEndBefore(this.endNode);
range.deleteContents();
range.detach();
let node = startNode.nextSibling!;
while (node !== null && node !== this.endNode) {
let next = node.nextSibling!;
node.parentNode!.removeChild(node);
node = next;
}
}
}

@@ -374,2 +387,6 @@

get template() {
return this._template;
}
update(values: any[]) {

@@ -376,0 +393,0 @@ let valueIndex = 0;

144

src/test/lit-html_test.ts

@@ -18,3 +18,3 @@ /**

import {html, TemplateResult, TemplatePart, TemplateInstance, NodePart, Part, AttributePart, Template} from '../lit-html.js';
import {html, render, TemplateResult, TemplatePart, TemplateInstance, NodePart, Part, AttributePart, Template} from '../lit-html.js';

@@ -54,3 +54,3 @@ const assert = chai.assert;

const result = html`
<div
<div
someProp="${1}"

@@ -84,5 +84,5 @@ a-nother="${2}"

};
ul(['a', 'b', 'c']).renderTo(container);
render(ul(['a', 'b', 'c']), container);
assert.equal(container.innerHTML, '<ul><li>a</li><li>b</li><li>c</li></ul>');
ul(['x', 'y']).renderTo(container);
render(ul(['x', 'y']), container);
assert.equal(container.innerHTML, '<ul><li>x</li><li>y</li></ul>');

@@ -99,3 +99,3 @@ });

const container = document.createElement('div');
html`<div>${'foo'}</div>`.renderTo(container);
render(html`<div>${'foo'}</div>`, container);
assert.equal(container.innerHTML, '<div>foo</div>');

@@ -106,3 +106,3 @@ });

const container = document.createElement('div');
html`<div>${123}</div>`.renderTo(container);
render(html`<div>${123}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -113,3 +113,3 @@ });

const container = document.createElement('div');
html`<div>${undefined}</div>`.renderTo(container);
render(html`<div>${undefined}</div>`, container);
assert.equal(container.innerHTML, '<div></div>');

@@ -120,3 +120,3 @@ });

const container = document.createElement('div');
html`<div>${null}</div>`.renderTo(container);
render(html`<div>${null}</div>`, container);
assert.equal(container.innerHTML, '<div></div>');

@@ -127,3 +127,3 @@ });

const container = document.createElement('div');
html`<div>${(_:any)=>123}</div>`.renderTo(container);
render(html`<div>${(_:any)=>123}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -134,3 +134,3 @@ });

const container = document.createElement('div');
html`<div>${(_:any)=>{throw new Error('e')}}</div>`.renderTo(container);
render(html`<div>${(_:any)=>{throw new Error('e')}}</div>`, container);
assert.equal(container.innerHTML, '<div></div>');

@@ -141,3 +141,3 @@ });

const container = document.createElement('div');
html`<div>${[1,2,3]}</div>`.renderTo(container);
render(html`<div>${[1,2,3]}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -149,3 +149,3 @@ });

const partial = html`<h1>${'foo'}</h1>`;
html`${partial}${'bar'}`.renderTo(container);
render(html`${partial}${'bar'}`, container);
assert.equal(container.innerHTML, '<h1>foo</h1>bar');

@@ -157,3 +157,3 @@ });

const t = html`${'a'},${'b'},${'c'}`;
t.renderTo(container);
render(t, container);
assert.equal(container.innerHTML, 'a,b,c');

@@ -165,3 +165,3 @@ });

// const partial = html`<h1>${'foo'}</h1>`;
// html`${partial}${'bar'}${partial}${'baz'}qux`.renderTo(container);
// html`${partial}${'bar'}${partial}${'baz'}qux`, container);
// assert.equal(container.innerHTML, '<h1>foo</h1>bar<h1>foo</h1>bazqux');

@@ -172,3 +172,3 @@ // });

const container = document.createElement('div');
html`<div>${[1,2,3].map((i)=>html`${i}`)}</div>`.renderTo(container);
render(html`<div>${[1,2,3].map((i)=>html`${i}`)}</div>`, container);
assert.equal(container.innerHTML, '<div>123</div>');

@@ -180,3 +180,3 @@ });

const child = document.createElement('p');
html`<div>${child}</div>`.renderTo(container);
render(html`<div>${child}</div>`, container);
assert.equal(container.innerHTML, '<div><p></p></div>');

@@ -192,3 +192,3 @@ });

];
html`<div>${children}</div>`.renderTo(container);
render(html`<div>${children}</div>`, container);
assert.equal(container.innerHTML, '<div><p></p><a></a><span></span></div>');

@@ -199,3 +199,3 @@ });

const container = document.createElement('div');
html`<div foo="${'bar'}"></div>`.renderTo(container);
render(html`<div foo="${'bar'}"></div>`, container);
assert.equal(container.innerHTML, '<div foo="bar"></div>');

@@ -206,3 +206,3 @@ });

const container = document.createElement('div');
html`<div foo=${'bar'}></div>`.renderTo(container);
render(html`<div foo=${'bar'}></div>`, container);
assert.equal(container.innerHTML, '<div foo="bar"></div>');

@@ -213,3 +213,3 @@ });

const container = document.createElement('div');
html`<div foo="1${'bar'}2${'baz'}3"></div>`.renderTo(container);
render(html`<div foo="1${'bar'}2${'baz'}3"></div>`, container);
assert.equal(container.innerHTML, '<div foo="1bar2baz3"></div>');

@@ -220,3 +220,3 @@ });

const container = document.createElement('div');
html`<div foo=${(_:any)=>123}></div>`.renderTo(container);
render(html`<div foo=${(_:any)=>123}></div>`, container);
assert.equal(container.innerHTML, '<div foo="123"></div>');

@@ -227,3 +227,3 @@ });

const container = document.createElement('div');
html`<div foo=${[1,2,3]}></div>`.renderTo(container);
render(html`<div foo=${[1,2,3]}></div>`, container);
assert.equal(container.innerHTML, '<div foo="123"></div>');

@@ -234,3 +234,3 @@ });

const container = document.createElement('div');
html`<div foo="${'bar'}">${'baz'}</div>`.renderTo(container);
render(html`<div foo="${'bar'}">${'baz'}</div>`, container);
assert.equal(container.innerHTML, '<div foo="bar">baz</div>');

@@ -241,3 +241,3 @@ });

const container = document.createElement('div');
html`<div>${'baz'}</div><div foo="${'bar'}"></div>`.renderTo(container);
render(html`<div>${'baz'}</div><div foo="${'bar'}"></div>`, container);
assert.equal(container.innerHTML, '<div>baz</div><div foo="bar"></div>');

@@ -248,8 +248,7 @@ });

const container = document.createElement('div');
html`
render(html`
<div foo="${'bar'}">
${'baz'}
<p>${'qux'}</p>
</div>`
.renderTo(container);
</div>`, container);
assert.equal(container.innerHTML, `<div foo="bar">

@@ -268,11 +267,11 @@ baz

const render = () => html`<div>${foo}</div>`;
const t = () => html`<div>${foo}</div>`;
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>aaa</div>');
const div = container.firstChild as HTMLDivElement;
assert.equal(div.tagName, 'DIV');
foo = 'bbb';
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>bbb</div>');

@@ -289,9 +288,9 @@ const div2 = container.firstChild as HTMLDivElement;

const render = () => html`<div>${foo}${bar}</div>`;
const t = () => html`<div>${foo}${bar}</div>`;
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>foobar</div>');
foo = 'bbb';
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>bbbbar</div>');

@@ -305,9 +304,9 @@ });

const render = () => html`<div a="${foo}:${bar}"></div>`;
const t = () => html`<div a="${foo}:${bar}"></div>`;
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div a="foo:bar"></div>');
foo = 'bbb';
render().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div a="bbb:bar"></div>');

@@ -322,3 +321,3 @@ });

const render = (x: boolean) => {
const t = (x: boolean) => {
let partial;

@@ -334,10 +333,10 @@ if (x) {

render(true).renderTo(container);
render(t(true), container);
assert.equal(container.innerHTML, '<h1>foo</h1>baz');
foo = 'bbb';
render(true).renderTo(container);
render(t(true), container);
assert.equal(container.innerHTML, '<h1>bbb</h1>baz');
render(false).renderTo(container);
render(t(false), container);
assert.equal(container.innerHTML, '<h2>bar</h2>baz');

@@ -350,7 +349,7 @@ });

const t = () => html`<div>${items}</div>`;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>123</div>');
items = [3, 2, 1];
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>321</div>');

@@ -363,11 +362,11 @@ });

const t = () => html`<div>${child}<div></div></div>`;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div><p></p><div></div></div>');
child = undefined;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div><div></div></div>');
child = new Text('foo');
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>foo<div></div></div>');

@@ -384,14 +383,33 @@ });

const t = () => html`<div>${children}</div>`
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div><p></p><a></a><span></span></div>');
children = null;
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div></div>');
children = new Text('foo');
t().renderTo(container);
render(t(), container);
assert.equal(container.innerHTML, '<div>foo</div>');
});
test('overwrites an existing TemplateInstance if one exists and does ' +
'not have a matching Template', () => {
const container = document.createElement('div');
render(html`<div>foo</div>`, container);
assert.equal(container.children.length, 1);
const fooDiv = container.children[0];
assert.equal(fooDiv.textContent, 'foo');
render(html`<div>bar</div>`, container);
assert.equal(container.children.length, 1);
const barDiv = container.children[0];
assert.equal(barDiv.textContent, 'bar');
assert.notEqual(fooDiv, barDiv);
});
});

@@ -566,2 +584,24 @@

test('updates a simple value to a complex one', () => {
let value: string|TemplateResult = 'foo';
const t = () => html`<div>${value}</div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div>foo</div>');
value = html`<span>bar</span>`;
render(t(), container);
assert.equal(container.innerHTML, '<div><span>bar</span></div>');
});
test('updates a complex value to a simple one', () => {
let value: string|TemplateResult = html`<span>bar</span>`;
const t = () => html`<div>${value}</div>`;
render(t(), container);
assert.equal(container.innerHTML, '<div><span>bar</span></div>');
value = 'foo';
render(t(), container);
assert.equal(container.innerHTML, '<div>foo</div>');
});
test('updates when called multiple times with simple values', () => {

@@ -568,0 +608,0 @@ part.setValue('abc');

lib/repeat.d.ts
lib/repeat.js
lib/repeat.js.map
lib/test/repeat_test.d.ts
lib/test/repeat_test.js
lib/test/repeat_test.js.map
src/repeat.ts
src/test/repeat_test.ts
lib/labs/lit-extended.js.map

Sorry, the diff of this file is not supported yet

lib/lit-html.js.map

Sorry, the diff of this file is not supported yet

lib/test/lit-html_test.js.map

Sorry, the diff of this file is not supported yet

test/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc