Middleware patterns with hooks in Svelte - Mini Project: Build & Apply

Middleware Patterns with Hooks in Svelte

📖 Scenario: You are building a simple Svelte app that processes user input through a series of middleware functions before showing the final result. Middleware functions modify or validate the input step-by-step, similar to how real-world apps handle requests.

🎯 Goal: Create a Svelte component that uses hooks to apply middleware functions to user input. The input will pass through multiple middleware functions that transform or validate it. The final processed output will be displayed live.

📋 What You'll Learn

Create an array of middleware functions

Use a writable store to hold the user input

Create a function that applies all middleware functions in order

Use a Svelte reactive statement to update the processed output

Display the original input and the processed output in the component

💡 Why This Matters

🌍 Real World

Middleware patterns are common in web apps to process user input, validate data, or modify requests before final use. Using hooks and reactive statements in Svelte makes this pattern clean and efficient.

💼 Career

Understanding middleware and reactive data flow is important for frontend developers building interactive apps with frameworks like Svelte, React, or Angular.

1

Setup user input store

Create a writable store called input initialized with an empty string '' using Svelte's writable from 'svelte/store'.

Svelte

import { writable } from 'svelte/store'

// Create a writable store called input initialized to an empty string
// Your code here

Hint

Use import { writable } from 'svelte/store' and then const input = writable('').

2

Define middleware functions array

Add an array called middlewares with exactly two functions: one that trims whitespace from a string parameter called text, and another that converts text to uppercase.

Svelte

import { writable } from 'svelte/store'

const input = writable('')

// Define an array called middlewares with two functions
// Your code here

Hint

Create middlewares as an array with two arrow functions: one uses trim(), the other toUpperCase().

3

Create function to apply middleware

Write a function called applyMiddlewares that takes a string text and returns the result of passing text through all functions in middlewares in order using reduce.

Svelte

import { writable } from 'svelte/store'

const input = writable('')

const middlewares = [
  text => text.trim(),
  text => text.toUpperCase()
]

// Write function applyMiddlewares(text) that applies all middlewares in order
// Your code here

Hint

Use middlewares.reduce to apply each function to the accumulated text.

4

Display input and processed output

In the Svelte component, subscribe to input store and create a reactive variable processed that applies applyMiddlewares to input. Add an <input> bound to input and display both input and processed below it.

Svelte

import { writable } from 'svelte/store'

const input = writable('')

const middlewares = [
  text => text.trim(),
  text => text.toUpperCase()
]

function applyMiddlewares(text) {
  return middlewares.reduce((acc, fn) => fn(acc), text)
}

// Add Svelte component markup and reactive statement
// Your code here

Hint

Use bind:value={$input} on the input, subscribe to input store to get currentInput, and create a reactive statement $: processed = applyMiddlewares(currentInput).

Practice

1. Which Svelte hook is best suited to run code right after a component appears on the page?

easy

A. onDestroy

B. onMount

C. afterUpdate

D. beforeUpdate

Solution

1. Step 1: Understand when onMount runs

   onMount runs once right after the component is added to the page.

2. Step 2: Compare with other hooks

   beforeUpdate and afterUpdate run on updates, onDestroy runs when component is removed.

3. Final Answer:

   onMount -> Option B

4. Quick Check:

   Run code after component appears = onMount [OK]

Hint: Use onMount for code after component loads [OK]

Common Mistakes:

• Confusing onMount with beforeUpdate
• Using onDestroy to run code on load
• Thinking afterUpdate runs only once

2. Which is the correct syntax to import and use the onDestroy hook in a Svelte component?

easy

A. import { onDestroy } from 'svelte/hooks'; onDestroy(() => { /* cleanup */ });

B. import onDestroy from 'svelte'; onDestroy(() => { /* cleanup */ });

C. import { onDestroy } from 'svelte'; onDestroy = () => { /* cleanup */ };

D. import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ });

Solution

1. Step 1: Check correct import syntax

   Svelte exports hooks like onDestroy as named exports from 'svelte'.

2. Step 2: Verify usage

   The hook is called as a function with a callback: onDestroy(() => { ... }).

3. Final Answer:

   import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); -> Option D

4. Quick Check:

   Named import + callback function = import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); [OK]

Hint: Use named import from 'svelte' and call with callback [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong path like 'svelte/hooks'
• Assigning hook to a variable instead of calling it

3. Given this Svelte code snippet, what will be logged to the console when the component updates?

import { beforeUpdate, afterUpdate } from 'svelte';

beforeUpdate(() => console.log('Before update'));
afterUpdate(() => console.log('After update'));

let count = 0;

function increment() {
  count += 1;
}

medium

A. After update only once after first render

B. Only Before update once when component mounts

C. Before update\nAfter update each time increment() is called

D. No logs because hooks are not called

Solution

1. Step 1: Understand when hooks run

   beforeUpdate runs before every DOM update, afterUpdate runs after every DOM update.

2. Step 2: Analyze increment effect

   Calling increment() changes count, triggering component update and both hooks logging messages.

3. Final Answer:

   Before update\nAfter update each time increment() is called -> Option C

4. Quick Check:

   Hooks run on every update = Before update\nAfter update each time increment() is called [OK]

Hint: Hooks run before and after every update triggered by state change [OK]

Common Mistakes:

• Thinking hooks run only once on mount
• Assuming logs happen without calling increment()
• Confusing beforeUpdate and afterUpdate timing

4. What is wrong with this Svelte code using onDestroy?

import { onDestroy } from 'svelte';

onDestroy = () => {
  console.log('Cleanup');
};

medium

A. Assigning a function to onDestroy instead of calling it

B. Missing import statement for onDestroy

C. Using arrow function instead of regular function

D. onDestroy should be used inside onMount

Solution

1. Step 1: Check how onDestroy is used

   The code assigns a function to onDestroy instead of calling it with a callback.

2. Step 2: Correct usage

   onDestroy must be called like onDestroy(() => { ... }) to register cleanup.

3. Final Answer:

   Assigning a function to onDestroy instead of calling it -> Option A

4. Quick Check:

   Use onDestroy(callback), not assignment [OK]

Hint: Call onDestroy with a callback, don't assign it [OK]

Common Mistakes:

• Assigning instead of calling the hook
• Thinking arrow functions are disallowed
• Believing onDestroy must be inside onMount

5. You want to log a message every time a Svelte component updates but only after the DOM has changed. Which hook should you use and why? Also, how would you ensure cleanup if needed?

hard

A. Use afterUpdate to log after DOM changes; use onDestroy for cleanup

B. Use beforeUpdate to log after DOM changes; no cleanup needed

C. Use onMount to log after DOM changes; cleanup inside afterUpdate

D. Use onDestroy to log after DOM changes; cleanup inside beforeUpdate

Solution

1. Step 1: Identify hook for after DOM update

   afterUpdate runs after the DOM updates, perfect for logging post-change.

2. Step 2: Determine cleanup hook

   onDestroy runs when component is removed, ideal for cleanup tasks.

3. Final Answer:

   Use afterUpdate to log after DOM changes; use onDestroy for cleanup -> Option A

4. Quick Check:

   Log after DOM update = afterUpdate; cleanup = onDestroy [OK]

Hint: Log in afterUpdate; cleanup in onDestroy [OK]

Common Mistakes:

• Using beforeUpdate to log after DOM changes
• Trying to cleanup inside afterUpdate
• Confusing onMount with update hooks