Skip to content

Commit 74827d7

Browse files
justinfagnanijustinfagnani
committed
Address review comments
1 parent c00eb4c commit 74827d7

10 files changed

+291
-263
lines changed

‎.clang-format

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
BasedOnStyle: Google
2+
AlignAfterOpenBracket: AlwaysBreak
3+
AllowAllParametersOfDeclarationOnNextLine: false
4+
AllowShortBlocksOnASingleLine: false
5+
AllowShortCaseLabelsOnASingleLine: false
6+
AllowShortFunctionsOnASingleLine: None
7+
AllowShortIfStatementsOnASingleLine: false
8+
AllowShortLoopsOnASingleLine: false
9+
BinPackArguments: false
10+
# This breaks async functions sometimes, see
11+
# https://github.com/Polymer/polymer-analyzer/pull/393
12+
# BinPackParameters: false

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"build": "tsc",
1414
"gen-docs": "typedoc --readme none --mode modules --excludeNotExported --excludePrivate --exclude **/*_test.ts --out ./docs/api .",
1515
"pretest": "npm run posttest; ln -s node_modules bower_components",
16-
"test": "npm run lint && wct -l chrome",
16+
"test": "npm run build && wct -l chrome && npm run lint",
1717
"posttest": "rm -f bower_components",
1818
"checksize": "uglifyjs lit-html.js -mc --toplevel | gzip -9 | wc -c",
1919
"format": "find src test | grep '\\.js$\\|\\.ts$' | xargs clang-format --style=file -i",

‎src/lib/lit-extended.ts

+27-33
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,7 @@
1212
* http://polymer.github.io/PATENTS.txt
1313
*/
1414

15-
import {
16-
AttributePart,
17-
defaultPartCallback,
18-
getValue,
19-
Part,
20-
render as baseRender,
21-
TemplateInstance,
22-
TemplatePart,
23-
TemplateResult
24-
} from '../lit-html.js';
15+
import {AttributePart, defaultPartCallback, getValue, Part, render as baseRender, TemplateInstance, TemplatePart, TemplateResult} from '../lit-html.js';
2516

2617
export {html} from '../lit-html.js';
2718

@@ -52,33 +43,35 @@ export {html} from '../lit-html.js';
5243
* html`<button on-click=${(e)=> this.onClickHandler(e)}>Buy Now</button>`
5344
*
5445
*/
55-
export function render(result: TemplateResult,
56-
container: Element|DocumentFragment) {
46+
export function render(
47+
result: TemplateResult, container: Element|DocumentFragment) {
5748
baseRender(result, container, extendedPartCallback);
5849
}
5950

6051
export const extendedPartCallback =
61-
(instance: TemplateInstance, templatePart: TemplatePart,
62-
node: Node): Part => {
63-
if (templatePart.type === 'attribute') {
64-
if (templatePart.rawName!.startsWith('on-')) {
65-
const eventName = templatePart.rawName!.substring(3);
66-
return new EventPart(instance, node as Element, eventName);
67-
}
68-
if (templatePart.name!.endsWith('$')) {
69-
const name =
70-
templatePart.name!.substring(0, templatePart.name!.length - 1);
71-
return new AttributePart(instance, node as Element, name,
72-
templatePart.strings!);
73-
}
74-
return new PropertyPart(instance, node as Element,
75-
templatePart.rawName!, templatePart.strings!);
76-
}
77-
return defaultPartCallback(instance, templatePart, node);
78-
};
52+
(instance: TemplateInstance, templatePart: TemplatePart, node: Node):
53+
Part => {
54+
if (templatePart.type === 'attribute') {
55+
if (templatePart.rawName!.startsWith('on-')) {
56+
const eventName = templatePart.rawName!.substring(3);
57+
return new EventPart(instance, node as Element, eventName);
58+
}
59+
if (templatePart.name!.endsWith('$')) {
60+
const name = templatePart.name!.substring(
61+
0, templatePart.name!.length - 1);
62+
return new AttributePart(
63+
instance, node as Element, name, templatePart.strings!);
64+
}
65+
return new PropertyPart(
66+
instance,
67+
node as Element,
68+
templatePart.rawName!,
69+
templatePart.strings!);
70+
}
71+
return defaultPartCallback(instance, templatePart, node);
72+
};
7973

8074
export class PropertyPart extends AttributePart {
81-
8275
setValue(values: any[], startIndex: number): void {
8376
const s = this.strings;
8477
let value: any;
@@ -101,7 +94,6 @@ export class PropertyPart extends AttributePart {
10194
}
10295

10396
export class EventPart implements Part {
104-
10597
instance: TemplateInstance;
10698
element: Element;
10799
eventName: string;
@@ -131,5 +123,7 @@ export class EventPart implements Part {
131123
this._listener = listener;
132124
}
133125

134-
handleEvent(event: Event) { this._listener.call(this.element, event); }
126+
handleEvent(event: Event) {
127+
this._listener.call(this.element, event);
128+
}
135129
}

‎src/lib/repeat.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ interface State {
2424

2525
const stateCache = new WeakMap<NodePart, State>();
2626

27-
export function repeat<T>(items: T[], keyFn: KeyFn<T>,
28-
template: ItemTemplate<T>): DirectiveFn;
27+
export function repeat<T>(
28+
items: T[], keyFn: KeyFn<T>, template: ItemTemplate<T>): DirectiveFn;
2929
export function repeat<T>(items: T[], template: ItemTemplate<T>): DirectiveFn;
30-
export function repeat<T>(items: Iterable<T>,
31-
keyFnOrTemplate: KeyFn<T>| ItemTemplate<T>,
32-
template?: ItemTemplate<T>): DirectiveFn {
33-
30+
export function repeat<T>(
31+
items: Iterable<T>,
32+
keyFnOrTemplate: KeyFn<T>| ItemTemplate<T>,
33+
template?: ItemTemplate<T>): DirectiveFn {
3434
let keyFn: KeyFn<T>;
3535
if (arguments.length === 2) {
3636
template = keyFnOrTemplate;
@@ -43,13 +43,13 @@ export function repeat<T>(items: Iterable<T>,
4343
let state = stateCache.get(part);
4444
if (state === undefined) {
4545
state = {
46-
keyMap : keyFn && new Map(),
47-
parts : [],
46+
keyMap: keyFn && new Map(),
47+
parts: [],
4848
};
4949
stateCache.set(part, state);
5050
}
5151
const container = part.startNode.parentNode as HTMLElement | ShadowRoot |
52-
DocumentFragment;
52+
DocumentFragment;
5353
const oldParts = state.parts;
5454
const endParts = new Map<Node, NodePart>(
5555
oldParts.map((p) => [p.endNode, p] as [Node, NodePart]));
@@ -108,8 +108,8 @@ export function repeat<T>(items: Iterable<T>,
108108
if (part.startNode.nextSibling === part.endNode) {
109109
// The container part was empty, so we need a new endPart
110110
itemPart.endNode = new Text();
111-
container.insertBefore(itemPart.endNode,
112-
part.startNode.nextSibling);
111+
container.insertBefore(
112+
itemPart.endNode, part.startNode.nextSibling);
113113
} else {
114114
// endNode should equal the startNode of the currently first part
115115
itemPart.endNode = part.startNode.nextSibling!;
@@ -150,7 +150,7 @@ export function repeat<T>(items: Iterable<T>,
150150
}
151151
clearRange.setEndAfter(clearEnd);
152152
clearRange.deleteContents();
153-
clearRange.detach(); // is this neccessary?
153+
clearRange.detach(); // is this neccessary?
154154
}
155155

156156
state.parts = itemParts;

‎src/lit-html.ts

+42-36
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ const templates = new Map<TemplateStringsArray, Template>();
2121
* Interprets a template literal as an HTML template that can efficiently
2222
* render to and update a container.
2323
*/
24-
export function html(strings: TemplateStringsArray,
25-
...values: any[]): TemplateResult {
24+
export function html(
25+
strings: TemplateStringsArray, ...values: any[]): TemplateResult {
2626
let template = templates.get(strings);
2727
if (template === undefined) {
2828
template = new Template(strings);
@@ -51,9 +51,10 @@ export class TemplateResult {
5151
* To update a container with new values, reevaluate the template literal and
5252
* call `render` with the new result.
5353
*/
54-
export function render(result: TemplateResult,
55-
container: Element|DocumentFragment,
56-
partCallback: PartCallback = defaultPartCallback) {
54+
export function render(
55+
result: TemplateResult,
56+
container: Element|DocumentFragment,
57+
partCallback: PartCallback = defaultPartCallback) {
5758
let instance = (container as any).__templateInstance as any;
5859

5960
// Repeat render, just call update()
@@ -99,8 +100,10 @@ const exprMarker = `{{lit-${Math.random()}}}`;
99100
* to Part.update().
100101
*/
101102
export class TemplatePart {
102-
constructor(public type: string, public index: number, public name?: string,
103-
public rawName?: string, public strings?: string[]) {}
103+
constructor(
104+
public type: string, public index: number, public name?: string,
105+
public rawName?: string, public strings?: string[]) {
106+
}
104107
}
105108

106109
export class Template {
@@ -110,8 +113,8 @@ export class Template {
110113
constructor(strings: TemplateStringsArray) {
111114
this.element = document.createElement('template');
112115
this.element.innerHTML = strings.join(exprMarker);
113-
const walker = document.createTreeWalker(this.element.content,
114-
5 /* elements & text */);
116+
const walker = document.createTreeWalker(
117+
this.element.content, 5 /* elements & text */);
115118
let index = -1;
116119
let partIndex = 0;
117120
const nodesToRemove = [];
@@ -135,8 +138,8 @@ export class Template {
135138
0, attributeString.length - attributeStrings[0].length);
136139
// Find the attribute name
137140
const rawName = rawNameString.match(/((?:\w|[.\-_$])+)=["']?$/)![1];
138-
this.parts.push(new TemplatePart('attribute', index, attribute.name,
139-
rawName, attributeStrings));
141+
this.parts.push(new TemplatePart(
142+
'attribute', index, attribute.name, rawName, attributeStrings));
140143
node.removeAttribute(attribute.name);
141144
partIndex += attributeStrings.length - 1;
142145
i--;
@@ -176,15 +179,14 @@ export class Template {
176179
}
177180
}
178181

179-
export const getValue =
180-
(part: Part, value: any) => {
181-
// `null` as the value of a Text node will render the string 'null'
182-
// so we convert it to undefined
183-
if (value != null && value.__litDirective === true) {
184-
value = value(part);
185-
}
186-
return value === null ? undefined : value;
187-
};
182+
export const getValue = (part: Part, value: any) => {
183+
// `null` as the value of a Text node will render the string 'null'
184+
// so we convert it to undefined
185+
if (value != null && value.__litDirective === true) {
186+
value = value(part);
187+
}
188+
return value === null ? undefined : value;
189+
};
188190

189191
export type DirectiveFn = (part: Part) => any;
190192

@@ -215,8 +217,9 @@ export class AttributePart implements MultiPart {
215217
strings: string[];
216218
size: number;
217219

218-
constructor(instance: TemplateInstance, element: Element, name: string,
219-
strings: string[]) {
220+
constructor(
221+
instance: TemplateInstance, element: Element, name: string,
222+
strings: string[]) {
220223
this.instance = instance;
221224
this.element = element;
222225
this.name = name;
@@ -395,20 +398,23 @@ export class NodePart implements SinglePart {
395398
}
396399
}
397400

398-
export type PartCallback = (instance: TemplateInstance,
399-
templatePart: TemplatePart, node: Node) => Part;
401+
export type PartCallback =
402+
(instance: TemplateInstance, templatePart: TemplatePart, node: Node) =>
403+
Part;
400404

401405
export const defaultPartCallback =
402-
(instance: TemplateInstance, templatePart: TemplatePart, node: Node):
403-
Part => {
404-
if (templatePart.type === 'attribute') {
405-
return new AttributePart(instance, node as Element,
406-
templatePart.name!, templatePart.strings!);
407-
} else if (templatePart.type === 'node') {
408-
return new NodePart(instance, node, node.nextSibling!);
409-
}
410-
throw new Error(`Unknown part type ${templatePart.type}`);
411-
};
406+
(instance: TemplateInstance,
407+
templatePart: TemplatePart,
408+
node: Node): Part => {
409+
if (templatePart.type === 'attribute') {
410+
return new AttributePart(
411+
instance, node as Element, templatePart.name!, templatePart.strings!
412+
);
413+
} else if (templatePart.type === 'node') {
414+
return new NodePart(instance, node, node.nextSibling!);
415+
}
416+
throw new Error(`Unknown part type ${templatePart.type}`);
417+
};
412418

413419
/**
414420
* An instance of a `Template` that can be attached to the DOM and updated
@@ -419,8 +425,8 @@ export class TemplateInstance {
419425
_partCallback: PartCallback;
420426
template: Template;
421427

422-
constructor(template: Template,
423-
partCallback: PartCallback = defaultPartCallback) {
428+
constructor(
429+
template: Template, partCallback: PartCallback = defaultPartCallback) {
424430
this.template = template;
425431
this._partCallback = partCallback;
426432
}

‎src/test/lib/lit-extended_test.ts

+31-29
Original file line numberDiff line numberDiff line change
@@ -51,46 +51,48 @@ suite('lit-extended', () => {
5151
assert.equal(fooDiv, barDiv);
5252
});
5353

54-
test('overwrites an existing (plain) TemplateInstance if one exists, ' +
55-
'even if it has a matching Template',
56-
() => {
57-
const container = document.createElement('div');
54+
test(
55+
'overwrites an existing (plain) TemplateInstance if one exists, ' +
56+
'even if it has a matching Template',
57+
() => {
58+
const container = document.createElement('div');
5859

59-
const t = () => html`<div>foo</div>`;
60+
const t = () => html`<div>foo</div>`;
6061

61-
renderPlain(t(), container);
62+
renderPlain(t(), container);
6263

63-
assert.equal(container.children.length, 1);
64-
const firstDiv = container.children[0];
65-
assert.equal(firstDiv.textContent, 'foo');
64+
assert.equal(container.children.length, 1);
65+
const firstDiv = container.children[0];
66+
assert.equal(firstDiv.textContent, 'foo');
6667

67-
render(t(), container);
68+
render(t(), container);
6869

69-
assert.equal(container.children.length, 1);
70-
const secondDiv = container.children[0];
71-
assert.equal(secondDiv.textContent, 'foo');
70+
assert.equal(container.children.length, 1);
71+
const secondDiv = container.children[0];
72+
assert.equal(secondDiv.textContent, 'foo');
7273

73-
assert.notEqual(firstDiv, secondDiv);
74-
});
74+
assert.notEqual(firstDiv, secondDiv);
75+
});
7576

76-
test('overwrites an existing ExtendedTemplateInstance if one exists and ' +
77-
'does not have a matching Template',
78-
() => {
79-
const container = document.createElement('div');
77+
test(
78+
'overwrites an existing ExtendedTemplateInstance if one exists and ' +
79+
'does not have a matching Template',
80+
() => {
81+
const container = document.createElement('div');
8082

81-
render(html`<div>foo</div>`, container);
83+
render(html`<div>foo</div>`, container);
8284

83-
assert.equal(container.children.length, 1);
84-
const fooDiv = container.children[0];
85-
assert.equal(fooDiv.textContent, 'foo');
85+
assert.equal(container.children.length, 1);
86+
const fooDiv = container.children[0];
87+
assert.equal(fooDiv.textContent, 'foo');
8688

87-
render(html`<div>bar</div>`, container);
89+
render(html`<div>bar</div>`, container);
8890

89-
assert.equal(container.children.length, 1);
90-
const barDiv = container.children[0];
91-
assert.equal(barDiv.textContent, 'bar');
91+
assert.equal(container.children.length, 1);
92+
const barDiv = container.children[0];
93+
assert.equal(barDiv.textContent, 'bar');
9294

93-
assert.notEqual(fooDiv, barDiv);
94-
});
95+
assert.notEqual(fooDiv, barDiv);
96+
});
9597
});
9698
});

0 commit comments

Comments
 (0)