search

shikijs / shiki-magic-move

Smoothly animated code blocks with Shiki
https://shiki-magic-move.netlify.app/
MIT License
1.11k stars 32 forks source link

feat: react renderer #3

Closed hyoban closed 3 months ago

hyoban commented 3 months ago

I added a React wrapper, most code is just like the Vue version and looks like it works.

antfu commented 3 months ago

I have merged the two playgrounds into one. This could help the long-term maintainability as well as easily compare between different renderers.

Tho with my limited understanding of React, the approach is quite hacky. And we also run into the problem that react renders twice.

hyoban commented 3 months ago

@antfu This problem should have been fixed. The reason is that React requires that the component function must be "pure", so the component will be mounted twice in the dev environment, resulting in multiple commits, overwriting the previous results, and making us unable to see the animation. So I need to compare whether related properties have changed.

Thank you very much for your work merging the playground and refactoring my code.