Apply Composables to all subroutes

[abueide]

Hi,

If I had a composable such as "topNavigationBar" that I wanted applied to all routes in addition to the component that they resolve to would this be possible?

for example something like this:

BrowserRouter("/"){
    all {
        topNavBarComposable()
    }
    route("/about"){
        noMatch {
            aboutPageComposable()
        }
    }
    noMatch {
        homePageComposable()
    }
}

this way I won't have to add topNavBarComposable to all of my components individually.

also it feels weird to use noMatch to make it resolve the correct composable for example when I go to localhost:8080/about want it to load the aboutPageComposable. Am I doing this correctly?

also could you explain the difference between int & intRoute, string & stringRoute and how they're supposed to be used? I don't really get it.

Thanks a ton for making this, its really cool!

[hfhbd]

Hey @abueide,

lets start with the core concept of routing first:

This (common) router implementation is basically a trie router, starting with the / route and going down to each directly nodes (children) recursively. There are two different kind of nodes: terminal content nodes containing a @Composable, and routing nodes, containing more nodes and finally a terminal content node. The routing nodes can not have any @composable functions! The location string (from your browser) is split by / and the first matching node will be executed, either showing its content or, if it is a routing node, drop its starting matching route from the location string and find the first next matching node again.
Why did I choose this design? If every node is allowed to contain composable content, during evaluation, whether the route matches the location string part, its content will be displayed, even, if it does not match. This results into a mangled view.

If you want to apply the same component always on top, eg a header, one possibility would be simple calling this component before the router:

topNavBarComposable()
BrowserRouter("/"){
    route("/about"){
        noMatch {
            aboutPageComposable()
        }
    }
    noMatch {
        homePageComposable()
    }
}

Calling a component after the routing component, eg a footer is a little more tricky, because the footer is added some frames before the routing invocation.
So you could simple create:

@Composable fun Screen(content: @Composable () -> Unit) {
    topNavBarComposable()
    content()
    footer()
}

and use it in your `Router:

BrowserRouter("/") {
    route("users") {
        intRoute { userID ->
            route("todos") {
                int { todoID -> 
                    Screen {
                        Text("User with ${userID.value} and todoID $todoID")
                        // for other cases see: https://github.com/hfhbd/routing-compose/blob/0afd6d912b9ca74a42ab71832b82248bc87986ae/src/jsTest/kotlin/app/softwork/routingcompose/IntegerRoutingTest.kt#L36
                    }
                }
           }
       }
    }
}

The difference between intRoute and int is its kind: intRoute is a route node, providing the integer variable as Lazy<Int>, whether int is a content node displaying the @composable function with the Int parameter and the lazy one. You need lazily parameters in route nodes, because the actual parameter can be only used if the route matches the location string, and you only display it in the deeper content nodes.

Last thing regarding noMatch: Yeah, the name is confusing, but it is clear too :D It is a wildcard (because every route part is a String), and basically catches all requests to this node.

I hope, I answered all your questions :)

[hfhbd]

Hey @abueide, I just simplified the API: With 0.1.0 there is no difference between intRoute and int(parameter) anymore, only int. You can also provide a header or footer right in the route body, because @Composable is supported everywhere!

BrowserRouter("/"){
    topNavBarComposable()
    constant("about") {
        aboutPageComposable()
    }
    noMatch {
        homePageComposable()
    }
}