Svelte 4 to Svelte 5 migration

The 2.x release of SVAR Svelte Gantt was rewritten for Svelte 5 and published under a new package name. This guide covers every breaking change introduced between the 1.x (Svelte 4) line and the current 2.x (Svelte 5) line, so you can migrate with confidence.

Package rename

The package was renamed from wx-svelte-gantt to @svar-ui/svelte-gantt. All imports must be updated to use the new name.

npm install wx-svelte-gantt

npm install @svar-ui/svelte-gantt

<script>
  import { Gantt } from "wx-svelte-gantt";
</script>

<script>
  import { Gantt } from "@svar-ui/svelte-gantt";
</script>

Migration steps

Upgrade to Svelte 5

Ensure your project is running Svelte 5 before installing the new package. The 2.x line does not support Svelte 4.

Replace the package

Uninstall the old package and install the new one.

npm uninstall wx-svelte-gantt
npm install @svar-ui/svelte-gantt

Update all imports

Replace every occurrence of wx-svelte-gantt with @svar-ui/svelte-gantt in your source files.

Replace the built-in editor

The default sidebar editor and the editorShape property were removed in 2.2.0. Use the standalone <Editor> component instead.See the editor migration section below.

Update table action column id

If you reference the action column by id, change "action" to "add-task". See below.

Update scale format strings

Scales format strings changed from date-fns syntax to SVAR locale syntax in 2.4.0. See below.

Update fullscreen helper import

The fullscreen helper moved to @svar-ui/svelte-core in 2.4.0. See below.

Remove expand-scale action usage

The "expand-scale" action was removed in 2.6.0. Remove any code that dispatches or handles it. See below.

Breaking changes

Editor / `editorShape` removed (2.2.0)

The built-in sidebar editor and the editorShape prop on <Gantt> were removed. You now mount the standalone <Editor> component yourself and pass it an api reference from the Gantt.

<script>
  import { Gantt } from "wx-svelte-gantt";

  const editorShape = [
    { type: "text", key: "text", label: "Task name" },
    { type: "date", key: "start", label: "Start date" },
    { type: "date", key: "end", label: "End date" },
  ];
</script>

<Gantt {tasks} {links} {scales} {editorShape} />

<script>
  import { Gantt, Editor } from "@svar-ui/svelte-gantt";

  let api;

  const editorShape = [
    { type: "text", key: "text", label: "Task name" },
    { type: "date", key: "start", label: "Start date" },
    { type: "date", key: "end", label: "End date" },
  ];
</script>

<Gantt {tasks} {links} {scales} bind:api />
<Editor {api} shape={editorShape} />

Table action column id changed (2.2.0)

The id of the built-in action column was renamed from "action" to "add-task". Update any column configuration or event handlers that reference this id.

const columns = [
  { id: "text", header: "Task", flexgrow: 1 },
  { id: "action" }, // built-in action column
];

const columns = [
  { id: "text", header: "Task", flexgrow: 1 },
  { id: "add-task" }, // built-in action column
];

Scales format string changed (2.4.0)

This change silently produces incorrect scale labels if you forget to update your format strings. Double-check every format value in your scales array after migrating.

Scale format strings changed from date-fns token syntax to SVAR locale format syntax. The two syntaxes use different tokens for the same date parts. Common token equivalents:

date-fns (before)	SVAR locale (after)	Output example
`MMMM yyyy`	`%F %Y`	January 2024
`MMM`	`%M`	Jan
`d`	`%j`	7
`EEE`	`%D`	Mon
`HH:mm`	`%H:%i`	09:30

const scales = [
  { unit: "month", step: 1, format: "MMMM yyyy" },
  { unit: "day",   step: 1, format: "d" },
];

const scales = [
  { unit: "month", step: 1, format: "%F %Y" },
  { unit: "day",   step: 1, format: "%j" },
];

Fullscreen helper moved (2.4.0)

The fullscreen utility function moved from @svar-ui/svelte-gantt to @svar-ui/svelte-core. Update the import path.

import { Fullscreen } from "@svar-ui/svelte-gantt";

import { Fullscreen } from "@svar-ui/svelte-core";

Install @svar-ui/svelte-core if it is not already a direct dependency of your project:

npm install @svar-ui/svelte-core

`expand-scale` action removed (2.6.0)

The "expand-scale" API action was removed. If you were dispatching this action programmatically, remove those calls. Use the "resize-chart" action or the resizer UI instead to manage scale dimensions.

api.exec("expand-scale", { ... });

// "expand-scale" no longer exists — remove this call.
// Use the resizer line in the UI or the "resize-chart" action
// to respond to widget dimension changes.

Get Started

Configuration

Guides

PRO Features

Migration

Svelte 4 to Svelte 5 migration

Package rename

Migration steps

Breaking changes

Editor / `editorShape` removed (2.2.0)

Table action column id changed (2.2.0)

Scales format string changed (2.4.0)

Fullscreen helper moved (2.4.0)

`expand-scale` action removed (2.6.0)

​Package rename

​Migration steps

​Breaking changes

​Editor / editorShape removed (2.2.0)

​Table action column id changed (2.2.0)

​Scales format string changed (2.4.0)

​Fullscreen helper moved (2.4.0)

​expand-scale action removed (2.6.0)

Package rename

Migration steps

Breaking changes

Editor / `editorShape` removed (2.2.0)

Table action column id changed (2.2.0)

Scales format string changed (2.4.0)

Fullscreen helper moved (2.4.0)

`expand-scale` action removed (2.6.0)