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

[pomartel]

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

[pomartel]

Thanks for taking care of this guys. It almost works except when I wrap my $el in a jquery object like this $($el). Sorry if I'm doing funny things with my Alpine setup! 😆

https://codepen.io/pomartel/pen/abmbyNg

[HugoDF]

@pomartel that's cause it's a jQuery instance 😂 I wonder how we can detect that

[pomartel]

I wonder if it's going to be possible to manage all the weird situations like this one. Maybe just wrap it in a try catch and display it as an "Unknown Element"?

[HugoDF]

I guess we can do el instanceof jQuery || el instanceof $ but we'll need to check that jQuery or $ exist 🤔

The other way to do it is to try to unfurl the jQuery wrapper property.get && property.get(0) instanceof HTMLElement or property[0] instanceof HTMLElement

[HugoDF]

I wonder if it's going to be possible to manage all the weird situations like this one. Maybe just wrap it in a try catch and display it as an "Unknown Element"?

the problem with this is that I think the error happens on JSON.stringify, so if we try/catch that, none of the components or their state will be communicated to the devtools.

I think we can look at this again if we start sending data more piecemeal (eg. send components, send a component's top-level fields, send field values instead of 1 massive message that has everything in it) which we started looking at in #10

[HugoDF]

@pomartel let's move the discussion to #101 I've got something working that will avoid the crash with jQuery values and with elements inside of arrays/objects (#96 )

[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.