Svelte Flashcards
What is a component in Svelte, and how is it defined?
A component in Svelte is a reusable, self-contained block of code that encapsulates HTML, CSS, and JavaScript. It is defined in a .svelte file.
How can you add data to a Svelte component?
To add data to a Svelte component, you can use a
tag inside the component and declare variables. For example:
<script> let name = 'Svelte'; </script>
How do you reference a variable in the markup of a Svelte component?
To reference a variable in the markup of a Svelte component, you use curly braces. For example:
<h1>Hello {name}!</h1>
Can you use JavaScript expressions inside the curly braces in Svelte markup?
Yes, you can use any JavaScript expression inside the curly braces. For example:
<h1>Hello {name.toUpperCase()}!</h1>
This will result in a shoutier greeting by converting the name to uppercase.
How can you use curly braces to control element attributes in a Svelte component?
In Svelte, you can use curly braces to control element attributes. For example:
<img src={src} />
Why is it important to include the alt attribute for an <img></img> element in Svelte?
Including the alt attribute is important for accessibility (a11y) in web apps. It provides a description of the image for people using screen readers or those with slow or unreliable internet connections.
How do you use curly braces inside attributes in Svelte?
Curly braces inside attributes are used to include dynamic content. For instance:
<img src={src} alt=”A man dances.” />
You can replace the static text with dynamic content like variables declared in the
block.
What is the shorthand Svelte provides for attributes when the name and value are the same?
Svelte provides a shorthand for attributes where the name and value are the same. For example:
<img {src} alt=”{name} dances.” />
How can you render HTML directly into a Svelte component?
<p>{@html string}</p>
What caution should you take when using the {@html …} tag in Svelte?
When using the {@html …} tag in Svelte, it’s important to note that Svelte doesn’t perform any sanitisation of the expression inside {@html …}. If the content comes from untrusted sources, such as user-generated comments, manual escaping is crucial to prevent Cross-Site Scripting (XSS) attacks.
Why is manual escaping necessary when using {@html …} in Svelte?
Manual escaping is necessary when using {@html …} in Svelte, especially for untrusted content like user comments. Without proper escaping, there is a risk of exposing users to Cross-Site Scripting (XSS) attacks. Svelte doesn’t automatically sanitize the content inside {@html …}.
When might you use the {@html …} tag in a Svelte component?
The {@html …} tag in Svelte is useful when you need to render HTML directly into a component. It’s often used for scenarios like including HTML content from external sources or rendering dynamic HTML generated at runtime.
What is the core mechanism in Svelte that ensures synchronisation between the DOM and the application state?
Svelte relies on a powerful system of reactivity to maintain synchronisation between the DOM and the application state.
How does Svelte handle events and reactivity in the provided example involving a button?
In the given Svelte example, the on:click directive is used to wire up an event handler (increment) to the button’s click event. The increment function modifies the count variable, and Svelte’s reactivity system automatically updates the DOM to reflect the changes.
What is the purpose of reactive declarations in Svelte, and how are they defined?
Reactive declarations in Svelte are used to compute values from other parts of a component’s state and automatically update when those parts change. They are defined using the syntax like $: doubled = count * 2;, where count is a variable being observed.
In Svelte, when does a reactive declaration run, and how does it impact the rendering process?
A reactive declaration in Svelte runs whenever any of the referenced values change. It runs after other script code and before the component markup is rendered. Reactive declarations help in computing values dynamically and keeping the DOM in sync with the changing state.
Why won’t array methods like push automatically trigger updates in Svelte, and what is the consequence of not handling this issue?
In Svelte, array methods like push won’t automatically trigger updates because Svelte’s reactivity is triggered by assignments. Failing to address this issue would result in changes to the array not reflecting in the DOM, causing the UI to be out of sync with the state.
<!-- Example of not triggering reactivity -->
<script>
let numbers = [];
function addNumber() {
numbers.push(numbers.length + 1);
// Without additional assignment, this won't trigger reactivity
}
</script>
What is the idiomatic solution in Svelte to ensure reactivity when using array methods like push, and how does it work?
The idiomatic solution in Svelte is to use the spread operator to create a new array with the updated values. For example: numbers = […numbers, numbers.length + 1];. This ensures that reactivity is triggered, and the DOM is updated accordingly.
<!-- Idiomatic solution to ensure reactivity with array methods -->
<script>
let numbers = [];
function addNumber() {
numbers = [...numbers, numbers.length + 1];
// This triggers reactivity in Svelte
}
</script>
How can you handle reactivity when modifying arrays or objects in Svelte, and what is the simple rule of thumb to follow?
To handle reactivity when modifying arrays or objects in Svelte, you need to ensure that the variable name appears on the left side of the assignment. For example, instead of using obj.foo.bar = 2;, use obj = obj; after the modification to trigger reactivity.
<!-- Example of handling reactivity with object modification -->
<script>
let obj = { foo: { bar: 1 } };
let foo = obj.foo;
foo.bar = 2;
obj = obj; // This triggers reactivity in Svelte
</script>
What is the purpose of declaring properties (props) in Svelte components, and how are they declared?
In Svelte, declaring properties (props) is essential for passing data from a parent component to its children. Props are declared using the export keyword within a
block in the child component.
<!-- Example of declaring a prop in Svelte -->
<script> export let answer; </script>
Why does the syntax for declaring props in Svelte, using the export keyword, differ from typical JavaScript module exports?
The syntax for declaring props in Svelte with the export keyword may seem unconventional compared to typical JavaScript module exports. However, this syntax is specific to Svelte and is designed to facilitate the passing of data from parent to child components.
<!-- Example of declaring a prop in Svelte -->
<script> export let answer; </script>
How can default values for props be specified in Svelte, and what is the purpose of providing default values?
In Svelte, default values for props can be specified using the export let variable = defaultValue; syntax. This allows a component to have a default value for a prop in case the prop is not explicitly provided when the component is used. Default values ensure that components work seamlessly even when certain props are omitted.
<!-- Example of specifying default values for props in Svelte -->
<script> export let answer = 'a mystery'; </script>
How does a component handle props that are not explicitly provided, and what is the behaviour when using default values?
When a component is used without explicitly providing a prop, it falls back to the default value specified for that prop. This ensures that the component can operate with sensible default values even if some props are not explicitly set by the parent component.
<!-- Example of using a component with and without explicitly providing a prop -->
<Nested answer={42}/>
<Nested></Nested>
<!-- Falls back to the default value 'a mystery' -->
How can you pass multiple props to a Svelte component when the properties of an object correspond to the component’s expected props, and what is the benefit of using this approach?
In Svelte, you can use the ‘spread’ syntax ({…object}) to pass multiple props to a component when the properties of an object match the expected props of the component. This approach allows for a concise and readable way to pass all relevant properties without explicitly listing each one. It is particularly useful when the structure of the object aligns with the expected props of the component.
<!-- Example of spreading props onto a component -->
<script>
import PackageInfo from './PackageInfo.svelte';
const pkg = {
name: 'svelte',
speed: 'blazing',
version: 4,
website: 'https://svelte.dev'
};
</script>
<PackageInfo {…pkg} />
{count} is greater than 10
{/if}...waiting
{:then number}The number is {number}
{:catch error}{error.message}
{/await}