Functors with lazy nodes (#50)

* Add functor mapping to lazy node creation

* Add functor mapping to lazy node update

Author: easafe

package-lock.json

@@ -127,7 +127,8 @@ function shallowCopy(origin) {
                 nodeData: origin.nodeData,
                 render: origin.render,
                 arg: origin.arg,
-                rendered: undefined
+                rendered: undefined,
+                messageMapper: origin.messageMapper
             };
         case managedNode:
             return {
@@ -162,6 +163,9 @@ F.prototype.createAllNodes = function (parent, html, referenceNode) {
         if (html.children !== undefined)
             this.createChildrenNodes(node, html.children);
         else if (html.rendered !== undefined) {
+            if (html.messageMapper !== undefined)
+                lazyMessageMap(html.messageMapper, html.rendered);
+
             if (html.rendered.text !== undefined) {
                 node.textContent = html.rendered.text;
             }
@@ -196,8 +200,13 @@ F.prototype.createChildrenNodes = function (parent, children) {
         else {
             if (c.children !== undefined)
                 this.createChildrenNodes(node, c.children);
-            if (c.rendered !== undefined && c.rendered.children !== undefined)
-                this.createChildrenNodes(node, c.rendered.children);
+            else if (c.rendered !== undefined) {
+                if (c.messageMapper !== undefined)
+                    lazyMessageMap(c.messageMapper, c.rendered);
+
+                if (c.rendered.children !== undefined)
+                    this.createChildrenNodes(node, c.rendered.children);
+            }
         }
 
         parent.appendChild(node);
@@ -367,7 +376,6 @@ F.prototype.runHandlers = function (handlers, messageMapper, event) {
             maybeMessage = typeof h === "function" ? h(event)() : this.eventWrapper(h);
 
         //handler can be just a message or a function that takes an event
-        // a
         this.updater(messageMapper === undefined ? maybeMessage : messageMapper(maybeMessage))();
     }
     event.stopPropagation();
@@ -396,6 +404,9 @@ F.prototype.updateAllNodes = function (parent, currentHtml, updatedHtml) {
                 if (updatedHtml.arg !== currentHtml.arg) {
                     updatedHtml.rendered = updatedHtml.render(updatedHtml.arg);
 
+                    if (updatedHtml.messageMapper !== undefined)
+                        lazyMessageMap(updatedHtml.messageMapper, updatedHtml.rendered);
+
                     this.updateAllNodes(parent, currentHtml.rendered, updatedHtml.rendered);
                 }
                 else
@@ -970,6 +981,15 @@ F.prototype.removeEvent = function (node, name) {
             this.applicationEvents.delete(name);
         }
     }
-
+    //functor mapping
+    node[eventKey + eventPostfix] = undefined;
     node[eventKey] = undefined;
 };
+
+function lazyMessageMap(mapper, html) {
+    html.messageMapper = mapper;
+
+    if (html.children !== undefined && html.children.length > 0)
+        for (let i = 0; i < html.children.length; ++i)
+            lazyMessageMap(mapper, html.children[i]);
+}

src/Flame/Renderer/Internal/Dom.js

@@ -5,7 +5,7 @@ exports.messageMapper = function (mapper) {
 };
 
 function addMessageMapper(html, mapper) {
-    if (html.nodeData !== undefined && html.nodeData.events !== undefined)
+    if (html.nodeType !== 1 && html.nodeType !== 4)
         mapHtml(html, mapper);
 
     if (html.children !== undefined && html.children.length > 0)

src/Flame/Types.js

@@ -1,4 +1,4 @@
-module Test.Basic.Functor where
+module Test.Functor.Basic where
 
 import Prelude
 

test/Basic/Functor.purs renamed to test/Functor/Basic.purs

@@ -0,0 +1,49 @@
+module Test.Functor.Lazy where
+
+import Prelude
+import Effect
+import Flame
+import Flame.Html.Element
+import Data.Maybe
+import Flame.Html.Element as H
+import Flame.Html.Attribute as HA
+import Flame.Html.Event as E
+
+data CounterMsg = Increment Int
+
+type CounterModel = { count :: Int }
+
+initCounter :: CounterModel
+initCounter = { count: 1 }
+
+updateCounter :: CounterModel -> CounterMsg -> CounterModel
+updateCounter model (Increment val) = model { count = model.count + val }
+
+counterView :: CounterModel -> Html CounterMsg
+counterView = lazy Nothing counterView_
+
+counterView_ :: CounterModel -> Html CounterMsg
+counterView_ model = H.main "main" [
+      H.button [ HA.id "add-button", E.onClick $ Increment 1000 ] [ H.text $ "Current Value: " <> show model.count ]
+]
+
+data Msg = PageMsg PageMsg
+
+data PageMsg = CounterMsg CounterMsg
+
+type Model = { counter :: CounterModel }
+
+init = { counter: initCounter } :> []
+
+update model (PageMsg (CounterMsg msg)) = model { counter = updateCounter model.counter msg } :> []
+
+view :: Model -> Html Msg
+view model =  H.div_ [ PageMsg <$> CounterMsg <$> counterView model.counter ]
+
+mount :: Effect Unit
+mount = mount_ (QuerySelector "#mount-point") {
+      subscribe: []
+      , init
+      , update
+      , view
+}

test/Functor/Lazy.purs

@@ -29,7 +29,8 @@ import Flame.Subscription.Unsafe.CustomEvent as FSUC
 import Partial.Unsafe (unsafePartial)
 import Test.Basic.EffectList as TBEL
 import Test.Basic.Effectful as TBE
-import Test.Basic.Functor as TBF
+import Test.Functor.Basic as TBF
+import Test.Functor.Lazy as TFL
 import Test.Basic.NoEffects as TBN
 import Test.Effectful.SlowEffects as TES
 import Test.ServerSideRendering.Effectful as TSE
@@ -740,7 +741,8 @@ main = TUM.runTest do
                   TUA.equal "-2" currentDecrement3
                   TUA.equal "2" currentLuckyNumber3
 
-            TU.test "functor" do
+      TU.suite "functor" do
+            TU.test "basic" do
                   liftEffect do
                         unsafeCreateEnviroment
                         TBF.mount
@@ -762,6 +764,23 @@ main = TUM.runTest do
                   current2 <- textContent "#text-output-1"
                   TUA.equal "2" current2
 
+            TU.test "lazy" do
+                  liftEffect do
+                        unsafeCreateEnviroment
+                        TFL.mount
+                  childrenLength <- childrenNodeLength
+                  --div
+                  TUA.equal 1 childrenLength
+
+                  dispatchEvent clickEvent "#add-button"
+                  initial <- textContent "#add-button"
+                  TUA.equal "Current Value: 1001" initial
+
+                  dispatchEvent clickEvent "#add-button"
+                  dispatchEvent clickEvent "#add-button"
+                  current2 <- textContent "#add-button"
+                  TUA.equal "Current Value: 3001" current2
+
       TU.suite "Effectful specific" do
             TU.test "slower effects" do
                   liftEffect do