Use pipe last instead of pipe first and remove Belt usage (#39)

melange-opam-template.opam

@@ -8,10 +8,10 @@ homepage: "https://github.com/your/project"
 bug-reports: "https://github.com/your/project/issues"
 depends: [
   "ocaml"
-  "reason" {>= "3.10.0"}
+  "reason" {>= "3.13.0"}
   "dune" {>= "3.9"}
-  "melange" {>= "2.0.0"}
-  "reason-react" {>= "0.13.0"}
+  "melange" {>= "4.0.0"}
+  "reason-react" {>= "0.15.0"}
   "reason-react-ppx"
   "opam-check-npm-deps" {with-dev-setup}
   "ocaml-lsp-server" {with-dev-setup}

src/ReactApp.re

@@ -1,18 +1,31 @@
 module App = {
-  // This sample forces an import of Belt.*, so that CI builds can ensure that
-  // Melange has been installed correctly for JS bundlers to be able to find it.
+  let style =
+    ReactDOM.Style.make(~fontSize="1.5em", ~display="flex", ~gap="0.5em", ());
+
   [@react.component]
   let make = () =>
-    ["Hello " ++ World.name ++ "!", "This is React!"]
-    ->Belt.List.map(greeting => <h1 key={greeting}> greeting->React.string </h1>)
-    ->Belt.List.toArray
-    ->React.array;
+    <div>
+      <h1> {React.string("melange-opam-template")} </h1>
+      {["Hello " ++ World.name ++ "!", "This is ReasonReact!"]
+       |> List.map(text =>
+            <div key=text style>
+              {React.string(text)}
+              <button
+                onClick={_ => text |> Speech.makeUtterance |> Speech.speak}>
+                {React.string("speak")}
+              </button>
+            </div>
+          )
+       |> Array.of_list
+       |> React.array}
+    </div>;
 };
 
-switch (ReactDOM.querySelector("#root")) {
-| Some(element) =>
-  let root = ReactDOM.Client.createRoot(element);
-  ReactDOM.Client.render(root, <App />);
-| None =>
-  Js.Console.error("Failed to start React: couldn't find the #root element")
-};
+let () =
+  switch (ReactDOM.querySelector("#root")) {
+  | None =>
+    Js.Console.error("Failed to start React: couldn't find the #root element")
+  | Some(element) =>
+    let root = ReactDOM.Client.createRoot(element);
+    ReactDOM.Client.render(root, <App />);
+  };

src/Speech.re

@@ -0,0 +1,8 @@
+/* Simplest possible bindings for speech synthesis API */
+
+type utterance;
+
+[@mel.new]
+external makeUtterance: string => utterance = "SpeechSynthesisUtterance";
+
+external speak: utterance => unit = "speechSynthesis.speak";

src/dune

@@ -17,7 +17,7 @@
  ; Dune will look into those dependencies and generate rules with JavaScript targets
  ; for the modules in those libraries as well.
  ; Caveat: the libraries need to be specified with `(modes melange)`.
- (libraries reason-react world melange.belt)
+ (libraries reason-react world)
 
  ; By default, Dune will include all modules in the folder to the targets. With `modules` field
  ; we can tweak this default behavior by excluding `hello` from the list of targets of this stanza.