Circular structure bug when referencing the $el in a different variable

Referencing the $el in another object attribute will cause a bug when the devtool stringifies the object.

var component = function() {
  return(
    {
      msg: 'Hello Alpine.js',
      init() {
        this.div = this.$el 
      }
    }
   )
}

See this page here with the console opened: https://cdpn.io/pomartel/debug/abmbyNg/xJAjOeOZonJk The Codepen source here: https://codepen.io/pomartel/pen/abmbyNg

[HugoDF]

Solution here is probably to try to detect Alpine variables that are DOM Nodes and display “DOM Node” or “HTMLElement” instead of the actual value, a bit like we do for “function”

See the following codepen to detect HTMLElement https://codepen.io/hugodf/pen/OJRJwXJ

[HugoDF]

Here’s what the UI looks like btw, should be good enough for now, I get that having the devtools crash is probably the top priority.