Hacker News new | ask | show | jobs
by slmyers 3383 days ago
> You can use History PushState [0] and CustomEvents [1] to handle routing.

Can you please expand on this?

1 comments

Sorry in a bit of rush as it's Sunday here, I will try to write a blog post with more detailed example later tonight.

For now, I will share this snippet:

  document.addEventListener('state-change', (ev) => {
    const { key, action } = ev.detail;
    const state = { key, action };
    window.history.pushState(state, null, `/${action}/${key}`);
    console.log(`triggered state change. action: ${action} key: ${key}`);
    return handleState(state);
  });

And then in your app code (for example, when a user clicks a button), trigger a state change:

  const event = new CustomEvent('state-change', {
   detail : {
    state: state,
    key: key
   }
  });
  document.dispatchEvent(event);
Hey just wanted to say thanks! Never heard of the `CustomEvent` API I [used it](https://github.com/AyriaPublic/desktop/commit/3e3b0ad76e7624...) in a small work in progress Electron app. ^^