Post

🌱 Just released Svelte Render Scan - a visual debugging tool that helps you track component re-renders in your app. Useful for debugging reactivity and performance issues in your Svelte apps! https://khromov.github.io/svelte-render-scan/

Nice! If you don't want to deal with the bottom right overlay, I just pushed 1.0.4 where you can use `import { RenderScanObserver } from 'svelte-render-scan';` to just get the highlighting without the icon, or you can pass <RenderScan hideIcon={true} /> prop for the same effect.

thanks! I think the Icon is actually super-helpful for Storybook in particular (since it's an SPA). I just extended my example so that svelte-render-scan is only displayed when &debug query param exists. And initial state is set to off (here I had to provide a fallback false - let me check 1.0.4)

Cool, let me know if something doesn't work well! FYI Right now if you toggle the switch at least once it writes the last saved value to localStorage, this is useful b/c otherwise every full reload will reset it to initial setting. If useful I could add `persist={boolean}` prop to toggle behavior.

That's so dope! 🤩 Bringing debugging experience to next level. If @reinhold.is agrees, you could create a PR with adding this recipe to README

I'd be more than happy to! I also extended my use case a bit, so that the wrapper grabs a param (debug) from the URL and passes it as a props. While the Storybook router purges the param from the url, the state is preserved! Neat! bsky.app/profile/fubi...

Oh that's cool! Sounds like a perfect use case for an addon 😉 Would be cooler if it was a Tool in the toolbar instead of a query param. storybook.js.org/docs/essenti...

@reinhold.is this 👆 was my decorators-for-Svelte example that I mentioned at the summit. I couldn’t find documentation for decorators in CSF but I think there were some examples in an issue or so, and that’s how I figured it out.