Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .clang-format
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
BasedOnStyle: Google
AlignAfterOpenBracket: AlwaysBreak
AllowAllParametersOfDeclarationOnNextLine: false
AllowShortBlocksOnASingleLine: false
AllowShortCaseLabelsOnASingleLine: false
AllowShortFunctionsOnASingleLine: None
AllowShortIfStatementsOnASingleLine: false
AllowShortLoopsOnASingleLine: false
BinPackArguments: false
# This breaks async functions sometimes, see
# https://github.com/Polymer/polymer-analyzer/pull/393
# BinPackParameters: false
3 changes: 1 addition & 2 deletions src/demo/ts-element.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import {html, LitElement, property} from '../lit-element.js';

class TSElement extends LitElement {

@property() message = 'Hi';

@property(
{attribute : 'more-info', converter: (value: string) => `[${value}]`})
{attribute: 'more-info', converter: (value: string) => `[${value}]`})
extra = '';

render() {
Expand Down
2 changes: 1 addition & 1 deletion src/env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ interface ShadowRoot {
adoptedStyleSheets: CSSStyleSheet[];
}

declare var ShadowRoot: {prototype: ShadowRoot; new () : ShadowRoot;}
declare var ShadowRoot: {prototype: ShadowRoot; new (): ShadowRoot;}

interface CSSStyleSheet {
replaceSync(cssText: string): void;
Expand Down
22 changes: 11 additions & 11 deletions src/lib/css-tag.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,20 @@ found at http://polymer.github.io/PATENTS.txt
*/

export const supportsAdoptingStyleSheets =
('adoptedStyleSheets' in Document.prototype) && ('replace' in CSSStyleSheet.prototype);
('adoptedStyleSheets' in Document.prototype) &&
('replace' in CSSStyleSheet.prototype);

const constructionToken = Symbol();

export class CSSResult {

_styleSheet?: CSSStyleSheet|null;

readonly cssText: string;

constructor(cssText: string, safeToken: symbol) {
if (safeToken !== constructionToken) {
throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
throw new Error(
'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
}
this.cssText = cssText;
}
Expand Down Expand Up @@ -66,7 +67,7 @@ const textFromCSSResult = (value: CSSResult) => {
throw new Error(
`Value passed to 'css' function must be a 'css' function result: ${
value}. Use 'unsafeCSS' to pass non-literal values, but
take care to ensure page security.` );
take care to ensure page security.`);
}
};

Expand All @@ -76,10 +77,9 @@ const textFromCSSResult = (value: CSSResult) => {
* used. To incorporate non-literal values `unsafeCSS` may be used inside a
* template string part.
*/
export const css =
(strings: TemplateStringsArray, ...values: CSSResult[]) => {
const cssText = values.reduce(
(acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1],
strings[0]);
return new CSSResult(cssText, constructionToken);
};
export const css = (strings: TemplateStringsArray, ...values: CSSResult[]) => {
const cssText = values.reduce(
(acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1],
strings[0]);
return new CSSResult(cssText, constructionToken);
};
98 changes: 52 additions & 46 deletions src/lib/decorators.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ const standardCustomElement =
*
* @param tagName the name of the custom element to define
*/
export const customElement = (tagName: string) => (
classOrDescriptor: Constructor<HTMLElement>|ClassDescriptor) =>
(typeof classOrDescriptor === 'function')
? legacyCustomElement(tagName,
classOrDescriptor as Constructor<HTMLElement>)
: standardCustomElement(tagName, classOrDescriptor as ClassDescriptor);
export const customElement = (tagName: string) =>
(classOrDescriptor: Constructor<HTMLElement>|ClassDescriptor) =>
(typeof classOrDescriptor === 'function') ?
legacyCustomElement(
tagName, classOrDescriptor as Constructor<HTMLElement>) :
standardCustomElement(tagName, classOrDescriptor as ClassDescriptor);

const standardProperty =
(options: PropertyDeclaration, element: ClassElement) => {
Expand All @@ -93,10 +93,10 @@ const standardProperty =
// must return some kind of descriptor, so return a descriptor for an
// unused prototype field. The finisher calls createProperty().
return {
kind : 'field',
key : Symbol(),
placement : 'own',
descriptor : {},
kind: 'field',
key: Symbol(),
placement: 'own',
descriptor: {},
// When @babel/plugin-proposal-decorators implements initializers,
// do this instead of the initializer below. See:
// https://github.com/babel/babel/issues/9260 extras: [
Expand All @@ -118,10 +118,11 @@ const standardProperty =
}
};

const legacyProperty = (options: PropertyDeclaration, proto: Object,
name: PropertyKey) => {
(proto.constructor as typeof UpdatingElement).createProperty(name!, options);
};
const legacyProperty =
(options: PropertyDeclaration, proto: Object, name: PropertyKey) => {
(proto.constructor as typeof UpdatingElement)
.createProperty(name!, options);
};

/**
* A property decorator which creates a LitElement property which reflects a
Expand All @@ -132,35 +133,36 @@ const legacyProperty = (options: PropertyDeclaration, proto: Object,
*/
export function property(options?: PropertyDeclaration) {
return (protoOrDescriptor: Object|ClassElement, name?: PropertyKey): any =>
(name !== undefined)
? legacyProperty(options!, protoOrDescriptor as Object, name)
: standardProperty(options!,
protoOrDescriptor as ClassElement);
(name !== undefined) ?
legacyProperty(options!, protoOrDescriptor as Object, name) :
standardProperty(options!, protoOrDescriptor as ClassElement);
}

/**
* A property decorator that converts a class property into a getter that
* executes a querySelector on the element's renderRoot.
*/
export const query = _query((target: NodeSelector, selector: string) =>
target.querySelector(selector));
export const query = _query(
(target: NodeSelector, selector: string) => target.querySelector(selector));

/**
* A property decorator that converts a class property into a getter
* that executes a querySelectorAll on the element's renderRoot.
*/
export const queryAll = _query((target: NodeSelector, selector: string) =>
target.querySelectorAll(selector));
export const queryAll = _query(
(target: NodeSelector, selector: string) =>
target.querySelectorAll(selector));

const legacyQuery =
(descriptor: PropertyDescriptor, proto: Object,
name: PropertyKey) => { Object.defineProperty(proto, name, descriptor); };
(descriptor: PropertyDescriptor, proto: Object, name: PropertyKey) => {
Object.defineProperty(proto, name, descriptor);
};

const standardQuery = (descriptor: PropertyDescriptor, element: ClassElement) =>
({
kind : 'method',
placement : 'prototype',
key : element.key,
kind: 'method',
placement: 'prototype',
key: element.key,
descriptor,
});

Expand All @@ -173,33 +175,37 @@ const standardQuery = (descriptor: PropertyDescriptor, element: ClassElement) =>
* element.
*/
function _query<T>(queryFn: (target: NodeSelector, selector: string) => T) {
return (selector: string) => (protoOrDescriptor: Object|ClassElement,
name?: PropertyKey): any => {
const descriptor = {
get(this: LitElement) { return queryFn(this.renderRoot!, selector); },
enumerable : true,
configurable : true,
};
return (name !== undefined)
? legacyQuery(descriptor, protoOrDescriptor as Object, name)
: standardQuery(descriptor, protoOrDescriptor as ClassElement);
};
return (selector: string) =>
(protoOrDescriptor: Object|ClassElement,
name?: PropertyKey): any => {
const descriptor = {
get(this: LitElement) {
return queryFn(this.renderRoot!, selector);
},
enumerable: true,
configurable: true,
};
return (name !== undefined) ?
legacyQuery(descriptor, protoOrDescriptor as Object, name) :
standardQuery(descriptor, protoOrDescriptor as ClassElement);
};
}

const standardEventOptions =
(options: AddEventListenerOptions, element: ClassElement) => {
return {
...element,
finisher(clazz: typeof UpdatingElement) {
Object.assign(clazz.prototype[element.key as keyof UpdatingElement],
options);
Object.assign(
clazz.prototype[element.key as keyof UpdatingElement], options);
}
};
};

const legacyEventOptions =
(options: AddEventListenerOptions, proto: any,
name: PropertyKey) => { Object.assign(proto[name], options); };
(options: AddEventListenerOptions, proto: any, name: PropertyKey) => {
Object.assign(proto[name], options);
};

/**
* Adds event listener options to a method used as an event listener in a
Expand Down Expand Up @@ -234,7 +240,7 @@ export const eventOptions = (options: AddEventListenerOptions) =>
// TODO(kschaaf): unclear why it was only failing on this decorator and not
// the others
((protoOrDescriptor: Object|ClassElement, name?: string) =>
(name !== undefined)
? legacyEventOptions(options, protoOrDescriptor as Object, name)
: standardEventOptions(options,
protoOrDescriptor as ClassElement)) as any;
(name !== undefined) ?
legacyEventOptions(options, protoOrDescriptor as Object, name) :
standardEventOptions(options, protoOrDescriptor as ClassElement)) as
any;
Loading