Что нового в `svelte-kit, 1.0.0-next.445`: (группа) верстка

SvelteKit движется со скоростью звука, чтобы достичь версии 1.0.0, и поэтому команда жонглирует между давлением со стороны сообщества, требующего опубликовать функции, предложенные в RFC, в то время как ранние последователи разглагольствуют о том, что команда не дает им достаточно времени, чтобы впитать новые изменения.

Тем не менее, эти изменения направлены на то, чтобы сделать фреймворк более выразительным и простым, а это то, что мы все хотим и любим в Svelte.

[Совет] Пожалуйста, следите за обсуждениями и читайте CHANGELOG.md, чтобы быть в курсе последних изменений.

Что изменилось

  • (группа) макет заменяет именованный макет #6124
    • #6124, в частности, позволяет легко избежать взлома named-layout для выхода из унаследованного макета, который был выпущен в svelte-kit, 1.0.0-next.306 #4388. См. CHANGELOG.md

Проблема с именованными макетами

Именованные макеты позволяли вам точно указать, какой макет должны наследовать ваши файлы +page.svelte и +layout.svelte, добавив @name, где @name — это часть имени файла макета между расширениями +layout- и .svelte.

Пример: файл +page.svelte или +layout.svelte, который хочет наследоваться от макета с именем +layout-settings, должен быть переименован в +page@settings.svelte или +layout@settings.svelte соответственно.

Использование структуры папок:

src/routes/
├ courses/
│ ├ +page.svelte
│ └ +page.ts
├ lecturers/
│ ├ +page.svelte
│ └ +page.ts
├ schedules/
│ ├ +page.svelte
│ └ +page.ts
├ settings/
│ ├ +page@settings.svelte
│ └ +page.ts
├ login/
│ ├ +page@auth.svelte
│ └ +page.ts
├ register/
│ ├ +page@auth.svelte
│ └ +page.ts
├ [deeplink=action]/
│ ├ +page.svelte
│ ├ +page.ts
│ └ +layout@root.svelte
├ +layout.svelte
├ +layout-auth.svelte
├ +layout-settings@default.svelte
└ +layout-root.svelte
Вход в полноэкранный режим Выйти из полноэкранного режима

Это даст нам следующие маршруты:

/
/courses
/lecturers
/schedules
/settings
/login
/register
/reset-password?email=parables95@gmail.com - deeplink
/verify-email?email=parables95@gmail.com - deeplink
/success?onboarding=done$redirectTo=home - deeplink
Войти в полноэкранный режим Выйти из полноэкранного режима

Смотрим на структуру папок выше:

  • маршруты /courses, /lecturers и /schedules будут наследоваться от макета из src/routes/+layout.svelte
  • маршрут /settings будет наследоваться как от родительского макета по умолчанию src/routes/+layout.svelte, так и от макета src/routes/+layout-settings.svelte
  • Аналогично, маршруты /login и /register будут отходить от родительского макета по умолчанию src/routes/+layout.svelte и наследоваться от макета src/routes/+layout-auth.svelte
  • маршруты глубоких ссылок будут наследоваться от непосредственного файла макета src/routes/[deeplink=action]/+layout@root.svelte, который, в свою очередь, также будет наследоваться от именованного макета src/routes/layout-root.svelte, поскольку в имени макета явно указано @root.

Этот метод взлома макета позволяет легко определить маршруты, используя структуру папок, но немного сложнее понять, к чему принадлежат маршруты.

Например, я хочу сгруппировать /courses, /lecturers и /schedules в dashboard, но если я создам новый каталог src/routes/dashboard и маршруты в каталоге dashboard, мои маршруты станут /dashboard/courses, /dashboard/lecturers и /dashboard/schedules и это не то, что я хочу. Я хочу сохранить их на уровне индекса и не вставлять их в уровень /dashboard.

(Групповые) макеты на помощь

Для решения проблем, связанных с именованными макетами, (групповые) макеты позволяют группировать маршруты в специальном каталоге, который называется в скобках (dashboard), чтобы указать, что этот каталог предназначен только для групповых макетов, и поэтому он не отображается в URL маршрута.

Теперь наша новая структура папок выглядит следующим образом

src/routes/
├ (dashboard)/
│ ├ courses/
│ │ ├ +page.svelte
│ │ └ +page.ts
│ ├ lecturers/
│ │ ├ +page.svelte
│ │ └ +page.ts
│ ├ schedules/
│ │ ├ +page.svelte
│ │ └ +page.ts
│ ├ settings/
│ │ ├ +page.svelte
│ │ ├ +page.ts
│ │ └ +layout.svelte
│ ├ +page.svelte
│ ├ +page.ts
│ └ +layout.svelte
├ (auth)
│ ├ login/
│ │ ├ +page.svelte
│ │ └ +page.ts
│ ├ register/
│ │ ├ +page.svelte
│ │ └ +page.ts
│ └ +layout.svelte
├ (deeplink)
│ ├ [deeplink=action]/
│ │ ├ +page.svelte
│ │ └ +page.ts
└ +layout.svelte
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь наша директория выглядит чище, и теперь легче определить, где находится макет. Зная, что любая папка в скобках () не появится в URL, можно легко вычислить структуру маршрута, игнорируя любую (групповую) именованную папку в иерархии.

  • Маршруты /courses, /lecturers, /schedules и /settings наследуют макет из src/routes/(dashboard)/+layout.svelte, а также src/routes/+layout.svelte.

  • /login и /register также будут наследоваться от src/routes/(auth)/+layout.svelte, а также src/routes/+layout.svelte.

  • В то время как src/routes/(dashboard)/+page.svelte будет индексной/домашней страницей.

  • Помните, что (dashboard) игнорируется в иерархии маршрутов, делая src/routes/(dashboard)/+page.svelte на том же уровне, что и src/routes, поэтому имейте это в виду, прежде чем бросать еще один +page.svelte на том же уровне, иначе SvelteKit упадет и выдаст вам красивое сообщение об ошибке.

Error:  and (dashbaord) occupy the same route
Вход в полноэкранный режим Выход из полноэкранного режима
  • Страницы и макеты внутри групп — как и в любом другом каталоге — наследуют макеты, расположенные над ними, если они не выходят из иерархии макетов.

  • Страница может выйти из иерархии макетов, указав имя папки, содержащей файл макета, который вы хотите унаследовать.

  • Например, чтобы запретить маршруту /settings наследоваться от src/routes/(dashboard)/+layout.svelte, а наследовать родительский макет, расположенный над ним, например, корневой макет в src/routes/+layout. svelte, вы можете переименовать src/routes/(dashboard)/settings/+page.svelte в src/routes/(dashboard)/settings/+page@.svelte, где @ представляет корневой макет в иерархии.

  • Также, если в иерархии выше есть родительские макеты, которые вы хотите, чтобы страница вышла из текущего наследования и наследовала от родительского макета, укажите @(parent-group) или @parent-folder.

  • Для выхода из макета используется аналогичная конвенция, что и для страницы. Просто используйте @, за которым следует имя папки, расположенной выше в иерархии, где находится макет, который вы хотите унаследовать, например @(parent-group) или @parent-folder.

  • Компонент +layout@.svelte сбросит иерархию для всех своих дочерних маршрутов.

Перенесите ваше приложение SvelteKit на использование (групповых) макетов

  • Удалите папку node_modules и файл .sveltekit и package-lock.json или -lock для любого используемого пакетного менеджера.
rm -rf node_modules .sveltekit
rm package-lock.json # change it as per your package manager `pnpm` or `yarn`
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • И переустановите пакеты снова, используя предпочитаемый менеджер пакетов
npm install
Войдите в полноэкранный режим Выйти из полноэкранного режима

Это необходимо для того, чтобы убедиться, что у вас последние версии зависимостей.

  • npm-check-updates ncu здесь может не помочь, так что перестрахуйтесь и переустановите все ваши зависимости.

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

Заключение

SvelteKit удивителен, и Рич-Харрис с командой вносят большие улучшения, чтобы сделать его еще более удивительным.
Мы очень благодарны им за все, что они делают, чтобы облегчить и упростить нашу жизнь как разработчиков.

Увидели опечатку, заметили что-то не то в статье, все еще в замешательстве, поделитесь своими мыслями в разделе комментариев ниже или найдите меня на Discord-канале Svelte @parables_boltnoel.

Это все для этого поста. Если этот пост помог вам, распространите любовь и помогите другим, поделившись им.

Увидимся в следующем обновлении

Оцените статью
devanswers.ru
Добавить комментарий