From 3ffe00fe2f83dea02dbb7cae105a46431b1e54a8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 10 Feb 2021 15:49:23 +0000
Subject: [PATCH] Make URL params available to client apps via context

---
 packages/client/src/components/Router.svelte | 16 +++++++---------
 packages/client/src/components/Screen.svelte | 17 +++++++++--------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index efa0e321aa..ddbe7b77e9 100644
--- a/packages/client/src/components/Router.svelte
+++ b/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 = [
-    {
-      routes: getRouterConfig($routeStore.routes),
-      id: $routeStore.routeSessionId,
-    },
-  ]
+  $: config = {
+    routes: getRouterConfig($routeStore.routes),
+    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 {
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index a68ea237b2..eaa88ceee2 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/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)}
-  <div in:fade>
-    <Component definition={screen} />
-  </div>
-{/each}
+<!-- Ensure to fully remount when screen changes -->
+{#key screenDefinition?._id}
+  <Provider key="url" data={params}>
+    <div in:fade>
+      <Component definition={screenDefinition} />
+    </div>
+  </Provider>
+{/key}
 
 <style>
   div {