Development server and HMR in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you save a Svelte component during development?

You have a Svelte component running on the development server with Hot Module Replacement (HMR) enabled. You change the text inside the component and save the file.

What is the expected behavior in the browser?

Svelte

<script>
  let count = 0;
</script>
<button on:click={() => count++}>
  Clicked {count} times
</button>

A Only the changed component updates in the browser, preserving the count state.

B The browser reloads the entire page, resetting the count to zero.

C The browser shows an error because HMR is not supported in Svelte.

D The component does not update until you manually refresh the browser.

💡 Hint

Think about what Hot Module Replacement means for state and UI updates.

With HMR enabled, Svelte updates only the changed component in the browser without a full page reload. This preserves the component's state like the count variable.

📝 Syntax

intermediate

Which command starts the Svelte development server with HMR enabled?

You want to start a Svelte project development server that supports Hot Module Replacement.

Which command should you run?

A npm run build

B npm start

C svelte-hmr serve

D npm run dev

💡 Hint

Check the default scripts in a Svelte project created with Vite.

In a Svelte project using Vite, the npm run dev command starts the development server with HMR enabled by default.

🔧 Debug

advanced

Why does the Svelte component not update after saving changes during development?

You edit a Svelte component and save it, but the browser does not reflect the changes. The development server is running.

What is the most likely cause?

A The browser cache is preventing updates; you need to clear it manually.

B The development server crashed and needs to be restarted.

C HMR is disabled or misconfigured in the project setup.

D Svelte components require a full page reload to update during development.

💡 Hint

Consider the role of HMR in live updates.

If HMR is disabled or not set up correctly, saving changes won't update the component live. The development server may still run, but no hot updates occur.

❓ state_output

advanced

What happens to component state during HMR in Svelte?

Consider a Svelte component with a counter state. You increment the counter to 5, then save a code change with HMR enabled.

What is the value of the counter after the update?

Svelte

<script>
  let count = 0;
</script>
<button on:click={() => count++}>
  Count: {count}
</button>

A The counter resets to 0 because the component reloads fully.

B The counter remains at 5 because HMR preserves component state.

C The counter value becomes undefined due to state loss.

D The counter increments automatically by 1 after update.

💡 Hint

Think about how HMR handles component state during updates.

Svelte's HMR preserves the component's local state during updates, so the counter stays at 5 after saving changes.

🧠 Conceptual

expert

Which statement best describes the role of the development server in Svelte with HMR?

Choose the statement that correctly explains how the development server and Hot Module Replacement work together in a Svelte project.

A The development server watches files, recompiles changed modules, and HMR injects updates into the running app preserving state.

B The development server disables caching and forces full reloads on every file save to simulate HMR.

C The development server only serves the app; HMR is handled by the browser independently without recompilation.

D The development server compiles Svelte code once and serves static files; HMR reloads the entire page on changes.

💡 Hint

Consider how live updates happen without full reloads.

The development server watches for file changes and recompiles only the changed modules. HMR then injects these updates into the running app, preserving the app state and avoiding full reloads.