{PuruVijay}.svelte
@puruvj.dev
compressionist, performance freak. @sveltejs team. 9 years experience. Thrice Conference Speaker ex-@stackblitz. ❤️🎸 Hans Zimmer. CodeFu: https://github.com/puruvj
✨ Introducing svelte-interval-rune ✨
🔥Reactive Durations: Dynamically change interval timings
🧘Simple, intuitive, clean
🗑️Automatic Cleanup: No memory leak
🦥Lazy Initialization: Intervals only created on .current
🤌Tiny: Only 203B min+br
www.npmjs.com/package/svel...
🔥Reactive Durations: Dynamically change interval timings
🧘Simple, intuitive, clean
🗑️Automatic Cleanup: No memory leak
🦥Lazy Initialization: Intervals only created on .current
🤌Tiny: Only 203B min+br
www.npmjs.com/package/svel...
July 14, 2025 at 11:34 AM
✨ Introducing svelte-interval-rune ✨
🔥Reactive Durations: Dynamically change interval timings
🧘Simple, intuitive, clean
🗑️Automatic Cleanup: No memory leak
🦥Lazy Initialization: Intervals only created on .current
🤌Tiny: Only 203B min+br
www.npmjs.com/package/svel...
🔥Reactive Durations: Dynamically change interval timings
🧘Simple, intuitive, clean
🗑️Automatic Cleanup: No memory leak
🦥Lazy Initialization: Intervals only created on .current
🤌Tiny: Only 203B min+br
www.npmjs.com/package/svel...
Effect-free reactive Interval utility in svelte 5! You can also have it attached to a state variable, un-attach and reattach at any point!
July 13, 2025 at 7:45 PM
Effect-free reactive Interval utility in svelte 5! You can also have it attached to a state variable, un-attach and reattach at any point!
OK wow I like this pattern: Niceties of recursion without the stack overflow
July 11, 2025 at 7:20 PM
OK wow I like this pattern: Niceties of recursion without the stack overflow
Interesting lens pattern for deep immutable state updates!
July 11, 2025 at 7:09 PM
Interesting lens pattern for deep immutable state updates!
Whoa!!! 48M total npm downloads of my packages till date 🤯🤯🤯
July 11, 2025 at 12:51 PM
Whoa!!! 48M total npm downloads of my packages till date 🤯🤯🤯
And we just hit 2200 🥳🥳🥳
That's +400 in just 10 days. We're so back!
That's +400 in just 10 days. We're so back!
July 9, 2025 at 8:31 AM
And we just hit 2200 🥳🥳🥳
That's +400 in just 10 days. We're so back!
That's +400 in just 10 days. We're so back!
You can use emojis as import aliases. Here's a snippet from macos-web. app
July 8, 2025 at 10:41 AM
You can use emojis as import aliases. Here's a snippet from macos-web. app
Question: What are your favorite drag and drop libraries, and what are your biggest beef with them? React, Svelte, Vue, Angular, Vanilla, whatever comes to your mind
More responses could mean a kickass library later this year 👀👀
More responses could mean a kickass library later this year 👀👀
July 3, 2025 at 6:38 PM
Question: What are your favorite drag and drop libraries, and what are your biggest beef with them? React, Svelte, Vue, Angular, Vanilla, whatever comes to your mind
More responses could mean a kickass library later this year 👀👀
More responses could mean a kickass library later this year 👀👀
2.1k stars 🔥🔥🔥. +250 in just a week 🤩
July 3, 2025 at 1:26 PM
2.1k stars 🔥🔥🔥. +250 in just a week 🤩
Them: Svelte signals are nice but I like Solid and Angular's more expressive syntax.
Me: Umm...
Me: Umm...
June 28, 2025 at 3:13 PM
Them: Svelte signals are nice but I like Solid and Angular's more expressive syntax.
Me: Umm...
Me: Umm...
Inner workings of liquid glass
June 28, 2025 at 9:10 AM
Inner workings of liquid glass
Wait... that's actually readable! Notice:
$.state() - creates reactive state
$.set() - updates state
$.get() - reads state
$.template_effect() - reactive scope
This is the SAME *visual* pattern as React's useState, Solid's createSignal, Angular's signals!
$.state() - creates reactive state
$.set() - updates state
$.get() - reads state
$.template_effect() - reactive scope
This is the SAME *visual* pattern as React's useState, Solid's createSignal, Angular's signals!
June 28, 2025 at 8:51 AM
Wait... that's actually readable! Notice:
$.state() - creates reactive state
$.set() - updates state
$.get() - reads state
$.template_effect() - reactive scope
This is the SAME *visual* pattern as React's useState, Solid's createSignal, Angular's signals!
$.state() - creates reactive state
$.set() - updates state
$.get() - reads state
$.template_effect() - reactive scope
This is the SAME *visual* pattern as React's useState, Solid's createSignal, Angular's signals!
And here's what it compiles to:
June 28, 2025 at 8:51 AM
And here's what it compiles to:
Same component in Svelte 5:
June 28, 2025 at 8:51 AM
Same component in Svelte 5:
Svelte 4 compiled that into THIS monstrosity:
June 28, 2025 at 8:51 AM
Svelte 4 compiled that into THIS monstrosity:
First, let's look at Svelte 4. This innocent code:
June 28, 2025 at 8:51 AM
First, let's look at Svelte 4. This innocent code:
Wooohooooo!!! Reached 2K stars 😁
June 28, 2025 at 8:16 AM
Wooohooooo!!! Reached 2K stars 😁
I had so muchhhhh fun working on these micro interactions and aesthetic!! Upcoming neodrag docs preview!
June 26, 2025 at 2:31 PM
I had so muchhhhh fun working on these micro interactions and aesthetic!! Upcoming neodrag docs preview!
Migrating from v2:
Most of it is converting options to plugins. Reactivity is now manual instead of automatic - better performance, more predictable.
Most of it is converting options to plugins. Reactivity is now manual instead of automatic - better performance, more predictable.
June 26, 2025 at 2:31 PM
Migrating from v2:
Most of it is converting options to plugins. Reactivity is now manual instead of automatic - better performance, more predictable.
Most of it is converting options to plugins. Reactivity is now manual instead of automatic - better performance, more predictable.
Writing custom plugins:
Plugin API is straightforward. Hook into the drag lifecycle, modify the context. 15 lines gets you magnetic snapping.
Plugin API is straightforward. Hook into the drag lifecycle, modify the context. 15 lines gets you magnetic snapping.
June 26, 2025 at 2:31 PM
Writing custom plugins:
Plugin API is straightforward. Hook into the drag lifecycle, modify the context. 15 lines gets you magnetic snapping.
Plugin API is straightforward. Hook into the drag lifecycle, modify the context. 15 lines gets you magnetic snapping.
Framework support:
Svelte, React, Vue, SolidJS, Vanilla JS
Same plugin system across all of them. Core is a peer dependency so it's deduplicated properly in meta-frameworks.
Svelte, React, Vue, SolidJS, Vanilla JS
Same plugin system across all of them. Core is a peer dependency so it's deduplicated properly in meta-frameworks.
June 26, 2025 at 2:31 PM
Framework support:
Svelte, React, Vue, SolidJS, Vanilla JS
Same plugin system across all of them. Core is a peer dependency so it's deduplicated properly in meta-frameworks.
Svelte, React, Vue, SolidJS, Vanilla JS
Same plugin system across all of them. Core is a peer dependency so it's deduplicated properly in meta-frameworks.
Here's how the plugin composition works:
Stack behaviors together. Each plugin focuses on one thing.
Stack behaviors together. Each plugin focuses on one thing.
June 26, 2025 at 2:31 PM
Here's how the plugin composition works:
Stack behaviors together. Each plugin focuses on one thing.
Stack behaviors together. Each plugin focuses on one thing.
Only pay for(in bytes) what you use:
Basic dragging is small. Each plugin adds only its own weight. Import just what you use instead of paying for the whole library upfront.
Basic dragging is small. Each plugin adds only its own weight. Import just what you use instead of paying for the whole library upfront.
June 26, 2025 at 2:31 PM
Only pay for(in bytes) what you use:
Basic dragging is small. Each plugin adds only its own weight. Import just what you use instead of paying for the whole library upfront.
Basic dragging is small. Each plugin adds only its own weight. Import just what you use instead of paying for the whole library upfront.