Make URL params available to client apps via context

packages/client/src/components/Router.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getContext, setContext } from "svelte"
+  import { getContext } from "svelte"
   import Router from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
@@ -10,12 +10,10 @@
   // Only wrap this as an array to take advantage of svelte keying,
   // to ensure the svelte-spa-router is fully remounted when route config
   // changes
-  $: configs = [
+  $: config = {
-    {
+    routes: getRouterConfig($routeStore.routes),
-      routes: getRouterConfig($routeStore.routes),
+    id: $routeStore.routeSessionId,
-      id: $routeStore.routeSessionId,
+  }
-    },
-  ]
 
   const getRouterConfig = routes => {
     let config = {}
@@ -33,11 +31,11 @@
   }
 </script>
 
-{#each configs as config (config.id)}
+{#key config.id}
   <div use:styleable={$component.styles}>
     <Router on:routeLoading={onRouteLoading} routes={config.routes} />
   </div>
-{/each}
+{/key}
 
 <style>
   div {

packages/client/src/components/Screen.svelte

@@ -2,6 +2,7 @@
   import { fade } from "svelte/transition"
   import { screenStore, routeStore } from "../store"
   import Component from "./Component.svelte"
+  import Provider from "./Provider.svelte"
 
   // Keep route params up to date
   export let params = {}
@@ -12,16 +13,16 @@
 
   // Redirect to home layout if no matching route
   $: screenDefinition == null && routeStore.actions.navigate("/")
-
-  // Make a screen array so we can use keying to properly re-render each screen
-  $: screens = screenDefinition ? [screenDefinition] : []
 </script>
 
-{#each screens as screen (screen._id)}
+<!-- Ensure to fully remount when screen changes -->
-  <div in:fade>
+{#key screenDefinition?._id}
-    <Component definition={screen} />
+  <Provider key="url" data={params}>
-  </div>
+    <div in:fade>
-{/each}
+      <Component definition={screenDefinition} />
+    </div>
+  </Provider>
+{/key}
 
 <style>
   div {