Svelte
65 bites tagged Svelte — interview questions with model answers, and 60-second explainers.
SvelteKit 2.56 overhauls remote functions, adds TypeScript 6.0
SvelteKit 2.56 overhauls remote functions with breaking changes to query refreshes, caching, and a new run() method, plus TypeScript 6.0 support. The Svelte CLI adds experimental community plugins. Audit your remote function calls before upgrading.
SvelteKit 2.61 breaks remote functions, adds live queries
SvelteKit 2.61 removes .run() from remote queries and rewrites enhance callbacks, forcing refactors. New query.live() adds async-iterable real-time streams. If you use remote functions, check three breaking changes before upgrading.
How do Vue, Angular, and Svelte stores trigger component re-renders?
Tests deep knowledge of reactivity primitives. Contrast Vue's proxy subscriptions, Angular's RxJS push through async pipe or markForCheck, and Svelte's compiler-generated store invalidation. Red flag: claiming all three use virtual DOM diffing or polling.
How would you unit-test a Svelte date utility with Vitest?
This question tests isolating pure logic from Svelte and configuring Vitest. A good answer covers installing Vitest, co-locating a spec file, and asserting known inputs. A red flag is insisting you must mount a Svelte component to test a plain function.
How do Vue, Angular, and Svelte handle deep prop mutation re-rendering?
Vue and Svelte detect nested mutations via Proxies; Angular default re-renders via Zone.js, but ngOnChanges misses it since the reference is unchanged. Deep reactivity vs zone-driven dirty checking.
How does Angular's Zone.js change detection differ from Vue and Svelte reactivity?
Tests granular reactivity architecture. Angular Zone.js monkey-patches async to scan the full component tree; Vue uses runtime Proxy tracking; Svelte compiles runes into targeted DOM bindings.
How does Svelte compile count += 1 into DOM updates?
Tests if you know Svelte reactivity is compile-time via runes, not runtime proxies. Good answer: $state marks reactive vars; runes are compiler hooks; compiler emits DOM-sync code. Red flag: describing useState or VDOM.
Why is Svelte called a 'disappearing framework'?
Tests whether you understand compile-time versus runtime-heavy frameworks. A strong answer says Svelte compiles components to vanilla JS at build time, shipping a tiny runtime instead of a reconciler or virtual DOM. Red flag: claiming there is zero runtime.
How do you test a Svelte component updates a writable store?
Import the store with the component, render, await fireEvent.click, then assert the store value. Integration of Svelte writable stores with Testing Library. Using component internals or treating fireEvent as sync.
How do you architect Svelte stores to minimize WebSocket re-renders?
Tests Svelte store granularity and subscription semantics. A great answer splits the monolith into domain stores, uses derived selectors to isolate slices, and leverages readable stores to encapsulate the WebSocket source.
How does Svelte surgically update the DOM without VDOM?
Tests VDOM overhead vs compile-time optimization. A strong answer explains that Svelte compiles reactive dependencies into direct DOM API calls, skipping tree creation and diffing. Red flag: claiming VDOM is slow because the DOM itself is slow.
Explain Svelte Action update and provide a reactive CSS example
Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.
How would you create a parameterized Svelte tooltip Action?
It tests your grasp of the Svelte Action lifecycle for reactive parameters. Answer: action takes node and parameter, returns update and destroy, bound as use:tooltip={text}. Using component events instead of the Action API, or omitting update, is a red flag.
What is a Svelte Action? Write a simple logging action.
Define a function receiving the node, log a message, and optionally return destroy. Whether you understand a Svelte action as a lifecycle function attached to a DOM node via use: and can write its minimal signature.
What are nested routes and why are they useful?
Nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content. hierarchical UI-to-URL mapping. flat routes with duplicated parent wrappers in every child.
Build a reactive data-fetching utility with Svelte stores
Tests store composition for async data fetching with caching and auto re-fetch. Strong answer: readable for lifecycle, derived's set callback for race-safe fetches, writable for private inputs. Red flag: exposed internals or missing cleanup.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
How would you architect a multi-step Svelte wizard with Stores?
Tests state isolation and validation orchestration across wizard steps. A solid answer uses a centralized store with step slices, derived validity stores, and pre-navigation guards. Red flag: unrelated per-step stores or validation only on final submit.
How would you build a reusable Svelte validation action?
Tests Svelte action lifecycles versus inline logic. Strong answers describe a node function that attaches input or blur listeners, toggles classes or ARIA directly, returns update and destroy, and cite reusability.
Bind an input to a variable and validate with reactivity
Tests Svelte reactivity: connecting DOM state to validation logic. Good answer: `$state` for the variable, `$effect` to run validation when it changes, cleanup if needed. Red flag: using effects where event handlers suffice or creating infinite loops.
How do you bypass Svelte's scoped styles to target global elements?
Tests Svelte style encapsulation escape hatches. Strong answer: :global() syntax for elements and classes, plus risks like leaky side effects and specificity wars. Red flag: external stylesheets or inline styles as the primary solution.
How does Svelte scope component styles during compilation?
The compiler adds a unique attribute to component elements and rewrites selectors to target it, isolating styles. Knowledge of Svelte's compile-time CSS encapsulation. Claiming scoping uses runtime JS or shadow DOM.
Implement auto-cleanup reactive logic in Vue's Composition API and Svelte
Vue pairs onMounted with onUnmounted or watchEffect cleanup; Svelte uses $store auto-subscription or onDestroy. Binding streams to lifecycles without leaks.
Get Svelte bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.