Roku Router is a solution for managing navigation between views in Roku
application by mapping URL paths to components. It provides features like route guards
and parameter handling to create dynamic applications with smooth user experiences.

npx ropm install promises@npm:@rokucommunity/promises
npx ropm install roku-router@npm:@tkss/roku-router

A route is a configuration object used by the Roku Router to define navigation paths within the application. Routes allow you to map URL style paths to View components, enabling users to navigate between different Views.

Routes are typically configured in a routing module using an array of route objects. Each route object can specify:

• pattern (required): The URL style pattern that represents the route.
• component (required): The View component to render when the route is activated.
  This component must extend the rokurouter_View component.
  They contain the following lifecycle functions.
  • beforeViewOpen - Called before the view loads. This is where you would perform business logic like API calls and building your UI if you want to delay opening the View until ready.
  • onViewOpen - Called after previous view is closed or suspended. This is where you would perform business logic like API calls and building your UI if you want to open your View immediatley and handle the loading UI state manually.
  • beforeScreenClose - Called before a screen is destroyed. This does not get called when a new View is added to the stack (see onSuspend).
  • onRouteUpdate - Called when a new route is requested that matches the same URL pattern and the Route is configured for allowReuse or the same url has been requested with a new hash value.
  • onSuspend - Called when a View is suspended. The most common case for this is when a new View is added to the stack.
  • onResume - Called when a suspended View is resumed. The most common case for this is when a View above the stack is closed and the suspended View is to take over.
  • handleFocus - Called when the View should determine what to do with focus. This is called immediatley after the active View is opened on resumed.
• isRoot (optional): Views that are defined as root are considered at the top of the view stack. When navigating to a root screen, the stack is cleared and the breadcrumbs are reset. These could be hub screens such as a Shows or Movie hubs that are top level in your menu.
• canActivate (optional): A route guard that controls access to the route. An example of this would be to validate the user has authenticated before navigating to a screen (particularly useful when using deeplinks).
• isDialog (optional): Defining isDialog will notify the router to fire the dialog beacons. DO WE NEED?

<component name="MainScene" extends="Scene">
	<script type="text/brightscript" uri="pkg:/source/roku_modules/rokurouter/router.brs" />
	<script type="text/brightscript" uri="MainScene.bs" />
	<children>
		<rokurouter_router id="router" />
	</children>
</component>

sub init()
    m.router = m.top.findNode("router")
    m.router@.addRoutes([
        {pattern: "/", component: "WelcomeScreen"},
        {pattern: "/shows", component: "CatalogScreen", root: true},
        {pattern: "/movies", component: "CatalogScreen", root: true},
        {pattern: "/details/series/:id", component: "DetailsScreen"},
        {pattern: "/details/series/:id/cast", component: "CastDetailsScreen"},
        {pattern: "/details/movies/:id", component: "DetailsScreen"},
        {pattern: "/details/movies/:id/cast", component: "CastDetailsScreen"},
        {pattern: "/:screenName", component: "DefaultScreen"}
    ])
    ' Go to the welcome view
    rokuRouter.navigateTo("/", {}, {}, m.router)
end sub

<component name="WelcomeScreen" extends="rokuRouter_View">
	<script type="text/brightscript" uri="pkg:/source/roku_modules/promises/promises.brs" />
	<script type="text/brightscript" uri="WecomeScreen.bs" />
	<children>
		<Label id="label" />
	</children>
</component>

sub init()
    m.label = m.top.findNode("label")
end sub

' This lifecycle function gets called before the view is shown.
function beforeScreenOpen(params as dynamic) as dynamic
    m.label.text = "Hello!"
    return promises.resolve(invalid)
end function