From 0eda7411044c7cd4199e7d7b22bc79de3cd38245 Mon Sep 17 00:00:00 2001 From: Justin Fagnani Date: Wed, 18 Mar 2020 13:06:28 -0700 Subject: [PATCH] Prepare 2.3.0 release (#933) * Prepare 2.3.0 release * Format * Fix formatting --- CHANGELOG.md | 2 +- package.json | 2 +- src/lib/decorators.ts | 3 +- src/lib/updating-element.ts | 13 +- src/lit-element.ts | 2 +- src/test/lib/decorators_test.ts | 10 +- src/test/lib/updating-element_test.ts | 207 ++++++++++++++------------ 7 files changed, 126 insertions(+), 113 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d393a85..8a4baeb6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). -## [2.3.0-pre.1] - 2020-03-17 +## [2.3.0] - 2020-03-18 ### Changed * Added a static `getPropertyDescriptor` method to allow easier customization of property accessors. This method should return a a `PropertyDescriptor` to install on the property. If no descriptor is returned, no property accessor is created. ([#911](https://github.com/Polymer/lit-element/issues/911)) diff --git a/package.json b/package.json index 57d0da60..e5698be0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lit-element", - "version": "2.3.0-pre.1", + "version": "2.3.0", "description": "A simple base class for creating fast, lightweight web components", "license": "BSD-3-Clause", "homepage": "https://lit-element.polymer-project.org/", diff --git a/src/lib/decorators.ts b/src/lib/decorators.ts index 001036e6..f765320d 100644 --- a/src/lib/decorators.ts +++ b/src/lib/decorators.ts @@ -286,7 +286,8 @@ export function queryAsync(selector: string) { * * @param selector A DOMString containing one or more selectors to match. * - * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll + * See: + * https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll * * @example * diff --git a/src/lib/updating-element.ts b/src/lib/updating-element.ts index 376cb619..2b46813e 100644 --- a/src/lib/updating-element.ts +++ b/src/lib/updating-element.ts @@ -51,7 +51,8 @@ export interface ComplexAttributeConverter { } type AttributeConverter = - ComplexAttributeConverter|((value: string|null, type?: TypeHint) => Type); + ComplexAttributeConverter| + ((value: string|null, type?: TypeHint) => Type); /** * Defines options for a property accessor. @@ -112,7 +113,6 @@ export interface PropertyDeclaration { * the property changes. */ readonly noAccessor?: boolean; - } /** @@ -333,7 +333,8 @@ export abstract class UpdatingElement extends HTMLElement { * * class MyElement extends LitElement { * static getPropertyDescriptor(name, key, options) { - * const defaultDescriptor = super.getPropertyDescriptor(name, key, options); + * const defaultDescriptor = + * super.getPropertyDescriptor(name, key, options); * const setter = defaultDescriptor.set; * return { * get: defaultDescriptor.get, @@ -349,8 +350,8 @@ export abstract class UpdatingElement extends HTMLElement { * * @nocollapse */ - protected static getPropertyDescriptor(name: PropertyKey, - key: string|symbol, _options: PropertyDeclaration) { + protected static getPropertyDescriptor( + name: PropertyKey, key: string|symbol, _options: PropertyDeclaration) { return { // tslint:disable-next-line:no-any no symbol in index get(): any { @@ -381,7 +382,7 @@ export abstract class UpdatingElement extends HTMLElement { */ protected static getPropertyOptions(name: PropertyKey) { return this._classProperties && this._classProperties.get(name) || - defaultPropertyDeclaration; + defaultPropertyDeclaration; } /** diff --git a/src/lit-element.ts b/src/lit-element.ts index 800f1675..d868c34c 100644 --- a/src/lit-element.ts +++ b/src/lit-element.ts @@ -31,7 +31,7 @@ declare global { // This line will be used in regexes to search for LitElement usage. // TODO(justinfagnani): inject version number at build time (window['litElementVersions'] || (window['litElementVersions'] = [])) - .push('2.3.0-pre.1'); + .push('2.3.0'); export interface CSSResultArray extends Array {} diff --git a/src/test/lib/decorators_test.ts b/src/test/lib/decorators_test.ts index cd79eff4..10caaf2d 100644 --- a/src/test/lib/decorators_test.ts +++ b/src/test/lib/decorators_test.ts @@ -461,22 +461,20 @@ suite('decorators', () => { }); suite('@queryAsync', () => { - @customElement(generateElementName() as keyof HTMLElementTagNameMap) class C extends LitElement { @queryAsync('#blah') blah!: Promise; @queryAsync('span') nope!: Promise; - @property() - foo = false; + @property() foo = false; render() { return html`
Not this one
- ${this.foo ? - html`
This one
` : - html`
This one
` } + ${ + this.foo ? html`
This one
` : + html`
This one
`} `; } } diff --git a/src/test/lib/updating-element_test.ts b/src/test/lib/updating-element_test.ts index e7cb3022..72c96e3c 100644 --- a/src/test/lib/updating-element_test.ts +++ b/src/test/lib/updating-element_test.ts @@ -12,8 +12,8 @@ * http://polymer.github.io/PATENTS.txt */ -import {property, customElement} from '../../lib/decorators.js'; -import {ComplexAttributeConverter, PropertyDeclarations, PropertyValues, UpdatingElement, PropertyDeclaration, defaultConverter} from '../../lib/updating-element.js'; +import {customElement, property} from '../../lib/decorators.js'; +import {ComplexAttributeConverter, defaultConverter, PropertyDeclaration, PropertyDeclarations, PropertyValues, UpdatingElement} from '../../lib/updating-element.js'; import {generateElementName} from '../test-helpers.js'; // tslint:disable:no-any ok in tests @@ -1429,36 +1429,39 @@ suite('UpdatingElement', () => { assert.equal(el.updatedText, '6'); }); - test('setting properties in update after calling `super.update` *does* trigger update', async () => { - class E extends UpdatingElement { - static get properties() { - return {foo: {}}; - } - promiseFulfilled = false; - foo = 0; - updateCount = 0; - updatedText = ''; + test( + 'setting properties in update after calling `super.update` *does* trigger update', + async () => { + class E extends UpdatingElement { + static get properties() { + return {foo: {}}; + } + promiseFulfilled = false; + foo = 0; + updateCount = 0; + updatedText = ''; - update(props: PropertyValues) { - this.updateCount++; - super.update(props); - if (this.foo < 1) { - this.foo++; - } - } + update(props: PropertyValues) { + this.updateCount++; + super.update(props); + if (this.foo < 1) { + this.foo++; + } + } - updated() { - this.updatedText = `${this.foo}`; - } - } - customElements.define(generateElementName(), E); - const el = new E(); - container.appendChild(el); - while (!(await el.updateComplete)) {} - assert.equal(el.foo, 1); - assert.equal(el.updateCount, 2); - assert.equal(el.updatedText, '1'); - }); + updated() { + this.updatedText = `${this.foo}`; + } + } + customElements.define(generateElementName(), E); + const el = new E(); + container.appendChild(el); + while (!(await el.updateComplete)) { + } + assert.equal(el.foo, 1); + assert.equal(el.updateCount, 2); + assert.equal(el.updatedText, '1'); + }); test( 'setting properties in update reflects to attribute and is included in `changedProperties`', @@ -1802,68 +1805,62 @@ suite('UpdatingElement', () => { assert.equal(sub.getAttribute('foo'), '5'); }); - test('can provide a default property declaration', async () => { - - const SpecialNumber = {}; - - const myPropertyDeclaration = { - type: SpecialNumber, - reflect: true, - converter: { - toAttribute: function(value: unknown, type?: unknown): unknown { - switch (type) { - case String: - return value === undefined ? null : value; - default: - return defaultConverter.toAttribute!(value, type); - } - }, - fromAttribute: function(value: string|null, type?: unknown) { - switch (type) { - case SpecialNumber: - return Number(value) + 10; - default: - return defaultConverter.fromAttribute!(value, type); - } - } + test('can provide a default property declaration', async () => { + const SpecialNumber = {}; + + const myPropertyDeclaration = { + type: SpecialNumber, + reflect: true, + converter: { + toAttribute: function(value: unknown, type?: unknown): unknown { + switch (type) { + case String: + return value === undefined ? null : value; + default: + return defaultConverter.toAttribute!(value, type); } - }; - - @customElement(generateElementName()) - class E extends UpdatingElement { - - static createProperty( - name: PropertyKey, - options: PropertyDeclaration) { - // Always mix into defaults to preserve custom converter. - options = Object.assign(Object.create(myPropertyDeclaration), options); - super.createProperty(name, options); + }, + fromAttribute: function(value: string|null, type?: unknown) { + switch (type) { + case SpecialNumber: + return Number(value) + 10; + default: + return defaultConverter.fromAttribute!(value, type); } + } + } + }; - @property() - foo = 5; + @customElement(generateElementName()) + class E extends UpdatingElement { + static createProperty(name: PropertyKey, options: PropertyDeclaration) { + // Always mix into defaults to preserve custom converter. + options = Object.assign(Object.create(myPropertyDeclaration), options); + super.createProperty(name, options); + } - @property({type: String}) - bar?: string = 'bar'; - } + @property() foo = 5; - const el = new E(); - container.appendChild(el); - el.setAttribute('foo', '10'); - el.setAttribute('bar', 'attrBar'); - await el.updateComplete; - assert.equal(el.foo, 20); - assert.equal(el.bar, 'attrBar'); - el.foo = 5; - el.bar = undefined; - await el.updateComplete; - assert.equal(el.getAttribute('foo'), '5'); - assert.isFalse(el.hasAttribute('bar')); - }); + @property({type: String}) bar?: string = 'bar'; + } - test('can customize property options and accessor creation', async () => { + const el = new E(); + container.appendChild(el); + el.setAttribute('foo', '10'); + el.setAttribute('bar', 'attrBar'); + await el.updateComplete; + assert.equal(el.foo, 20); + assert.equal(el.bar, 'attrBar'); + el.foo = 5; + el.bar = undefined; + await el.updateComplete; + assert.equal(el.getAttribute('foo'), '5'); + assert.isFalse(el.hasAttribute('bar')); + }); - interface MyPropertyDeclaration extends PropertyDeclaration { + test('can customize property options and accessor creation', async () => { + interface MyPropertyDeclaration extends + PropertyDeclaration { validator?: (value: any) => TypeHint; observer?: (oldValue: TypeHint) => void; } @@ -1876,18 +1873,21 @@ suite('UpdatingElement', () => { @customElement(generateElementName()) class E extends UpdatingElement { - - static getPropertyDescriptor(name: PropertyKey, key: string|symbol, options: MyPropertyDeclaration) { - const defaultDescriptor = super.getPropertyDescriptor(name, key, options); + static getPropertyDescriptor( + name: PropertyKey, key: string|symbol, + options: MyPropertyDeclaration) { + const defaultDescriptor = + super.getPropertyDescriptor(name, key, options); return { get: defaultDescriptor.get, set(this: E, value: unknown) { const oldValue = - (this as unknown as {[key: string]: unknown})[name as string]; + (this as unknown as {[key: string]: unknown})[name as string]; if (options.validator) { value = options.validator(value); } - (this as unknown as {[key: string]: unknown})[key as string] = value; + (this as unknown as {[key: string]: unknown})[key as string] = + value; (this as unknown as UpdatingElement).requestUpdate(name, oldValue); }, @@ -1900,7 +1900,7 @@ suite('UpdatingElement', () => { super.updated(changedProperties); changedProperties.forEach((value: unknown, key: PropertyKey) => { const options = (this.constructor as typeof UpdatingElement) - .getPropertyOptions(key) as MyPropertyDeclaration; + .getPropertyOptions(key) as MyPropertyDeclaration; const observer = options.observer; if (typeof observer === 'function') { observer.call(this, value); @@ -1909,11 +1909,13 @@ suite('UpdatingElement', () => { } // provide custom deorator expecting extended type - @myProperty({type: Number, validator: (value: number) => Math.min(10, Math.max(value, 0))}) + @myProperty({ + type: Number, + validator: (value: number) => Math.min(10, Math.max(value, 0)) + }) foo = 5; - @property({}) - bar = 'bar'; + @property({}) bar = 'bar'; // tslint:disable-next-line:no-any _observedZot?: any; @@ -1922,7 +1924,11 @@ suite('UpdatingElement', () => { _observedZot2?: any; // use regular decorator and cast to type - @property({observer: function(this: E, oldValue: string) { this._observedZot = {value: this.zot, oldValue}; } } as PropertyDeclaration) + @property({ + observer: function(this: E, oldValue: string) { + this._observedZot = {value: this.zot, oldValue}; + } + } as PropertyDeclaration) zot = ''; zot2 = ''; @@ -1933,9 +1939,16 @@ suite('UpdatingElement', () => { static get properties(): MyPropertyDeclarations { return { // object cast as type - zot2: {observer: function(this: E, oldValue: string) { this._observedZot2 = {value: this.zot2, oldValue}; } } as PropertyDeclaration, + zot2: { + observer: function(this: E, oldValue: string) { + this._observedZot2 = {value: this.zot2, oldValue}; + } + } as PropertyDeclaration, // object satisfying defined custom type. - foo2: {type: Number, validator: (value: number) => Math.min(10, Math.max(value, 0))} + foo2: { + type: Number, + validator: (value: number) => Math.min(10, Math.max(value, 0)) + } }; } }