example with-reasonml dependency updates (#5048)

The original example fails to compile on my windows machine but updating bs-platform fixes that.
Depending on bs-next causes example to fail (package compiled with old incompatible version of bs-platform) so I have included it in a bindings directory where it can serve as an example of reason bindings.
Sources have been migrated to the latest reason-react.

examples/with-reasonml/bindings/Next.re

@@ -0,0 +1,37 @@
+module Link = {
+  [@bs.module "next/link"] external link: ReasonReact.reactClass = "default";
+  let make =
+      (
+        ~href=?,
+        ~_as=?,
+        ~prefetch: option(bool)=?,
+        ~replace: option(bool)=?,
+        ~shallow: option(bool)=?,
+        ~passHref: option(bool)=?,
+        children,
+      ) =>
+    ReasonReact.wrapJsForReason(
+      ~reactClass=link,
+      ~props=
+        Js.Undefined.{
+          "href": fromOption(href),
+          "as": fromOption(_as),
+          "prefetch": fromOption(prefetch),
+          "replace": fromOption(replace),
+          "shallow": fromOption(shallow),
+          "passHref": fromOption(passHref),
+        },
+      children,
+    );
+};
+
+module Head = {
+  [@bs.module "next/head"] external head: ReasonReact.reactClass = "default";
+  let make = children => ReasonReact.wrapJsForReason(~reactClass=head, ~props=Js.Obj.empty(), children);
+};
+
+module Error = {
+  [@bs.module "next/error"] external error: ReasonReact.reactClass = "default";
+  let make = (~statusCode: int, children) =>
+    ReasonReact.wrapJsForReason(~reactClass=error, ~props={"statusCode": statusCode}, children);
+};

examples/with-reasonml/bsconfig.json

@@ -1,7 +1,7 @@
 {
   "name": "with-reasonml",
-  "sources": ["components", "pages"],
-  "bs-dependencies": ["reason-react", "bs-next"],
+  "sources": ["components", "pages", "bindings"],
+  "bs-dependencies": ["reason-react"],
   "reason": { "react-jsx": 2 },
   "package-specs": {
     "module": "commonjs",

examples/with-reasonml/components/Counter.re

@@ -13,9 +13,9 @@ let make = (_children) => {
   render: (self) => {
     let countMsg = "Count: " ++ string_of_int(self.state);
     <div>
-      <p> (ReasonReact.stringToElement(countMsg)) </p>
-      <button onClick=(self.reduce((_event) => Add))>
-        (ReasonReact.stringToElement("Add"))
+      <p> (ReasonReact.string(countMsg)) </p>
+      <button onClick=(_event => self.send(Add))>
+        (ReasonReact.string("Add"))
       </button>
     </div>
   }

examples/with-reasonml/components/Header.re

@@ -7,10 +7,10 @@ let make = (_children) => {
   render: (_self) =>
     <div>
       <Next.Link href="/">
-        <a style=styles> (ReasonReact.stringToElement("Home")) </a>
+        <a style=styles> (ReasonReact.string("Home")) </a>
       </Next.Link>
       <Next.Link href="/about">
-        <a style=styles> (ReasonReact.stringToElement("About")) </a>
+        <a style=styles> (ReasonReact.string("About")) </a>
       </Next.Link>
     </div>
 };

examples/with-reasonml/package.json

@@ -8,15 +8,14 @@
   },
   "license": "ISC",
   "dependencies": {
-    "babel-plugin-bucklescript": "^0.2.4",
+    "babel-plugin-bucklescript": "^0.4.0",
     "next": "latest",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "reason-react": "^0.3.0",
-    "bs-next": "^2.0.0"
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "reason-react": "^0.5.3"
   },
   "devDependencies": {
-    "bs-platform": "^2.1.0",
+    "bs-platform": "^4.0.5",
     "concurrently": "^3.5.1",
     "webpack": "^3.8.1"
   }

examples/with-reasonml/pages/about.re

@@ -5,7 +5,7 @@ let make = (_children) => {
   render: (_self) =>
     <div>
       <Header />
-      <p> (ReasonReact.stringToElement("This is the about page.")) </p>
+      <p> (ReasonReact.string("This is the about page.")) </p>
       <Counter />
     </div>
 };

examples/with-reasonml/pages/index.re

@@ -5,7 +5,7 @@ let make = (_children) => {
   render: (_self) =>
     <div>
       <Header />
-      <p> (ReasonReact.stringToElement("HOME PAGE is here!")) </p>
+      <p> (ReasonReact.string("HOME PAGE is here!")) </p>
       <Counter />
     </div>
 };