Documentation

This is a summary of the Svelte features I used to build the HSK Dictionary app.

1. Core Concepts

Compiled Framework: Svelte is a compiled framework. It does its work before the code reaches the browser, while React and Vue are shipped to the browser and do a lot of their work there.

No Virtual DOM: Svelte has no virtual DOM. It doesn't compare the old tree vs. the new tree to find what changed. It knows at build time what changed.

Components: A component is the fundamental building block of the application. It's a self-contained, reusable piece of code that encapsulates HTML, CSS, and JS into a .svelte file.

2. SvelteKit Structure

The project uses SvelteKit, which powers the website by handling routing, processing JavaScript and styles to make them work in the browser.

The URL structure is defined in src/routes.

3. Custom Stores

I used a custom store to store and share data across components. In src/lib/stores/srsStore.js, I handle the flashcard logic. Instead of just updating data directly in components, I made functions like addWord and review.

// src/lib/stores/srsStore.js

function createSrsStore() {
    const { subscribe, set, update } = writable({});

    return {
        subscribe,
        addWord: (word) => update(n => ...),
        review: (word, rating) => update(n => ...)
    };
}
                

4. Reactivity ($:)

$: is the magic. It is a reactive declaration or reactive statement. When the data referenced in the statement changes, these variables update automatically.

// Update dueCount automatically when srsStore changes
$: dueCount = srsStore.getAllDue($srsStore).length;
                

5. Lifecycle (onMount)

I used onMount to fetch the JSON data when the page loads.

import { onMount } from "svelte";

onMount(async () => {
    const response = await fetch("/hsk-complete.json");
    allWords = await response.json();
});
                

6. Event Modifiers

I used on:click|stopPropagation on buttons so clicking them doesn't trigger clicks on the parent card.

<button on:click|stopPropagation={toggleLearning}>
    +
</button>