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).