SveltKit-ify routing

Author: jmandel

src/AddFile.svelte src/lib/AddFile.svelte

@@ -5,6 +5,7 @@
 
   import type { Writable } from 'svelte/store';
   import type { SHLAdminParams, SHLClient } from './managementClient';
+  import { assets } from '$internal/paths';
 
   export let shl: SHLAdminParams;
   let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
@@ -83,7 +84,7 @@
       <li class="logo">
         <span class="show">Present SMART Health Link as QR</span>
         <img class="qr" alt="QR Code for SHL" src={dataUrl} />
-        <img class="logo" alt="SMART Logo" src={'./smart-logo.svg'} />
+        <img class="logo" alt="SMART Logo" src={assets + '/smart-logo.svg'} />
       </li>
     {/await}
     <li>

src/HealthLink.svelte src/lib/HealthLink.svelte

@@ -1,30 +1,32 @@
 <script lang="ts">
-  import { Col, Container, Icon, Row, Styles } from 'sveltestrap';
-  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import {
     ButtonDropdown,
+    Col,
+    Container,
     DropdownItem,
     DropdownMenu,
     DropdownToggle,
+    Icon,
     Navbar,
-    NavbarBrand
+    NavbarBrand,
+    Row,
+    Styles
   } from 'sveltestrap';
-  import { SHLClient, type SHLAdminParams } from '../managementClient';
+  import { SHLClient, type SHLAdminParams } from '$lib/managementClient';
 
   const LOCAL_STORAGE_KEY = 'shlips_store_shls';
   let shlStore = writable<SHLAdminParams[]>(
-    browser && window.localStorage[LOCAL_STORAGE_KEY]
-      ? JSON.parse(window.localStorage[LOCAL_STORAGE_KEY])
-      : []
+    window.localStorage[LOCAL_STORAGE_KEY] ? JSON.parse(window.localStorage[LOCAL_STORAGE_KEY]) : []
   );
 
   let selectedShl = writable<number | undefined>($shlStore.length > 0 ? 0 : undefined);
   setContext('selectedShl', selectedShl);
 
   $: {
-    if (browser && $shlStore) window.localStorage[LOCAL_STORAGE_KEY] = JSON.stringify($shlStore);
+    if ($shlStore) window.localStorage[LOCAL_STORAGE_KEY] = JSON.stringify($shlStore);
   }
 
   setContext('shlStore', shlStore);
@@ -45,16 +47,16 @@
         <ButtonDropdown size="sm">
           <DropdownToggle color="primary" caret>Actions...</DropdownToggle>
           <DropdownMenu>
-            <DropdownItem on:click={() => ($selectedShl = undefined)}>Add New SHLink</DropdownItem>
-            <DropdownItem on:click={() => $reset++}>Reset Demo</DropdownItem>
+            <DropdownItem href="/create">Add New SHLink</DropdownItem>
+            <DropdownItem
+              on:click={() => delete window.localStorage[LOCAL_STORAGE_KEY] && goto('/')}
+              >Reset Demo</DropdownItem
+            >
             {#if $shlStore.length > 0}
               <DropdownItem divider />
               <DropdownItem header>Stored SHLinks</DropdownItem>
               {#each $shlStore as shl, i}
-                <DropdownItem
-                  on:click={() => {
-                    $selectedShl = i;
-                  }}
+                <DropdownItem href={'/view/' + shl.id}
                   ><Icon name="eye" />
                   {shl.label || `SHLink ${i + 1}`}</DropdownItem
                 >

src/app.d.ts src/lib/app.d.ts

@@ -1 +1,2 @@
-export const prerender = true;
+export const prerender = false;
+export const ssr = false;

src/config.ts src/lib/config.ts

@@ -1,36 +1,14 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
+  import type { SHLAdminParams, SHLClient } from '$lib/managementClient';
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
-  import AddFile from '../AddFile.svelte';
-  import HealthLink from '../HealthLink.svelte';
-  import type { SHLAdminParams, SHLClient } from '../managementClient';
-  import type { SHCRetrieveEvent } from '../types';
 
   let shlClient: SHLClient = getContext('shlClient');
   let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
-  let selectedShl: Writable<number | undefined> = getContext('selectedShl');
-  let reset: Writable<number> = getContext('reset');
-
-  $: if ($reset) $shlStore = [];
-
-  async function newShlFromShc(details: SHCRetrieveEvent) {
-    const shlCreated = await shlClient.createShl();
-    shlClient.addFile(shlCreated, details.shc, 'application/smart-health-card');
-    shlCreated.label = details.label;
-    return shlCreated;
+  if ($shlStore.length) {
+    goto("/view/"+$shlStore[0].id)
+  } else {
+    goto("/create")
   }
 </script>
-
-{#if $selectedShl !== undefined}
-  <HealthLink shl={$shlStore[$selectedShl]} />
-{:else if browser}
-  <AddFile
-    on:shc-retrieved={async ({ detail }) => {
-      $shlStore = [...$shlStore, await newShlFromShc(detail)];
-      $selectedShl = $shlStore.length - 1;
-    }}
-  />
-{:else}
-  Loading
-{/if}

src/issuer.private.jwks.json src/lib/issuer.private.jwks.json

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import type { SHLAdminParams, SHLClient } from '$lib/managementClient';
+  import type { SHCRetrieveEvent } from '$lib/types';
+    import AddFile from '$lib/AddFile.svelte';
+
+  let shlClient: SHLClient = getContext('shlClient');
+  let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
+
+  async function newShlFromShc(details: SHCRetrieveEvent): Promise<SHLAdminParams> {
+    const shlCreated = await shlClient.createShl();
+    shlClient.addFile(shlCreated, details.shc, 'application/smart-health-card');
+    shlCreated.label = details.label;
+    return shlCreated;
+  }
+</script>
+
+<AddFile
+  on:shc-retrieved={async ({ detail }) => {
+    const newShl = await newShlFromShc(detail);
+    $shlStore = [...$shlStore, newShl];
+    goto(`/view/${newShl.id}`);
+  }}
+/>

src/managementClient.ts src/lib/managementClient.ts

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import HealthLink from '$lib/HealthLink.svelte';
+  import type { SHLAdminParams } from '$lib/managementClient';
+  let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
+  let shl: SHLAdminParams | undefined;
+  $: {
+    shl = $shlStore.filter((s) => s.id === $page.params.id)?.[0];
+  }
+</script>
+
+{#if shl}
+  <HealthLink {shl} />
+{:else}
+  SHLink {$page.params.id} Not Found
+{/if}

src/types.ts src/lib/types.ts

@@ -12,7 +12,7 @@ export default {
       // these options are set automatically — see below
       pages: 'build',
       assets: 'build',
-      fallback: null,
+      fallback: "404.html",
       precompress: false,
       strict: true,
       paths: {