Часто задаваемые вопросы

Я новичок в Svelte. С чего мне начать?

Мы считаем, что лучший способ начать — это пройти интерактивный учебник. Каждый шаг в нем в основном сосредоточен на одном конкретном аспекте и легко воспринимается. Вы будете редактировать и запускать настоящие компоненты Svelte прямо в вашем браузере.

Чтобы начать, вам потребуется всего пять-десять минут, а для полного освоения учебника — около полутора часов.

Где я могу получить поддержку?

Если ваш вопрос касается определённого синтаксиса, данная документация — хорошее место для начала.

Stack Overflow — популярный форум для вопросов на уровне кода или если вы столкнулись с конкретной ошибкой. Ознакомьтесь с существующими вопросами, помеченными тегом Svelte, или задайте свой!

Существуют онлайн-форумы и чаты, которые являются отличным местом для обсуждения лучших практик, архитектуры приложений или просто для знакомства с другими пользователями Svelte. Наш Discord или канал на Reddit — примеры таких мест. Если у вас есть вопрос на уровне кода, Stack Overflow обычно будет более подходящим вариантом.

Есть ли сторонние ресурсы?

Svelte Society ведет список книг и видео.

Как настроить подсветку синтаксиса для файлов .svelte в VS Code?

Существует официальное расширение для VS Code.

Есть ли инструмент для автоматического форматирования моих .svelte файлов?

Вы можете использовать prettier с плагином prettier-plugin-svelte.

Как документировать свои компоненты?

В редакторах, использующих Svelte Language Server, вы можете документировать компоненты, функции и экспорты, используя специально отформатированные комментарии.

<script>
  /** Как мы должны называть пользователя? */
  export let name = 'мир';
</script>

<!--
@component
Вот документация для этого компонента.
Она будет отображаться при наведении курсора.

- Вы можете использовать Markdown.
- Вы также можете использовать блоки кода.
- Использование:
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
  <h1>
    Привет, {name}
  </h1>
</main>

Примечание: тег @component обязательно должен присутствовать в HTML-комментарии, который описывает ваш компонент.

Масштабируется ли Svelte?

Вскоре появится статья в блоге на эту тему, но пока ознакомьтесь с этим ишью.

Существует ли библиотека UI-компонентов?

Существует несколько библиотек UI-компонентов, а также отдельные компоненты. Найдите их в разделе дизайнерских систем на странице компонентов на сайте Svelte Society.

Как тестировать приложения на Svelte?

Структура вашего приложения и место, где определена логика, будут определять лучший способ обеспечить правильное тестирование. Важно отметить, что не вся логика должна находиться внутри компонента — это включает в себя такие аспекты, как преобразование данных, управление состоянием между компонентами и ведение журналов, среди прочего. Помните, что библиотека Svelte имеет свой собственный набор тестов, поэтому вам не нужно писать тесты для проверки деталей реализации, предоставляемых Svelte.

Приложение на Svelte обычно будет иметь три различных типа тестов: модульные, компонентные и сквозные (E2E).

Модульные тесты: Сосредоточены на тестировании бизнес-логики в изоляции. Обычно это проверка отдельных функций и крайних случаев. Минимизируя область тестирования, вы можете сделать их более легкими и быстрыми, а также, извлекая как можно больше логики из ваших компонентов Svelte, вы сможете покрыть большую часть вашего приложения с их помощью. При создании нового проекта SvelteKit вам будет предложено настроить Vitest для модульного тестирования. Существует множество других тестовых фреймворков, которые также можно использовать.

Компонентные тесты: Проверка того, что компонент Svelte монтируется и взаимодействует так, как ожидается, на протяжении всего его жизненного цикла, требует инструмента, который предоставляет объектную модель документа (DOM). Компоненты могут быть скомпилированы (поскольку Svelte является компилятором, а не обычной библиотекой) и смонтированы, что позволяет проверять структуру элементов, слушатели, состояние и все другие возможности, предоставляемые компонентом Svelte. Инструменты для компонентного тестирования варьируются от реализации в памяти, такой как jsdom, в паре с тестовым фреймворком, таким как Vitest, до решений, которые используют реальный браузер для предоставления визуальных возможностей тестирования, таких как Playwright или Cypress.

Сквозные тесты: Чтобы убедиться, что ваши пользователи могут взаимодействовать с вашим приложением, необходимо протестировать его целиком, максимально приближенно к продакшен-среде. Это делается путём написания сквозных (E2E) тестов, которые загружают и взаимодействуют с развёрнутой версией вашего приложения, чтобы смоделировать, как пользователь будет взаимодействовать с вашим приложением. При создании нового проекта SvelteKit вам будет предложено настроить Playwright для сквозного тестирования. Также доступно множество других библиотек для E2E тестирования.

Некоторые ресурсы для начала работы с тестированием:

• Svelte Testing Library
• Тестирование компонентов Svelte в Cypress
• Пример использования vitest
• Пример использования тестового фреймворка uvu с JSDOM
• Тестирование компонентов Svelte с использованием Vitest и Playwright
• Тестирование компонентов с WebdriverIO

Есть ли роутер?

Официальная библиотека маршрутизации — это SvelteKit. SvelteKit предоставляет файловый маршрутизатор, серверный рендеринг (SSR) и горячую перезагрузку модулей (HMR) в одном удобном пакете. Он имеет сходство с Next.js для React.

Тем не менее, вы можете использовать любую библиотеку маршрутизации. Многие люди используют page.js. Также есть очень похожий navaid. Кроме того, есть universal-router, который поддерживает изоморфные дочерние маршруты, но не имеет встроенной поддержки истории.

Если вы предпочитаете декларативный подход с HTML, существует изоморфная библиотека svelte-routing и её форк под названием svelte-navigator, содержащий дополнительный функционал.

Если вам нужна маршрутизация на основе хешей на стороне клиента, обратите внимание на опцию hash в SvelteKit, svelte-spa-router, или abstract-state-router.

Routify — это ещё один маршрутизатор на основе файловой системы, аналогичный маршрутизатору SvelteKit. Версия 3 поддерживает нативный SSR Svelte.

Вы можете увидеть список маршрутизаторов, поддерживаемый сообществом, на sveltesociety.dev.

Как написать мобильное приложение с помощью Svelte?

Хотя большинство мобильных приложений пишутся без использования JavaScript, если вы хотите использовать свои существующие компоненты Svelte и знания о Svelte при создании мобильных приложений, вы можете превратить SvelteKit SPA в мобильное приложение с помощью Tauri или Capacitor. Мобильные функции, такие как камера, геолокация и push-уведомления, доступны через плагины для обеих платформ.

Svelte Native была опцией, доступной для Svelte 4, но обратите внимание, что Svelte 5 в настоящее время не поддерживает её. Svelte Native позволяет вам писать приложения NativeScript, используя компоненты Svelte, которые содержат UI-компоненты NativeScript, а не элементы DOM, что может быть знакомо пользователям, пришедшим из React Native.

Могу ли я сказать Svelte не удалять мои неиспользуемые стили?

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

Система ограничения стилей компонентов Svelte работает путём генерации уникального класса для данного компонента, добавления его к соответствующим элементам в компоненте, которые находятся под контролем Svelte, а затем добавления этого класса ко всем селекторам в стилях этого компонента. Когда компилятор не может определить, к каким элементам применяется селектор стиля, существуют два плохих варианта для его сохранения:

• Если он сохраняет селектор и добавляет к нему класс ограничения, селектор, вероятно, не будет соответствовать ожидаемым элементам в компоненте, и он точно не будет соответствовать, если элементы были созданы дочерним компонентом или с помощью {@html ...}.
• Если он сохраняет селектор без добавления к нему класса ограничения, данный стиль станет глобальным, влияя на всю вашу страницу.

Если вам нужно стилизовать что-то, что Svelte не может идентифицировать во время компиляции, вам нужно явно выбрать глобальные стили, используя :global(...). Но также имейте в виду, что вы можете обернуть :global(...) только вокруг части селектора. Например, .foo :global(.bar) { ... } будет стилизовать любые элементы .bar, которые появляются внутри элементов .foo компонента. Пока в текущем компоненте есть какой-то родительский элемент, с которого можно начать, частично глобальные селекторы, подобные этому, почти всегда смогут дать вам желаемый результат.

Доступен ли Svelte v2?

Новые функции в v2 не добавляются, а ошибки, вероятно, будут исправляться только в случае, если они крайне серьезные или представляют собой какую-либо уязвимость безопасности.

Документация по-прежнему доступна здесь.

Как сделать горячую перезагрузку модулей?

Мы рекомендуем использовать SvelteKit, который поддерживает HMR из коробки и построен на основе Vite и svelte-hmr. Также существуют плагины сообщества для rollup и webpack.