Fix fragments with conditionals (#70)

* Fix fragments with conditionals

* Remove broken monoid support

Author: easafe

package.json

@@ -11,7 +11,7 @@
       "type": "module",
       "scripts": {
             "example-dice-aff": "parcel build examples/EffectfulDice/dice.js --dist-dir examples/EffectfulDice/dist/",
-            "example-server-side-rendering-client": "parcel build examples/ServerSideRendering/Client/server-side-rendering-client.js --dist-dir examples/ServerSideRendering/dist --no-optimize",
+            "example-server-side-rendering-client": "parcel build examples/ServerSideRendering/Client/server-side-rendering-client.js --dist-dir examples/ServerSideRendering/dist",
             "example-server-side-rendering": "npm run example-server-side-rendering-client",
             "example-affjax": "parcel build examples/EffectfulAffjax/affjax.js --dist-dir examples/EffectfulAffjax/dist",
             "example-affjax-list": "parcel build examples/Affjax/affjax.js --dist-dir examples/Affjax/dist",

src/Flame/Renderer/Internal/Dom.js

@@ -365,7 +365,7 @@ F.prototype.runHandlers = function (handlers, messageMapper, event) {
 };
 
 F.prototype.resume = function (updatedHtml) {
-    this.cachedHtml = this.updateAllNodes(this.root, this.cachedHtml, updatedHtml);;
+    this.cachedHtml = this.updateAllNodes(this.root, this.cachedHtml, updatedHtml);
 };
 
 /** Patches over the parent element*/
@@ -375,9 +375,14 @@ F.prototype.updateAllNodes = function (parent, currentHtml, updatedHtml) {
         updatedHtml = shallowCopy(updatedHtml);
     //recreate node if it has changed tag or node type
     if (currentHtml.tag !== updatedHtml.tag || currentHtml.nodeType !== updatedHtml.nodeType) {
-        //moving the node instead of using clearNode allows us to reuse nodes
-        this.createAllNodes(parent, updatedHtml, currentHtml.node);
-        parent.removeChild(currentHtml.node);
+        if (currentHtml.nodeType === fragmentNode) {
+            this.createAllNodes(parent, updatedHtml, firstFragmentChildNode(currentHtml.children));
+            removeFragmentChildren(parent, currentHtml.children);
+        } else {
+            //moving the node instead of using clearNode allows us to reuse nodes
+            this.createAllNodes(parent, updatedHtml, currentHtml.node);
+            parent.removeChild(currentHtml.node);
+        }
     }
     else {
         updatedHtml.node = currentHtml.node;
@@ -434,6 +439,31 @@ F.prototype.updateAllNodes = function (parent, currentHtml, updatedHtml) {
     return updatedHtml;
 };
 
+/** Fragments are not child of any nodes, so we must find the first actual node */
+function firstFragmentChildNode(children) {
+    let childrenLength = children.length;
+
+    for (let i = 0; i < childrenLength; ++i) {
+        if (children[i].nodeType === fragmentNode)
+            return firstFragmentChildNode(children[i].children);
+
+        return children[i].node;
+    }
+
+    return undefined;
+}
+
+/** fragments are not child of any nodes, so we must recursively remove the actual child nodes  */
+function removeFragmentChildren(parent, children) {
+    let childrenLength = children.length;
+
+    for (let i = 0; i < childrenLength; ++i)
+        if (children[i].nodeType === fragmentNode)
+            removeFragmentChildren(children[i].children)
+        else
+            parent.removeChild(children[i].node);
+}
+
 function clearNode(node) {
     node.textContent = '';
 }

src/Flame/Types.purs

@@ -20,9 +20,8 @@ module Flame.Types
 import Data.Maybe (Maybe)
 import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested (Tuple3)
-import Flame.Internal.Fragment as FIF
 import Foreign (Foreign)
-import Prelude (class Functor, map, class Monoid, class Show, class Semigroup)
+import Prelude (class Functor, class Show, map)
 
 -- | `PreApplication` contains
 -- | * `init` – the initial model
@@ -80,9 +79,3 @@ foreign import messageMapper ∷ ∀ message mapped. (Maybe message → Maybe ma
 
 instance Functor Html where
       map f html = messageMapper (map f) html
-
-instance Semigroup (Html a) where
-      append html otherHtml = FIF.createFragmentNode [ html, otherHtml ]
-
-instance Monoid (Html a) where
-      mempty = FIF.createFragmentNode []

test/Main.purs

@@ -420,10 +420,10 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
             TS.it "update text nodes" do
                   let html = HE.text "oi"
                   state ← mountHtml html
-                  let updatedHtml = HE.text "ola"
                   text ← textContent "#mount-point"
                   TSA.shouldEqual "oi" text
 
+                  let updatedHtml = HE.text "ola"
                   liftEffect $ FRID.resume state updatedHtml
                   updatedText ← textContent "#mount-point"
                   TSA.shouldEqual "ola" updatedText
@@ -489,6 +489,17 @@ main = AF.launchAff_ $ TSR.runSpec [ consoleReporter ] do
                   nodeAttributes ← getAttributes "svg"
                   TSA.shouldEqual "viewBox:0 0 0 0" nodeAttributes
 
+            TS.it "update fragment to node" do
+                  let html = HE.div "test-div" [ HE.fragment [HE.input [ HA.id "t", HA.value "a" ], HE.br], HE.span_ "ss"]
+                  state ← mountHtml html
+                  childrenCount ← childrenNodeLengthOf "#test-div"
+                  TSA.shouldEqual 3 childrenCount
+
+                  let updatedHtml = HE.div "test-div" [ HE.div_ "aa", HE.span_ "ss"]
+                  liftEffect $ FRID.resume state updatedHtml
+                  childrenCount2 ← childrenNodeLengthOf "#test-div"
+                  TSA.shouldEqual 2 childrenCount2
+
             TS.it "inserting children" do
                   let html = HE.div' "test-div"
                   state ← mountHtml html