Svelte и SvelteKit: кабинет читателя
Развиваем учебный проект «Маршрут» в 14 последовательных уроках. Каждый шаг использует результат предыдущего: прежние объекты, идентификаторы и правила остаются узнаваемыми. Серия входит в прикладной продуктовый маршрут.
Предпосылки: HTML, JavaScript, TypeScript, основы HTTP; Svelte 5, выбранная ветка SvelteKit 2 (>=2.16 <3). Проверка API по официальным источникам проведена 11 октября 2026 года. Установка, программы, сборка, тесты и размещение не выполнялись. example_execution: not_run; описанные ответы и экраны ожидаемые.
Учебные сессии и данные в памяти одного процесса; после перезапуска исчезают. Внешняя регистрация, восстановление, постоянная база и размещение отсутствуют.
Оглавление
| № | Урок | Результат |
|---|---|---|
| 1 | Кабинет читателя и границы SvelteKit | Задаём модель «Маршрута», дерево проекта и границы серверного и браузерного состояния. |
| 2 | Состояние и вычисления в Svelte 5 | Добавляем локальные закладки, завершение и вычисляемый прогресс через runes. |
| 3 | SvelteKit: компонент карточки и обратные вызовы | Выносим карточку урока в компонент с типизированными props и callback без скрытого владения прогрессом. |
| 4 | SvelteKit: маршруты уроков и общая компоновка | Создаём адресный каталог, динамическую страницу урока и layout кабинета. |
| 5 | SvelteKit: загрузка страницы и серверные данные | Разделяем universal load и server load, сериализацию и публичную проекцию личного состояния. |
| 6 | SvelteKit: SSR, prerender и личный кабинет | Выбираем режим формирования HTML для публичного каталога и персональных страниц. |
| 7 | SvelteKit: браузерные эффекты и сохранение предпочтений | Сохраняем компактный вид в localStorage после onMount без обращения к window при SSR. |
| 8 | SvelteKit: поиск и фильтры в URL | Делаем фильтр каталога воспроизводимым по ссылке и сохраняем нативную GET-форму. |
| 9 | SvelteKit: серверные действия для закладок | Описываем POST-команду с проверкой сессии, идентификатора и желаемого состояния. |
| 10 | SvelteKit: проверка формы и восстановление ввода | Добавляем профиль с серверной валидацией, сохранённым вводом и доступной ошибкой поля. |
| 11 | SvelteKit: улучшение формы через use:enhance | Добавляем ожидание POST и обновление страницы, сохраняя работу формы без JavaScript. |
| 12 | SvelteKit: сессия и владелец истории читателя | Связываем серверный репозиторий с непрозрачной сессией и проверяем владельца каждого действия. |
| 13 | SvelteKit: ошибки кабинета и доступный интерфейс | Различаем ожидаемый отказ и сбой сервера, сохраняем семантику кнопок, статусы и фокус. |
| 14 | SvelteKit: передача проекта «Маршрут» | Собираем конечные исходники, фиксируем ограничения хранения, сессий и будущего выпуска. |
Комплект проекта
Скачать исходники «Маршрут». Архив содержит конечное состояние кабинета, README и HANDOFF.md. Фрагменты в уроках объясняют его постепенное построение. Ожидаемые данные имеют явную подпись, результатов исполнения пока нет.