0
0
Astroframework~20 mins

Svelte components in Astro - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Svelte in Astro Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the rendered output of this Astro page using a Svelte component?
Given the Astro page imports a Svelte component that displays a greeting with a passed name prop, what will the user see when visiting this page?
Astro
/* Astro page: */
---
import Greeting from '../components/Greeting.svelte';
const userName = 'Alex';
---
<html lang="en">
  <body>
    <Greeting name={userName} />
  </body>
</html>

/* Greeting.svelte component: */
<script>
  export let name;
</script>
<h1>Hello, {name}!</h1>
A<h1>Hello, {name}!</h1>
BError: name prop missing
C<h1>Hello, Alex!</h1>
DHello, undefined!
Attempts:
2 left
💡 Hint
Remember how props are passed from Astro to Svelte components.
📝 Syntax
intermediate
1:30remaining
Which option correctly imports and uses a Svelte component in an Astro file?
Select the correct syntax to import and use a Svelte component named Button.svelte inside an Astro page.
A
---
import Button from '../components/Button.svelte';
---
&lt;Button /&gt;
B
---
import { Button } from '../components/Button.svelte';
---
&lt;Button /&gt;
C
---
import Button from '../components/Button';
---
&lt;Button /&gt;
D
---
import Button from '../components/Button.svelte';
---
&lt;&lt;Button&gt;&gt;
Attempts:
2 left
💡 Hint
Astro requires default import for Svelte components with .svelte extension.
🔧 Debug
advanced
2:30remaining
Why does this Astro page fail to hydrate the Svelte component?
This Astro page imports a Svelte component but the page shows static HTML instead of the hydrated component content. What is the cause?
Astro
---
import Counter from '../components/Counter.svelte';
---
<html lang="en">
  <body>
    <Counter count={5} />
  </body>
</html>

/* Counter.svelte */
<script>
  export let count;
</script>
<p>Count is {count}</p>
AThe Counter.svelte file is missing a default export statement.
BThe Svelte component is not hydrated because Astro requires explicit client directive for interactivity.
CThe count prop is not passed correctly; it should be count="5" as a string.
DAstro does not support passing props to Svelte components.
Attempts:
2 left
💡 Hint
Think about how Astro handles client-side interactivity with Svelte components.
❓ state_output
advanced
2:00remaining
What is the displayed count after clicking the button twice in this Svelte component used in Astro?
The Counter.svelte component increments count on button click. What is the displayed count after two clicks?
Astro
<script>
  export let initial = 0;
  let count = initial;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Clicked {count} times</button>
AClicked 2 times
BClicked 0 times
CClicked 1 times
DClicked NaN times
Attempts:
2 left
💡 Hint
Each click calls increment which adds 1 to count starting from initial 0.
🧠 Conceptual
expert
1:30remaining
Which client directive should you use to hydrate a Svelte component only when it becomes visible in the viewport?
You want to optimize performance by hydrating a Svelte component in Astro only when the user scrolls it into view. Which client directive achieves this?
Aclient:idle
Bclient:media
Cclient:load
Dclient:visible
Attempts:
2 left
💡 Hint
Think about lazy hydration triggered by visibility.