Update reason example (jaredpalmer#513)

* Update reason example

* Add url parser

* Alias `ReasonReact.stringToElement` to `text`

examples/with-reason-react/.gitignore

@@ -2,6 +2,7 @@ logs
 *.log
 npm-debug.log*
 .DS_Store
+.bsb.lock
 
 coverage
 node_modules
@@ -12,4 +13,4 @@ public/static
 .env.test.local
 .env.production.local
 lib
-.merlin
+.merlin

examples/with-reason-react/bsconfig.json

@@ -14,5 +14,11 @@
     {
       "dir": "src"
     }
+  ],
+  "package-specs": [
+    {
+      "module": "es6-global",
+      "in-source": false
+    }
   ]
 }

examples/with-reason-react/package.json

@@ -12,13 +12,13 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "express": "^4.15.2",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "reason-react": "^0.2.4"
+    "express": "^4.16.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "reason-react": "^0.3.2"
   },
   "devDependencies": {
-    "bs-platform": "2.0.0",
+    "bs-platform": "^2.0.0",
     "concurrently": "^3.5.0",
     "razzle": "^0.8.12"
   }

examples/with-reason-react/src/App.re

@@ -1,25 +1,21 @@
-type state = {count: int};
+let text = ReasonReact.stringToElement;
 
-type action =
-  | Increment
-  | Decrement;
-
-let component = ReasonReact.reducerComponent("App");
+let component = ReasonReact.statelessComponent("App");
 
 /* underscore before names indicate unused variables. We name them for clarity */
-let make = (~title, _children) => {
+let make = (~title, ~initialUrl, _children) => {
   ...component,
-  initialState: () => {count: 0},
-  reducer: (action, state) =>
-    switch action {
-    | Increment => ReasonReact.Update({ count: state.count + 1})
-    | Decrement => ReasonReact.Update({ count: state.count - 1})
-    },
-  render: (self) => {
-    let message = "Count: " ++ string_of_int(self.state.count);
+  render: _self =>
     <div className="App">
       <div className="App-header">
-        <div style=(ReactDOMRe.Style.make(~backgroundColor="#db4d3f", ~cursor="pointer", ()))>
+        <div
+          style=(
+            ReactDOMRe.Style.make(
+              ~backgroundColor="#db4d3f",
+              ~cursor="pointer",
+              ()
+            )
+          )>
           <svg className="App-logo" viewBox="0 0 841.9 595.3" alt="logo">
             <g fill="#fff">
               <path
@@ -30,29 +26,37 @@ let make = (~title, _children) => {
             </g>
           </svg>
         </div>
-        <h2 style=(ReactDOMRe.Style.make(~marginLeft="30px", ~fontSize="2em", ()))>
-          (ReasonReact.stringToElement(title))
+        <h2
+          style=(
+            ReactDOMRe.Style.make(~marginLeft="30px", ~fontSize="2em", ())
+          )>
+          (test(title))
         </h2>
       </div>
-      <p className="App-intro">
-        <code> (ReasonReact.stringToElement("src/App.re")) </code>
-        (
-          ReasonReact.stringToElement(
-            ". When you make edits, both the server and broswer will hot reload."
-          )
-        )
+      <p>
+        <Link href="/home"> (test("home")) </Link>
+        (test(" "))
+        <Link href="/counter"> (test("counter")) </Link>
       </p>
-      <div className="App-intro">
-        (ReasonReact.stringToElement(message))
-        <button onClick=(self.reduce((_event) => Increment))>
-          (ReasonReact.stringToElement("+"))
-        </button>
-        <button onClick=(self.reduce((_event) => Decrement))>
-          (ReasonReact.stringToElement("-"))
-        </button>
-      </div>
+      <Router initialUrl>
+        ...(
+             (url: ReasonReact.Router.url) =>
+               switch url.path {
+               | [] => <Home />
+               | ["home"] => <Home />
+               | ["counter"] => <Counter />
+               | _ => "404 not found" |> text
+               }
+           )
+      </Router>
     </div>
-  }
 };
 
-let comp = ReasonReact.wrapReasonForJs(~component, (jsProps) => make(~title=jsProps##title, [||]));
+let default =
+  ReasonReact.wrapReasonForJs(~component, jsProps =>
+    make(
+      ~title=jsProps##title,
+      ~initialUrl=Js.undefinedToOption(jsProps##initialUrl),
+      [||]
+    )
+  );

examples/with-reason-react/src/Counter.re

@@ -0,0 +1,28 @@
+let text = ReasonReact.stringToElement;
+
+type state = {count: int};
+
+type action =
+  | Increment
+  | Decrement;
+
+let component = ReasonReact.reducerComponent("Counter");
+
+/* underscore before names indicate unused variables. We name them for clarity */
+let make = _children => {
+  ...component,
+  initialState: () => {count: 0},
+  reducer: (action, state) =>
+    switch action {
+    | Increment => ReasonReact.Update({count: state.count + 1})
+    | Decrement => ReasonReact.Update({count: state.count - 1})
+    },
+  render: self => {
+    let message = "Count: " ++ string_of_int(self.state.count);
+    <div className="App-intro">
+      (test(message))
+      <button onClick=(self.reduce(_event => Increment))> (test("+")) </button>
+      <button onClick=(self.reduce(_event => Decrement))> (test("-")) </button>
+    </div>;
+  }
+};

examples/with-reason-react/src/Home.re

@@ -0,0 +1,17 @@
+let text = ReasonReact.stringToElement;
+
+let component = ReasonReact.statelessComponent("Home");
+
+/* underscore before names indicate unused variables. We name them for clarity */
+let make = _children => {
+  ...component,
+  render: _self =>
+    <p className="App-intro">
+      <code> (test("src/App.re")) </code>
+      (
+        test(
+          ". When you make edits, both the server and broswer will hot reload."
+        )
+      )
+    </p>
+};

examples/with-reason-react/src/Link.re

@@ -0,0 +1,19 @@
+let component = ReasonReact.statelessComponent("Link");
+
+let make = (~href, ~className="", children) => {
+  ...component,
+  render: self =>
+    ReasonReact.createDomElement(
+      "a",
+      ~props={
+        "className": className,
+        "href": href,
+        "onClick":
+          self.handle((event, _self) => {
+            ReactEventRe.Mouse.preventDefault(event);
+            ReasonReact.Router.push(href);
+          })
+      },
+      children
+    )
+};

examples/with-reason-react/src/Router.re

@@ -0,0 +1,45 @@
+type action =
+  | UpdateRoute(ReasonReact.Router.url);
+
+type state = ReasonReact.Router.url;
+
+/* copied from  ReasonReact */
+let urlToUrlList = url =>
+  switch url {
+  | ""
+  | "/" => []
+  | _ =>
+    /* remove the preceeding /, which every pathname seems to have */
+    let raw = Js.String.sliceToEnd(~from=1, url);
+    /* remove the trailing /, which some pathnames might have. Ugh */
+    let raw =
+      switch (Js.String.get(raw, Js.String.length(raw) - 1)) {
+      | "/" => Js.String.slice(~from=0, ~to_=-1, raw)
+      | _ => raw
+      };
+    raw |> Js.String.split("/") |> Array.to_list;
+  };
+
+let component = ReasonReact.reducerComponent("Router");
+
+let make:
+  (~initialUrl: option(string), 'a) => ReasonReact.component(state, _, action) =
+  (~initialUrl, children) => {
+    ...component,
+    initialState: () =>
+      switch initialUrl {
+      | Some(url) => {path: urlToUrlList(url), hash: "", search: ""}
+      | None => ReasonReact.Router.dangerouslyGetInitialUrl()
+      },
+    reducer: (action, _state) =>
+      switch action {
+      | UpdateRoute(url) => ReasonReact.Update(url)
+      },
+    subscriptions: ({send}) => [
+      Sub(
+        () => ReasonReact.Router.watchUrl(url => send(UpdateRoute(url))),
+        ReasonReact.Router.unwatchUrl
+      )
+    ],
+    render: ({state}) => children(state)
+  };

examples/with-reason-react/src/client.js

@@ -3,7 +3,7 @@ import './client.css';
 import React from 'react';
 import { render } from 'react-dom';
 
-const App = require('../lib/js/src/app').comp; // BuckleScript output directory
+import App from '../lib/js/src/App'; // BuckleScript output directory
 
 render(
   <App title="Welcome to Razzle Reason React" />,

examples/with-reason-react/src/server.js

@@ -2,7 +2,7 @@ import React from 'react';
 import express from 'express';
 import { renderToString } from 'react-dom/server';
 
-const App = require('../lib/js/src/app').comp; // BuckleScript output directory
+import App from '../lib/js/src/App'; // BuckleScript output directory
 
 const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
 
@@ -13,7 +13,7 @@ server
   .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
   .get('/*', (req, res) => {
     const markup = renderToString(
-      <App title="Welcome to Razzle Reason React" />
+      <App title="Welcome to Razzle Reason React" initialUrl={req.url} />
     );
     res.send(
       `<!doctype html>