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

Progress Kendo UI по умолчанию не имеет версии для Svelte. Она специализируется на Angular, Vue, React и jQuery. Однако это не означает, что поклонникам Svelte не повезло! JavaScript остается JavaScript, и существуют обходные пути для удовлетворения различных потребностей.

TL;DR

Вы можете использовать Kendo UI для jQuery в любом JavaScript-фреймворке, либо использовать Astro для объединения компонентов из нескольких фреймворков (React, Vue, Angular). Версия для jQuery не идеальна для серверного рендеринга, но она может работать в чистом Svelte, в то время как Astro может творить чудеса с компонентами любого фреймворка.

✔️ Svelte с Kendo UI для jQuery

Svelte позволяет импортировать любой JS, который вы захотите. Это просто JavaScript.

Создание нового проекта SvelteKit

Установите Tailwind и любые другие опции SvelteKit, которые вам нужны.

Установка пакетов

с типами:

Активация Kendo UI

Подготовьте свой ключ и следуйте любым другим инструкциям по активации.

Создание файла декларации jQuery

Поместите его в lib/types/kendo-ui-module.d.ts или в любое другое подходящее место.

Без этого типы jQuery не будут работать на клиенте должным образом.

Динамический импорт jQuery в браузере

Это позволяет загружать Kendo UI динамически. Kendo UI для jQuery не может работать на сервере, так как ему нужны объекты window и т. д.

Обработка CSS

Убедитесь, что ваш глобальный файл layout.css или app.css содержит tailwind и правильный CSS темы Progress.

Загрузка элемента Grid

Мы загружаем Kendo UI в onMount, чтобы не возникло проблем с загрузкой на сервере.
Мы используем сигнал $state для отображения скелета загрузки.
jQuery и kendoGrid загружаются динамически, а затем продукты добавляются в сетку.

Создание загрузчика

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

Мы могли бы с таким же успехом использовать спиннер.

✔️ Kendo UI в Astro

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

Установка Astro

Создайте новый проект Astro.

Не забудьте добавить Tailwind.

Выберите свой фреймворк Kendo UI

KendoReact
Kendo UI для Vue
Kendo UI для Angular

Установка плагина Svelte Astro:

Установите соответствующий плагин Astro:

Angular (неофициальный)

Для этой демонстрации я выбрал Vue и скопировал все компоненты сетки Kendo UI для Vue в Astro.

Установка зависимостей

Настройка CSS

Поместите в styles/global.css.

Активация вашей лицензии Kendo UI

Настройка KendoReact
Настройка Kendo UI для Vue
Настройка Kendo UI для Angular

📝 Вы также можете использовать более одного или даже все из них вместе с Astro! (Progress предлагает пакет DevCraft, если вы пишете код на нескольких фреймворках.)

Создание компонента Svelte

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

Этот компонент имеет простой счетчик кнопок, использующий Runes.

Создание нашего компонента Grid

Компонент Grid разбит на несколько файлов и скопирован непосредственно из демонстрации Grid.

Загрузка Vue со Svelte

Мы создаем нашу страницу Astro в pages/index.astro.

Обратите внимание, что мы импортируем как .svelte, так и .vue компоненты в одном файле!
Мы используем client:load, чтобы показать, что компонент динамический.
Grid является дочерним элементом Panel.

И у нас есть Kendo UI для Vue и компонент Svelte в одном флаконе!