23 June 2023

Svelte Component Organisation

Svelte components can get big pretty quickly, in terms of line count. With interactivity that’s closely tied to DOM elements, such as drag and drop functionality, it can be hard to pull chunks of code out into separate utility functions without creating a large API surface between the component and the utility.

It’s also easy to get sloppy with names. I often find myself with similarly-named functions for event handlers and functions that do related stuff. React solved an adjacent problem with the standard event name scheme – object; “did”/“will”; verb.

I’ve recently been playing with a system of organising Svelte components with standard namespace-style variables in the script section. These are all objects. The ones I currently have are: