chore/upgrade greenwood v0.29.0

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "bootstrap": "4.0.0-alpha.4",
     "font-awesome": "4.6.3",
-    "lit": "^2.0.0-rc.2",
+    "lit": "^3.0.0",
     "lit-redux-router": "~0.19.0",
     "pwa-helpers": "^0.9.1",
     "redux": "^4.0.5",
@@ -47,11 +47,11 @@
     "@aws-sdk/client-cloudfront": "^3.47.0",
     "@aws-sdk/client-s3": "^3.46.0",
     "@esm-bundle/chai": "^4.3.4",
-    "@greenwood/cli": "^0.28.4",
-    "@greenwood/plugin-google-analytics": "^0.28.4",
-    "@greenwood/plugin-import-css": "^0.28.4",
-    "@greenwood/plugin-postcss": "^0.28.4",
-    "@greenwood/plugin-typescript": "^0.28.4",
+    "@greenwood/cli": "^0.29.0",
+    "@greenwood/plugin-google-analytics": "^0.29.0",
+    "@greenwood/plugin-import-css": "^0.29.0",
+    "@greenwood/plugin-postcss": "^0.29.0",
+    "@greenwood/plugin-typescript": "^0.29.0",
     "@ls-lint/ls-lint": "^1.10.0",
     "@rollup/plugin-dynamic-import-vars": "^1.4.1",
     "@storybook/addon-actions": "^6.3.2",
@@ -60,7 +60,7 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/web-components": "^6.3.2",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "@web/test-runner": "^0.13.13",
     "@web/test-runner-junit-reporter": "^0.4.4",
     "@web/test-runner-puppeteer": "^0.10.2",
@@ -73,7 +73,6 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
-    "stylelint-config-standard": "^20.0.0",
-    "typescript": "^4.5.2"
+    "stylelint-config-standard": "^20.0.0"
   }
 }

src/components/card/card.model.ts

@@ -1,5 +1,5 @@
-import { Artist } from '../../services/artists/artist.model';
-import { Album } from '../../services/albums/album.model';
+import { Artist } from '../../services/artists/artist.model.ts';
+import { Album } from '../../services/albums/album.model.ts';
 
 function modelAlbum(album: Album) {
   return {

src/components/card/card.ts

@@ -6,7 +6,8 @@ import cardCss from './card.css?type=css';
 
 @customElement('app-card')
 export class CardComponent extends LitElement {
-  @property() details: Details;
+  @property()
+  accessor details: Details;
 
   static styles = css`${unsafeCSS(cardCss)}`;
 

src/components/events-calendar/events-calendar.ts

@@ -26,9 +26,14 @@ export class EventsCalendarComponent extends LitElement {
   ];
   private currentMonthData = [[Event]];
 
-  @property() events = [];
-  @property() currentMonthIndex;
-  @property() currentYear;
+  @property()
+  accessor events = [];
+
+  @property()
+  accessor currentMonthIndex;
+
+  @property()
+  accessor currentYear;
 
   constructor() {
     super();

src/components/footer/footer.ts

@@ -6,8 +6,11 @@ import footerCss from './footer.css?type=css';
 export class FooterComponent extends LitElement {
   static styles = css`${unsafeCSS(footerCss)}`;
 
-  @property() private STARTING_YEAR = 2007;
-  @property() private currentYear = new Date().getFullYear();
+  @property()
+  private accessor STARTING_YEAR = 2007;
+
+  @property()
+  private accessor currentYear = new Date().getFullYear();
 
   protected render(): TemplateResult {
     const { currentYear, STARTING_YEAR } = this;

src/components/posts-list/posts-list.ts

@@ -6,8 +6,11 @@ import postsListCss from './posts-list.css?type=css';
 
 @customElement('app-posts-list')
 export class PostsListComponent extends LitElement {
-  @property() max = 0;
-  @property() posts = [];
+  @property()
+  accessor max = 0;
+
+  @property()
+  accessor posts = [];
 
   async connectedCallback() {
     super.connectedCallback();

src/components/social-share/social-share.ts

@@ -7,7 +7,9 @@ import 'web-social-share';
 export class NavigationComponent extends LitElement {
   static styles = css`${unsafeCSS(socialShareCss)}`;
 
-  @property() show = false;
+  @property()
+  accessor show = false;
+
   shareConfig = {};
 
   constructor() {

src/routes/albums/album-details.ts

@@ -11,8 +11,11 @@ import albumsCss from './albums.css?type=css';
 @customElement('as-route-album-details')
 export class AlbumDetailsRouteComponent extends LitElement {
 
-  @property() id: string;
-  @property() album: Album;
+  @property()
+  accessor id: string;
+
+  @property()
+  accessor album: Album;
 
   async connectedCallback() {
     super.connectedCallback();

src/routes/albums/albums.ts

@@ -12,7 +12,8 @@ import albumsCss from './albums.css?type=css';
 @customElement('as-route-albums')
 export class AlbumsRouteComponent extends LitElement {
 
-  @property() albums: Array<Album> = [];
+  @property()
+  accessor albums: Array<Album> = [];
 
   async connectedCallback() {
     super.connectedCallback();

src/routes/artists/artist-details.ts

@@ -6,17 +6,22 @@ import { getArtistById } from '../../services/artists/artists-service.ts';
 import { getAlbumsByArtistId } from '../../services/albums/albums-service.ts';
 import { modelArtist, modelAlbum } from '../../components/card/card.model.ts';
 import { Artist } from '../../services/artists/artist.model.ts';
-import { Album } from '../../services/album/album.model.ts';
+import { Album } from '../../services/albums/album.model.ts';
 import '../../components/card/card.ts';
 import '../../components/social-share/social-share.ts';
 import artistsCss from './artists.css?type=css';
 
 @customElement('as-route-artist-details')
 export class ArtistDetailsRouteComponent extends LitElement {
 
-  @property() id: string;
-  @property() artist: Artist;
-  @property() albums: Array<Album>;
+  @property()
+  accessor id: string;
+
+  @property()
+  accessor artist: Artist;
+
+  @property()
+  accessor albums: Array<Album>;
 
   async connectedCallback() {
     super.connectedCallback();

src/routes/artists/artists.ts

@@ -14,9 +14,10 @@ export class ArtistsRouteComponent extends LitElement {
 
   private ANALOG_ID = '1';
   private displayArtists: Array<Artist> = [];
-  private analog: Artist = {};
+  private analog: Artist;
 
-  @property() artists: Array<Artist> = [];
+  @property()
+  accessor artists: Array<Artist> = [];
 
   async connectedCallback() {
     super.connectedCallback();
@@ -33,14 +34,14 @@ export class ArtistsRouteComponent extends LitElement {
   }
 
   private onArtistSelected(): void {
-    const selectedAristId = this.shadowRoot.querySelector('select').value;
+    const selectedArtistId = this.shadowRoot.querySelector('select').value;
 
-    store.dispatch(navigate(`/artists/${selectedAristId}`));
+    store.dispatch(navigate(`/artists/${selectedArtistId}`));
   }
 
   /* eslint-disable indent */
   protected render(): TemplateResult {
-    const { displayArtists, analog } = this;
+    const { displayArtists = [], analog = {} } = this;
 
     return html`
       <style>

src/routes/contact/contact.ts

@@ -5,7 +5,7 @@ import contactCss from './contact.css?type=css';
 @customElement('as-route-contact')
 export class ContactRouteComponent extends LitElement {
 
-  protected connectedCallback(): void {
+  connectedCallback(): void {
     super.connectedCallback();
 
     ga('set', 'page', '/contact');

src/routes/events/event-details.ts

@@ -12,8 +12,11 @@ export class EventDetailsRouteComponent extends LitElement {
   private MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
   private DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
-  @property() id: string;
-  @property() event: Event;
+  @property()
+  accessor id: string;
+
+  @property()
+  accessor event: Event;
 
   async connectedCallback() {
     super.connectedCallback();

src/routes/events/events.ts

@@ -7,7 +7,7 @@ import eventsCss from './events.css?type=css';
 @customElement('as-route-events')
 export class EventsRouteComponent extends LitElement {
 
-  protected connectedCallback(): void {
+  connectedCallback(): void {
     super.connectedCallback();
 
     ga('set', 'page', '/events');

tsconfig.json

@@ -1,12 +1,14 @@
 {
-  "exclude": [
-    "./node_modules/*"
-  ],
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "NodeNext",
+    "lib": ["es2022", "DOM", "DOM.Iterable", "esnext"],
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "NodeNext",
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
   "include": [
-    "./**/*.ts"
+    "./src/**/*.ts"
   ],
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "experimentalDecorators": true
-  }
 }