lit-html
Advanced tools
Comparing version 1.0.0-rc.2 to 1.0.0
@@ -19,2 +19,10 @@ # Change Log | ||
## [1.0.0] - 2019-02-05 | ||
### Changed | ||
* Tons of docs updates ([#746](https://github.com/Polymer/lit-html/pull/746)), ([#675](https://github.com/Polymer/lit-html/pull/675)), ([#724](https://github.com/Polymer/lit-html/pull/724)), ([#753](https://github.com/Polymer/lit-html/pull/753)), ([#764](https://github.com/Polymer/lit-html/pull/764)), ([#763](https://github.com/Polymer/lit-html/pull/763)), ([#765](https://github.com/Polymer/lit-html/pull/765)), ([#767](https://github.com/Polymer/lit-html/pull/767)), ([#768](https://github.com/Polymer/lit-html/pull/768)), ([#734](https://github.com/Polymer/lit-html/pull/734)), ([#771](https://github.com/Polymer/lit-html/pull/771)), ([#766](https://github.com/Polymer/lit-html/pull/766)), ([#773](https://github.com/Polymer/lit-html/pull/773)), ([#770](https://github.com/Polymer/lit-html/pull/770)), ([#769](https://github.com/Polymer/lit-html/pull/769)), ([#777](https://github.com/Polymer/lit-html/pull/777)), ([#776](https://github.com/Polymer/lit-html/pull/776)), ([#754](https://github.com/Polymer/lit-html/pull/754)), ([#779](https://github.com/Polymer/lit-html/pull/779)) | ||
### Added | ||
* Global version of `lit-html` on window ([#790](https://github.com/Polymer/lit-html/pull/790)). | ||
### Fixed | ||
* Removed use of `any` outside of test code ([#741](https://github.com/Polymer/lit-html/pull/741)). | ||
## [1.0.0-rc.2] - 2019-01-09 | ||
@@ -43,3 +51,3 @@ ### Changed | ||
* Removed Promise as a supposed node-position value type. ([#555](https://github.com/Polymer/lit-html/pull/555)) | ||
* Added a minimal `<template>` polyfill. | ||
* Added a minimal `<template>` polyfill. | ||
### Removed | ||
@@ -46,0 +54,0 @@ * [Breaking] Removed the `when()` directive. Users may achieve similar behavior by wrapping a ternary with the `cache()` directive. |
@@ -32,3 +32,3 @@ /** | ||
*/ | ||
export declare const asyncAppend: <T>(value: AsyncIterable<T>, mapper?: ((v: T, index?: number | undefined) => any) | undefined) => (part: Part) => Promise<void>; | ||
export declare const asyncAppend: (value: AsyncIterable<{}>, mapper?: ((v: {}, index?: number | undefined) => unknown) | undefined) => (part: Part) => Promise<void>; | ||
//# sourceMappingURL=async-append.d.ts.map |
@@ -72,2 +72,4 @@ /** | ||
if (mapper !== undefined) { | ||
// This is safe because T must otherwise be treated as unknown by | ||
// the rest of the system. | ||
v = mapper(v, i); | ||
@@ -74,0 +76,0 @@ } |
@@ -33,3 +33,3 @@ /** | ||
*/ | ||
export declare const asyncReplace: <T>(value: AsyncIterable<T>, mapper?: ((v: T, index?: number | undefined) => any) | undefined) => (part: Part) => Promise<void>; | ||
export declare const asyncReplace: (value: AsyncIterable<{}>, mapper?: ((v: {}, index?: number | undefined) => unknown) | undefined) => (part: Part) => Promise<void>; | ||
//# sourceMappingURL=async-replace.d.ts.map |
@@ -74,2 +74,4 @@ /** | ||
if (mapper !== undefined) { | ||
// This is safe because T must otherwise be treated as unknown by | ||
// the rest of the system. | ||
v = mapper(v, i); | ||
@@ -76,0 +78,0 @@ } |
@@ -29,3 +29,3 @@ /** | ||
*/ | ||
export declare const cache: (value: any) => (part: Part) => void; | ||
export declare const cache: (value: unknown) => (part: Part) => void; | ||
//# sourceMappingURL=cache.d.ts.map |
@@ -21,3 +21,3 @@ /** | ||
*/ | ||
export declare const ifDefined: (value: any) => (part: Part) => void; | ||
export declare const ifDefined: (value: unknown) => (part: Part) => void; | ||
//# sourceMappingURL=if-defined.d.ts.map |
@@ -15,4 +15,4 @@ /** | ||
import { DirectiveFn } from '../lib/directive.js'; | ||
export declare type KeyFn<T> = (item: T, index: number) => any; | ||
export declare type ItemTemplate<T> = (item: T, index: number) => any; | ||
export declare type KeyFn<T> = (item: T, index: number) => unknown; | ||
export declare type ItemTemplate<T> = (item: T, index: number) => unknown; | ||
/** | ||
@@ -19,0 +19,0 @@ * A directive that repeats a series of values (usually `TemplateResults`) |
@@ -87,12 +87,12 @@ /** | ||
} | ||
// Old part & key lists are retrieved from the last update (associated | ||
// with the part for this instance of the directive) | ||
// Old part & key lists are retrieved from the last update | ||
// (associated with the part for this instance of the directive) | ||
const oldParts = partListCache.get(containerPart) || []; | ||
const oldKeys = keyListCache.get(containerPart) || []; | ||
// New part list will be built up as we go (either reused from old parts | ||
// or created for new keys in this update). This is saved in the above | ||
// cache at the end of the update. | ||
// New part list will be built up as we go (either reused from | ||
// old parts or created for new keys in this update). This is | ||
// saved in the above cache at the end of the update. | ||
const newParts = []; | ||
// New value list is eagerly generated from items along with a parallel | ||
// array indicating its key. | ||
// New value list is eagerly generated from items along with a | ||
// parallel array indicating its key. | ||
const newValues = []; | ||
@@ -106,6 +106,6 @@ const newKeys = []; | ||
} | ||
// Maps from key to index for current and previous update; these are | ||
// generated lazily only when needed as a performance optimization, | ||
// since they are only required for multiple non-contiguous changes in | ||
// the list, which are less common. | ||
// Maps from key to index for current and previous update; these | ||
// are generated lazily only when needed as a performance | ||
// optimization, since they are only required for multiple | ||
// non-contiguous changes in the list, which are less common. | ||
let newKeyToIndexMap; | ||
@@ -118,13 +118,15 @@ let oldKeyToIndexMap; | ||
let newTail = newValues.length - 1; | ||
// Overview of O(n) reconciliation algorithm (general approach based on | ||
// ideas found in ivi, vue, snabbdom, etc.): | ||
// Overview of O(n) reconciliation algorithm (general approach | ||
// based on ideas found in ivi, vue, snabbdom, etc.): | ||
// | ||
// * We start with the list of old parts and new values (and arrays of | ||
// their respective keys), head/tail pointers into each, and we build | ||
// up the new list of parts by updating (and when needed, moving) old | ||
// parts or creating new ones. The initial scenario might look like | ||
// this (for brevity of the diagrams, the numbers in the array reflect | ||
// keys associated with the old parts or new values, although keys and | ||
// parts/values are actually stored in parallel arrays indexed using | ||
// the same head/tail pointers): | ||
// * We start with the list of old parts and new values (and | ||
// arrays of | ||
// their respective keys), head/tail pointers into each, and | ||
// we build up the new list of parts by updating (and when | ||
// needed, moving) old parts or creating new ones. The initial | ||
// scenario might look like this (for brevity of the diagrams, | ||
// the numbers in the array reflect keys associated with the | ||
// old parts or new values, although keys and parts/values are | ||
// actually stored in parallel arrays indexed using the same | ||
// head/tail pointers): | ||
// | ||
@@ -134,148 +136,169 @@ // oldHead v v oldTail | ||
// newParts: [ , , , , , , ] | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] <- reflects the user's new item | ||
// order | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] <- reflects the user's new | ||
// item order | ||
// newHead ^ ^ newTail | ||
// | ||
// * Iterate old & new lists from both sides, updating, swapping, or | ||
// removing parts at the head/tail locations until neither head nor | ||
// tail can move. | ||
// * Iterate old & new lists from both sides, updating, | ||
// swapping, or | ||
// removing parts at the head/tail locations until neither | ||
// head nor tail can move. | ||
// | ||
// * Example below: keys at head pointers match, so update old part 0 | ||
// in- | ||
// place (no need to move it) and record part 0 in the `newParts` | ||
// list. The last thing we do is advance the `oldHead` and `newHead` | ||
// pointers (will be reflected in the next diagram). | ||
// * Example below: keys at head pointers match, so update old | ||
// part 0 in- | ||
// place (no need to move it) and record part 0 in the | ||
// `newParts` list. The last thing we do is advance the | ||
// `oldHead` and `newHead` pointers (will be reflected in the | ||
// next diagram). | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , ] <- heads matched: update 0 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead & newHead | ||
// newParts: [0, , , , , , ] <- heads matched: update 0 | ||
// and newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead | ||
// & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Example below: head pointers don't match, but tail pointers do, so | ||
// update part 6 in place (no need to move it), and record part 6 in | ||
// the `newParts` list. Last, advance the `oldTail` and `oldHead` | ||
// pointers. | ||
// * Example below: head pointers don't match, but tail pointers | ||
// do, so | ||
// update part 6 in place (no need to move it), and record | ||
// part 6 in the `newParts` list. Last, advance the `oldTail` | ||
// and `oldHead` pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , 6] <- tails matched: update 6 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldTail & newTail | ||
// newParts: [0, , , , , , 6] <- tails matched: update 6 | ||
// and newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldTail | ||
// & newTail | ||
// newHead ^ ^ newTail | ||
// | ||
// * If neither head nor tail match; next check if one of the old | ||
// head/tail | ||
// items was removed. We first need to generate the reverse map of new | ||
// keys to index (`newKeyToIndexMap`), which is done once lazily as a | ||
// performance optimization, since we only hit this case if multiple | ||
// non-contiguous changes were made. Note that for contiguous removal | ||
// anywhere in the list, the head and tails would advance from either | ||
// end and pass each other before we get to this case and removals | ||
// * If neither head nor tail match; next check if one of the | ||
// old head/tail | ||
// items was removed. We first need to generate the reverse | ||
// map of new keys to index (`newKeyToIndexMap`), which is | ||
// done once lazily as a performance optimization, since we | ||
// only hit this case if multiple non-contiguous changes were | ||
// made. Note that for contiguous removal anywhere in the | ||
// list, the head and tails would advance from either end and | ||
// pass each other before we get to this case and removals | ||
// would be handled in the final while loop without needing to | ||
// generate the map. | ||
// | ||
// * Example below: The key at `oldTail` was removed (no longer in the | ||
// `newKeyToIndexMap`), so remove that part from the DOM and advance | ||
// just the `oldTail` pointer. | ||
// * Example below: The key at `oldTail` was removed (no longer | ||
// in the | ||
// `newKeyToIndexMap`), so remove that part from the DOM and | ||
// advance just the `oldTail` pointer. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , 6] <- 5 not in new map; remove 5 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance oldTail | ||
// newParts: [0, , , , , , 6] <- 5 not in new map; remove | ||
// 5 and newKeys: [0, 2, 1, 4, 3, 7, 6] advance oldTail | ||
// newHead ^ ^ newTail | ||
// | ||
// * Once head and tail cannot move, any mismatches are due to either | ||
// new or | ||
// moved items; if a new key is in the previous "old key to old index" | ||
// map, move the old part to the new location, otherwise create and | ||
// insert a new part. Note that when moving an old part we null its | ||
// position in the oldParts array if it lies between the head and tail | ||
// so we know to skip it when the pointers get there. | ||
// * Once head and tail cannot move, any mismatches are due to | ||
// either new or | ||
// moved items; if a new key is in the previous "old key to | ||
// old index" map, move the old part to the new location, | ||
// otherwise create and insert a new part. Note that when | ||
// moving an old part we null its position in the oldParts | ||
// array if it lies between the head and tail so we know to | ||
// skip it when the pointers get there. | ||
// | ||
// * Example below: neither head nor tail match, and neither were | ||
// removed; | ||
// so find the `newHead` key in the `oldKeyToIndexMap`, and move that | ||
// old part's DOM into the next head position (before | ||
// `oldParts[oldHead]`). Last, null the part in the `oldPart` array | ||
// since it was somewhere in the remaining oldParts still to be | ||
// scanned (between the head and tail pointers) so that we know to | ||
// skip that old part on future iterations. | ||
// * Example below: neither head nor tail match, and neither | ||
// were removed; | ||
// so find the `newHead` key in the `oldKeyToIndexMap`, and | ||
// move that old part's DOM into the next head position | ||
// (before `oldParts[oldHead]`). Last, null the part in the | ||
// `oldPart` array since it was somewhere in the remaining | ||
// oldParts still to be scanned (between the head and tail | ||
// pointers) so that we know to skip that old part on future | ||
// iterations. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, , , , , 6] <- stuck; update & move 2 into | ||
// place newKeys: [0, 2, 1, 4, 3, 7, 6] and advance newHead | ||
// newParts: [0, 2, , , , , 6] <- stuck; update & move 2 | ||
// into place newKeys: [0, 2, 1, 4, 3, 7, 6] and advance | ||
// newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Note that for moves/insertions like the one above, a part inserted | ||
// at | ||
// * Note that for moves/insertions like the one above, a part | ||
// inserted at | ||
// the head pointer is inserted before the current | ||
// `oldParts[oldHead]`, and a part inserted at the tail pointer is | ||
// inserted before `newParts[newTail+1]`. The seeming asymmetry lies | ||
// in the fact that new parts are moved into place outside in, so to | ||
// the right of the head pointer are old parts, and to the right of | ||
// the tail pointer are new parts. | ||
// `oldParts[oldHead]`, and a part inserted at the tail | ||
// pointer is inserted before `newParts[newTail+1]`. The | ||
// seeming asymmetry lies in the fact that new parts are moved | ||
// into place outside in, so to the right of the head pointer | ||
// are old parts, and to the right of the tail pointer are new | ||
// parts. | ||
// | ||
// * We always restart back from the top of the algorithm, allowing | ||
// matching | ||
// * We always restart back from the top of the algorithm, | ||
// allowing matching | ||
// and simple updates in place to continue... | ||
// | ||
// * Example below: the head pointers once again match, so simply update | ||
// part 1 and record it in the `newParts` array. Last, advance both | ||
// head pointers. | ||
// * Example below: the head pointers once again match, so | ||
// simply update | ||
// part 1 and record it in the `newParts` array. Last, | ||
// advance both head pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, , , , 6] <- heads matched; update 1 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead & newHead | ||
// newParts: [0, 2, 1, , , , 6] <- heads matched; update 1 | ||
// and newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead | ||
// & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * As mentioned above, items that were moved as a result of being | ||
// stuck | ||
// (the final else clause in the code below) are marked with null, so | ||
// we always advance old pointers over these so we're comparing the | ||
// next actual old value on either end. | ||
// * As mentioned above, items that were moved as a result of | ||
// being stuck | ||
// (the final else clause in the code below) are marked with | ||
// null, so we always advance old pointers over these so we're | ||
// comparing the next actual old value on either end. | ||
// | ||
// * Example below: `oldHead` is null (already placed in newParts), so | ||
// * Example below: `oldHead` is null (already placed in | ||
// newParts), so | ||
// advance `oldHead`. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] // old head already used; advance | ||
// newParts: [0, 2, 1, , , , 6] // oldHead | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] // old head already used; | ||
// advance newParts: [0, 2, 1, , , , 6] // oldHead newKeys: | ||
// [0, 2, 1, 4, 3, 7, 6] | ||
// newHead ^ ^ newTail | ||
// | ||
// * Note it's not critical to mark old parts as null when they are | ||
// moved | ||
// from head to tail or tail to head, since they will be outside the | ||
// pointer range and never visited again. | ||
// * Note it's not critical to mark old parts as null when they | ||
// are moved | ||
// from head to tail or tail to head, since they will be | ||
// outside the pointer range and never visited again. | ||
// | ||
// * Example below: Here the old tail key matches the new head key, so | ||
// the part at the `oldTail` position and move its DOM to the new | ||
// head position (before `oldParts[oldHead]`). Last, advance `oldTail` | ||
// and `newHead` pointers. | ||
// * Example below: Here the old tail key matches the new head | ||
// key, so | ||
// the part at the `oldTail` position and move its DOM to the | ||
// new head position (before `oldParts[oldHead]`). Last, | ||
// advance `oldTail` and `newHead` pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, , , 6] <- old tail matches new head: | ||
// update newKeys: [0, 2, 1, 4, 3, 7, 6] & move 4, advance oldTail | ||
// & newHead | ||
// newParts: [0, 2, 1, 4, , , 6] <- old tail matches new | ||
// head: update newKeys: [0, 2, 1, 4, 3, 7, 6] & move 4, | ||
// advance oldTail & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Example below: Old and new head keys match, so update the old head | ||
// part in place, and advance the `oldHead` and `newHead` pointers. | ||
// * Example below: Old and new head keys match, so update the | ||
// old head | ||
// part in place, and advance the `oldHead` and `newHead` | ||
// pointers. | ||
// | ||
// oldHead v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, 3, ,6] <- heads match: update 3 and | ||
// advance newKeys: [0, 2, 1, 4, 3, 7, 6] oldHead & newHead | ||
// newParts: [0, 2, 1, 4, 3, ,6] <- heads match: update 3 | ||
// and advance newKeys: [0, 2, 1, 4, 3, 7, 6] oldHead & | ||
// newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Once the new or old pointers move past each other then all we have | ||
// left is additions (if old list exhausted) or removals (if new list | ||
// exhausted). Those are handled in the final while loops at the end. | ||
// * Once the new or old pointers move past each other then all | ||
// we have | ||
// left is additions (if old list exhausted) or removals (if | ||
// new list exhausted). Those are handled in the final while | ||
// loops at the end. | ||
// | ||
// * Example below: `oldHead` exceeded `oldTail`, so we're done with the | ||
// main loop. Create the remaining part and insert it at the new head | ||
// position, and the update is complete. | ||
// * Example below: `oldHead` exceeded `oldTail`, so we're done | ||
// with the | ||
// main loop. Create the remaining part and insert it at the | ||
// new head position, and the update is complete. | ||
// | ||
@@ -288,26 +311,31 @@ // (oldHead > oldTail) | ||
// | ||
// * Note that the order of the if/else clauses is not important to the | ||
// algorithm, as long as the null checks come first (to ensure we're | ||
// always working on valid old parts) and that the final else clause | ||
// comes last (since that's where the expensive moves occur). The | ||
// order of remaining clauses is is just a simple guess at which cases | ||
// will be most common. | ||
// * Note that the order of the if/else clauses is not important | ||
// to the | ||
// algorithm, as long as the null checks come first (to ensure | ||
// we're always working on valid old parts) and that the final | ||
// else clause comes last (since that's where the expensive | ||
// moves occur). The order of remaining clauses is is just a | ||
// simple guess at which cases will be most common. | ||
// | ||
// * TODO(kschaaf) Note, we could calculate the longest increasing | ||
// subsequence (LIS) of old items in new position, and only move those | ||
// not in the LIS set. However that costs O(nlogn) time and adds a bit | ||
// more code, and only helps make rare types of mutations require | ||
// fewer moves. The above handles removes, adds, reversal, swaps, and | ||
// single moves of contiguous items in linear time, in the minimum | ||
// number of moves. As the number of multiple moves where LIS might | ||
// help approaches a random shuffle, the LIS optimization becomes less | ||
// helpful, so it seems not worth the code at this point. Could | ||
// reconsider if a compelling case arises. | ||
// * TODO(kschaaf) Note, we could calculate the longest | ||
// increasing | ||
// subsequence (LIS) of old items in new position, and only | ||
// move those not in the LIS set. However that costs O(nlogn) | ||
// time and adds a bit more code, and only helps make rare | ||
// types of mutations require fewer moves. The above handles | ||
// removes, adds, reversal, swaps, and single moves of | ||
// contiguous items in linear time, in the minimum number of | ||
// moves. As the number of multiple moves where LIS might help | ||
// approaches a random shuffle, the LIS optimization becomes | ||
// less helpful, so it seems not worth the code at this point. | ||
// Could reconsider if a compelling case arises. | ||
while (oldHead <= oldTail && newHead <= newTail) { | ||
if (oldParts[oldHead] === null) { | ||
// `null` means old part at head has already been used below; skip | ||
// `null` means old part at head has already been used | ||
// below; skip | ||
oldHead++; | ||
} | ||
else if (oldParts[oldTail] === null) { | ||
// `null` means old part at tail has already been used below; skip | ||
// `null` means old part at tail has already been used | ||
// below; skip | ||
oldTail--; | ||
@@ -347,4 +375,4 @@ } | ||
if (newKeyToIndexMap === undefined) { | ||
// Lazily generate key-to-index maps, used for removals & moves | ||
// below | ||
// Lazily generate key-to-index maps, used for removals & | ||
// moves below | ||
newKeyToIndexMap = generateMap(newKeys, newHead, newTail); | ||
@@ -364,8 +392,10 @@ oldKeyToIndexMap = generateMap(oldKeys, oldHead, oldTail); | ||
else { | ||
// Any mismatches at this point are due to additions or moves; see | ||
// if we have an old part we can reuse and move into place | ||
// Any mismatches at this point are due to additions or | ||
// moves; see if we have an old part we can reuse and move | ||
// into place | ||
const oldIndex = oldKeyToIndexMap.get(newKeys[newHead]); | ||
const oldPart = oldIndex !== undefined ? oldParts[oldIndex] : null; | ||
if (oldPart === null) { | ||
// No old part for this value; create a new one and insert it | ||
// No old part for this value; create a new one and | ||
// insert it | ||
const newPart = createAndInsertPart(containerPart, oldParts[oldHead]); | ||
@@ -377,6 +407,7 @@ updatePart(newPart, newValues[newHead]); | ||
// Reuse old part | ||
newParts[newHead] = updatePart(oldPart, newValues[newHead]); | ||
newParts[newHead] = | ||
updatePart(oldPart, newValues[newHead]); | ||
insertPartBefore(containerPart, oldPart, oldParts[oldHead]); | ||
// This marks the old part as having been used, so that it will | ||
// be skipped in the first two checks above | ||
// This marks the old part as having been used, so that | ||
// it will be skipped in the first two checks above | ||
oldParts[oldIndex] = null; | ||
@@ -390,4 +421,4 @@ } | ||
while (newHead <= newTail) { | ||
// For all remaining additions, we insert before last new tail, | ||
// since old pointers are no longer valid | ||
// For all remaining additions, we insert before last new | ||
// tail, since old pointers are no longer valid | ||
const newPart = createAndInsertPart(containerPart, newParts[newTail + 1]); | ||
@@ -394,0 +425,0 @@ updatePart(newPart, newValues[newHead]); |
@@ -62,2 +62,3 @@ /** | ||
if (name.indexOf('-') === -1) { | ||
// tslint:disable-next-line:no-any | ||
style[name] = null; | ||
@@ -73,2 +74,3 @@ } | ||
if (name.indexOf('-') === -1) { | ||
// tslint:disable-next-line:no-any | ||
style[name] = styleInfo[name]; | ||
@@ -75,0 +77,0 @@ } |
@@ -22,3 +22,3 @@ /** | ||
*/ | ||
export declare const unsafeHTML: (value: any) => (part: Part) => void; | ||
export declare const unsafeHTML: (value: unknown) => (part: Part) => void; | ||
//# sourceMappingURL=unsafe-html.d.ts.map |
@@ -39,3 +39,3 @@ /** | ||
const template = document.createElement('template'); | ||
template.innerHTML = value; | ||
template.innerHTML = value; // innerHTML casts to string internally | ||
const fragment = document.importNode(template.content, true); | ||
@@ -42,0 +42,0 @@ part.setValue(fragment); |
@@ -34,3 +34,3 @@ /** | ||
*/ | ||
export declare const until: (...args: any[]) => (part: Part) => void; | ||
export declare const until: (...args: unknown[]) => (part: Part) => void; | ||
//# sourceMappingURL=until.d.ts.map |
@@ -53,3 +53,4 @@ /** | ||
// Render non-Promise values immediately | ||
if (isPrimitive(value) || typeof value.then !== 'function') { | ||
if (isPrimitive(value) || | ||
typeof value.then !== 'function') { | ||
part.setValue(value); | ||
@@ -63,3 +64,4 @@ state.lastRenderedIndex = i; | ||
if (state.lastRenderedIndex !== undefined && | ||
typeof value.then === 'function' && value === previousValues[i]) { | ||
typeof value.then === 'function' && | ||
value === previousValues[i]) { | ||
continue; | ||
@@ -66,0 +68,0 @@ } |
@@ -18,2 +18,3 @@ /** | ||
import { Part } from './part.js'; | ||
export declare type DirectiveFactory = (...args: any[]) => object; | ||
export declare type DirectiveFn = (part: Part) => void; | ||
@@ -40,4 +41,4 @@ /** | ||
*/ | ||
export declare const directive: <F extends Function>(f: F) => F; | ||
export declare const isDirective: (o: any) => boolean; | ||
export declare const directive: <F extends DirectiveFactory>(f: F) => F; | ||
export declare const isDirective: (o: unknown) => o is DirectiveFn; | ||
//# sourceMappingURL=directive.d.ts.map |
@@ -35,2 +35,3 @@ /** | ||
*/ | ||
// tslint:disable-next-line:no-any | ||
export const directive = (f) => ((...args) => { | ||
@@ -41,3 +42,5 @@ const d = f(...args); | ||
}); | ||
export const isDirective = (o) => typeof o === 'function' && directives.has(o); | ||
export const isDirective = (o) => { | ||
return typeof o === 'function' && directives.has(o); | ||
}; | ||
//# sourceMappingURL=directive.js.map |
@@ -15,5 +15,2 @@ /** | ||
/** | ||
* @module lit-html | ||
*/ | ||
/** | ||
* True if the custom elements polyfill is in use. | ||
@@ -20,0 +17,0 @@ */ |
@@ -15,9 +15,7 @@ /** | ||
/** | ||
* @module lit-html | ||
*/ | ||
/** | ||
* True if the custom elements polyfill is in use. | ||
*/ | ||
export const isCEPolyfill = window.customElements !== undefined && | ||
window.customElements.polyfillWrapFlushCallback !== undefined; | ||
window.customElements.polyfillWrapFlushCallback !== | ||
undefined; | ||
/** | ||
@@ -24,0 +22,0 @@ * Reparents nodes, starting from `startNode` (inclusive) to `endNode` |
@@ -22,3 +22,3 @@ /** | ||
export interface Part { | ||
value: any; | ||
value: unknown; | ||
/** | ||
@@ -28,3 +28,3 @@ * Sets the current part value, but does not write it to the DOM. | ||
*/ | ||
setValue(value: any): void; | ||
setValue(value: unknown): void; | ||
/** | ||
@@ -39,3 +39,3 @@ * Commits the current part value, cause it to actually be written to the DOM. | ||
*/ | ||
export declare const noChange: {}; | ||
export declare const noChange: object; | ||
/** | ||
@@ -42,0 +42,0 @@ * A sentinel value that signals a NodePart to fully clear its content. |
@@ -16,3 +16,4 @@ /** | ||
import { RenderOptions } from './render-options.js'; | ||
export declare const isPrimitive: (value: any) => boolean; | ||
export declare type Primitive = null | undefined | boolean | number | string | Symbol | bigint; | ||
export declare const isPrimitive: (value: unknown) => value is Primitive; | ||
/** | ||
@@ -33,3 +34,3 @@ * Sets attribute values for AttributeParts, so that the value is only set once | ||
protected _createPart(): AttributePart; | ||
protected _getValue(): any; | ||
protected _getValue(): unknown; | ||
commit(): void; | ||
@@ -39,5 +40,5 @@ } | ||
committer: AttributeCommitter; | ||
value: any; | ||
value: unknown; | ||
constructor(comitter: AttributeCommitter); | ||
setValue(value: any): void; | ||
setValue(value: unknown): void; | ||
commit(): void; | ||
@@ -49,4 +50,4 @@ } | ||
endNode: Node; | ||
value: any; | ||
_pendingValue: any; | ||
value: unknown; | ||
_pendingValue: unknown; | ||
constructor(options: RenderOptions); | ||
@@ -79,3 +80,3 @@ /** | ||
insertAfterPart(ref: NodePart): void; | ||
setValue(value: any): void; | ||
setValue(value: unknown): void; | ||
commit(): void; | ||
@@ -100,6 +101,6 @@ private _insert; | ||
strings: string[]; | ||
value: any; | ||
_pendingValue: any; | ||
value: unknown; | ||
_pendingValue: unknown; | ||
constructor(element: Element, name: string, strings: string[]); | ||
setValue(value: any): void; | ||
setValue(value: unknown): void; | ||
commit(): void; | ||
@@ -120,3 +121,3 @@ } | ||
protected _createPart(): PropertyPart; | ||
_getValue(): any; | ||
_getValue(): unknown; | ||
commit(): void; | ||
@@ -126,2 +127,3 @@ } | ||
} | ||
declare type EventHandlerWithOptions = EventListenerOrEventListenerObject & Partial<AddEventListenerOptions>; | ||
export declare class EventPart implements Part { | ||
@@ -131,11 +133,12 @@ element: Element; | ||
eventContext?: EventTarget; | ||
value: any; | ||
value: undefined | EventHandlerWithOptions; | ||
_options?: AddEventListenerOptions; | ||
_pendingValue: any; | ||
_pendingValue: undefined | EventHandlerWithOptions; | ||
_boundHandleEvent: (event: Event) => void; | ||
constructor(element: Element, eventName: string, eventContext?: EventTarget); | ||
setValue(value: any): void; | ||
setValue(value: undefined | EventHandlerWithOptions): void; | ||
commit(): void; | ||
handleEvent(event: Event): void; | ||
} | ||
export {}; | ||
//# sourceMappingURL=parts.d.ts.map |
@@ -23,4 +23,6 @@ /** | ||
import { createMarker } from './template.js'; | ||
export const isPrimitive = (value) => (value === null || | ||
!(typeof value === 'object' || typeof value === 'function')); | ||
export const isPrimitive = (value) => { | ||
return (value === null || | ||
!(typeof value === 'object' || typeof value === 'function')); | ||
}; | ||
/** | ||
@@ -57,3 +59,5 @@ * Sets attribute values for AttributeParts, so that the value is only set once | ||
if (v != null && | ||
(Array.isArray(v) || typeof v !== 'string' && v[Symbol.iterator])) { | ||
(Array.isArray(v) || | ||
// tslint:disable-next-line:no-any | ||
typeof v !== 'string' && v[Symbol.iterator])) { | ||
for (const t of v) { | ||
@@ -175,3 +179,5 @@ text += typeof t === 'string' ? t : String(t); | ||
} | ||
else if (Array.isArray(value) || value[Symbol.iterator]) { | ||
else if (Array.isArray(value) || | ||
// tslint:disable-next-line:no-any | ||
value[Symbol.iterator]) { | ||
this._commitIterable(value); | ||
@@ -216,3 +222,4 @@ } | ||
const template = this.options.templateFactory(value); | ||
if (this.value && this.value.template === template) { | ||
if (this.value instanceof TemplateInstance && | ||
this.value.template === template) { | ||
this.value.update(value.values); | ||
@@ -349,2 +356,3 @@ } | ||
this.dirty = false; | ||
// tslint:disable-next-line:no-any | ||
this.element[this.name] = this._getValue(); | ||
@@ -368,3 +376,5 @@ } | ||
}; | ||
// tslint:disable-next-line:no-any | ||
window.addEventListener('test', options, options); | ||
// tslint:disable-next-line:no-any | ||
window.removeEventListener('test', options, options); | ||
@@ -371,0 +381,0 @@ } |
@@ -28,5 +28,5 @@ /** | ||
constructor(template: Template, processor: TemplateProcessor, options: RenderOptions); | ||
update(values: any[]): void; | ||
update(values: unknown[]): void; | ||
_clone(): DocumentFragment; | ||
} | ||
//# sourceMappingURL=template-instance.d.ts.map |
@@ -21,6 +21,6 @@ /** | ||
strings: TemplateStringsArray; | ||
values: any[]; | ||
values: unknown[]; | ||
type: string; | ||
processor: TemplateProcessor; | ||
constructor(strings: TemplateStringsArray, values: any[], type: string, processor: TemplateProcessor); | ||
constructor(strings: TemplateStringsArray, values: unknown[], type: string, processor: TemplateProcessor); | ||
/** | ||
@@ -27,0 +27,0 @@ * Returns a string of HTML used to create a `<template>` element. |
@@ -27,2 +27,7 @@ /** | ||
export { createMarker, isTemplatePartActive, Template } from './lib/template.js'; | ||
declare global { | ||
interface Window { | ||
litHtmlVersions: string[]; | ||
} | ||
} | ||
/** | ||
@@ -32,3 +37,3 @@ * Interprets a template literal as an HTML template that can efficiently | ||
*/ | ||
export declare const html: (strings: TemplateStringsArray, ...values: any[]) => TemplateResult; | ||
export declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult; | ||
/** | ||
@@ -38,3 +43,3 @@ * Interprets a template literal as an SVG template that can efficiently | ||
*/ | ||
export declare const svg: (strings: TemplateStringsArray, ...values: any[]) => SVGTemplateResult; | ||
export declare const svg: (strings: TemplateStringsArray, ...values: unknown[]) => SVGTemplateResult; | ||
//# sourceMappingURL=lit-html.d.ts.map |
@@ -44,2 +44,6 @@ /** | ||
export { createMarker, isTemplatePartActive, Template } from './lib/template.js'; | ||
// IMPORTANT: do not change the property name or the assignment expression. | ||
// This line will be used in regexes to search for lit-html usage. | ||
// TODO(justinfagnani): inject version number at build time | ||
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.0.0'); | ||
/** | ||
@@ -46,0 +50,0 @@ * Interprets a template literal as an HTML template that can efficiently |
{ | ||
"name": "lit-html", | ||
"version": "1.0.0-rc.2", | ||
"version": "1.0.0", | ||
"description": "HTML template literals in JavaScript", | ||
@@ -30,3 +30,4 @@ "license": "BSD-3-Clause", | ||
"lint": "tslint --project ./", | ||
"prepare": "npm run build" | ||
"prepare": "npm run build", | ||
"publish-dev": "npm test && VERSION=${npm_package_version%-*}-dev.`git rev-parse --short HEAD` && npm version --no-git-tag-version $VERSION && npm publish --tag dev" | ||
}, | ||
@@ -46,3 +47,3 @@ "author": "The Polymer Authors", | ||
"tslint": "^5.11.0", | ||
"typescript": "^3.1.1", | ||
"typescript": "^3.2.2", | ||
"uglify-es": "^3.3.5", | ||
@@ -49,0 +50,0 @@ "wct-mocha": "^1.0.0", |
@@ -28,2 +28,3 @@ /** | ||
const contentDoc = document.implementation.createHTMLDocument('template'); | ||
// tslint:disable-next-line:no-any | ||
const upgrade = (template) => { | ||
@@ -30,0 +31,0 @@ template.content = contentDoc.createDocumentFragment(); |
@@ -1,4 +0,1 @@ | ||
> ## 🛠 Status: In Development | ||
> lit-html is currently in development. It's on the fast track to a 1.0 release, so we encourage you to use it and give us your feedback, but there are things that haven't been finalized yet and you can expect some changes. | ||
# lit-html | ||
@@ -5,0 +2,0 @@ Efficient, Expressive, Extensible HTML templates in JavaScript |
@@ -36,3 +36,3 @@ /** | ||
<T>(value: AsyncIterable<T>, | ||
mapper?: (v: T, index?: number) => any) => async (part: Part) => { | ||
mapper?: (v: T, index?: number) => unknown) => async (part: Part) => { | ||
if (!(part instanceof NodePart)) { | ||
@@ -71,3 +71,5 @@ throw new Error('asyncAppend can only be used in text bindings'); | ||
if (mapper !== undefined) { | ||
v = mapper(v, i); | ||
// This is safe because T must otherwise be treated as unknown by | ||
// the rest of the system. | ||
v = mapper(v, i) as T; | ||
} | ||
@@ -74,0 +76,0 @@ |
@@ -36,3 +36,3 @@ /** | ||
export const asyncReplace = directive( | ||
<T>(value: AsyncIterable<T>, mapper?: (v: T, index?: number) => any) => | ||
<T>(value: AsyncIterable<T>, mapper?: (v: T, index?: number) => unknown) => | ||
async (part: Part) => { | ||
@@ -74,3 +74,5 @@ if (!(part instanceof NodePart)) { | ||
if (mapper !== undefined) { | ||
v = mapper(v, i); | ||
// This is safe because T must otherwise be treated as unknown by | ||
// the rest of the system. | ||
v = mapper(v, i) as T; | ||
} | ||
@@ -77,0 +79,0 @@ |
@@ -40,3 +40,3 @@ /** | ||
*/ | ||
export const cache = directive((value: any) => (part: Part) => { | ||
export const cache = directive((value: unknown) => (part: Part) => { | ||
if (!(part instanceof NodePart)) { | ||
@@ -43,0 +43,0 @@ throw new Error('cache can only be used in text bindings'); |
@@ -23,3 +23,3 @@ /** | ||
*/ | ||
export const ifDefined = directive((value: any) => (part: Part) => { | ||
export const ifDefined = directive((value: unknown) => (part: Part) => { | ||
if (value === undefined && part instanceof AttributePart) { | ||
@@ -26,0 +26,0 @@ if (value !== part.value) { |
@@ -18,4 +18,4 @@ /** | ||
export type KeyFn<T> = (item: T, index: number) => any; | ||
export type ItemTemplate<T> = (item: T, index: number) => any; | ||
export type KeyFn<T> = (item: T, index: number) => unknown; | ||
export type ItemTemplate<T> = (item: T, index: number) => unknown; | ||
@@ -91,331 +91,370 @@ // Helper functions for manipulating parts | ||
*/ | ||
export const repeat = directive( | ||
<T>(items: Iterable<T>, | ||
keyFnOrTemplate: KeyFn<T>|ItemTemplate<T>, | ||
template?: ItemTemplate<T>): DirectiveFn => { | ||
let keyFn: KeyFn<T>; | ||
if (template === undefined) { | ||
template = keyFnOrTemplate; | ||
} else if (keyFnOrTemplate !== undefined) { | ||
keyFn = keyFnOrTemplate as KeyFn<T>; | ||
} | ||
export const repeat = | ||
directive( | ||
<T>(items: Iterable<T>, | ||
keyFnOrTemplate: KeyFn<T>|ItemTemplate<T>, | ||
template?: ItemTemplate<T>): | ||
DirectiveFn => { | ||
let keyFn: KeyFn<T>; | ||
if (template === undefined) { | ||
template = keyFnOrTemplate; | ||
} else if (keyFnOrTemplate !== undefined) { | ||
keyFn = keyFnOrTemplate as KeyFn<T>; | ||
} | ||
return (containerPart: Part): void => { | ||
if (!(containerPart instanceof NodePart)) { | ||
throw new Error('repeat can only be used in text bindings'); | ||
} | ||
// Old part & key lists are retrieved from the last update (associated | ||
// with the part for this instance of the directive) | ||
const oldParts = partListCache.get(containerPart) || []; | ||
const oldKeys = keyListCache.get(containerPart) || []; | ||
return (containerPart: Part): void => { | ||
if (!(containerPart instanceof NodePart)) { | ||
throw new Error('repeat can only be used in text bindings'); | ||
} | ||
// Old part & key lists are retrieved from the last update | ||
// (associated with the part for this instance of the directive) | ||
const oldParts = partListCache.get(containerPart) || []; | ||
const oldKeys = keyListCache.get(containerPart) || []; | ||
// New part list will be built up as we go (either reused from old parts | ||
// or created for new keys in this update). This is saved in the above | ||
// cache at the end of the update. | ||
const newParts: NodePart[] = []; | ||
// New part list will be built up as we go (either reused from | ||
// old parts or created for new keys in this update). This is | ||
// saved in the above cache at the end of the update. | ||
const newParts: NodePart[] = []; | ||
// New value list is eagerly generated from items along with a parallel | ||
// array indicating its key. | ||
const newValues: unknown[] = []; | ||
const newKeys: unknown[] = []; | ||
let index = 0; | ||
for (const item of items) { | ||
newKeys[index] = keyFn ? keyFn(item, index) : index; | ||
newValues[index] = template !(item, index); | ||
index++; | ||
} | ||
// New value list is eagerly generated from items along with a | ||
// parallel array indicating its key. | ||
const newValues: unknown[] = []; | ||
const newKeys: unknown[] = []; | ||
let index = 0; | ||
for (const item of items) { | ||
newKeys[index] = keyFn ? keyFn(item, index) : index; | ||
newValues[index] = template !(item, index); | ||
index++; | ||
} | ||
// Maps from key to index for current and previous update; these are | ||
// generated lazily only when needed as a performance optimization, | ||
// since they are only required for multiple non-contiguous changes in | ||
// the list, which are less common. | ||
let newKeyToIndexMap!: Map<unknown, number>; | ||
let oldKeyToIndexMap!: Map<unknown, number>; | ||
// Maps from key to index for current and previous update; these | ||
// are generated lazily only when needed as a performance | ||
// optimization, since they are only required for multiple | ||
// non-contiguous changes in the list, which are less common. | ||
let newKeyToIndexMap!: Map<unknown, number>; | ||
let oldKeyToIndexMap!: Map<unknown, number>; | ||
// Head and tail pointers to old parts and new values | ||
let oldHead = 0; | ||
let oldTail = oldParts.length - 1; | ||
let newHead = 0; | ||
let newTail = newValues.length - 1; | ||
// Head and tail pointers to old parts and new values | ||
let oldHead = 0; | ||
let oldTail = oldParts.length - 1; | ||
let newHead = 0; | ||
let newTail = newValues.length - 1; | ||
// Overview of O(n) reconciliation algorithm (general approach based on | ||
// ideas found in ivi, vue, snabbdom, etc.): | ||
// | ||
// * We start with the list of old parts and new values (and arrays of | ||
// their respective keys), head/tail pointers into each, and we build | ||
// up the new list of parts by updating (and when needed, moving) old | ||
// parts or creating new ones. The initial scenario might look like | ||
// this (for brevity of the diagrams, the numbers in the array reflect | ||
// keys associated with the old parts or new values, although keys and | ||
// parts/values are actually stored in parallel arrays indexed using | ||
// the same head/tail pointers): | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [ , , , , , , ] | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] <- reflects the user's new item | ||
// order | ||
// newHead ^ ^ newTail | ||
// | ||
// * Iterate old & new lists from both sides, updating, swapping, or | ||
// removing parts at the head/tail locations until neither head nor | ||
// tail can move. | ||
// | ||
// * Example below: keys at head pointers match, so update old part 0 | ||
// in- | ||
// place (no need to move it) and record part 0 in the `newParts` | ||
// list. The last thing we do is advance the `oldHead` and `newHead` | ||
// pointers (will be reflected in the next diagram). | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , ] <- heads matched: update 0 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Example below: head pointers don't match, but tail pointers do, so | ||
// update part 6 in place (no need to move it), and record part 6 in | ||
// the `newParts` list. Last, advance the `oldTail` and `oldHead` | ||
// pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , 6] <- tails matched: update 6 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldTail & newTail | ||
// newHead ^ ^ newTail | ||
// | ||
// * If neither head nor tail match; next check if one of the old | ||
// head/tail | ||
// items was removed. We first need to generate the reverse map of new | ||
// keys to index (`newKeyToIndexMap`), which is done once lazily as a | ||
// performance optimization, since we only hit this case if multiple | ||
// non-contiguous changes were made. Note that for contiguous removal | ||
// anywhere in the list, the head and tails would advance from either | ||
// end and pass each other before we get to this case and removals | ||
// would be handled in the final while loop without needing to | ||
// generate the map. | ||
// | ||
// * Example below: The key at `oldTail` was removed (no longer in the | ||
// `newKeyToIndexMap`), so remove that part from the DOM and advance | ||
// just the `oldTail` pointer. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , 6] <- 5 not in new map; remove 5 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance oldTail | ||
// newHead ^ ^ newTail | ||
// | ||
// * Once head and tail cannot move, any mismatches are due to either | ||
// new or | ||
// moved items; if a new key is in the previous "old key to old index" | ||
// map, move the old part to the new location, otherwise create and | ||
// insert a new part. Note that when moving an old part we null its | ||
// position in the oldParts array if it lies between the head and tail | ||
// so we know to skip it when the pointers get there. | ||
// | ||
// * Example below: neither head nor tail match, and neither were | ||
// removed; | ||
// so find the `newHead` key in the `oldKeyToIndexMap`, and move that | ||
// old part's DOM into the next head position (before | ||
// `oldParts[oldHead]`). Last, null the part in the `oldPart` array | ||
// since it was somewhere in the remaining oldParts still to be | ||
// scanned (between the head and tail pointers) so that we know to | ||
// skip that old part on future iterations. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, , , , , 6] <- stuck; update & move 2 into | ||
// place newKeys: [0, 2, 1, 4, 3, 7, 6] and advance newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Note that for moves/insertions like the one above, a part inserted | ||
// at | ||
// the head pointer is inserted before the current | ||
// `oldParts[oldHead]`, and a part inserted at the tail pointer is | ||
// inserted before `newParts[newTail+1]`. The seeming asymmetry lies | ||
// in the fact that new parts are moved into place outside in, so to | ||
// the right of the head pointer are old parts, and to the right of | ||
// the tail pointer are new parts. | ||
// | ||
// * We always restart back from the top of the algorithm, allowing | ||
// matching | ||
// and simple updates in place to continue... | ||
// | ||
// * Example below: the head pointers once again match, so simply update | ||
// part 1 and record it in the `newParts` array. Last, advance both | ||
// head pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, , , , 6] <- heads matched; update 1 and | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * As mentioned above, items that were moved as a result of being | ||
// stuck | ||
// (the final else clause in the code below) are marked with null, so | ||
// we always advance old pointers over these so we're comparing the | ||
// next actual old value on either end. | ||
// | ||
// * Example below: `oldHead` is null (already placed in newParts), so | ||
// advance `oldHead`. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] // old head already used; advance | ||
// newParts: [0, 2, 1, , , , 6] // oldHead | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] | ||
// newHead ^ ^ newTail | ||
// | ||
// * Note it's not critical to mark old parts as null when they are | ||
// moved | ||
// from head to tail or tail to head, since they will be outside the | ||
// pointer range and never visited again. | ||
// | ||
// * Example below: Here the old tail key matches the new head key, so | ||
// the part at the `oldTail` position and move its DOM to the new | ||
// head position (before `oldParts[oldHead]`). Last, advance `oldTail` | ||
// and `newHead` pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, , , 6] <- old tail matches new head: | ||
// update newKeys: [0, 2, 1, 4, 3, 7, 6] & move 4, advance oldTail | ||
// & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Example below: Old and new head keys match, so update the old head | ||
// part in place, and advance the `oldHead` and `newHead` pointers. | ||
// | ||
// oldHead v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, 3, ,6] <- heads match: update 3 and | ||
// advance newKeys: [0, 2, 1, 4, 3, 7, 6] oldHead & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Once the new or old pointers move past each other then all we have | ||
// left is additions (if old list exhausted) or removals (if new list | ||
// exhausted). Those are handled in the final while loops at the end. | ||
// | ||
// * Example below: `oldHead` exceeded `oldTail`, so we're done with the | ||
// main loop. Create the remaining part and insert it at the new head | ||
// position, and the update is complete. | ||
// | ||
// (oldHead > oldTail) | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, 3, 7 ,6] <- create and insert 7 | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] | ||
// newHead ^ newTail | ||
// | ||
// * Note that the order of the if/else clauses is not important to the | ||
// algorithm, as long as the null checks come first (to ensure we're | ||
// always working on valid old parts) and that the final else clause | ||
// comes last (since that's where the expensive moves occur). The | ||
// order of remaining clauses is is just a simple guess at which cases | ||
// will be most common. | ||
// | ||
// * TODO(kschaaf) Note, we could calculate the longest increasing | ||
// subsequence (LIS) of old items in new position, and only move those | ||
// not in the LIS set. However that costs O(nlogn) time and adds a bit | ||
// more code, and only helps make rare types of mutations require | ||
// fewer moves. The above handles removes, adds, reversal, swaps, and | ||
// single moves of contiguous items in linear time, in the minimum | ||
// number of moves. As the number of multiple moves where LIS might | ||
// help approaches a random shuffle, the LIS optimization becomes less | ||
// helpful, so it seems not worth the code at this point. Could | ||
// reconsider if a compelling case arises. | ||
// Overview of O(n) reconciliation algorithm (general approach | ||
// based on ideas found in ivi, vue, snabbdom, etc.): | ||
// | ||
// * We start with the list of old parts and new values (and | ||
// arrays of | ||
// their respective keys), head/tail pointers into each, and | ||
// we build up the new list of parts by updating (and when | ||
// needed, moving) old parts or creating new ones. The initial | ||
// scenario might look like this (for brevity of the diagrams, | ||
// the numbers in the array reflect keys associated with the | ||
// old parts or new values, although keys and parts/values are | ||
// actually stored in parallel arrays indexed using the same | ||
// head/tail pointers): | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [ , , , , , , ] | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] <- reflects the user's new | ||
// item order | ||
// newHead ^ ^ newTail | ||
// | ||
// * Iterate old & new lists from both sides, updating, | ||
// swapping, or | ||
// removing parts at the head/tail locations until neither | ||
// head nor tail can move. | ||
// | ||
// * Example below: keys at head pointers match, so update old | ||
// part 0 in- | ||
// place (no need to move it) and record part 0 in the | ||
// `newParts` list. The last thing we do is advance the | ||
// `oldHead` and `newHead` pointers (will be reflected in the | ||
// next diagram). | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , ] <- heads matched: update 0 | ||
// and newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead | ||
// & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Example below: head pointers don't match, but tail pointers | ||
// do, so | ||
// update part 6 in place (no need to move it), and record | ||
// part 6 in the `newParts` list. Last, advance the `oldTail` | ||
// and `oldHead` pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , 6] <- tails matched: update 6 | ||
// and newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldTail | ||
// & newTail | ||
// newHead ^ ^ newTail | ||
// | ||
// * If neither head nor tail match; next check if one of the | ||
// old head/tail | ||
// items was removed. We first need to generate the reverse | ||
// map of new keys to index (`newKeyToIndexMap`), which is | ||
// done once lazily as a performance optimization, since we | ||
// only hit this case if multiple non-contiguous changes were | ||
// made. Note that for contiguous removal anywhere in the | ||
// list, the head and tails would advance from either end and | ||
// pass each other before we get to this case and removals | ||
// would be handled in the final while loop without needing to | ||
// generate the map. | ||
// | ||
// * Example below: The key at `oldTail` was removed (no longer | ||
// in the | ||
// `newKeyToIndexMap`), so remove that part from the DOM and | ||
// advance just the `oldTail` pointer. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, 2, 3, 4, 5, 6] | ||
// newParts: [0, , , , , , 6] <- 5 not in new map; remove | ||
// 5 and newKeys: [0, 2, 1, 4, 3, 7, 6] advance oldTail | ||
// newHead ^ ^ newTail | ||
// | ||
// * Once head and tail cannot move, any mismatches are due to | ||
// either new or | ||
// moved items; if a new key is in the previous "old key to | ||
// old index" map, move the old part to the new location, | ||
// otherwise create and insert a new part. Note that when | ||
// moving an old part we null its position in the oldParts | ||
// array if it lies between the head and tail so we know to | ||
// skip it when the pointers get there. | ||
// | ||
// * Example below: neither head nor tail match, and neither | ||
// were removed; | ||
// so find the `newHead` key in the `oldKeyToIndexMap`, and | ||
// move that old part's DOM into the next head position | ||
// (before `oldParts[oldHead]`). Last, null the part in the | ||
// `oldPart` array since it was somewhere in the remaining | ||
// oldParts still to be scanned (between the head and tail | ||
// pointers) so that we know to skip that old part on future | ||
// iterations. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, , , , , 6] <- stuck; update & move 2 | ||
// into place newKeys: [0, 2, 1, 4, 3, 7, 6] and advance | ||
// newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Note that for moves/insertions like the one above, a part | ||
// inserted at | ||
// the head pointer is inserted before the current | ||
// `oldParts[oldHead]`, and a part inserted at the tail | ||
// pointer is inserted before `newParts[newTail+1]`. The | ||
// seeming asymmetry lies in the fact that new parts are moved | ||
// into place outside in, so to the right of the head pointer | ||
// are old parts, and to the right of the tail pointer are new | ||
// parts. | ||
// | ||
// * We always restart back from the top of the algorithm, | ||
// allowing matching | ||
// and simple updates in place to continue... | ||
// | ||
// * Example below: the head pointers once again match, so | ||
// simply update | ||
// part 1 and record it in the `newParts` array. Last, | ||
// advance both head pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, , , , 6] <- heads matched; update 1 | ||
// and newKeys: [0, 2, 1, 4, 3, 7, 6] advance both oldHead | ||
// & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * As mentioned above, items that were moved as a result of | ||
// being stuck | ||
// (the final else clause in the code below) are marked with | ||
// null, so we always advance old pointers over these so we're | ||
// comparing the next actual old value on either end. | ||
// | ||
// * Example below: `oldHead` is null (already placed in | ||
// newParts), so | ||
// advance `oldHead`. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] // old head already used; | ||
// advance newParts: [0, 2, 1, , , , 6] // oldHead newKeys: | ||
// [0, 2, 1, 4, 3, 7, 6] | ||
// newHead ^ ^ newTail | ||
// | ||
// * Note it's not critical to mark old parts as null when they | ||
// are moved | ||
// from head to tail or tail to head, since they will be | ||
// outside the pointer range and never visited again. | ||
// | ||
// * Example below: Here the old tail key matches the new head | ||
// key, so | ||
// the part at the `oldTail` position and move its DOM to the | ||
// new head position (before `oldParts[oldHead]`). Last, | ||
// advance `oldTail` and `newHead` pointers. | ||
// | ||
// oldHead v v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, , , 6] <- old tail matches new | ||
// head: update newKeys: [0, 2, 1, 4, 3, 7, 6] & move 4, | ||
// advance oldTail & newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Example below: Old and new head keys match, so update the | ||
// old head | ||
// part in place, and advance the `oldHead` and `newHead` | ||
// pointers. | ||
// | ||
// oldHead v oldTail | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, 3, ,6] <- heads match: update 3 | ||
// and advance newKeys: [0, 2, 1, 4, 3, 7, 6] oldHead & | ||
// newHead | ||
// newHead ^ ^ newTail | ||
// | ||
// * Once the new or old pointers move past each other then all | ||
// we have | ||
// left is additions (if old list exhausted) or removals (if | ||
// new list exhausted). Those are handled in the final while | ||
// loops at the end. | ||
// | ||
// * Example below: `oldHead` exceeded `oldTail`, so we're done | ||
// with the | ||
// main loop. Create the remaining part and insert it at the | ||
// new head position, and the update is complete. | ||
// | ||
// (oldHead > oldTail) | ||
// oldKeys: [0, 1, -, 3, 4, 5, 6] | ||
// newParts: [0, 2, 1, 4, 3, 7 ,6] <- create and insert 7 | ||
// newKeys: [0, 2, 1, 4, 3, 7, 6] | ||
// newHead ^ newTail | ||
// | ||
// * Note that the order of the if/else clauses is not important | ||
// to the | ||
// algorithm, as long as the null checks come first (to ensure | ||
// we're always working on valid old parts) and that the final | ||
// else clause comes last (since that's where the expensive | ||
// moves occur). The order of remaining clauses is is just a | ||
// simple guess at which cases will be most common. | ||
// | ||
// * TODO(kschaaf) Note, we could calculate the longest | ||
// increasing | ||
// subsequence (LIS) of old items in new position, and only | ||
// move those not in the LIS set. However that costs O(nlogn) | ||
// time and adds a bit more code, and only helps make rare | ||
// types of mutations require fewer moves. The above handles | ||
// removes, adds, reversal, swaps, and single moves of | ||
// contiguous items in linear time, in the minimum number of | ||
// moves. As the number of multiple moves where LIS might help | ||
// approaches a random shuffle, the LIS optimization becomes | ||
// less helpful, so it seems not worth the code at this point. | ||
// Could reconsider if a compelling case arises. | ||
while (oldHead <= oldTail && newHead <= newTail) { | ||
if (oldParts[oldHead] === null) { | ||
// `null` means old part at head has already been used below; skip | ||
oldHead++; | ||
} else if (oldParts[oldTail] === null) { | ||
// `null` means old part at tail has already been used below; skip | ||
oldTail--; | ||
} else if (oldKeys[oldHead] === newKeys[newHead]) { | ||
// Old head matches new head; update in place | ||
newParts[newHead] = | ||
updatePart(oldParts[oldHead]!, newValues[newHead]); | ||
oldHead++; | ||
newHead++; | ||
} else if (oldKeys[oldTail] === newKeys[newTail]) { | ||
// Old tail matches new tail; update in place | ||
newParts[newTail] = | ||
updatePart(oldParts[oldTail]!, newValues[newTail]); | ||
oldTail--; | ||
newTail--; | ||
} else if (oldKeys[oldHead] === newKeys[newTail]) { | ||
// Old head matches new tail; update and move to new tail | ||
newParts[newTail] = | ||
updatePart(oldParts[oldHead]!, newValues[newTail]); | ||
insertPartBefore( | ||
containerPart, oldParts[oldHead]!, newParts[newTail + 1]); | ||
oldHead++; | ||
newTail--; | ||
} else if (oldKeys[oldTail] === newKeys[newHead]) { | ||
// Old tail matches new head; update and move to new head | ||
newParts[newHead] = | ||
updatePart(oldParts[oldTail]!, newValues[newHead]); | ||
insertPartBefore( | ||
containerPart, oldParts[oldTail]!, oldParts[oldHead]!); | ||
oldTail--; | ||
newHead++; | ||
} else { | ||
if (newKeyToIndexMap === undefined) { | ||
// Lazily generate key-to-index maps, used for removals & moves | ||
// below | ||
newKeyToIndexMap = generateMap(newKeys, newHead, newTail); | ||
oldKeyToIndexMap = generateMap(oldKeys, oldHead, oldTail); | ||
} | ||
if (!newKeyToIndexMap.has(oldKeys[oldHead])) { | ||
// Old head is no longer in new list; remove | ||
removePart(oldParts[oldHead]!); | ||
oldHead++; | ||
} else if (!newKeyToIndexMap.has(oldKeys[oldTail])) { | ||
// Old tail is no longer in new list; remove | ||
removePart(oldParts[oldTail]!); | ||
oldTail--; | ||
} else { | ||
// Any mismatches at this point are due to additions or moves; see | ||
// if we have an old part we can reuse and move into place | ||
const oldIndex = oldKeyToIndexMap.get(newKeys[newHead]); | ||
const oldPart = | ||
oldIndex !== undefined ? oldParts[oldIndex] : null; | ||
if (oldPart === null) { | ||
// No old part for this value; create a new one and insert it | ||
const newPart = | ||
createAndInsertPart(containerPart, oldParts[oldHead]!); | ||
updatePart(newPart, newValues[newHead]); | ||
newParts[newHead] = newPart; | ||
} else { | ||
// Reuse old part | ||
newParts[newHead] = updatePart(oldPart, newValues[newHead]); | ||
insertPartBefore(containerPart, oldPart, oldParts[oldHead]!); | ||
// This marks the old part as having been used, so that it will | ||
// be skipped in the first two checks above | ||
oldParts[oldIndex as number] = null; | ||
} | ||
newHead++; | ||
} | ||
} | ||
} | ||
// Add parts for any remaining new values | ||
while (newHead <= newTail) { | ||
// For all remaining additions, we insert before last new tail, | ||
// since old pointers are no longer valid | ||
const newPart = | ||
createAndInsertPart(containerPart, newParts[newTail + 1]!); | ||
updatePart(newPart, newValues[newHead]); | ||
newParts[newHead++] = newPart; | ||
} | ||
// Remove any remaining unused old parts | ||
while (oldHead <= oldTail) { | ||
const oldPart = oldParts[oldHead++]; | ||
if (oldPart !== null) { | ||
removePart(oldPart); | ||
} | ||
} | ||
// Save order of new parts for next round | ||
partListCache.set(containerPart, newParts); | ||
keyListCache.set(containerPart, newKeys); | ||
}; | ||
}); | ||
while (oldHead <= oldTail && newHead <= newTail) { | ||
if (oldParts[oldHead] === null) { | ||
// `null` means old part at head has already been used | ||
// below; skip | ||
oldHead++; | ||
} else if (oldParts[oldTail] === null) { | ||
// `null` means old part at tail has already been used | ||
// below; skip | ||
oldTail--; | ||
} else if (oldKeys[oldHead] === newKeys[newHead]) { | ||
// Old head matches new head; update in place | ||
newParts[newHead] = | ||
updatePart(oldParts[oldHead]!, newValues[newHead]); | ||
oldHead++; | ||
newHead++; | ||
} else if (oldKeys[oldTail] === newKeys[newTail]) { | ||
// Old tail matches new tail; update in place | ||
newParts[newTail] = | ||
updatePart(oldParts[oldTail]!, newValues[newTail]); | ||
oldTail--; | ||
newTail--; | ||
} else if (oldKeys[oldHead] === newKeys[newTail]) { | ||
// Old head matches new tail; update and move to new tail | ||
newParts[newTail] = | ||
updatePart(oldParts[oldHead]!, newValues[newTail]); | ||
insertPartBefore( | ||
containerPart, | ||
oldParts[oldHead]!, | ||
newParts[newTail + 1]); | ||
oldHead++; | ||
newTail--; | ||
} else if (oldKeys[oldTail] === newKeys[newHead]) { | ||
// Old tail matches new head; update and move to new head | ||
newParts[newHead] = | ||
updatePart(oldParts[oldTail]!, newValues[newHead]); | ||
insertPartBefore( | ||
containerPart, oldParts[oldTail]!, oldParts[oldHead]!); | ||
oldTail--; | ||
newHead++; | ||
} else { | ||
if (newKeyToIndexMap === undefined) { | ||
// Lazily generate key-to-index maps, used for removals & | ||
// moves below | ||
newKeyToIndexMap = generateMap(newKeys, newHead, newTail); | ||
oldKeyToIndexMap = generateMap(oldKeys, oldHead, oldTail); | ||
} | ||
if (!newKeyToIndexMap.has(oldKeys[oldHead])) { | ||
// Old head is no longer in new list; remove | ||
removePart(oldParts[oldHead]!); | ||
oldHead++; | ||
} else if (!newKeyToIndexMap.has(oldKeys[oldTail])) { | ||
// Old tail is no longer in new list; remove | ||
removePart(oldParts[oldTail]!); | ||
oldTail--; | ||
} else { | ||
// Any mismatches at this point are due to additions or | ||
// moves; see if we have an old part we can reuse and move | ||
// into place | ||
const oldIndex = oldKeyToIndexMap.get(newKeys[newHead]); | ||
const oldPart = | ||
oldIndex !== undefined ? oldParts[oldIndex] : null; | ||
if (oldPart === null) { | ||
// No old part for this value; create a new one and | ||
// insert it | ||
const newPart = createAndInsertPart( | ||
containerPart, oldParts[oldHead]!); | ||
updatePart(newPart, newValues[newHead]); | ||
newParts[newHead] = newPart; | ||
} else { | ||
// Reuse old part | ||
newParts[newHead] = | ||
updatePart(oldPart, newValues[newHead]); | ||
insertPartBefore( | ||
containerPart, oldPart, oldParts[oldHead]!); | ||
// This marks the old part as having been used, so that | ||
// it will be skipped in the first two checks above | ||
oldParts[oldIndex as number] = null; | ||
} | ||
newHead++; | ||
} | ||
} | ||
} | ||
// Add parts for any remaining new values | ||
while (newHead <= newTail) { | ||
// For all remaining additions, we insert before last new | ||
// tail, since old pointers are no longer valid | ||
const newPart = createAndInsertPart( | ||
containerPart, newParts[newTail + 1]!); | ||
updatePart(newPart, newValues[newHead]); | ||
newParts[newHead++] = newPart; | ||
} | ||
// Remove any remaining unused old parts | ||
while (oldHead <= oldTail) { | ||
const oldPart = oldParts[oldHead++]; | ||
if (oldPart !== null) { | ||
removePart(oldPart); | ||
} | ||
} | ||
// Save order of new parts for next round | ||
partListCache.set(containerPart, newParts); | ||
keyListCache.set(containerPart, newKeys); | ||
}; | ||
}) as | ||
<T>(items: Iterable<T>, | ||
keyFnOrTemplate: KeyFn<T>|ItemTemplate<T>, | ||
template?: ItemTemplate<T>) => DirectiveFn; |
@@ -25,3 +25,3 @@ /** | ||
*/ | ||
const styleMapCache = new WeakMap(); | ||
const styleMapCache = new WeakMap<AttributePart, StyleInfo>(); | ||
@@ -34,3 +34,3 @@ /** | ||
// Note, could be a WeakSet, but prefer not requiring this polyfill. | ||
const styleMapStatics = new WeakMap(); | ||
const styleMapStatics = new WeakMap<AttributePart, true>(); | ||
@@ -75,2 +75,3 @@ /** | ||
if (name.indexOf('-') === -1) { | ||
// tslint:disable-next-line:no-any | ||
(style as any)[name] = null; | ||
@@ -86,2 +87,3 @@ } else { | ||
if (name.indexOf('-') === -1) { | ||
// tslint:disable-next-line:no-any | ||
(style as any)[name] = styleInfo[name]; | ||
@@ -88,0 +90,0 @@ } else { |
@@ -19,3 +19,3 @@ /** | ||
interface PreviousValue { | ||
value: any; | ||
value: unknown; | ||
fragment: DocumentFragment; | ||
@@ -38,3 +38,3 @@ } | ||
*/ | ||
export const unsafeHTML = directive((value: any) => (part: Part): void => { | ||
export const unsafeHTML = directive((value: unknown) => (part: Part): void => { | ||
if (!(part instanceof NodePart)) { | ||
@@ -52,3 +52,3 @@ throw new Error('unsafeHTML can only be used in text bindings'); | ||
const template = document.createElement('template'); | ||
template.innerHTML = value; | ||
template.innerHTML = value as string; // innerHTML casts to string internally | ||
const fragment = document.importNode(template.content, true); | ||
@@ -55,0 +55,0 @@ part.setValue(fragment); |
@@ -49,3 +49,3 @@ /** | ||
*/ | ||
export const until = directive((...args: any[]) => (part: Part) => { | ||
export const until = directive((...args: unknown[]) => (part: Part) => { | ||
let state = _state.get(part)!; | ||
@@ -70,3 +70,4 @@ if (state === undefined) { | ||
// Render non-Promise values immediately | ||
if (isPrimitive(value) || typeof value.then !== 'function') { | ||
if (isPrimitive(value) || | ||
typeof (value as {then?: unknown}).then !== 'function') { | ||
part.setValue(value); | ||
@@ -81,3 +82,4 @@ state.lastRenderedIndex = i; | ||
if (state.lastRenderedIndex !== undefined && | ||
typeof value.then === 'function' && value === previousValues[i]) { | ||
typeof (value as {then?: unknown}).then === 'function' && | ||
value === previousValues[i]) { | ||
continue; | ||
@@ -84,0 +86,0 @@ } |
@@ -21,4 +21,7 @@ /** | ||
const directives = new WeakMap<any, Boolean>(); | ||
const directives = new WeakMap<object, true>(); | ||
// tslint:disable-next-line:no-any | ||
export type DirectiveFactory = (...args: any[]) => object; | ||
export type DirectiveFn = (part: Part) => void; | ||
@@ -46,10 +49,12 @@ | ||
*/ | ||
export const directive = <F extends Function>(f: F): F => | ||
((...args: any[]) => { | ||
// tslint:disable-next-line:no-any | ||
export const directive = <F extends DirectiveFactory>(f: F): F => | ||
((...args: unknown[]) => { | ||
const d = f(...args); | ||
directives.set(d, true); | ||
return d; | ||
}) as unknown as F; | ||
}) as F; | ||
export const isDirective = (o: any) => | ||
typeof o === 'function' && directives.has(o); | ||
export const isDirective = (o: unknown): o is DirectiveFn => { | ||
return typeof o === 'function' && directives.has(o); | ||
}; |
@@ -19,2 +19,6 @@ /** | ||
interface MaybePolyfilledCe extends CustomElementRegistry { | ||
polyfillWrapFlushCallback?: object; | ||
} | ||
/** | ||
@@ -24,3 +28,4 @@ * True if the custom elements polyfill is in use. | ||
export const isCEPolyfill = window.customElements !== undefined && | ||
(window.customElements as any).polyfillWrapFlushCallback !== undefined; | ||
(window.customElements as MaybePolyfilledCe).polyfillWrapFlushCallback !== | ||
undefined; | ||
@@ -27,0 +32,0 @@ /** |
@@ -43,3 +43,3 @@ /** | ||
const walker = | ||
document.createTreeWalker(content, walkerNodeFilter, null as any, false); | ||
document.createTreeWalker(content, walkerNodeFilter, null, false); | ||
let partIndex = nextActiveIndexInTemplateParts(parts); | ||
@@ -84,4 +84,3 @@ let part = parts[partIndex]; | ||
let count = (node.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */) ? 0 : 1; | ||
const walker = | ||
document.createTreeWalker(node, walkerNodeFilter, null as any, false); | ||
const walker = document.createTreeWalker(node, walkerNodeFilter, null, false); | ||
while (walker.nextNode()) { | ||
@@ -119,3 +118,3 @@ count++; | ||
const walker = | ||
document.createTreeWalker(content, walkerNodeFilter, null as any, false); | ||
document.createTreeWalker(content, walkerNodeFilter, null, false); | ||
let partIndex = nextActiveIndexInTemplateParts(parts); | ||
@@ -122,0 +121,0 @@ let insertCount = 0; |
@@ -24,3 +24,3 @@ /** | ||
export interface Part { | ||
value: any; | ||
value: unknown; | ||
@@ -31,3 +31,3 @@ /** | ||
*/ | ||
setValue(value: any): void; | ||
setValue(value: unknown): void; | ||
@@ -44,3 +44,3 @@ /** | ||
*/ | ||
export const noChange = {}; | ||
export const noChange: object = {}; | ||
@@ -47,0 +47,0 @@ /** |
@@ -27,5 +27,9 @@ /** | ||
export const isPrimitive = (value: any) => | ||
(value === null || | ||
!(typeof value === 'object' || typeof value === 'function')); | ||
// https://tc39.github.io/ecma262/#sec-typeof-operator | ||
export type Primitive = null|undefined|boolean|number|string|Symbol|bigint; | ||
export const isPrimitive = (value: unknown): value is Primitive => { | ||
return ( | ||
value === null || | ||
!(typeof value === 'object' || typeof value === 'function')); | ||
}; | ||
@@ -60,3 +64,3 @@ /** | ||
protected _getValue(): any { | ||
protected _getValue(): unknown { | ||
const strings = this.strings; | ||
@@ -72,4 +76,6 @@ const l = strings.length - 1; | ||
if (v != null && | ||
(Array.isArray(v) || typeof v !== 'string' && v[Symbol.iterator])) { | ||
for (const t of v) { | ||
(Array.isArray(v) || | ||
// tslint:disable-next-line:no-any | ||
typeof v !== 'string' && (v as any)[Symbol.iterator])) { | ||
for (const t of v as Iterable<unknown>) { | ||
text += typeof t === 'string' ? t : String(t); | ||
@@ -90,3 +96,3 @@ } | ||
this.dirty = false; | ||
this.element.setAttribute(this.name, this._getValue()); | ||
this.element.setAttribute(this.name, this._getValue() as string); | ||
} | ||
@@ -98,3 +104,3 @@ } | ||
committer: AttributeCommitter; | ||
value: any = undefined; | ||
value: unknown = undefined; | ||
@@ -105,3 +111,3 @@ constructor(comitter: AttributeCommitter) { | ||
setValue(value: any): void { | ||
setValue(value: unknown): void { | ||
if (value !== noChange && (!isPrimitive(value) || value !== this.value)) { | ||
@@ -135,4 +141,4 @@ this.value = value; | ||
endNode!: Node; | ||
value: any = undefined; | ||
_pendingValue: any = undefined; | ||
value: unknown = undefined; | ||
_pendingValue: unknown = undefined; | ||
@@ -186,3 +192,3 @@ constructor(options: RenderOptions) { | ||
setValue(value: any): void { | ||
setValue(value: unknown): void { | ||
this._pendingValue = value; | ||
@@ -209,4 +215,7 @@ } | ||
this._commitNode(value); | ||
} else if (Array.isArray(value) || value[Symbol.iterator]) { | ||
this._commitIterable(value); | ||
} else if ( | ||
Array.isArray(value) || | ||
// tslint:disable-next-line:no-any | ||
(value as any)[Symbol.iterator]) { | ||
this._commitIterable(value as Iterable<unknown>); | ||
} else if (value === nothing) { | ||
@@ -234,3 +243,3 @@ this.value = nothing; | ||
private _commitText(value: string): void { | ||
private _commitText(value: unknown): void { | ||
const node = this.startNode.nextSibling!; | ||
@@ -243,3 +252,3 @@ value = value == null ? '' : value; | ||
// TODO(justinfagnani): Can we just check if this.value is primitive? | ||
(node as Text).data = value; | ||
(node as Text).data = value as string; | ||
} else { | ||
@@ -254,3 +263,4 @@ this._commitNode(document.createTextNode( | ||
const template = this.options.templateFactory(value); | ||
if (this.value && this.value.template === template) { | ||
if (this.value instanceof TemplateInstance && | ||
this.value.template === template) { | ||
this.value.update(value.values); | ||
@@ -271,3 +281,3 @@ } else { | ||
private _commitIterable(value: any): void { | ||
private _commitIterable(value: Iterable<unknown>): void { | ||
// For an Iterable, we create a new InstancePart per item, then set its | ||
@@ -337,4 +347,4 @@ // value to the item. This is a little bit of overhead for every item in | ||
strings: string[]; | ||
value: any = undefined; | ||
_pendingValue: any = undefined; | ||
value: unknown = undefined; | ||
_pendingValue: unknown = undefined; | ||
@@ -351,3 +361,3 @@ constructor(element: Element, name: string, strings: string[]) { | ||
setValue(value: any): void { | ||
setValue(value: unknown): void { | ||
this._pendingValue = value; | ||
@@ -410,2 +420,3 @@ } | ||
this.dirty = false; | ||
// tslint:disable-next-line:no-any | ||
(this.element as any)[this.name] = this._getValue(); | ||
@@ -431,3 +442,5 @@ } | ||
}; | ||
// tslint:disable-next-line:no-any | ||
window.addEventListener('test', options as any, options); | ||
// tslint:disable-next-line:no-any | ||
window.removeEventListener('test', options as any, options); | ||
@@ -437,2 +450,5 @@ } catch (_e) { | ||
type EventHandlerWithOptions = | ||
EventListenerOrEventListenerObject&Partial<AddEventListenerOptions>; | ||
export class EventPart implements Part { | ||
@@ -442,5 +458,5 @@ element: Element; | ||
eventContext?: EventTarget; | ||
value: any = undefined; | ||
value: undefined|EventHandlerWithOptions = undefined; | ||
_options?: AddEventListenerOptions; | ||
_pendingValue: any = undefined; | ||
_pendingValue: undefined|EventHandlerWithOptions = undefined; | ||
_boundHandleEvent: (event: Event) => void; | ||
@@ -455,3 +471,3 @@ | ||
setValue(value: any): void { | ||
setValue(value: undefined|EventHandlerWithOptions): void { | ||
this._pendingValue = value; | ||
@@ -463,3 +479,3 @@ } | ||
const directive = this._pendingValue; | ||
this._pendingValue = noChange; | ||
this._pendingValue = noChange as EventHandlerWithOptions; | ||
directive(this); | ||
@@ -491,3 +507,3 @@ } | ||
this.value = newListener; | ||
this._pendingValue = noChange; | ||
this._pendingValue = noChange as EventHandlerWithOptions; | ||
} | ||
@@ -499,3 +515,3 @@ | ||
} else { | ||
this.value.handleEvent(event); | ||
(this.value as EventListenerObject).handleEvent(event); | ||
} | ||
@@ -508,5 +524,5 @@ } | ||
// at all. Chrome 41 only reads `capture` if the argument is an object. | ||
const getOptions = (o: any) => o && | ||
const getOptions = (o: AddEventListenerOptions|undefined) => o && | ||
(eventOptionsSupported ? | ||
{capture: o.capture, passive: o.passive, once: o.once} : | ||
o.capture); | ||
o.capture as AddEventListenerOptions); |
@@ -43,3 +43,3 @@ /** | ||
update(values: any[]) { | ||
update(values: unknown[]) { | ||
let i = 0; | ||
@@ -78,3 +78,3 @@ for (const part of this._parts) { | ||
133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, | ||
null as any, | ||
null, | ||
false); | ||
@@ -81,0 +81,0 @@ let node = walker.nextNode(); |
@@ -29,3 +29,3 @@ /** | ||
strings: TemplateStringsArray; | ||
values: any[]; | ||
values: unknown[]; | ||
type: string; | ||
@@ -35,3 +35,3 @@ processor: TemplateProcessor; | ||
constructor( | ||
strings: TemplateStringsArray, values: any[], type: string, | ||
strings: TemplateStringsArray, values: unknown[], type: string, | ||
processor: TemplateProcessor) { | ||
@@ -38,0 +38,0 @@ this.strings = strings; |
@@ -59,3 +59,3 @@ /** | ||
133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, | ||
null as any, | ||
null, | ||
false); | ||
@@ -62,0 +62,0 @@ // Keeps track of the last index associated with a part. We try to delete |
@@ -50,2 +50,13 @@ /** | ||
declare global { | ||
interface Window { | ||
litHtmlVersions: string[]; | ||
} | ||
} | ||
// IMPORTANT: do not change the property name or the assignment expression. | ||
// This line will be used in regexes to search for lit-html usage. | ||
// TODO(justinfagnani): inject version number at build time | ||
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.0.0'); | ||
/** | ||
@@ -55,3 +66,3 @@ * Interprets a template literal as an HTML template that can efficiently | ||
*/ | ||
export const html = (strings: TemplateStringsArray, ...values: any[]) => | ||
export const html = (strings: TemplateStringsArray, ...values: unknown[]) => | ||
new TemplateResult(strings, values, 'html', defaultTemplateProcessor); | ||
@@ -63,3 +74,3 @@ | ||
*/ | ||
export const svg = (strings: TemplateStringsArray, ...values: any[]) => | ||
export const svg = (strings: TemplateStringsArray, ...values: unknown[]) => | ||
new SVGTemplateResult(strings, values, 'svg', defaultTemplateProcessor); |
@@ -30,2 +30,3 @@ /** | ||
// tslint:disable-next-line:no-any | ||
const upgrade = (template: any) => { | ||
@@ -32,0 +33,0 @@ template.content = contentDoc.createDocumentFragment(); |
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
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
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
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
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
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
547061
153
7337
1
52