Convert to ReScript

Author: alex35mil

bsconfig.json

@@ -17,7 +17,7 @@
     "rescript-logger"
   ],
   "bs-dev-dependencies": [
-    "re-classnames"
+    "rescript-classnames"
   ],
   "reason": {
     "react-jsx": 3

docs/01-GettingStartedGuide.md

@@ -21,15 +21,15 @@ In this guide, we will build simple flat list with draggable items.
 
 First, let's shape up a state. This is going to be an array of ints:
 
-```reason
-type item = int;
-type state = array(item);
+```rescript
+type item = int
+type state = array<item>
 ```
 
 To create components that handle all drag & drop business, we need to call `Dnd.Make()` functor:
 
-```reason
-module Items = Dnd.Make(Item, Container);
+```rescript
+module Items = Dnd.Make(Item, Container)
 ```
 
 This code wouldn't compile yet because we need to provide two modules to the `Dnd.Make` functor:
@@ -39,10 +39,10 @@ This code wouldn't compile yet because we need to provide two modules to the `Dn
 
 Both of these modules has the same signature:
 
-```reason
-type t;
-let eq: (t, t) => bool;
-let cmp: (t, t) => int;
+```rescript
+type t
+let eq: (t, t) => bool
+let cmp: (t, t) => int
 ```
 
 Basically, functor asks you to answer the following questions:
@@ -52,35 +52,35 @@ Basically, functor asks you to answer the following questions:
 
 Let's start with very simple (and in general not 100% safe) implementation of `Item` container:
 
-```reason
+```rescript
 module Item = {
-  type t = item; // `item` is a type alias we defined above which is resolved to `int`
-  let eq = (x1, x2) => x1 == x2; // or more concise: let eq = (==);
-  let cmp = compare; // default comparator from Pervasives module
+  type t = item                  // `item` is a type alias we defined above which is resolved to `int`
+  let eq = (x1, x2) => x1 == x2  // or more concise: let eq = (==)
+  let cmp = compare              // default comparator from Pervasives module
 }
 ```
 
 Regarding `Container` type, there is no specific entity in the app domain which can be associated with this single abstract box that holds our flat list of items in UI. So we need to keep its configuration abstract, e.g.:
 
-```reason
+```rescript
 module Container = {
-  type t; // abstract type
-  external id: unit => t = "%identity"; // `Container.id()` would produce value of abstract type `t`
-  let eq = (_, _) => true; // since `Container` is singleton, it's always equal to self
-  let cmp = (_, _) => 0; // same logic applies
+  type t                                // abstract type
+  external id: unit => t = "%identity"  // `Container.id()` would produce value of abstract type `t`
+  let eq = (_, _) => true               // since `Container` is singleton, it's always equal to self
+  let cmp = (_, _) => 0                 // same logic applies
 }
 ```
 
 For convenience, `re-dnd` exposes functor which would create such singleton for you, so you don't have to type this boilerplate yourself:
 
-```reason
-module Container = Dnd.MakeSingletonContainer();
+```rescript
+module Container = Dnd.MakeSingletonContainer()
 ```
 
 Now, when we have complete configuration defined, we can create module which holds React components:
 
-```reason
-module Items = Dnd.Make(Item, Container);
+```rescript
+module Items = Dnd.Make(Item, Container)
 ```
 
 Module `Items` holds 3 components (each link below leads to component's api):
@@ -90,52 +90,48 @@ Module `Items` holds 3 components (each link below leads to component's api):
 
 Let's render those:
 
-```reason
-let (state, dispatch) = reducer->React.useReducer(initialState);
+```rescript
+let (state, dispatch) = reducer->React.useReducer(initialState)
 
 <Items.DndManager onReorder={result => ReorderItems(result)->dispatch}>
   <Items.DroppableContainer id={Container.id()} axis=Y>
     {state
-     ->Array.mapWithIndex((index, item) => {
-         <Items.DraggableItem
-           id={item}
-           key={item->Int.toString}
-           containerId={Container.id()}
-           index>
-           {`Children(item->Int.toString->React.string)}
-         </Items.DraggableItem>;
-       })
-     ->React.array}
+    ->Array.mapWithIndex((index, item) =>
+      <Items.DraggableItem
+        id=item key={item->Int.toString} containerId={Container.id()} index>
+        #Children(item->Int.toString->React.string)
+      </Items.DraggableItem>
+    )
+    ->React.array}
   </Items.DroppableContainer>
-</Items.DndManager>;
+</Items.DndManager>
 ```
 
 Even though render tree looks good, to finish this component we still need to implement handler that would persist result of reordering when item gets dropped.
 
 This is how corresponding `action` constructor type looks like:
 
-```reason
-type action =
-  | ReorderItems(Dnd.result(Item.t, Container.t));
+```rescript
+type action = ReorderItems(Dnd.result<Item.t, Container.t>)
 ```
 
 What `Dnd.result` type is?
 
-```reason
-type result('item, 'container) = option(reorderResult('item, 'container))
+```rescript
+type rec result<'item, 'container> = option<reorderResult<'item, 'container>>
 
-and reorderResult('item, 'container) =
-  | SameContainer('item, placement('item))
-  | NewContainer('item, 'container, placement('item))
+and reorderResult<'item, 'container> =
+  | SameContainer('item, placement<'item>)
+  | NewContainer('item, 'container, placement<'item>)
 
-and placement('item) =
+and placement<'item> =
   | Before('item)
-  | Last;
+  | Last
 ```
 
 Let's break down possible cases:
 
-```reason
+```rescript
 | ReorderItems(None) =>
   // `None` means nothing has changed:
   // either user dropped the item on the same position
@@ -161,91 +157,85 @@ Let's break down possible cases:
 
 So with this in mind, let's implement reducer for our case:
 
-```reason
-let reducer = (state, action) => switch (action) {
-| ReorderItems(Some(SameContainer(item, placement))) =>
-  // Item has landed in the new position of the same container,
-  // so it should be reinserted from the old position
-  // in the array into the new one.
-  // `ArrayExt.reinsert` is a helper which does just this.
-  state->ArrayExt.reinsert(
-    ~value=item,
-    ~place=
-      switch (placement) {
-      | Before(id) => `Before(id)
-      | Last => `Last
+```rescript
+let reducer = (state, action) =>
+  switch action {
+  | ReorderItems(Some(SameContainer(item, placement))) =>
+    // Item has landed in the new position of the same container,
+    // so it should be reinserted from the old position
+    // in the array into the new one.
+    // `ArrayExt.reinsert` is a helper which does just this.
+    state->ArrayExt.reinsert(
+      ~value=item,
+      ~place=switch placement {
+      | Before(id) => #Before(id)
+      | Last => #Last
       },
-  )
+    )
 
-// not possible since we have only one container
-| ReorderItems(Some(NewContainer(_)))
-| ReorderItems(None) => state
-}
+  // not possible since we have only one container
+  | ReorderItems(Some(NewContainer(_)))
+  | ReorderItems(None) => state
+  }
 ```
 
 > `ArrayExt.reinsert` is not a part of the public API since usually in a real-world app reordering is handled differently. If you want to inspect it or use it in your own code, you can find its definition in the [examples](../examples/libs/ArrayExt.re).
 
 Looks like we have everything in place. This is how the final module looks like:
 
-```reason
-type item = int;
+```rescript
+type item = int
 
 module Item = {
-  type t = item;
-  let eq = (x1, x2) => x1 == x2;
-  let cmp = compare;
-};
+  type t = item
+  let eq = (x1, x2) => x1 == x2
+  let cmp = compare
+}
 
-module Container =
-  Dnd.MakeSingletonContainer({});
+module Container = Dnd.MakeSingletonContainer()
 
-module Items = Dnd.Make(Item, Container);
+module Items = Dnd.Make(Item, Container)
 
-type state = array(item);
+type state = array<item>
 
-type action =
-  | ReorderItems(Dnd.result(Item.t, Container.t));
+type action = ReorderItems(Dnd.result<Item.t, Container.t>)
 
 let reducer = (state, action) =>
-  switch (action) {
+  switch action {
   | ReorderItems(Some(SameContainer(item, placement))) =>
     state->ArrayExt.reinsert(
       ~value=item,
-      ~place=
-        switch (placement) {
-        | Before(id) => `Before(id)
-        | Last => `Last
-        },
+      ~place=switch placement {
+      | Before(id) => #Before(id)
+      | Last => #Last
+      },
     )
   | ReorderItems(Some(NewContainer(_)))
   | ReorderItems(None) => state
-  };
+  }
 
-let initialState = [|1, 2, 3, 4, 5, 6, 7|];
+let initialState = [1, 2, 3, 4, 5, 6, 7]
 
-[@react.component]
+@react.component
 let make = () => {
-  let (state, dispatch) = reducer->React.useReducer(initialState);
+  let (state, dispatch) = reducer->React.useReducer(initialState)
 
   <Items.DndManager onReorder={result => ReorderItems(result)->dispatch}>
     <Items.DroppableContainer id={Container.id()} axis=Y>
       {state
-       ->Array.mapWithIndex((index, item) =>
-           <Items.DraggableItem
-             id=item
-             key={item->Int.toString}
-             containerId={Container.id()}
-             index>
-             {`Children(item->Int.toString->React.string)}
-           </Items.DraggableItem>
-         )
-       ->React.array}
+      ->Array.mapWithIndex((index, item) =>
+        <Items.DraggableItem
+          id=item key={item->Int.toString} containerId={Container.id()} index>
+          #Children(item->Int.toString->React.string)
+        </Items.DraggableItem>
+      )
+      ->React.array}
     </Items.DroppableContainer>
-  </Items.DndManager>;
-};
+  </Items.DndManager>
+}
 ```
 
-_Source code of the final module for this guide: [`GettingStartedGuide.re`](../examples/guides/GettingStartedGuide.re)_
+_Source code of the final module for this guide: [`GettingStartedGuide.res`](../examples/guides/GettingStartedGuide.res)_
 
 ---
 This guide gives base overview of how `re-dnd` works. To find out more about how to make it safer and how to deal with multiple containers—proceed to the [next guide](./02-SaferIdentifiersAndMultipleContainersGuide.md).