Use property for public reactive properties (#993)

Author: KyleJu

frontend/src/static/js/components/webstatus-overview-content.ts

@@ -23,7 +23,7 @@ import {
   nothing,
 } from 'lit';
 import {TaskStatus} from '@lit/task';
-import {customElement, state} from 'lit/decorators.js';
+import {customElement, property, state} from 'lit/decorators.js';
 import {type components} from 'webstatus.dev-backend';
 
 import './webstatus-overview-filters.js';
@@ -45,14 +45,14 @@ const webFeaturesRepoUrl = 'https://github.com/web-platform-dx/web-features';
 
 @customElement('webstatus-overview-content')
 export class WebstatusOverviewContent extends LitElement {
-  @state()
+  @property({type: Object})
   taskTracker: TaskTracker<components['schemas']['FeaturePage'], ApiError> = {
     status: TaskStatus.INITIAL, // Initial state
     error: null,
     data: null,
   };
 
-  @state()
+  @property({type: Object})
   location!: {search: string}; // Set by parent.
 
   @consume({context: webFeatureProgressContext, subscribe: true})

frontend/src/static/js/components/webstatus-overview-pagination.ts

@@ -22,7 +22,7 @@ import {
   html,
   nothing,
 } from 'lit';
-import {customElement, state} from 'lit/decorators.js';
+import {customElement, state, property} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {range} from 'lit/directives/range.js';
 import {map} from 'lit/directives/map.js';
@@ -37,7 +37,7 @@ import {SHARED_STYLES} from '../css/shared-css.js';
 
 @customElement('webstatus-overview-pagination')
 export class WebstatusOverviewPagination extends LitElement {
-  @state()
+  @property({type: Number})
   totalCount: number | undefined = undefined;
 
   @state()
@@ -46,7 +46,7 @@ export class WebstatusOverviewPagination extends LitElement {
   @state()
   pageSize = DEFAULT_ITEMS_PER_PAGE; // Number of items to display per page
 
-  @state()
+  @property({type: Object})
   location!: {search: string}; // Set by parent.
 
   static get styles(): CSSResultGroup {

frontend/src/static/js/components/webstatus-overview-table.ts

@@ -17,7 +17,7 @@ import {LitElement, type TemplateResult, html, CSSResultGroup, css} from 'lit';
 import {TaskStatus} from '@lit/task';
 import {range} from 'lit/directives/range.js';
 import {map} from 'lit/directives/map.js';
-import {customElement, property, state} from 'lit/decorators.js';
+import {customElement, property} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
 import {type components} from 'webstatus.dev-backend';
 import {getColumnsSpec, getSortSpec} from '../utils/urls.js';
@@ -39,14 +39,14 @@ import {Toast} from '../utils/toast.js';
 
 @customElement('webstatus-overview-table')
 export class WebstatusOverviewTable extends LitElement {
-  @state()
+  @property({type: Object})
   taskTracker: TaskTracker<components['schemas']['FeaturePage'], ApiError> = {
     status: TaskStatus.INITIAL, // Initial state
     error: null,
     data: null,
   };
 
-  @state()
+  @property({type: Object})
   location!: {search: string}; // Set by parent.
 
   @property({type: Object})