Updates mount methods (#77)

Co-authored-by: Mike Solomon <[email protected]>

CHANGELOG.md

@@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.9.6] - 2022-11-28
 
--Adds `useHot'`.
+- Adds `useHot'`.
+- Splits `onMount` into `onWillMount` and `onDidMount`.
 
 ## [0.9.5] - 2022-11-28
 

index.test.js

@@ -186,5 +186,11 @@ describe('deku', () => {
     $('#home-btn').trigger('click')
     expect($('#hack').text()).toBe('goodbye');
   }));
+
+  doTest('lifecycle has a difference before and after mounting', (f) => f(tests.lifecycleWillAndDidMount, () => {
+    const $ = require('jquery');
+    expect($('#span1').text()).toBe('');
+    expect($('#span2').text()).toBe('42');
+  }));
 });
 

src/Deku/Lifecycle.purs

@@ -6,25 +6,25 @@ import Deku.Core (Domable, envy)
 import Effect (Effect)
 import FRP.Event (makeEvent)
 
-bracket
+
+onWillMount
   :: forall lock payload
    . Effect Unit
-  -> Effect Unit
   -> Domable lock payload
   -> Domable lock payload
-bracket mount dismount d = envy $ makeEvent \k -> do
-  mount
+onWillMount e d = envy $ makeEvent \k -> do
+  e
   k d
-  pure dismount
+  pure (pure unit)
 
-onMount
+onDidMount
   :: forall lock payload
    . Effect Unit
   -> Domable lock payload
   -> Domable lock payload
-onMount e d = envy $ makeEvent \k -> do
-  e
+onDidMount e d = envy $ makeEvent \k -> do
   k d
+  e
   pure (pure unit)
 
 onDismount

test/Test/Main.purs

@@ -11,13 +11,13 @@ import Data.Foldable (intercalate, oneOf, oneOfMap)
 import Data.Tuple.Nested ((/\))
 import Deku.Attribute ((!:=))
 import Deku.Attributes (id_)
-import Deku.Control (blank, globalPortal1, switcher, text_)
+import Deku.Control (blank, globalPortal1, switcher, text, text_)
 import Deku.Core (Domable, Nut, dyn, fixed, insert, insert_, sendToPos)
 import Deku.DOM as D
-import Deku.Hooks (useMemoized, useState, useState')
 import Deku.Do as Deku
+import Deku.Hooks (useMemoized, useState, useState')
 import Deku.Interpret (FFIDOMSnapshot, Instruction)
-import Deku.Lifecycle (onDismount, onMount)
+import Deku.Lifecycle (onDidMount, onDismount, onWillMount)
 import Deku.Listeners (click_)
 import Deku.Pursx ((~~))
 import Deku.Toplevel (Template(..), hydrate', runInBody', runSSR)
@@ -262,7 +262,17 @@ lifecycle = Deku.do
     , D.span (D.Id !:= "hack") []
     , item # switcher case _ of
         0 -> D.span_ [ text_ "a" ]
-        1 -> onMount (hackyInnerHTML "hack" "hello") $ D.span_ [ text_ "b" ]
+        1 -> onWillMount (hackyInnerHTML "hack" "hello") $ D.span_ [ text_ "b" ]
         _ -> onDismount (hackyInnerHTML "hack" "goodbye") $ D.span_
           [ text_ "c" ]
-    ]
+    ]
+
+lifecycleWillAndDidMount :: Nut
+lifecycleWillAndDidMount = D.div_
+  [ Deku.do
+      setInt /\ int <- useState'
+      onWillMount (setInt 42) (D.span (id_ "span1") [ text (show <$> int) ])
+  , Deku.do
+      setInt /\ int <- useState'
+      onDidMount (setInt 42) (D.span (id_ "span2") [ text (show <$> int) ])
+  ]