choojs / choo

:steam_locomotive::train: - sturdy 4kb frontend framework

Home Page:https://choo.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

pushState on the navigate event, I'm unable to render the pushed route

johanalkstal opened this issue · comments

Expected behavior

That the route I pass to emitter.emit('pushState', 'some-route') inside a listener for the state.events.NAVIGATED event gets rendered.

Actual behavior

The browser address bar changes URL but I still see the previous view.

Steps to reproduce behavior

// ./state/auth.js
export function authListener(state, emitter) {
  emitter.on(state.events.DOMCONTENTLOADED, () => authenticate(state, emitter))
  emitter.on(state.events.NAVIGATE, () => authenticate(state, emitter))
}

function authenticate(state) {
  const logInRoute = "log-in"

  if (!state.user && state.route !== logInRoute) {
    emitter.emit("pushState", logInRoute)
  }
}
// index.js
import choo from "choo"
import html from "choo/html"
import { authListener } from "./state/auth"

const app = choo()
app.use(authListener)

app.route("/", (state, emit) => {
  return html`
    <body>
     Index
    </body>
  `
})

app.route("/log-in", (state, emit) => {
  return html`
    <body>
     Log in
    </body>
  `
})

app.mount(document.body)

Am I doing something wrong here?

Figured out what I was missing.
A emitter.emit("render") after callingpushState.
Doh.