From c57de7a114af43a09be95efeb8d1ae6eda842578 Mon Sep 17 00:00:00 2001 From: Rasmus Klett Mortensen Date: Thu, 11 Apr 2019 14:57:52 +0200 Subject: [PATCH 1/5] Update to ReasonReact 0.7.0 and bucklescript 5.0.1 --- package.json | 6 +++--- src/ReRoute.re | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 7fa8849..8dd3403 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.1", + "reason-react": "^0.7.0" } } diff --git a/src/ReRoute.re b/src/ReRoute.re index 889d8b5..e787da9 100644 --- a/src/ReRoute.re +++ b/src/ReRoute.re @@ -1,6 +1,6 @@ module type RouterConfig = { type route; - let routeFromUrl: ReasonReact.Router.url => route; + let routeFromUrl: ReasonReactRouter.url => route; let routeToUrl: route => string; }; @@ -13,17 +13,17 @@ module CreateRouter = (Config: RouterConfig) => { let make = children => { ...component, initialState: () => - ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl, + ReasonReactRouter.dangerouslyGetInitialUrl() |> Config.routeFromUrl, reducer: (action, _state) => switch (action) { | ChangeRoute(route) => ReasonReact.Update(route) }, didMount: self => { let watcherID = - ReasonReact.Router.watchUrl(url => + ReasonReactRouter.watchUrl(url => self.send(ChangeRoute(url |> Config.routeFromUrl)) ); - self.onUnmount(() => ReasonReact.Router.unwatchUrl(watcherID)); + self.onUnmount(() => ReasonReactRouter.unwatchUrl(watcherID)); }, render: self => children(~currentRoute=self.state), }; @@ -39,7 +39,7 @@ module CreateRouter = (Config: RouterConfig) => { onClick=( event => { event->ReactEvent.Synthetic.preventDefault; - ReasonReact.Router.push(href); + ReasonReactRouter.push(href); } )> (ReasonReact.array(children)) @@ -47,4 +47,4 @@ module CreateRouter = (Config: RouterConfig) => { }, }; }; -}; \ No newline at end of file +}; From 22df8556787bd3824eed06816f22dcb1fdf863c8 Mon Sep 17 00:00:00 2001 From: Rasmus Klett Mortensen Date: Sat, 29 Jun 2019 10:08:56 +0200 Subject: [PATCH 2/5] Migrate to React Hook components --- bsconfig.json | 2 +- package.json | 2 +- src/ReRoute.re | 87 +++++++++++++++++++++++++++++++------------------- 3 files changed, 57 insertions(+), 34 deletions(-) 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 8dd3403..27feb94 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/callstack/reroute#readme", "devDependencies": { - "bs-platform": "^5.0.1", + "bs-platform": "^5.0.4", "reason-react": "^0.7.0" } } diff --git a/src/ReRoute.re b/src/ReRoute.re index e787da9..eb853c8 100644 --- a/src/ReRoute.re +++ b/src/ReRoute.re @@ -9,42 +9,65 @@ module CreateRouter = (Config: RouterConfig) => { type action = | ChangeRoute(Config.route); type state = Config.route; - let component = ReasonReact.reducerComponent("CallstackRerouteRouter"); - let make = children => { - ...component, - initialState: () => - ReasonReactRouter.dangerouslyGetInitialUrl() |> Config.routeFromUrl, - reducer: (action, _state) => - switch (action) { - | ChangeRoute(route) => ReasonReact.Update(route) + + [@react.component] + let make = (~children) => { + let (state, send) = + React.useReducer( + (_oldState, ChangeRoute(newRoute)) => newRoute, + ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl, + ); + React.useEffect1( + () => { + let watcherID = + ReasonReact.Router.watchUrl(url => + send(ChangeRoute(url |> Config.routeFromUrl)) + ); + Some(() => ReasonReact.Router.unwatchUrl(watcherID)); }, - didMount: self => { - let watcherID = - ReasonReactRouter.watchUrl(url => - self.send(ChangeRoute(url |> Config.routeFromUrl)) - ); - self.onUnmount(() => ReasonReactRouter.unwatchUrl(watcherID)); - }, - render: self => children(~currentRoute=self.state), + [||], + ); + children(~currentRoute=state); + }; + + 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; - ReasonReactRouter.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), + ); }; }; }; From 42ea011653b11a675b7bce434551c2fac2003d8f Mon Sep 17 00:00:00 2001 From: Rasmus Klett Mortensen Date: Sat, 29 Jun 2019 11:46:09 +0200 Subject: [PATCH 3/5] Moved hook out of component to use standalone --- src/ReRoute.re | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/ReRoute.re b/src/ReRoute.re index eb853c8..619b0fe 100644 --- a/src/ReRoute.re +++ b/src/ReRoute.re @@ -1,6 +1,6 @@ module type RouterConfig = { type route; - let routeFromUrl: ReasonReactRouter.url => route; + let routeFromUrl: ReasonReact.Router.url => route; let routeToUrl: route => string; }; @@ -10,24 +10,28 @@ module CreateRouter = (Config: RouterConfig) => { | ChangeRoute(Config.route); type state = Config.route; - [@react.component] - let make = (~children) => { - let (state, send) = - React.useReducer( - (_oldState, ChangeRoute(newRoute)) => newRoute, - ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl, + let useRouter = () => { + let (currentRoute, setCurrentRoute) = + React.useState(() => + ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl ); React.useEffect1( () => { let watcherID = ReasonReact.Router.watchUrl(url => - send(ChangeRoute(url |> Config.routeFromUrl)) + setCurrentRoute(_old => url |> Config.routeFromUrl) ); Some(() => ReasonReact.Router.unwatchUrl(watcherID)); }, [||], ); - children(~currentRoute=state); + currentRoute; + }; + + [@react.component] + let make = (~children) => { + let currentRoute = useRouter(); + children(~currentRoute); }; module Jsx2 = { @@ -65,7 +69,12 @@ module CreateRouter = (Config: RouterConfig) => { (~route, ~className=?, children: array(ReasonReact.reactElement)) => ReasonReactCompat.wrapReactForReasonReact( make, - makeProps(~route, ~className?, ~children=React.array(children), ()), + makeProps( + ~route, + ~className?, + ~children=React.array(children), + (), + ), React.array(children), ); }; From 9a39f2b7b1374b01034b7f4027004f879daca4a6 Mon Sep 17 00:00:00 2001 From: Rasmus Klett Mortensen Date: Sat, 29 Jun 2019 11:54:55 +0200 Subject: [PATCH 4/5] Move hook out of Container module --- src/ReRoute.re | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/ReRoute.re b/src/ReRoute.re index 619b0fe..adfa2f4 100644 --- a/src/ReRoute.re +++ b/src/ReRoute.re @@ -5,29 +5,29 @@ module type RouterConfig = { }; module CreateRouter = (Config: RouterConfig) => { + let useRouter = () => { + let (currentRoute, setCurrentRoute) = + React.useState(() => + ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl + ); + React.useEffect1( + () => { + let watcherID = + ReasonReact.Router.watchUrl(url => + setCurrentRoute(_old => url |> Config.routeFromUrl) + ); + Some(() => ReasonReact.Router.unwatchUrl(watcherID)); + }, + [||], + ); + currentRoute; + }; + module Container = { type action = | ChangeRoute(Config.route); type state = Config.route; - let useRouter = () => { - let (currentRoute, setCurrentRoute) = - React.useState(() => - ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl - ); - React.useEffect1( - () => { - let watcherID = - ReasonReact.Router.watchUrl(url => - setCurrentRoute(_old => url |> Config.routeFromUrl) - ); - Some(() => ReasonReact.Router.unwatchUrl(watcherID)); - }, - [||], - ); - currentRoute; - }; - [@react.component] let make = (~children) => { let currentRoute = useRouter(); From 11541a811172739aab3fb607198383225a2dc264 Mon Sep 17 00:00:00 2001 From: Rasmus Klett Mortensen Date: Sat, 29 Jun 2019 11:58:59 +0200 Subject: [PATCH 5/5] Remove now-unused type declarations --- src/ReRoute.re | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/ReRoute.re b/src/ReRoute.re index adfa2f4..78b140e 100644 --- a/src/ReRoute.re +++ b/src/ReRoute.re @@ -6,7 +6,7 @@ module type RouterConfig = { module CreateRouter = (Config: RouterConfig) => { let useRouter = () => { - let (currentRoute, setCurrentRoute) = + let (currentRoute: Config.route, setCurrentRoute) = React.useState(() => ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl ); @@ -24,10 +24,6 @@ module CreateRouter = (Config: RouterConfig) => { }; module Container = { - type action = - | ChangeRoute(Config.route); - type state = Config.route; - [@react.component] let make = (~children) => { let currentRoute = useRouter();