Bryntum Support Forums

Good afternoon.

There is some code. Extending Gantt via Plugin.

I want to move this code to a separate library, which should work both with React and with NodeJs (CommonJs).
Do you have any example/recommendations on how to properly set up webpack

Tried to open the Webpack 4 example, but there is no useful information there, except for pictures and readme.md

Hi!

Readme.md file for Webpack example shows which commands to run.
But it doesn't export library.

Check attached file for sample which creates two libraries with exported MyGantt class and all Bryntum classes.

Note it uses trial gantt package in package.json.

Run

npm install
npm run build

Check build folder for output.

Please check these docs for further webpack configuring
https://webpack.js.org/configuration/

If you need something special please provide more information on what you are searching for.

Thank.
This is very similar to what I need.

I am writing functions that are embedded in the ProjectModel.
I also inherit *Model classes.

The main misunderstanding that arises.

In react app I import

import {ProjectModel, TaskModel} from "@bryntum/gantt";

And in a nodejs app like this:

import { ProjectModel, TaskModel } from '@bryntum/gantt/gantt.node.cjs';

There is an understanding that problems may arise around this.

p.s. I'm sorry if my questions are simple and stupid. Unfortunately, I'm a kotlin developer, forced to write JS....

Hi!

Bryntum Gantt UI component is not compatible with Node js.

We deliver gantt.node.cjs which has only non UI parts. This is not what can be used for server side UI rendering.
If you want rebuild node js bundle, you need update index.js file from attached example to import from gantt.node.cjs and then export things which you need.

import { ProjectModel } from '../node_modules/@bryntum/gantt/gantt.node.cjs';

export * from '../node_modules/@bryntum/gantt/gantt.node.cjs';

export class MyProjectModel extends ProjectModel {
    // Do something
}

Check node js integration here
https://www.bryntum.com/docs/gantt/guide/Gantt/integration/nodejs

Actually, I don't suggest you patch the component and build separate bundle.
Better approach is using Gantt API to override methods or events to implement your functionality.
Please note that for React we promote using Gantt react wrapper.
Details can be seen here
https://www.bryntum.com/docs/gantt/guide/Gantt/integration/react/guide

Thanks for answers.
Tell me another question, can you share information on how you collect the library? I see that the source code itself is written in JS. However, wrappers for TS get into the final distribution. I understand they are generated? Are there examples of how you achieve this?

Hi!

Wrappers have TypeScript source delivered with package. Check in node_modules/@bryntum.

Typings for library is made by internally developed tool. We do not offer it publicly.

Understood, thank you!