format after merge

Author: jderochervlk

docs/react/arrays-and-keys.mdx

@@ -38,21 +38,25 @@ function Playground(props) {
   var todos = [
     {
       id: "todo1",
-      text: "Todo 1"
+      text: "Todo 1",
     },
     {
       id: "todo2",
-      text: "Todo 2"
-    }
+      text: "Todo 2",
+    },
   ];
   var items = todos.map(function (todo) {
-        return JsxRuntime.jsx("li", {
-                    children: todo.text
-                  }, todo.id);
-      });
+    return JsxRuntime.jsx(
+      "li",
+      {
+        children: todo.text,
+      },
+      todo.id,
+    );
+  });
   return JsxRuntime.jsx("ul", {
-              children: items
-            });
+    children: items,
+  });
 }
 ```
 
@@ -73,19 +77,17 @@ let items = Array.map(numbers, (number) => {
 ```
 
 ```js
-var numbers = [
-  1,
-  2,
-  3,
-  4,
-  5
-];
+var numbers = [1, 2, 3, 4, 5];
 
 var items = numbers.map(function (number) {
-      return JsxRuntime.jsx("li", {
-                  children: number
-                }, number.toString());
-    });
+  return JsxRuntime.jsx(
+    "li",
+    {
+      children: number,
+    },
+    number.toString(),
+  );
+});
 ```
 
 </CodeTab>
@@ -111,19 +113,23 @@ let items = Array.map(todos, todo => {
 var todos = [
   {
     id: "todo1",
-    text: "Todo 1"
+    text: "Todo 1",
   },
   {
     id: "todo2",
-    text: "Todo 2"
-  }
+    text: "Todo 2",
+  },
 ];
 
 var items = todos.map(function (todo) {
-      return JsxRuntime.jsx("li", {
-                  children: todo.text
-                }, todo.id);
-    });
+  return JsxRuntime.jsx(
+    "li",
+    {
+      children: todo.text,
+    },
+    todo.id,
+  );
+});
 ```
 
 </CodeTab>
@@ -143,15 +149,18 @@ let items = Array.mapWithIndex(todos, (todo, i) => {
 
 ```js
 var items = todos.map(function (todo, i) {
-      return JsxRuntime.jsx("li", {
-                  children: todo.text
-                }, i.toString());
-    });
+  return JsxRuntime.jsx(
+    "li",
+    {
+      children: todo.text,
+    },
+    i.toString(),
+  );
+});
 ```
 
 </CodeTab>
 
-
 ### Keys Must Only Be Unique Among Siblings
 
 Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays:
@@ -206,58 +215,61 @@ let blog = <Blog posts />
 function Playground$Blog(props) {
   var posts = props.posts;
   var sidebar = JsxRuntime.jsx("ul", {
-        children: posts.map(function (post) {
-              return JsxRuntime.jsx("li", {
-                          children: post.title
-                        }, post.id);
-            })
-      });
+    children: posts.map(function (post) {
+      return JsxRuntime.jsx(
+        "li",
+        {
+          children: post.title,
+        },
+        post.id,
+      );
+    }),
+  });
   var content = posts.map(function (post) {
-        return JsxRuntime.jsxs("div", {
-                    children: [
-                      JsxRuntime.jsx("h3", {
-                            children: post.title
-                          }),
-                      JsxRuntime.jsx("p", {
-                            children: post.content
-                          })
-                    ]
-                  }, post.id);
-      });
+    return JsxRuntime.jsxs(
+      "div",
+      {
+        children: [
+          JsxRuntime.jsx("h3", {
+            children: post.title,
+          }),
+          JsxRuntime.jsx("p", {
+            children: post.content,
+          }),
+        ],
+      },
+      post.id,
+    );
+  });
   return JsxRuntime.jsxs("div", {
-              children: [
-                sidebar,
-                JsxRuntime.jsx("hr", {}),
-                content
-              ]
-            });
+    children: [sidebar, JsxRuntime.jsx("hr", {}), content],
+  });
 }
 
 var Blog = {
-  make: Playground$Blog
+  make: Playground$Blog,
 };
 
 var posts = [
   {
     id: "1",
     title: "Hello World",
-    content: "Welcome to learning ReScript & React!"
+    content: "Welcome to learning ReScript & React!",
   },
   {
     id: "2",
     title: "Installation",
-    content: "You can install reason-react from npm."
-  }
+    content: "You can install reason-react from npm.",
+  },
 ];
 
 var blog = JsxRuntime.jsx(Playground$Blog, {
-      posts: posts
-    });
+  posts: posts,
+});
 ```
 
 </CodeTab>
 
-
 ## Rendering `list` Values
 
 In case you ever want to render a `list` of items, you can do something like this:
@@ -289,25 +301,29 @@ let make = () => {
 ```js
 function Playground(props) {
   var items = Core__List.toArray({
-          hd: {
-            id: "todo1",
-            text: "Todo 1"
-          },
-          tl: {
-            hd: {
-              id: "todo2",
-              text: "Todo 2"
-            },
-            tl: /* [] */0
-          }
-        }).map(function (todo) {
-        return JsxRuntime.jsx("li", {
-                    children: todo.text
-                  }, todo.id);
-      });
+    hd: {
+      id: "todo1",
+      text: "Todo 1",
+    },
+    tl: {
+      hd: {
+        id: "todo2",
+        text: "Todo 2",
+      },
+      tl: /* [] */ 0,
+    },
+  }).map(function (todo) {
+    return JsxRuntime.jsx(
+      "li",
+      {
+        children: todo.text,
+      },
+      todo.id,
+    );
+  });
   return JsxRuntime.jsx("div", {
-              children: items
-            });
+    children: items,
+  });
 }
 ```
 
@@ -316,4 +332,3 @@ function Playground(props) {
 We use `List.toArray` to convert our list to an array before creating our `array<React.element>`. Please note that using `list` has performance impact due to extra conversion costs.
 
 99% of the time you'll want to use arrays (seamless interop, faster JS code), but in some cases it might make sense to use a `list` to leverage advanced pattern matching features etc.
-

docs/react/beyond-jsx.mdx

@@ -18,7 +18,7 @@ JSX is a syntax sugar that allows us to use React components in an HTML like man
 
 ## Component Types
 
-A plain React component is defined as a `('props) => React.element` function. You can also express a component more efficiently with our shorthand type `React.component<'props>`. 
+A plain React component is defined as a `('props) => React.element` function. You can also express a component more efficiently with our shorthand type `React.component<'props>`.
 
 Here are some examples on how to define your own component types (often useful when interoping with existing JS code, or passing around components):
 
@@ -32,6 +32,7 @@ type friendComp = friend => React.element
 type props = {padding: string, children: React.element}
 type containerComp = React.component<props>
 ```
+
 The types above are pretty low level (basically the JS representation of a React component), but since ReScript React has its own ways of defining React components in a more language specific way, let's have a closer look on the anatomy of such a construct.
 
 ## JSX Component Interface
@@ -66,6 +67,7 @@ module Friend = {
   }
 }
 ```
+
 ```res example
 module Friend = {
   type props<'name, 'children> = {
@@ -78,18 +80,16 @@ module Friend = {
   }
 }
 ```
+
 ```js
 function Playground$Friend(props) {
   return JsxRuntime.jsxs("div", {
-              children: [
-                props.name,
-                props.children
-              ]
-            });
+    children: [props.name, props.children],
+  });
 }
 
 var Friend = {
-  make: Playground$Friend
+  make: Playground$Friend,
 };
 ```
 
@@ -104,7 +104,6 @@ In the expanded output:
 
 The `@react.component` decorator also works for `React.forwardRef` calls:
 
-
 <CodeTab labels={["Decorated", "Expanded"]}>
 
 ```res
@@ -140,20 +139,22 @@ So now that we know how the ReScript React component transformation works, let's
 
 ## JSX Under the Hood
 
-Whenever we are using JSX with a custom component ("capitalized JSX"), we are actually using `React.createElement` to create a new element. Here is an example of a React component without children: 
+Whenever we are using JSX with a custom component ("capitalized JSX"), we are actually using `React.createElement` to create a new element. Here is an example of a React component without children:
 
 <CodeTab labels={["JSX", "Without JSX", "JS Output"]}>
 
 ```res example
 let _ = <Friend name="Fred" age=20 />
 ```
+
 ```res example
 // classic
 React.createElement(Friend.make, {name: "Fred", age:20})
 
 // automatic
 React.jsx(Friend.make, {name: "Fred", age: 20})
 ```
+
 ```js
 JsxRuntime.jsx(Playground$Friend, { name: "Fred", age: 20 });
 ```
@@ -194,10 +195,9 @@ JsxRuntime.jsx(Container, { width: 200, children: null }, "Hello", "World");
 
 Note that the `children: React.null` field has no relevance since React will only care about the children array passed as a third argument.
 
-
 ### Dom Elements
 
-"Uncapitalized JSX" expressions are treated as DOM elements and will be converted to `ReactDOM.createDOMElementVariadic` calls: 
+"Uncapitalized JSX" expressions are treated as DOM elements and will be converted to `ReactDOM.createDOMElementVariadic` calls:
 
 <CodeTab labels={["JSX", "Without JSX", "JS Output"]}>
 
@@ -243,15 +243,19 @@ ReactDOM.jsx("div", {title: "test", children: ?ReactDOM.someElement(ReactDOM.jsx
 
 ```js
 JsxRuntime.jsx("div", {
-      children: JsxRuntime.jsx("span", {}),
-      title: "test"
-    });
+  children: JsxRuntime.jsx("span", {}),
+  title: "test",
+});
 ```
 
 ```js
-React.createElement("div", {
-      title: "test"
-    }, React.createElement("span", undefined));
+React.createElement(
+  "div",
+  {
+    title: "test",
+  },
+  React.createElement("span", undefined),
+);
 ```
 
 </CodeTab>