Request: support top-level component props

Right now, it seems to be required that you have a single component property called params on your components to be able to route to them.

For example:

const routes = {
    '/:foo/:bar': MyComponent
}

requires a component that declares:

export let params = {};

And accesses the values via params.foo and params.bar.

But that makes your component’s design tightly coupled with svelte-spa-router. If I have a component that’s designed to be generally reusable, with parameters like this:

export let foo = "some default foo"
export let bar = "some default bar"

… there doesn’t seem to be a great way to bridge the gap between what is required by svelte-spa-router, and what is expected by general-purpose svelte components.

[ItalyPaleAle]

I think this should work, although I haven’t tried it! I would just make two suggestions:

1. export let params = {} -> Don’t assign default values to that because they will be ignored anyways
2. I think it’s better to have two lines such as:

   $: foo = params && params.foo
   $: bar = params && params.bar
   

   This is so the reactive statement isn’t triggered if foo or bar change (I’ve seen Svelte having some weird behaviors there)

If your goal is to have a component work in both svelte-spa-router and standalone, you can also simply consider wrapping your component into another one.

For example, assume you have a component Foo that exports proeprties foo and bar. Rather than adding Foo itself to the router (in the route definition object), you create a component called FooRoute that contains this:

<Foo {foo} {bar} />
<script>
export let params
$: foo = params && params.foo
$: bar = params && params.bar
</script>

Then you use FooRoute in the route definition object.

[ItalyPaleAle]

Well, yes. But it depends on how many components you need wrapped too!