Add React.list

Makefile

@@ -53,7 +53,7 @@ format-check: ## Checks if format is correct
 
 .PHONY: install
 install: ## Update the package dependencies when new deps are added to dune-project
-	@opam install . --deps-only --with-test
+	@opam install . --deps-only --with-test --with-dev-setup
 	@npm install
 
 .PHONY: init

docs/components.md

@@ -65,7 +65,7 @@ The component above could be called like this:
 </ComponentTakesChildren>
 ```
 
-## Rendering text, int, floats, arrays and null
+## Rendering text, int, floats, arrays, lists, and null
 
 In order for the compiler to understand that rendering a string of text or a number is intentional, you need to explicitely write it:
 
@@ -75,6 +75,7 @@ In order for the compiler to understand that rendering a string of text or a num
   {React.int(3)}
   {React.float(1.23)}
   {React.array([|<div key="0"/>, <span key="1" />|])}
+  {React.list([<div key="0"/>, <span key="1" />])}
   {React.null}
 </div>
 ```

dune-project

@@ -43,11 +43,11 @@
   (ocaml-lsp-server :with-dev-setup)
   (opam-check-npm-deps
    (and
-    (= 1.0.0)
+    (= 3.0.1)
     :with-dev-setup))
   (ocamlformat
    (and
-    (= 0.24.0)
+    (= 0.27.0)
     :with-dev-setup))))
 
 (package
@@ -64,5 +64,5 @@
   (merlin :with-test)
   (ocamlformat
    (and
-    (= 0.24.0)
+    (= 0.27.0)
     :with-dev-setup))))

reason-react-ppx.opam

@@ -19,7 +19,7 @@ depends: [
   "reason" {>= "3.12.0"}
   "ppxlib" {>= "0.33.0"}
   "merlin" {with-test}
-  "ocamlformat" {= "0.24.0" & with-dev-setup}
+  "ocamlformat" {= "0.27.0" & with-dev-setup}
   "odoc" {with-doc}
 ]
 build: [

reason-react.opam

@@ -23,8 +23,8 @@ depends: [
   "reason-react-ppx" {= version}
   "reason" {>= "3.12.0"}
   "ocaml-lsp-server" {with-dev-setup}
-  "opam-check-npm-deps" {= "1.0.0" & with-dev-setup}
-  "ocamlformat" {= "0.24.0" & with-dev-setup}
+  "opam-check-npm-deps" {= "3.0.1" & with-dev-setup}
+  "ocamlformat" {= "0.27.0" & with-dev-setup}
   "odoc" {with-doc}
 ]
 build: [

src/React.re

@@ -309,6 +309,7 @@ external float: float => element = "%identity";
 external int: int => element = "%identity";
 external string: string => element = "%identity";
 external array: array(element) => element = "%identity";
+let list: list(element) => element = xs => xs |> Array.of_list |> array;
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike('props, element) => component('props) =

src/React.rei

@@ -7,6 +7,7 @@ external float: float => element = "%identity";
 external int: int => element = "%identity";
 external string: string => element = "%identity";
 external array: array(element) => element = "%identity";
+let list: list(element) => element;
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike('props, element) => component('props) =
@@ -565,7 +566,8 @@ module Uncurried: {
 };
 
 [@mel.module "react"]
-external startTransition: ([@mel.uncurry] (unit => unit)) => unit = "startTransition";
+external startTransition: ([@mel.uncurry] (unit => unit)) => unit =
+  "startTransition";
 
 [@mel.module "react"]
 external useTransition: unit => (bool, callback(callback(unit, unit), unit)) =

test/React__test.re

@@ -169,6 +169,39 @@ describe("React", () => {
     ->toBe(true);
   });
 
+  test("can render list of elements", () => {
+    let container = getContainer(container);
+    let list =
+      [1, 2, 3]
+      ->List.map(item => {
+          <div key={string_of_int(item)}> item->React.int </div>
+        });
+    let root = ReactDOM.Client.createRoot(container);
+
+    act(() => {ReactDOM.Client.render(root, <div> list->React.list </div>)});
+
+    expect(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "1")
+      ->Option.isSome,
+    )
+    ->toBe(true);
+
+    expect(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "2")
+      ->Option.isSome,
+    )
+    ->toBe(true);
+
+    expect(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "3")
+      ->Option.isSome,
+    )
+    ->toBe(true);
+  });
+
   test("can clone an element", () => {
     let container = getContainer(container);
     let root = ReactDOM.Client.createRoot(container);