<script>
	export { foo }
</script>

This is the imparative interface of the component (as opposed to its declarative counterart $props).

# Usage

playground

<script>
	import Button from './Button.svelte'

	let ref = $state()
</script>

<form
	onsubmit={(e) => {
		e.preventDefault()
		ref.highlight(Math.random() > 0.5 ? 'green' : 'red')
	}}
>
	<Button bind:this={ref}>save</Button>
</form>

<script>
	let { children } = $props()
	let color = $state(null)

	function highlight(new_color) {
		color = new_color
		setTimeout(() => (color = null), 3000)
	}

	export { highlight }
</script>

<button style:--highlight={color}>
	{@render children?.()}
</button>

<style>
	button {
		padding: 0.5rem 1rem;
		color: var(--highlight, #ddd);
		border: 2px solid var(--highlight, #ddd);
		transition:
			color 250ms,
			border-color 250ms;
	}
</style>

The equivalent with $props values or callbacks would be far more difficult. This feature is a catch-all and should be used sparingly. Primarily focused on side effects and non-$state changes.