State out of date when switching routes

[jondashkyle]

Expected behavior

When attaching a callback to state.events.NAVIGATE, and navigating to a new route, I expect state.route to represent the current route.

Actual behavior

Instead, state.route is out of date. It should displaying the current route, but instead shows the previous. For example, if navigating from a route called /cute to one called /nice, it will return /cute.

function model (state, emitter) {
  emitter.on(state.events.NAVIGATE, function () {
     console.log(state.route)
  })
}

[yoshuawuyts]

Good catch! - think the fix for this would be to update `state.route` whenever we call navigate

…

On Thu, Jul 13, 2017 at 6:19 PM Jon-Kyle ***@***.***> wrote: Expected behavior When attaching a callback to state.events.NAVIGATE, and navigating to a new route, I expect state.route to represent the current route. Actual behavior Instead, state.route is out of date. It should displaying the current route, but instead shows the previous. For example, if navigating from a route called /cute to one called /nice, it will return /cute. function model (state, emitter) { emitter.on(state.events.NAVIGATE, function () { console.log(state.route) }) } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#530>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWler8Lq1kFpIf_Ei741KJ9sJs8VeOoks5sNkOsgaJpZM4OXOre> .

[yoshuawuyts]

ah! ok so this is tricky, because we can't know the route until after we navigate. Why? Because it's the router that figures out which route we'll be using to render. The 'navigate' event only triggers the router.

So the solution for this is to do:

function model (state, emitter) {
  emitter.prependListener(state.events.NAVIGATE, function () {
    emitter.once(state.events.RENDER, function () {
       console.log(state.route)
    })
  })
}

The flow will then be:

navigate triggered -> navigate event fired -> model triggered ->
model render event attached (once) -> render event fired ->
router triggered -> new route set on state -> render complete ->
model render event triggered

Does this make sense? Hope it does haha; wish we could simplify it, but not sure how we could do this (besides, like, writing a module). Thanks!

[akiva]

This is the same issue I am encountering in #538 , using choo@next, and the suggested fix doesn't actually work.

[akiva]

OK, while the suggested fix didn't work for me, this does:

const app = require('choo')()
const html = require('choo/html')

app.use((state, emitter) => {
  emitter.prependListener('navigate', function () {
    state.route = window.location.pathname
  })
})

@yoshuawuyts Am I doing something wrong here? I would be happy to work on a proper fix to merge into choo.

UPDATE Fixed code sample.

[yoshuawuyts]

@akiva o/ whoops, missed your reply. Don't think that works, because the route is the literal route that's resolved from the browser. What you're setting there should be available from state.href too!

The only way we could get the route would be to attach a listener that resolves after the router has resolved. Think that could be done by waiting for the DOMContentLoaded event tbh ( ref: https://github.com/choojs/choo/blob/master/index.js#L85-L96). Ok, try this:

function store (state, emitter) {
  emitter.on(state.events.DOMCONTENTLOADED, function () {
    emitter.on(state.events.NAVIGATE, function () {
       console.log(state.route)
    })
  })
}

[jongacnik]

Update: Turns out the below code is unreliable, events are picked up sporadically in Firefox and not at all in Safari. A better pattern for now is to just emit events which rely on current route/href from within views themselves.

---

I haven't yet looked into why, and perhaps it's a misunderstanding of the suggested flow above, but I have found that to get this to work 100%, RENDER needs to be explicitly triggered within the NAVIGATE callback (def a hack!). I've added examples, view console to see behaviors.

Explicit Render

The RENDER event is picked up after NAVIGATE because we force a re-render

emitter.prependListener(state.events.NAVIGATE, function () {
  setTimeout(function () {
    emitter.emit(state.events.RENDER)
  })
  emitter.once(state.events.RENDER, function () {
    console.log(state.route)
  })
})

Demo: https://choo-navigate-render-hack.glitch.me
Code: https://glitch.com/edit/#!/choo-navigate-render-hack

Without Explicit Render

The RENDER event does not fire until the next tick

emitter.prependListener(state.events.NAVIGATE, function () {
  emitter.once(state.events.RENDER, function () {
    console.log(state.route)
  })
})

Demo: https://choo-navigate-render.glitch.me
Code: https://glitch.com/edit/#!/choo-navigate-render