Improve SSR reliability

[csjh]

Problem is that, for the most part, the way we use and build components is incompatible with Svelte SSR. More specifically one part - reactive statements (ie $: ).

For an ideal SSR experience, we should make it an antipattern to have any reactivity (that might happen during SSR; prop reactivity is an exception) happen through reactive statements, and instead use derived stores and event handlers.

Example from _DataTable:

$: finalColumnOrder = getFinalColumnOrder(
	$props.columns.map((d) => d.id),
	$props.priorityColumns
);
$: orderedColumns = [...$props.columns].sort(
	(a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)
);

should become

const finalColumnOrder = derived(props, ($props) => getFinalColumnOrder(
	$props.columns.map((d) => d.id),
	$props.priorityColumns
));
const orderedColumns = derived([props, finalColumnOrder], ([$props, $finalColumnOrder]) => [...$props.columns].sort(
	(a, b) => $finalColumnOrder.indexOf(a.id) - $finalColumnOrder.indexOf(b.id)
));

or something to that effect

This is especially relevant in components that make use of <slot /> for composing their behaviour (DataTable is also the best example here, should also be the starting point for changes)

General translation guide:

• $: var = something; should become const var = derived(something, ([$something]) => { ... });
• $: if (state) { ... } should become an event handler for whereever state is being changed
• chunky $: { ... }s should be broken down into chunks that should fall into one of the above 2 categories

can be expanded upon w/ exception cases when we start work on this

[csjh]

Not necessarily directly related, but we should also do a once-over of basic prop reactivity to pick up on things like ySet in #2574