feat(value): Use Js.Json.t consistently and provide some convenient (…

…yet unsafe) helpers
scoville · Aug 17, 2021 · 4021c48 · 4021c48
1 parent 7e2255d
commit 4021c48
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 15 deletions.
diff --git a/example/Example.res b/example/Example.res
@@ -49,8 +49,18 @@ module Form = {
         rules={Rules.make(
           ~required=true,
           ~validate=Js.Dict.fromArray([
-            ("validEmail", Validation.sync(value => value->String.contains('@'))),
-            ("validLength", Validation.sync(value => value->String.length >= 8)),
+            (
+              "validEmail",
+              Validation.sync(value =>
+                value->ReCode.Decode.string->Belt.Result.getWithDefault("")->String.contains('@')
+              ),
+            ),
+            (
+              "validLength",
+              Validation.sync(value =>
+                value->ReCode.Decode.string->Belt.Result.getWithDefault("")->String.length >= 8
+              ),
+            ),
           ]),
           (),
         )}
@@ -62,7 +72,7 @@ module Form = {
               onBlur={_event => onBlur()}
               onChange={event => onChange(Controller.OnChangeArg.event(event))}
               ref
-              value
+              value={value->ReCode.Decode.string->Belt.Result.getWithDefault("")}
             />
             <span>
               {errors
@@ -91,7 +101,7 @@ module Form = {
               onBlur={_event => onBlur()}
               onChange={event => onChange(Controller.OnChangeArg.event(event))}
               ref
-              value
+              value={value->ReCode.Decode.string->Belt.Result.getWithDefault("")}
             />
             <ErrorMessage errors name message={"Required"->React.string} />
           </div>}
@@ -108,16 +118,20 @@ module Form = {
               onBlur={_event => onBlur()}
               onChange={event => onChange(Controller.OnChangeArg.event(event))}
               ref
-              value
+              value={value->ReCode.Decode.string->Belt.Result.getWithDefault("")}
             />
             <button
               type_="button"
               onClick={_event =>
                 onChange(
                   Controller.OnChangeArg.value(
-                    Js.Json.string(
-                      value->Js.String2.split("")->Js.Array2.reverseInPlace->Js.Array2.joinWith(""),
-                    ),
+                    value
+                    ->ReCode.Decode.string
+                    ->Belt.Result.getWithDefault("")
+                    ->Js.String2.split("")
+                    ->Js.Array2.reverseInPlace
+                    ->Js.Array2.joinWith("")
+                    ->ReCode.Encode.string,
                   ),
                 )}>
               {"Reverse"->React.string}
@@ -136,7 +150,7 @@ module Form = {
               onBlur={_event => onBlur()}
               onChange={event => onChange(Controller.OnChangeArg.event(event))}
               ref
-              value
+              value={value->ReCode.Decode.string->Belt.Result.getWithDefault("")}
               type_="checkbox"
             />
           </div>
@@ -159,7 +173,8 @@ module Form = {
                       onBlur={_event => onBlur()}
                       onChange={event => onChange(Controller.OnChangeArg.event(event))}
                       ref
-                      value
+                      // Let's be unsafe here!
+                      value={Unsafe.valueToString(value)}
                     />
                     <ErrorMessage errors name message={"Required"->React.string} />
                     <button

diff --git a/src/Controller.res b/src/Controller.res
@@ -29,9 +29,7 @@ type field = {
   onBlur: unit => unit,
   onChange: OnChangeArg.t => unit,
   ref: ReactDOM.domRef,
-  // This is not correct, the value can be a bool or an int
-  // The value should be considered opaque and never access directly
-  value: string,
+  value: Js.Json.t,
 }
 
 @ocaml.doc(

diff --git a/src/Unsafe.res b/src/Unsafe.res
@@ -13,3 +13,26 @@ to improve performances or quickly get the value out of a form.
 
 Use it with care.")
 external anyToJson: 'a => Js.Json.t = "%identity"
+
+@ocaml.doc("Can be useful when you want to pass the `value` argument received
+from a Controller's render function to a native input.
+
+Notice that such values can actually be of any (serializable) type so use with care.
+
+Example:
+
+```
+<Controller
+  render={({field: {value}}) =>
+    <input value={Unsafe.valueToString(value)} />
+  }
+/>
+```
+")
+external valueToString: Js.Json.t => string = "%identity"
+
+@ocaml.doc("Can be useful when you want to pass the `value` argument received
+from a Controller's render function to a native checkbox.
+
+Notice that such values can actually be of any (serializable) type so use with care.")
+external valueToBool: Js.Json.t => bool = "%identity"
diff --git a/src/Validation.resi b/src/Validation.resi
@@ -3,7 +3,7 @@
 type rec t
 
 @ocaml.doc("Synchronous validation")
-let sync: (string => bool) => t
+let sync: (Js.Json.t => bool) => t
 
 @ocaml.doc("Asynchronous validation")
-let async: (string => Js.Promise.t<bool>) => t
+let async: (Js.Json.t => Js.Promise.t<bool>) => t