@dazn/kopytko-framework 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.3.2](https://github.com/getndazn/kopytko-framework/compare/v1.3.1...v1.3.2) (2022-09-01)
+
+
+### Bug Fixes
+
+* Ignoring Invalid elements when calculating elements' index in children array ([#31](https://github.com/getndazn/kopytko-framework/issues/31)) ([73aed6e](https://github.com/getndazn/kopytko-framework/commit/73aed6e2e7ba38b946c81fe18ceecf414f7bbcf2))
+
 ## [1.3.1](https://github.com/getndazn/kopytko-framework/compare/v1.3.0...v1.3.1) (2022-08-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dazn/kopytko-framework",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A modern Roku's Brightscript framework",
   "keywords": [
     "brightscript",

package/src/components/renderer/KopytkoDiffUtility.brs

@@ -69,21 +69,6 @@ function KopytkoDiffUtility() as Object
     m._diffElementChildren(currentElement.children, newElement.children, newElement.props.id)
   end sub
 
-  ' @private
-  prototype._markElementToBeRemoved = sub (element as Object)
-    m._diffResult.elementsToRemove.push(element.props.id)
-
-    if (element.children = Invalid OR element.children.count() = 0)
-      return
-    end if
-
-    for each child in element.children
-      if (child <> Invalid)
-        m._markElementToBeRemoved(child)
-      end if
-    end for
-  end sub
-
   ' @private
   prototype._diffElementProps = sub (elementId as String, currentProps as Object, newProps as Object)
     for each newProp in newProps
@@ -98,34 +83,49 @@ function KopytkoDiffUtility() as Object
     end for
   end sub
 
-  ' @todo Make it not rerender the whole children tree if they were only reordered
+  ' @todo Support elements reordering
   ' @private
   prototype._diffElementChildren = sub (currentChildren as Object, newChildren as Object, parentElementId = Invalid as Dynamic)
-    if (currentChildren = Invalid)
-      currentChildren = []
-    end if
+    if (newChildren = Invalid) then newChildren = []
 
-    if (newChildren = Invalid)
-      newChildren = []
+    currentChildrenMapped = {}
+    if (currentChildren <> Invalid)
+      for each currentChild in currentChildren
+        if (currentChild <> Invalid)
+          currentChildrenMapped[currentChild.props.id] = currentChild
+        end if
+      end for
     end if
 
-    if (currentChildren.count() > newChildren.count())
-      biggestArray = currentChildren
-    else
-      biggestArray = newChildren
-    end if
+    nonInvalidNewChildIndex = 0
+    for each newChild in newChildren
+      if (newChild <> Invalid)
+        newChild.index = nonInvalidNewChildIndex
+        nonInvalidNewChildIndex++
+        newChild.parentId = parentElementId
 
-    for i = 0 to biggestArray.count() - 1
-      if (newChildren[i] <> Invalid)
-        newChildren[i].index = i
-        newChildren[i].parentId = parentElementId
+        m._diffElement(currentChildrenMapped[newChild.props.id], newChild)
+        currentChildrenMapped.delete(newChild.props.id)
       end if
+    end for
 
-      if (currentChildren[i] <> Invalid)
-        currentChildren[i].index = i
-      end if
+    for each currentChildIdToRemove in currentChildrenMapped
+      m._markElementToBeRemoved(currentChildrenMapped[currentChildIdToRemove])
+    end for
+  end sub
+
+  ' @private
+  prototype._markElementToBeRemoved = sub (element as Object)
+    m._diffResult.elementsToRemove.push(element.props.id)
 
-      m._diffElement(currentChildren[i], newChildren[i])
+    if (element.children = Invalid OR element.children.count() = 0)
+      return
+    end if
+
+    for each child in element.children
+      if (child <> Invalid)
+        m._markElementToBeRemoved(child)
+      end if
     end for
   end sub