How does Svelte compile count += 1 into DOM updates?

WHAT THIS TESTS: Whether the candidate understands that Svelte reactivity is a compile-time concept driven by runes that mark state, rather than a runtime mechanism like proxies or virtual DOM reconciliation. The interviewer wants to hear that the compiler treats runes as special language constructs and uses them to generate imperative update logic that keeps the DOM in sync with application state.

A GOOD ANSWER COVERS: First, that $state is a rune that tells the compiler a variable is reactive and not ordinary. Second, that runes look like functions but are compiler-level language constructs, meaning the compiler intercepts them at build time and treats them as part of the language itself. Third, that the compiler generates code to keep the DOM in sync with that state in response to events, so the developer writes natural imperative mutations like count plus equals one while the compiler handles the rest. Fourth, that this happens without relying on a virtual DOM or runtime diffing because the reactivity system is built into the compilation step.

COMMON WRONG ANSWERS: Confusing Svelte runes with React hooks like useState, which are runtime functions. Describing Vue-style Proxy-based reactivity, which is a runtime interception mechanism. Claiming Svelte uses a virtual DOM and diffs against it. Saying the compiler simply wraps every variable in a Proxy without mentioning runes. Asserting that count plus equals one triggers a setter on a plain object at runtime rather than being recognized by the compiler via the $state rune.

LIKELY FOLLOW-UPS: How do runes differ from Svelte 4's label-based reactive statements? What happens if you mutate state without the $state rune? How does the compiler handle derived state or effects? Can you use runes outside of .svelte files, and how does that affect compilation?

ONE CONCRETE EXAMPLE: In the tutorial example, you write let count equals state of zero and later count plus equals one inside an increment function. The compiler sees the state rune and knows count is reactive application state. When you mutate count, the compiler-generated code updates the button text showing the count and the word time or times without you writing any DOM manipulation or setter logic. The rune makes the reactivity declarative at the variable level, and the compiler turns that into imperative DOM updates behind the scenes.