-
-
Notifications
You must be signed in to change notification settings - Fork 68
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[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-frame and 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-traced
and 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: