Svelte app navigate

app_nav.svelte.html

<script>
import { writable, get } from 'svelte/store'

export const pages = writable([])
export const dialogs = writable([])

export default {
  push (component, props = {}) {
    dialogs.set([])
    pages.update(e => [ ...e, { component, props } ])
  },

  replace (component, props = {}) {
    dialogs.set([])
    pages.update(e => [ ...e.slice(0, -1), { component, props } ])
  },

  popup (component, props = {}) {
    dialogs.update(e => [ ...e, { component, props } ])
  },

  get isPoppable () {
    return get(dialogs).length > 0 || get(pages).length > 0
  },

  pop () {
    if (get(dialogs).length) {
      dialogs.update(e => [ ...e.slice(0, -1) ])
      return true
    } else if (get(pages).length) {
      pages.update(e => [ ...e.slice(0, -1) ])
      return true
    }
    return false
  },

  popAll () {
    dialogs.set([])
    pages.set([])
  }
}
</script>

<Home />
{#each $pages as page}
  <svelte:component this={page.component} {...page.props} />
{/each}
{#each $dialogs as dialog}
  <svelte:component this={dialog.component} {...dialog.props} />
{/each}