Migrate to Lit 2 (#348)

package.json

@@ -10,8 +10,7 @@
     "@material/mwc-textfield": "^0.25.1",
     "@mdi/font": "^6.1.95",
     "@mdi/js": "^6.1.95",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
+    "lit": "^2.0.0",
     "superstruct": "^0.15.2",
     "svgmap": "^2.7.1",
     "toucan-js": "^2.5.0"
@@ -35,9 +34,6 @@
     },
     "testEnvironment": "node",
     "testRegex": "/worker/tests/.*\\.spec\\.ts$",
-    "moduleFileExtensions": [
-      "js",
-      "ts"
-    ]
+    "moduleFileExtensions": ["js", "ts"]
   }
 }

site/src/analytics-active-installations.ts

@@ -1,12 +1,6 @@
 import { Checkbox } from "@material/mwc-checkbox";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement, state, property } from "lit/decorators.js";
 import { AnalyticsDataHistory } from "../../worker/src/data";
 import "./components/analytics-chart";
 
@@ -18,7 +12,7 @@ export class AnalyticsActiveInstallations extends LitElement {
 
   @property({ type: Boolean }) public isDarkMode = false;
 
-  @internalProperty() private _logScale = false;
+  @state() private _logScale = false;
 
   render() {
     if (this.historyData === undefined) {

site/src/analytics-average.ts

@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property } from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsDataCurrent } from "../../worker/src/data";
 
 const AVERAGE_METRICS = {

site/src/analytics-element.ts

@@ -1,12 +1,6 @@
 import "@google-web-components/google-chart";
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  internalProperty,
-  PropertyValues,
-} from "lit-element";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import "./analytics-active-installations";
 import "./analytics-average";
 import "./analytics-integrations";
@@ -26,15 +20,15 @@ const mqlDarkMode = matchMedia("(prefers-color-scheme: dark)");
 
 @customElement("analytics-element")
 export class AnalyticsElement extends LitElement {
-  @internalProperty() private _data?: AnalyticsData;
+  @state() private _data?: AnalyticsData;
 
-  @internalProperty() private _currentPage = "installations";
+  @state() private _currentPage = "installations";
 
-  @internalProperty() private _error: boolean = false;
+  @state() private _error: boolean = false;
 
-  @internalProperty() private _isMobile: boolean = mqlMobile.matches;
+  @state() private _isMobile: boolean = mqlMobile.matches;
 
-  @internalProperty() private _isDarkMode: boolean = mqlDarkMode.matches;
+  @state() private _isDarkMode: boolean = mqlDarkMode.matches;
 
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);

site/src/analytics-header.ts

@@ -1,5 +1,6 @@
 import "@google-web-components/google-chart";
-import { css, customElement, html, LitElement, property } from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsPages } from "./data";
 
 @customElement("analytics-header")

site/src/analytics-installation-types.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsDataCurrent } from "../../worker/src/data";
 import "./components/analytics-chart";
 

site/src/analytics-integrations.ts

@@ -5,15 +5,8 @@ import "@material/mwc-textfield";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-select";
 import { mdiChevronLeft, mdiChevronRight, mdiClose } from "@mdi/js";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, state, property } from "lit/decorators.js";
 import {
   fetchIntegrationDetails,
   IntegrationData,
@@ -37,18 +30,15 @@ export class AnalyticsIntegrations extends LitElement {
 
   @property() public domain: string | null = null;
 
-  @internalProperty() private _filter: string = "";
+  @state() private _filter: string = "";
 
-  @internalProperty() private _integrationDetails: Record<
-    string,
-    IntegrationDetails
-  > = {};
+  @state() private _integrationDetails: Record<string, IntegrationDetails> = {};
 
-  @internalProperty() private _integrations?: IntegrationData[];
+  @state() private _integrations?: IntegrationData[];
 
-  @internalProperty() private _currentTableSize = 30;
-  @internalProperty() private _currentTablePage = 0;
-  @internalProperty() private _showDefaultAndInternal = false;
+  @state() private _currentTableSize = 30;
+  @state() private _currentTablePage = 0;
+  @state() private _showDefaultAndInternal = false;
 
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);

site/src/analytics-map.ts

@@ -1,6 +1,7 @@
 import svgMap from "svgmap";
 import "svgmap/dist/svgMap.min.css";
-import { customElement, UpdatingElement, property } from "lit-element";
+import { UpdatingElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsDataCurrent } from "../../worker/src/data";
 
 @customElement("analytics-map")

site/src/analytics-os-boards.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsDataCurrent } from "../../worker/src/data";
 import "./components/analytics-chart";
 

site/src/analytics-os-versions.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsDataCurrent } from "../../worker/src/data";
 import "./components/analytics-chart";
 

site/src/analytics-releases.ts

@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property } from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { AnalyticsDataCurrent } from "../../worker/src/data";
 import "./components/analytics-chart";
 
@@ -17,12 +18,11 @@ export class AnalyticsReleases extends LitElement {
 
     const releases = Object();
 
-    Object.keys(this.currentData.versions)
-      .forEach((version) => {
-        const key: string = version.split(".").slice(0, 2).join(".");
-        releases[key] =
-          (releases[key] || 0) + this.currentData!.versions[version];
-      });
+    Object.keys(this.currentData.versions).forEach((version) => {
+      const key: string = version.split(".").slice(0, 2).join(".");
+      releases[key] =
+        (releases[key] || 0) + this.currentData!.versions[version];
+    });
 
     const allRows = Object.keys(releases)
       .filter((key) => releases[key] > 100)
@@ -42,10 +42,7 @@ export class AnalyticsReleases extends LitElement {
         "Other",
         allRows
           .slice(5)
-          .reduce(
-            (accumulator, item) => accumulator + item[1],
-            0
-          ),
+          .reduce((accumulator, item) => accumulator + item[1], 0),
       ]);
     }
 

site/src/analytics-version-history.ts

@@ -1,12 +1,6 @@
 import { Checkbox } from "@material/mwc-checkbox";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement, state, property } from "lit/decorators.js";
 import { AnalyticsDataHistory } from "../../worker/src/data";
 import "./components/analytics-chart";
 
@@ -18,7 +12,7 @@ export class AnalyticsVersionHistory extends LitElement {
 
   @property({ type: Boolean }) public isDarkMode = false;
 
-  @internalProperty() private _logScale = false;
+  @state() private _logScale = false;
 
   render() {
     if (this.historyData === undefined) {

site/src/components/analytics-chart.ts

@@ -1,13 +1,7 @@
 import "@google-web-components/google-chart";
 import { GoogleChart } from "@google-web-components/google-chart";
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-} from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 
 @customElement("analytics-chart")
 export class AnalyticsChart extends LitElement {

yarn.lock

@@ -3357,7 +3357,7 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-lit-element@^2.3.1, lit-element@^2.5.1:
+lit-element@^2.3.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.1.tgz#3fa74b121a6cd22902409ae3859b7847d01aa6b6"
   integrity sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==
@@ -3372,7 +3372,7 @@ lit-element@^3.0.0:
     "@lit/reactive-element" "^1.0.0"
     lit-html "^2.0.0"
 
-lit-html@^1.1.1, lit-html@^1.4.1:
+lit-html@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.1.tgz#0c6f3ee4ad4eb610a49831787f0478ad8e9ae5e0"
   integrity sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==
@@ -3384,6 +3384,15 @@ lit-html@^2.0.0:
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
+lit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0.tgz#7710095dc518d9858dde579e9c76b9eed71e98ba"
+  integrity sha512-pqi5O/wVzQ9Bn4ERRoYQlt1EAUWyY5Wv888vzpoArbtChc+zfUv1XohRqSdtQZYCogl0eHKd+MQwymg2XJfECg==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0"
+    lit-element "^3.0.0"
+    lit-html "^2.0.0"
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"