[Bug]: Mousing over events tab causes panel to crash #376
Comments
|
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). |
|
Update 2: created a minimal-ish repro by creating a project with lein new luminus crash10x +shadow-cljs +cljs +re-frameand removing re-frisk from the project, adding preloads etc for 10x, and changing the event That's here: https://github.com/eggsyntax/crash10x |
|
I have found the same issue: |
|
The root cause is incorrect usage of It seems to me that a proper fix would be to:
Alternatively, the scope of |
Some kind of impedance mismatch between react and highlight.js is causing a crash. Disabled this for now. Everything works again, just without highlighted code. I'm still considering whether to fix re-highlight, or find something simpler to replace it. #376
|
Disabled syntax highlighting for now, since this crash seems pretty bad. @p-himik, thanks for the detailed analysis, I'll look into it. It may be just because I'm new, but re-highlight seems hard to maintain. I'm considering whether to fix re-highlight or replace it with something simpler. |
|
Both highlighting & crash removed in 1.7.0 |
The highlight.js integration has been costly to maintain, both for day8 and for our users. See: #376 Now, we use rewrite-clj and reagent for minimalistic highlighting. This is similar to borkdude's approach: https://blog.michielborkent.nl/writing-clojure-highlighter.html rewrite-clj labels forms by their type and purpose. It provides a zipper api for expressive traversal, including line & char numbers. Now, we simply transform rewrite-clj's node tree into hiccup. We do two post-order traversals, which isn't ideal, but it works. We could consolidate the traversal with some careful refactoring. TODO: ::highlighted-form-bounds is mostly regex math which reverse-engineers the output of re-frame-debux. Now, ::highlighted? adds another layer of reverse-engineering. It seems like we could delete all this calculation, and delete zprint, if re-frame-debux could simply provide the node tree. re-frame-debux could also provide some analysis data from clj-kondo, making it possible to color locals differently from globals, for instance.
The highlight.js integration has been costly to maintain, both for day8 and for our users. See: #376 Now, we use rewrite-clj and reagent for minimalistic highlighting. This is similar to borkdude's approach: https://blog.michielborkent.nl/writing-clojure-highlighter.html rewrite-clj labels forms by their type and purpose. It provides a zipper api for expressive traversal, including line & char numbers. Now, we simply transform rewrite-clj's node tree into hiccup. We do two post-order traversals, which isn't ideal, but it works. We could consolidate the traversal with some careful refactoring. TODO: ::highlighted-form-bounds is mostly regex math which reverse-engineers the output of re-frame-debux. Now, ::highlighted? adds another layer of reverse-engineering. It seems like we could delete all this calculation, and delete zprint, if re-frame-debux could simply provide the node tree. re-frame-debux could also provide some analysis data from clj-kondo, making it possible to color locals differently from globals, for instance.
The highlight.js integration has been costly to maintain, both for day8 and for our users. See: #376 Now, we use rewrite-clj and reagent for minimalistic highlighting. This is similar to borkdude's approach: https://blog.michielborkent.nl/writing-clojure-highlighter.html rewrite-clj labels forms by their type and purpose. It provides a zipper api for expressive traversal, including line & char numbers. Now, we simply transform rewrite-clj's node tree into hiccup. We do two post-order traversals, which isn't ideal, but it works. We could consolidate the traversal with some careful refactoring. TODO: ::highlighted-form-bounds is mostly regex math which reverse-engineers the output of re-frame-debux. Now, ::highlighted? adds another layer of reverse-engineering. It seems like we could delete all this calculation, and delete zprint, if re-frame-debux could simply provide the node tree. re-frame-debux could also provide some analysis data from clj-kondo, making it possible to color locals differently from globals, for instance.
The highlight.js integration has been costly to maintain, both for day8 and for our users. See: #376 Now, we use rewrite-clj and reagent for minimalistic highlighting. This is similar to borkdude's approach: https://blog.michielborkent.nl/writing-clojure-highlighter.html rewrite-clj labels forms by their type and purpose. It provides a zipper api for expressive traversal, including line & char numbers. Now, we simply transform rewrite-clj's node tree into hiccup. We do two post-order traversals, which isn't ideal, but it works. We could consolidate the traversal with some careful refactoring. TODO: ::highlighted-form-bounds is mostly regex math which reverse-engineers the output of re-frame-debux. Now, ::highlighted? adds another layer of reverse-engineering. It seems like we could delete all this calculation, and delete zprint, if re-frame-debux could simply provide the node tree. re-frame-debux could also provide some analysis data from clj-kondo, making it possible to color locals differently from globals, for instance.
|
Added new highlighting that doesn't depend on highlight.js. No more react bugs. |
|
Thanks, it's appreciated! |
What happened?
This issue may be related to #346, but a) the error message is different, and b) I'm using shadow-cljs rather than any version of figwheel.
If I open the 10x panel to the Events tab, and then move the mouse up and down between the
fn-tracedand the lower part, the panel crashes and disappears, leaving errors in the JS console.Some things that didn't solve it:
Happy to answer any questions I can!
Screencap in case that's helpful:
Screen.Recording.2022-08-02.at.2.54.52.PM.mov
Thanks to all for your work on 10x <3
10x Version
1.4.1
Reagent Version
1.1.0
React Version
^16.14.0
re-frame Version
1.2.0
What browsers are you seeing the problem on?
Firefox, Chrome
Relevant console output
The text was updated successfully, but these errors were encountered: