SVAR Svelte v.2.0 Released with Full Support for Svelte 5

After a few weeks of dedicated effort, we’re happy to announce the stable release of SVAR Svelte 2.0! This update brings full compatibility with Svelte 5 to all of our Svelte components, including DataGrid, Gantt chart, File Manager, and Core UI library. You can now enjoy the smaller bundle sizes, improved performance, and cleaner, modern Svelte syntax.

As we were migrating the components to Svelte 5 and changing the code, we also took the opportunity to optimize the API of SVAR DataGrid and Core controls. These changes led to improved development experience and made the components more intuitive and easier to use. We’ll describe the details below, but first, here’s how you can get the update.

Get the Update

You’re welcome to get v.2.0 on SVAR GitHub page - don’t forget to star your favourite SVAR component ;) Or you can install the latest version from NPM:

SVAR Core Components:

npm install wx-svelte-core
npm install wx-svelte-menu
npm install wx-svelte-toolbar
npm install wx-svelte-uploader

Advanced SVAR Widgets:

npm install wx-svelte-grid
npm install wx-svelte-gantt
npm install wx-svelte-filemanager

Major Changes in API

In general, we didn’t significantly change how the components are used, so all their properties remain mostly the same. However, these are two major changes we need to mention:

Updated Event Handling Syntax

Svelte 5 has deprecated the old event handling syntax, and SVAR components have adopted this change as well. In earlier versions, events were bound using the on: syntax, such as:

<Text on:change={handler} />

With the latest update, this has been changed to more straightforward syntax:

<Text onchange={some} />

Changes to DataGrid, Gantt, and File Manager APIs

Another major change in API concerns Svelte DataGrid, Svelte Gantt, and Svelte File Manager components. In version 1.x their APIs could be accessed like this:

<Grid bind:api={api} />

In Svelte 5, this approach is discouraged. Instead, you should now use the bind:this construct, as shown below:

<Grid bind:this={api} />

We’ve already written about our Svelte 5 migration experience, so you can refer to this post if you need more details on what inner changes were introduced, how we approached the migration, and how we dealt with the challenges of adopting $effect and $derived.

What’s New in DataGrid

In addition to the upgrade to Svelte 5 syntax, we’ve introduced a couple of changes in DataGrid’s API to improve consistency and simplify the code:

• data-request action was renamed to request-data for better alignment with naming conventions;
• selected property, which was used for a single selected row, has been removed to avoid unnecessary duplication in the API - now selectedRows property is used to contain an array of a single selected row or multiple rows.

What’s New in Core Library

In version 2.0, we’ve introduced several changes and enhancements to our Svelte Core UI library to improve consistency, usability, and alignment with modern development practices:

• a Clear button has been added to all the controls with an input field, such as Combo, Datepicker, Richselect, Select, Text, etc.
• all controls with options now define array elements as id and label, maintaining API consistency across the library;
• all controls now trigger a change event when their value is updated, with the change passed as value to the event handler;
• the way how menus are triggered has been changed: you now have the access to inner show method instead of handler property;
• the Area component has been renamed to TextArea, and Timepicker is now TimePicker.
• all window controls, including dropdown, sidebar, modal boxes signal their hiding with the oncancel event. Additionally, modal boxes are triggering an onconfirm event when the OK button is pressed.

Share Your Love

We would be happy to see how you’re using SVAR Svelte 2.0 in your projects! This update not only brings compatibility with Svelte 5 but also makes our components more efficient, intuitive, and developer-friendly.

As always, we value your feedback — whether it’s a bug report or feature suggestion, feel free to submit an issue on GitHub or write to our community forum. And if you like SVAR Svelte components, please give us a star and share your thoughts with us.

Happy coding with Svelte 5!