Svelte components in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

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>

B Error: name prop missing

C <h1>Hello, Alex!</h1>

D Hello, undefined!

💡 Hint

Remember how props are passed from Astro to Svelte components.

The Astro page passes the variable userName as the name prop to the Svelte component. The component uses this prop to render 'Hello, Alex!'.

📝 Syntax

intermediate

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';
---
<Button />

B

---
import { Button } from '../components/Button.svelte';
---
<Button />

C

---
import Button from '../components/Button';
---
<Button />

D

---
import Button from '../components/Button.svelte';
---
<<Button>>

💡 Hint

Astro requires default import for Svelte components with .svelte extension.

Svelte components are default exports, so you import them with 'import Button from ...'. The component is then used as

🔧 Debug

advanced

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>

A The Counter.svelte file is missing a default export statement.

B The Svelte component is not hydrated because Astro requires explicit client directive for interactivity.

C The count prop is not passed correctly; it should be count="5" as a string.

D Astro does not support passing props to Svelte components.

💡 Hint

Think about how Astro handles client-side interactivity with Svelte components.

Astro renders Svelte components as static HTML by default. To enable interactivity or dynamic props, you must add a client directive like client:load or client:visible.

❓ state_output

advanced

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>

A Clicked 2 times

B Clicked 0 times

C Clicked 1 times

D Clicked NaN times

💡 Hint

Each click calls increment which adds 1 to count starting from initial 0.

The count starts at 0 and increments by 1 on each click. After two clicks, count is 2, so the button text shows 'Clicked 2 times'.

🧠 Conceptual

expert

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?

A client:idle

B client:media

C client:load

D client:visible

💡 Hint

Think about lazy hydration triggered by visibility.

The client:visible directive hydrates the component only when it enters the viewport, improving performance by delaying hydration until needed.

Practice

1. What is the main reason to use Svelte components inside an Astro project?

easy

A. To replace Astro's static rendering completely

B. To write server-side code only

C. To style the website using CSS only

D. To add interactivity and dynamic behavior to the website

Solution

1. Step 1: Understand Astro's role

   Astro mainly builds static sites but allows adding interactivity with components.

2. Step 2: Role of Svelte components

   Svelte components add interactive features like buttons, forms, or animations inside Astro.

3. Final Answer:

   To add interactivity and dynamic behavior to the website -> Option D

4. Quick Check:

   Interactivity = Svelte components in Astro [OK]

Hint: Svelte in Astro = add interactivity, not just static content [OK]

Common Mistakes:

• Thinking Svelte replaces Astro's static rendering
• Confusing Svelte with styling tools
• Assuming Svelte is only for server code

2. Which is the correct way to import a Svelte component named Button.svelte in an Astro file?

easy

A. import Button from './Button.svelte';

B. import Button from './Button.js';

C. import { Button } from './Button.svelte';

D. require('./Button.svelte');

Solution

1. Step 1: Identify correct import syntax in Astro

   Astro uses ES module syntax with import Component from './Component.svelte'.

2. Step 2: Check file extension and import style

   The component file ends with .svelte and is imported as default export.

3. Final Answer:

   import Button from './Button.svelte'; -> Option A

4. Quick Check:

   Default import + .svelte file = import Button from './Button.svelte'; [OK]

Hint: Use default import with .svelte extension for Svelte components [OK]

Common Mistakes:

• Using .js extension instead of .svelte
• Using named import instead of default
• Using CommonJS require() instead of import

3. Given this Astro code snippet, what will be rendered on the page?

---
import Counter from './Counter.svelte';
---

Assuming Counter.svelte shows the starting number inside a <p> tag.

medium

A. 0

B. 5

C. Error: start prop not recognized

D. undefined

Solution

1. Step 1: Understand prop passing in Astro to Svelte

   Props like start={5} are passed to Svelte components as expected.

2. Step 2: Check component behavior

   The Counter component displays the start prop inside a paragraph, so it shows 5.

3. Final Answer:

   <p>5</p> -> Option B

4. Quick Check:

   Prop passed correctly = 5 shown [OK]

Hint: Props passed as attributes render inside component [OK]

Common Mistakes:

• Assuming default 0 without checking prop
• Thinking prop names must be strings
• Expecting error without reason

4. What is wrong with this Astro code importing a Svelte component?

---
import MyButton from './MyButton.svelte'
---

medium

A. Missing semicolon after import statement

B. Svelte components cannot be used as tags in Astro

C. No error, code is correct

D. No closing tag for <MyButton>

Solution

1. Step 1: Check import syntax

   Import statement is valid without semicolon; semicolons are optional in JavaScript/TypeScript.

2. Step 2: Check component usage

   Svelte components can be used as tags in Astro with self-closing or paired tags; here paired tags are correct.

3. Final Answer:

   No error, code is correct -> Option C

4. Quick Check:

   Valid import and usage = No error, code is correct [OK]

Hint: Semicolons optional; Svelte components used as tags in Astro [OK]

Common Mistakes:

• Thinking semicolon is mandatory
• Believing Svelte components can't be used as tags
• Confusing self-closing with paired tags

5. You want to add a Svelte component Toggle.svelte inside an Astro page that changes text on click. Which steps are needed to make it interactive inside Astro?

hard

A. Import the component, add client:load directive on the tag for hydration

B. Import the component, use it as a tag, and Astro handles hydration automatically

C. Write the component code inside Astro file without import

D. Use only Astro components; Svelte cannot be interactive in Astro

Solution

1. Step 1: Import and use Svelte component in Astro

   Import Toggle.svelte and use it as a tag in Astro frontmatter and template.

2. Step 2: Enable hydration for interactivity

   Add client:load or similar directive to tell Astro to hydrate the component on the client for interactivity.

3. Final Answer:

   Import the component, add client:load directive on the tag for hydration -> Option A

4. Quick Check:

   Hydration directive needed for interactivity [OK]

Hint: Add client:load to hydrate interactive Svelte components [OK]

Common Mistakes:

• Assuming Astro auto-hydrates all components
• Not adding hydration directive
• Trying to write Svelte code inside Astro without import