From 99b815e7b83b25d80053b20ab9fdf39a3e0dabf5 Mon Sep 17 00:00:00 2001 From: Roman Paravaev <105551615+falkomerr@users.noreply.github.com> Date: Fri, 26 Jul 2024 00:53:31 +0300 Subject: [PATCH] feat: added sveltekit-usage guide (#698) --- .../current/guides/tech/with-sveltekit.mdx | 100 ++++++++++++++++++ .../current/guides/tech/with-sveltekit.mdx | 98 +++++++++++++++++ 2 files changed, 198 insertions(+) create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx b/i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx new file mode 100644 index 0000000000..08c81813da --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx @@ -0,0 +1,100 @@ +--- +sidebar_position: 10 +--- +# Usage with SvelteKit + +It is possible to implement FSD in a SvelteKit project, but conflicts arise due to the differences between the structure requirements of a SvelteKit project and the principles of FSD: + +- Initially, SvelteKit offers a file structure inside the `src/routes` folder, while in FSD the routing must be part of the `app` layer. +- SvelteKit suggests putting everything not related to routing in the `src/lib` folder. + + +## Let's set up the config + +```ts title="svelte.config.ts" +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config}*/ +const config = { + preprocess: [vitePreprocess()], + kit: { + adapter: adapter(), + files: { + routes: 'src/app/routes', // move routing inside the app layer + lib: 'src', + appTemplate: 'src/app/index.html', // Move the application entry point inside the app layer + assets: 'public' + }, + alias: { + '@/*': 'src/*' // Create an alias for the src directory + } + } +}; +export default config; +``` + +## Move file routing to `src/app`. + +Let's create an app layer, move the app's entry point `index.html` into it, and create a routes folder. +Thus, your file structure should look like this: + +```sh +├── src +│ ├── app +│ │ ├── index.html +│ │ ├── routes +│ ├── pages # Папка pages, закреплённая за FSD +``` + +Now, you can create roots for pages within `app` and connect pages from `pages` to them. + +For example, to add a home page to your project, you need to do the following steps: +- Add a page slice inside the `pages` layer +- Add the corresponding rooute to the `routes` folder from the `app` layer +- Align the page from the slice with the rooute + +To create a page slice, let's use the [CLI](https://github.com/feature-sliced/cli): + +```shell +fsd pages home +``` + +Create a ``home-page.vue`` file inside the ui segment, access it using the Public API + +```ts title="src/pages/home/index.ts" +export { default as HomePage } from './ui/home-page'; +``` + +Create a root for this page inside the `app` layer: + +```sh + +├── src +│ ├── app +│ │ ├── routes +│ │ │ ├── +page.svelte +│ │ ├── index.html +│ ├── pages +│ │ ├── home +│ │ │ ├── ui +│ │ │ │ ├── home-page.svelte +│ │ │ ├── index.ts +``` + +Add your page component inside the `index.svelte` file: + +```html title="src/app/routes/+page.svelte" + + + + +``` + +## See also. + +- [Documentation on changing directory config in SvelteKit](https://kit.svelte.dev/docs/configuration#files) + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx new file mode 100644 index 0000000000..185133bedb --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-sveltekit.mdx @@ -0,0 +1,98 @@ +--- +sidebar_position: 10 +--- +# Использование с SvelteKit + +В SvelteKit проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта SvelteKit и принципами FSD: + +- Изначально, SvelteKit предлагает файловую структуру внутри папки `src/routes`, в то время как в FSD роутинг должен быть частью слоя `app`. +- SvelteKit предлагает складывать всё, что не относится к роутингу в папку `src/lib`. + + +## Настроим конфиг + +```ts title="svelte.config.ts" +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config}*/ +const config = { + preprocess: [vitePreprocess()], + kit: { + adapter: adapter(), + files: { + routes: 'src/app/routes', // перемещаем роутинг внутрь app слоя + lib: 'src', + appTemplate: 'src/app/index.html', // Перемещаем входную точку приложения внутрь слоя app + assets: 'public' + }, + alias: { + '@/*': 'src/*' // Создаём алиас для директории src + } + } +}; +export default config; +``` + +## Перемещение файлового роутинга в `src/app` + +Создадим слой app, переместим в него входную точку приложения `index.html` и создадим папку routes. +Таким образом, ваша файловая структура должна выглядеть так: + +```sh +├── src +│ ├── app +│ │ ├── index.html +│ │ ├── routes +│ ├── pages # Папка pages, закреплённая за FSD +``` + +Теперь, вы можете создавать роуты для страниц внутри `app` и подключать к ним страницы из `pages`. + +Например, чтобы добавить главную страницу в проект, вам нужно сделать следующие шаги: +- Добавить слайс страницы внутри слоя `pages` +- Добавить соответствующий роут в папку `routes` из слоя `app` +- Совместить страницу из слайса с роутом + +Для того чтобы создать слайс страницы, воспользуемся [CLI](https://github.com/feature-sliced/cli): + +```shell +fsd pages home +``` + +Создайте файл `home-page.vue` внутри сегмента ui, откройте к нему доступ с помощью Public API + +```ts title="src/pages/home/index.ts" +export { default as HomePage } from './ui/home-page'; +``` + +Создайте роут для этой страницы внутри слоя `app`: + +```sh + +├── src +│ ├── app +│ │ ├── routes +│ │ │ ├── +page.svelte +│ │ ├── index.html +│ ├── pages +│ │ ├── home +│ │ │ ├── ui +│ │ │ │ ├── home-page.svelte +│ │ │ ├── index.ts +``` + +Добавьте внутрь `index.svelte` файла компонент вашей страницы: + +```html title="src/app/routes/+page.svelte" + + + + +``` + +## См. также + +- [Документация по изменению конфига директорий в SvelteKit](https://kit.svelte.dev/docs/configuration#files)