support melange v3

ahrefs · Dec 7, 2023 · e90550f · e90550f
1 parent e3df397
commit e90550f
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 71 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   };
diff --git 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,15 +300,15 @@ module DemoListSidebar = {
       let demos = demos->Js.Dict.entries;
       demos
       ->(
-          Array.map(((entityName, entity)) => {
+          Array.map(~f=((entityName, entity)) => {
             let searchMatchingTerms =
               HighlightTerms.getMatchingTerms(~searchString, ~entityName);
 
             let isEntityNameMatchSearch =
               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
@@ -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))