Use nothing in more lit template (#15966)

* Use nothing in more lit template

* Use nothing in more lit template

src/components/ha-chip.ts

@@ -1,13 +1,6 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import {
+import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  TemplateResult,
-  unsafeCSS,
-} from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-chip")
@@ -18,14 +11,14 @@ export class HaChip extends LitElement {
 
   @property({ type: Boolean }) public noText = false;
 
-  protected render(): TemplateResult {
+  protected render() {
     return html`
       <div class="mdc-chip ${this.noText ? "no-text" : ""}">
         ${this.hasIcon
           ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
               <slot name="icon"></slot>
             </div>`
-          : null}
+          : nothing}
         <div class="mdc-chip__ripple"></div>
         <span role="gridcell">
           <span role="button" tabindex="0" class="mdc-chip__primary-action">
@@ -36,7 +29,7 @@ export class HaChip extends LitElement {
           ? html`<div class="mdc-chip__icon mdc-chip__icon--trailing">
               <slot name="trailing-icon"></slot>
             </div>`
-          : null}
+          : nothing}
       </div>
     `;
   }

src/components/ha-form/ha-form-expandable.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
 import "./ha-form";
@@ -26,7 +26,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: HaFormSchema) => string;
 
-  protected render(): TemplateResult {
+  protected render() {
     return html`
       <ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
         <div
@@ -38,7 +38,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
             ? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
             : this.schema.iconPath
             ? html` <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon> `
-            : null}
+            : nothing}
           ${this.schema.title}
         </div>
         <div class="content">

src/components/tile/ha-tile-image.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, css, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 
@@ -8,12 +8,12 @@ export class HaTileImage extends LitElement {
 
   @property() public imageAlt?: string;
 
-  protected render(): TemplateResult {
+  protected render() {
     return html`
       <div class="image">
         ${this.imageUrl
           ? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
-          : null}
+          : nothing}
       </div>
     `;
   }

src/components/tile/ha-tile-info.ts

@@ -1,4 +1,11 @@
-import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import {
+  CSSResultGroup,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  nothing,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-tile-info")
@@ -7,13 +14,13 @@ export class HaTileInfo extends LitElement {
 
   @property() public secondary?: string | TemplateResult<1>;
 
-  protected render(): TemplateResult {
+  protected render() {
     return html`
       <div class="info">
         <span class="primary">${this.primary}</span>
         ${this.secondary
           ? html`<span class="secondary">${this.secondary}</span>`
-          : null}
+          : nothing}
       </div>
     `;
   }

src/dialogs/more-info/controls/more-info-fan.ts

@@ -15,7 +15,6 @@ import {
   LitElement,
   nothing,
   PropertyValues,
-  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
@@ -114,9 +113,9 @@ class MoreInfoFan extends LitElement {
     }
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (!this.hass || !this.stateObj) {
-      return null;
+      return nothing;
     }
 
     const supportsSpeed = supportsFeature(
@@ -185,7 +184,7 @@ class MoreInfoFan extends LitElement {
                         <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
                       </md-outlined-icon-button>
                     `
-                  : null}
+                  : nothing}
                 ${supportsDirection
                   ? html`
                       <md-outlined-icon-button

src/dialogs/more-info/controls/more-info-input_boolean.ts

@@ -1,6 +1,6 @@
 import { mdiPower, mdiPowerOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
 import type { HomeAssistant } from "../../../types";
@@ -14,9 +14,9 @@ class MoreInfoInputBoolean extends LitElement {
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (!this.hass || !this.stateObj) {
-      return null;
+      return nothing;
     }
 
     return html`

src/dialogs/more-info/controls/more-info-light.ts

@@ -13,8 +13,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
+  nothing,
   PropertyValues,
-  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
@@ -62,9 +62,9 @@ class MoreInfoLight extends LitElement {
     }
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (!this.hass || !this.stateObj) {
-      return null;
+      return nothing;
     }
 
     const supportsColorTemp = lightSupportsColorMode(
@@ -137,7 +137,7 @@ class MoreInfoLight extends LitElement {
                         <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
                       </md-outlined-icon-button>
                     `
-                  : null}
+                  : nothing}
                 ${supportsColorTemp || supportsColor
                   ? html`
                       <md-outlined-icon-button
@@ -153,7 +153,7 @@ class MoreInfoLight extends LitElement {
                         <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
                       </md-outlined-icon-button>
                     `
-                  : null}
+                  : nothing}
                 ${supportsWhite
                   ? html`
                       <md-outlined-icon-button
@@ -169,7 +169,7 @@ class MoreInfoLight extends LitElement {
                         <ha-svg-icon .path=${mdiFileWordBox}></ha-svg-icon>
                       </md-outlined-icon-button>
                     `
-                  : null}
+                  : nothing}
                 ${supportsEffects && this.stateObj.attributes.effect_list
                   ? html`
                       <ha-button-menu
@@ -204,10 +204,10 @@ class MoreInfoLight extends LitElement {
                         )}
                       </ha-button-menu>
                     `
-                  : null}
+                  : nothing}
               </div>
             `
-          : null}
+          : nothing}
       </div>
 
       <ha-attributes

src/dialogs/more-info/controls/more-info-siren.ts

@@ -1,6 +1,6 @@
 import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
 import type { HomeAssistant } from "../../../types";
@@ -14,9 +14,9 @@ class MoreInfoSiren extends LitElement {
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (!this.hass || !this.stateObj) {
-      return null;
+      return nothing;
     }
 
     return html`

src/dialogs/more-info/controls/more-info-switch.ts

@@ -1,6 +1,6 @@
 import { mdiPower, mdiPowerOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
 import type { HomeAssistant } from "../../../types";
@@ -14,9 +14,9 @@ class MoreInfoSwitch extends LitElement {
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (!this.hass || !this.stateObj) {
-      return null;
+      return nothing;
     }
 
     return html`

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -308,7 +308,7 @@ export class QuickBar extends LitElement {
                 >${item.altText}</span
               >
             `
-          : null}
+          : nothing}
       </ha-list-item>
     `;
   }

src/dialogs/restart/dialog-restart.ts

@@ -126,7 +126,7 @@ class DialogRestart extends LitElement {
                         </span>
                       </ha-list-item>
                     `
-                  : null}
+                  : nothing}
                 <ha-list-item
                   graphic="avatar"
                   twoline
@@ -201,7 +201,7 @@ class DialogRestart extends LitElement {
                       </mwc-list>
                     </ha-expansion-panel>
                   `
-                : null}
+                : nothing}
             `}
       </ha-dialog>
     `;

src/panels/config/hardware/ha-config-hardware.ts

@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiPower } from "@mdi/js";
 import type { ChartOptions } from "chart.js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -209,7 +209,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected render(): TemplateResult {
+  protected render() {
     let boardId: string | undefined;
     let boardName: string | undefined;
     let imageURL: string | undefined;
@@ -343,7 +343,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                                 )}
                               </mwc-button>
                             `
-                          : null}
+                          : nothing}
                         ${isComponentLoaded(this.hass, "hassio")
                           ? html`
                               <mwc-button @click=${this._openHardware}>
@@ -352,7 +352,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                                 )}
                               </mwc-button>
                             `
-                          : null}
+                          : nothing}
                       </div>`
                     : ""}
                 </ha-card>

src/panels/config/integrations/ha-config-integrations.ts

@@ -7,8 +7,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
+  nothing,
   PropertyValues,
-  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -357,7 +357,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected render(): TemplateResult {
+  protected render() {
     if (!this._configEntries) {
       return html`<hass-loading-screen
         .hass=${this.hass}
@@ -531,7 +531,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     .supportsDiagnostics=${this._diagnosticHandlers
                       ? this._diagnosticHandlers[domain]
                       : false}
-                    .logInfo=${this._logInfos ? this._logInfos[domain] : null}
+                    .logInfo=${this._logInfos
+                      ? this._logInfos[domain]
+                      : nothing}
                   ></ha-integration-card>`
               )
             : this._filter &&

src/panels/lovelace/cards/hui-tile-card.ts

@@ -320,7 +320,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
-        ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : null}
+        ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : nothing}
         <div class="tile">
           <div
             class="background"
@@ -369,7 +369,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                       })}
                     ></ha-tile-badge>
                   `
-                : null}
+                : nothing}
             </div>
             <ha-tile-info
               class="info"

src/panels/lovelace/components/hui-color-picker.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-list/mwc-list-item";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import {
@@ -51,7 +51,7 @@ export class HuiColorPicker extends LitElement {
                 ${this.renderColorCircle(this.value || "grey")}
               </span>
             `
-          : null}
+          : nothing}
         <mwc-list-item value="default">
           ${this.hass.localize(
             `ui.panel.lovelace.editor.color-picker.default_color`

src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts

@@ -1,6 +1,6 @@
 import { mdiDelete, mdiDrag, mdiListBox, mdiPencil, mdiPlus } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import type { SortableEvent } from "sortablejs";
@@ -150,9 +150,9 @@ export class HuiTileCardFeaturesEditor extends LitElement {
       .filter((type) => this._supportsFeatureType(type));
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (!this.features || !this.hass) {
-      return null;
+      return nothing;
     }
 
     const supportedFeaturesType = this._getSupportedFeaturesType();
@@ -179,7 +179,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                   )}
                 </ha-alert>
               `
-            : null}
+            : nothing}
           <div class="features">
             ${repeat(
               this.features,
@@ -204,7 +204,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                                 )}
                               </span>
                             `
-                          : null}
+                          : nothing}
                       </div>
                     </div>
                     ${editable
@@ -220,7 +220,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                             .disabled=${!supported}
                           ></ha-icon-button>
                         `
-                      : null}
+                      : nothing}
                     <ha-icon-button
                       .label=${this.hass!.localize(
                         `ui.panel.lovelace.editor.card.tile.features.remove`
@@ -260,7 +260,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                   )}
                   ${types.length > 0 && customTypes.length > 0
                     ? html`<li divider role="separator"></li>`
-                    : null}
+                    : nothing}
                   ${customTypes.map(
                     (type) => html`
                       <ha-list-item .value=${type}>
@@ -270,7 +270,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                   )}
                 </ha-button-menu>
               `
-            : null}
+            : nothing}
         </div>
       </ha-expansion-panel>
     `;

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -111,7 +111,7 @@ export class HuiDialogSelectView extends LitElement {
                       <mwc-radio-list-item
                         .graphic=${this._config?.views.some(({ icon }) => icon)
                           ? "icon"
-                          : null}
+                          : nothing}
                         @click=${this._viewChanged}
                         .value=${idx.toString()}
                         .selected=${this._selectedViewIdx === idx}

src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts

@@ -1,6 +1,6 @@
 import { mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import {
@@ -74,14 +74,14 @@ class HuiCoverOpenCloseTileFeature
     });
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (
       !this._config ||
       !this.hass ||
       !this.stateObj ||
       !supportsCoverOpenCloseTileFeature(this.stateObj)
     ) {
-      return null;
+      return nothing;
     }
 
     return html`
@@ -100,7 +100,7 @@ class HuiCoverOpenCloseTileFeature
                 ></ha-svg-icon>
               </ha-control-button>
             `
-          : null}
+          : nothing}
         ${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
           ? html`
               <ha-control-button
@@ -113,7 +113,7 @@ class HuiCoverOpenCloseTileFeature
                 <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
               </ha-control-button>
             `
-          : null}
+          : nothing}
         ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
           ? html`
               <ha-control-button
@@ -128,7 +128,7 @@ class HuiCoverOpenCloseTileFeature
                 ></ha-svg-icon>
               </ha-control-button>
             `
-          : undefined}
+          : nothing}
       </ha-control-button-group>
     `;
   }

src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts

@@ -1,6 +1,6 @@
 import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@@ -70,14 +70,14 @@ class HuiCoverTiltTileFeature
     });
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (
       !this._config ||
       !this.hass ||
       !this.stateObj ||
       !supportsCoverTiltTileFeature
     ) {
-      return null;
+      return nothing;
     }
 
     return html`
@@ -94,7 +94,7 @@ class HuiCoverTiltTileFeature
                 <ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
               </ha-control-button>
             `
-          : null}
+          : nothing}
         ${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
           ? html`
               <ha-control-button
@@ -107,7 +107,7 @@ class HuiCoverTiltTileFeature
                 <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
               </ha-control-button>
             `
-          : null}
+          : nothing}
         ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
           ? html`
               <ha-control-button
@@ -120,7 +120,7 @@ class HuiCoverTiltTileFeature
                 <ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
               </ha-control-button>
             `
-          : undefined}
+          : nothing}
       </ha-control-button-group>
     `;
   }

src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -67,14 +67,14 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
     );
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (
       !this._config ||
       !this.hass ||
       !this.stateObj ||
       !supportsFanSpeedTileFeature(this.stateObj)
     ) {
-      return null;
+      return nothing;
     }
 
     const speedCount = computeFanSpeedCount(this.stateObj);

src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
@@ -39,14 +39,14 @@ class HuiLightBrightnessTileFeature
     this._config = config;
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (
       !this._config ||
       !this.hass ||
       !this.stateObj ||
       !supportsLightBrightnessTileFeature(this.stateObj)
     ) {
-      return null;
+      return nothing;
     }
 
     const position =

src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts

@@ -8,7 +8,7 @@ import {
   mdiTargetVariant,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@@ -169,14 +169,14 @@ class HuiVacuumCommandTileFeature
     });
   }
 
-  protected render(): TemplateResult | null {
+  protected render() {
     if (
       !this._config ||
       !this.hass ||
       !this.stateObj ||
       !supportsVacuumCommandTileFeature(this.stateObj)
     ) {
-      return null;
+      return nothing;
     }
 
     const stateObj = this.stateObj as VacuumEntity;