feat: add dynamic props

README.md

@@ -439,7 +439,6 @@ Check out the [Advanced Usage](/Advanced%20Usage.md) documentation for using:
 - [`routeEvent` event](/Advanced%20Usage.md#routeevent-event)
 - [`routeLoading` and `routeLoaded` events](/Advanced%20Usage.md#routeloading-and-routeloaded-events)
 - [Querystring parsing](/Advanced%20Usage.md#querystring-parsing)
-- [Static props](/Advanced%20Usage.md#static-props)
 - [Route transitions](/Advanced%20Usage.md#route-transitions)
 - [Nested routers](/Advanced%20Usage.md#nested-routers)
 - [Route groups](/Advanced%20Usage.md#route-groups)

Router.d.ts

@@ -177,6 +177,9 @@ interface RouterEvent<T> {
 /** Event type for conditionsFailed */
 export type ConditionsFailedEvent = RouterEvent<RouteDetail>
 
+/** Event type for propsFailed */
+export type PropsFailedEvent = RouterEvent<RouteDetail>
+
 /** Event type for routeLoading */
 export type RouteLoadingEvent = RouterEvent<RouteDetail>
 
@@ -218,6 +221,7 @@ export default class Router extends SvelteComponent {
 
     $on(event: 'routeEvent', callback: (event: CustomEvent) => void): () => void
     $on(event: 'conditionsFailed', callback: (event: ConditionsFailedEvent) => void): () => void
+    $on(event: 'propsFailed', callback: (event: PropsFailedEvent) => void): () => void
     $on(event: 'routeLoading', callback: (event: RouteLoadingEvent) => void): () => void
     $on(event: 'routeLoaded', callback: (event: RouteLoadedEvent) => void): () => void
 }

Router.svelte

@@ -579,8 +579,40 @@ const unsubscribeLoc = loc.subscribe(async (newLoc) => {
             componentParams = null
         }
 
-        // Set static props, if any
-        props = routesList[i].props
+        // Set props, if any
+        props = {}
+        // Iterate over the props object and resolve any callbacks where applicable
+        Object.entries(routesList[i].props).forEach(([k, v]) => {
+            // Catches any errors gracefully which is not handled by the prop function
+            try {
+                if (typeof v == 'function') {
+                    const userDefinedPropValue = v(detail.userData)
+                    // resolve if the user provided function returns a promise
+                    if (typeof userDefinedPropValue.then == 'function') {
+                        userDefinedPropValue.then(returnedValue => {
+                            props[k] = returnedValue
+                        })
+                    } 
+                    else {
+                        props[k] = userDefinedPropValue
+                    }
+                } 
+                else {
+                    props[k] = v
+                }
+
+                dispatchNextTick('propResolved', {
+                    prop: k,
+                    value: props[k],
+                })
+            }
+            catch (error) {
+                dispatchNextTick('propFailed', {
+                    prop: k,
+                    error,
+                })
+            }
+        })
 
         // Dispatch the routeLoaded event then exit
         // We need to clone the object on every event invocation so we don't risk the object to be modified in the next tick

test/app/src/routes.js

@@ -100,7 +100,10 @@ if (!urlParams.has('routemap')) {
         // This route has a static prop that is passed to it
         '/foo': wrap({
             component: Foo,
-            props: {staticProp: 'this is static'}
+            props: {
+                staticProp: 'this is static',
+                dynamicProp: async () => Promise.resolve(`this is dynamic - ${new Date}`),
+            }
         }),
 
         // This component contains a nested router

test/app/src/routes/Foo.svelte

@@ -4,7 +4,15 @@
   <p>No static props here!</p>
 {/if}
 
+{dynamicProp}
+{#if dynamicProp}
+  <p>We have a static prop: <b id="dynamicprop">{dynamicProp}</b></p>
+{:else}
+  <p>No static props here!</p>
+{/if}
+
 <script>
 // Static props if they're set
 export let staticProp = null
+export let dynamicProp = null
 </script>

test/cases/01-routing.test.js

@@ -385,4 +385,13 @@ describe('<Router> component', function() {
 
         browser.end()
     })
+
+    it('dynamic props', (browser) => {
+        browser
+            .url(browser.launchUrl + '/#/foo')
+            .waitForElementVisible('#dynamicprop')
+            .expect.element('#dynamicprop').text.to.startWith('this is dynamic')
+
+        browser.end()
+    })
 })