Merge pull request #385 from wooloo26/master

Ensure that memoized fibers behave consistently with reconcile functions during the commit phase.

Author: yisar

src/commit.ts

@@ -2,7 +2,7 @@ import { FiberFinish, FiberHost, HTMLElementEx, Fiber, Ref, TAG } from './type'
 import { updateElement } from './dom'
 import { isFn } from './reconcile'
 
-export const commit = (fiber: FiberFinish) => {
+export const commit = (fiber?: FiberFinish) => {
   if (!fiber) {
     return
   }
@@ -30,8 +30,16 @@ export const commit = (fiber: FiberFinish) => {
 
   fiber.action = null
 
-  commit(fiber.child)
-  commit(fiber.sibling)
+  commitSibling(fiber.child)
+  commitSibling(fiber.sibling)
+}
+
+function commitSibling(fiber?: FiberFinish) {
+  if (fiber?.memo) {
+    commitSibling(fiber.sibling)
+  } else {
+    commit(fiber)
+  }
 }
 
 const refer = (ref?: Ref<HTMLElementEx>, dom?: HTMLElementEx) => {

src/reconcile.ts

@@ -38,28 +38,17 @@ const reconcile = (fiber?: Fiber) => {
   return null
 }
 
-const memo = (fiber: Fiber) => {
-  if (
-    (fiber.type as FC).memo &&
-    fiber.type === fiber.old?.type &&
-    fiber.old?.props
-  ) {
-    let scu = (fiber.type as FC).shouldUpdate || shouldUpdate
-    if (!scu(fiber.props, fiber.old.props)) {
-      // fast-fix
-      return getSibling(fiber)
-    }
-  }
-  return null
-}
-
 const capture = (fiber: Fiber) => {
   fiber.isComp = isFn(fiber.type)
   if (fiber.isComp) {
-    const memoFiber = memo(fiber)
-    if (memoFiber) {
-      return memoFiber
+    if (isMemo(fiber)) {
+      fiber.memo = true
+      // fast-fix
+      return getSibling(fiber)
+    } else if (fiber.memo) {
+      fiber.memo = false
     }
+
     updateHook(fiber)
   } else {
     updateHost(fiber as FiberHost)
@@ -69,6 +58,20 @@ const capture = (fiber: Fiber) => {
   return sibling
 }
 
+export const isMemo = (fiber: Fiber) => {
+  if (
+    (fiber.type as FC).memo &&
+    fiber.type === fiber.old?.type &&
+    fiber.old?.props
+  ) {
+    let scu = (fiber.type as FC).shouldUpdate || shouldUpdate
+    if (!scu(fiber.props, fiber.old.props)) {
+      return true
+    }
+  }
+  return false
+}
+
 const getSibling = (fiber?: Fiber) => {
   while (fiber) {
     bubble(fiber)

src/type.ts

@@ -84,6 +84,7 @@ export type PropsOf<T extends FC | string> = T extends FC<infer P>
 interface FiberBase {
   key?: string
   type?: string | FC
+  memo?: boolean
   props?: PropsOf<FC | string>
   isComp?: boolean
   parentNode?: HTMLElementEx | {}