From f61c2aed98a0c4e0ddd5cb46afaef18cbad99062 Mon Sep 17 00:00:00 2001 From: yujonglee Date: Tue, 24 Sep 2024 14:43:42 +0900 Subject: [PATCH] falsy value check for context value --- .../web/src/components/canary-logo-cal.ts | 8 ++++++-- .../web/src/components/canary-logo-calendly.ts | 8 ++++++-- .../web/src/components/canary-logo-discord.ts | 8 ++++++-- .../web/src/components/canary-logo-github.ts | 8 ++++++-- .../web/src/components/canary-logo-slack.ts | 8 ++++++-- .../src/components/canary-mode-breadcrumb.ts | 12 +++++++----- .../web/src/components/canary-mode-tabs.ts | 17 +++++++++++------ .../web/src/components/canary-search-empty.ts | 6 ++++-- js/packages/web/src/components/canary-search.ts | 4 ++-- 9 files changed, 54 insertions(+), 25 deletions(-) diff --git a/js/packages/web/src/components/canary-logo-cal.ts b/js/packages/web/src/components/canary-logo-cal.ts index a1dc3928..6a93999d 100644 --- a/js/packages/web/src/components/canary-logo-cal.ts +++ b/js/packages/web/src/components/canary-logo-cal.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; @@ -17,9 +17,13 @@ const NAME = "canary-logo-cal"; export class CanaryLogoCal extends LitElement { @consume({ context: themeContext, subscribe: true }) @state() - theme!: ThemeContext; + theme?: ThemeContext; render() { + if (!this.theme) { + return nothing; + } + return html`${unsafeSVG(this.theme === "light" ? LIGHT : DARK)}`; } diff --git a/js/packages/web/src/components/canary-logo-calendly.ts b/js/packages/web/src/components/canary-logo-calendly.ts index 6270aaac..869560a9 100644 --- a/js/packages/web/src/components/canary-logo-calendly.ts +++ b/js/packages/web/src/components/canary-logo-calendly.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; @@ -17,9 +17,13 @@ const NAME = "canary-logo-calendly"; export class CanaryLogoCalendly extends LitElement { @consume({ context: themeContext, subscribe: true }) @state() - theme!: ThemeContext; + theme?: ThemeContext; render() { + if (!this.theme) { + return nothing; + } + return html`${unsafeSVG(this.theme === "light" ? LIGHT : DARK)}`; } diff --git a/js/packages/web/src/components/canary-logo-discord.ts b/js/packages/web/src/components/canary-logo-discord.ts index 4133e351..e15278db 100644 --- a/js/packages/web/src/components/canary-logo-discord.ts +++ b/js/packages/web/src/components/canary-logo-discord.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; @@ -17,9 +17,13 @@ const NAME = "canary-logo-discord"; export class CanaryLogoDiscord extends LitElement { @consume({ context: themeContext, subscribe: true }) @state() - theme!: ThemeContext; + theme?: ThemeContext; render() { + if (!this.theme) { + return nothing; + } + return html`${unsafeSVG(this.theme === "light" ? LIGHT : DARK)}`; } diff --git a/js/packages/web/src/components/canary-logo-github.ts b/js/packages/web/src/components/canary-logo-github.ts index dc89f134..c93b0605 100644 --- a/js/packages/web/src/components/canary-logo-github.ts +++ b/js/packages/web/src/components/canary-logo-github.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; @@ -17,9 +17,13 @@ const NAME = "canary-logo-github"; export class CanaryLogoGithub extends LitElement { @consume({ context: themeContext, subscribe: true }) @state() - theme!: ThemeContext; + theme?: ThemeContext; render() { + if (!this.theme) { + return nothing; + } + return html`${unsafeSVG(this.theme === "light" ? LIGHT : DARK)}`; } diff --git a/js/packages/web/src/components/canary-logo-slack.ts b/js/packages/web/src/components/canary-logo-slack.ts index e3e6e344..c74458ce 100644 --- a/js/packages/web/src/components/canary-logo-slack.ts +++ b/js/packages/web/src/components/canary-logo-slack.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; @@ -17,9 +17,13 @@ const NAME = "canary-logo-slack"; export class CanaryLogoSlack extends LitElement { @consume({ context: themeContext, subscribe: true }) @state() - theme!: ThemeContext; + theme?: ThemeContext; render() { + if (!this.theme) { + return nothing; + } + return html`${unsafeSVG(this.theme === "light" ? LIGHT : DARK)}`; } diff --git a/js/packages/web/src/components/canary-mode-breadcrumb.ts b/js/packages/web/src/components/canary-mode-breadcrumb.ts index aab0e738..877dd648 100644 --- a/js/packages/web/src/components/canary-mode-breadcrumb.ts +++ b/js/packages/web/src/components/canary-mode-breadcrumb.ts @@ -16,7 +16,7 @@ export class CanaryModeBreadcrumb extends LitElement { @consume({ context: modeContext, subscribe: true }) @state() - private _mode!: ModeContext; + private _mode?: ModeContext; render() { return html` @@ -39,10 +39,12 @@ export class CanaryModeBreadcrumb extends LitElement { } private _handleClick() { - const mode = - this._mode.default ?? - (this._mode.options.values().next().value as string); - this.dispatchEvent(createEvent({ type: "set_mode", data: mode })); + if (this._mode) { + const mode = + this._mode.default ?? + (this._mode.options.values().next().value as string); + this.dispatchEvent(createEvent({ type: "set_mode", data: mode })); + } } static styles = [ diff --git a/js/packages/web/src/components/canary-mode-tabs.ts b/js/packages/web/src/components/canary-mode-tabs.ts index bf8895ee..c0c92ac8 100644 --- a/js/packages/web/src/components/canary-mode-tabs.ts +++ b/js/packages/web/src/components/canary-mode-tabs.ts @@ -14,21 +14,26 @@ const NAME = "canary-mode-tabs"; export class CanaryModeTabs extends LitElement { @consume({ context: modeContext, subscribe: true }) @property({ attribute: false }) - mode!: ModeContext; + mode?: ModeContext; render() { + const mode = this.mode; + if (!mode) { + return nothing; + } + return html` - ${!this.mode.options || this.mode.options.size < 2 + ${!mode.options || mode.options.size < 2 ? nothing : html`
- ${Array.from(this.mode.options).map( + ${Array.from(mode.options).map( (option, index) => html`
this._handleClick(option)} > @@ -37,7 +42,7 @@ export class CanaryModeTabs extends LitElement { name="mode" .id=${option} .value=${option} - ?checked=${option === this.mode.current} + ?checked=${option === mode.current} />
`, diff --git a/js/packages/web/src/components/canary-search-empty.ts b/js/packages/web/src/components/canary-search-empty.ts index 7d477cee..a11e2072 100644 --- a/js/packages/web/src/components/canary-search-empty.ts +++ b/js/packages/web/src/components/canary-search-empty.ts @@ -13,13 +13,15 @@ const NAME = "canary-search-empty"; @customElement(NAME) export class CanarySearchEmpty extends LitElement { @consume({ context: queryContext, subscribe: true }) - private _query!: QueryContext; + private _query?: QueryContext; @consume({ context: executionContext, subscribe: true }) - private _execution!: ExecutionContext; + private _execution?: ExecutionContext; render() { if ( + !this._query || + !this._execution || this._execution.status !== TaskStatus.COMPLETE || this._execution.search.matches.length !== 0 || this._query.length === 0 diff --git a/js/packages/web/src/components/canary-search.ts b/js/packages/web/src/components/canary-search.ts index 7d98fd64..1b2c8f6f 100644 --- a/js/packages/web/src/components/canary-search.ts +++ b/js/packages/web/src/components/canary-search.ts @@ -18,7 +18,7 @@ export class CanarySearch extends LitElement { @consume({ context: modeContext, subscribe: true }) @state() - private _mode!: ModeContext; + private _mode?: ModeContext; private _containerRef = createRef(); @@ -28,7 +28,7 @@ export class CanarySearch extends LitElement { } render() { - return this._mode.current !== this.MODE + return !this._mode || this._mode.current !== this.MODE ? nothing : html`