Add check for 'HTMLElement' type

[KevinBatdorf]

Fixes #78

Serializes HTMLElement types and changes the logic on what is readOnly and what readOnly can do.

readOnly only affects editing now, not opening/closing

[HugoDF]

Re tests let's chat in #81

[HugoDF]

Btw the project can now be tested with Cypress when changing backend.js or the Alpine.js Panel app.

I've stuck the test for this PR on the todo list at #86 but we can add it here as well.

[HugoDF]

Hmmm on second thought, it looks like we need to rethink the way we pass "readonly" attributes to the panel, see the screenshots, el was set as el: $el in x-data, it's editable

We'll need to make HTMLElement fields readOnly in the place that processes the received components

alpinejs-devtools/packages/shell-chrome/src/utils.js

Line 107 in 78466dd

readOnly: type === 'function',

so in short:

1. let's extract that function (existing comment) that replaces non-serializable things (things of type function become 'function', instances of HTMLElement become 'HTMLElement')

2. let's do readOnly: type === 'function' || (value === 'HTMLElement' && type === 'object') in flattenSingleAttribute

Note that this PR fix will only work for top-level elements, not elements inside of Arrays/Objects, we should probably deal with that separately though.

[KevinBatdorf]

I think this turned out well. Can you take a look when you have time? I can add some tests later this week. I feel I have a pretty decent grasp as to how the codebase works now :)

Also, I noticed in the simulator the arrows aren't showing. I think we just need to copy over some CSS that's inlined. I wasn't sure so left it be. We can do it in another branch easily enough though.

[HugoDF]

Nice one on the element name, just a few questions.

Have you tried it out with els: [$el]? Just wondering if it magically works otherwise I think this is good to merge and we can create a separate issue to deal with HTML elements in nested object/arrays

Edit: I've tried with els: [$el] and we end up with the same error as the initial issue for this, something about cyclic values, let's raise as a separate issue #96

[HugoDF]

Also, I noticed in the simulator the arrows aren't showing. I think we just need to copy over some CSS that's inlined. I wasn't sure so left it be. We can do it in another branch easily enough though.

Fixed this in #95