Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor : Update Project Dependencies #171

Open
Abhijay007 opened this issue Feb 28, 2024 · 24 comments · Fixed by #174, #175, #177, #180 or #181
Open

Refactor : Update Project Dependencies #171

Abhijay007 opened this issue Feb 28, 2024 · 24 comments · Fixed by #174, #175, #177, #180 or #181
Labels
good first issue Good for newcomers help wanted Extra attention is needed

Comments

@Abhijay007
Copy link
Contributor

Abhijay007 commented Feb 28, 2024

Description:

This issue is dedicated to updating the dependencies of the StatWrap project. Regularly updating dependencies is crucial for ensuring the security, stability, and performance of our software. Outdated dependencies can expose our project to security vulnerabilities, compatibility issues, and hindered functionality. By systematically updating our dependencies, we maintain the health and sustainability of our project in the long run.

Objective:

The primary objective of this issue is to identify and update outdated dependencies within our project. Contributors will collaborate to update dependencies to their latest versions, addressing any breaking changes and ensuring compatibility with our project. Each updated dependency should be marked with a ✅ to indicate successful completion.

Steps:

  1. Identify outdated dependencies: Contributors will review our project's dependencies and list those that require updating in the list below.
  2. Update dependencies: Contributors will work on updating the identified dependencies to their latest versions, ensuring compatibility and addressing any breaking changes.
  3. Mark completed updates: Once a dependency is successfully updated, contributors will mark it with a ✅ emoji in the list below next to the associated dependency.
  4. Testing: Thorough testing will be conducted to ensure that the project functions correctly with the updated dependencies.
    1. Please ensure after doing an update that you run yarn test and confirm all unit tests still pass. And also visually inspect the program via yarn dev.
  5. Documentation: Any relevant changes resulting from dependency updates will be documented to aid future development and maintenance efforts.

Benefits:

  1. Enhanced security: Updating dependencies helps mitigate security vulnerabilities present in older versions.
  2. Improved performance: Updated dependencies often come with performance enhancements and bug fixes.
  3. Better maintainability: Keeping dependencies up to date simplifies future maintenance tasks and reduces technical debt.
  4. Collaboration: This issue provides an opportunity for multiple contributors to collaborate on improving our project's dependencies simultaneously.

List of Dependencies that need to be updated:

  • @babel/core
  • @babel/plugin-proposal-decorators
  • @babel/plugin-proposal-do-expressions
  • @babel/plugin-proposal-export-default-from
  • @babel/plugin-proposal-export-namespace-from
  • @babel/plugin-proposal-function-bind
  • @babel/plugin-proposal-function-sent
  • @babel/plugin-proposal-optional-chaining
  • @babel/plugin-proposal-pipeline-operator
  • @babel/plugin-proposal-throw-expressions
  • @babel/plugin-transform-react-inline-elements
  • @babel/plugin-transform-react-constant-elements
  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/register
  • @webpack-cli/serve
  • babel-jest
  • babel-loader
  • @babel/plugin-proposal-class-properties
  • @babel/plugin-proposal-json-strings
  • @babel/plugin-proposal-logical-assignment-operators
  • @babel/plugin-proposal-nullish-coalescing-operator
  • @babel/plugin-syntax-import-meta
  • @babel/plugin-proposal-numeric-separator
  • @babel/plugin-syntax-dynamic-import
  • babel-eslint
  • babel-plugin-dev-expression
  • babel-plugin-transform-react-remove-prop-types
  • chalk
  • concurrently
  • cross-env
  • cross-spawn
  • css-loader
  • detect-port
  • electron
  • electron-builder
  • electron-builder-notarize
  • electron-devtools-installer
  • enzyme
  • enzyme-adapter-react-16
  • eslint
  • eslint-config-airbnb
  • eslint-config-erb
  • eslint-config-prettier
  • eslint-formatter-pretty
  • eslint-import-resolver-webpack
  • eslint-plugin-compat
  • eslint-plugin-flowtype
  • eslint-plugin-import
  • eslint-plugin-jest
  • eslint-plugin-jsx-a11y
  • eslint-plugin-prettier
  • eslint-plugin-promise
  • eslint-plugin-react
  • eslint-plugin-testcafe
  • file-loader
  • husky
  • identity-obj-proxy
  • jest
  • lint-staged
  • mini-css-extract-plugin
  • opencollective-postinstall
  • optimize-css-assets-webpack-plugin
  • prettier
  • react-test-renderer
  • rimraf
  • sass-loader
  • sinon
  • style-loader
  • stylelint
  • stylelint-config-prettier
  • stylelint-config-standard
  • terser-webpack-plugin
  • testcafe
  • url-loader
  • webpack
  • webpack-bundle-analyzer
  • webpack-cli
  • webpack-dev-server
  • webpack-merge
  • yarn
  • @electron/rebuild
  • @electron/remote
  • @emotion/react
  • @emotion/styled
  • @fortawesome/fontawesome-free
  • @fortawesome/fontawesome-svg-core
  • @fortawesome/free-solid-svg-icons
  • @fortawesome/react-fontawesome
  • @hot-loader/react-dom
  • @mui/icons-material
  • @mui/lab
  • @mui/material
  • @mui/styles
  • core-js
  • d3
  • devtron
  • easymde
  • echarts
  • echarts-for-react
  • electron-debug
  • electron-log
  • electron-updater
  • github-markdown-css
  • history
  • isomorphic-git
  • jest-extended
  • jest-os-detection
  • lodash
  • pluralize
  • postcss
  • postcss-less
  • prop-types
  • proper-lockfile
  • react
  • react-checkbox-tree
  • react-d3-graph
  • react-d3-tree
  • react-data-table-component
  • react-dom
  • react-draggable
  • react-hot-loader
  • react-icons
  • react-markdown
  • react-router
  • react-router-dom
  • react-simplemde-editor
  • react-tagsinput
  • remark-gfm
  • resizable-panels-react
  • set-value
  • source-map-support
  • styled-components
  • stylelint-config-standard-scss
  • url-parse
  • username
  • uuid
  • winston
  • y18n

Please mark each dependency with a check mark ✅ once it's successfully updated.

Note for contributors: This is an open issue, and needs no assignment. Contributors can just comment below on which dependency they are working on and create a PR for the same.

@lrasmus lrasmus added good first issue Good for newcomers help wanted Extra attention is needed labels Feb 28, 2024
@lrasmus
Copy link
Contributor

lrasmus commented Feb 28, 2024

Thank you @Abhijay007 for spearheading this! I am sorry where we don't have automated tests in place to confirm all operations (specifically with the UI). I updated the instructions with details on testing.

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Feb 29, 2024

I am working on updating the following dependencies, and will open PR for this soon :

  • axios
  • react-draggable
  • react-tagsinput
  • yarn
  • postcss
  • enzyme-adapter-react-16

@Gmin2
Copy link

Gmin2 commented Mar 1, 2024

Hey @lrasmus we can add a bot to update the dependencies automatically

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 1, 2024

Hey @lrasmus we can add a bot to update the dependencies automatically

Hi @utnim2, thank you for the suggestion. We already have an automated GitHub bot set up for this. However, these bots are not as effective. They only work to update dependencies to a minor higher version that is compatible, but they do not address the "breaking changes". That's why we opened this issue. There are some major version upgrades in the dependencies that will introduce breaking changes, and we need to address them by manually updating those dependencies.

@lrasmus lrasmus reopened this Mar 1, 2024
@lrasmus
Copy link
Contributor

lrasmus commented Mar 1, 2024

@utnim2 - thank you for the suggestion! Like @Abhijay007 pointed out, the automated suggestions can't guarantee the code will continue to work. It's extra work to have to go through and do these by hand. Once we get through this push, we may be able to go back to an automated solution though!

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 2, 2024

I am working on updating the following dependencies, and will open PR for this soon :

  • @babel/core
  • eslint
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react
  • @mui/icons-material
  • @mui/material
  • @mui/styles
  • echarts
  • webpack
  • webpack-bundle-analyzer
  • webpack-merge
  • @electron/rebuild
  • @electron/remote
  • @emotion/react

@Abhijay007
Copy link
Contributor Author

@lrasmus please reopen this issue as there are still pending dependencies to update, I think it might got auto closed

@lrasmus lrasmus reopened this Mar 4, 2024
@lrasmus
Copy link
Contributor

lrasmus commented Mar 4, 2024

It did get auto-closed, thanks for noticing!

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 4, 2024

I am working on updating the following dependencies, and will open PR for this soon :

  • @babel/plugin-proposal-class-properties
  • @babel/plugin-proposal-decorators
  • @babel/plugin-proposal-do-expressions
  • @babel/plugin-proposal-export-default-from
  • @babel/plugin-proposal-export-namespace-from
  • @babel/plugin-proposal-function-bind
  • @babel/plugin-proposal-function-sent
  • @babel/plugin-proposal-json-strings
  • @babel/plugin-proposal-logical-assignment-operators
  • @babel/plugin-proposal-nullish-coalescing-operator
  • @babel/plugin-proposal-numeric-separator
  • @babel/plugin-proposal-optional-chaining
  • @babel/plugin-proposal-pipeline-operator
  • @babel/plugin-proposal-throw-expressions
  • @babel/plugin-syntax-dynamic-import
  • @babel/plugin-syntax-import-meta
  • @babel/plugin-transform-react-constant-elements
  • @babel/plugin-transform-react-inline-elements
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/register
  • eslint-plugin-react
  • core-js
  • d3
  • easymde
  • isomorphic-git
  • winston

@Abhijay007
Copy link
Contributor Author

@lrasmus please reopen this issue as it again got auto closed

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 6, 2024

I am working on updating the following dependencies, and will open PR for this soon :

  • @webpack-cli/serve
  • babel-jest
  • babel-loader
  • concurrently
  • cross-env
  • eslint-config-prettier
  • eslint-formatter-pretty
  • eslint-plugin-compat
  • eslint-plugin-flowtype
  • eslint-plugin-jest
  • eslint-plugin-prettier
  • eslint-plugin-promise
  • file-loader
  • jest
  • mini-css-extract-plugin
  • prettier
  • testcafe-browser-provider-electron
  • url-loader
  • @fortawesome/fontawesome-free
  • @fortawesome/fontawesome-svg-core
  • @fortawesome/free-solid-svg-icons
  • @fortawesome/react-fontawesome
  • @mui/icons-material
  • @mui/material
  • @mui/styles
  • ansi-regex
  • electron-log
  • electron-updater
  • history
  • y18n

@lrasmus lrasmus reopened this Mar 6, 2024
@AdiAkhileshSingh15
Copy link
Contributor

@lrasmus I'd like to help you guys with this issue to make it happen earlier so we could move on to setting up the dependencies for automated update. Give me clearance so I can list what all dependencies I'll update with my PR.

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 8, 2024

@lrasmus I'd like to help you guys with this issue to make it happen earlier so we could move on to setting up the dependencies for automated update. Give me clearance so I can list what all dependencies I'll update with my PR.

Hi @AdiAkhileshSingh15, thanks for showing your interest in the same. I can help you with it. Here is a short guide you can follow in order to update leftover dependencies.

The goal of the issue is to update the existing dependencies to the latest LTS (Long Term Support) version so that the project will be easier to maintain and follow the latest standards. To do this, you can follow these steps:

The project utilizes yarn as its primary package manager. You can run the command yarn upgrade-interactive --latest to see which dependencies need to be updated.

Some of them are : as per the latest run of the command (note: I updated a few dependencies and will open a PR soon, so the current leftovers are):

devDependencies:

  • @babel/preset-env
  • chalk
  • css-loader
  • electron
  • electron-builder
  • fbjs-scripts
  • husky
  • lint-staged
  • react-test-renderer
  • rimraf
  • sass-loader
  • sinon
  • style-loader
  • stylelint
  • stylelint-config-prettier
  • stylelint-config-standard
  • terser-webpack-plugin
  • testcafe-react-selectors
  • webpack-cli
  • webpack-dev-server

dependencies:

  • @hot-loader/react-dom
  • @mui/lab
  • github-markdown-css
  • jest-extended
  • react
  • react-d3-tree
  • react-data-table-component
  • react-dom
  • react-icons
  • react-markdown
  • react-redux
  • react-router
  • react-router-dom
  • react-select

Once you've updated the dependencies, run different checks using commands like:

  • yarn test - all tests should pass
  • yarn dev - no UI fails should be detected
  • yarn build - no build fails should be detected
  • yarn dev - to check console errors

Once all of this is done, make a PR with the updated dependencies, Also, please list out on what dependencies you are working, as other contributors might be working on some. A list can help us to avoid ones that are addressed by others.

if you have any other doubts let me know, thanks! looking forward to your contributions :)

@AdiAkhileshSingh15
Copy link
Contributor

Thank you @Abhijay007 for you guidance.
I am currently working on updating the following few dependencies with my upcoming PR:

devDependencies:

  • @babel/preset-env
  • chalk
  • css-loader
  • electron
  • electron-builder
  • fbjs-scripts
  • husky
  • lint-staged
  • react-test-renderer
  • rimraf

dependencies:

  • @mui/lab
  • github-markdown-css

@AdiAkhileshSingh15
Copy link
Contributor

@Abhijay007 , I came across some errors while trying to update the dependencies that involve webpack, namely, webpack-cli , webpack-dev-server, stating SyntaxError: Cannot use import statement outside a module in configs folder webpack files for the import statements as follows.
Screenshot from 2024-03-09 00-21-31
On reading about this error message, it said that we should specify type:module in the nearest parent package.json file to make their type mjs , though that didn't help. I'd appreciate if you can help with that, or you came across something similar earlier in this code. Or if you'd wanna take up the update process for webpack deps.

@Abhijay007
Copy link
Contributor Author

@Abhijay007 , I came across some errors while trying to update the dependencies that involve webpack, namely, webpack-cli , webpack-dev-server, stating SyntaxError: Cannot use import statement outside a module in configs folder webpack files for the import statements as follows. Screenshot from 2024-03-09 00-21-31 On reading about this error message, it said that we should specify type:module in the nearest parent package.json file to make their type mjs , though that didn't help. I'd appreciate if you can help with that, or you came across something similar earlier in this code. Or if you'd wanna take up the update process for webpack deps.

sure @AdiAkhileshSingh15 I will look into this, in the meantime, you can work on some other dependencies, I will try to resolve them and will share the update with you.

@AdiAkhileshSingh15
Copy link
Contributor

In my most recent commit to the PR #181, I've updated the following dependencies:

devDependencies:

  • sass-loader
  • sinon
  • style-loader
  • stylelint
  • stylelint-config-prettier
  • stylelint-config-standard
  • testcafe-react-selectors

dependencies:

  • jest-extended

@lrasmus lrasmus reopened this Mar 11, 2024
@lrasmus lrasmus reopened this Mar 11, 2024
@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 12, 2024

I am working on updating the following dependencies, and will open PR for this soon :

  • react-d3-tree
  • react-icons
  • react-select
  • react-simplemde-editor
  • redux
  • redux-thunk
  • uuid
  • terser-webpack-plugin
  • webpack-cli
  • webpack-dev-server
  • style-loader
  • stylelint-config-standard-scss

@AdiAkhileshSingh15
Copy link
Contributor

Hi @Abhijay007,
Quick heads up: If you skip using 'closes' or 'fixes' in your PR when linking it here, we won't have this issue auto-closing every time, i.m.o.
By doing so, @lrasmus won't have to reopen it every time a PR is merged, considering that it's taking multiple PRs to fully address this issue.

@Abhijay007
Copy link
Contributor Author

Hi @Abhijay007, Quick heads up: If you skip using 'closes' or 'fixes' in your PR when linking it here, we won't have this issue auto-closing every time, i.m.o. By doing so, @lrasmus won't have to reopen it every time a PR is merged, considering that it's taking multiple PRs to fully address this issue.

Thanks for the info @AdiAkhileshSingh15 , I will avoid that in my future PRs

@Abhijay007
Copy link
Contributor Author

Abhijay007 commented Mar 20, 2024

I am working on updating the following dependencies, and will open PR for this soon :

  • @hot-loader/react-dom
  • react
  • react-data-table-component
  • react-dom
  • react-markdown
  • react-router
  • react-router-dom
  • styled-components
  • username
  • chalk
  • remark-gfm

PS: this might take a little longer than my previous/other PRs as these dependencies have some major breaking changes

@Abhijay007
Copy link
Contributor Author

Note : Created a Different issue to address react upgrade : #203

@sss5711
Copy link

sss5711 commented Nov 29, 2024

Hey,i am new to gsoc so can anyone can help me how to contribute in this project.

@lrasmus
Copy link
Contributor

lrasmus commented Dec 2, 2024

Hi @sss5711 - thank you for your interest. We have some steps for getting started at: https://github.com/StatTag/StatWrap?tab=readme-ov-file#contributing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment