Convert test sources from .re to .res (#5678)

* Remove re_first_test

* Convert test sources from .re to .res

* Hack to disable Pexp_object usage in old reason-react sources in tests

* Regenerate build.ninja

* Doc comments changed during conversion

* Adjust tests.

Co-authored-by: Cristiano Calcagno <cristianoc@users.noreply.github.com>

Author: cknitt

jscomp/bsb/templates/basic-reason/src/Demo.re

@@ -0,0 +1 @@
+Js.log("Hello, ReScript!")

jscomp/bsb/templates/basic-reason/src/Demo.res

@@ -0,0 +1,20 @@
+@react.component
+let make = (~children) => {
+  let (show, setShow) = React.useState(() => true)
+
+  // Notice that instead of `useEffect`, we have `useEffect0`. See
+  // reasonml.github.io/reason-react/docs/en/components#hooks for more info
+  React.useEffect0(() => {
+    let id = Js.Global.setInterval(() => setShow(previousShow => !previousShow), 1000)
+
+    Some(() => Js.Global.clearInterval(id))
+  })
+
+  let style = if show {
+    ReactDOMRe.Style.make(~opacity="1", ~transition="opacity 1s", ())
+  } else {
+    ReactDOMRe.Style.make(~opacity="0", ~transition="opacity 1s", ())
+  }
+
+  <div style> children </div>
+}

jscomp/bsb/templates/react-hooks/src/BlinkingGreeting/BlinkingGreeting.re

@@ -1,10 +1,10 @@
-let reasonReactBlue = "#48a9dc";
+let reasonReactBlue = "#48a9dc"
 
 // The {j|...|j} feature is just string interpolation, from
 // bucklescript.github.io/docs/en/interop-cheatsheet#string-unicode-interpolation
 // This allows us to conveniently write CSS, together with variables, by
 // constructing a string
-let style = {j|
+let style = j`
   body {
     background-color: rgb(224, 226, 229);
     display: flex;
@@ -41,4 +41,4 @@ let style = {j|
     padding: 16px;
     border-radius: 0px 0px 12px 12px;
   }
-|j};
+`

jscomp/bsb/templates/react-hooks/src/BlinkingGreeting/BlinkingGreeting.res

@@ -0,0 +1,70 @@
+@val external fetch: string => Js.Promise.t<'a> = "fetch"
+
+type state =
+  | LoadingDogs
+  | ErrorFetchingDogs
+  | LoadedDogs(array<string>)
+
+@react.component
+let make = () => {
+  let (state, setState) = React.useState(() => LoadingDogs)
+
+  // Notice that instead of `useEffect`, we have `useEffect0`. See
+  // reasonml.github.io/reason-react/docs/en/components#hooks for more info
+  React.useEffect0(() => {
+    {
+      open Js.Promise
+      fetch("https://dog.ceo/api/breeds/image/random/3")
+      |> then_(response => response["json"]())
+      |> then_(jsonResponse => {
+        setState(_previousState => LoadedDogs(jsonResponse["message"]))
+        Js.Promise.resolve()
+      })
+      |> catch(_err => {
+        setState(_previousState => ErrorFetchingDogs)
+        Js.Promise.resolve()
+      })
+      |> ignore
+    }
+
+    // Returning None, instead of Some(() => ...), means we don't have any
+    // cleanup to do before unmounting. That's not 100% true. We should
+    // technically cancel the promise. Unofortunately, there's currently no
+    // way to cancel a promise. Promises in general should be way less used
+    // for React components; but since folks do use them, we provide such an
+    // example here. In reality, this fetch should just be a plain callback,
+    // with a cancellation API
+    None
+  })
+
+  <div
+    style={ReactDOMRe.Style.make(
+      ~height="120px",
+      ~display="flex",
+      ~alignItems="center",
+      ~justifyContent="center",
+      (),
+    )}>
+    {switch state {
+    | ErrorFetchingDogs => React.string("An error occurred!")
+    | LoadingDogs => React.string("Loading...")
+    | LoadedDogs(dogs) =>
+      dogs
+      ->Belt.Array.mapWithIndex((i, dog) => {
+        let imageStyle = ReactDOMRe.Style.make(
+          ~height="120px",
+          ~width="100%",
+          ~marginRight=i === Js.Array.length(dogs) - 1 ? "0px" : "8px",
+          ~borderRadius="8px",
+          ~boxShadow="0px 4px 16px rgb(200, 200, 200)",
+          ~backgroundSize="cover",
+          ~backgroundImage=j`url($dog)`,
+          ~backgroundPosition="center",
+          (),
+        )
+        <div key=dog style=imageStyle />
+      })
+      ->React.array
+    }}
+  </div>
+}

jscomp/bsb/templates/react-hooks/src/ExampleStyles.re jscomp/bsb/templates/react-hooks/src/ExampleStyles.res

@@ -0,0 +1,40 @@
+// Entry point
+
+@val external document: {..} = "document"
+
+// We're using raw DOM manipulations here, to avoid making you read
+// ReasonReact when you might precisely be trying to learn it for the first
+// time through the examples later.
+let style = document["createElement"]("style")
+document["head"]["appendChild"](style)
+style["innerHTML"] = ExampleStyles.style
+
+let makeContainer = text => {
+  let container = document["createElement"]("div")
+  container["className"] = "container"
+
+  let title = document["createElement"]("div")
+  title["className"] = "containerTitle"
+  title["innerText"] = text
+
+  let content = document["createElement"]("div")
+  content["className"] = "containerContent"
+
+  let () = container["appendChild"](title)
+  let () = container["appendChild"](content)
+  let () = document["body"]["appendChild"](container)
+
+  content
+}
+
+// All 4 examples.
+ReactDOMRe.render(
+  <BlinkingGreeting> {React.string("Hello!")} </BlinkingGreeting>,
+  makeContainer("Blinking Greeting"),
+)
+
+ReactDOMRe.render(<ReducerFromReactJSDocs />, makeContainer("Reducer From ReactJS Docs"))
+
+ReactDOMRe.render(<FetchedDogPictures />, makeContainer("Fetched Dog Pictures"))
+
+ReactDOMRe.render(<ReasonUsingJSUsingReason />, makeContainer("Reason Using JS Using Reason"))

jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.re

@@ -4,7 +4,5 @@
 // - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
 // - ReasonUsingJSUsingReason.re is used by Index.re
 
-[@react.component]
-let make = (~style) => {
-  <div style> {React.string("This is a ReasonReact card")} </div>;
-};
+@react.component
+let make = (~style) => <div style> {React.string("This is a ReasonReact card")} </div>

jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.res

@@ -6,5 +6,5 @@
 
 // All you need to do to use a ReactJS component in ReasonReact, is to write the lines below!
 // reasonml.github.io/reason-react/docs/en/components#import-from-js
-[@react.component] [@bs.module]
-external make: unit => React.element = "./ReactJSCard";
+@react.component @module
+external make: unit => React.element = "./ReactJSCard"

jscomp/bsb/templates/react-hooks/src/Index.re

@@ -2,36 +2,37 @@
 // https://reactjs.org/docs/hooks-reference.html#usereducer
 
 // A little extra we've put, because the ReactJS example has no styling
-let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius="4px 0px 0px 4px", ~width="48px", ());
-let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius="0px 4px 4px 0px", ~width="48px", ());
-let containerStyle = ReactDOMRe.Style.make(~display="flex", ~alignItems="center", ~justifyContent="space-between", ());
+let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius="4px 0px 0px 4px", ~width="48px", ())
+let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius="0px 4px 4px 0px", ~width="48px", ())
+let containerStyle = ReactDOMRe.Style.make(
+  ~display="flex",
+  ~alignItems="center",
+  ~justifyContent="space-between",
+  (),
+)
 
 // Record and variant need explicit declarations.
-type state = {count: int};
+type state = {count: int}
 
 type action =
   | Increment
-  | Decrement;
+  | Decrement
 
-let initialState = {count: 0};
+let initialState = {count: 0}
 
-let reducer = (state, action) => {
-  switch (action) {
+let reducer = (state, action) =>
+  switch action {
   | Increment => {count: state.count + 1}
   | Decrement => {count: state.count - 1}
-  };
-};
+  }
 
-[@react.component]
+@react.component
 let make = () => {
-  let (state, dispatch) = React.useReducer(reducer, initialState);
+  let (state, dispatch) = React.useReducer(reducer, initialState)
 
   // We can use a fragment here, but we don't, because we want to style the counter
   <div style=containerStyle>
-    <div>
-      {React.string("Count: ")}
-      {React.string(string_of_int(state.count))}
-    </div>
+    <div> {React.string("Count: ")} {React.string(string_of_int(state.count))} </div>
     <div>
       <button style=leftButtonStyle onClick={_event => dispatch(Decrement)}>
         {React.string("-")}
@@ -40,5 +41,5 @@ let make = () => {
         {React.string("+")}
       </button>
     </div>
-  </div>;
-};
+  </div>
+}