[@lit-labs/router] shall routes.goto() keep window.location in sync

[christophe-g]

I am not sure whether this is on purpose or not, hence posting here and not as an issue.

I was expecting that calling routes.goto('myPage') would keep window.location in sync with the route. It does not (the router reacts to the route change, but the url does not change).

If this is wai, what is the best approach for keeping window.location in sync with the router when navigation is triggered by js (and not by a user action like anchor click, or by history.back()/forward()). Other routers react to history.pushstate(), but this does not trigger a popstate event - hence does not trigger the router to re-evaluate the location.

If it is not on purpose, what about having two methods:

1. setActiveRoute as the current goto;
2. and goto(path, title) {history.pushState(title, null, path); this.setActiveRoute(path)}?

[ynxtynxt]

I think it's intended as there are times I don't want to show the internal routes. Also, since goto isn't fully implemented yet as a general page navigation, I think (in goto's comments, not sure I clearly understand that), may be they will allow more parameters to indicate that in future? I also want to change the URL with replaceState() to prevent changes to the history, eg. scrolling across a single page to indicate the current section with/without invoking enter() et al. I also use state to store the go-back icon so users will know briefly of where they're coming from.

[theneverstill]

For my use case I was okay with a generic solution to resolve this challenge: proxy (/monkey patch) history.pushState to update the router.

E.g. I added the following to my lit component that contains the router:

connectedCallback() {
  super.connectedCallback();

  // Proxy history.pushState to update the router
  globalThis.history.pushState = new Proxy(globalThis.history.pushState, {
    apply: (target, thisArg, argArray) => {
      this.router.goto(argArray[2]);
      return target.apply(thisArg, argArray);
    },
  });
}

Now I can update the route + location programmatically via a pushState call, e.g.

globalThis.history.pushState({}, "", "/dashboard");

YMMV. I'd suggest some error handling. Easy to enhance to leverage the history state data object.