@reventless/routes

This package enables typed routing and bi-directional usage (route & link).

This package is based on @anuragsoni/routes and @tsnobip/isotrope and got further improved for the reventless usecases.

Installation

• run npm i @reventless/routes
• add @reventless/routes to the dependencies in bsconfig.json

Usage

Targets

Create a module for your Targets. These will be used to create routes and links later on.

// Targets.re
open Routes;

let plugin = () => s("plugin-name");
// NOTE: s("xx") creates a constant string in the target
let home = () => plugin()->finalize;
// NOTE: `finalize` actually builds the path, home can't be combined again afterwards
let details = () => plugin()->slash(s("details"))->slash(str)->finalize;
// NOTE: `str` is a "variable" part in the url
// details will map to `/plugin-name/details/<id-string>` (with and without a final slash)

Routing

Create a module for your Routes will define, what a target should "map" to. (This example is for React, but similar is possible in other contexts as well.)

// Routing.re
open Routes;
module T = Targets;

let home = () => T.home()->handle(React.string("Hello!"));
// NOTE: since there are no variables in the target, handle just takes the component
let details = () => T.details()->handle(id=>React.string("View details for id="++id));
// NOTE: target contains a single variable string, therefore handle takes a function of `string => React.component`

let routes = one_of([
  home(),
  details()
]);

And to actually route a given path by hand (again: this example is for react, but it's also possible in general!):

// Router.re
let result = Routes.matchAny(Routing.routes, ~target="/plugin-name/details/someidstring");

There is a react Router component to make usage easier:

// App.re
[@react.component]
let make = () => {
  let url = Routes.Hooks.useUrl(); // NOTE: it's best practice to use this only once in the application
  <Router url routes=Routing.routes>
    {React.string("Not Found")} // NOTE: you can skip this, there is a default error mesage
  </Router>
}