Add routing

package-lock.json

@@ -9,7 +9,8 @@
       "license": "MIT",
       "dependencies": {
         "lit-element": "^2.0.1",
-        "lit-html": "^1.0.0"
+        "lit-html": "^1.0.0",
+        "pwa-helpers": "^0.9.1"
       },
       "devDependencies": {
         "@open-wc/building-rollup": "^1.0.0",
@@ -9753,6 +9754,11 @@
         "glob": "^7.1.3"
       }
     },
+    "node_modules/pwa-helpers": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/pwa-helpers/-/pwa-helpers-0.9.1.tgz",
+      "integrity": "sha512-4sP/C9sSxQ3w80AATmvCEI3R+MHzCwr2RSZEbLyMkeJgV3cRk7ySZRUrQnBDSA7A0/z6dkYtjuXlkhN1ZFw3iA=="
+    },
     "node_modules/qs": {
       "version": "6.9.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
@@ -22298,6 +22304,11 @@
         }
       }
     },
+    "pwa-helpers": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/pwa-helpers/-/pwa-helpers-0.9.1.tgz",
+      "integrity": "sha512-4sP/C9sSxQ3w80AATmvCEI3R+MHzCwr2RSZEbLyMkeJgV3cRk7ySZRUrQnBDSA7A0/z6dkYtjuXlkhN1ZFw3iA=="
+    },
     "qs": {
       "version": "6.9.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",

package.json

@@ -61,6 +61,7 @@
   "license": "MIT",
   "dependencies": {
     "lit-element": "^2.0.1",
-    "lit-html": "^1.0.0"
+    "lit-html": "^1.0.0",
+    "pwa-helpers": "^0.9.1"
   }
 }

src/GrampsJs.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
+import { installRouter } from 'pwa-helpers/router.js';
 
 import './views/GrampsjsViewPerson.js'
 
@@ -7,12 +8,16 @@ export class GrampsJs extends LitElement {
   static get properties() {
     return {
       strings: { type: Object },
+      _page: { type: String },
+      _pageId: { type: String },
     };
   }
 
   constructor() {
     super();
     this.strings = {};
+    this._page = 'home';
+    this._pageId = '';
   }
 
   static get styles() {
@@ -30,17 +35,51 @@ export class GrampsJs extends LitElement {
       main {
         flex-grow: 1;
       }
+
+      .page {
+        display: none;
+      }
+
+      .page[active] {
+        display: block;
+      }
     `;
   }
 
   render() {
     return html`
       <main>
-        <h1>Gramps.js</h1>
+      Page: ${this._page}
+      Subpage: ${this._pageId}
+      <h1>Gramps.js</h1>
+      <p><a href="/">Home</a></p>
+      <p><a href="/person/I0044">Person</a></p>
+      <grampsjs-view-person
+          class="page"
+          ?active=${this._page === 'person'}
+          grampsId="${this._pageId}"
+        ></grampsjs-view-person>
 
-        <grampsjs-view-person grampsId="I0044"></grampsjs-view-person>
       </main>
     `;
   }
 
+  firstUpdated() {
+    installRouter((location) => this._loadPage(decodeURIComponent(location.pathname)));
+  }
+
+  _loadPage(path) {
+    if (path === "/") {
+      console.log("hoooome")
+      this._page = 'home';
+      this._pageId = '';
+    } else{
+      const pathId = path.slice(1);
+      const page = pathId.split('/')[0]
+      const pageId = pathId.split('/')[1]
+      this._page = page;
+      this._pageId = pageId || '';
+    }
+  }
+
 }

src/views/GrampsjsView.js

@@ -9,8 +9,13 @@ export class GrampsjsView extends LitElement {
     ];
   }
 
+  shouldUpdate() {
+    return this.active;
+  }
+
   static get properties() {
     return {
+      active: { type: Boolean },
       strings: { type: Object },
     };
   }