diff --git a/bsconfig.json b/bsconfig.json index 97d6b1c..2a6da91 100644 --- a/bsconfig.json +++ b/bsconfig.json @@ -4,7 +4,7 @@ "refmt": 3, "bs-dependencies": ["reason-react"], "reason": { - "react-jsx": 2 + "react-jsx": 3 }, "namespace": false, "sources": [ diff --git a/package.json b/package.json index 7fa8849..27feb94 100644 --- a/package.json +++ b/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" } } diff --git a/src/ReRoute.re b/src/ReRoute.re index 889d8b5..78b140e 100644 --- a/src/ReRoute.re +++ b/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); - { - event->ReactEvent.Synthetic.preventDefault; - ReasonReact.Router.push(href); - } - )> - (ReasonReact.array(children)) - ; - }, + [@react.component] + let make = (~route, ~className=?, ~children) => { + let href = Config.routeToUrl(route); + { + event->ReactEvent.Synthetic.preventDefault; + ReasonReact.Router.push(href); + } + }> + children + ; + }; + + 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), + ); }; }; -}; \ No newline at end of file +};