From 3b3aef7c63bd0ff3ae3323d90b098fea22174b67 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 11 Mar 2021 08:58:30 -0500 Subject: [PATCH] remove guards that were added for old @watch --- docs/getting-started/changelog.md | 6 +++++- src/components/checkbox/checkbox.ts | 8 +++----- src/components/details/details.ts | 4 +--- src/components/input/input.ts | 4 +--- src/components/progress-ring/progress-ring.ts | 4 +--- src/components/radio/radio.ts | 10 ++++------ src/components/responsive-embed/responsive-embed.ts | 10 ++++------ src/components/tab-group/tab-group.ts | 12 +++++------- src/components/textarea/textarea.ts | 8 ++------ 9 files changed, 26 insertions(+), 40 deletions(-) diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index d8d81771..1d92b208 100644 --- a/docs/getting-started/changelog.md +++ b/docs/getting-started/changelog.md @@ -6,12 +6,16 @@ Components with the Experimental badge _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 +## Next + +- Improved `@watch` decorator so watch handlers don't run before the first render +- Removed guards that were added due to previous watch handler behavior + ## 2.0.0-beta.31 - Add touch support to `sl-rating` [#362](https://github.com/shoelace-style/shoelace/pull/362) - Fixed a bug where the `open` attribute on `sl-details` would prevent it from opening [#357](https://github.com/shoelace-style/shoelace/issues/357) - Fixed event detail type parsing so component class names are shown instead of `default` -- Improved `@watch` decorator so watch handlers don't run before the first render ## 2.0.0-beta.30 diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index b555a5fc..c479372f 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -105,11 +105,9 @@ export default class SlCheckbox extends LitElement { } handleStateChange() { - if (this.input) { - this.input.checked = this.checked; - this.input.indeterminate = this.indeterminate; - this.slChange.emit(); - } + this.input.checked = this.checked; + this.input.indeterminate = this.indeterminate; + this.slChange.emit(); } checkedChanged() { diff --git a/src/components/details/details.ts b/src/components/details/details.ts index 209de6a9..eed6ffab 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -162,9 +162,7 @@ export default class SlDetails extends LitElement { @watch('open') handleOpenChange() { - if (this.details) { - this.open ? this.show() : this.hide(); - } + this.open ? this.show() : this.hide(); } render() { diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 537a037b..c0e23f41 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -257,9 +257,7 @@ export default class SlInput extends LitElement { @watch('value') handleValueChange() { - if (this.input) { - this.invalid = !this.input.checkValidity(); - } + this.invalid = !this.input.checkValidity(); } render() { diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 485cb7db..77b4e101 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -32,9 +32,7 @@ export default class SlProgressRing extends LitElement { @watch('percentage') handlePercentageChange() { - if (this.indicator) { - this.updateProgress(); - } + this.updateProgress(); } updateProgress() { diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index f3da6f17..6df38b74 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -89,13 +89,11 @@ export default class SlRadio extends LitElement { @watch('checked') handleCheckedChange() { - if (this.input) { - if (this.checked) { - this.getSiblingRadios().map(radio => (radio.checked = false)); - } - this.input.checked = this.checked; - this.slChange.emit(); + if (this.checked) { + this.getSiblingRadios().map(radio => (radio.checked = false)); } + this.input.checked = this.checked; + this.slChange.emit(); } handleClick() { diff --git a/src/components/responsive-embed/responsive-embed.ts b/src/components/responsive-embed/responsive-embed.ts index e06509ff..2a388fe2 100644 --- a/src/components/responsive-embed/responsive-embed.ts +++ b/src/components/responsive-embed/responsive-embed.ts @@ -22,13 +22,11 @@ export default class SlResponsiveEmbed extends LitElement { @watch('aspectRatio') updateAspectRatio() { - if (this.base) { - const split = this.aspectRatio.split(':'); - const x = parseInt(split[0]); - const y = parseInt(split[1]); + const split = this.aspectRatio.split(':'); + const x = parseInt(split[0]); + const y = parseInt(split[1]); - this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : ''; - } + this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : ''; } render() { diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index c23ab07f..9f00bfca 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -197,13 +197,11 @@ export default class SlTabGroup extends LitElement { @watch('noScrollControls') updateScrollControls() { - if (this.nav) { - if (this.noScrollControls) { - this.hasScrollControls = false; - } else { - this.hasScrollControls = - ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth; - } + if (this.noScrollControls) { + this.hasScrollControls = false; + } else { + this.hasScrollControls = + ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth; } } diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 79039daa..c5f449e6 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -214,9 +214,7 @@ export default class SlTextarea extends LitElement { @watch('rows') handleRowsChange() { - if (this.input) { - this.setTextareaHeight(); - } + this.setTextareaHeight(); } @watch('helpText') @@ -228,9 +226,7 @@ export default class SlTextarea extends LitElement { @watch('value') handleValueChange() { - if (this.input) { - this.invalid = !this.input.checkValidity(); - } + this.invalid = !this.input.checkValidity(); } setTextareaHeight() {