Svelte

Svelte is a frontend framework that compiles your code to highly efficient JavaScript at build time. It eliminates the need for a virtual DOM, resulting in faster performance and smaller bundle sizes.

Structure

src
tests
package.json
tsconfig.json
svelte.config.js

api/

Contains API functions.

import { ApiURL } from './ApiURL';
import type { Stack } from '../types/main';

export async function getData(): Promise<Stack[]> {
  const res = await fetch(ApiURL);
  return await res.json();
}

store/

Manages global state using Svelte's store system.

import { writable } from 'svelte/store';

export const counter = writable(0);

types/

Defines TypeScript interfaces.

export interface Person {
  name: string;
  age: number;
}

utils/

Contains utility functions.

export function copy(text: string): void {
  navigator.clipboard.writeText(text);
}

lib/

Reusable components such as Navbar and Footer.

<script>
  export let title: string;
</script>

<header>{title}</header>

routes/

File-based routing using SvelteKit.

  • /src/routes/+page.svelte → /
  • /src/routes/about/+page.svelte → /about

tests/

Unit testing with Vitest.

import { describe, it, expect } from 'vitest';

describe('Basic math', () => {
  it('adds', () => {
    expect(2 + 2).toBe(4);
  });
});

Migration Tools

✅ Vitest

Used for unit testing.
🔗 https://vitest.dev

npm run test

✅ Svelte Store

Used for state management in Svelte.
🔗 https://svelte.dev/docs/store

import { writable } from 'svelte/store';

export const isDarkMode = writable(false);