chore: update to lit 2.0 (#1810)

* chore: upgrade lit-element to lit v2

replace lit-element with lit as the lit-element standalone package will be deprecated in the future
update all imports to use new paths as specified in the migration guide
fix typing issues
many const/let/var and whitespace changes due to auto fixing of lint issues
added dom.iterable to tsconfig lib list to allow for of loops over NodeList<Element>
moved some for loops to for of loops

* chore: change variable names to _private

* chore: change variable names to _private

Co-authored-by: Musale Martin <[email protected]>

Author: gavinbarron

.storybook/addons/codeEditorAddon/editor.js

@@ -1,4 +1,4 @@
-import { LitElement, css, html, property, customElement } from 'lit-element';
+import { LitElement, css, html } from 'lit';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 let debounce = (func, wait, immediate) => {

gulpfile.js

@@ -10,7 +10,7 @@ scssFileHeader = `
 // ANY CHANGES WILL BE LOST DURING BUILD
 // MODIFY THE .SCSS FILE INSTEAD
 
-import { css } from 'lit-element';
+import { css } from 'lit';
 /**
  * exports lit-element css
  * @export styles
@@ -48,7 +48,7 @@ function runSass() {
 
 function setLicense() {
   return gulp
-    .src(['packages/**/src/**/*.{ts,js,scss}', "!packages/**/generated/**/*"], { base: './' })
+    .src(['packages/**/src/**/*.{ts,js,scss}', '!packages/**/generated/**/*'], { base: './' })
     .pipe(license(licenseStr))
     .pipe(gulp.dest('./'));
 }

package.json

@@ -91,7 +91,7 @@
     "jest": "^24.5.0",
     "jest-junit": "^6.3.0",
     "lerna": "^3.22.1",
-    "lit-element": "2.5.0",
+    "lit": "^2.3.1",
     "monaco-editor": "^0.19.3",
     "monaco-editor-webpack-plugin": "^1.8.2",
     "node-sass": "npm:sass@^1.44.0",

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts

@@ -6,7 +6,8 @@
  */
 
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
-import { customElement, html, property, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { Providers, ProviderState, MgtTemplatedComponent, prepScopes } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
 import { getDayOfWeekString, getMonthString } from '../../utils/Utils';
@@ -460,8 +461,8 @@ export class MgtAgenda extends MgtTemplatedComponent {
     const grouped = {};
 
     events.forEach(event => {
-      var eventDate = new Date(event.start.dateTime);
-      var dateString = eventDate.toISOString().replace('Z', '');
+      const eventDate = new Date(event.start.dateTime);
+      const dateString = eventDate.toISOString().replace('Z', '');
 
       const header = this.getDateHeaderFromDateTimeString(dateString);
       grouped[header] = grouped[header] || [];

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -13,8 +13,9 @@ import {
   ProviderState
 } from '@microsoft/mgt-element';
 import { DriveItem } from '@microsoft/microsoft-graph-types';
-import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
-import { repeat } from 'lit-html/directives/repeat';
+import { html, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import {
   clearFilesCache,
   fetchNextAndCacheForFilesPageIterator,
@@ -497,7 +498,7 @@ export class MgtFileList extends MgtTemplatedComponent {
   // tracking user arrow key input of selection for accessibility purpose
   private _focusedItemIndex: number = -1;
 
-  @internalProperty() private _isLoadingMore: boolean;
+  @state() private _isLoadingMore: boolean;
 
   constructor() {
     super();

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -6,7 +6,8 @@
  */
 
 import { DriveItem } from '@microsoft/microsoft-graph-types';
-import { customElement, html, property, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './mgt-file-css';
 import { MgtTemplatedComponent, Providers, ProviderState } from '@microsoft/mgt-element';
 import {

packages/mgt-components/src/components/mgt-file/mgt-file.ts

@@ -5,7 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { customElement, html, property } from 'lit-element';
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import {
   CacheItem,
   CacheService,
@@ -400,7 +401,7 @@ export class MgtGet extends MgtTemplatedComponent {
 
             if (image) {
               response = {
-                image: image
+                image
               };
             }
           }

packages/mgt-components/src/components/mgt-get/mgt-get.ts

@@ -5,8 +5,9 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { customElement, html, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { Providers, ProviderState, MgtTemplatedComponent, IProviderAccount } from '@microsoft/mgt-element';
 
 import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';

packages/mgt-components/src/components/mgt-login/mgt-login.ts

@@ -6,9 +6,10 @@
  */
 
 import { User } from '@microsoft/microsoft-graph-types';
-import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import { repeat } from 'lit-html/directives/repeat';
+import { html, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import {
   findGroups,
   getGroupsForGroupIds,
@@ -499,9 +500,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // current user index to the left of the highlighted users
   private _currentHighlightedUserPos: number = 0;
 
-  @internalProperty() private _isFocused = false;
+  @state() private _isFocused = false;
 
-  @internalProperty() private _foundPeople: IDynamicPerson[];
+  @state() private _foundPeople: IDynamicPerson[];
 
   private _mouseLeaveTimeout;
   private _mouseEnterTimeout;
@@ -877,13 +878,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   protected renderSearchResults(people?: IDynamicPerson[]) {
     people = people || this._foundPeople;
-    let filteredPeople = people.filter(person => person.id);
-    let firstName = '';
+    const filteredPeople = people.filter(person => person.id);
 
-    const selectedList = this.renderRoot.querySelector('.selected-list');
     let names = '';
-    for (let i = 0; i < filteredPeople.length; i++) {
-      names += filteredPeople[i].displayName.toString() + ' ';
+    for (const person of filteredPeople) {
+      names += person.displayName.toString() + ' ';
     }
 
     return html`
@@ -1203,7 +1202,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         }
       }
     }
-    //people = this.getUniquePeople(people);
+    // people = this.getUniquePeople(people);
     this._foundPeople = this.filterPeople(people);
   }
 
@@ -1216,7 +1215,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   private async getGroupsForGroupIds(graph: IGraph, people: IDynamicPerson[]) {
     const groups = await getGroupsForGroupIds(graph, this.groupIds, this.groupFilters);
-    for (let group of groups as IDynamicPerson[]) {
+    for (const group of groups as IDynamicPerson[]) {
       people = people.concat(group);
     }
     people = people.filter(person => person);
@@ -1648,7 +1647,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         } catch (error) {
           if (error instanceof SyntaxError) {
             const _delimeters = [',', ';'];
-            let listOfUsers: Array<string>;
+            let listOfUsers: string[];
             try {
               for (let i = 0; i < _delimeters.length; i++) {
                 listOfUsers = copiedText.split(_delimeters[i]);