Svelte: июль 2026 —
Конфигурация SvelteKit, переменные окружения, {const ...}

Введение

Июль 2026 стал знаковым месяцем для экосистемы Svelte. Команда SvelteKit выпустила девять минорных релизов (с 2.62.0 по 2.68.0) за один месяц, а CLI и языковые инструменты догнали новый синтаксис Svelte 5. Результат — значительно улучшенный опыт разработки для всех, кто создаёт проекты на SvelteKit.

Эта статья охватывает всё, что вышло в этом месяце: консолидацию конфигурации SvelteKit, предвещающую Kit 3, экспериментальную систему явных переменных окружения, полную поддержку деклараций {const ...} во всём инструментарии, прямую загрузку файлов через remote functions, предварительное сжатие пререндеренного Markdown и улучшенный sv CLI.

Конфигурация SvelteKit в vite.config.js — превью Kit 3

Самое значительное структурное изменение месяца: теперь можно определять конфигурацию SvelteKit непосредственно в vite.config.js, устраняя необходимость в отдельном svelte.config.js (SvelteKit 2.62.0).

Это превью того, как SvelteKit 3 потребует размещать конфигурацию в vite.config.js. Вместо двух файлов конфигурации всё идёт в Vite-конфиг:

// svelte.config.js — больше не обязателен (но поддерживается)
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess()
};

// vite.config.js — теперь единый источник истины
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit({
      // Конфигурация SvelteKit здесь
      preprocess: vitePreprocess(),
      kit: {
        outDir: '.svelte-kit',
        adapter: adapter()
      }
    })
  ]
});

Шаблонизатор sv create теперь создаёт проекты с такой настройкой по умолчанию ([email protected]), то есть новые проекты стартуют с одним файлом конфигурации. Языковые инструменты ([email protected] / [email protected]) также могут читать конфигурацию Svelte прямо из vite.config.js/ts, так что интеграции в редакторе продолжают работать без svelte.config.js.

Явные переменные окружения — замена $env/* в Kit 3

SvelteKit 2.63.0 вводит экспериментальные явные переменные окружения. Вместо виртуальных модулей $env/* вы объявляете и типизируете переменные окружения в одном месте.

Это значительное архитектурное изменение. Модули $env/* были интерфейсом SvelteKit для переменных окружения с самого начала, но у них были ограничения: отсутствие типобезопасности (переменные возвращаются строками), никакого автодополнения в редакторах и система модулей, которая может сбивать с толку новых разработчиков.

Новый подход использует хелпер defineEnv, объявляющий переменные с типами:

// src/lib/env.js
import { defineEnv } from '@sveltejs/kit/env';

export const env = defineEnv({
  // Публичные переменные (доступны на клиенте)
  public: {
    VITE_API_URL: { type: 'string', default: 'https://api.example.com' },
    VITE_APP_NAME: { type: 'string' }
  },
  // Приватные переменные (только сервер)
  private: {
    DATABASE_URL: { type: 'string' },
    STRIPE_SECRET_KEY: { type: 'string' },
    MAX_UPLOAD_SIZE: { type: 'number', default: 5242880 }
  }
});

После объявления вы импортируете из env.js вместо $env/static/public или $env/dynamic/private. Автодополнение TypeScript и проверка типов работают нативно — редактор знает форму каждой переменной.

// Вместо: import { PUBLIC_API_URL } from '$env/static/public';
import { env } from '$lib/env';

// Полная типобезопасность — работает автодополнение
const apiUrl = env.VITE_API_URL;
const dbUrl = env.DATABASE_URL;

Аддоны drizzle и better-auth уже поддерживают новую систему явных переменных, автоматически генерируя корректные объявления ([email protected]). Предполагается, что эта система полностью заменит $env/* в SvelteKit 3.

Remote Functions: прямая загрузка файлов и обновление запросов

Прямая загрузка файлов без FormData

SvelteKit 2.64.0 добавляет нативную поддержку объектов File в команды remote functions. Раньше для загрузки файла требовалось вручную оборачивать данные в FormData. Теперь можно передавать File напрямую:

// Раньше — ручное оборачивание в FormData
import { uploadAvatar } from './api';

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
await uploadAvatar({ data: formData });

// Теперь — прямая передача File
import { uploadAvatar } from './api';

await uploadAvatar({ file: fileInput.files[0] });

SvelteKit автоматически обрабатывает сериализацию, делая код чище и устраняя частый источник ошибок. На стороне сервера команда получает объект File нативно.

Обновление связанных запросов после мутаций

SvelteKit 2.65.0 позволяет remote queries обновлять другие запросы. Это решает распространённую проблему: после мутации данных (например, добавления комментария) нужно обновить связанные запросы (например, список комментариев) без ручной инвалидации кэша.

// query.js
export const getPosts = remote.query(async () => {
  return db.select().from(posts);
});

export const getComments = remote.query(async (postId) => {
  return db.select().from(comments).where(eq(comments.postId, postId));
});

// command.js — addComment обновляет оба запроса автоматически
export const addComment = remote.command(async ({ postId, text }) => {
  await db.insert(comments).values({ postId, text });
  // Триггерит обновление обоих запросов на клиенте
  return { refreshes: [getPosts, getComments(postId)] };
});

Предварительное сжатие пререндеренного Markdown

SvelteKit 2.66.0 расширяет прекомпрессию на пререндеренные файлы .md и .mdx. Раньше сжимались только HTML, JavaScript и CSS. Теперь Markdown-контент также прекомпрессируется, что означает более быструю доставку сайтов документации, блогов и любых сайтов, использующих пререндеренный Markdown.

Предупреждения для boolean-полей и обработка URL пререндеринга

Предупреждения для boolean-полей

SvelteKit 2.66.0 вводит предупреждение, когда boolean-поля в схемах удалённых форм не помечены как опциональные:

// Без отметки optional — теперь выдаёт предупреждение
const schema = {
  agreeToTerms: 'boolean'
};
// Если чекбокс не отмечен, значение не отправляется,
// и валидация схемы «тихо» проваливается.

// Правильно — отметить как optional
const schema = {
  agreeToTerms: { type: 'boolean', optional: true }
};

Кастомная обработка URL пререндеринга

SvelteKit 2.67.0 добавляет prerender.handleInvalidUrl, давая контроль над тем, как обрабатываются невалидные URL, найденные при обходе:

// svelte.config.js (или опции плагина)
export default {
  kit: {
    prerender: {
      handleInvalidUrl: 'warn'  // или 'ignore', или кастомная функция
    }
  }
};

Декларации {const ...} — полная поддержка инструментария

Svelte 5 представил декларации {const ...}, позволяющие деструктурировать и преобразовывать данные прямо внутри блоков {#each}. До этого месяца инструментарий редактора не полностью их поддерживал — language server, svelte-check и svelte2tsx либо игнорировали, либо некорректно обрабатывали этот синтаксис.

Июльское обновление добавляет полную поддержку во всех инструментах:

• sv CLI теперь создаёт проекты с {const ...} в демо-шаблоне ([email protected])
• Language server понимает {const ...} для автодополнения и диагностики ([email protected])
• svelte-check проверяет типы внутри {const ...} ([email protected])
• svelte2tsx корректно конвертирует {const ...} в TypeScript-декларации ([email protected])

Вот как выглядит синтаксис на практике:

{#each products as product}
  {const {id, name, price, image} = product}
  {const discounted = price * 0.9}
  

    
    
{name}
    

      ${price}
      ${discounted.toFixed(2)}
    
  
{/each}

Улучшения sv CLI

Конфигурация Vite-плагина по умолчанию

sv create теперь создаёт проекты на @sveltejs/kit@^2.62.0 и по умолчанию помещает конфигурацию Svelte в Vite-плагин. Новые проекты стартуют с единым vite.config.js.

Экспериментальная система аддонов

Новая система позволяет включать экспериментальные флаги и опции @next прямо из CLI, без ручного редактирования конфигурации:

sv add experimental --flag explicit-env-vars
sv add experimental --next

Поддержка Drizzle и better-auth

Аддоны drizzle и better-auth теперь поддерживают новые явные переменные окружения SvelteKit. При их добавлении CLI автоматически генерирует правильные декларации defineEnv.

sv-utils Хелперы

Новые хелперы defineEnv и svelteConfig в @sveltejs/[email protected] упрощают авторам аддонов чтение и редактирование конфигурации Svelte программно.

Обновления языковых инструментов

CSS-автодополнение во вложенных style-тегах

CSS-автодополнение теперь работает внутри вложенных тегов <style> ([email protected]). Если компонент содержит несколько блоков стилей, редактор корректно предлагает CSS-свойства в каждом.

Чтение конфигурации из vite.config.js/ts

Языковые инструменты теперь могут читать конфигурацию Svelte прямо из vite.config.js/ts ([email protected] / [email protected]). Интеграции в редакторе работают независимо от того, где находится конфигурация.

Сводка версий

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

Готовы создать проект на SvelteKit?

Июльское обновление 2026 делает SvelteKit более гибким в настройке, более типобезопасным и лучше оснащённым инструментами, чем когда-либо. Мигрируете ли вы с другого фреймворка или начинаете с нуля — эти улучшения снижают барьеры для создания быстрых и поддерживаемых веб-приложений.

Я работаю с SvelteKit наряду с React, Vue.js и Angular — выбирая правильный инструмент для каждого проекта. Если вы планируете веб-приложение и хотите получить опытную оценку, свяжитесь со мной. Я провожу бесплатные первичные консультации.

Я — full-stack разработчик с 20-летним опытом создания веб-приложений. Нахожусь в Минске и работаю по всему миру, давайте обсудим ваш проект.