refactor: use EffectFn

Author: srghma

Diff for: src/React/Basic/DOM.js

@@ -1,23 +1,10 @@
-import * as ReactDOM from 'react-dom';
-
-export function renderThen(jsx) {
-  return (node) => (callback) => () =>
-    ReactDOM.render(jsx, node, callback);
-}
-
-export function hydrateThen(jsx) {
-  return (node) => (callback) => () =>
-    ReactDOM.hydrate(jsx, node, callback);
-}
-
-export function unmount(node) {
-  return () => ReactDOM.unmountComponentAtNode(node);
-}
-
-export function createPortal(jsx) {
-  return (node) => ReactDOM.createPortal(jsx, node);
-}
-
-export function flushSync(callback) {
-  return () => ReactDOM.flushSync(callback);
-}
+import ReactDOM from "react-dom";
+
+// eslint-disable-next-line react/no-deprecated
+export const renderThenFn = ReactDOM.render;
+// eslint-disable-next-line react/no-deprecated
+export const hydrateThenFn = ReactDOM.hydrate;
+// eslint-disable-next-line react/no-deprecated
+export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
+export const createPortalFn = ReactDOM.createPortal;
+export const flushSyncFn = ReactDOM.flushSync;

Diff for: src/React/Basic/DOM.purs

@@ -19,7 +19,9 @@ module React.Basic.DOM
 
 import Prelude
 
+import Data.Function.Uncurried (Fn2, runFn2)
 import Effect (Effect)
+import Effect.Uncurried (EffectFn1, runEffectFn1, EffectFn3, runEffectFn3)
 import Prim.TypeError (class Warn, Text)
 import React.Basic (JSX)
 import React.Basic.DOM.Generated (Props_a, Props_abbr, Props_address, Props_area, Props_article, Props_aside, Props_audio, Props_b, Props_base, Props_bdi, Props_bdo, Props_blockquote, Props_body, Props_br, Props_button, Props_canvas, Props_caption, Props_cite, Props_code, Props_col, Props_colgroup, Props_data, Props_datalist, Props_dd, Props_del, Props_details, Props_dfn, Props_dialog, Props_div, Props_dl, Props_dt, Props_em, Props_embed, Props_fieldset, Props_figcaption, Props_figure, Props_footer, Props_form, Props_h1, Props_h2, Props_h3, Props_h4, Props_h5, Props_h6, Props_head, Props_header, Props_hgroup, Props_hr, Props_html, Props_i, Props_iframe, Props_img, Props_input, Props_ins, Props_kbd, Props_keygen, Props_label, Props_legend, Props_li, Props_link, Props_main, Props_map, Props_mark, Props_math, Props_menu, Props_menuitem, Props_meta, Props_meter, Props_nav, Props_noscript, Props_object, Props_ol, Props_optgroup, Props_option, Props_output, Props_p, Props_param, Props_picture, Props_pre, Props_progress, Props_q, Props_rb, Props_rp, Props_rt, Props_rtc, Props_ruby, Props_s, Props_samp, Props_script, Props_section, Props_select, Props_slot, Props_small, Props_source, Props_span, Props_strong, Props_style, Props_sub, Props_summary, Props_sup, Props_table, Props_tbody, Props_td, Props_template, Props_textarea, Props_tfoot, Props_th, Props_thead, Props_time, Props_title, Props_tr, Props_track, Props_u, Props_ul, Props_var, Props_video, Props_wbr, a, a', a_, abbr, abbr', abbr_, address, address', address_, area, area', article, article', article_, aside, aside', aside_, audio, audio', audio_, b, b', b_, base, base', bdi, bdi', bdi_, bdo, bdo', bdo_, blockquote, blockquote', blockquote_, body, body', body_, br, br', button, button', button_, canvas, canvas', canvas_, caption, caption', caption_, cite, cite', cite_, code, code', code_, col, col', colgroup, colgroup', colgroup_, data', data'', data_, datalist, datalist', datalist_, dd, dd', dd_, del, del', del_, details, details', details_, dfn, dfn', dfn_, dialog, dialog', dialog_, div, div', div_, dl, dl', dl_, dt, dt', dt_, em, em', em_, embed, embed', fieldset, fieldset', fieldset_, figcaption, figcaption', figcaption_, figure, figure', figure_, footer, footer', footer_, form, form', form_, h1, h1', h1_, h2, h2', h2_, h3, h3', h3_, h4, h4', h4_, h5, h5', h5_, h6, h6', h6_, head, head', head_, header, header', header_, hgroup, hgroup', hgroup_, hr, hr', html, html', html_, i, i', i_, iframe, iframe', iframe_, img, img', input, input', ins, ins', ins_, kbd, kbd', kbd_, keygen, keygen', keygen_, label, label', label_, legend, legend', legend_, li, li', li_, link, link', main, main', main_, map, map', map_, mark, mark', mark_, math, math', math_, menu, menu', menu_, menuitem, menuitem', menuitem_, meta, meta', meter, meter', meter_, nav, nav', nav_, noscript, noscript', noscript_, object, object', object_, ol, ol', ol_, optgroup, optgroup', optgroup_, option, option', option_, output, output', output_, p, p', p_, param, param', picture, picture', picture_, pre, pre', pre_, progress, progress', progress_, q, q', q_, rb, rb', rb_, rp, rp', rp_, rt, rt', rt_, rtc, rtc', rtc_, ruby, ruby', ruby_, s, s', s_, samp, samp', samp_, script, script', script_, section, section', section_, select, select', select_, slot, slot', slot_, small, small', small_, source, source', span, span', span_, strong, strong', strong_, style, style', style_, sub, sub', sub_, summary, summary', summary_, sup, sup', sup_, table, table', table_, tbody, tbody', tbody_, td, td', td_, template, template', template_, textarea, textarea', textarea_, tfoot, tfoot', tfoot_, th, th', th_, thead, thead', thead_, time, time', time_, title, title', title_, tr, tr', tr_, track, track', u, u', u_, ul, ul', ul_, var, var', var_, video, video', video_, wbr, wbr') as Generated
@@ -50,9 +52,9 @@ render'
   -> Element
   -> Effect Unit
   -> Effect Unit
-render' = renderThen
+render' = runEffectFn3 renderThenFn
 
-foreign import renderThen :: JSX -> Element -> Effect Unit -> Effect Unit
+foreign import renderThenFn :: EffectFn3 JSX Element (Effect Unit) Unit
 
 -- | Render or update/re-render a component tree into
 -- | a DOM element, attempting to reuse the existing
@@ -82,22 +84,28 @@ hydrate'
   -> Element
   -> Effect Unit
   -> Effect Unit
-hydrate' = hydrateThen
+hydrate' = runEffectFn3 hydrateThenFn
 
-foreign import hydrateThen :: JSX -> Element -> Effect Unit -> Effect Unit
+foreign import hydrateThenFn :: EffectFn3 JSX Element (Effect Unit) Unit
 
 -- | Attempt to unmount and clean up the React app
 -- | rendered into the given element. Returns `true`
 -- | if an app existed and was unmounted successfully.
 -- |
 -- | __*Note:* Relies on `ReactDOM.unmountComponentAtNode`__
 -- | __*Note:* `unmount` has been replaced with `Client.unmountRoot` in React 18
-foreign import unmount :: Element -> Effect Boolean
+unmount :: Element -> Effect Boolean
+unmount = runEffectFn1 unmountComponentAtNode
+
+foreign import unmountComponentAtNode :: EffectFn1 Element Boolean
 
 -- | Divert a render tree into a separate DOM node. The node's
 -- | content will be overwritten and managed by React, similar
 -- | to `render` and `hydrate`.
-foreign import createPortal :: JSX -> Element -> JSX
+createPortal :: JSX -> Element -> JSX
+createPortal = runFn2 createPortalFn
+
+foreign import createPortalFn :: Fn2 JSX Element JSX
 
 -- | Create a text node.
 text :: String -> JSX
@@ -112,4 +120,7 @@ text = unsafeCoerce
 -- |     flushSync (setMessages (_ <> [msg]))
 -- |     scrollToLastMessage
 -- | ```
-foreign import flushSync :: forall a. Effect a -> Effect a
+flushSync :: forall a. Effect a -> Effect a
+flushSync = runEffectFn1 flushSyncFn
+
+foreign import flushSyncFn :: forall a. EffectFn1 (Effect a) a

Diff for: src/React/Basic/DOM/Client.js

@@ -1,11 +1,8 @@
-import * as ReactDOMClient from "react-dom/client";
+export {
+  createRoot as createRootFn,
+  hydrateRoot as hydrateRootFn
+} from "react-dom/client";
 
-export const createRoot = (container) => () =>
-  ReactDOMClient.createRoot(container);
+export const renderRootFn = (root, children) => root.render(children);
 
-export const hydrateRoot = (container) => (initialChildren) => () =>
-  ReactDOMClient.hydrateRoot(container, initialChildren);
-
-export const renderRoot = (root) => (children) => () => root.render(children);
-
-export const unmountRoot = (root) => () => root.unmount(root);
+export const unmountRootFn = (root) => root.unmount(root);

Diff for: src/React/Basic/DOM/Client.purs

@@ -4,20 +4,32 @@ import Prelude
 import React.Basic (JSX)
 import Web.DOM (Element)
 import Effect (Effect)
+import Effect.Uncurried (EffectFn1, EffectFn2, runEffectFn1, runEffectFn2)
 
 foreign import data ReactRoot :: Type
 
 -- | Create a React root for the supplied container and return the root.
 -- | The root can be used to render a React element into the DOM with `render.`
 -- | Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode.
-foreign import createRoot :: Element -> Effect ReactRoot
+createRoot :: Element -> Effect ReactRoot
+createRoot = runEffectFn1 createRootFn
+foreign import createRootFn :: EffectFn1 Element ReactRoot
 
 -- | Same as `createRoot`, but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer.
 -- | React will attempt to attach event listeners to the existing markup.
-foreign import hydrateRoot :: Element -> JSX -> Effect ReactRoot
+hydrateRoot :: Element -> JSX -> Effect ReactRoot
+hydrateRoot = runEffectFn2 hydrateRootFn
+
+foreign import hydrateRootFn :: EffectFn2 Element JSX ReactRoot
 
 -- | Render children in `ReactRoot`
-foreign import renderRoot :: ReactRoot -> JSX -> Effect Unit
+renderRoot :: ReactRoot -> JSX -> Effect Unit
+renderRoot = runEffectFn2 renderRootFn
+
+foreign import renderRootFn :: EffectFn2 ReactRoot JSX Unit
 
 -- | Unmount the react root
-foreign import unmountRoot :: ReactRoot -> Effect Unit
+unmountRoot :: ReactRoot -> Effect Unit
+unmountRoot = runEffectFn1 unmountRootFn
+
+foreign import unmountRootFn :: EffectFn1 ReactRoot Unit

Diff for: src/React/Basic/DOM/Components/GlobalEvents.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export var _passiveSupported = null;
+export let _passiveSupported = null;
 
 function checkPassiveSupported() {
   if (_passiveSupported == null) {
@@ -42,7 +42,7 @@ function down(target, eventType, handler, options) {
   );
 }
 
-var GlobalEvent = function() {
+const GlobalEvent = function() {
   return this;
 };
 
@@ -86,7 +86,7 @@ GlobalEvent.prototype.render = function() {
 
 export { GlobalEvent as globalEvent_ };
 
-export var unsafeWindowEventTarget = (function() {
+export const unsafeWindowEventTarget = (function() {
   if (typeof window === "undefined") {
     return undefined;
   } else {

Diff for: src/React/Basic/DOM/Components/Ref.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 export function mkRef(toMaybe) {
-  var Ref = function(_props) {
+  const Ref = function(_props) {
     this.state = { node: null };
     this.ref = React.createRef();
     return this;
@@ -12,9 +12,9 @@ export function mkRef(toMaybe) {
   Ref.displayName = "Ref";
 
   Ref.prototype.syncRef = function() {
-    var selector = this.props.selector;
-    var current = this.ref.current;
-    var next =
+    const selector = this.props.selector;
+    const current = this.ref.current;
+    const next =
       selector === null ? current : current && current.querySelector(selector);
     if (this.state.node !== next) {
       this.setState({ node: next });

Diff for: src/React/Basic/DOM/Events.js

@@ -1,5 +1,3 @@
-"use strict";
-
-export const propagateThis = (f) => (t) => () => {
+export function propagateThis(f, t) {
   return f.call(t);
-}
+}

Diff for: src/React/Basic/DOM/Events.purs

@@ -50,6 +50,7 @@ import Data.Maybe (Maybe)
 import Data.Nullable (toMaybe)
 import Effect (Effect)
 import Effect.Unsafe (unsafePerformEffect)
+import Effect.Uncurried (EffectFn2, runEffectFn2)
 import React.Basic.Events (EventFn, EventHandler, SyntheticEvent, handler, unsafeEventFn)
 import Unsafe.Coerce (unsafeCoerce)
 import Web.Event.Internal.Types (Event, EventTarget)
@@ -102,7 +103,7 @@ nativeEvent = unsafeEventFn \e -> (unsafeCoerce e).nativeEvent
 
 preventDefault :: EventFn SyntheticEvent SyntheticEvent
 preventDefault = unsafeEventFn \e -> unsafePerformEffect do
-  _ <- propagateThis (unsafeCoerce e).preventDefault e
+  _ <- runEffectFn2 propagateThis (unsafeCoerce e).preventDefault e
   pure e
 
 isDefaultPrevented :: EventFn SyntheticEvent Boolean
@@ -111,7 +112,7 @@ isDefaultPrevented = unsafeEventFn \e -> unsafePerformEffect do
 
 stopPropagation :: EventFn SyntheticEvent SyntheticEvent
 stopPropagation = unsafeEventFn \e -> unsafePerformEffect do
-  _ <- propagateThis (unsafeCoerce e).stopPropagation e
+  _ <- runEffectFn2 propagateThis (unsafeCoerce e).stopPropagation e
   pure e
 
 isPropagationStopped :: EventFn SyntheticEvent Boolean
@@ -208,4 +209,4 @@ clipboardData = unsafeEventFn \e -> toMaybe (unsafeCoerce e).clipboardData
 compositionData :: EventFn SyntheticEvent (Maybe String)
 compositionData = unsafeEventFn \e -> toMaybe (unsafeCoerce e).data
 
-foreign import propagateThis :: forall f t a. f -> t -> Effect a
+foreign import propagateThis :: forall f t a. EffectFn2 f t a

Diff for: src/React/Basic/DOM/Internal.js

@@ -4,31 +4,28 @@ export function mergeStyles(styles) {
   return Object.assign.apply(null, [{}].concat(styles));
 }
 
-export function unsafeCreateDOMComponent_(createElement) {
-  return (el) => {
-    const flattenDataProp = (props, ref) => {
-      var data = null;
-      if (props._data != null) {
-        data = { _data: undefined };
-        Object.entries(props._data).forEach(function(entry) {
-          data["data-" + entry[0]] = entry[1];
-        });
-      }
-      var aria = null;
-      if (props._aria != null) {
-        aria = { _aria: undefined };
-        Object.entries(props._aria).forEach(function(entry) {
-          aria["aria-" + entry[0]] = entry[1];
-        });
-      }
-      return Object.assign({ ref }, props, data, aria);
-    };
-    return () => {
-      const c = React.forwardRef((props, ref) =>
-        createElement(el)(flattenDataProp(props, ref))
-      );
-      c.displayName = el;
-      return c;
-    };
-  };
+const flattenDataProp = (props, ref) => {
+  let data = null;
+  if (props._data != null) {
+    data = { _data: undefined };
+    Object.entries(props._data).forEach(function (entry) {
+      data["data-" + entry[0]] = entry[1];
+    });
+  }
+  let aria = null;
+  if (props._aria != null) {
+    aria = { _aria: undefined };
+    Object.entries(props._aria).forEach(function (entry) {
+      aria["aria-" + entry[0]] = entry[1];
+    });
+  }
+  return Object.assign({ ref }, props, data, aria);
+};
+
+export function unsafeCreateDOMComponent_(createElement, el) {
+  const c = React.forwardRef((props, ref) =>
+    createElement(el)(flattenDataProp(props, ref))
+  );
+  c.displayName = el;
+  return c;
 }

Diff for: src/React/Basic/DOM/Internal.purs

@@ -2,6 +2,7 @@ module React.Basic.DOM.Internal where
 
 import Prelude
 import Effect (Effect)
+import Effect.Uncurried (runEffectFn2, EffectFn2)
 import React.Basic (JSX, ReactComponent, element)
 import React.Basic.Events (EventHandler)
 import Unsafe.Coerce (unsafeCoerce)
@@ -71,10 +72,11 @@ type SharedSVGProps specific
     )
 
 unsafeCreateDOMComponent :: forall props. String -> Effect (ReactComponent { | props })
-unsafeCreateDOMComponent = unsafeCreateDOMComponent_ element
+unsafeCreateDOMComponent = runEffectFn2 unsafeCreateDOMComponent_ element
 
 foreign import unsafeCreateDOMComponent_ ::
   forall props.
-  (ReactComponent props -> props -> JSX) ->
-  String ->
-  Effect (ReactComponent props)
+  EffectFn2
+  (ReactComponent props -> props -> JSX)
+  String
+  (ReactComponent props)