Routing mechanism

[nilslindemann]

routes {
  "/foo" {
    // ...
  }
}

When I do something like this, which code gets called internally?

I am asking because Window.navigate() jumps, when the target URL is defined in a route, but not otherwise. So I assume this is something done in the route logic.

[gdotdesign]

This is where the routing logic is: https://github.com/mint-lang/mint-runtime/blob/master/source/Program.js#L128 the routes in routes block get compiled and put into this.routes which we iterate on when a popstate event happens.

[nilslindemann]

Thank you. This explains why the scrolling happens, resolvePagePosition() does it.

In my opinion, that is not so good. (when the jumping happens in the router)

Consider this code:

routes {
  /known {
    Debug.log("/known")
  }
}

component Main {
  style margin {
    margin: 90vh 0;
  }

  fun render : Html {
    <div::margin>
      <button onClick={() { Window.navigate("/known") }}>
        "/known"
      </button>

      " "

      <button onClick={() { Window.navigate("/unknown") }}>
        "/unknown"
      </button>

      " "

      <a href="/known">
        "/known"
      </a>

      ", "

      <a href="/unknown">
        "/unknown"
      </a>
    </div>
  }
}

This table shows when the page will scroll to the start and when not:

	click button "/known"	click button "/unknown"	click link "/known"	click link "/unknown"
Being on "/known"	No	No	No	Yes
Being on "/unknown"	Yes	No	Yes	Yes
Being on "/known", page reloaded (f5)	No	No	No	Yes
Being on "/unknown", page reloaded (f5)	No	No	No	Yes

In my opinion, all clicks on links should always scroll, and the clicks on the buttons should scroll depending on if the developer calls Window.navigate() in connection with Window.triggerHashJump() or not.

And because calling two functions, in order to do the probably most desired thing, is a bit clumsy, I also would like to suggest an addition of a function Window.jump() to the library, which does exactly that, navigate and jump. (The behavior of Window.navigate() changes to never scroll)

What is your opinion on this? @gdotdesign, @Sija ?

[nilslindemann]

I will just implement this and make a PR, then we can see clearer :-)

[gdotdesign]

This is implemented, so I'm closing this discussion.

[nilslindemann]

Ah thx, forgot.