Component syntax: markup, styles and logic in one file¶

Exercise component-syntax-annex.pdf · PDF

Pick any button on any site you use. To change it completely (its text, its colour and what it does) how many files do you open?

In the code you read in Unit 2, the answer was three: an HTML file, a CSS file, and somewhere a JavaScript file. Three places for one button. If something on screen is one thing for the user, it should be one thing for you. In this page the answer becomes one.

The brick¶

Think of a LEGO brick. It is complete: shape, colour and the way it clicks. You can use it a hundred times. You never open it to use it. And the studs on top are how it connects to other bricks.

A component is a reusable piece of interface that keeps its own markup, its own style and its own logic in one file. In Svelte that file ends in .svelte.

The studs of a component are called props: the values it accepts from outside. We keep this brick all page.

A .svelte file has three parts:

All three are optional. The home page you wrote in Development environment has only markup, and it is a valid component.

Tokens and the frame¶

You met design tokens in Unit 2. In code they become CSS custom properties: named values that start with -- and that you read with var(--name). Create this file:

:root {
    --nb-ink: #111111;
    --nb-paper: #ffffff;
    --nb-muted: #666666;
    --nb-surface: #f1f5f9;
    --nb-line: #e5e7eb;
    --nb-link: #2563eb;
    --nb-danger: #dc2626;
    --nb-radius: 6px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    color: var(--nb-ink);
    background: var(--nb-paper);
}

+layout.svelte wraps every page, so import the CSS there and give the app its phone-width column: 390 wide, padding 24 at the top and 16 at the sides. Keep the lines the scaffold wrote and add the import, the <main> and the <style>:

<script>
    import '../app.css';
    import favicon from '#lib/assets/favicon.svg';

    let { children } = $props();
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
</svelte:head>

<main>
    {@render children()}
</main>

<style>
    main {
        max-width: 390px;
        margin: 0 auto;
        padding: 24px 16px;
    }
</style>

Save and the font changes at once. This file has all three parts. {@render children()} means "the page goes here"; you will use it properly in Routing and navigation.

Curly braces¶

Empty your home page and start with the data: four notes, as an array of objects. If you think in Java, think List<Note>.

<script>
    const notes = [
        { id: '1', title: 'Shopping list', tag: 'home', pinned: true },
        { id: '2', title: 'Maths homework', tag: 'school', pinned: false },
        { id: '3', title: 'Passwords', tag: 'none', pinned: false },
        { id: '4', title: 'Ideas for the app', tag: 'school', pinned: false }
    ];
</script>

<h1>NoteBox</h1>
<p class="hint">{notes.length} notes</p>

What is inside the braces? Any JavaScript expression: a piece of code that produces a value. Try these three: {notes.length * 2}, {notes[0].title}, {notes[0].title.toUpperCase()}.

Braces also work in attributes: <p title={notes[0].tag}>. Whenever you see them, read: "JavaScript, give me a value here".

Repeat with each¶

Writing four <li> by hand is what generated code does. Say it once instead:

<ul>
    {#each notes as note (note.id)}
        <li>{note.title} · {note.tag}</li>
    {/each}
</ul>

Read it as for (Note note : notes). Add a fifth object to the array and a fifth row appears.

The (note.id) is the key: the label that lets Svelte tell the items apart when the list changes. What makes a good key? Something unique that never changes, such as an id. Not the position. Without a key, Svelte matches items by position, and rows get mixed up when the list changes.

Show or remove with if¶

A list screen always has two faces: with items, and without. An empty white screen breaks visibility of system status from usability heuristics: is it loading, broken, or empty? So say which:

{#if notes.length === 0}
    <p>No notes yet.</p>
{:else}
    <ul>
        {#each notes as note (note.id)}
            <li>{note.title} · {note.tag}</li>
        {/each}
    </ul>
{/if}

Empty the array (const notes = [];) to see the message, then open DevTools in your browser (F12) and go to Elements. Is the <ul> there, hidden? No. {#if} does not hide anything: when the condition is false, the element does not exist.

Scoped styles¶

Add a <style> at the end of the page. The measurements come from the design: h1 of 28 px; a hint of 13 px in the muted colour; a list with no bullets and a top border.

<style>
    h1 {
        margin: 0;
        font-size: 28px;
    }

    .hint {
        margin: 8px 0 16px;
        font-size: 13px;
        color: var(--nb-muted);
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--nb-line);
    }
</style>

You wrote h1 { ... }. Does that affect every h1 of the app, or only this one? Inspect the <h1> in DevTools. It has an extra class like svelte-1a2b3c, and the rule has become h1.svelte-1a2b3c. Svelte added both.

Scoped styles: the CSS in a component only applies to that component. It cannot leak out, and nobody else's can leak in.

Now add .ghost { color: red; } and save. The terminal and the editor warn you: Unused CSS selector ".ghost". The compiler knows your markup, so it knows your dead CSS. Delete it.

Your first brick: NoteRow¶

A row is about to get more complicated: a tag on the right, a different background when pinned. And other screens will need it. Time to make it a brick. Its design says: height 44, padding 0 8, title 15 Medium, tag 13 muted, bottom border, surface background when pinned.

<script>
    let { title, tag = 'none', pinned = false } = $props();
</script>

<li class={['row', pinned && 'pinned']}>
    <span class="title">{title}</span>
    {#if tag !== 'none'}
        <span class="tag">{tag}</span>
    {/if}
</li>

<style>
    .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        padding: 0 8px;
        border-bottom: 1px solid var(--nb-line);
    }

    .pinned {
        background: var(--nb-surface);
    }

    .title {
        font-weight: 500;
    }

    .tag {
        font-size: 13px;
        color: var(--nb-muted);
    }
</style>

Three new things:

• $props() is a rune: a word starting with $ that is an instruction to the compiler. It gives the component its studs. Runes need no import, and they only work in .svelte and .svelte.js files.
• tag = 'none' is a default value, used when nobody passes that prop.
• class={[...]} takes a list. pinned && 'pinned' adds the class only when pinned is true. (You may find the older form class:pinned={pinned} in tutorials. It still works.)

The display: flex line puts title and tag at the two ends. Copy it for now: Layout with CSS explains it.

Here is the whole page, using the brick:

<script>
    import NoteRow from '#lib/NoteRow.svelte';

    const notes = [
        { id: '1', title: 'Shopping list', tag: 'home', pinned: true },
        { id: '2', title: 'Maths homework', tag: 'school', pinned: false },
        { id: '3', title: 'Passwords', tag: 'none', pinned: false },
        { id: '4', title: 'Ideas for the app', tag: 'school', pinned: false }
    ];
</script>

<h1>NoteBox</h1>
<p class="hint">{notes.length} notes</p>

{#if notes.length === 0}
    <p>No notes yet.</p>
{:else}
    <ul>
        {#each notes as note (note.id)}
            <NoteRow title={note.title} tag={note.tag} pinned={note.pinned} />
        {/each}
    </ul>
{/if}

<style>
    h1 {
        margin: 0;
        font-size: 28px;
    }

    .hint {
        margin: 8px 0 16px;
        font-size: 13px;
        color: var(--nb-muted);
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--nb-line);
    }
</style>

#lib is the short name of src/lib. A tag with a capital letter is a component; lower case is HTML. Remove tag={note.tag} and the row still works, with the default.

Commit: git add -A, then git commit -m "Add NoteRow component".

flowchart TB
    P["<b>+page.svelte</b><br>owns the notes"] -->|"title, tag, pinned<br>(the studs)"| R1["<b>NoteRow</b><br>Shopping list"]
    P -->|"title, tag, pinned"| R2["<b>NoteRow</b><br>Maths homework"]
    P -->|"title, tag, pinned"| R3["<b>NoteRow</b><br>Passwords"]

The syntax so far¶

Your turn: body and badge¶

The handout at the top of this page asks you to grow NoteRow: a second line with the note's body, a "PINNED" badge, and a page hint that also counts the pinned notes. If you get stuck:

Then do the same for your own app: put your tokens in src/app.css, import them in the layout, and build your main list or card as a component with at least three props. The Svelte tutorial, part Basic Svelte, covers this ground in its Introduction, Logic and Props sections.

Key takeaways¶

• A component is one file with up to three parts: <script> (logic), markup (structure) and <style> (look).
• Curly braces mean "JavaScript, give me a value here", in text and in attributes.
• {#if} creates or removes markup; it does not hide it. {#each} repeats markup, and its key must be unique and stable.
• Scoped styles stay inside their component. Global things go in app.css, and tokens replace raw colours.
• Props are a component's studs, declared with the rune $props(). They can have default values, and they flow down only.

Quick check¶

Your list looks right, but it is dead: you cannot search it or add to it. Next you give it a pulse: Reactivity.