Svelte and SvelteKit
95 flashcards by MentisLibrary
Building interfaces with Svelte: component structure and scoped styles, reactivity from the dollar-colon label through Svelte 5 runes, props and bindings, events, stores, transitions, and SvelteKit routing, loading and form actions.
- What is Svelte?
- A UI framework that compiles components into small JavaScript modules which update the DOM directly, so there is no virtual DOM and no framework runtime doing diffing at render time.
- What are the three parts of a .svelte file?
- An optional script block for the component's logic, the markup, and an optional style block whose rules are scoped to that component.
- How do you render a value in markup?
- With a single-brace expression; the expression is plain JavaScript and the result is inserted as text.
- How are component styles scoped?
- The compiler adds a generated class to the elements a rule matches and to the selector, so the rule cannot leak out of the component.
- How do you style something outside the component?
- Wrap the selector in :global(...), which tells the compiler to leave that part unscoped.
- How do you import and use a child component?
- Import it in the script block and use it as a capitalized element in the markup.
- How do you declare a prop in Svelte 4?
- With an exported let declaration; the exported name is the attribute the parent sets.
- How do you declare props in Svelte 5?
- With the $props rune, destructuring the object it returns; defaults and renaming use ordinary destructuring syntax.
- How do you give a prop a default value?
- Assign a default in the declaration; the default applies when the parent omits the attribute entirely.
- How do you spread props onto an element or component?
- With the spread syntax inside the tag, which forwards every key of an object as an attribute.
- What does $$props contain in Svelte 4?
- Every prop passed to the component, including ones it did not declare; $$restProps holds only the undeclared ones.
- How does a parent bind to a child's prop?
- With bind: on the component, which makes the prop two-way so the child's changes propagate back.
- How does reactivity work in Svelte 4?
- Assignment is the trigger: the compiler instruments assignments to top-level variables and updates whatever depends on them.
- What does the $: label do?
- Marks a reactive statement: it re-runs whenever any variable it reads changes, and with an assignment on the left it declares a derived value.
- How do you update an array so the view refreshes in Svelte 4?
- Reassign it, either with a spread or by assigning the result of the mutation back to the variable.
- What is a rune?
- A compiler keyword in Svelte 5 written with a dollar prefix, such as $state and $derived, that declares reactivity explicitly instead of inferring it from assignment.
- What does $state do?
- Declares reactive state. Objects and arrays are wrapped in a proxy, so mutating them deeply also triggers updates.
- What does $derived do?
- Declares a value computed from other reactive state, recomputed lazily when its dependencies change.
- What does $effect do?
- Runs a function after the DOM has updated, re-running whenever the reactive values it read change, with an optional returned teardown.
- When should you not use $effect?
- For deriving state from other state. That is what $derived is for, and an effect that assigns to state runs an extra render and can loop.
- What is $state.raw for?
- Declares state that is replaced rather than mutated, skipping the deep proxy so large objects are not wrapped.
- What does $inspect do?
- Logs a reactive value and every subsequent change, in development builds only.
- How do you write a conditional block?
- With {#if}, {:else if}, {:else} and {/if} around the markup.
- How do you loop over a list?
- With {#each}, optionally naming the index and destructuring the item.
- What is a keyed each block?
- An each block given a unique key in parentheses, so Svelte moves and removes the right DOM nodes instead of patching them positionally.
- What does the {:else} branch of an each block do?
- Renders when the collection is empty, giving an empty state with no separate conditional.
- How do you render a promise in markup?
- With an await block, which has branches for the pending, resolved and rejected states.
- What does {@html ...} do?
- Inserts a string as real markup instead of escaping it as text.
- What are snippets in Svelte 5?
- Reusable chunks of markup declared with {#snippet} and rendered with {@render}, taking parameters like a function.
- How does a Svelte 4 component accept content from its parent?
- With a <slot> element, which renders whatever the parent wrote between the component's tags.