Оглавление
Svelte
Компилируемый фреймворк интерфейсов: компоненты, руны, хранилища и SvelteKit.
1.Начало работы
- Что такое SvelteSvelte как компилятор интерфейсов: чем он отличается от React и Vue, что такое руны и SvelteKit.
- Создание проектаКак создать проект командой npx sv create, запустить его и в каких папках что лежит.
- КомпонентыИз чего состоит файл .svelte: скрипт, разметка и стили. Как создать компонент и вывести его на странице.
- Разметка и выраженияКак вставлять значения в текст и атрибуты, сокращённая запись атрибутов, @html и комментарии.
2.Реактивность
- Состояние: $stateКак объявить изменяемые данные руной $state, чтобы страница обновлялась сама, и как работать с массивами и объектами.
- Вычисляемые значения: $derivedКак объявить значение, которое само пересчитывается из состояния: руны $derived и $derived.by.
- Побочные эффекты: $effectКак выполнить код после изменения состояния: заголовок вкладки, localStorage, таймеры и их очистка.
3.Логика в разметке
- Условия: блок ifКак показывать разную разметку в зависимости от условия: блоки if, else if и else.
- Списки: блок eachКак вывести массив блоком each, получить индекс, указать ключ и показать запасной текст для пустого списка.
- Промисы: блок awaitКак показать загрузку, результат и ошибку промиса прямо в разметке блоком await.
4.Компоненты
- Свойства: $propsКак передать данные в компонент через атрибуты и принять их руной $props, значения по умолчанию и остальные свойства.
- События и функции-обработчикиКак обрабатывать клики и отправку формы атрибутами onclick и onsubmit и как передать функцию в дочерний компонент.
- Привязки: bindКак связать поле ввода с переменной через bind:value и bind:checked, получить ссылку на элемент через bind:this.
- Вложенное содержимое и сниппетыКак передать разметку внутрь компонента: свойство children, блоки snippet и тег @render.
- Стили и директива class:Как работают изолированные стили компонента, глобальные стили через :global и переключение классов директивой class:.
- Переходы и анимацииКак плавно показывать и убирать элементы директивой transition и анимировать перестановку списка через animate:flip.
5.Общее состояние
6.SvelteKit
- Маршруты: страницы +page.svelteКак SvelteKit строит адреса сайта из папок в src/routes, как добавить страницу и сослаться на неё.
- Макеты: +layout.svelteКак вынести общую шапку и меню в макет, сделать вложенный макет для раздела и подсветить текущую ссылку.
- Загрузка данных: функция loadКак получить данные для страницы функцией load в +page.server.js и +page.js и принять их в компоненте через data.
- Динамические маршруты и параметрыКак сделать одну страницу для многих адресов через папку [slug], прочитать параметр в load и вернуть 404.
- Формы и действия: actionsКак принять отправку формы на сервере через actions в +page.server.js, проверить данные функцией fail и улучшить форму через use:enhance.
- API-маршруты: +server.jsКак сделать маршрут, который отвечает JSON вместо страницы: функции GET и POST в файле +server.js.
- Хуки: hooks.server.jsКак выполнить код для каждого запроса функцией handle, передать данные в event.locals и записать ошибки через handleError.
- Страницы ошибок: +error.svelteКак оформить страницу ошибки в файле +error.svelte, показать код и сообщение и сделать отдельную страницу для раздела.
7.Подготовка к работе
- Переменные окружения: модули $envКак хранить настройки и секреты в файле .env и читать их через $env/static/private, $env/static/public и динамические модули.
- Адаптеры и публикацияЧто такое адаптер SvelteKit, как собрать проект для своего сервера на Node.js через adapter-node и как сделать статический сайт.
- Основы тестированияКак подключить Vitest командой sv add, проверить обычную функцию и компонент Svelte и где место сквозным тестам Playwright.