reactive-python / reactpy-router Goto Github PK

Currently is impossible to hijack idom-router internals to utilize something like Django's URL routing schema.

We need some kind of way of configuring this behavior.

For example, within idom-router.conf perhaps there is a global called ROUTING_ENGINE: Callable.

The interface for this callable is up for debate.

Add a Form component a la react router's.

For event driven applications, such as auth, it is useful to be able to dynamically route to different paths

@component
def example():
    ...

    def click_event(e):
        resp = ...
        if resp.status == 501:
            # Redirect to /login_incorrect
        elif resp.status == 200:
            # Redirect to /login_successful
        else:
            # Redirect to /login_error

    ...

In JavaScript this is fairly easy, since JS has direct control over the client.

This feature might use our future use_messenger hook to handle redirection events.

Back and Forward don't re-render the page, which causes stuck on last render.

Currently, the readme doesn't mention how to set this up.

I see there is a bind function, but there's no usage information.

We need to put some quick documentation into the readme on usage of idom-router.

This function needs to match the react-router equivalent.

See #2 for more details.

This hook needs to match the react-router equivalent.

See #2 for more details.

The following works:

link('Users', to='/users')

When I replace 'Users' with a html composite, eg:

button = html.button({'class_name': '...'},
            icon(),
            html.span({'class_name': ...'}, 'Users')
        )

link(button, to='/users')

The button composite is rendered as an empty <div></div>. The button composite renders correctly outside the link.

Right now, if you click the browser's back button, the page does not update. We need to subscribe to changes in browser history and send them to the sever. I'm not really sure how best to achieve this in the long run. In the short run, I think this may require creating a hidden JS component that we display at the level of the router that does this.

Current Situation

Currently, URL routes cannot be resolved within IDOM.

Proposed Changes

Add support for URL routing within IDOM core.

Implementation Details

Add React-Router into IDOM core.

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 href 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 React, this is used to allow matching more than one potential path.
  • In IDOM, this won't be needed if using a match_all=False 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 have.
• Prompt
  • Just a pop-up asking whether you really want to navigate away from the page
  • This is useful but is way lower priority

This hook needs to match the react-router equivalent.

See #2 for more details.

Describe the bug
ctrl+click does not open links in a new tab.

To Reproduce

from reactpy import component, html, run, use_location
from reactpy_router import link, route, simple

@component
def root():
    use_location()
    return simple.router(
        route(
            "/",
            html.div(
                html.h1("Home Page 🏠"),
                link(html.button("About"), to="/about"),
            ),
        ),
        route("/about", html.h1("About Page 📖")),
    )

Then ctrl+click the link and note that the current page navigates to the link.

Expected behavior
The link should open in a new tab.

We need to follow our own naming conventions of avoiding CamelCase when possible.

This will probably involve renaming Route -> _Route then using route = _Route.

This hook needs to match the react-router equivalent.

See #2 for more details.

This hook needs to match the react-router equivalent.

See #2 for more details.

We need to match react-router naming conventions.

Right now, there is not way to trigger changes in history that will modify the client-side history as well. This is not presently feasible without changes to ReactPy core since there is no way for server-side components to send messages to client-side components - only client-side components can send messages to server-side ones.