# Upgrade guide for Gantt v4.1.0

Be sure to also check out the news in [Grid](#Grid/guides/upgrades/4.1.0.md),
[Scheduler](#Scheduler/guides/upgrades/4.1.0.md) and [SchedulerPro](#SchedulerPro/guides/upgrades/4.1.0.md).

## Dropped support for RequireJS

In version 4.1.0 we have removed the RequireJS demo from the project, since it is an outdated technology. We instead
recommend using modern ES6 module imports which is supported in all modern browsers
(Chrome, FireFox, Safari, Edge (chromium)).

You could easily upgrade old application code to use new technology.

**Old code:**

`index.html`

```html
<script data-main="scripts/app" src="scripts/require.js"></script>
```

`scripts/app.js`

```javascript
requirejs.config({
    paths : {
        gantt : '../../../build/gantt.umd'
    }
});

requirejs(['gantt'], function(bryntum) {
    new bryntum.Gantt({
        // config here
    });
});
```

**New code:**

`index.html`

```html
<script type="module" src="scripts/app.js"></script>
```

`scripts/app.js`

```javascript
import { Gantt } from '../../../build/gantt.module.js';

new Gantt({
    // config here
});
```

## ProjectModel API changes

ProjectModel `commit` was deprecated in favor of `acceptChanges`. ProjectModel `commitCrudStores` was deprecated in
favor of `acceptChanges`. ProjectModel `reject` was deprecated in favor of `revertChanges`.
ProjectModel `rejectCrudStores` was deprecated in favor of `revertChanges`.

**Old code:**

```javascript
gantt.project.commit();
gantt.project.commitCrudStores();
gantt.project.reject();
gantt.project.rejectCrudStores();
```

**New code:**

```javascript
gantt.project.acceptChanges();
gantt.project.revertChanges();
```

## DependencyCreation events

DependencyCreation events were all missing useful params about the state of the creation state as you drag and drop to
setup a link between two events. The `data` param is now deprecated and will be removed in a future major version.

**Old code:**

```javascript
gantt.on({
    beforedependencycreatedrag({ data }) {
        // Use undocumented params in data
    }
});
```

**New code:**

```javascript
gantt.on({
    dependencycreatedrop({ source, target, dependency }) {
        // Documented access to source task, target task, and the created dependency
    }
});
```

## Frameworks examples

Frameworks examples were moved to **examples/frameworks** folder:

| Framework | Examples folder             |
|-----------|-----------------------------|
| Angular   | examples/frameworks/angular |
| React     | examples/frameworks/react   |
| Vue v2    | examples/frameworks/vue     |
| Vue v3    | examples/frameworks/vue-3   |


<p class="last-modified">Last modified on 2023-10-26 8:19:02</p>