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/

Really awesome! I made it work in @storybook.js.org: 1. create simple wrapper - import Svelte Render Scan - pass-through the Story as children 2. add wrapper as a global decorator to Storybook's preview.js PS: @reinhold.is @xeho91.dev I followed examples from this issue github.com/storybookjs/...

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.

Ahhhh! Now that makes sense. Yeah, opt-in to localStorage or making the fact that it persists to localStorage explicit in the first part of the documentation would be great! I think I personally would prefer the opt-in approach because I wouldn’t even expect the localStorage convenience 😂