Add Switch and Link components

.gitignore

@@ -66,4 +66,5 @@ typings/
 
 lib
 .merlin
-*.bs.js
+.bsb.lock
+*.bs.js

README.md

@@ -1,3 +1,22 @@
 # Deprecated
 
 This is the Reason interop wrapper for [React Router](https://reacttraining.com/react-router/). **Note** that ReasonReact itself [already comes with a router](https://reasonml.github.io/reason-react/docs/en/router.html).
+
+## Install
+
+```bash
+npm install --save bs-react-router
+```
+
+Add `bs-react-router` to your `bs-dependencies`: **bsconfig.json**
+
+```bash
+{
+  ...
+  "bs-dependencies": ["bs-react-router"]
+}
+```
+
+## Example
+
+See [examples](./examples) folder.

bsconfig.json

@@ -3,7 +3,12 @@
   "namespace": true,
   "sources": [
     {
-      "dir": "src"
+      "dir": "src",
+      "public": "all"
+    },
+    {
+      "dir": "examples",
+      "type": "dev"
     }
   ],
   "bsc-flags": ["-bs-super-errors"],

examples/reason_react_router.re

@@ -0,0 +1,49 @@
+open ReactRouter;
+
+module HomePage = {
+    let component = ReasonReact.statelessComponent("HomePage");
+    let make = (_children) => {
+        ...component,
+        render: (_self) => 
+            <h1>{ReasonReact.stringToElement("Home page")}</h1>
+    }
+};
+
+module UserPage = {
+    let component = ReasonReact.statelessComponent("UserPage");
+    let make = (_children) => {
+        ...component,
+        render: (_self) => 
+            <h1>{ReasonReact.stringToElement("User page")}</h1>
+    }
+};
+
+module App = {
+    let component = ReasonReact.statelessComponent("App");
+    let blueStyle = ReactDOMRe.Style.make(~color="#000099", ());
+
+    let make = (_children) => {
+        ...component,
+        render: (_self) =>
+            <div>
+                <BrowserRouter>
+                    <div>
+                        <h1>{ReasonReact.stringToElement("Using NavLink")}</h1>
+                        <NavLink _to="/">{ReasonReact.stringToElement("Home")}</NavLink>
+                        <NavLink _to="/user" style=blueStyle>{ReasonReact.stringToElement("User")}</NavLink>
+
+                        <h1>{ReasonReact.stringToElement("Using Link")}</h1>
+                        <Link _to="/">{ReasonReact.stringToElement("Home")}</Link>
+                        <Link _to="/user">{ReasonReact.stringToElement("User")}</Link>
+
+                        <Switch>
+                            /* Component as Prop can't trivially pass
+                            so we pass a callback as a component to send the whole component */
+                            <Route path="/" exact=true component=(() => <HomePage />) />
+                            <Route path="/user" component=(() => <UserPage />) />
+                        </Switch>
+                    </div>
+                </BrowserRouter>
+            </div>
+    };
+};

package.json

@@ -26,12 +26,12 @@
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "reason-react": "^0.3.0"
+    "reason-react": "^0.3.1"
   },
   "peerDependencies": {
     "bs-platform": "^2.1.0",
-    "react-router": ">=4.2.0",
-    "react-router-dom": ">=4.2.0",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1",
     "reason-react": "^0.3.0"
   }
 }

src/reactRouter.re

@@ -40,6 +40,32 @@ module Route = {
     );
 };
 
+module Switch = {
+  [@bs.module "react-router-dom"] external reactClass : ReasonReact.reactClass = "Switch";
+  let make = (children) =>
+    ReasonReact.wrapJsForReason(
+      ~reactClass,
+      ~props=Js.Obj.empty(),
+      children
+    );
+};
+
+module Link = {
+  [@bs.module "react-router-dom"] external link : ReasonReact.reactClass = "Link";
+  let make =
+      (
+        ~_to: string,
+        children
+      ) =>
+    ReasonReact.wrapJsForReason(
+      ~reactClass=link,
+      ~props={
+        "to": _to
+      },
+      children
+    );
+};
+
 module Redirect = {
   [@bs.module "react-router-dom"]
   external reactClass : ReasonReact.reactClass = "Redirect";
@@ -50,10 +76,22 @@ module Redirect = {
 module NavLink = {
   [@bs.module "react-router-dom"]
   external navLink : ReasonReact.reactClass = "NavLink";
-  let make = (~_to: string, children) =>
+  let make = 
+    (
+      ~_to: string,
+      ~activeClassName: option(string)=?,
+      ~style: option(ReactDOMRe.style)=?,
+      ~activeStyle: option(ReactDOMRe.style)=?,
+      children
+    ) =>
     ReasonReact.wrapJsForReason(
       ~reactClass=navLink,
-      ~props={"to": _to},
+      ~props={
+        "to": _to,
+        "activeClassName": Js.Null_undefined.from_opt(activeClassName),
+        "style": Js.Null_undefined.from_opt(style),
+        "activeStyle": Js.Null_undefined.from_opt(activeStyle)
+      },
       children
     );
 };
@@ -78,4 +116,4 @@ module ServerRouter = {
       ~props={"context": context, "location": location},
       children
     );
-};
+};