Upgrade to lit (fixes gramps-project#24)

Install lit, uninstall lit-element

npm audit fix

Lit: update imports

Update imports

Update MWC elements

Fix list item

Author: DavidMStraub

package-lock.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@open-wc/building-rollup": "^1.9.4",
-    "@open-wc/demoing-storybook": "^2.4.7",
+    "@open-wc/demoing-storybook": "^2.4.6",
     "@open-wc/eslint-config": "^4.0.1",
     "@open-wc/testing": "^2.5.32",
     "@rollup/plugin-replace": "^2.3.4",
@@ -60,27 +60,26 @@
   "author": "David M. Straub",
   "license": "AGPL",
   "dependencies": {
-    "@material/mwc-button": "^0.20.0",
-    "@material/mwc-circular-progress": "^0.20.0",
-    "@material/mwc-drawer": "^0.20.0",
-    "@material/mwc-icon": "^0.20.0",
-    "@material/mwc-icon-button": "^0.20.0",
-    "@material/mwc-linear-progress": "^0.20.0",
-    "@material/mwc-list": "^0.20.0",
-    "@material/mwc-menu": "^0.20.0",
-    "@material/mwc-select": "^0.20.0",
-    "@material/mwc-slider": "^0.20.0",
-    "@material/mwc-snackbar": "^0.20.0",
-    "@material/mwc-tab": "^0.20.0",
-    "@material/mwc-tab-bar": "^0.20.0",
-    "@material/mwc-textfield": "^0.20.0",
-    "@material/mwc-top-app-bar": "^0.20.0",
+    "@material/mwc-button": "^0.22.0",
+    "@material/mwc-circular-progress": "^0.22.0",
+    "@material/mwc-drawer": "^0.22.0",
+    "@material/mwc-icon": "^0.22.0",
+    "@material/mwc-icon-button": "^0.22.0",
+    "@material/mwc-linear-progress": "^0.22.0",
+    "@material/mwc-list": "^0.22.0",
+    "@material/mwc-menu": "^0.22.0",
+    "@material/mwc-select": "^0.22.0",
+    "@material/mwc-slider": "^0.22.0",
+    "@material/mwc-snackbar": "^0.22.0",
+    "@material/mwc-tab": "^0.22.0",
+    "@material/mwc-tab-bar": "^0.22.0",
+    "@material/mwc-textfield": "^0.22.0",
+    "@material/mwc-top-app-bar": "^0.22.0",
     "@mdi/js": "^5.8.55",
     "@types/leaflet": "^1.5.19",
     "dayjs": "^1.8.36",
     "leaflet": "^1.7.1",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
+    "lit": "^2.0.0-rc.2",
     "pwa-helpers": "^0.9.1",
     "rollup-plugin-copy": "^3.3.0"
   }

package.json

@@ -1,4 +1,4 @@
-import {LitElement, html, css} from 'lit-element'
+import {LitElement, html, css} from 'lit'
 import {installRouter} from 'pwa-helpers/router.js'
 import {installMediaQueryWatcher} from 'pwa-helpers/media-query.js'
 import '@material/mwc-drawer'

src/GrampsJs.js

@@ -1,4 +1,4 @@
-import {css} from 'lit-element'
+import {css} from 'lit'
 
 export const sharedStyles = css`
   :host {

src/SharedStyles.js

@@ -2,8 +2,8 @@
 An Image thumbnail element.
 */
 
-import {html, css, LitElement} from 'lit-element'
-import {classMap} from 'lit-html/directives/class-map'
+import {html, css, LitElement} from 'lit'
+import {classMap} from 'lit/directives/class-map'
 import '@material/mwc-icon'
 
 import {sharedStyles} from '../SharedStyles.js'

src/components/GrampsJsImage.js

@@ -1,13 +1,13 @@
-import { html, css } from 'lit-element';
-import { ListItem } from '@material/mwc-list/mwc-list-item'
+import {html, css} from 'lit-element'
+import {ListItem} from '@material/mwc-list/mwc-list-item'
 
 
 export class GrampsjsListItem extends ListItem {
 
   static get properties() {
     return {
-      href: { type: String },
-    };
+      href: {type: String},
+    }
   }
 
   static get styles() {
@@ -21,19 +21,19 @@ export class GrampsjsListItem extends ListItem {
           align-items: center;
         }
       `,
-    ];
+    ]
   }
 
   render() {
-    const r = super.render();
-    const href = this.href ? `${this.href}` : "";
+    const r = super.render()
+    const href = this.href ? `${this.href}` : ''
 
     return html` ${this.renderRipple()}
       <a href=${href}>
         ${r}
-      </a>`;
+      </a>`
   }
 }
 
 
-window.customElements.define('grampsjs-list-item', GrampsjsListItem);
+window.customElements.define('grampsjs-list-item', GrampsjsListItem)

src/components/GrampsJsListItem.js

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit-element';
+import { LitElement, css, html } from 'lit';
 
 import { sharedStyles } from '../SharedStyles.js';
 import { GrampsjsTableBase } from './GrampsjsTableBase.js';

src/components/GrampsjsAddresses.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import { GrampsjsTableBase } from './GrampsjsTableBase.js';
 

src/components/GrampsjsAttributes.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 import {sharedStyles} from '../SharedStyles.js'
 import '@material/mwc-button'
 

src/components/GrampsjsBlogPost.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 import {sharedStyles} from '../SharedStyles.js'
 
 import './GrampsJsImage.js'

src/components/GrampsjsBlogPreview.js

@@ -1,4 +1,4 @@
-import {css, html} from 'lit-element'
+import {css, html} from 'lit'
 
 import {mdiGenderFemale, mdiGenderMale} from '@mdi/js'
 import {GrampsjsTableBase} from './GrampsjsTableBase.js'

src/components/GrampsjsChildren.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsCitation.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsEvent.js

@@ -1,4 +1,4 @@
-import {css, html} from 'lit-element'
+import {css, html} from 'lit'
 
 import {GrampsjsTableBase} from './GrampsjsTableBase.js'
 

src/components/GrampsjsEvents.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsFamily.js

@@ -1,4 +1,4 @@
-import {LitElement, css, html} from 'lit-element'
+import {LitElement, css, html} from 'lit'
 import '@material/mwc-button'
 
 import {sharedStyles} from '../SharedStyles.js'

src/components/GrampsjsGallery.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 
 import {sharedStyles} from '../SharedStyles.js'
 import {chevronLeftIcon, chevronRightIcon, closeIcon} from '../icons.js'

src/components/GrampsjsLightbox.js

@@ -1,4 +1,4 @@
-import {html, LitElement} from 'lit-element'
+import {html, LitElement} from 'lit'
 import {Map, TileLayer, LatLng, control} from '../../node_modules/leaflet/dist/leaflet-src.esm.js'
 
 class GrampsjsMap extends LitElement {

src/components/GrampsjsMap.js

@@ -1,4 +1,4 @@
-import {html, LitElement} from 'lit-element'
+import {html, LitElement} from 'lit'
 import {Marker, Icon} from '../../node_modules/leaflet/dist/leaflet-src.esm.js'
 
 class GrampsjsMapMarker extends LitElement {

src/components/GrampsjsMapMarker.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 import {GrampsjsObject} from './GrampsjsObject.js'
 import './GrampsJsImage.js'
 

src/components/GrampsjsMediaObject.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsNote.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 import {sharedStyles} from '../SharedStyles.js'
 
 

src/components/GrampsjsNoteContent.js

@@ -1,4 +1,4 @@
-import {LitElement, css, html} from 'lit-element'
+import {LitElement, css, html} from 'lit'
 
 import '@material/mwc-tab'
 import '@material/mwc-tab-bar'

src/components/GrampsjsObject.js

@@ -1,5 +1,5 @@
 
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 
 import '@material/mwc-icon'
 import '@material/mwc-button'

src/components/GrampsjsPagination.js

@@ -1,4 +1,4 @@
-import {html} from 'lit-element'
+import {html} from 'lit'
 
 import {GrampsjsTableBase} from './GrampsjsTableBase.js'
 import {getName, personTitleFromProfile, familyTitleFromProfile} from '../util.js'

src/components/GrampsjsParticipants.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 
 import {sharedStyles} from '../SharedStyles.js'
 import './GrampsjsPedigreeCard.js'

src/components/GrampsjsPedigree.js

@@ -1,5 +1,5 @@
 
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 
 import '@material/mwc-icon-button'
 import '@material/mwc-menu'

src/components/GrampsjsPedigreeCard.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsPerson.js

@@ -1,5 +1,5 @@
-import {html, css, LitElement} from 'lit-element'
-import {classMap} from 'lit-html/directives/class-map'
+import {html, css, LitElement} from 'lit'
+import {classMap} from 'lit/directives/class-map'
 import {sharedStyles} from '../SharedStyles.js'
 import '@material/mwc-button'
 import '@material/mwc-icon'

src/components/GrampsjsPersonTimeline.js

@@ -1,4 +1,4 @@
-import {html} from 'lit-element'
+import {html} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsPlace.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 
 import {sharedStyles} from '../SharedStyles.js'
 

src/components/GrampsjsRect.js

@@ -1,4 +1,4 @@
-import {html, css, LitElement} from 'lit-element'
+import {html, css, LitElement} from 'lit'
 
 import {sharedStyles} from '../SharedStyles.js'
 

src/components/GrampsjsRectContainer.js

@@ -1,4 +1,4 @@
-import {html} from 'lit-element'
+import {html} from 'lit'
 
 import {GrampsjsTableBase} from './GrampsjsTableBase.js'
 import {getName, getNameFromProfile} from '../util.js'

src/components/GrampsjsReferences.js

@@ -1,4 +1,4 @@
-import {LitElement, css, html} from 'lit-element'
+import {LitElement, css, html} from 'lit'
 import '@material/mwc-button'
 import '@material/mwc-icon'
 

src/components/GrampsjsRelationships.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 import {GrampsjsObject} from './GrampsjsObject.js'
 
 

src/components/GrampsjsRepository.js

@@ -1,4 +1,4 @@
-import {LitElement, css, html} from 'lit-element'
+import {LitElement, css, html} from 'lit'
 
 import {sharedStyles} from '../SharedStyles.js'
 import {showObject, prettyTimeDiffTimestamp} from '../util.js'

src/components/GrampsjsSearchResults.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsSource.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import '@material/mwc-icon'
 

src/components/GrampsjsSourceCitations.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import {GrampsjsTableBase} from './GrampsjsTableBase.js'
 

src/components/GrampsjsStatistics.js

@@ -1,4 +1,4 @@
-import {LitElement, css} from 'lit-element'
+import {LitElement, css} from 'lit'
 
 import {sharedStyles} from '../SharedStyles.js'
 

src/components/GrampsjsTableBase.js

@@ -1,4 +1,4 @@
-import {LitElement, css, html} from 'lit-element'
+import {LitElement, css, html} from 'lit'
 
 import {hex12ToCss} from '../color.js'
 import {sharedStyles} from '../SharedStyles.js'

src/components/GrampsjsTags.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import { GrampsjsTableBase } from './GrampsjsTableBase.js';
 

src/components/GrampsjsUrls.js

@@ -1,4 +1,4 @@
-import {html} from 'lit-element'
+import {html} from 'lit'
 import '@material/mwc-icon'
 import dayjs from 'dayjs/esm'
 import relativeTime from 'dayjs/esm/plugin/relativeTime'

src/icons.js

@@ -2,7 +2,7 @@
 Base class for Gramps views
 */
 
-import {LitElement, html, css} from 'lit-element'
+import {LitElement, html, css} from 'lit'
 import {sharedStyles} from '../SharedStyles.js'
 
 

src/util.js

@@ -1,4 +1,4 @@
-import {css, html} from 'lit-element'
+import {css, html} from 'lit'
 
 import {GrampsjsView} from './GrampsjsView.js'
 import '../components/GrampsjsBlogPost.js'

src/views/GrampsjsView.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import { GrampsjsViewObject } from './GrampsjsViewObject.js'
 import '../components/GrampsjsCitation.js'

src/views/GrampsjsViewBlog.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import {GrampsjsView} from './GrampsjsView.js'
 import './GrampsjsViewRecentlyChanged.js'

src/views/GrampsjsViewCitation.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import { GrampsjsViewObject } from './GrampsjsViewObject.js'
 import '../components/GrampsjsEvent.js'

src/views/GrampsjsViewDashboard.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import { GrampsjsViewObject } from './GrampsjsViewObject.js'
 import '../components/GrampsjsFamily.js'

src/views/GrampsjsViewEvent.js

@@ -1,4 +1,4 @@
-import {html, css} from 'lit-element'
+import {html, css} from 'lit'
 
 import {GrampsjsView} from './GrampsjsView.js'
 import '../components/GrampsjsMap.js'