Giter Club home page Giter Club logo

reroute's Introduction

reroute

a fast, declarative microrouter for reason-react

Getting started

Installation

Open a Terminal in your project's folder and run,

$ yarn add reason-reroute

After installation, you will need to add this library to your bsconfig.json dependencies

"bs-dependencies": [
  "reason-react",
  "reason-reroute"
],

Usage

module RouterConfig = {
  type route =
    | Admin
    | Home;
  let routeFromUrl = (url: ReasonReact.Router.url) =>
    switch url.path {
    | ["admin"] => Admin
    | [] => Home
    };
  let routeToUrl = (route: route) =>
    switch route {
    | Admin => "/admin"
    | Home => "/"
    };
};

module Router = ReRoute.CreateRouter(RouterConfig);

let component = ReasonReact.statelessComponent("App");

let make = _children => {
  ...component,
  render: _self =>
    <Router.Container>
      ...(
           (~currentRoute) =>
             switch currentRoute {
             | RouterConfig.Admin => <Admin />
             | RouterConfig.Home => <Home />
             }
         )
    </Router.Container>
};

API

Sections below are under construction.

Link

Container

Rationale

ReasonReact comes with a router (ReasonReact.Router) by default. It offers minimal yet powerful API that is suitable for applications at any scale. However, being just an API, it leaves the routing logic up to the developer. This library builds on top of it to provide an elegant interface for working with routes that is ready to use, predictable and consistent across apps you create.

Credits

The concept of reroute has been highly influenced by @thangngoc89 and his reference implementation. Thank you for pushing this forward!

License

MIT (c) 2018 Callstack

reroute's People

Contributors

cnguy avatar grabbou avatar knowbody avatar thangngoc89 avatar yawaramin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

reroute's Issues

Link module throws unique key warning

When using the Link module it dumps Warning: Each child in an array or iterator should have a unique "key" prop. to the console. Working on a PR to fix this.

React Native support

We will need React Native navigation at some point. From what I've found so far, there's no "defacto" library out there yet.

As a react-navigation contributor, I am interested in making a port of it using react-navigation as an engine/set of primitives that would power the reason router.

The API is most likely to be different, just like ReasonReact differs from React. I am brainstorming ideas out right now and will post an RFC of the API soon.

Opening this issue here as it's not yet clear to me whether it should be a separate library or a module within reroute, but definitely want to make the whole cross-platform.

Example not compiling

I have cloned the repo, ran npm i, and then npm start, but it is failing to compile. I am wondering if I need to do some configuration on my side?

Here is the error log:

[1/14] Building src/ReactDOMRe.mlast
FAILED: src/ReactDOMRe.mlast 
/usr/local/lib/node_modules/bs-platform/lib/bsc.exe -pp "/usr/local/lib/node_modules/bs-platform/lib/refmt3.exe --print binary"    -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/ben/develop/reroute/examples/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -no-alias-deps -color always -c -o src/ReactDOMRe.mlast -bs-syntax-only -bs-binary-ast -impl /Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReactDOMRe.re
File "/Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReactDOMRe.re", line 26, characters 6-7:
Error: 2960: <UNKNOWN SYNTAX ERROR>
File "/Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReactDOMRe.re", line 1:
Error: Error while running external preprocessor
Command line: /usr/local/lib/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReactDOMRe.re' > /var/folders/1c/6kl9yv6x59d58kc181lwnbdr0000gn/T/ocamlpp439446

[2/14] Building src/ReasonReact.mlast
FAILED: src/ReasonReact.mlast 
/usr/local/lib/node_modules/bs-platform/lib/bsc.exe -pp "/usr/local/lib/node_modules/bs-platform/lib/refmt3.exe --print binary"    -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/ben/develop/reroute/examples/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -no-alias-deps -color always -c -o src/ReasonReact.mlast -bs-syntax-only -bs-binary-ast -impl /Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReasonReact.re
File "/Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReasonReact.re", line 82, characters 2-3:
Error: 373: <UNKNOWN SYNTAX ERROR>
File "/Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReasonReact.re", line 1:
Error: Error while running external preprocessor
Command line: /usr/local/lib/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/ben/develop/reroute/examples/node_modules/reason-react/src/ReasonReact.re' > /var/folders/1c/6kl9yv6x59d58kc181lwnbdr0000gn/T/ocamlpp9703a1

[7/14] Building src/ReactEventRe.mliast
ninja: error: rebuilding 'build.ninja': subcommand failed
Failure: /usr/local/lib/node_modules/bs-platform/lib/ninja.exe 
 Location: /Users/ben/develop/reroute/examples/node_modules/reason-react/lib/bs

Demonstrate url params

Demonstrate an example of URL param handling by defining a variant with additional data:

type route =
   | EditUser(id);

generating routes from a directory

Suggestion add option to generate routes from a pages dir. For example, add your routes to a subdir called pages.

Then use Node.fs to read the page name modules and use them to generate your router config.

I messing with this but if you already have something in mind, maybe someone can share it?

This would cut down on re writing your router file everytime you create a page.

How to use Link from child component

I wonder how to use the Link module in a child component.
Is it necessary to define the RouterConfig and Router in every component where the Link module needs to be used?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.