https://github.com/reeli/mini-react

https://github.com/reeli/mini-react

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/reeli/mini-react
• Owner: reeli
• Created: 2021-12-11T13:52:12.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:39:56.000Z (about 1 year ago)
• Last Synced: 2024-05-27T21:17:21.753Z (7 months ago)
• Language: TypeScript
• Size: 83 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
```mermaid

flowchart TD

subgraph Mount  

  firstCreate(Start First Create)

  renderVNode[render VNode]

  checkVNodeType{What's the VNode type?}

  elementVNode(ElementVNode)

  componentVNode(ComponentVNode)

  invokeTypeFn("type(props)")

  textNode(TextVNode)

  insertTextNode(create text node and insert to parent)

  insertToParent("Create and Insert HTML to 
 Parent(type, props without children)" )

  

  firstCreate --> renderVNode

  renderVNode --> checkVNodeType

  checkVNodeType --> elementVNode

  checkVNodeType --> componentVNode

  componentVNode --> invokeTypeFn

  invokeTypeFn --> iterateChildren

  checkVNodeType --> textNode

  textNode --> insertTextNode

  insertTextNode --> iterateChildren

  elementVNode --> insertToParent

  insertToParent --> iterateChildren 

  

  

  iterateChildren(Iterate props.children)

  checkChildrenType{Is string or number?}

  createTextVNode(Create TextVNode)

  checkVNodeObject{Is VNode object?}

  vNodeObject(VNode)

  filteredChildren(Filtered children)

  setChildren("Set _Children(VNode[])")

  iterateChildren --> checkChildrenType

  iterateChildren --> checkVNodeObject

  checkChildrenType --> createTextVNode

  checkVNodeObject --> vNodeObject

  createTextVNode --> filteredChildren

  vNodeObject --> filteredChildren

  filteredChildren --> setChildren

  setChildren --each--> renderVNode

end  

```

```mermaid

flowchart TD

subgraph Mount 

  diff(Start Diff)

  checkType{Is prev.type and 
 current.type equal?}

  checkProps{Is prev.props  and 
 current.props equal?}

  return(Done)

  split(Split into Chilren 
 and OtherProps)

  checkOtherProps{Is prev.otherProps  and 
 current.otherProps equal?}

  checkOtherPropsDone(Done)

  updateProps(Update Props and  DOM)

  checkPropsChildren{Is prev.props.children and 
 current.props.children equal?}

  iterateChildDone(Done)

  diffChildren("Diff prev._children and current._children")

  renderVNode(render VNode)

  removeNode(Remove existing element)

  

  diff -..-> checkType

  checkType -..-> |"No renderNode(current)"| renderVNode

  renderVNode --> removeNode

  checkType -..-> |Yes| checkProps

  checkProps -..-> |Yes| return

  checkProps -..-> |No| split

  split -..-> checkOtherProps

  checkOtherProps -..-> |Yes| checkOtherPropsDone

  checkOtherProps -..-> |No| updateProps

  split -..-> checkPropsChildren

  checkPropsChildren -..-> |Yes| iterateChildDone

  checkPropsChildren -..-> |No| iterateChildren

  

  

  iterateChildren(Iterate props.children)

  checkChildrenType{Is string or number?}

  createTextVNode(Create TextVNode)

  checkVNodeObject{Is VNode object?}

  vNodeObject(VNode)

  filteredChildren(Filtered children)

  setChildren("Set _Children(VNode[])")

  iterateChildren --> checkChildrenType

  iterateChildren --> checkVNodeObject

  checkChildrenType --> createTextVNode

  checkVNodeObject --> vNodeObject

  createTextVNode --> filteredChildren

  vNodeObject --> filteredChildren

  filteredChildren --> setChildren

    

  setChildren --> diffChildren

  diffChildren --each--> diff

  

end  

```