Fix decorators with properties (#25282)

* Fix decorators with properties

* Green build

---------

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

src/common/decorators/storage.ts

@@ -1,6 +1,5 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { ReactiveElement } from "lit";
+import type { ReactiveElement } from "lit";
-import type { InternalPropertyDeclaration } from "lit/decorators";
 
 type Callback = (oldValue: any, newValue: any) => void;
 
@@ -108,7 +107,6 @@ export function storage(options: {
   storage?: "localStorage" | "sessionStorage";
   subscribe?: boolean;
   state?: boolean;
-  stateOptions?: InternalPropertyDeclaration;
   serializer?: (value: any) => any;
   deserializer?: (value: any) => any;
 }) {
@@ -174,7 +172,7 @@ export function storage(options: {
       performUpdate.call(this);
     };
 
-    if (options.state && options.subscribe) {
+    if (options.subscribe) {
       const connectedCallback = proto.connectedCallback;
       const disconnectedCallback = proto.disconnectedCallback;
 
@@ -192,12 +190,6 @@ export function storage(options: {
         el.__unbsubLocalStorage = undefined;
       };
     }
-    if (options.state) {
-      ReactiveElement.createProperty(propertyKey, {
-        noAccessor: true,
-        ...options.stateOptions,
-      });
-    }
 
     const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey);
     let newDescriptor: PropertyDescriptor;

src/common/decorators/transform.ts

@@ -1,10 +1,4 @@
-import {
+import type { ReactiveElement, PropertyValues } from "lit";
-  ReactiveElement,
-  type PropertyDeclaration,
-  type PropertyValues,
-} from "lit";
-import { shallowEqual } from "../util/shallow-equal";
-
 /**
  * Transform function type.
  */
@@ -23,7 +17,6 @@ type ReactiveTransformElement = ReactiveElement & {
 export function transform<T, V>(config: {
   transformer: Transformer<T, V>;
   watch?: PropertyKey[];
-  propertyOptions?: PropertyDeclaration;
 }) {
   return <ElemClass extends ReactiveElement>(
     proto: ElemClass,
@@ -84,11 +77,6 @@ export function transform<T, V>(config: {
         curWatch.add(propertyKey);
       });
     }
-    ReactiveElement.createProperty(propertyKey, {
-      noAccessor: true,
-      hasChanged: (v: any, o: any) => !shallowEqual(v, o),
-      ...config.propertyOptions,
-    });
 
     const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey);
     let newDescriptor: PropertyDescriptor;

src/components/ha-sidebar.ts

@@ -210,6 +210,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private _unsubPersistentNotifications: UnsubscribeFunc | undefined;
 
+  @state()
   @storage({
     key: "sidebarPanelOrder",
     state: true,
@@ -217,6 +218,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   })
   private _panelOrder: string[] = [];
 
+  @state()
   @storage({
     key: "sidebarHiddenPanels",
     state: true,

src/components/media-player/ha-browse-media-tts.ts

@@ -42,6 +42,7 @@ class BrowseMediaTTS extends LitElement {
 
   @state() private _provider?: TTSEngine;
 
+  @state()
   @storage({
     key: "TtsMessage",
     state: true,

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -36,6 +36,7 @@ export class HaVoiceCommandDialog extends LitElement {
 
   @state() private _opened = false;
 
+  @state()
   @storage({
     key: "AssistPipelineId",
     state: true,

src/panels/calendar/ha-panel-calendar.ts

@@ -42,6 +42,7 @@ class PanelCalendar extends LitElement {
 
   @state() private _error?: string = undefined;
 
+  @state()
   @storage({
     key: "deSelectedCalendars",
     state: true,

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -69,6 +69,7 @@ export class HaConfigApplicationCredentials extends LitElement {
   })
   private _activeHiddenColumns?: string[];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "application-credentials-table-search",

src/panels/config/automation/action/ha-automation-action.ts

@@ -36,6 +36,7 @@ export default class HaAutomationAction extends LitElement {
 
   @state() private _showReorder = false;
 
+  @state()
   @storage({
     key: "automationClipboard",
     state: true,

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -36,6 +36,7 @@ export default class HaAutomationCondition extends LitElement {
 
   @state() private _showReorder = false;
 
+  @state()
   @storage({
     key: "automationClipboard",
     state: true,

src/panels/config/automation/ha-automation-editor.ts

@@ -135,6 +135,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
 
   @state() private _blueprintConfig?: BlueprintAutomationConfig;
 
+  @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   @transform<EntityRegistryEntry[], EntityRegistryEntry>({
     transformer: function (this: HaAutomationEditor, value) {

src/panels/config/automation/ha-automation-picker.ts

@@ -138,6 +138,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
 
   @state() private _filteredAutomations?: string[] | null;
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "automation-table-search",
@@ -146,6 +147,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   })
   private _filter = "";
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "automation-table-filters-full",

src/panels/config/automation/option/ha-automation-option.ts

@@ -29,6 +29,7 @@ export default class HaAutomationOption extends LitElement {
 
   @state() private _showReorder = false;
 
+  @state()
   @storage({
     key: "automationClipboard",
     state: true,

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -38,6 +38,7 @@ export default class HaAutomationTrigger extends LitElement {
 
   @state() private _showReorder = false;
 
+  @state()
   @storage({
     key: "automationClipboard",
     state: true,

src/panels/config/backup/ha-config-backup-backups.ts

@@ -98,6 +98,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
 
   @state() private _selected: string[] = [];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "backups-table-filters",

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -9,7 +9,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -118,6 +118,7 @@ class HaBlueprintOverview extends LitElement {
   })
   private _activeHiddenColumns?: string[];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "blueprint-table-search",
@@ -499,9 +500,11 @@ class HaBlueprintOverview extends LitElement {
             list: html`<ul>
               ${[...(related.automation || []), ...(related.script || [])].map(
                 (item) => {
-                  const state = this.hass.states[item];
+                  const automationState = this.hass.states[item];
                   return html`<li>
-                    ${state ? `${computeStateName(state)} (${item})` : item}
+                    ${automationState
+                      ? `${computeStateName(automationState)} (${item})`
+                      : item}
                   </li>`;
                 }
               )}

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -120,6 +120,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _selected: string[] = [];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "devices-table-search",
@@ -128,6 +129,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
   })
   private _filter: string = history.state?.filter || "";
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "devices-table-filters-full",

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

@@ -159,6 +159,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entities!: EntityRegistryEntry[];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "entities-table-search",
@@ -169,6 +170,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "entities-table-filters",

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

@@ -168,6 +168,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
   })
   private _activeCollapsed?: string;
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "helpers-table-search",

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { storage } from "../../../../../common/decorators/storage";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
@@ -23,6 +23,7 @@ export class MQTTConfigPanel extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-topic-ls",
     state: true,
@@ -30,6 +31,7 @@ export class MQTTConfigPanel extends LitElement {
   })
   private _topic = "";
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-payload-ls",
     state: true,
@@ -37,6 +39,7 @@ export class MQTTConfigPanel extends LitElement {
   })
   private _payload = "";
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-qos-ls",
     state: true,
@@ -44,6 +47,7 @@ export class MQTTConfigPanel extends LitElement {
   })
   private _qos = "0";
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-retain-ls",
     state: true,
@@ -51,6 +55,7 @@ export class MQTTConfigPanel extends LitElement {
   })
   private _retain = false;
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-allow-template-ls",
     state: true,

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -21,6 +21,7 @@ const qosLevel = ["0", "1", "2"];
 class MqttSubscribeCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-topic-subscribe",
     state: true,
@@ -28,6 +29,7 @@ class MqttSubscribeCard extends LitElement {
   })
   private _topic = "";
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-qos-subscribe",
     state: true,
@@ -35,6 +37,7 @@ class MqttSubscribeCard extends LitElement {
   })
   private _qos = "0";
 
+  @state()
   @storage({
     key: "panel-dev-mqtt-json-format",
     state: true,

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

@@ -55,6 +55,7 @@ export class HaConfigLabels extends LitElement {
 
   @state() private _labels: LabelRegistryEntry[] = [];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "labels-table-search",

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -74,6 +74,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   @state() private _dashboards: LovelaceDashboard[] = [];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "lovelace-dashboards-table-search",

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -46,6 +46,7 @@ export class HaConfigLovelaceRescources extends LitElement {
 
   @state() private _resources: LovelaceResource[] = [];
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "lovelace-resources-table-search",

src/panels/config/scene/ha-scene-dashboard.ts

@@ -133,6 +133,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _filteredScenes?: string[] | null;
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "scene-table-search",
@@ -141,6 +142,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   })
   private _filter = "";
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "scene-table-filters-full",

src/panels/config/script/ha-script-editor.ts

@@ -105,6 +105,7 @@ export class HaScriptEditor extends SubscribeMixin(
 
   @state() private _readOnly = false;
 
+  @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   @transform<EntityRegistryEntry[], EntityRegistryEntry>({
     transformer: function (this: HaScriptEditor, value) {

src/panels/config/script/ha-script-picker.ts

@@ -138,6 +138,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
 
   @state() private _filteredScripts?: string[] | null;
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "script-table-search",
@@ -146,6 +147,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   })
   private _filter = "";
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "script-table-filters-full",

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

@@ -62,6 +62,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     return this.hass.auth.external?.config.canWriteTag;
   }
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "tags-table-search",

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -76,6 +76,7 @@ export class VoiceAssistantsExpose extends LitElement {
 
   @state() private _extEntities?: Record<string, ExtEntityRegistryEntry>;
 
+  @state()
   @storage({
     storage: "sessionStorage",
     key: "voice-expose-table-search",

src/panels/developer-tools/action/developer-tools-action.ts

@@ -52,6 +52,7 @@ class HaPanelDevAction extends LitElement {
 
   private _yamlValid = true;
 
+  @state()
   @storage({
     key: "panel-dev-action-state-service-data",
     state: true,
@@ -59,6 +60,7 @@ class HaPanelDevAction extends LitElement {
   })
   private _serviceData?: ServiceAction = { action: "", target: {}, data: {} };
 
+  @state()
   @storage({
     key: "panel-dev-action-state-yaml-mode",
     state: true,

src/panels/developer-tools/assist/developer-tools-assist.ts

@@ -33,6 +33,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
 
   @state() supportedLanguages?: string[];
 
+  @state()
   @storage({
     key: "assist_debug_language",
     state: true,

src/panels/developer-tools/state/developer-tools-state.ts

@@ -62,6 +62,7 @@ class HaPanelDevState extends LitElement {
 
   @state() private _validJSON = true;
 
+  @state()
   @storage({
     key: "devToolsShowAttributes",
     state: true,

src/panels/history/ha-panel-history.ts

@@ -63,6 +63,7 @@ class HaPanelHistory extends LitElement {
 
   @state() private _endDate: Date;
 
+  @state()
   @storage({
     key: "historyPickedValue",
     state: true,

src/panels/logbook/ha-panel-logbook.ts

@@ -39,6 +39,7 @@ export class HaPanelLogbook extends LitElement {
   @state()
   private _showBack?: boolean;
 
+  @state()
   @storage({
     key: "logbookPickedValue",
     state: true,

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -62,6 +62,7 @@ export class HuiEnergyDevicesDetailGraphCard
 
   @state() private _compareEnd?: Date;
 
+  @state()
   @storage({
     key: "energy-devices-hidden-stats",
     state: true,

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

@@ -86,6 +86,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
 
   @state() private _config?: ButtonCardConfig;
 
+  @state()
   @consume<any>({ context: statesContext, subscribe: true })
   @transform({
     transformer: function (this: HuiButtonCard, value: HassEntities) {
@@ -111,6 +112,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   @consume({ context: configContext, subscribe: true })
   _hassConfig!: HassConfig;
 
+  @state()
   @consume<any>({ context: entitiesContext, subscribe: true })
   @transform<HomeAssistant["entities"], EntityRegistryDisplayEntry>({
     transformer: function (this: HuiButtonCard, value) {

src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts

@@ -43,6 +43,7 @@ export class HuiBadgePicker extends LitElement {
 
   @property({ attribute: false }) public suggestedBadges?: string[];
 
+  @state()
   @storage({
     key: "dashboardBadgeClipboard",
     state: true,

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -42,6 +42,7 @@ export class HuiCardPicker extends LitElement {
 
   @property({ attribute: false }) public suggestedCards?: string[];
 
+  @state()
   @storage({
     key: "dashboardCardClipboard",
     state: true,

src/panels/media-browser/ha-panel-media-browser.ts

@@ -64,6 +64,7 @@ class PanelMediaBrowser extends LitElement {
 
   @state() _currentItem?: MediaPlayerItem;
 
+  @state()
   @storage({
     key: "mediaBrowserPreferredLayout",
     state: true,
@@ -78,6 +79,7 @@ class PanelMediaBrowser extends LitElement {
     },
   ];
 
+  @state()
   @storage({
     key: "mediaBrowseEntityId",
     state: true,

src/panels/todo/ha-panel-todo.ts

@@ -9,7 +9,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { storage } from "../../common/decorators/storage";
@@ -55,6 +55,7 @@ class PanelTodo extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public mobile = false;
 
+  @state()
   @storage({
     key: "selectedTodoEntity",
     state: true,