search

code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

Incompatibility with Preact #272

Closed yannbf closed 1 year ago

yannbf commented 1 year ago

Edit: it was discovered that the issue is actually an incompatibility with Preact

Hello 👋

I really really love this lib, thank you so much for implementing it! I switched the snippet lib in my blog to use CodeHike and it looks great, there's only one unfortunate side effect.. sometimes the code is not visible after resizing, or when I visit my website on mobile and scroll back and forth:

I don't know exactly what's going on, but I see that there are inline changes in the element which change its properties, including opacity, which makes things "invisible":

2022-08-22 10 29 41

Here's the website in question.

I'd love to get some light on what could be causing it. Thank you so much!

pomber commented 1 year ago

Interesting, I haven't seen that. What Code Hike version are you using? is the blog open source?

yannbf commented 1 year ago

Thanks for the quick answer @pomber! The version is 0.7.3 and yes it's open source.

pomber commented 1 year ago

Thanks. I'll take a look later.

If you can provide a smaller project reproducing the issue it would help us find the problem faster.

pomber commented 1 year ago

I think I've found the problem. You are using preact for the production build, I haven't tested Code Hike with preact yet.

Let me know if you can confirm that's the problem. Next week I'm going to see how hard it is to make Code Hike compatible with preact, it may be an easy fix.

yannbf commented 1 year ago

@pomber that was it. You're the best!! Thank you so much for that info, and sorry for the trouble. I renamed the issue, though honestly feel free to close it, I don't really expect you to bring preact compatibility to this library.

Honestly this made me realize how weird practice it is to use React on dev and ship Preact on prod, which can lead to puzzling production issues like these. I'm now always using React.

Thanks a lot once again, have a wonderful weekend!

pomber commented 1 year ago

Thanks. I also think it's risky to switch to preact in prod. But as far as I know, preact should work with code hike since we aren't using anything incompatible.

I think I found the problem, but it looks like a preact bug to me: https://github.com/preactjs/preact/issues/3695. Let's wait for their answer.

pomber commented 1 year ago

I think I found the problem, but it looks like a preact bug to me: preactjs/preact#3695. Let's wait for their answer.

Fixed in Preact v10.11.0