Введение в SvelteKit 1.0: полнофункциональная платформа для Svelte.

Jan 05, 2024

Мэтью Тайсон

Архитектор программного обеспечения, InfoWorld |

Как недавно было объявлено, SvelteKit достиг долгожданного рубежа 1.0 после длительного бета-тестирования. SvelteKit 1.0 представляет собой полностью реализованную платформу для создания полнофункциональных приложений JavaScript с интерфейсом Svelte. Давайте взглянем.

Svelte — это интерфейсный реактивный фреймворк, сравнимый с React или Vue на высоком уровне, но со своим собственным взглядом на вещи. SvelteKit — это полнофункциональная платформа приложений для Svelte, похожая на Next или Nuxt, но опять же со своими собственными соглашениями.

Природа полнофункциональной среды разработки приложений заключается в том, что она должна иметь возможность объединить интерфейсную и серверную часть вашего приложения под единой структурой. Полнофункциональная структура должна отвечать на следующие вопросы:

В основе каждой платформы приложения лежит механизм маршрутизации, который связывает код, генерирующий страницы, с URL-адресами в браузере. Большинство фреймворков JavaScript, таких как SvelteKit, придерживаются общей схемы, которую использует Next.js, в которой файлы и каталоги сопоставляются с URL-путями.

Корневой каталог SvelteKit — /src/routes (по умолчанию). Таким образом, /src/routes соответствует корневому URL-адресу, например localhost:5173/ в браузере. Подкаталоги сопоставляются с URL-путем, поэтому /src/routes/foo/bar становится localhost:5173/foo/bar.

Несколько соглашений о файлах внутри каталогов определяют страницы и конечные точки. Эти типы файлов начинаются со знака плюс (+), указывающего, что они имеют особое значение для платформы. (Все остальные файлы будут игнорироваться, поэтому вы можете поместить вспомогательные файлы в те же каталоги.)

Каждая страница представляет собой компонент Svelte, определенный в файле +page.svelte. Файл /src/routes/foo/bar/+page.svelte становится веб-страницей по адресу localhost:5173/foo/bar, определенной компонентом Svelte, созданным в этом файле. (Открывая страницу по умолчанию на маршруте, этот файл действует аналогично index.jsx в других платформах.) Другими словами, +page.svelte — это просто стандартный компонент Svelte, следующий обычному синтаксису Svelte.

Хотя +page.svelte — это всего лишь внешний компонент Svelte, для выполнения своей работы он может полагаться на другие специальные файлы. В SvelteKit также есть несколько удобных оптимизаций. По умолчанию SvelteKit отображает +page.svelte на стороне сервера. Для управления этим процессом он использует родственный файл +page.js (с расширением .js). Два компонента, +page.svelte и +page.js, работают вместе, чтобы определить полное поведение страницы.

Компонент +page.js позволяет нам определить функцию загрузки, которая может выполнять предварительную работу, необходимую компоненту страницы, а также контролировать, как платформа обрабатывает страницу с точки зрения поведения отрисовки. Этот компонент поддерживает три экспорта констант:

Подробнее о рендеринге страниц с помощью этих параметров можно узнать из документации SvelteKit. Здесь мы сосредоточимся на функции загрузки, экспортируемой +page.js. По умолчанию он запускается вместе с +page.svelte как на сервере, так и на клиенте. Функция загрузки взаимодействует с компонентом Svelte с помощью переменной данных. Все, что возвращает функция экспорта +page.js, будет установлено в переменной экспорта let data +page.svelte.

Поскольку функция загрузки +page.js работает как на клиенте, так и на сервере, она должна содержать функциональные возможности, которые будут работать как в браузере, так и в серверной среде. Если вам нужна функция, работающая только на сервере, вы можете использовать +page.server.js. Функция загрузки там выполняется только на внутренней стороне. Когда рендеринг на стороне сервера (SSR) находится под контролем, данные можно интегрировать в рендеринг; когда рендеринг на стороне клиента активен, код будет выполняться на сервере, сериализоваться и передаваться. (См. документацию SvelteKit, чтобы узнать больше о выборе между «универсальной» функцией загрузки и функцией загрузки только на стороне сервера.)

В дополнение к загрузке +page.server.js может определить функцию действий для обработки данных формы. (Это похоже на то, как Remix создает формы и позволяет формам функционировать, когда JavaScript недоступен.)