Refactor to Hook Api with backwards-compatible wrappers

bsconfig.json

@@ -4,7 +4,7 @@
   "refmt": 3,
   "bs-dependencies": ["reason-react"],
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "namespace": false,
   "sources": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reason-reroute",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Tiny wrapper around ReasonReact.Router ",
   "main": "index.js",
   "scripts": {
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/callstack/reroute#readme",
   "devDependencies": {
-    "bs-platform": "^4.0.3",
-    "reason-react": "^0.5.3"
+    "bs-platform": "^5.0.4",
+    "reason-react": "^0.7.0"
   }
 }

src/ReRoute.re

@@ -5,46 +5,74 @@ module type RouterConfig = {
 };
 
 module CreateRouter = (Config: RouterConfig) => {
-  module Container = {
-    type action =
-      | ChangeRoute(Config.route);
-    type state = Config.route;
-    let component = ReasonReact.reducerComponent("CallstackRerouteRouter");
-    let make = children => {
-      ...component,
-      initialState: () =>
-        ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl,
-      reducer: (action, _state) =>
-        switch (action) {
-        | ChangeRoute(route) => ReasonReact.Update(route)
-        },
-      didMount: self => {
+  let useRouter = () => {
+    let (currentRoute: Config.route, setCurrentRoute) =
+      React.useState(() =>
+        ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl
+      );
+    React.useEffect1(
+      () => {
         let watcherID =
           ReasonReact.Router.watchUrl(url =>
-            self.send(ChangeRoute(url |> Config.routeFromUrl))
+            setCurrentRoute(_old => url |> Config.routeFromUrl)
           );
-        self.onUnmount(() => ReasonReact.Router.unwatchUrl(watcherID));
+        Some(() => ReasonReact.Router.unwatchUrl(watcherID));
       },
-      render: self => children(~currentRoute=self.state),
+      [||],
+    );
+    currentRoute;
+  };
+
+  module Container = {
+    [@react.component]
+    let make = (~children) => {
+      let currentRoute = useRouter();
+      children(~currentRoute);
+    };
+
+    module Jsx2 = {
+      let component = ReasonReact.statelessComponent("RouterContainer");
+
+      let make = children =>
+        ReasonReactCompat.wrapReactForReasonReact(
+          make,
+          makeProps(~children, ()),
+          children,
+        );
     };
   };
   module Link = {
-    let component = ReasonReact.statelessComponent("CallstackRerouteLink");
-    let make = (~route, children) => {
-      ...component,
-      render: _self => {
-        let href = Config.routeToUrl(route);
-        <a
-          href
-          onClick=(
-            event => {
-              event->ReactEvent.Synthetic.preventDefault;
-              ReasonReact.Router.push(href);
-            }
-          )>
-          (ReasonReact.array(children))
-        </a>;
-      },
+    [@react.component]
+    let make = (~route, ~className=?, ~children) => {
+      let href = Config.routeToUrl(route);
+      <a
+        href
+        ?className
+        onClick={
+          event => {
+            event->ReactEvent.Synthetic.preventDefault;
+            ReasonReact.Router.push(href);
+          }
+        }>
+        children
+      </a>;
+    };
+
+    module Jsx2 = {
+      let component = ReasonReact.statelessComponent("Link");
+
+      let make =
+          (~route, ~className=?, children: array(ReasonReact.reactElement)) =>
+        ReasonReactCompat.wrapReactForReasonReact(
+          make,
+          makeProps(
+            ~route,
+            ~className?,
+            ~children=React.array(children),
+            (),
+          ),
+          React.array(children),
+        );
     };
   };
-};
+};