Embed FormData into ReactDOM

reasonml · Nov 18, 2024 · 2190bb9 · 2190bb9
1 parent 05d9f44
commit 2190bb9
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 60 deletions.
diff --git a/src/FormData.ml b/src/FormData.ml
diff --git a/src/ReactDOM.re b/src/ReactDOM.re
@@ -1,3 +1,45 @@
+module FormData = {
+  /* This file is embeded since https://github.com/melange-re/melange/pull/1153 gets merged */
+
+  type t;
+  type file;
+  type blob;
+  type entryValue;
+
+  [@mel.new] external make: unit => t = "FormData";
+  [@mel.send.pipe: t] external append: (string, string) => unit = "append";
+  [@mel.send.pipe: t] external delete: string => unit = "delete";
+  [@mel.send.pipe: t] external get: string => option(entryValue) = "get";
+  [@mel.send.pipe: t] external getAll: string => array(entryValue) = "getAll";
+  [@mel.send.pipe: t] external set: (string, string) => unit = "set";
+  [@mel.send.pipe: t] external has: string => bool = "has";
+  [@mel.send] external keys: t => Js.Iterator.t(string) = "keys";
+  [@mel.send] external values: t => Js.Iterator.t(entryValue) = "values";
+
+  [@mel.send.pipe: t]
+  external appendObject: (string, Js.t({..}), ~filename: string=?) => unit =
+    "append";
+
+  [@mel.send.pipe: t]
+  external appendBlob: (string, blob, ~filename: string=?) => unit = "append";
+
+  [@mel.send.pipe: t]
+  external appendFile: (string, file, ~filename: string=?) => unit = "append";
+
+  [@mel.send.pipe: t]
+  external setObject: (string, Js.t({..}), ~filename: string=?) => unit =
+    "set";
+
+  [@mel.send.pipe: t]
+  external setBlob: (string, blob, ~filename: string=?) => unit = "set";
+
+  [@mel.send.pipe: t]
+  external setFile: (string, file, ~filename: string=?) => unit = "set";
+
+  [@mel.send]
+  external entries: t => Js.Iterator.t((string, entryValue)) = "entries";
+};
+
 module Style = {
   type t;
 

diff --git a/src/ReactDOM.rei b/src/ReactDOM.rei
@@ -1,3 +1,45 @@
+module FormData: {
+  /* This file is embeded since https://github.com/melange-re/melange/pull/1153 gets merged */
+
+  type t;
+  type file;
+  type blob;
+  type entryValue;
+
+  [@mel.new] external make: unit => t = "FormData";
+  [@mel.send.pipe: t] external append: (string, string) => unit = "append";
+  [@mel.send.pipe: t] external delete: string => unit = "delete";
+  [@mel.send.pipe: t] external get: string => option(entryValue) = "get";
+  [@mel.send.pipe: t] external getAll: string => array(entryValue) = "getAll";
+  [@mel.send.pipe: t] external set: (string, string) => unit = "set";
+  [@mel.send.pipe: t] external has: string => bool = "has";
+  [@mel.send] external keys: t => Js.Iterator.t(string) = "keys";
+  [@mel.send] external values: t => Js.Iterator.t(entryValue) = "values";
+
+  [@mel.send.pipe: t]
+  external appendObject: (string, Js.t({..}), ~filename: string=?) => unit =
+    "append";
+
+  [@mel.send.pipe: t]
+  external appendBlob: (string, blob, ~filename: string=?) => unit = "append";
+
+  [@mel.send.pipe: t]
+  external appendFile: (string, file, ~filename: string=?) => unit = "append";
+
+  [@mel.send.pipe: t]
+  external setObject: (string, Js.t({..}), ~filename: string=?) => unit =
+    "set";
+
+  [@mel.send.pipe: t]
+  external setBlob: (string, blob, ~filename: string=?) => unit = "set";
+
+  [@mel.send.pipe: t]
+  external setFile: (string, file, ~filename: string=?) => unit = "set";
+
+  [@mel.send]
+  external entries: t => Js.Iterator.t((string, entryValue)) = "entries";
+};
+
 module Style: {
   type t;
 

diff --git a/src/dune b/src/dune
@@ -11,7 +11,6 @@
   ReactDOMTestUtils
   ReactTestRenderer
   ReasonReactRouter
-  FormData
   ReasonReactErrorBoundary)
  (preprocess
   (pps melange.ppx reason-react-ppx))

diff --git a/test/Form__test.re b/test/Form__test.re
@@ -29,11 +29,11 @@ module Thread = {
       );
 
     let formAction = formData => {
-      let formMessage = FormData.get("message", formData);
+      let formMessage = ReactDOM.FormData.get("message", formData);
       switch (formMessage) {
       | Some(entry) =>
-        switch (FormData.classify(entry)) {
-        | `String(text) =>
+        switch (Js.Types.classify(entry)) {
+        | JSString(text) =>
           addOptimisticMessage(text);
           switch (Js.Nullable.toOption(formRef.current)) {
           | Some(form) => reset(form)
@@ -78,12 +78,12 @@ module App = {
       React.useState(() => [{text: "¡Hola!", sending: false, key: 1}]);
 
     let sendMessage = formData => {
-      let formMessage = FormData.get("message", formData);
+      let formMessage = ReactDOM.FormData.get("message", formData);
       switch (formMessage) {
       | Some(message) =>
         let.await entry = deliverMessage(message);
-        switch (FormData.classify(entry)) {
-        | `String(text) =>
+        switch (Js.Types.classify(entry)) {
+        | JSString(text) =>
           let _ =
             setMessages(messages =>
               [{text, sending: true, key: 1}, ...messages]