diff --git a/src/React.re b/src/React.re index ba02b4222..431b7a05a 100644 --- a/src/React.re +++ b/src/React.re @@ -887,14 +887,16 @@ external useDebugValue: ('value, ~format: 'value => string=?, unit) => unit = module Experimental = { /* This module is used to bind to APIs for future versions of React. There is no guarantee of backwards compatibility or stability. */ + /* https://react.dev/reference/react/use */ [@mel.module "react"] external usePromise: Js.Promise.t('a) => 'a = "use"; [@mel.module "react"] external useContext: Context.t('a) => 'a = "use"; + /* https://react.dev/reference/react/useTransition */ [@mel.module "react"] external useTransitionAsync: unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) = "useTransition"; - /* https://es.react.dev/reference/react/useOptimistic */ + /* https://react.dev/reference/react/useOptimistic */ [@mel.module "react"] external useOptimistic: ('state, ('state, 'optimisticValue) => 'state) => diff --git a/src/ReactDOMTestUtils.re b/src/ReactDOMTestUtils.re index 0c841bf0e..24dafbff3 100644 --- a/src/ReactDOMTestUtils.re +++ b/src/ReactDOMTestUtils.re @@ -2,39 +2,32 @@ type undefined = Js.undefined(unit); let undefined: undefined = Js.Undefined.empty; -[@deprecated "use React.act instead"] [@mel.module "react"] +[@mel.module "react"] external reactAct: ((. unit) => undefined) => unit = "act"; [@deprecated "use React.act instead"] let act: (unit => unit) => unit = - [@alert "-deprecated"] - ( - func => { - let reactFunc = - (.) => { - func(); - undefined; - }; - reactAct(reactFunc); - } - ); - -[@deprecated "use React.actAsync instead"] [@mel.module "react"] + func => { + let reactFunc = + (.) => { + func(); + undefined; + }; + reactAct(reactFunc); + }; + +[@mel.module "react"] external reactActAsync: ((. unit) => Js.Promise.t('a)) => Js.Promise.t(unit) = "act"; [@deprecated "use React.actAsync instead"] -let actAsync = - [@alert "-deprecated"] - ( - func => { - let reactFunc = - (.) => { - func(); - }; - reactActAsync(reactFunc); - } - ); +let actAsync = func => { + let reactFunc = + (.) => { + func(); + }; + reactActAsync(reactFunc); +}; [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." @@ -97,49 +90,49 @@ module Simulate = { [@mel.scope "Simulate"] external blur: Dom.element => unit = "blur"; + [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + external changeWithEvent: (Dom.element, 'event) => unit = "change"; + [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." ] - [@mel.module "react-dom/test-utils"] - [@mel.scope "Simulate"] - external changeWithEvent: (Dom.element, 'event) => unit = "change"; + let changeWithValue = (element, value) => { + let event = { + "target": { + "value": value, + }, + }; + changeWithEvent(element, event); + }; [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." ] - let changeWithValue = - [@alert "-deprecated"] - ( - (element, value) => { - let event = { - "target": { - "value": value, - }, - }; - changeWithEvent(element, event); - } - ); - + let changeWithChecked = (element, value) => { + let event = { + "target": { + "checked": value, + }, + }; + changeWithEvent(element, event); + }; [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." ] - let changeWithChecked = - [@alert "-deprecated"] - ( - (element, value) => { - let event = { - "target": { - "checked": value, - }, - }; - changeWithEvent(element, event); - } - ); - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external canPlay: Dom.element => unit = "canPlay"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external timeUpdate: Dom.element => unit = "timeUpdate"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external ended: Dom.element => unit = "ended"; [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] external focus: Dom.element => unit = "focus"; @@ -147,65 +140,33 @@ module Simulate = { external document: Dom.document = "document"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] -[@mel.return nullable] -[@mel.send] +[@mel.return nullable] [@mel.send] external querySelector: (Dom.element, string) => option(Dom.element) = "querySelector"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] [@mel.send] external querySelectorAll: (Dom.element, string) => Js.Array.array_like(Dom.element) = "querySelectorAll"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] -[@mel.get] -external textContent: Dom.element => string = "textContent"; +[@mel.get] external textContent: Dom.element => string = "textContent"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] -[@mel.return nullable] -[@mel.get] +[@mel.return nullable] [@mel.get] external body: Dom.document => option(Dom.element) = "body"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] [@mel.send] external createElement: (Dom.document, string) => Dom.element = "createElement"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] -[@mel.send] -external remove: Dom.element => unit = "remove"; +[@mel.send] external remove: Dom.element => unit = "remove"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] [@mel.send] external appendChild: (Dom.element, Dom.element) => Dom.element = "appendChild"; -[@deprecated - "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." -] -let querySelectorAll = - [@alert "-deprecated"] - ( - (element, string) => { - Js.Array.from(querySelectorAll(element, string)); - } - ); +let querySelectorAll = (element, string) => { + Js.Array.from(querySelectorAll(element, string)); +}; module DOM = { [@deprecated @@ -218,9 +179,8 @@ module DOM = { [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." ] - let findBySelector = - [@alert "-deprecated"] - ((element, selector) => querySelector(element, selector)); + let findBySelector = (element, selector) => + querySelector(element, selector); [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." @@ -231,56 +191,37 @@ module DOM = { [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." ] - let findBySelectorAndTextContent = - [@alert "-deprecated"] - ( - (element, selector, content) => - querySelectorAll(element, selector) - |> Array.find_opt(node => node->textContent === content) - ); + let findBySelectorAndTextContent = (element, selector, content) => + querySelectorAll(element, selector) + |> Array.find_opt(node => node->textContent === content); [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." ] - let findBySelectorAndPartialTextContent = - [@alert "-deprecated"] - ( - (element, selector, content) => - querySelectorAll(element, selector) - |> Array.find_opt(node => - Js.String.includes(~search=content, node->textContent) - ) - ); + let findBySelectorAndPartialTextContent = (element, selector, content) => + querySelectorAll(element, selector) + |> Array.find_opt(node => + Js.String.includes(~search=content, node->textContent) + ); }; [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." ] -let prepareContainer = - [@alert "-deprecated"] - ( - (container: ref(option(Dom.element)), ()) => { - let containerElement = document->createElement("div"); - let _: option(_) = - Option.map( - body => body->appendChild(containerElement), - document->body, - ); - container := Some(containerElement); - } - ); +let prepareContainer = (container: ref(option(Dom.element)), ()) => { + let containerElement = document->createElement("div"); + let _: option(_) = + Option.map(body => body->appendChild(containerElement), document->body); + container := Some(containerElement); +}; [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." ] -let cleanupContainer = - [@alert "-deprecated"] - ( - (container: ref(option(Dom.element)), ()) => { - let _: option(_) = Option.map(remove, container^); - container := None; - } - ); +let cleanupContainer = (container: ref(option(Dom.element)), ()) => { + let _: option(_) = Option.map(remove, container^); + container := None; +}; [@deprecated "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." diff --git a/src/ReactDOMTestUtils.rei b/src/ReactDOMTestUtils.rei index 5f67f3345..bfab45e81 100644 --- a/src/ReactDOMTestUtils.rei +++ b/src/ReactDOMTestUtils.rei @@ -1,60 +1,145 @@ -let act: (unit => unit) => unit; +let act: [@deprecated "use React.act instead"] ((unit => unit) => unit); -let actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit); +let actAsync: + [@deprecated "use React.actAsync instead"] ( + (unit => Js.Promise.t('a)) => Js.Promise.t(unit) + ); [@mel.module "react-dom/test-utils"] +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] external isElement: 'element => bool = "isElement"; [@mel.module "react-dom/test-utils"] +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] external isElementOfType: ('element, React.component('props)) => bool = "isElementOfType"; [@mel.module "react-dom/test-utils"] +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] external isDOMComponent: 'element => bool = "isDOMComponent"; [@mel.module "react-dom/test-utils"] +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] external isCompositeComponent: 'element => bool = "isCompositeComponent"; +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] [@mel.module "react-dom/test-utils"] external isCompositeComponentWithType: ('element, React.component('props)) => bool = "isCompositeComponentWithType"; module Simulate: { - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external click: Dom.element => unit = "click"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external clickWithEvent: (Dom.element, 'event) => unit = "click"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external change: Dom.element => unit = "change"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external blur: Dom.element => unit = "blur"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external changeWithEvent: (Dom.element, 'event) => unit = "change"; let changeWithValue: (Dom.element, string) => unit; let changeWithChecked: (Dom.element, bool) => unit; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external canPlay: Dom.element => unit = "canPlay"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external timeUpdate: Dom.element => unit = "timeUpdate"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external ended: Dom.element => unit = "ended"; - [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." + ] + [@mel.module "react-dom/test-utils"] + [@mel.scope "Simulate"] external focus: Dom.element => unit = "focus"; }; module DOM: { - [@mel.return nullable] [@mel.get] + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." + ] + [@mel.return nullable] + [@mel.get] external value: Dom.element => option(string) = "value"; - let findBySelector: (Dom.element, string) => option(Dom.element); - let findByAllSelector: (Dom.element, string) => array(Dom.element); + let findBySelector: + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." + ] ( + (Dom.element, string) => option(Dom.element) + ); + let findByAllSelector: + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." + ] ( + (Dom.element, string) => array(Dom.element) + ); let findBySelectorAndTextContent: - (Dom.element, string, string) => option(Dom.element); + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." + ] ( + (Dom.element, string, string) => option(Dom.element) + ); let findBySelectorAndPartialTextContent: - (Dom.element, string, string) => option(Dom.element); + [@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-webapi instead." + ] ( + (Dom.element, string, string) => option(Dom.element) + ); }; +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] let prepareContainer: (Stdlib.ref(option(Dom.element)), unit) => unit; +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] let cleanupContainer: (Stdlib.ref(option(Dom.element)), unit) => unit; +[@deprecated + "ReactDOMTestUtils is deprecated, and will be removed in next version. Please use melange-testing-library instead." +] let getContainer: Stdlib.ref(option(Dom.element)) => Dom.element; diff --git a/test/Form__test.re b/test/Form__test.re index 85593047b..123f47ad7 100644 --- a/test/Form__test.re +++ b/test/Form__test.re @@ -1,3 +1,5 @@ +[@alert "-deprecated"]; + open Jest; open Jest.Expect; open ReactDOMTestUtils; @@ -25,7 +27,11 @@ module Thread = { let (optimisticMessages, addOptimisticMessage) = React.Experimental.useOptimistic(messages, (state, newMessage) => [ - {text: newMessage, sending: true, key: List.length(state) + 1}, + { + text: newMessage, + sending: true, + key: List.length(state) + 1, + }, ...state, ] ); @@ -84,7 +90,15 @@ module App = { [@react.component] let make = () => { let (messages, setMessages) = - React.useState(() => [{text: "¡Hola!", sending: false, key: 1}]); + React.useState(() => + [ + { + text: "¡Hola!", + sending: false, + key: 1, + }, + ] + ); let sendMessage = formData => { let formMessage = FormData.get("message", formData); @@ -95,7 +109,14 @@ module App = { | JSString(text) => let _ = setMessages(messages => - [{text, sending: true, key: 1}, ...messages] + [ + { + text, + sending: true, + key: 1, + }, + ...messages, + ] ); Js.Promise.resolve(); | _ => Js.Promise.resolve() diff --git a/test/Hooks__test.re b/test/Hooks__test.re index 9e8ff3dfe..41a5e1fed 100644 --- a/test/Hooks__test.re +++ b/test/Hooks__test.re @@ -1,3 +1,5 @@ +[@alert "-deprecated"]; + open Jest; open Jest.Expect; open ReactDOMTestUtils; @@ -47,7 +49,11 @@ let store = (initialState: 'a) => { }; }; - {getState, setState, subscribe}; + { + getState, + setState, + subscribe, + }; }; module DummyStatefulComponent = { diff --git a/test/React__test.re b/test/React__test.re index bfa76985e..1866e07e2 100644 --- a/test/React__test.re +++ b/test/React__test.re @@ -1,3 +1,5 @@ +[@alert "-deprecated"]; + open Jest; open Jest.Expect; open ReactDOMTestUtils; @@ -24,7 +26,10 @@ module DummyComponentThatMapsChildren = { {children->React.Children.mapWithIndex((element, index) => { React.cloneElement( element, - {"key": string_of_int(index), "data-index": index}, + { + "key": string_of_int(index), + "data-index": index, + }, ) })} ; @@ -318,7 +323,10 @@ describe("React", () => { act(() => { ReactDOM.Client.render( root, - render({name: "Joe", imageUrl: "https://foo.png"}), + render({ + name: "Joe", + imageUrl: "https://foo.png", + }), ) });