oncreate always fired

[rob-balfre]

Thanks for sharing svelte-routing. Been playing around with it today and noticed this...

<Route path="/dashboard"><Dashboard /></Route>

Dashboard will always fire it's oncreate method even if the path isn't active.

[EmilTholin]

Hi @rob-balfre! Thanks!

Ouch. I'm not entirely sure how to mitigate this and still have SSR work, but I will look into it.

[EmilTholin]

Thanks for bringing this to my attention @rob-balfre. It turns out that this is the expected behavior of <slot>. I should have noticed this sooner.

I think it would be best to add a warning to the documentation that Route.html behaves this way, and introduce a new API in a minor release, e.g. import { match } from 'svelte-routing';

match could then be used instead:

<nav>
  <NavLink exact to="/">Home</NavLink>
  <NavLink to="/about">About</NavLink>
  <NavLink to="/blog">Blog</NavLink>
</nav>

{{#if match('/', { exact: true })}}
  <Home/>
{{elseif match('/about')}}
  <About/>
{{elseif match('/blog')}}
  <Blog/>
{{/if}}

<script>
import { match } from 'svelte-routing';
import NavLink from 'svelte-routing/NavLink.html';
import Home from './components/Home.html';
import About from './components/About.html';
import Blog from './components/Blog.html';

export default {
  components: {
    NavLink,
    Home,
    About,
    Blog
  },
  methods: {
    match
  }
};
</script>

I will give this some more thought, and I'm open to suggestions!

[rob-balfre]

Looks good. Also FYI Rich is planning to allow for dynamic components hopefully very soon. sveltejs/svelte#640

[EmilTholin]

I apologize for the extremely slow progress on this.

I experimented with dynamic components after your suggestion @rob-balfre , and it seems to be exactly what is needed! Instead of just putting the children of Route in a <slot> like it is now, we can add the option of passing a component constructor:

<!-- Route.html -->
{{#if match !== null}}
  {{#if component !== null}}
    <:Component {component}/>
  {{else}}
    <slot></slot>
  {{/if}}
{{/if}}

<!-- App.html -->
<Route exact path="/" component={{Home}} />

This way oncreate is called when expected, SSR still works, and you still have the option of using the current <slot> behavior for simple markup/components which don't rely on oncreate!

[EmilTholin]

I added the option of rendering a route with a component in 0.1.0, with the help of dynamic components. Thank you for the suggestion @rob-balfre!