Merge pull request #138 from glennsl/feat/core/snake_case

Convert API to snake case

example/src/App.re

@@ -1 +1 @@
-React.Dom.renderToElementWithId(<Main />, "app");
+React.Dom.render_to_element_with_id(<Main />, "app");

example/src/Click.re

@@ -8,7 +8,7 @@ let reducer = (state, action) =>
 
 [@react.component]
 let make = () => {
-  let (state, dispatch) = React.useReducer(reducer, []);
+  let (state, dispatch) = React.use_reducer(reducer, []);
   <div
     style=React.Dom.Style.(make([|color("#ff5544"), fontSize("68px")|]))
     onClick={event => {

example/src/Code.re

@@ -4,15 +4,17 @@ open Html;
 
 [@react.component]
 let make = (~text) => {
-  let codeRef = React.useRef(Js.null);
-  React.useEffect(() => {
+  let codeRef = React.use_ref(Js.null);
+  React.use_effect(() => {
     switch (codeRef |> React.Ref.current |> Js.Opt.to_option) {
     | Some(el) => Js.Unsafe.global##.Prism##highlightElement(el)
     | None => ()
     };
     None;
   });
   <pre className="language-reason">
-    <code ref_={React.Dom.Ref.domRef(codeRef)}> {text |> React.string} </code>
+    <code ref_={React.Dom.Ref.dom_ref(codeRef)}>
+      {text |> React.string}
+    </code>
   </pre>;
 };

example/src/EffectsAndState.re

@@ -18,8 +18,8 @@ let space = {
 
 [@react.component]
 let make = (~name="Billy", ~children=?) => {
-  let (count, setCount) = React.useState(() => 0);
-  let (state, dispatch) = React.useReducer(reducer, 0);
+  let (count, setCount) = React.use_state(() => 0);
+  let (state, dispatch) = React.use_reducer(reducer, 0);
 
   <div>
     <UseEffect count />

example/src/Events.re

@@ -16,8 +16,8 @@ module Title = {
 
 [@react.component]
 let make = () => {
-  let (coords, setCoords) = React.useState(() => {x: 0, y: 0});
-  let (inputText, setInputText) = React.useState(() => "");
+  let (coords, setCoords) = React.use_state(() => {x: 0, y: 0});
+  let (inputText, setInputText) = React.use_state(() => "");
   <div>
     <h5> {"text input via \"onChange\"" |> React.string} </h5>
     <input
@@ -30,7 +30,7 @@ let make = () => {
     <h5> {"form submission via \"onSubmit\"" |> React.string} </h5>
     <form
       onSubmit={event => {
-        React.Event.Form.preventDefault(event);
+        React.Event.Form.prevent_default(event);
         switch (Window.get) {
         | None => ()
         | Some(w) =>
@@ -45,7 +45,7 @@ let make = () => {
           let value = React.Event.Form.target(event) |> Window.value;
           setInputText(_ => value);
         }}
-        style=React.Dom.Style.(make([|marginRight("15px")|]))
+        style=React.Dom.Style.(make([|margin_right("15px")|]))
         value=inputText
       />
       <button type_="submit"> {"submit dis" |> React.string} </button>
@@ -55,7 +55,8 @@ let make = () => {
       <img
         src="https://cdn.glitch.com/ed95e263-69d5-4c3b-aed2-d85713f4aef9%2Fdoggo.jpeg?v=1563384185147"
         onMouseMove={event => {
-          let (x, y) = React.Event.Mouse.(screenX(event), screenY(event));
+          let (x, y) =
+            React.Event.Mouse.(screen_x(event), screen_y(event));
           setCoords(_ => {{x, y}});
         }}
       />

example/src/Main.re

@@ -138,7 +138,7 @@ let examples = [
 
 [@react.component]
 let make = () => {
-  let url = React.Router.useUrl();
+  let url = React.Router.use_url();
 
   <div className="flex-container">
     <div className="sidebar">
@@ -152,7 +152,7 @@ let make = () => {
                       <a
                         href={e.path}
                         onClick={event => {
-                          React.Event.Mouse.preventDefault(event);
+                          React.Event.Mouse.prevent_default(event);
                           React.Router.push(e.path);
                         }}>
                         {e.title |> s}

example/src/Refs.re

@@ -6,25 +6,25 @@ open Html;
 module FancyLink = {
   [@react.component]
   let make =
-    React.Dom.forwardRef((~href, ~repo, ref) =>
+    React.Dom.forward_ref((~href, ~repo, ref) =>
       <a ref_=ref href className="FancyLink"> {repo |> React.string} </a>
     );
 };
 
 [@react.component]
 let make = () => {
-  let (show, setShow) = React.useState(() => true);
+  let (show, setShow) = React.use_state(() => true);
   /* You can now get a ref directly to the DOM button: */
   let ref =
-    React.Dom.Ref.callbackDomRef(ref => {
+    React.Dom.Ref.callback_dom_ref(ref => {
       Console.log(Js.string("Ref is:"));
       Console.log(ref);
     });
   <>
     <button
       key="toggle"
       onClick={_ => setShow(s => !s)}
-      style=React.Dom.Style.(make([|marginRight("15px")|]))>
+      style=React.Dom.Style.(make([|margin_right("15px")|]))>
       {"Toggle fancy link" |> React.string}
     </button>
     {show

example/src/UseEffect.re

@@ -5,7 +5,7 @@ open Html;
 [@react.component]
 let make = (~count) => {
   open Js_of_ocaml_lwt;
-  React.useEffect1(
+  React.use_effect1(
     () => {
       open Lwt;
       open Lwt_js;
@@ -29,8 +29,8 @@ let make = (~count) => {
     [|count|],
   );
 
-  React.useLayoutEffect(() => {
-    Console.log("useLayoutEffect: component updated");
+  React.use_layout_effect(() => {
+    Console.log("use_layout_effect: component updated");
     None;
   });