Merge pull request #3 from pynnl/rewrite-matching-algorithm

Rewrite matching algorithm

Author: Ryan

cypress/integration/main.spec.js

@@ -205,3 +205,16 @@ it('matches', () => {
   cy.visit('#/matches/route2/route3')
   checkProp(arr, '/', 'matches', '/route2', '/route3')
 })
+
+it('stringify', () => {
+  cy.visit('#/stringify')
+
+  cy.get('button:contains(123)').click()
+  cy.get('.property').should('contain', 'John')
+
+  cy.get('button:contains(456)').click()
+  cy.get('.property').should('contain', 'Anne')
+
+  cy.get('button:contains(789)').click()
+  cy.get('.property').should('contain', 'Rose')
+})

package.json

@@ -22,7 +22,7 @@
     "lint:style": "stylelint .",
     "test": "run-s lint test:build test:start",
     "test:dev": "npm run test:build -- -w",
-    "test:build": "rollup -c test.config.js",
+    "test:build": "rollup -c",
     "test:server": "browser-sync test --no-ui --no-open",
     "test:start": "server-test test:server 3000 test:cy",
     "test:cy": "cypress run --spec cypress/integration/main.spec.js"

test.config.js renamed to rollup.config.js

@@ -3,19 +3,10 @@ import { derived } from 'svelte/store'
 import { routes } from './routes'
 import { pathname } from './path'
 
-function map (routes, matches = []) {
-  return Object.values(routes).reverse().map(e => [e, matches])
-}
-
 // Search for matching route
-function parse (routes, pathname) {
-  let stack = map(routes)
-
-  while (stack.length) {
-    let [active, matches] = stack.pop()
+function parse (active, pathname, notRoot, matches = []) {
+  if (notRoot) {
     let params = active.$$pattern.match(pathname)
-    matches = [...matches, active]
-
     if (params) {
       return !active.$$redirect
         ? { active, params, matches }
@@ -25,8 +16,11 @@ function parse (routes, pathname) {
           window.dispatchEvent(new Event('hashchange'))
         })
     }
+  }
 
-    stack = stack.concat(map(active, matches))
+  for (let e of Object.values(active)) {
+    let result = parse(e, pathname, true, [...matches, e])
+    if (result) return result
   }
 }
 

src/utils/match.js

@@ -17,6 +17,9 @@ let path = readable(parse(), set => {
 
 let pathname = derived(path, $ => $.pathname) // current pathname without query
 let querystring = derived(path, $ => $.querystring)
-let query = derived(querystring, $ => Object.fromEntries(new URLSearchParams($)))
+let query = derived(querystring, $ => {
+  return Array.from(new URLSearchParams($))
+    .reduce((a, [i, e]) => { a[i] = e; return a }, {})
+})
 
 export { pathname, query }

src/utils/path.js

@@ -15,8 +15,7 @@ function parse (schema = {}, notRoot, pathname, href = '#') {
     let type = typeof schema
     schema = type === 'function' ? { $$component: schema }
       : type === 'string' ? { $$redirect: schema }
-      : type !== 'object' ? {}
-      : schema === null ? {} : schema
+      : (type !== 'object' || schema === null) ? {} : schema
 
     let c = schema.$$component
     if (typeof c !== 'function' && c !== undefined && c !== null)

src/utils/routes.js

@@ -10,6 +10,7 @@ import Params, { schema as _Params } from './tests/Params.svelte'
 import Query from './tests/Query.svelte'
 import Active, { schema as _Active } from './tests/Active.svelte'
 import Matches, { schema as _Matches } from './tests/Matches.svelte'
+import Stringify, { schema as _Stringify } from './tests/Stringify.svelte'
 
 routes.set({
   '/': {
@@ -23,7 +24,8 @@ routes.set({
     'params': { $$component: Params, ..._Params },
     'query': Query,
     'active': { $$component: Active, ..._Active },
-    'matches': { $$component: Matches, ..._Matches }
+    'matches': { $$component: Matches, ..._Matches },
+    'stringify': { $$component: Stringify, ..._Stringify }
   }
 })
 

test/src/index.js

@@ -0,0 +1,36 @@
+<script context='module'>
+import { routes, params } from '../../../src'
+import Navigator from '../components/Navigator.svelte'
+import Property from '../components/Property.svelte'
+
+export let schema = {
+  '/:id/:name': null
+}
+</script>
+
+<script>
+let current = 0
+let values = [
+  { id: '123', name: 'John' },
+  { id: '456', name: 'Anne' },
+  { id: '789', name: 'Rose' }
+]
+
+$: route = $routes[`/`][`stringify`]
+</script>
+
+<Navigator route='{$routes[`/`][`stringify`]}'/>
+<div>
+  {#each values as e, i}
+    <button on:click='{()=>current=i}'>{e.id} - {e.name}</button>
+  {/each}
+  <Property value={values[current].name}/>
+</div>
+
+<style>
+button {
+  display: block;
+  margin: 10px 20px;
+  padding: 5px;
+}
+</style>