Export params as a readable store (#224)

ItalyPaleAle · Jun 16, 2021 · 864312e · 864312e
1 parent 2f1490d
commit 864312e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/Router.d.ts b/Router.d.ts
@@ -142,6 +142,12 @@ export const location: Readable<string>
  */
 export const querystring: Readable<string | undefined>
 
+/**
+ * Readable store that returns the current list of params
+ */
+export const params: Readable<Record<string, string> | undefined>
+// Note: the above is implemented as writable but exported as readable because consumers should not modify the value
+
 /** List of routes */
 export type RouteDefinition = Record<string, typeof SvelteComponent | WrappedComponent> |
     Map<string | RegExp, typeof SvelteComponent | WrappedComponent>

diff --git a/Router.svelte b/Router.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-import {readable, derived} from 'svelte/store'
+import {readable, writable, derived} from 'svelte/store'
 import {tick} from 'svelte'
 import {wrap as _wrap} from './wrap'
 
@@ -85,6 +85,13 @@ export const querystring = derived(
     ($loc) => $loc.querystring
 )
 
+/**
+ * Store that returns the currently-matched params.
+ * Despite this being writable, consumers should not change the value of the store.
+ * It is exported as a readable store only (in the typings file)
+ */
+export const params = writable(undefined)
+
 /**
  * Navigates to a new page programmatically.
  *
@@ -537,13 +544,16 @@ const unsubscribeLoc = loc.subscribe(async (newLoc) => {
         dispatchNextTick('routeLoaded', Object.assign({}, detail, {
             component: component,
             name: component.name
-        }))
+        })).then(() => {
+            params.set(componentParams)
+        })
         return
     }
 
     // If we're still here, there was no match, so show the empty component
     component = null
     componentObj = null
+    params.set(undefined)
 })
 
 onDestroy(() => {

diff --git a/test/app/src/App.svelte b/test/app/src/App.svelte
@@ -23,6 +23,8 @@
     Current path: <code id="currentpath">{$location}</code>
     <br/>
     Querystring: <code id="currentqs">{$querystring}</code>
+    <br/>
+    Params: <code id="currentparams">{JSON.stringify($params)}</code>
 </p>
 
 <!-- Show the router -->
@@ -69,8 +71,9 @@
 // Normally, this would be: `import Router from 'svelte-spa-router'`
 import Router from '../../../Router.svelte'
 // Import the "link" action, the methods to control history programmatically from the same module, and the location store
+// The params store contains the current list of params, parsed
 // Normally, this would be: `import {link, push, pop, replace, location, querystring} from 'svelte-spa-router/active'`
-import {link, push, pop, replace, location, querystring} from '../../../Router.svelte'
+import {link, push, pop, replace, location, querystring, params} from '../../../Router.svelte'
 
 // Import the "active" action
 // Normally, this would be: `import active from 'svelte-spa-router/active'`

diff --git a/test/cases/01-routing.test.js b/test/cases/01-routing.test.js
@@ -37,6 +37,7 @@ describe('<Router> component', function() {
             .assert.containsText('h2.routetitle', 'Home!')
             .expect.element('#currentpath').text.to.equal('/')
         browser.expect.element('#currentqs').text.to.equal('')
+        browser.expect.element('#currentparams').text.to.equal('null')
 
         // /wild
         browser
@@ -45,6 +46,7 @@ describe('<Router> component', function() {
             .assert.containsText('h2.routetitle', 'Wild')
             .expect.element('#currentpath').text.to.equal('/wild')
         browser.expect.element('#currentqs').text.to.equal('')
+        browser.expect.element('#currentparams').text.to.equal('null')
 
         // /hello/svelte
         browser
@@ -53,6 +55,7 @@ describe('<Router> component', function() {
             .assert.containsText('h2.routetitle', 'Hi there!')
             .expect.element('#currentpath').text.to.equal('/hello/svelte')
         browser.expect.element('#currentqs').text.to.equal('')
+        browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}')
 
         browser.end()
     })
@@ -65,6 +68,7 @@ describe('<Router> component', function() {
             .assert.containsText('h2.routetitle', 'Hi there!')
             .expect.element('#currentpath').text.to.equal('/hello/svelte')
         browser.expect.element('#currentqs').text.to.equal('')
+        browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}')
 
         browser.end()
     })
@@ -77,13 +81,15 @@ describe('<Router> component', function() {
             .assert.containsText('h2.routetitle', 'Hi there!')
             .expect.element('#currentpath').text.to.equal('/hello/svelte')
         browser.expect.element('#currentqs').text.to.equal('')
+        browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}')
 
         browser
             .refresh(() => {
                 browser.waitForElementVisible('h2.routetitle')
                     .assert.containsText('h2.routetitle', 'Hi there!')
                     .expect.element('#currentpath').text.to.equal('/hello/svelte')
                 browser.expect.element('#currentqs').text.to.equal('')
+                browser.expect.element('#currentparams').text.to.equal('{"first":"svelte","last":null}')
 
                 browser.end()
             })
@@ -96,6 +102,7 @@ describe('<Router> component', function() {
             .assert.containsText('h2.routetitle', 'NotFound')
             .expect.element('#currentpath').text.to.equal('/does/not/exist')
         browser.expect.element('#currentqs').text.to.equal('')
+        browser.expect.element('#currentparams').text.to.equal('{"wild":"does/not/exist"}')
 
         browser.end()
     })
@@ -127,6 +134,7 @@ describe('<Router> component', function() {
                     .assert.containsText('h2.routetitle', 'Home!')
                     .expect.element('#currentpath').text.to.equal('/brand')
                 browser.expect.element('#currentqs').text.to.equal('')
+                browser.expect.element('#currentparams').text.to.equal('null')
 
                 browser.end()
             })
@@ -174,6 +182,7 @@ describe('<Router> component', function() {
                     .waitForElementVisible('h2.routetitle')
                     .assert.containsText('h2.routetitle', 'Wild')
                     .expect.element('#currentpath').text.to.equal('/wild/something')
+                browser.expect.element('#currentparams').text.to.equal('{"wild":"something"}')
 
                 browser.url((url) => {
                     assert.strictEqual(url.value, browser.launchUrl + '/#/wild/something')