URL Routing Support (SPA)

[Archmonger]

Current Situation

Currently, URL routes cannot be resolved.

Proposed Changes

Add support for URL routing.

Implementation Details

Create a React-Router equivalent.

Here an example on how this can be implemented

def route_component():
    http.browser_router(
        http.route("/"),
        http.route("path_1/"),
        http.route("path_2/")
    )

And here's a reference video on explaining react-router.

Things to be implemented

• BrowserRouter
  • Top level location to signify "this part of the code contains routing"
• Route
  • This is where the actual URL path goes
  • React Router uses some weird system for variables within URLs
    • Instead of that, we can possibly support regex paths
    • I'm a bit biased and I think django's URL route matching looks visually cleaner than regex though
  • Can possibly accept a kwarg of regex: bool = False to allow for regex routes?
• Link
  • Clicking on the contents of this changes the browser URL, but does not perform a HTTP refresh on the page
  • Basically just a <a> tag with prevent_default pre-applied
  • Should accept a kwarg of regex: bool = False to allow for regex links
• useHistory
• useLocation
• useParams
• useMatch

Things that might not need to be implemented

• Routes (formerly Switch)
  • In ReactJS, this is used to allow matching more than one potential path.
    • Correction: Routes is used to force the router to only match one path.
  • In ReactPy, we might not need this if we add an match_all kwarg within browser_router
• NavLink
  • It's just a link with extra styling. Doesn't really matter.
• Redirect
  • Doesn't need to exist if we just tell the user to use a regular HREF to do a HTTP page load.
• MemoryRouter
  • Debug utility that isn't that important.
• StaticRouter
  • Used for server side rendering, which we don't differentiate between.
• Prompt
  • Just a pop-up asking whether you really want to navigate away from the page
  • This is useful but is way lower priority

[Archmonger]

Examples have been added on potential styling patterns.

There's a very high chance we pick the react style, but just want to make sure options are listed.

[Archmonger]

I've updated this with a deep dive into what React-Router API endpoints need to be replicated for MVP URL routing support.

[rmorshea]

I've done a little bit of thinking on this here and there and at the moment I'm leaning towards the idea of making this a separate package (e.g. idom-router). I'm also imagining that the implementation might rely on Web Components.

[Archmonger]

If it can be a separate package then it should be.

But need to consider whether the current infrastructure is flexible enough to support URL routing outside of core.

[rmorshea]

Agreed. Especially given this is how react does it. With that said, without charges to core I'm not sure how clean the implementation will be. Regardless, I'm thinking I hack a prototype and see how bad it is before I go making changes in core before I really groc how routing works.

[rmorshea]

I've created a draft implementation here: https://github.com/idom-team/idom-router

I would discourage using it until I've had the time to flesh it out with more tests and documentation. The interface is subject to change (I haven't looked too closely at how React Router does things yet). I'm mostly interested in getting some early feedback on the implementation or for interface suggestions. For the moment though, usage looks like:

from idom import component, html, run
from idom.backend import default

from idom_router.router import Route, Link, bind

Router = bind(default)

@component
def Sample():
    return Router(
        Route("/", Link({"id": "root"}, "to a", to="/a")),
        Route("/a", Link({"id": "a"}, "to b", to="/b")),
        Route("/b", Link({"id": "b"}, "to c", to="/c")),
        Route("/c", Link({"id": "c"}, "to default", to="/default")),
        Route("/*", html.h1({"id": "default"}, "Default")),
    )

run(Sample)

Route patterns follow standard glob rules (see fnmatch module for details) unless an re.Pattern is provided.

Also, inside your routes, if you want to get the current location, you need to use use_location from idom_router. The use_location hook from the backend implementation will always give you the location the user initially arrived at.

[Archmonger]

I'm not entirely sure what you're trying to do with the third and fourth positional arguments ("to a", to="/a") in Route, but everything else about the overall design for Router and Route seems solid.

I would rename Router to BrowserRouter to be consistent with react-router.

[Archmonger]

This issue should be transferred to idom-team/idom-router

[Archmonger]

Is this issue closable, since the initial package has been released?

Or are we keeping it open to track the development goals?

[rmorshea]

I think we can close this. Any features mentioned here that we should still implement can be created as separate issues.

[Archmonger]

Should we have a quick discussion on which of the "Things to be implemented" on this issue are worth moving forward with?