[Bug]: Mousing over events tab causes panel to crash about re-frame-10x

[hipitihop]

I have found the same issue:
Environment

re-frame-10x:     1.5.0
Linux Ubuntu:     22.04.x
Chrome:           105.0.5195.125 (Official Build) (64-bit)
re-frame:         1.3.0
devtools:         1.0.6
highlight.js:     11.6.0

[eggsyntax]

Update: confirmed that downgrading 10x to 1.3.0 solves the problem; I'll just go with that for now on our project (but happy to test other solutions if/when that would be helpful).

[eggsyntax]

Update 2: created a minimal-ish repro by creating a project with

lein new luminus crash10x +shadow-cljs +cljs +re-frame

and removing re-frisk from the project, adding preloads etc for 10x, and changing the event fns to fn-traced so there'd be something present in the Events tab. Should have made an initial commit after the creation with luminus but didn't think to at the time, apologies.

That's here: https://github.com/eggsyntax/crash10x

[p-himik]

The root cause is incorrect usage of Highlight.js - in highlightjs/highlight.js#3057 they effectively removed undocumented ability to highlight children elements by calling highlightElement in their common parent. And it seems that that ability have never really been there in the first place - I tried rolling back to multiple versions of Highlight.js, all the way to 10.7 (apparently the smallest version where the API required by re-frame-10x is supported), to no avail.

It seems to me that a proper fix would be to:

1. Incorporate re-highlight into re-frame-10x because IMO changes required for a fix go beyond the scope of re-highlight (and seems that that library was created specifically for re-frame-10x in the first place - not sure why those trivial 15 lines weren't written within re-frame-10x in the first place; I'm also not sure why it sets the non-public called property - it doesn't seem like it should do anything at all in the versions of Highlight.js that have the required API)
2. Rewrite this block in such a way so that it's still in the same [:pre [:code ...]] but highlightElement is called on each child separately (of course, each child will have to be wrapped in a span)

Alternatively, the scope of re-highlight could be expanded so it supports highlighting within highlighting, and then hljs-compatible? could be removed - it should be completely opaque to re-frame-10x whether the right version is used or not.