I'm finally scratching the surface of how much simpler application code becomes with Svelte. I never expected such a stark difference, yet here we are.
React hook to track an element's height, vs the Svelte equivalent—it's amazing how much simpler things get with a compile step.
React hook to track an element's height, vs the Svelte equivalent—it's amazing how much simpler things get with a compile step.
Usage is equally simple.
Get a "ref" to the element via screenshot #1 (el is just a variable declared with let - lmao this feels like cheating)
Then ... just use it. That's screenshot #2
Get a "ref" to the element via screenshot #1 (el is just a variable declared with let - lmao this feels like cheating)
Then ... just use it. That's screenshot #2
Oh but you don't want the initial display of the thing you're animating to slide down, right? On initial render it should just be there, fully formed (if open)?
That's easy too, since Svelte uses regular JavaScript, which is way easier than algebraic effects 😏
That's easy too, since Svelte uses regular JavaScript, which is way easier than algebraic effects 😏
And sure, getConfig could break if you conditionally render content that's animating. Ie
<div bind:this={el}>
{#if open}
...
and open is false initially, you'll fail to animate on the initial opening.
Just throw an alwaysAnimate flag in there or w/e. It's Just JS—easy.
<div bind:this={el}>
{#if open}
...
and open is false initially, you'll fail to animate on the initial opening.
Just throw an alwaysAnimate flag in there or w/e. It's Just JS—easy.
I guess we've come full circle from this (I think, iirc) subtweet on micro Redux alternatives.
Turns out if you add an AOT Compilation step, you can massively reduce bundle size, improve perf, all while reducing application code.
Turns out if you add an AOT Compilation step, you can massively reduce bundle size, improve perf, all while reducing application code.
Oh and sincere hat tip, and an owed beer to @Rich_Harris for making this work. The code in screenshot #1 causes a new store to be created on el changing. Store then changes via resize observer.
The reactive statement in screenshot #2 correctly fires for *both*
Well done 👊💯🍻
The reactive statement in screenshot #2 correctly fires for *both*
Well done 👊💯🍻
Hey all - see thread here - the React code doesn’t need to be that complex - BUT it also won’t work with a changing ref. (neither my original nor simplified alternatives like Devon’s here)
https://twitter.com/AdamRackis/status/1327261406350151681
• • •
Missing some Tweet in this thread? You can try to
force a refresh
