[example] use rootSelectEl with react element ref

example/index.js

@@ -2593,6 +2593,7 @@ var PS = {};
   "use strict";
   $PS["Data.Maybe"] = $PS["Data.Maybe"] || {};
   var exports = $PS["Data.Maybe"];
+  var Control_Category = $PS["Control.Category"];
   var Data_Eq = $PS["Data.Eq"];
   var Data_Function = $PS["Data.Function"];
   var Data_Functor = $PS["Data.Functor"];          
@@ -2634,6 +2635,9 @@ var PS = {};
           return Nothing.value;
       };
   });
+  var fromMaybe = function (a) {
+      return maybe(a)(Control_Category.identity(Control_Category.categoryFn));
+  };
   var fromJust = function (dictPartial) {
       return function (v) {
           if (v instanceof Just) {
@@ -2658,6 +2662,7 @@ var PS = {};
   exports["Nothing"] = Nothing;
   exports["Just"] = Just;
   exports["maybe"] = maybe;
+  exports["fromMaybe"] = fromMaybe;
   exports["isNothing"] = isNothing;
   exports["fromJust"] = fromJust;
   exports["functorMaybe"] = functorMaybe;
@@ -4480,6 +4485,7 @@ var PS = {};
       return dict["style''"];
   };
   var selectAll = Graphics_D3_Util.ffi([ "selector", "selection", "" ])("selection.selectAll(selector)");
+  var rootSelectEl = Graphics_D3_Util.ffi([ "node", "" ])("d3.select(node)");              
   var rootSelect = Graphics_D3_Util.ffiD3([ "selector", "" ])("d3.select(selector)");
   var onClick = function (dict) {
       return dict.onClick;
@@ -4550,6 +4556,7 @@ var PS = {};
       };
   };
   exports["rootSelect"] = rootSelect;
+  exports["rootSelectEl"] = rootSelectEl;
   exports["selectAll"] = selectAll;
   exports["bindData"] = bindData;
   exports["enter"] = enter;
@@ -4763,6 +4770,7 @@ var PS = {};
   exports["createElement"] = createElement;
   exports["createDOMElement"] = createDOMElement;
   exports["hooksComponentWithModule"] = hooksComponentWithModule;
+  exports["readRef"] = readRef;
   exports["readRefM"] = readRefM;
   exports["setRef"] = setRef;
   exports["functorHooks"] = functorHooks;
@@ -5310,7 +5318,7 @@ var PS = {};
                                               return Data_Semigroup.append(Data_Semigroup.semigroupArray)(d)([ newItem$prime.value0 ]);
                                           })(d3Data)();
                                       };
-                                      throw new Error("Failed pattern match at Example.React (line 77, column 9 - line 79, column 58): " + [ newItem$prime.constructor.name ]);
+                                      throw new Error("Failed pattern match at Example.React (line 86, column 9 - line 88, column 58): " + [ newItem$prime.constructor.name ]);
                                   })();
                                   return Toestand_Classes.write_(Toestand_Boxes.writeBox)(Data_Maybe.Nothing.value)(newItem)();
                               };
@@ -5325,23 +5333,33 @@ var PS = {};
                   };
               };
               return Control_Bind.bind(Reactix_React.bindHooks)(Reactix_Hooks.useRef(Data_Nullable["null"]))(function (containerRef) {
-                  return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useBox([ "first data" ]))(function (d3Data) {
+                  return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useBox([ "hello" ]))(function (d3Data) {
                       return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useLive(Toestand_Boxes.readBox)(Toestand_Changes.unequal(Data_Eq.eqArray(Data_Eq.eqString)))(d3Data))(function (d3Data$prime) {
                           return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useBox(Data_Maybe.Nothing.value))(function (newItem) {
                               return Control_Bind.bind(Reactix_React.bindHooks)(Toestand_Boxes.useLive(Toestand_Boxes.readBox)(Toestand_Changes.unequal(Data_Maybe.eqMaybe(Data_Eq.eqString)))(newItem))(function (newItem$prime) {
-                                  return Control_Bind.discard(Control_Bind.discardUnit)(Reactix_React.bindHooks)(Reactix_Hooks["useLayoutEffect'"](function __do() {
-                                      Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableEnter)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#react-svg"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(d3Data$prime)))(Graphics_D3_Selection.enter))("p"))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (_d) {
+                                  return Control_Bind.discard(Control_Bind.discardUnit)(Reactix_React.bindHooks)(Reactix_Hooks["useLayoutEffect'"](FFI_Simple_Functions.delay(FFI_Simple_Functions.delayMonad(Effect.monadEffect))(Data_Unit.unit)(function (v2) {
+                                      var mContainer = Data_Nullable.toMaybe(Reactix_React.readRef(containerRef));
+                                      if (mContainer instanceof Data_Maybe.Nothing) {
+                                          return Control_Applicative.pure(Effect.applicativeEffect)(Data_Unit.unit);
+                                      };
+                                      if (mContainer instanceof Data_Maybe.Just) {
+                                          return function __do() {
+                                              Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableEnter)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelectEl(mContainer.value0))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(d3Data$prime)))(Graphics_D3_Selection.enter))("p"))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (_d) {
                                                   return function (idx) {
-                                              var $8 = $$Math.remainder(idx)(2.0) === 0.0;
-                                              if ($8) {
+                                                      var $10 = $$Math.remainder(idx)(2.0) === 0.0;
+                                                      if ($10) {
                                                           return "green";
                                                       };
                                                       return "red";
                                                   };
                                               })))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingSelection)(Data_Show.show(Data_Show.showString)))();
                                               return Data_Unit.unit;
-                                  }))(function () {
+                                          };
+                                      };
+                                      throw new Error("Failed pattern match at Example.React (line 53, column 9 - line 63, column 22): " + [ mContainer.constructor.name ]);
+                                  })))(function () {
                                       return Control_Applicative.pure(Reactix_React.applicativeHooks)(Reactix_DOM_HTML.div({})([ Reactix_DOM_HTML.div({})([ Reactix_DOM_HTML.form({})([ Reactix_DOM_HTML.label({})([ Reactix_DOM_HTML.text("Enter new item") ]), Reactix_DOM_HTML.input({
+                                          defaultValue: Data_Maybe.fromMaybe("")(newItem$prime),
                                           on: {
                                               change: onInputChange(newItem)
                                           }

example/src/EReact.purs

 module Example.React where
 
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Nullable (toMaybe, null)
 import DOM.Simple as DOM
 import DOM.Simple (Element)
@@ -39,13 +39,21 @@ appCpt = R.hooksComponentWithModule "Example.React" "app" cpt where
   cpt {} _ = do
     containerRef <- R.useRef null
 
-    d3Data <- T.useBox [ "first data" ]
+    d3Data <- T.useBox [ "hello" ]
     d3Data' <- T.useLive T.unequal d3Data
     newItem <- T.useBox (Nothing :: Maybe String)
     newItem' <- T.useLive T.unequal newItem
 
     R.useLayoutEffect' $ do
-      _ <- Selection.rootSelect "#react-svg"
+      -- HACK: Initially, R.readRef containerRef returns null (in this
+      -- R.useLayoutEffect' call). Using `delay unit` is a hack to wait for the
+      -- ref to fill in with proper element.
+      delay unit $ \_ -> do
+        let mContainer = toMaybe $ R.readRef containerRef
+        case mContainer of
+          Nothing -> pure unit
+          Just cr -> do
+            _ <- Selection.rootSelectEl cr
                 >>= Selection.selectAll "p"
                 >>= Selection.bindData d3Data'
                 >>= Selection.enter
@@ -58,7 +66,8 @@ appCpt = R.hooksComponentWithModule "Example.React" "app" cpt where
       [ H.div {}
         [ H.form {}
           [ H.label {} [ H.text "Enter new item" ]
-          , H.input { on: { change: onInputChange newItem } }
+          , H.input { defaultValue: fromMaybe "" newItem'
+                    , on: { change: onInputChange newItem } }
           , H.button { on: { click: onSubmitClick d3Data newItem newItem' } } [ H.text "submit" ] ]
         ]
       , H.div { id: "react-svg"

packages-additions.dhall

@@ -2,7 +2,7 @@
   d3 =
     { dependencies = (https://raw.githubusercontent.com/cgenie/purescript-d3/master/spago.dhall sha256:125d4268bf940f21bec0809cb8b70be1dfac7f7e52be4d50da9f391f205001a4).dependencies
     , repo = "https://github.com/cgenie/purescript-d3"
-    , version = "master"
+    , version = "v0.9.1"
     }
   , dom-simple =
     { dependencies =