Migration to Vite #61

palagdan · 2024-08-29T12:23:58Z

Resolves #51
Resolves #58

palagdan · 2024-08-29T12:31:26Z

After updating the extension from .js to .jsx for all the components, I encountered an issue with loading a pipeline. Specifically, after initializing a graph, the node state is empty. I tried to investigate it using debugging, but I couldn't figure out the problem. Everything else is working fine with Vite, including static images.

I encountered an error with WebSockets in Dagre.jsx: ReferenceError: Buffer is not defined.
I investigated and found that this error occurs because the Buffer class is a global object in Node.js but not in browser environments. The solution is to use the nodePolyfills plugin, which provides browser-compatible versions of Node.js core modules and globals. This allows libraries designed for Node.js environments to function correctly in the browser. We can discuss the possibility of removing this plugin and WebSocket from the Dagree component, as I don't see a strong reason to keep it.

palagdan · 2024-08-29T14:45:44Z

To Do After Migration to Vite

Refactor Class Components to Functional Components
Functional components are recommended for better performance and simplicity.
Refactor main.css
Refactor main.css into separate files
Fix Script Execution Issues
Fix problems related to script execution.

Migrate from TreeBeard to MUI Material for Script Tree Generation
TreeBeard is outdated and causing warnings. Switch to MUI Material for generating the script tree due to the following warnings:

TreeBeard2: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Warning: Transition2 uses the legacy childContextTypes API, which is no longer supported and will be removed in the next major release. Use React.createContext() instead.

...

public/config.js

src/components/treebeard/ScriptsTree.jsx

blcham

i assume everything is working fine now in SPipes editor, so after
comments are resolved we can merge .

vite.config.js

src/config/env.js

.env.development

.env.production

palagdan · 2024-08-30T16:39:59Z

@blcham
I fixed a bug related to Dagre state management. It is a magic to me how it worked before and why it stopped working after I changed the file extension from .js to .jsx (I am sure this issue was caused by this change).

I discovered that setState() is an asynchronous function but does not return a promise, making its behavior somewhat unpredictable. The only way to ensure state updates are processed before taking action is to use a callback function as the second parameter of setState(). Unfortunately, you cannot await setState() directly.

The problem was that setState() was called multiple times within processGraph() and addNodes(), leading to an empty state. Additionally, this.renderCytoscapeElement() should be called after processGraph() has updated the nodes and edges state. However, since setState() is asynchronous, it didn't update the state in time, resulting in renderCytoscapeElement() receiving empty nodes and edges arrays. This is why the pipeline wasn’t rendered as shown in the picture I sent earlier.

   Rest.getScript(this.state.file, this.state.transformation).then((response) => {
        this._processGraph(response);
        this.renderCytoscapeElement();
      });

palagdan · 2024-08-31T16:04:36Z

@blcham

I am completely stuck with this ticket. Yesterday, after fixing a bug that I described earlier, I attempted to test it in Docker (production mode). When I tried to load the scripts, the page wouldn't load due to a polyfill issue with process. The external library undici uses Node.js libraries that are not supported by the browser, which is causing this error:

The undici library tries to access a Node.js version with the process variable:

Since the browser does not support Node.js libraries, process is undefined, and Vite does not support it either. For reference, see: vitejs/vite#7384.

I attempted to use the vite-plugin-node-polyfills library, but it did not resolve the issue and instead introduced new problems, such as memory leaks during the build and strange conflicts:

11.73 error during build:
11.73 [commonjs--resolver] Could not load /app/node_modules/stream-browserify/web: ENOENT: no such file or directory, open '/app/node_modules/stream-browserify/web'
11.73 file: /app/node_modules/jsonld/lib/index.js
11.73 Error: Could not load /app/node_modules/stream-browserify/web: ENOENT: no such file or directory, open '/app/node_modules/stream-browserify/web'

I don't know how to resolve this, as there is limited information available, and nothing seems to work.

I find out that using vite.js gives a different result between dev and build environment, that is why it works totally fine in a dev mode.

I tried to define process myself with

import Process from "process";
globalThis.process = Process;

But It is also undefined in production:

blcham · 2024-09-18T17:06:16Z

please rebase
describe e.g. from package-lock file where does unidici library comes from and why it is there
i remember that there is vite plugin to set process variables, maybe we can set what is needed, not sure if relevant -- https://dev.to/whchi/how-to-use-processenv-in-vite-ho9

palagdan · 2024-09-19T10:13:11Z

this library comes from s-forms -> jsonld -> http-client -> undici
|
It is not relevant because it is guide for using env variables in vite. The problem is that the process variable is not defined.
The undici calls process.version...

blcham · 2024-10-01T12:17:26Z

@palagdan to summarize our meeting:

the issue is happening only in production but not in npm run dev

Alternative solutions:

1. fix it
1. find out other way to make docker image (currently we use just nginx image to which we copy html+js files, maybe using Nodejs?)
1. make docker image with npm that will run npm run dev

ad i):

how SForms causes the issue?
- It is strange that it is caused by s-forms (s-forms -> jsonld -> http-client -> undici) although this error does not happen in Record Manager. What is different?
- TODO - can we find out what exactly causes it? (debug using npm run dev)

palagdan · 2024-10-29T15:43:26Z

@blcham

I’ve fixed the bug, and it now works correctly in production mode as well. It’s ready for merging.

blcham

LGTM

blcham · 2024-11-01T11:10:24Z

src/components/dagre/Dagre.jsx

@@ -58,10 +57,6 @@ const rankDirOptions = [
  { text: "TopBottom", key: "TB", value: "TB" },
 ];

-const websocketURL = new URL("/rest/notifications", window.location.href);


How come we removed websockets? Do we still support the automatic detection of changes within scritps?

I just tested it and this does not work; please make a new issue for that.
To reproduce:

open a script

modify the script using a textual editor outside of SPipes editor

blcham · 2024-11-02T02:36:12Z

src/components/dagre/Dagre.jsx

      });
    });
  }

-  //prevent session timeout


Why we do not need this anymore?

blcham · 2024-11-02T02:44:56Z

src/components/modal/ScriptExecutionModal.jsx

@@ -96,16 +95,6 @@ class ScriptOntologyModal extends React.Component {
                      </td>
                      <td>{data[MODULE_EXECUTION_DURATION]}ms</td>
                      {/*<td><Moment unix format="DD.MM.YYYY">{data[MODULE_EXECUTION_START_DATE]/1000}</Moment></td>*/}
-                      <td>


Do we still show execution start and finish date?

BTW, execution is not working which you know i assume as we targeted it in #62 (not described there in detail so not sure)

blcham · 2024-11-02T03:08:13Z

@palagdan We still need to answer the comments above which I included into the first bullet of #62

palagdan force-pushed the 51-migrate-to-vite branch from 7b85a9b to 90d8d53 Compare August 29, 2024 14:35

blcham reviewed Aug 29, 2024

View reviewed changes

public/config.js Outdated Show resolved Hide resolved

src/components/treebeard/ScriptsTree.jsx Show resolved Hide resolved

palagdan force-pushed the 51-migrate-to-vite branch from 452097a to b7998f8 Compare August 29, 2024 19:02

blcham requested changes Aug 30, 2024

View reviewed changes

vite.config.js Outdated Show resolved Hide resolved

blcham reviewed Aug 30, 2024

View reviewed changes

src/config/env.js Outdated Show resolved Hide resolved

.env.development Outdated Show resolved Hide resolved

.env.production Outdated Show resolved Hide resolved

blcham mentioned this pull request Aug 30, 2024

Refactor after migration to Vite #62

Open

14 tasks

palagdan force-pushed the 51-migrate-to-vite branch from 421064a to 5129fd7 Compare August 30, 2024 16:28

palagdan force-pushed the 51-migrate-to-vite branch from 5129fd7 to e630cbb Compare October 29, 2024 12:13

palagdan requested a review from blcham October 29, 2024 15:44

palagdan added 13 commits November 1, 2024 11:59

[#51] Refactor js extension to jsx

cf62641

[#51] Set up migration to Vite

278927c

[#51] Fix Buffer is not defined error

d14bf9d

[#51] Inject config.js to index.html

0cd37e5

[#51] Fix paths

adb54a5

[#51] Fix incorrect comparing

ca354d5

[#51] Add source map

b1a8c93

[#51] Implement .env variables retrieving

a63cfd4

[#51] Add dev title for the development mode

f7e790b

[#51] Update cytoscape libraries

1cd80f2

[#51] Fix Dagre async bug

d0a7095

[#51] Remove websockets

bd81b99

[#51] Remove webpack config files

b22ed67

palagdan added 3 commits November 1, 2024 11:59

[#51] Remove webpack dependencies

133dc8f

[#51] Remove react-moment

2c31a1e

[#51] Update vite config

58c58d8

blcham force-pushed the 51-migrate-to-vite branch from 5e9f8ad to 58c58d8 Compare November 1, 2024 10:59

blcham approved these changes Nov 1, 2024

View reviewed changes

blcham merged commit 01c4cc8 into master Nov 1, 2024
1 check passed

blcham deleted the 51-migrate-to-vite branch November 1, 2024 11:05

blcham reviewed Nov 2, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration to Vite #61

Migration to Vite #61

palagdan commented Aug 29, 2024 •

edited

Loading

palagdan commented Aug 29, 2024 •

edited

Loading

palagdan commented Aug 29, 2024 •

edited

Loading

blcham left a comment •

edited

Loading

palagdan commented Aug 30, 2024

palagdan commented Aug 31, 2024 •

edited

Loading

blcham commented Sep 18, 2024 •

edited

Loading

palagdan commented Sep 19, 2024 •

edited

Loading

blcham commented Oct 1, 2024 •

edited

Loading

palagdan commented Oct 29, 2024

blcham left a comment

blcham Nov 1, 2024

blcham Nov 2, 2024 •

edited

Loading

blcham Nov 2, 2024

blcham Nov 2, 2024

blcham Nov 2, 2024

blcham Nov 2, 2024 •

edited

Loading

blcham commented Nov 2, 2024

Migration to Vite #61

Migration to Vite #61

Conversation

palagdan commented Aug 29, 2024 • edited Loading

palagdan commented Aug 29, 2024 • edited Loading

palagdan commented Aug 29, 2024 • edited Loading

To Do After Migration to Vite

blcham left a comment • edited Loading

Choose a reason for hiding this comment

palagdan commented Aug 30, 2024

palagdan commented Aug 31, 2024 • edited Loading

blcham commented Sep 18, 2024 • edited Loading

palagdan commented Sep 19, 2024 • edited Loading

blcham commented Oct 1, 2024 • edited Loading

palagdan commented Oct 29, 2024

blcham left a comment

Choose a reason for hiding this comment

blcham Nov 1, 2024

Choose a reason for hiding this comment

blcham Nov 2, 2024 • edited Loading

Choose a reason for hiding this comment

blcham Nov 2, 2024

Choose a reason for hiding this comment

blcham Nov 2, 2024

Choose a reason for hiding this comment

blcham Nov 2, 2024

Choose a reason for hiding this comment

blcham Nov 2, 2024 • edited Loading

Choose a reason for hiding this comment

blcham commented Nov 2, 2024

palagdan commented Aug 29, 2024 •

edited

Loading

palagdan commented Aug 29, 2024 •

edited

Loading

palagdan commented Aug 29, 2024 •

edited

Loading

blcham left a comment •

edited

Loading

palagdan commented Aug 31, 2024 •

edited

Loading

blcham commented Sep 18, 2024 •

edited

Loading

palagdan commented Sep 19, 2024 •

edited

Loading

blcham commented Oct 1, 2024 •

edited

Loading

blcham Nov 2, 2024 •

edited

Loading

blcham Nov 2, 2024 •

edited

Loading