virtual dom - Respo/respo.calcit GitHub Wiki

Virtual DOM

There are elements and components before it's actually rendered. After rendered, if all of elements. The definitions of them are:

defrecord Element :name :coord :attrs :style :event :children

defrecord Component :name :effects :tree

defrecord Effect :name :coord :args :method

coord means "coordinate" in Respo, it looks like [] 0 1 3 or even [] 0 0 0 :container 0 0 "|a".

If you define component like this:

div
  {}
    :style $ {}
      :color "|red"
    :class-name "|demo"
    :on-click $ fn (e dispatch!)
  div $ {}

You may get a piece of data in Calcit-js:

#respo.core.Element{:name :div,
                    :coord nil,
                    :attrs ([:class-name "demo"]),
                    :style {:color "red"},
                    :event {:click #object[Function "function (e,dispatch_BANG_){
                                                       return null;
                                                     }"]},
                    :children [[0 #respo.core.Element{:name :div,
                                                      :coord nil,
                                                      :attrs (),
                                                      :style nil,
                                                      :event (),
                                                      :children []}]]}

You may have noticed that in children field it's a vector. There is a 0 indicating it's the first child. And yes internally that's the true representation of children.

As I told, virtual DOM is normal Calcit-js data, you can transform the virtual DOM in the runtime:

defn interpose-borders (element border-style)
  if (contains? element :children)
    update element :children $ fn (children)
      interpose-item ([]) 0 children
        hr $ {}
          :style $ merge default-style border-style

This demo inserts borders among child elements. You can think of more.

⚠️ **GitHub.com Fallback** ⚠️