Svelte 5 and gantt

Gantt Svelte Gantt
#1

Does anybody have a working implementation of gantt with Svelte 5? I’d love to take a look at your code please.

#2

Hello,

We have an article how to implement the Gantt with Svelte:
dhtmlxGantt with Svelte Gantt Docs ;
Currently, Vite project installs only the Svelte with version 4. So, you need to manually install the latest version. It means that after you’ve created a project with the following command:

npm create vite@latest

you also need to execute:

npm i svelte@next

After that, you need to modify main.js file which is located in the src folder with new Svelte v5 updates. It should look like the following:

import './app.css'
import { mount } from 'svelte';
import App from './App.svelte'

const app = mount(App,{
  target: document.getElementById('app'),
})

export default app

Here is an article with Svelte changes:Breaking changes • Docs • Svelte 5 preview
After implementing the code above, follow our step-by-step guide and everything should work.

You can check the following Gantt with Svelte v5 demo:
Gantt-Svelte-5-demo.zip (17.7 KB)

#3

ok, I’ve checked out the example attached. This does not use Svelte 5 syntax, it’s Svelte 4. It has the latest version of Svelte 5 specified but doesn’t actually use it.

Do you have another example that actually uses the new syntax?

I realize Svelte 5 is new, but it’s already RC and should be released soon, I would have hoped someone here would have tried it out already seeing as how dhmtlx is one of the only ui libraries on the internet that actually advertises Svelte compatibility.

#5

Svelte 5 is now officially released.

Do you have an ETA when dhtmlx will support the new syntax?

#6

Hello,
As we provide a starting demo with DHTMLX Gantt and Svelte, the only one place where the new syntax can be added is the Gantt.svelte file. So, you can change the way of getting props and use the $effect rune instead of onMount function according to the Svelte docs and migration list:
Runes • Docs • Svelte 5 preview ;
Component Party ;
Thus, the Gantt.svelte file might look like this:

<script>
    import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
    import { Gantt } from "@dhx/trial-gantt";

    const {tasks} = $props();

    let container;
    $effect(() => {
        let gantt = Gantt.getGanttInstance();
        gantt.init(container);
        gantt.parse(tasks);

        return () => {
            gantt.destructor();
        };
    });
</script>

<div bind:this={container} style="width: 100%; height: 100%;"></div>

Please check the demo:
Gantt-Svelte-5-demo.zip (27.5 KB)

#7

that seems to work, thank you!