Skip to content

Schedules requestUpdate in initialize rather than connectedCallback #606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 14, 2019
Merged

Schedules requestUpdate in initialize rather than connectedCallback #606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee690f6
Schedules `requestUpdate` in `initialize` rather than `connectedCallb…
Mar 12, 2019
6c26450
Update CHANGELOG.md
Mar 12, 2019
4f4f078
Update test to use helper to append/remove elements
Mar 12, 2019
5c393f8
Merge branch 'master' into early-request-update
Mar 14, 2019
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
* `LitElement.renderRoot` is now `public readonly` instead of `protected`.

### Fixed
* Initial update is scheduled at construction time rather than connected time ([#594](https://github.com/Polymer/lit-element/issues/594)).
* A reflecting property set immediately after a corresponding attribute
now reflects properly ([#592](https://github.com/Polymer/lit-element/issues/592)).
* Properties annotated with the `@query` and `@queryAll` decorators will now
Expand Down
6 changes: 3 additions & 3 deletions src/lib/updating-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,8 @@ export abstract class UpdatingElement extends HTMLElement {
*/
protected initialize() {
this._saveInstanceProperties();
// ensures first update will be caught by an early access of `updateComplete`
this.requestUpdate();
}

/**
Expand Down Expand Up @@ -484,15 +486,13 @@ export abstract class UpdatingElement extends HTMLElement {

connectedCallback() {
this._updateState = this._updateState | STATE_HAS_CONNECTED;
// Ensure connection triggers an update. Updates cannot complete before
// Ensure first connection completes an update. Updates cannot complete before
// connection and if one is pending connection the `_hasConnectionResolver`
// will exist. If so, resolve it to complete the update, otherwise
// requestUpdate.
if (this._hasConnectedResolver) {
this._hasConnectedResolver();
this._hasConnectedResolver = undefined;
} else {
this.requestUpdate();
Copy link
Member

@kevinpschaaf kevinpschaaf Mar 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary here is we're considering the fact that requestUpdate was called every connection a bug, since the intention of this code was only to ensure a "request if not yet requested" one time on boot-up.

If users depend on tree-state in render(), they should manually requestUpdate in connectedCallback to ensure render is called when the tree state changes.

}
}

Expand Down
27 changes: 22 additions & 5 deletions src/test/lib/updating-element_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2202,11 +2202,6 @@ suite('UpdatingElement', () => {

@property() foo = 5;

constructor() {
super();
this.requestUpdate();
}

updated(_changedProperties: Map<PropertyKey, unknown>) {
this.updatedCalledCount++;
}
Expand All @@ -2220,6 +2215,28 @@ suite('UpdatingElement', () => {
assert.equal(a.updatedCalledCount, 1);
});

test('early access of updateComplete waits until first update', async() => {
class A extends UpdatingElement {
didUpdate = false;

updated(_changedProperties: Map<PropertyKey, unknown>) {
this.didUpdate = true;
}
}
customElements.define(generateElementName(), A);
const a = new A();
let updated = false;
a.updateComplete.then(() => {
updated = true;
assert.isTrue(a.didUpdate);
});
await new Promise((r) => setTimeout(r, 20));
assert.isFalse(updated);
container.appendChild(a);
await a.updateComplete;
assert.isTrue(updated);
});

test('property reflects after setting attribute in same update cycle', async () => {
class A extends UpdatingElement {

Expand Down