Skip to content

Chat sample: SvelteKit frontend #97

@pathosDev

Description

@pathosDev

Followup from the chat sample (`examples/chat/`). Add a SvelteKit +
Svelte 5 variant alongside the plain HTML and Lit frontends.

Scaffolding plan

```bash
cd examples/chat
npm create svelte@latest frontend-svelte

select: Skeleton + TS + adapter-static

cd frontend-svelte
npm install
npm run build
cp -r build/* ../static/svelte/
```

Components

  • `src/routes/+page.svelte` — login form.
  • `src/routes/chat/+page.svelte` — three-column layout.
  • `src/lib/components/{RoomsPanel,ChatWindow,UsersPanel}.svelte`.
  • `src/lib/ws.svelte.ts` — Runes-based store wrapping the WS.

State

  • Svelte 5 Runes (`$state`, `$derived`) for multi-room state.

Versions / requirements

  • Svelte >= 5 (Runes stable).
  • SvelteKit latest with `adapter-static`.

Shared types

Vite path alias on `../shared` in `vite.config.ts`.

Stub `frontend-svelte/README.md` already in the repo.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions