From 27aa4e3c876b05b657979376edd813608318c58f Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 13 Jun 2019 14:24:02 -0700 Subject: [PATCH 1/8] Test that returning undefined from the first call to `#render` doesn't remove shimmed adopted style sheets. --- src/test/lit-element_styling_test.ts | 46 ++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts index 731c44d2..60d60cb7 100644 --- a/src/test/lit-element_styling_test.ts +++ b/src/test/lit-element_styling_test.ts @@ -798,6 +798,52 @@ suite('Static get styles', () => { const bodyStyles = `${cssModule}`; assert.equal(bodyStyles, '.my-module { color: yellow; }'); }); + + test.only('Styles are not removed if the first rendered value is undefined.', async () => { + const localName = generateElementName(); + + class SomeCustomElement extends LitElement { + static styles = css`:host {border: 4px solid black;}`; + + renderUndefined: boolean; + + constructor() { + super(); + this.renderUndefined = true; + } + + static get properties() { + return { + renderUndefined: { + type: Boolean, + value: true, + }, + }; + } + + render() { + if (this.renderUndefined) { + return undefined; + } + + return htmlWithStyles`Some text.`; + } + } + customElements.define(localName, SomeCustomElement); + + const element = document.createElement(localName) as SomeCustomElement; + document.body.appendChild(element); + + await (element as LitElement).updateComplete; + assert.equal(getComputedStyle(element).getPropertyValue('border-top-width').trim(), '4px'); + + element.renderUndefined = false; + + await (element as LitElement).updateComplete; + assert.equal(getComputedStyle(element).getPropertyValue('border-top-width').trim(), '4px'); + + document.body.removeChild(element); + }); }); suite('ShadyDOM', () => { From 1af58d75573470daaff007e446b228f838786c09 Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 13 Jun 2019 14:31:26 -0700 Subject: [PATCH 2/8] Render any value returned by `#render`. --- src/lit-element.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/lit-element.ts b/src/lit-element.ts index f5b9f446..c1c4c737 100644 --- a/src/lit-element.ts +++ b/src/lit-element.ts @@ -209,14 +209,11 @@ export class LitElement extends UpdatingElement { */ protected update(changedProperties: PropertyValues) { super.update(changedProperties); - const templateResult = this.render() as unknown; - if (templateResult instanceof TemplateResult) { - (this.constructor as typeof LitElement) - .render( - templateResult, - this.renderRoot, - {scopeName: this.localName, eventContext: this}); - } + (this.constructor as typeof LitElement) + .render( + this.render(), + this.renderRoot, + {scopeName: this.localName, eventContext: this}); // When native Shadow DOM is used but adoptedStyles are not supported, // insert styling after rendering to ensure adoptedStyles have highest // priority. From c5235ccaa3defa9b39a0f56858803349c629cd9d Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 13 Jun 2019 14:51:43 -0700 Subject: [PATCH 3/8] Update change log. --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 505a261b..bbba534e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,9 +10,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/). Unreleased section, uncommenting the header as necessary. --> - +## Unreleased - +### Changed +* The value returned by `render` is always rendered, even if it isn't a `TemplateResult`. ([#712](https://github.com/Polymer/lit-element/issues/712) From cb575300c7915a72cac76cddfacdaaa789b2f217 Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 13 Jun 2019 14:53:40 -0700 Subject: [PATCH 4/8] format --- src/test/lit-element_styling_test.ts | 78 ++++++++++++++++------------ 1 file changed, 44 insertions(+), 34 deletions(-) diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts index 60d60cb7..3a487871 100644 --- a/src/test/lit-element_styling_test.ts +++ b/src/test/lit-element_styling_test.ts @@ -799,51 +799,61 @@ suite('Static get styles', () => { assert.equal(bodyStyles, '.my-module { color: yellow; }'); }); - test.only('Styles are not removed if the first rendered value is undefined.', async () => { - const localName = generateElementName(); + test.only( + 'Styles are not removed if the first rendered value is undefined.', + async () => { + const localName = generateElementName(); - class SomeCustomElement extends LitElement { - static styles = css`:host {border: 4px solid black;}`; + class SomeCustomElement extends LitElement { + static styles = css`:host {border: 4px solid black;}`; - renderUndefined: boolean; + renderUndefined: boolean; - constructor() { - super(); - this.renderUndefined = true; - } + constructor() { + super(); + this.renderUndefined = true; + } - static get properties() { - return { - renderUndefined: { - type: Boolean, - value: true, - }, - }; - } + static get properties() { + return { + renderUndefined: { + type: Boolean, + value: true, + }, + }; + } - render() { - if (this.renderUndefined) { - return undefined; - } + render() { + if (this.renderUndefined) { + return undefined; + } - return htmlWithStyles`Some text.`; - } - } - customElements.define(localName, SomeCustomElement); + return htmlWithStyles`Some text.`; + } + } + customElements.define(localName, SomeCustomElement); - const element = document.createElement(localName) as SomeCustomElement; - document.body.appendChild(element); + const element = document.createElement(localName) as SomeCustomElement; + document.body.appendChild(element); - await (element as LitElement).updateComplete; - assert.equal(getComputedStyle(element).getPropertyValue('border-top-width').trim(), '4px'); + await (element as LitElement).updateComplete; + assert.equal( + getComputedStyle(element) + .getPropertyValue('border-top-width') + .trim(), + '4px'); - element.renderUndefined = false; + element.renderUndefined = false; - await (element as LitElement).updateComplete; - assert.equal(getComputedStyle(element).getPropertyValue('border-top-width').trim(), '4px'); + await (element as LitElement).updateComplete; + assert.equal( + getComputedStyle(element) + .getPropertyValue('border-top-width') + .trim(), + '4px'); - document.body.removeChild(element); - }); + document.body.removeChild(element); + }); }); suite('ShadyDOM', () => { From 9812a9f476c0ffb7e507d5d3c55957c2efe141ad Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Wed, 10 Jul 2019 10:35:26 -0700 Subject: [PATCH 5/8] Update lit-html dependency to v1.1.1. --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 36d6b883..d967c8ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7285,9 +7285,9 @@ } }, "lit-html": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.0.tgz", - "integrity": "sha512-ZDJHpJi09yknMpjwPI8fuSl5sUG7+pF+eE5WciFtgyX7zebvgMDBgSLq4knXa7grxM00RkQ7PBd7UZQiruA78Q==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.1.tgz", + "integrity": "sha512-1WqhkPpj+CKwLRXCCbyRGnWkcFKE4ft2+j8C2zaXwFUK9I2vYDzTuDGPh0H9hZcDBEwoe6YpPC8AO5734EPORQ==" }, "load-json-file": { "version": "4.0.0", diff --git a/package.json b/package.json index 3e8b869a..d23db400 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ }, "typings": "lit-element.d.ts", "dependencies": { - "lit-html": "^1.0.0" + "lit-html": "^1.1.1" }, "publishConfig": { "access": "public" From 33df4aaca91a98ca2c1e3be7434d4031db19831e Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 5 Sep 2019 16:16:49 -0700 Subject: [PATCH 6/8] Update types for static and instance `render` methods. --- src/lit-element.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/lit-element.ts b/src/lit-element.ts index a65fa6da..08c1b368 100644 --- a/src/lit-element.ts +++ b/src/lit-element.ts @@ -11,7 +11,6 @@ * subject to an additional IP rights grant found at * http://polymer.github.io/PATENTS.txt */ -import {TemplateResult} from 'lit-html'; import {render} from 'lit-html/lib/shady-render.js'; import {PropertyValues, UpdatingElement} from './lib/updating-element.js'; @@ -68,10 +67,10 @@ export class LitElement extends UpdatingElement { * optimizations. See updating-element.ts for more information. */ protected static['finalized'] = true; + /** - * Render method used to render the lit-html TemplateResult to the element's - * DOM. - * @param {TemplateResult} Template to render. + * Render method used to render the value to the element's DOM. + * @param {unknown} The value to render. * @param {Element|DocumentFragment} Node into which to render. * @param {String} Element name. * @nocollapse @@ -233,10 +232,12 @@ export class LitElement extends UpdatingElement { } /** - * Invoked on each update to perform rendering tasks. This method must return - * a lit-html TemplateResult. Setting properties inside this method will *not* - * trigger the element to update. + * Invoked on each update to perform rendering tasks. This method may return + * any value renderable by lit-html's NodePart - typically a TemplateResult. + * Setting properties inside this method will *not* trigger the element to + * update. */ - protected render(): TemplateResult|void { + protected render(): unknown { + return undefined; } } From ded5f63f2c3bc521ac7a5d20c06ba15328f8ede8 Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 5 Sep 2019 16:33:42 -0700 Subject: [PATCH 7/8] Add type for static `render` function. Fix types in comments. --- src/lit-element.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/lit-element.ts b/src/lit-element.ts index 08c1b368..051afdc0 100644 --- a/src/lit-element.ts +++ b/src/lit-element.ts @@ -11,7 +11,7 @@ * subject to an additional IP rights grant found at * http://polymer.github.io/PATENTS.txt */ -import {render} from 'lit-html/lib/shady-render.js'; +import {render, ShadyRenderOptions} from 'lit-html/lib/shady-render.js'; import {PropertyValues, UpdatingElement} from './lib/updating-element.js'; @@ -58,7 +58,6 @@ const flattenStyles = (styles: CSSResultArray): CSSResult[] => styles.flat ? styles.flat(Infinity) : arrayFlat(styles); export class LitElement extends UpdatingElement { - /** * Ensure this class is marked as `finalized` as an optimization ensuring * it will not needlessly try to `finalize`. @@ -70,12 +69,14 @@ export class LitElement extends UpdatingElement { /** * Render method used to render the value to the element's DOM. - * @param {unknown} The value to render. - * @param {Element|DocumentFragment} Node into which to render. - * @param {String} Element name. + * @param result The value to render. + * @param container Node into which to render. + * @param options Element name. * @nocollapse */ - static render = render; + static render: + (result: unknown, container: Element|DocumentFragment, + options: ShadyRenderOptions) => void = render; /** * Array of styles to apply to the element. The styles should be defined From 81ccca307cb9bcb06a294da6b640bd9b270bdcb6 Mon Sep 17 00:00:00 2001 From: Russell Bicknell Date: Thu, 5 Sep 2019 16:39:41 -0700 Subject: [PATCH 8/8] `test.only` -> `test` --- src/test/lit-element_styling_test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts index 3a487871..fb7eaa9e 100644 --- a/src/test/lit-element_styling_test.ts +++ b/src/test/lit-element_styling_test.ts @@ -799,7 +799,7 @@ suite('Static get styles', () => { assert.equal(bodyStyles, '.my-module { color: yellow; }'); }); - test.only( + test( 'Styles are not removed if the first rendered value is undefined.', async () => { const localName = generateElementName();