VNode hooks implementation (#24)

* vnode hooks implementation

* vnode hooks: consistency edits

8 spaces indent
EffectFn usage
qualified import in Renderer module

* vnode hooks: overengineering elimination

Co-authored-by: Mikhail Chekan <[email protected]>

Author: chekoopa

src/Flame/Renderer/Hook.purs

@@ -0,0 +1,54 @@
+-- | Snabbdom VNode hooks
+module Flame.Renderer.Hook where
+
+import Prelude ((<<<), Unit)
+import Effect (Effect)
+import Effect.Uncurried (EffectFn1, EffectFn2)
+import Foreign (Foreign)
+import Foreign as F
+import Flame.Types (NodeData(Hook), VNode)
+
+-- | Foreign VNode hook function with single parameter
+type HookFn1 = EffectFn1 VNode Unit
+
+-- | Foreign VNode hook function with two parameters
+type HookFn2 = EffectFn2 VNode VNode Unit
+
+-- | Foreign VNode hook function with VNode and remove callback parameters
+type HookFnRemove = EffectFn2 VNode (Effect Unit) Unit
+
+-- | Creates a hook for given `name` and provided foreign function
+createHook :: ∀ msg. String -> Foreign -> NodeData msg
+createHook name = Hook name
+
+-- | Attaches a hook for a vnode been added
+atInit :: ∀ msg. HookFn1 -> NodeData msg
+atInit = createHook "init" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a DOM element been created based on a vnode
+atCreate :: ∀ msg. HookFn2 -> NodeData msg
+atCreate = createHook "create" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a vnode element been inserted into the DOM
+atInsert :: ∀ msg. HookFn1 -> NodeData msg
+atInsert = createHook "insert" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a vnode element about to be patched
+atPrepatch :: ∀ msg. HookFn2 -> NodeData msg
+atPrepatch = createHook "prepatch" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a vnode element being updated
+atUpdate :: ∀ msg. HookFn2 -> NodeData msg
+atUpdate = createHook "update" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a vnode element been patched
+atPostpatch :: ∀ msg. HookFn2 -> NodeData msg
+atPostpatch = createHook "postpatch" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a vnode element directly or indirectly being removed
+atDestroy :: ∀ msg. HookFn1 -> NodeData msg
+atDestroy = createHook "destroy" <<< F.unsafeToForeign
+
+-- | Attaches a hook for a vnode element directly being removed
+atRemove :: ∀ msg. HookFnRemove -> NodeData msg
+atRemove = createHook "remove" <<< F.unsafeToForeign

src/Flame/Renderer/Renderer.purs

@@ -96,21 +96,23 @@ render oldVNode updater element = do
 toVNode :: forall message. (message -> Effect Unit) -> Html message -> VNode
 toVNode updater (Text value) = text value
 toVNode updater (Node tag nodeData children) = h tag vNodeData $ map (toVNode updater) children
-        where   toVNodeData { properties, attributes, events } = {
+        where   toVNodeData { properties, attributes, events, hooks } = {
                         attrs: attributes,
                         props: properties,
-                        on: toVNodeEvents events
+                        on: toVNodeEvents events,
+                        hook: hooks
                 }
 
                 handleRawEvent handler event = do
                         message <- handler event
                         updater message
 
-                unions record@{ properties, attributes, events } =
+                unions record@{ properties, attributes, events, hooks } =
                         case _ of
                                 Property name value -> record { properties = FO.insert name value properties }
                                 Attribute name value -> record { attributes = FO.insert name value attributes }
                                 Event name message -> record { events = FO.insert name (const (updater message)) events }
                                 RawEvent name handler -> record { events = FO.insert name (handleRawEvent handler) events }
+                                Hook name fn -> record { hooks = FO.insert name fn hooks }
 
-                vNodeData = toVNodeData $ DF.foldl unions { properties: FO.empty, attributes: FO.empty, events: FO.empty } nodeData
+                vNodeData = toVNodeData $ DF.foldl unions { properties: FO.empty, attributes: FO.empty, events: FO.empty, hooks: FO.empty } nodeData

src/Flame/Types.purs

@@ -7,6 +7,7 @@ import Data.Array as DA
 import Data.Foldable as DF
 import Data.Tuple (Tuple(..))
 import Effect (Effect)
+import Foreign (Foreign)
 import Foreign.Object (Object)
 import Web.DOM.Element as WDE
 import Web.Event.Event (Event)
@@ -20,7 +21,8 @@ type VNodeData = {
         -- we need attrs mainly for svg
         attrs :: Object String,
         props :: Object String,
-        on :: VNodeEvents
+        on :: VNodeEvents,
+        hook :: Object Foreign
 }
 
 -- | Virtual DOM representation
@@ -83,7 +85,8 @@ data NodeData message =
         Attribute String String |
         Property String String |
         Event String message |
-        RawEvent String (Event -> Effect message)
+        RawEvent String (Event -> Effect message) |
+        Hook String Foreign
 
 derive instance nodeDataFunctor :: Functor NodeData