Porting a vanilla JavaScript library to Svelte 5 - complete guide

In this video we'll port the (very cute) JavaScript library Oneko.js from vanilla JS to Svelte 4 and Svelte 5.
Original library: github.com/adryd325/oneko.js
Repo: github.com/khromov/svelte-neko

[@ScriptRaccoon]

Nice video! Small remark, at 25:00 a better approach would be to use svelte:document in the markup and add the event listener there. This also works with svelte:window. The advantage is that it is more concise and that Svelte does the cleanup (removing the event listener) for you automatically.

[@UwU-dx5hu]

installed the chrome extension.its fun

[@NicholasMaietta]

I appreciate this!

[@yanisxmine]

thank you for showing how it's done in general! you read all the time "svelte is just javascript so you're good". for a newbie like me the question remained - can you show me once how you do it? what are the points to pay attention to while porting? very much appreciate this guide. btw appreciation jar is beautiful - how you designed the flow, your writing, approach to privacy, etc.

[@StanislavKhromov]

Thank you for your thoughtful comment! ☀

[@ubermatchvlaad532]

Why not use svelte directives instead of js document modifiers i.e. `onmousemove={}` 25:26

[@StanislavKhromov]

👋You can definitely use something like instead of the shown approach. Hopefully it's still useful to see how hooking up event listeners and handling the cleanup works.

[@iconsumepizza]

ON GOD I DONT KNOW HOW TO SCRIPT