Merge pull request #21 from ahrefs/melange-v3

support melange v3

Makefile

@@ -13,7 +13,7 @@ help: ## Print this help message
 
 .PHONY: create-switch
 create-switch: ## Create opam switch
-	opam switch create . 5.1.0 -y --deps-only
+	opam switch create . 5.1.1 -y --deps-only
 
 .PHONY: init
 init: create-switch install ## Configure everything to develop this repository in local

dune-project

@@ -22,15 +22,18 @@
  (maintainers "Denis Strelkov <[email protected]>")
  (authors "bloodyowl <[email protected]>")
  (license "MIT")
- (tags ("melange" "org:ahrefs"))
+ (tags
+  ("melange" "org:ahrefs"))
  (depends
   ocaml
   (melange
-   (>= 2.0.0))
+   (>= 3.0.0))
   (reason
    (>= 3.10.0))
-  reason-react
-  reason-react-ppx
+  (reason-react
+   (>= 0.14.0))
+  (reason-react-ppx
+   (>= 0.14.0))
   (ocaml-lsp-server :with-test)
   (opam-check-npm-deps :with-test) ; todo: use with-dev-setup once opam 2.2 is out
   ))

example/Demo.re

@@ -69,7 +69,7 @@ demo(({addDemo: _, addCategory}) =>
           style={ReactDOM.Style.make(
             ~fontSize=
               {let size =
-                 int("Font size", {min: 0, max: 100, initial: 30, step: 1});
+                 int("Font size", {min: 0, max: 100, initial: 30, step: 1})->string_of_int;
                {j|$(size)px|j}},
             (),
           )}>

example/dune

@@ -2,5 +2,6 @@
  (target example)
  (alias example)
  (libraries reshowcase reason-react)
+ (module_systems es6)
  (preprocess
   (pps melange.ppx reason-react-ppx)))

package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "concurrently": "^6.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

reshowcase.opam

@@ -14,8 +14,8 @@ depends: [
   "ocaml"
   "melange" {>= "2.0.0"}
   "reason" {>= "3.10.0"}
-  "reason-react"
-  "reason-react-ppx"
+  "reason-react" {>= "0.14.0"}
+  "reason-react-ppx" {>= "0.14.0"}
   "ocaml-lsp-server" {with-test}
   "opam-check-npm-deps" {with-test}
   "odoc" {with-doc}

src/Bindings.re

@@ -12,7 +12,9 @@ module URLSearchParams = {
   let toArray = (t, ()) => {
     let array = [||];
     t->(
-         forEach((value, key) => Js.Array2.push(array, (key, value))->ignore)
+         forEach((value, key) =>
+           Js.Array.push(array, ~value=(key, value))->ignore
+         )
        );
     array;
   };

src/Demos.re

@@ -36,7 +36,7 @@ let findDemo = (urlSearchParams: URLSearchParams.t, demoName, demos: t) => {
     ->List.fromArray
     ->(
         List.keep(((key, _value)) =>
-          key->(Js.String2.startsWith("category"))
+          key->(Js.String.startsWith(~prefix="category"))
         )
       )
     ->(

src/Entry.re

@@ -40,6 +40,8 @@ let demo = (f): unit => {
 
 let start = () =>
   switch (ReactDOM.querySelector("#root")) {
-  | Some(root) => ReactDOM.render(<ReshowcaseUi.App demos=rootMap />, root)
+  | Some(root) =>
+    let root = ReactDOM.Client.createRoot(root);
+    ReactDOM.Client.render(root, <ReshowcaseUi.App demos=rootMap />);
   | None => ()
   };

src/HighlightTerms.re

@@ -1,6 +1,6 @@
 module List = Belt.List;
-module String = Js.String2;
-module Array = Js.Array2;
+module String = Js.String;
+module Array = Js.Array;
 
 type textPart =
   | Marked(string)
@@ -17,53 +17,54 @@ let getTermGroups = (~searchString, ~entityName) =>
   | _ =>
     let searchString = searchString->String.toLowerCase;
     let entityName = entityName->String.toLowerCase;
-    if (entityName->(String.includes(searchString))) {
+    if (entityName->(String.includes(~search=searchString))) {
       [|[|searchString|]|];
     } else {
       let refinedSearchString =
         searchString
-        ->(String.replaceByRe([%re "/\\s+/g"], " "))
-        ->(String.replaceByRe([%re "/( , |, | ,)/g"], ","));
+        ->String.replaceByRe(~regexp=[%re "/\\s+/g"], ~replacement=" ")
+        ->String.replaceByRe(
+            ~regexp=[%re "/( , |, | ,)/g"],
+            ~replacement=",",
+          );
 
       refinedSearchString
-      ->(String.split(","))
-      ->(Array.map(s => s->(String.split(" "))))
-      ->(
-          Array.map(arr =>
-            arr->(
-                   Belt.Array.keepMap(s =>
-                     if (String.length(s) > 1) {
-                       Some(s);
-                     } else {
-                       None;
-                     }
-                   )
-                 )
-          )
-        );
+      |> String.split(~sep=",")
+      |> Array.map(~f=s => s->(String.split(~sep=" ")))
+      |> Array.map(~f=arr =>
+           arr->Belt.Array.keepMap(s =>
+             if (String.length(s) > 1) {
+               Some(s);
+             } else {
+               None;
+             }
+           )
+         );
     };
   };
 
 let getMatchingTerms = (~searchString, ~entityName) => {
   let entityName = entityName->String.toLowerCase;
   let termGroups = getTermGroups(~searchString, ~entityName);
   let includedTerms =
-    termGroups->(
-                  Array.filter(terms =>
-                    terms->(
-                             Array.every(term =>
-                               String.includes(entityName, term)
-                             )
-                           )
+    termGroups
+    |> Array.filter(~f=terms =>
+         terms->(
+                  Array.every(~f=term =>
+                    String.includes(entityName, ~search=term)
                   )
-                );
+                )
+       );
 
   Belt.Array.concatMany(includedTerms);
 };
 
 let getMarkRangeIndexes = (text, substring) => {
   let indexFrom =
-    String.indexOf(String.toLowerCase(text), String.toLowerCase(substring));
+    String.indexOf(
+      String.toLowerCase(text),
+      ~search=String.toLowerCase(substring),
+    );
 
   let indexTo = indexFrom + String.length(substring);
   (indexFrom, indexTo);
@@ -103,17 +104,17 @@ let compareInt: (int, int) => int = Stdlib.compare;
 
 let getMarkRanges = (text, terms) =>
   terms
-  ->(Array.map(term => getMarkRangeIndexes(text, term)))
+  ->(Array.map(~f=term => getMarkRangeIndexes(text, term)))
   ->Array.copy
   ->(
-      Array.sortInPlaceWith(((from1, to1), (from2, to2)) =>
+      Array.sortInPlaceWith(~f=((from1, to1), (from2, to2)) =>
         compareInt(from1 + to1, from2 + to2)
       )
     );
 
 let getMarkedAndUnmarkedParts = (ranges, text) => {
   let max = String.length(text);
-  let getTerm = (from, to_) => String.slice(text, ~from, ~to_);
+  let getTerm = (start, end_) => String.slice(text, ~start, ~end_);
   let rec iter = (prevRangeEnd, acc, ranges) =>
     switch (ranges) {
     | [] =>
@@ -170,24 +171,22 @@ let make = (~text, ~terms) =>
   | _ =>
     let textParts = getTextParts(~text, ~terms);
     textParts
-    ->(
-        Array.mapi((item, index) =>
-          switch (item) {
-          | Marked(text) =>
-            <mark
-              key={Belt.Int.toString(index)}
-              style={ReactDOM.Style.make(
-                ~backgroundColor=Layout.Color.orange,
-                (),
-              )}>
-              text->React.string
-            </mark>
-          | Unmarked(text) =>
-            <React.Fragment key={Belt.Int.toString(index)}>
-              text->React.string
-            </React.Fragment>
-          }
-        )
-      )
-    ->React.array;
+    |> Array.mapi(~f=(item, index) =>
+         switch (item) {
+         | Marked(text) =>
+           <mark
+             key={Belt.Int.toString(index)}
+             style={ReactDOM.Style.make(
+               ~backgroundColor=Layout.Color.orange,
+               (),
+             )}>
+             text->React.string
+           </mark>
+         | Unmarked(text) =>
+           <React.Fragment key={Belt.Int.toString(index)}>
+             text->React.string
+           </React.Fragment>
+         }
+       )
+    |> React.array;
   };