falsy value check for context value

fastrepl · Sep 24, 2024 · f61c2ae · f61c2ae
1 parent fc871c1
commit f61c2ae
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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` <div class="tabs">
-            ${Array.from(this.mode.options).map(
+            ${Array.from(mode.options).map(
               (option, index) =>
                 html`<div
                   class=${classMap({
                     tab: true,
-                    selected: option === this.mode.current,
+                    selected: option === mode.current,
                     left: index === 0,
-                    right: index === this.mode.options.size - 1,
+                    right: index === mode.options.size - 1,
                   })}
                   @click=${() => 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}
                   />
                   <label>${option}</label>
                 </div>`,

diff --git 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
@@ -18,7 +18,7 @@ export class CanarySearch extends LitElement {
 
   @consume({ context: modeContext, subscribe: true })
   @state()
-  private _mode!: ModeContext;
+  private _mode?: ModeContext;
 
   private _containerRef = createRef<HTMLElement>();
 
@@ -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`
           <div class="container" part="container">