pomber / didact

i check this code and i think we need to set condition for when old Fiber is null this mean we are in first render!

didact/didact.js

Line 252 in fa79b34

oldFiber != null

didact/didact.js

Line 153 in fa79b34

let currentRoot = null

didact/didact.js

Line 146 in fa79b34

alternate: currentRoot,

Solution

we just rewrite a reconciler function

const reconcileChildren = (
  fiber:Fiber,
  children:(PreactElement|PreactTextElement)[]
  ) => {
    let oldFiber = fiber.alternate && fiber.alternate.child
    let prevSibling:Fiber|null = null

    children.forEach((el,index)=>{
      let newFiber:Fiber|null = null
      if(oldFiber != null){
        const sameType = oldFiber && el  && el.type === oldFiber.type

        if(sameType){
           // in this condition element and oldFiber is exist and
           // both types are equal maybe props are changed
          newFiber = {
            type:oldFiber.type,
            props:el.props, // assign new props 
            dom:oldFiber.dom,
            parent:fiber,
            alternate:oldFiber,
            effectTag:"UPDATE",
            child:null,
            sibling:null
          }
        }

        if(el && !sameType ){
          newFiber = {
            type:el.type,
            props:el.props, 
            dom:null,
            parent:fiber,
            alternate:null,
            effectTag:"PLACEMENT",
            child:null,
            sibling:null
          }
        }

        if(oldFiber && !sameType){
          oldFiber.effectTag = "DELETION"
          deletion.push(oldFiber)
        }

        if(oldFiber){
          oldFiber = oldFiber.sibling
          newFiber = {
            type:el.type,
            props:el.props, 
            dom:null,
            parent:fiber,
            alternate:null,
            child:null,
            sibling:null
          }
        }


        if (index === 0){
          fiber.child = newFiber
        }else{
          if(prevSibling){
            prevSibling.sibling = newFiber
          }
        }
        prevSibling = newFiber
      }else{
        // create a first render dom
         
         newFiber = {
          type:el.type,
          props:el.props,
          parent:fiber,
          dom:null,
          child:null,
          sibling:null,
          alternate:null
        
        }
        newFiber.alternate = newFiber
        if (index === 0){
          fiber.child = newFiber
        }else{
          if(prevSibling){
            prevSibling.sibling = newFiber
          }
        }
        prevSibling = newFiber

        return
      }

  })


}

if i wrong please tell me :)

Old Fiber For First Render Is Null !!?

Solution