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