refactor(router): migrate from @vaadin/router to @lit-labs/router

package.json

@@ -15,11 +15,12 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@lit-labs/router": "^0.1.4",
     "@lit/task": "^1.0.3",
-    "@vaadin/router": "^2.0.1",
     "lit": "^3.3.2",
     "three": "^0.182.0",
     "three-stdlib": "^2.36.1",
+    "urlpattern-polyfill": "^10.1.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {

src/app.ts

@@ -1,26 +1,20 @@
 import { LitElement, html, css, type TemplateResult } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import { Router } from '@vaadin/router';
+import { customElement } from 'lit/decorators.js';
 import { routes } from './routes';
 
 import './components/header/header';
 import './components/footer/footer';
+import { Router } from '@lit-labs/router';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
-  @query('#outlet')
-  private _outlet!: HTMLElement | null;
-
-  firstUpdated(): void {
-    const router = new Router(this._outlet);
-    router.setRoutes(routes);
-  }
+  private _router = new Router(this, routes);
 
   render(): TemplateResult {
     return html`
       <main>
         <app-header></app-header>
-        <div id="outlet"></div>
+        <div id="outlet">${this._router.outlet()}</div>
         <app-footer></app-footer>
       </main>
     `;

src/main.ts

@@ -1 +1,2 @@
+import 'urlpattern-polyfill';
 import './app';

src/views/about-view.ts → src/pages/about.ts

@@ -1,8 +1,8 @@
 import { LitElement, html, css, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-@customElement('about-view')
-export class AboutView extends LitElement {
+@customElement('about-page')
+export class AboutPage extends LitElement {
   render(): TemplateResult {
     return html`<section>
       <h3 class="title">About Us</h3>
@@ -84,6 +84,6 @@ export class AboutView extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'about-view': AboutView;
+    'about-page': AboutPage;
   }
 }

src/views/home-view.ts → src/pages/home.ts

@@ -19,8 +19,8 @@ const PERSON_IMAGES: readonly {
   { alt: 'person-4', path: person4, id: '4' },
 ];
 
-@customElement('home-view')
-export class HomeView extends LitElement {
+@customElement('home-page')
+export class HomePage extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     this.dispatchEvent(
@@ -203,6 +203,6 @@ export class HomeView extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'home-view': HomeView;
+    'home-page': HomePage;
   }
 }

src/views/not-found-view.ts → src/pages/not-found.ts

@@ -1,8 +1,8 @@
 import { LitElement, css, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-@customElement('not-found-view')
-export class NotFoundView extends LitElement {
+@customElement('not-found-page')
+export class NotFoundPage extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     this.dispatchEvent(
@@ -78,6 +78,6 @@ export class NotFoundView extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'not-found-view': NotFoundView;
+    'not-found-page': NotFoundPage;
   }
 }

src/views/projects-view.ts → src/pages/projects.ts

@@ -15,8 +15,8 @@ type Repo = {
   stargazers_count: number;
 };
 
-@customElement('projects-view')
-export class ProjectsView extends LitElement {
+@customElement('projects-page')
+export class ProjectsPage extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     this._githubReposTask.run();
@@ -172,6 +172,6 @@ export class ProjectsView extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'projects-view': ProjectsView;
+    'projects-page': ProjectsPage;
   }
 }