Практический опыт работы со SvelteKit

Так называемые метафреймворки, такие как Next.js и Gatsby, получили распространение в последние несколько лет. Эта статья знакомит вас с одним из последних примеров — фреймворком SvelteKit для Svelte. Как и Next.js до него, SvelteKit предоставляет универсальную полнофункциональную платформу для создания реактивных веб-приложений.

SvelteKit является преемником Sapper, предыдущего поколения полнофункциональной среды предварительного рендеринга для Svelte.

Что такое СвелтеКит?

Идея SvelteKit заключается в том, чтобы объединить интерфейсную и серверную части и получить лучшее из обоих миров. Помимо упрощения процесса сборки (поскольку весь стек объединен), SvelteKit предоставляет следующие преимущества «из коробки»:

• Серверный рендеринг
• Разделение кода
• Маршрутизация на стороне клиента
• Упрощенная предварительная выборка данных
• Экспорт статического сайта одной командой
• Полнофункциональное горячее развертывание (режим разработки)

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

Чтобы начать изучение, мы начнем с шаблона приложения SvelteKit по умолчанию. (Если вы хотите продолжить, весь пример приложения доступен здесь.) Мы будем использовать шаблон с накопительным пакетом (также доступен Webpack). В консоли введите

npm init svelte@next svelte-kit-intro

Теперь перейдите во вновь созданный каталог /svelte-kit-intro и запустите npm install для установки модулей Node.js.

Теперь вы можете запустить приложение в режиме разработки с помощью npm run dev. Если вы откроете в браузере адрес localhost:3000, вы увидите работающее приложение, как показано на рисунке 1.

Рисунок 1. Стартовое приложение SvelteKit.

ИДГ

Маршруты в SvelteKit — это файлы и папки.

Каждая страница вашего приложения является компонентом Svelte. Каждый маршрут сопоставляется с файлом в вашем приложении.

Самый важный каталог верхнего уровня — /src. Большая часть вашего пользовательского кода будет находиться здесь. Обратите внимание на каталог /src/routes. Здесь определяются URL-адреса, которые будет поддерживать ваше приложение.

Папки соответствуют пути, а файлы — ресурсу. Запись по умолчанию в приложении — /src/routes/index.svelte, что соответствует корневому URL-адресу: localhost:3000/. Всякий раз, когда путь к папке содержит файл index.svelte, этот файл будет использоваться для пустого пути.

В случае с начальным приложением, которое вы просматриваете, каждая вкладка на панели навигации соответствует маршруту. Откройте вкладку «Задачи». Взгляните на источник: обратите внимание, что существует файл /src/routes/todos/index.svelte, который обслуживает эту страницу.

Немаршрутизируемые файлы с подчеркиванием

Вы можете разместить файлы JavaScript в любом месте структуры маршрутов с помощью подчеркивания (например, файл /src/routes/todos/_api.js в примере приложения). Эти файлы можно использовать как общие модули JS.

Добавить страницу

Это маршрутизация на стороне клиента. SvelteKit автоматически предварительно визуализирует эти страницы на сервере, после чего одностраничное приложение на стороне клиента возьмет на себя управление. Чтобы увидеть, насколько это просто, давайте добавим страницу. Создайте страницу /src/routes/infoworld.svelte и поместите в нее содержимое листинга 1.

Листинг 1. Новая страница InfoWorld

<main>
<img src="https://alt.idgesg.net/images/furniture/infoworld/infoworld-nameplate.svg" />
</main>
<style>
  main {
    background-color: #7f1231;
  }
  img {
    width: 500px;
  }
</style>

Теперь перейдите по адресу localhost:3000/infoworld, и вы увидите новую страницу.

Верстка в SvelteKit

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

Листинг 2. __layout.svelte

<script>
        import Header from '$lib/header/Header.svelte';
        import '../app.css';
</script>
<Header />
<main>
        <slot />
</main>
<footer>
        <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
</footer>
<style>
/* … */
</style>

Помимо слота, в макете используются segment и Header компонент. segment — это встроенная функция, которая автоматически заполняет переменную текущей страницей. Это используется Header компонент, чтобы определить, какой пункт меню выделить.

Теперь давайте добавим элемент навигации для нашей новой страницы InfoWorld. Откройте файл src/lib/header/Header.svelte. В неупорядоченный список (элемент) добавьте новый элемент списка, как показано в листинге 3. Обратите внимание на новый четвертый элемент, ссылающийся на страницу InfoWorld.

Листинг 3. Добавление нового пункта меню

<ul>
  <li class:active={$page.path === "https://www.infoworld.com/"}><a sveltekit:prefetch href="https://www.infoworld.com/">Home</a></li>
  <li class:active={$page.path === "https://www.infoworld.com/about"}><a sveltekit:prefetch href="https://www.infoworld.com/about">About</a></li>
  <li class:active={$page.path === "https://www.infoworld.com/todos"}><a sveltekit:prefetch href="https://www.infoworld.com/todos">Todos</a></li>
  <li class:active={$page.path === "https://www.infoworld.com/infoworld"}><a sveltekit:prefetch href="https://www.infoworld.com/infoworld">Infoworld</a></li>
</ul>

Теперь вы увидите в браузере новый пункт меню InfoWorld. Обратите внимание, что мы используем segment переменная, которую мы передали из __layout, чтобы выделить пункт меню на основе имени страницы.

Серверный SvelteKit

Теперь давайте разберемся, как SvelteKit интегрирует клиент с сервером. Откройте файл /src/routes/todos/index.svelte и сравните его с тем, что вы видите на странице localhost:3000/todos. Обратите внимание, что на этой странице вы можете создавать новые задачи, которые затем отображаются в списке. Как SvelteKit выполняет составление списка задач? Посмотрите на код в /src/routes/todos/index.svelte, показанный в листинге 3.

Листинг 4. Обращение к задней части

<script context="module">
        import { enhance } from '$lib/form';
        // see https://kit.svelte.dev/docs#loading
        export const load = async ({ fetch }) => {
                const res = await fetch('/todos.json');
                if (res.ok) {
                        const todos = await res.json();
                        return {
                                props: { todos }
                        };
                }
                const { message } = await res.json();
                return {
                        error: new Error(message)
                };
        };
</script>

SvelteKit поддерживает context="module" атрибут. Это сообщает платформе, что внутренний скрипт должен оцениваться во время создания модуля, а не во время создания экземпляра компонента. Это означает, что выборка данных произойдет сразу.

Теперь рассмотрим load функция. Он загружает данные путем выборки из относительного URL-адреса /todos.json. Где SvelteKit находит этот ресурс? Ответ заключается в том, что SvelteKit использует соглашение о сопоставлении, аналогичное тому, которое используется на стороне клиента. В этом случае URL-адрес будет преобразован в путь src/routes/todos/index.json.js в файловой системе. Взгляните на этот файл, и вы увидите код, показанный в листинге 5 ниже.

Обработка запросов

Листинг 5 начинается с импорта файла (_api.). Это не связано со SvelteKit; это просто импорт файла JS в Node.js. (index.json.js использует этот файл для взаимодействия с удаленной службой, предоставляемой api.svelte.dev для использования с этим приветственным приложением.)

Листинг 5. /src/routes/todos/index.json.js

import { api } from './_api';
// GET /todos.json
export const get = async (request) => {
        const response = await api(request, `todos/${request.locals.userid}`);
        if (response.status === 404) {              
          return { body: [] };
        }
        return response;
};
// POST /todos.json
export const post = async (request) => {
        const response = await api(request, `todos/${request.locals.userid}`, {              
          text: request.body.get('text')
        });
        return response;
};

Остальная часть листинга 5 посвящена маршалингу JSON, который является посредником в ответе между внутренними запросами REST и внешними. Мы экспортируем get функция, сопоставленная с HTTP-методом GET, который мы используем из /src/todos/index.json.js. И экспортируйте post функция для обработки POST-заданий.

Обратите внимание, что эти функции конечной точки похожи на Express, но на самом деле не являются Express. Помните, что SvelteKit предназначен для работы на различных платформах, а не только на Node.js, поэтому это абстрактный API запросов/ответов.

Вывод в определенные среды сборки осуществляется через адаптеры.

Параметры URL-пути

Теперь создайте пару задач и отредактируйте одно из их названий. Обновление имени задачи осуществляется путем отправки этого URL-адреса в src/routes/todos/index.svelte:

“/todos/{todo.uid}.json?_method=patch”

Обратите внимание, что переменная токен {todo.uid} используется для предоставления идентификатора URL-пути.

Это фиксируется файлом /src/routes/todos/.[uid]файл .json.js.

Квадратные скобки в имени файла указывают, где будет заполнен параметр URL. Этот идентификатор («uid») будет доступен для содержащегося в нем кода.

Открой [uid].json.js и посмотрите на определенный там метод PATCH, и вы увидите, как доступ к этому параметру пути осуществляется через request.params.uid, как показано в листинге 6.

Листинг 6. Доступ к параметрам пути в [uid].json.js

экспорт константный патч = асинхронный (запрос) => {

return api(request, `todos/${request.locals.userid}/${request.params.uid}`, {

текст: request.body.get(‘текст’),

сделано: request.body.has(‘done’) ? !!request.body.get(‘done’) : не определено

});

};

В листинге 6 также используется общий модуль _api.js, который вы видели ранее, который используется для обертывания общих функций при доступе к удаленному API.

Легко, как Svelte

В SvelteKit есть еще кое-что, но мы рассмотрели основы. Вы видели, как быстро можно начать собирать полнофункциональное приложение, использующее рендеринг на стороне сервера. И вы видели, как Svelte облегчает жизнь.

В заключение: вы можете создать производственную сборку с помощью npm run build с сервером и клиентом или статическая сборка с npm run export.