hooks update

.gitignore

@@ -21,3 +21,5 @@ node_modules/
 
 lib
 *.bs.js
+.bsb.lock
+.vscode

README.md

@@ -28,7 +28,7 @@ module RouterConfig = {
   type route =
     | Admin
     | Home;
-  let routeFromUrl = (url: ReasonReact.Router.url) =>
+  let routeFromUrl = (url: ReasonReactRouter.url) =>
     switch url.path {
     | ["admin"] => Admin
     | [] => Home
@@ -42,11 +42,9 @@ module RouterConfig = {
 
 module Router = ReRoute.CreateRouter(RouterConfig);
 
-let component = ReasonReact.statelessComponent("App");
+[@react.component]
+let make = ()=> {
 
-let make = _children => {
-  ...component,
-  render: _self =>
     <Router.Container>
       ...(
            (~currentRoute) =>
@@ -69,11 +67,11 @@ Sections below are under construction.
 
 ## Rationale
 
-ReasonReact comes with a router ([`ReasonReact.Router`](https://reasonml.github.io/reason-react/docs/en/router.html)) 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.  
+ReasonReact comes with a router ([`ReasonReactRouter`](https://reasonml.github.io/reason-react/docs/en/router.html)) 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](https://github.com/thangngoc89) and his [reference implementation](https://gist.github.com/thangngoc89/c9162c0263df5427fe9a36fc7f94ac94). Thank you for pushing this forward!  
+The concept of `reroute` has been highly influenced by [@thangngoc89](https://github.com/thangngoc89) and his [reference implementation](https://gist.github.com/thangngoc89/c9162c0263df5427fe9a36fc7f94ac94). Thank you for pushing this forward!
 
 ## License
 

bsconfig.json

@@ -1,16 +1,24 @@
 {
   "name": "reason-reroute",
-  "bsc-flags": ["-bs-no-version-header", "-bs-super-errors"],
-  "refmt": 3,
-  "bs-dependencies": ["reason-react"],
+  "bsc-flags": [ "-bs-no-version-header", "-bs-super-errors" ],
+  "bs-dependencies": [ "reason-react" ],
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "namespace": false,
+  "package-specs": {
+    "module": "es6",
+    "in-source": true
+  },
+  "suffix": ".bs.js",
   "sources": [
     {
       "dir": "src",
       "public": "all"
+    },
+    {
+      "dir": "examples",
+      "type": "dev"
     }
   ]
 }

examples/Admin.re

@@ -0,0 +1,7 @@
+[@react.component]
+let make = () => {
+  <div>
+    <h1> {React.string("Admin")} </h1>
+    <p> {React.string("This is an admin page")} </p>
+  </div>;
+};

examples/App.re

@@ -0,0 +1,44 @@
+module RouterConfig = {
+  type route =
+    | Admin
+    | Home
+    | NotFound;
+  let routeFromUrl = (url: ReasonReactRouter.url) =>
+    switch (url.path) {
+    | ["admin"] => Admin
+    | [] => Home
+    | _ => NotFound
+    };
+  let routeToUrl = (route: route) =>
+    switch (route) {
+    | Admin => "/admin"
+    | Home => "/"
+    | NotFound => ""
+    };
+};
+
+module Router = ReRoute.CreateRouter(RouterConfig);
+open RouterConfig;
+[@react.component]
+let make = () => {
+  <Router.Container>
+    ...{(~currentRoute) =>
+      <div>
+        <ul>
+          <h3> {React.string("Menu")} </h3>
+          <Router.Link route=Home>
+            <li> {React.string("Home")} </li>
+          </Router.Link>
+          <Router.Link route=Admin>
+            <li> {React.string("Admin")} </li>
+          </Router.Link>
+        </ul>
+        {switch (currentRoute) {
+         | RouterConfig.Admin => <Admin />
+         | RouterConfig.Home => <Home />
+         | RouterConfig.NotFound => <NotFound />
+         }}
+      </div>
+    }
+  </Router.Container>;
+};

examples/Home.re

@@ -0,0 +1,7 @@
+[@react.component]
+let make = () => {
+  <div>
+    <h1> {React.string("Home")} </h1>
+    <p> {React.string("Welcome to the home page!")} </p>
+  </div>;
+};

examples/NotFound.re

@@ -0,0 +1,14 @@
+[@react.component]
+let make = () => {
+  <div>
+    <h1> {React.string("We are sorry...")} </h1>
+    <p>
+      {React.string(
+         "Unfortunately we could not find the page you were looking for.",
+       )}
+    </p>
+    <p>
+      {React.string("Use the above menu to navigate to other pages :)")}
+    </p>
+  </div>;
+};

examples/index.re

@@ -0,0 +1,3 @@
+[%bs.raw {|require('./index.css')|}];
+
+ReactDOMRe.renderToElementWithId(<App />, "root");