From b03703a6d99c3c767f13dc31c07e117debdcb333 Mon Sep 17 00:00:00 2001
From: Javier Chavarri <javier.chavarri@gmail.com>
Date: Mon, 23 Oct 2023 16:16:02 +0000
Subject: [PATCH 1/6] update to reason-react 0.14

---
 dune-project             |  9 ++++++---
 package.json             |  4 ++--
 reshowcase.opam          |  8 ++++++--
 reshowcase.opam.template |  4 ++++
 src/Entry.re             |  4 +++-
 src/ReshowcaseUi.re      | 28 ++++++++++++++--------------
 yarn.lock                | 34 +++++++++++++---------------------
 7 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/dune-project b/dune-project
index bf3b6e8..4fb7fc4 100644
--- a/dune-project
+++ b/dune-project
@@ -22,15 +22,18 @@
  (maintainers "Denis Strelkov <denis.strelkov@ahrefs.com>")
  (authors "bloodyowl <mlbli@me.com>")
  (license "MIT")
- (tags ("melange" "org:ahrefs"))
+ (tags
+  ("melange" "org:ahrefs"))
  (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) ; todo: use with-dev-setup once opam 2.2 is out
   ))
diff --git a/package.json b/package.json
index e823a88..99b548f 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/reshowcase.opam b/reshowcase.opam
index 7c707dd..ca9eb49 100644
--- a/reshowcase.opam
+++ b/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}
@@ -41,3 +41,7 @@ depexts: [
   ["webpack"] {npm-version = "^5.76.1"}
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
+pin-depends: [
+  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
+  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
+]
diff --git a/reshowcase.opam.template b/reshowcase.opam.template
index 79106f0..fb2119a 100644
--- a/reshowcase.opam.template
+++ b/reshowcase.opam.template
@@ -4,3 +4,7 @@ depexts: [
   ["webpack"] {npm-version = "^5.76.1"}
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
+pin-depends: [
+  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
+  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
+]
diff --git a/src/Entry.re b/src/Entry.re
index e96642a..efcb1b2 100644
--- a/src/Entry.re
+++ b/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 => ()
   };
diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re
index 2e5de0e..229f726 100644
--- a/src/ReshowcaseUi.re
+++ b/src/ReshowcaseUi.re
@@ -105,7 +105,7 @@ module TopPanel = {
                       }
                     }
               onClick={event => {
-                event->ReactEvent.Mouse.preventDefault;
+                event->React.Event.Mouse.preventDefault;
                 onSetResponsiveMode(_ => Desktop);
               }}>
               Icon.desktop
@@ -120,7 +120,7 @@ module TopPanel = {
                       }
                     }
               onClick={event => {
-                event->ReactEvent.Mouse.preventDefault;
+                event->React.Event.Mouse.preventDefault;
                 onSetResponsiveMode(_ => Mobile);
               }}>
               Icon.mobile
@@ -139,7 +139,7 @@ module TopPanel = {
                     }
               style=Styles.squareButton
               onClick={event => {
-                event->ReactEvent.Mouse.preventDefault;
+                event->React.Event.Mouse.preventDefault;
                 onRightSidebarToggle();
               }}>
               <div
@@ -170,11 +170,11 @@ module Link = {
       href
       onClick={event =>
         switch (
-          ReactEvent.Mouse.metaKey(event),
-          ReactEvent.Mouse.ctrlKey(event),
+          React.Event.Mouse.metaKey(event),
+          React.Event.Mouse.ctrlKey(event),
         ) {
         | (false, false) =>
-          ReactEvent.Mouse.preventDefault(event);
+          React.Event.Mouse.preventDefault(event);
           ReasonReactRouter.push(href);
         | _ => ()
         }
@@ -432,7 +432,7 @@ module DemoListSidebar = {
             )}
             title="Toggle default collapsed categories"
             onClick={event => {
-              event->ReactEvent.Mouse.preventDefault;
+              event->React.Event.Mouse.preventDefault;
               onToggleCollapsedCategoriesByDefault();
             }}>
             {if (isCategoriesCollapsedByDefault) {Icon.categoryCollapsed} else {
@@ -442,7 +442,7 @@ module DemoListSidebar = {
           <SearchInput
             value={filterValue->(Option.getWithDefault(""))}
             onChange={event => {
-              let value = event->ReactEvent.Form.target##value;
+              let value = event->React.Event.Form.target##value;
 
               setFilterValue(_ =>
                 if (value->Js.String2.trim == "") {
@@ -574,7 +574,7 @@ module DemoUnitSidebar = {
                       onChange={event =>
                         onStringChange(
                           propName,
-                          event->ReactEvent.Form.target##value,
+                          event->React.Event.Form.target##value,
                         )
                       }
                     />
@@ -582,7 +582,7 @@ module DemoUnitSidebar = {
                     <select
                       style=Styles.select
                       onChange={event => {
-                        let value = event->ReactEvent.Form.target##value;
+                        let value = event->React.Event.Form.target##value;
 
                         onStringChange(propName, value);
                       }}>
@@ -618,7 +618,7 @@ module DemoUnitSidebar = {
                    onChange={event =>
                      onIntChange(
                        propName,
-                       event->ReactEvent.Form.target##value->int_of_string,
+                       event->React.Event.Form.target##value->int_of_string,
                      )
                    }
                  />
@@ -640,7 +640,7 @@ module DemoUnitSidebar = {
                    onChange={event =>
                      onFloatChange(
                        propName,
-                       event->ReactEvent.Form.target##value->float_of_string,
+                       event->React.Event.Form.target##value->float_of_string,
                      )
                    }
                  />
@@ -660,7 +660,7 @@ module DemoUnitSidebar = {
                    onChange={event =>
                      onBoolChange(
                        propName,
-                       event->ReactEvent.Form.target##checked,
+                       event->React.Event.Form.target##checked,
                      )
                    }
                  />
@@ -920,7 +920,7 @@ module DemoUnitFrame = {
     <div name="DemoUnitFrame" style={container(responsiveMode)}>
       <iframe
         onLoad={event => {
-          let iframe = event->ReactEvent.Synthetic.target;
+          let iframe = event->React.Event.Synthetic.target;
           let window = iframe##contentWindow;
           onLoad(window);
         }}
diff --git a/yarn.lock b/yarn.lock
index 7cf1d6f..0568dba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1675,11 +1675,6 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
 object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
@@ -1859,22 +1854,20 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-pkg@^5.2.0:
   version "5.2.0"
@@ -2000,13 +1993,12 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"

From e3df3970b492ed37545bb5b2234559fef0449fcd Mon Sep 17 00:00:00 2001
From: Javier Chavarri <javier.chavarri@gmail.com>
Date: Tue, 7 Nov 2023 10:40:03 +0000
Subject: [PATCH 2/6] update to latest rr

---
 example/dune             | 1 +
 reshowcase.opam          | 4 ++--
 reshowcase.opam.template | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/example/dune b/example/dune
index c11f3c4..edad569 100644
--- a/example/dune
+++ b/example/dune
@@ -2,5 +2,6 @@
  (target example)
  (alias example)
  (libraries reshowcase reason-react)
+ (module_systems es6)
  (preprocess
   (pps melange.ppx reason-react-ppx)))
diff --git a/reshowcase.opam b/reshowcase.opam
index ca9eb49..0dd7aeb 100644
--- a/reshowcase.opam
+++ b/reshowcase.opam
@@ -42,6 +42,6 @@ depexts: [
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
 pin-depends: [
-  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
-  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
+  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8c" ]
+  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8cd" ]
 ]
diff --git a/reshowcase.opam.template b/reshowcase.opam.template
index fb2119a..8da5c99 100644
--- a/reshowcase.opam.template
+++ b/reshowcase.opam.template
@@ -5,6 +5,6 @@ depexts: [
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
 pin-depends: [
-  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
-  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#7ca984c9a406b01e906fda1898f705f135fad202" ]
+  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8c" ]
+  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8cd" ]
 ]

From e90550fc7cd7b3dc604b0303333f03729b77462c Mon Sep 17 00:00:00 2001
From: Javier Chavarri <javier.chavarri@gmail.com>
Date: Thu, 7 Dec 2023 14:25:04 +0000
Subject: [PATCH 3/6] support melange v3

---
 Makefile                 |   2 +-
 reshowcase.opam          |   5 +-
 reshowcase.opam.template |   5 +-
 src/Bindings.re          |   4 +-
 src/Demos.re             |   2 +-
 src/HighlightTerms.re    | 103 +++++++++++++++++++--------------------
 src/ReshowcaseUi.re      |  23 ++++-----
 src/dune                 |   2 +-
 8 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/Makefile b/Makefile
index 6309f10..342fba0 100644
--- a/Makefile
+++ b/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~rc1 -y --deps-only
 
 .PHONY: init
 init: create-switch install ## Configure everything to develop this repository in local
diff --git a/reshowcase.opam b/reshowcase.opam
index 0dd7aeb..0368f6c 100644
--- a/reshowcase.opam
+++ b/reshowcase.opam
@@ -42,6 +42,7 @@ depexts: [
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
 pin-depends: [
-  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8c" ]
-  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8cd" ]
+  ["melange.dev" "git+https://github.com/melange-re/melange#982cba971fa662439f0675465ef854424771ca3d"]
+  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
+  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
 ]
diff --git a/reshowcase.opam.template b/reshowcase.opam.template
index 8da5c99..2b83d64 100644
--- a/reshowcase.opam.template
+++ b/reshowcase.opam.template
@@ -5,6 +5,7 @@ depexts: [
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
 pin-depends: [
-  [ "reason-react.dev"      "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8c" ]
-  [ "reason-react-ppx.dev"  "git+https://github.com/reasonml/reason-react.git#6938d62b70c506eade2755d32f7c5f3aae005e8cd" ]
+  ["melange.dev" "git+https://github.com/melange-re/melange#982cba971fa662439f0675465ef854424771ca3d"]
+  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
+  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
 ]
diff --git a/src/Bindings.re b/src/Bindings.re
index b0387c3..3ca3322 100644
--- a/src/Bindings.re
+++ b/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;
   };
diff --git a/src/Demos.re b/src/Demos.re
index 3d07384..9818e3d 100644
--- a/src/Demos.re
+++ b/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"))
         )
       )
     ->(
diff --git a/src/HighlightTerms.re b/src/HighlightTerms.re
index f2e0827..9e10bc5 100644
--- a/src/HighlightTerms.re
+++ b/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,30 +17,29 @@ 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;
+             }
+           )
+         );
     };
   };
 
@@ -48,22 +47,24 @@ 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;
   };
diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re
index 229f726..41eaaa0 100644
--- a/src/ReshowcaseUi.re
+++ b/src/ReshowcaseUi.re
@@ -12,7 +12,7 @@ module Collapsible = Layout.Collapsible;
 module URLSearchParams = Bindings.URLSearchParams;
 module Window = Bindings.Window;
 module LocalStorage = Bindings.LocalStorage;
-module Array = Js.Array2;
+module Array = Js.Array;
 
 type responsiveMode =
   | Mobile
@@ -165,7 +165,8 @@ module Link = {
   let make = (~href, ~text: React.element, ~style=?, ~activeStyle=?) => {
     let url = ReasonReactRouter.useUrl();
     let path = String.concat("/", url.path);
-    let isActive = (path ++ "?" ++ url.search)->(Js.String2.endsWith(href));
+    let isActive =
+      Js.String.endsWith(~suffix=href, path ++ "?" ++ url.search);
     <a
       href
       onClick={event =>
@@ -299,7 +300,7 @@ module DemoListSidebar = {
       let demos = demos->Js.Dict.entries;
       demos
       ->(
-          Array.map(((entityName, entity)) => {
+          Array.map(~f=((entityName, entity)) => {
             let searchMatchingTerms =
               HighlightTerms.getMatchingTerms(~searchString, ~entityName);
 
@@ -307,7 +308,7 @@ module DemoListSidebar = {
               searchString == "" || searchMatchingTerms->Belt.Array.size > 0;
 
             switch (entity) {
-            | Demo(_) =>
+            | Entity.Demo(_) =>
               if (isEntityNameMatchSearch || parentCategoryMatchedSearch) {
                 <Link
                   key=entityName
@@ -445,7 +446,7 @@ module DemoListSidebar = {
               let value = event->React.Event.Form.target##value;
 
               setFilterValue(_ =>
-                if (value->Js.String2.trim == "") {
+                if (value->Js.String.trim == "") {
                   None;
                 } else {
                   Some(value);
@@ -460,7 +461,7 @@ module DemoListSidebar = {
         {renderMenu(
            ~isCategoriesCollapsedByDefault,
            ~searchString=
-             filterValue->(Option.mapWithDefault("", Js.String2.toLowerCase)),
+             filterValue->(Option.mapWithDefault("", Js.String.toLowerCase)),
            ~urlSearchParams,
            demos,
          )}
@@ -563,7 +564,7 @@ module DemoUnitSidebar = {
         {strings
          ->Map.String.toArray
          ->(
-             Array.map(((propName, (_config, value, options))) =>
+             Array.map(~f=((propName, (_config, value, options))) =>
                <PropBox key=propName propName>
                  {switch (options) {
                   | None =>
@@ -588,7 +589,7 @@ module DemoUnitSidebar = {
                       }}>
                       {options
                        ->(
-                           Array.map(((key, optionValue)) =>
+                           Array.map(~f=((key, optionValue)) =>
                              <option
                                key
                                selected={value == optionValue}
@@ -607,7 +608,7 @@ module DemoUnitSidebar = {
         {ints
          ->Map.String.toArray
          ->(
-             Array.map(((propName, ({min, max, _}, value))) =>
+             Array.map(~f=((propName, ({Configs.min, max, _}, value))) =>
                <PropBox key=propName propName>
                  <input
                    type_="number"
@@ -629,7 +630,7 @@ module DemoUnitSidebar = {
         {floats
          ->Map.String.toArray
          ->(
-             Array.map(((propName, ({min, max, _}, value))) =>
+             Array.map(~f=((propName, ({Configs.min, max, _}, value))) =>
                <PropBox key=propName propName>
                  <input
                    type_="number"
@@ -651,7 +652,7 @@ module DemoUnitSidebar = {
         {bools
          ->Map.String.toArray
          ->(
-             Array.map(((propName, (_config, checked))) =>
+             Array.map(~f=((propName, (_config, checked))) =>
                <PropBox key=propName propName>
                  <input
                    type_="checkbox"
diff --git a/src/dune b/src/dune
index 2b3e9d1..5fb2246 100644
--- a/src/dune
+++ b/src/dune
@@ -2,6 +2,6 @@
  (name reshowcase)
  (preprocess
   (pps melange.ppx reason-react-ppx))
- (libraries reason-react)
+ (libraries melange.belt reason-react)
  (public_name reshowcase)
  (modes melange))

From c3495c3f97793226cb7152e86dad514cf640ade7 Mon Sep 17 00:00:00 2001
From: Javier Chavarri <javier.chavarri@gmail.com>
Date: Thu, 18 Jan 2024 17:46:21 +0000
Subject: [PATCH 4/6] melange v3: fixes for latest changes

---
 example/Demo.re          |  2 +-
 reshowcase.opam          |  6 +++---
 reshowcase.opam.template |  6 +++---
 src/ReshowcaseUi.re      | 25 ++++++++++++-------------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/example/Demo.re b/example/Demo.re
index ce02f4a..03c9dfd 100644
--- a/example/Demo.re
+++ b/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}},
             (),
           )}>
diff --git a/reshowcase.opam b/reshowcase.opam
index 0368f6c..7feb54f 100644
--- a/reshowcase.opam
+++ b/reshowcase.opam
@@ -42,7 +42,7 @@ depexts: [
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
 pin-depends: [
-  ["melange.dev" "git+https://github.com/melange-re/melange#982cba971fa662439f0675465ef854424771ca3d"]
-  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
-  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
+  ["melange.dev" "git+https://github.com/melange-re/melange#d2715c469e8cf8bf8cff81b897c212094a9517c5"]
+  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
+  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
 ]
diff --git a/reshowcase.opam.template b/reshowcase.opam.template
index 2b83d64..8514fc6 100644
--- a/reshowcase.opam.template
+++ b/reshowcase.opam.template
@@ -5,7 +5,7 @@ depexts: [
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
 pin-depends: [
-  ["melange.dev" "git+https://github.com/melange-re/melange#982cba971fa662439f0675465ef854424771ca3d"]
-  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
-  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/f799ac03d79d39de04fe937075607c348f8053b4.tar.gz"]
+  ["melange.dev" "git+https://github.com/melange-re/melange#d2715c469e8cf8bf8cff81b897c212094a9517c5"]
+  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
+  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
 ]
diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re
index 41eaaa0..b579164 100644
--- a/src/ReshowcaseUi.re
+++ b/src/ReshowcaseUi.re
@@ -12,7 +12,6 @@ module Collapsible = Layout.Collapsible;
 module URLSearchParams = Bindings.URLSearchParams;
 module Window = Bindings.Window;
 module LocalStorage = Bindings.LocalStorage;
-module Array = Js.Array;
 
 type responsiveMode =
   | Mobile
@@ -300,7 +299,7 @@ module DemoListSidebar = {
       let demos = demos->Js.Dict.entries;
       demos
       ->(
-          Array.map(~f=((entityName, entity)) => {
+          Array.map(((entityName, entity)) => {
             let searchMatchingTerms =
               HighlightTerms.getMatchingTerms(~searchString, ~entityName);
 
@@ -564,7 +563,7 @@ module DemoUnitSidebar = {
         {strings
          ->Map.String.toArray
          ->(
-             Array.map(~f=((propName, (_config, value, options))) =>
+             Array.map(((propName, (_config, value, options))) =>
                <PropBox key=propName propName>
                  {switch (options) {
                   | None =>
@@ -589,7 +588,7 @@ module DemoUnitSidebar = {
                       }}>
                       {options
                        ->(
-                           Array.map(~f=((key, optionValue)) =>
+                           Array.map(((key, optionValue)) =>
                              <option
                                key
                                selected={value == optionValue}
@@ -608,13 +607,13 @@ module DemoUnitSidebar = {
         {ints
          ->Map.String.toArray
          ->(
-             Array.map(~f=((propName, ({Configs.min, max, _}, value))) =>
+             Array.map(((propName, ({Configs.min, max, _}, value))) =>
                <PropBox key=propName propName>
                  <input
                    type_="number"
-                   min={j|$min|j}
-                   max={j|$max|j}
-                   value={j|$value|j}
+                   min=string_of_int(min)
+                   max=string_of_int(max)
+                   value=string_of_int(value)
                    style=Styles.textInput
                    onChange={event =>
                      onIntChange(
@@ -630,13 +629,13 @@ module DemoUnitSidebar = {
         {floats
          ->Map.String.toArray
          ->(
-             Array.map(~f=((propName, ({Configs.min, max, _}, value))) =>
+             Array.map(((propName, ({Configs.min, max, _}, value))) =>
                <PropBox key=propName propName>
                  <input
                    type_="number"
-                   min={j|$min|j}
-                   max={j|$max|j}
-                   value={j|$value|j}
+                   min=string_of_float(min)
+                   max=string_of_float(max)
+                   value=string_of_float(value)
                    style=Styles.textInput
                    onChange={event =>
                      onFloatChange(
@@ -652,7 +651,7 @@ module DemoUnitSidebar = {
         {bools
          ->Map.String.toArray
          ->(
-             Array.map(~f=((propName, (_config, checked))) =>
+             Array.map(((propName, (_config, checked))) =>
                <PropBox key=propName propName>
                  <input
                    type_="checkbox"

From 73ba05d9e44c6e118d6542c41d203d5e9a7bde68 Mon Sep 17 00:00:00 2001
From: Denis Strelkov <denis.strelkov@ahrefs.com>
Date: Fri, 2 Aug 2024 14:13:01 +0700
Subject: [PATCH 5/6] Remove reason-react pin, install a regular ocaml version

---
 Makefile                 | 2 +-
 reshowcase.opam          | 2 --
 reshowcase.opam.template | 2 --
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/Makefile b/Makefile
index 342fba0..26dae21 100644
--- a/Makefile
+++ b/Makefile
@@ -13,7 +13,7 @@ help: ## Print this help message
 
 .PHONY: create-switch
 create-switch: ## Create opam switch
-	opam switch create . 5.1.1~rc1 -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
diff --git a/reshowcase.opam b/reshowcase.opam
index 7feb54f..60b9e22 100644
--- a/reshowcase.opam
+++ b/reshowcase.opam
@@ -43,6 +43,4 @@ depexts: [
 ]
 pin-depends: [
   ["melange.dev" "git+https://github.com/melange-re/melange#d2715c469e8cf8bf8cff81b897c212094a9517c5"]
-  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
-  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
 ]
diff --git a/reshowcase.opam.template b/reshowcase.opam.template
index 8514fc6..e563396 100644
--- a/reshowcase.opam.template
+++ b/reshowcase.opam.template
@@ -6,6 +6,4 @@ depexts: [
 ]
 pin-depends: [
   ["melange.dev" "git+https://github.com/melange-re/melange#d2715c469e8cf8bf8cff81b897c212094a9517c5"]
-  ["reason-react.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
-  ["reason-react-ppx.dev" "https://github.com/reasonml/reason-react/archive/1f084f4ecf380b2144809065e5935a41866eab3f.tar.gz"]
 ]

From 2d6f6d6ef154caebe047400ef9d9f8295001340d Mon Sep 17 00:00:00 2001
From: Denis Strelkov <denis.strelkov@ahrefs.com>
Date: Fri, 2 Aug 2024 14:46:10 +0700
Subject: [PATCH 6/6] Remove pin for melange

---
 dune-project             | 2 +-
 reshowcase.opam          | 3 ---
 reshowcase.opam.template | 3 ---
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/dune-project b/dune-project
index 4fb7fc4..aa30f7c 100644
--- a/dune-project
+++ b/dune-project
@@ -27,7 +27,7 @@
  (depends
   ocaml
   (melange
-   (>= 2.0.0))
+   (>= 3.0.0))
   (reason
    (>= 3.10.0))
   (reason-react
diff --git a/reshowcase.opam b/reshowcase.opam
index 60b9e22..f6b1e34 100644
--- a/reshowcase.opam
+++ b/reshowcase.opam
@@ -41,6 +41,3 @@ depexts: [
   ["webpack"] {npm-version = "^5.76.1"}
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
-pin-depends: [
-  ["melange.dev" "git+https://github.com/melange-re/melange#d2715c469e8cf8bf8cff81b897c212094a9517c5"]
-]
diff --git a/reshowcase.opam.template b/reshowcase.opam.template
index e563396..79106f0 100644
--- a/reshowcase.opam.template
+++ b/reshowcase.opam.template
@@ -4,6 +4,3 @@ depexts: [
   ["webpack"] {npm-version = "^5.76.1"}
   ["webpack-dev-server"] {npm-version = "^4.11.1"}
 ]
-pin-depends: [
-  ["melange.dev" "git+https://github.com/melange-re/melange#d2715c469e8cf8bf8cff81b897c212094a9517c5"]
-]