Switch to lit

FelixSchuSi · Jul 22, 2021 · 6ac3ffe · 6ac3ffe
1 parent 334304a
commit 6ac3ffe
Show file tree

Hide file tree

Showing 38 changed files with 149 additions and 135 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -85,7 +85,7 @@
     "@ionic/pwa-elements": "^3.0.2",
     "@open-wc/lit-helpers": "^0.3.12",
     "bootstrap": "^4.6.0",
-    "lit-element": "^2.5.1",
+    "lit": "^2.0.0-rc.2",
     "localforage": "^1.9.0",
     "macro-carousel": "^1.0.0",
     "uuid": "^8.3.2"

diff --git a/client/src/helpers/back-button.ts b/client/src/helpers/back-button.ts
@@ -1,4 +1,4 @@
-import { html, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
 import { Routes } from '../routes';
 import { goBackTo } from './go-back-to';
 import { popFromRootNav } from './nav-util';

diff --git a/client/src/pages/app.component.ts b/client/src/pages/app.component.ts
@@ -1,14 +1,5 @@
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-  unsafeCSS
-} from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
 import { routerService } from '../services/router.service';
 import { Routes } from '../routes';
 import { LanguageStrings } from '../models/language-strings';
@@ -60,10 +51,10 @@ export class AppComponent extends LitElement {
   @property()
   protected appTitle = 'mensa-app';
 
-  @internalProperty()
+  @state()
   protected currentRoute!: Routes;
 
-  @internalProperty()
+  @state()
   protected i18n!: LanguageStrings;
 
   @query('ion-tabs')

diff --git a/client/src/pages/group-details/group-details.page.ts b/client/src/pages/group-details/group-details.page.ts
@@ -1,4 +1,5 @@
-import { customElement, html, internalProperty, LitElement, property, query, TemplateResult } from 'lit-element';
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { LanguageStrings } from '../../models/language-strings';
 import { groupService, GroupService } from '../../services/group.service';
@@ -19,9 +20,9 @@ import { modalController } from '@ionic/core';
 class GroupDetailsPage extends PageMixin(LitElement) {
   protected groupService: GroupService = groupService;
   protected groupID = routerService.getQueryParameter('id');
-  @internalProperty()
+  @state()
   protected group?: Group;
-  @internalProperty()
+  @state()
   protected members: User[] | undefined;
   @property({ type: Object, attribute: false })
   protected i18n!: LanguageStrings;

diff --git a/client/src/pages/groups/groups.page.ts b/client/src/pages/groups/groups.page.ts
@@ -1,12 +1,13 @@
-import { customElement, html, internalProperty, LitElement, property, TemplateResult } from 'lit-element';
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { LanguageStrings } from '../../models/language-strings';
 import { groupService, GroupService } from '../../services/group.service';
 import { Group } from '../../../../server/src/models/group';
 import { modalController } from '@ionic/core';
 import { routerService } from '../../services/router.service';
 import { Routes } from '../../routes';
-import { until } from 'lit-html/directives/until';
+import { until } from 'lit/directives/until';
 import { sleep } from '../../helpers/sleep';
 import { userService } from '../../services/user.service';
 
@@ -16,7 +17,7 @@ class GroupsPage extends PageMixin(LitElement) {
   @property({ type: Array })
   protected groups: Group[] = [];
 
-  @internalProperty()
+  @state()
   protected loaded!: Promise<void>;
 
   protected groupService: GroupService = groupService;

diff --git a/client/src/pages/intro/intro.page.ts b/client/src/pages/intro/intro.page.ts
@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property, query, TemplateResult, unsafeCSS } from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { LanguageStrings } from '../../models/language-strings';
 import { intro } from '../../models/intro';

diff --git a/client/src/pages/meal-detail/meal-detail.page.ts b/client/src/pages/meal-detail/meal-detail.page.ts
@@ -1,14 +1,5 @@
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-  unsafeCSS
-} from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { Meal } from '../../../../server/src/models/meal';
 import { routerService } from '../../services/router.service';
@@ -35,7 +26,7 @@ class MealDetailPage extends PageMixin(LitElement) {
   @property({ type: Object })
   public meal?: Meal;
 
-  @internalProperty()
+  @state()
   protected isBookmark: boolean = false;
 
   @query('macro-carousel')

diff --git a/client/src/pages/meals-future/meals-future.page.ts b/client/src/pages/meals-future/meals-future.page.ts
@@ -1,14 +1,5 @@
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-  unsafeCSS
-} from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { Meal } from '../../../../server/src/models/meal';
 import { routerService } from '../../services/router.service';
@@ -40,17 +31,17 @@ export class MealsFuturePage extends PageMixin(LitElement) {
 
   @query('ion-infinite-scroll')
   protected infiniteScrollElem!: HTMLIonInfiniteScrollElement;
-  @internalProperty()
+  @state()
   protected scrollIndex: number = 0;
 
   @property({ attribute: false })
   protected displayMeals: Meal[] = [];
   protected mealsBeforeTextSearch: Meal[] = [];
   protected allMeals: Meal[] = [];
-  @internalProperty()
+  @state()
   protected userInfo?: User = userService.userInfo;
   protected mealFilterConfig: MealFilterConfig = this.userInfo?.filterConfig ?? DEFAULT_MEAL_FILTER_CONFIG;
-  @internalProperty()
+  @state()
   protected dateFilterConfig: MealDateFilterConfig = DEFAULT_DATE_FILTER;
 
   protected searchInput = '';

diff --git a/client/src/pages/meals-today/meals-today.page.ts b/client/src/pages/meals-today/meals-today.page.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { css, customElement, html, internalProperty, LitElement, property, query, TemplateResult } from 'lit-element';
+import { css, html, LitElement, TemplateResult } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { routerService } from '../../services/router.service';
 import { Routes } from '../../routes';
@@ -21,17 +22,17 @@ import { ShareParameter } from '../../helpers/share-api';
 export class MealsTodayPage extends PageMixin(LitElement) {
   @query('ion-infinite-scroll')
   protected infiniteScrollElem!: HTMLIonInfiniteScrollElement;
-  @internalProperty()
+  @state()
   protected scrollIndex: number = 0;
 
   @property({ attribute: false })
   protected displayMeals: Meal[] = [];
   protected mealsBeforeTextSearch: Meal[] = [];
   protected allMeals: Meal[] = [];
-  @internalProperty()
+  @state()
   protected userInfo?: User = userService.userInfo;
   protected mealFilterConfig: MealFilterConfig = this.userInfo?.filterConfig ?? DEFAULT_MEAL_FILTER_CONFIG;
-  @internalProperty()
+  @state()
   protected dateFilterConfig: MealDateFilterConfig = { start: getToday().getTime(), end: getToday().getTime() };
 
   protected searchInput = '';

diff --git a/client/src/pages/page.mixin.ts b/client/src/pages/page.mixin.ts
@@ -1,4 +1,5 @@
-import { LitElement, property, html, TemplateResult, internalProperty } from 'lit-element';
+import { LitElement, html, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { User } from '../../../server/src/models/user';
 import { LanguageStrings } from '../models/language-strings';
 import { i18nService } from '../services/i18n.service';
@@ -14,7 +15,7 @@ export const PageMixin = <T extends new (...args: any[]) => LitElement>(base: T)
     @property()
     private successMessage = '';
 
-    @internalProperty()
+    @state()
     protected i18n!: LanguageStrings;
 
     @property()

diff --git a/client/src/pages/settings/settings.page.ts b/client/src/pages/settings/settings.page.ts
@@ -1,13 +1,5 @@
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-  unsafeCSS
-} from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
 import { goBackTo } from '../../helpers/go-back-to';
 import { toggleIosMd } from '../../helpers/toggle-ios-md';
 import { LanguageStrings } from '../../models/language-strings';
@@ -37,7 +29,7 @@ class SignUpPage extends PageMixin(LitElement) {
     return this;
   }
 
-  @internalProperty()
+  @state()
   protected i18n!: LanguageStrings;
 
   @property()

diff --git a/client/src/pages/sign-in/sign-in.page.spec.ts b/client/src/pages/sign-in/sign-in.page.spec.ts
@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import './sign-in.page';
 
 describe('app-sign-in', () => {

diff --git a/client/src/pages/sign-in/sign-in.page.ts b/client/src/pages/sign-in/sign-in.page.ts
@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property, query, TemplateResult, unsafeCSS } from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { SignInData } from '../../models/sign-in-data';
 import { userService } from '../../services/user.service';

diff --git a/client/src/pages/sign-up/sign-up.page.ts b/client/src/pages/sign-up/sign-up.page.ts
@@ -1,14 +1,5 @@
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-  unsafeCSS
-} from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, state, property, query } from 'lit/decorators.js';
 import { PageMixin } from '../page.mixin';
 import { SignUpData } from '../../models/sign-up-data';
 import { userService } from '../../services/user.service';
@@ -69,7 +60,7 @@ class SignUpPage extends PageMixin(LitElement) {
   @property({ type: Object, attribute: false })
   protected i18n!: LanguageStrings;
 
-  @internalProperty()
+  @state()
   protected currentStep: number = 1;
 
   protected signUpData: Partial<SignUpData> = {

diff --git a/client/src/widgets/back-button/back-button.ts b/client/src/widgets/back-button/back-button.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { LanguageStrings } from '../../models/language-strings';
 import { i18nService } from '../../services/i18n.service';
 

diff --git a/client/src/widgets/chip-select-none-chip/chip-select-none-chip.ts b/client/src/widgets/chip-select-none-chip/chip-select-none-chip.ts
@@ -1,4 +1,5 @@
-import { customElement, html, internalProperty, LitElement, query, TemplateResult } from 'lit-element';
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
 import { LanguageStrings } from '../../models/language-strings';
 import { i18nService } from '../../services/i18n.service';
 
@@ -10,7 +11,7 @@ export class ChipSelectNoneChipWidget extends LitElement {
 
   protected isSelected = true;
 
-  @internalProperty()
+  @state()
   protected i18n!: LanguageStrings;
 
   @query('ion-chip')

diff --git a/client/src/widgets/chip-select/chip-select.widget.ts b/client/src/widgets/chip-select/chip-select.widget.ts
@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property, query, TemplateResult, unsafeCSS } from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { LanguageStrings } from '../../models/language-strings';
 import { ChipSelectNoneChipWidget } from '../chip-select-none-chip/chip-select-none-chip';
 

diff --git a/client/src/widgets/chip-toggle-show-more/chip-toggle-show-more.ts b/client/src/widgets/chip-toggle-show-more/chip-toggle-show-more.ts
@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property, TemplateResult, unsafeCSS } from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { ChipSelectWidget } from '../chip-select/chip-select.widget';
 
 const componentCSS = require('./chip-toggle-show-more.scss');

diff --git a/client/src/widgets/connection-status-bar/connection-status-bar.widget.ts b/client/src/widgets/connection-status-bar/connection-status-bar.widget.ts
@@ -1,4 +1,5 @@
-import { css, customElement, html, LitElement, property, TemplateResult, unsafeCSS } from 'lit-element';
+import { css, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { LanguageStrings } from '../../models/language-strings';
 import { connectionStatusService } from '../../services/connection-status.service';
 import { i18nService } from '../../services/i18n.service';