[PACKAGE] : Updates ⤴️ project dependencies 📦 #189

AdiAkhileshSingh15 · 2024-03-16T08:11:23Z

Changes Summary

This PR aims to update he existing dependencies to the latest LTS (Long Term Support) version.

The following dependencies have been updated:

devDependencies:

@babel/core: Updated to version ^7.24.3
@babel/plugin-proposal-decorators: Updated to version ^7.24.1
@babel/plugin-proposal-do-expressions: Updated to version ^7.24.1
@babel/plugin-proposal-export-default-from: Updated to version ^7.24.1
@babel/plugin-proposal-export-function-bind: Updated to version ^7.24.1
@babel/plugin-proposal-export-function-sent: Updated to version ^7.24.1
@babel/plugin-proposal-pipeline-operator: Updated to version ^7.24.1
@babel/plugin-proposal-throw-expressions: Updated to version ^7.24.1
@babel/plugin-transform-optional-chaining: Updated to version ^7.24.1
@babel/plugin-transform-private-property-in-object: Updated to version ^7.24.1
@babel/plugin-transform-react-constant-elements: Updated to version ^7.24.1
@babel/plugin-transform-react-inline-elements: Updated to version ^7.24.1
@babel/preset-env: Updated to version ^7.24.3
@babel/preset-flow: Updated to version ^7.24.1
@babel/preset-react: Updated to version ^7.24.1
electron: Updated to version 29.1.5
eslint-plugin-react: Updated to version ^7.34.1
stylelint: Updated to version ^16.3.0
webpack: Updated to version ^5.91.0
webpack-dev-server: Updated to version ^5.0.4

dependencies:

@mui/icons-material: Updated to version ^5.15.14
@mui/lab: Updated to version ^5.0.0-alpha.169
@mui/material: Updated to version ^5.15.14
@mui/styles: Updated to version ^5.15.14
axios: Updated to version ^1.6.8
core-js: Updated to version ^3.36.1
d3: Updated to version 7.9.0
postcss: Updated to version 8.4.38
styled-components: Updated to version ^5.3.11
winston: Updated to version ^3.13.0

All the dependencies are updated to their latest LTS version, except styled-components, and their were no breaking-changes detected in any of them, still I'd recommend everyone to reinstall the node_modules while locally performing the updates.

Related Issue

In-progress: #171

Testing Checklist ✅ :

After updating dependencies, ran different checks using these commands locally to ensure functionality remains intact.
Use commands :

yarn test - all tests passed
yarn dev - no UI fails detected
yarn build - no build fails detected
yarn dev - no new consol errors detected for any dependencies

Reviewer(s)

@lrasmus

Abhijay007 · 2024-03-16T08:28:53Z

package.json

+    "styled-components": "^6.1.8",
    "stylelint-config-standard-scss": "^13.0.0",


styled-components dropping console warnings

Abhijay007

Hi @AdiAkhileshSingh15,

All other dependencies appear to be in good order, but styled-components is causing some errors and warnings in the development console:

styled-components: It appears that an unknown prop "level" is being sent to the DOM, which may trigger a React console error. If you wish to automatically filter out unknown props, you can opt into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (by connecting an API like `@emotion/is-prop-valid`) or consider using transient props (prefix with `$` for automatic filtering).

Additionally, there are warnings such as:

Warning: React does not recognize the `marginRight` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `marginright` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by styled.div)
    in styled.div (at AssetNode.js:102)
    in div (created by styled.div)
    in styled.div (at AssetNode.js:81)
    in AssetNode (at AssetTree.js:89)
    in div (at AssetTree.js:103)
    in AssetTree (at Assets.js:375)
    in div (at Assets.js:338)
    in div (at Assets.js:400)
    in assetsComponent (at Project.js:624)
    in div (created by MuiTabPanelRoot)
    in MuiTabPanelRoot (created by ForwardRef(TabPanel))
    in ForwardRef(TabPanel) (at Project.js:715)
    in TabContext (at Project.js:683)
    in div (at Project.js:734)
    in Project (created by WithStyles(Project))
    in WithStyles(Project) (at ProjectPage.js:315)
    in div
    in div
    in t (at ProjectPage.js:293)
    in div (at ProjectPage.js:292)
    in ProjectPage (created by Context.Consumer)
    in Route (at Routes.js:18)
    in Switch (at Routes.js:14)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:174)
    in App (at Routes.js:13)
    in Router (created by HashRouter)
    in HashRouter (at Routes.js:12)
    in _default (at Root.js:5)
    in Root (created by HotExportedRoot)
    in AppContainer (created by HotExportedRoot)
    in HotExportedRoot
    in AppContainer (at app/index.js:10)

These issues are occurring in various components of the application.

Could you please look into this? Also, please update the list of dependencies you are updating in the associated Issue by adding a comment. As per the issue instructions, it's better to do this whenever you are working on dependencies, so if someone else is working, they will avoid updating those.

AdiAkhileshSingh15 · 2024-03-16T11:00:27Z

Looking into it.

AdiAkhileshSingh15 · 2024-03-16T12:35:17Z

v5/v6 docs for styled-components call for using transient props to avoid these console errors.

Abhijay007

It resolves it for AssetNode, but there are still some errors in PeopleTable, ProjectNotes, and ProjectLog.

Steps to reproduce:

Open Statwrap using yarn dev.
Navigate to the notes or project log under a selected project.
Check the dev console.

Once you resolve the errors, try to reload the application and redo the steps in order to check for leftover errors.

AdiAkhileshSingh15 · 2024-03-18T05:17:21Z

Yeah, I of course know these things, I wasn't finished with the changes. Was quite busy with something else for past few days, I'll continue with it today.

Abhijay007 · 2024-03-18T05:39:56Z

Yeah, I of course know these things, I wasn't finished with the changes. Was quite busy with something else for past few days, I'll continue with it today.

Okay @AdiAkhileshSingh15, I thought you might not be aware of this as you pushed some new commits. Also, I want to mention one more thing: could you please try to resolve these dependencies too - @mui/lab, username, and chalk? Additionally, there's a minor update available for postcss, so please update that too in this PR. If we can update these dependencies, then we only need to take care of the React update, which has very major breaking changes. So, could you please look into the listed dependencies in this PR only? Also, please mark this PR as a draft for now, as it is a WIP.

AdiAkhileshSingh15 · 2024-03-18T05:53:54Z

Sure, I'll look into these as well, that'd be helpful for sure to be left with only major React updates.

Abhijay007 · 2024-03-18T05:58:12Z

Sure, I'll look into these as well, that'd be helpful for sure to be left with only major React updates.

thanks 👍

AdiAkhileshSingh15 · 2024-03-18T07:57:03Z

Updating this styled-components will actually require us to also update the react-data-table-component as well, as we are using styled components within DataTable as subHeader, and datatable package is having many old formatted props, which are not supported in v6 styled-components.

Though, it helps to remove those specific console errors as we update the react-data-table-components, it brings up a new error "TypeError: t is not a function", which am unable to find a solution to, yet. Suspecting it's v17 react that's causing this error, though not sure.

Will update here, if I get a breakthrough, otherwise we might have to work with v6 of react-data-table-component & v5 of styled-components as of now.

AdiAkhileshSingh15 · 2024-03-18T11:14:45Z

Update:
The styled-components package can be updated to a max of v5 i.e,^5.3.11 as of now, v6 requires transient props, which is doable, but not for the Wrapping components which have not implemented transient props for slightly older versions, namely, react-data-table-component for v6.

For chalk, the update to v5 requires the use of dynamic imports, which I tried implementing, but, it still failed the tests and threw some "can't import outside module" errors.
Check out this response, for better understanding of the error, though it doesn't work for our project.
Intially, it seems to pass all the tests, and builds successfully, but actually trying to use chalk in dev mode brings out the underlying error.

Abhijay007 · 2024-03-18T11:27:54Z

Update: The styled-components package can be updated to a max of v5 i.e,^5.3.11 as of now, v6 requires transient props, which is doable, but not for the Wrapping components which have not implemented transient props for slightly older versions, namely, react-data-table-component for v6.

For chalk, the update to v5 requires the use of dynamic imports, which I tried implementing, but, it still failed the tests and threw some "can't import outside module" errors. Check out this response, for better understanding of the error, though it doesn't work for our project. Intially, it seems to pass all the tests, and builds successfully, but actually trying to use chalk in dev mode brings out the underlying error.

Thanks for the update @AdiAkhileshSingh15, also have you looked into @mui/lab and username as per my comment above? I think mui/lab can be updated easily but not sure about username

AdiAkhileshSingh15 · 2024-03-18T11:30:28Z

Update: The styled-components package can be updated to a max of v5 i.e,^5.3.11 as of now, v6 requires transient props, which is doable, but not for the Wrapping components which have not implemented transient props for slightly older versions, namely, react-data-table-component for v6.
For chalk, the update to v5 requires the use of dynamic imports, which I tried implementing, but, it still failed the tests and threw some "can't import outside module" errors. Check out this response, for better understanding of the error, though it doesn't work for our project. Intially, it seems to pass all the tests, and builds successfully, but actually trying to use chalk in dev mode brings out the underlying error.

Thanks for the update @AdiAkhileshSingh15, also have you looked into @mui/lab and username as per my comment above? I think mui/lab can be updated easily but not sure about username

I tried that back ago, it had some backward-incompatible changes.

Abhijay007 · 2024-03-18T11:31:01Z

I tried that back ago, it had some backward-incompatible changes.

for @mui/lab as well ?

AdiAkhileshSingh15 · 2024-03-18T11:36:51Z

I tried that back ago, it had some backward-incompatible changes.

for @mui/lab as well ?

Yes, it showed some "ENOENT: no such file or directory" errors, last time checked.

Still, let me retry and resolve it.

AdiAkhileshSingh15 · 2024-03-18T11:55:47Z

Resolved 🕺🏻

AdiAkhileshSingh15 · 2024-03-18T12:40:44Z

These are the latest dependencies with non-breaking changes, for our project.

@lrasmus please review the changes.

AdiAkhileshSingh15 · 2024-03-18T12:40:56Z

Updated the changes summary with latest modifications 👍🏻 .

Abhijay007 · 2024-03-18T13:08:06Z

Updated the changes summary with latest modifications 👍🏻 .

will review the PR soon 👍

Abhijay007

Hi @AdiAkhileshSingh15 I've reviewed all the changes, and they look good to me overall. However, it seems that remark-gfm is dropping some errors in its functionality. :

StatWrap.2024-03-18.22-13-32.mp4

could you please look into this ? Also I think we can revert the changes for app/components/AssetTree/AssetNode/AssetNode.js file, as these changes might no longer be needed since we are not updating to version 6 of styled-components

Abhijay007 · 2024-03-18T16:46:54Z

package.json

+    "remark-gfm": "^4.0.0",
    "resizable-panels-react": "^2.0.8",


Issue around remark-gfm

Will look into it soon

This is not conclusive, but in early testing I got the following error in one of my test projects. Other projects work just fine. I need to see how to reliably reproduce the error for you though - just to say more info will be coming from me once I can dig in more:

0b1ccbc1-c607-4bec-8e70-c7bdfb557ecb.mp4

Video demo for remark-gfm package older version, it used to function similarly. The strikethrough in this case is only enabled if there are equal no. of '~' on both sides

But the errors are not related solely to strikethrough functionality. I tested it with the features listed here and encountered some errors (https://www.npmjs.com/package/remark-gfm), which were not present in version 1 but appeared in version 4, the above video I shared not about a single functionality but about the console errors it drops and for me it also crashing the application sometimes

@Abhijay007 Got to know that the latest remark-gfm v4 only works with latest react-markdown , i.e., v9, so, I'm downgrading remark-gfm to v1 only, till we don't upgrade react-markdown, along with other react packages, which have some breaking changes.

Thanks @AdiAkhileshSingh15 for looking into this. Two more things I want to mention:

Please run yarn upgrade-interactive --latest for the latest results and upgrade the dependencies which have minor changes. I noticed you did this for most of them, but I believe there are a few more left.

Secondly, please squash your commits.

v2 and v3 are bringing in some issues with missing modules, which we face while upgrading react-markdown as well, 'unified' module not found.
So, I believe the gfm upgrade can be performed parallely with react-markdown, we have to keep this in mind.

so it is better to downgrade remark-gfm to version one for now

Abhijay007 · 2024-03-18T16:47:47Z

app/components/AssetTree/AssetNode/AssetNode.js

  flex-direction: row;
  align-items: center;
  padding: 5px 8px;
-  padding-left: ${props => getPaddingLeft(props.level)}px;
+  padding-left: ${props => getPaddingLeft(props.$level)}px;
  ${props => (props.selected ? 'background-color: #eee;' : null)}
 `;

 const NodeIcon = styled.div`
  font-size: 12px;
-  margin-right: ${props => (props.marginRight ? props.marginRight : 5)}px;
+  margin-right: ${props => (props.$marginright ? props.$marginright : 5)}px;
 `;

 const StyledInput = styled.input`


changes in file app/components/AssetTree/AssetNode/AssetNode.js can be reverted as we are not using style-components version 6

No, actually this transient props thing came with v5 only. That is why I kept these changes.

Okay, thank you for the information. We can keep it then, I have yet to test it with version 5, but I believe it might not be causing any errors as you might have already tested these changes.

Abhijay007 · 2024-03-19T14:35:10Z

Hi @AdiAkhileshSingh15, if you run the latest yarn upgrade-interactive --latest, you will find that some very minor updates related to babel, @mui, and some other dependencies like core-js are available. Could you please update those dependencies too in this PR only, as these have very minor version updates and can be handled easily?

AdiAkhileshSingh15 · 2024-03-19T16:13:16Z

Okay, I'll do it.

AdiAkhileshSingh15 · 2024-03-20T07:47:27Z

I've documented the changes in the summary.
I've also tested all the changes locally, no errors and functionality changes were detected for these packages.

Abhijay007 · 2024-03-20T07:49:17Z

@lrasmus I've documented the changes in the summary. I've also tested all the changes locally, no errors and functionality changes were detected for these packages. Resolved all errors regarding the updates, you can move forward with review.

@AdiAkhileshSingh15 it seems like you missed my comments here :#189 (comment) , please consider these changes if you find them relevant

AdiAkhileshSingh15 · 2024-03-20T07:58:36Z

@lrasmus
I've updated the changes summary.
Resolved all errors regarding the updates, you can move forward with review.

Abhijay007 · 2024-03-23T15:57:00Z

Hi @AdiAkhileshSingh15, if you run the latest yarn upgrade-interactive --latest, you will find that some very minor updates related to babel, @mui, webpack , electron , winston, stylelint and related to some other dependencies are available. Could you please update those dependencies as well in this PR?

lrasmus · 2024-03-25T15:55:19Z

@AdiAkhileshSingh15 - this is looking good for me! Could you do the minor bumps per the last comment from @Abhijay007 , and then I can merge? Thanks!

lrasmus

Overall looking good - previous issue I ran into is gone.

lrasmus · 2024-03-19T10:25:01Z

package.json

+    "remark-gfm": "^4.0.0",
    "resizable-panels-react": "^2.0.8",


This is not conclusive, but in early testing I got the following error in one of my test projects. Other projects work just fine. I need to see how to reliably reproduce the error for you though - just to say more info will be coming from me once I can dig in more:

AdiAkhileshSingh15 · 2024-03-25T16:30:49Z

@lrasmus I have updated the PR with the most recent commit. No console/test/build or dev errors were detected.
You can review.

AdiAkhileshSingh15 · 2024-03-25T16:36:00Z

I've updated the changes summary.

Abhijay007

LGTM 👍

Abhijay007 · 2024-03-26T05:33:16Z

merge conflicts resolved, thanks @AdiAkhileshSingh15, could you please squash these commits too?

AdiAkhileshSingh15 · 2024-03-26T05:37:31Z

Yeah, was onto it 😂

commit 56ce09f Author: AdiAkhileshSingh15 <[email protected]> Date: Mon Mar 25 21:59:25 2024 +0530 updates dependencies related to babel, electron, stylelint, webpack, winston, and postcss commit 9dfda88 Author: AdiAkhileshSingh15 <[email protected]> Date: Wed Mar 20 13:24:51 2024 +0530 updates webpack-dev-server commit d7ff817 Author: AdiAkhileshSingh15 <[email protected]> Date: Wed Mar 20 13:16:53 2024 +0530 downgrades remark-gfm to bring in line with react-markdown commit 4b4efa7 Author: AdiAkhileshSingh15 <[email protected]> Date: Wed Mar 20 00:33:53 2024 +0530 updates dependencies related to @babel, @mui, core-js & postcss commit aca9c54 Author: AdiAkhileshSingh15 <[email protected]> Date: Mon Mar 18 17:25:27 2024 +0530 updates @mui/lab with an import fix commit bbe8f11 Author: AdiAkhileshSingh15 <[email protected]> Date: Mon Mar 18 16:51:58 2024 +0530 few nonbreaking dependency version modifications commit 7d23b5a Author: AdiAkhileshSingh15 <[email protected]> Date: Sat Mar 16 17:42:29 2024 +0530 fixes console warnings with transient lowercase props commit 1f9f37c Author: AdiAkhileshSingh15 <[email protected]> Date: Sat Mar 16 12:51:16 2024 +0530 updates few non-breaking dependencies commit dc9a491 Author: AdiAkhileshSingh15 <[email protected]> Date: Sat Mar 16 01:13:22 2024 +0530 updates few dependencies d3, remark-gfm, styled-components

Abhijay007

Ready for merge, thanks for this PR 🚀

AdiAkhileshSingh15 · 2024-03-26T05:46:10Z

Anytime 😉

lrasmus · 2024-03-26T14:47:09Z

Thank you both!

Abhijay007 reviewed Mar 16, 2024

View reviewed changes

Abhijay007 suggested changes Mar 16, 2024

View reviewed changes

Abhijay007 suggested changes Mar 18, 2024

View reviewed changes

AdiAkhileshSingh15 force-pushed the depupdate branch from e6f74ac to 94c56c2 Compare March 19, 2024 09:32

AdiAkhileshSingh15 force-pushed the depupdate branch from fabf6fc to 8a5617a Compare March 19, 2024 19:05

lrasmus approved these changes Mar 25, 2024

View reviewed changes

Abhijay007 approved these changes Mar 25, 2024

View reviewed changes

AdiAkhileshSingh15 force-pushed the depupdate branch from 98e9b5a to 56ce09f Compare March 26, 2024 05:30

AdiAkhileshSingh15 force-pushed the depupdate branch from 56ce09f to 5b1144e Compare March 26, 2024 05:38

Abhijay007 approved these changes Mar 26, 2024

View reviewed changes

lrasmus merged commit a81cc40 into StatTag:master Mar 26, 2024

		"styled-components": "^6.1.8",
		"stylelint-config-standard-scss": "^13.0.0",

[PACKAGE] : Updates ⤴️ project dependencies 📦 #189

[PACKAGE] : Updates ⤴️ project dependencies 📦 #189

Conversation

AdiAkhileshSingh15 commented Mar 16, 2024 • edited Loading

Changes Summary

Related Issue

Testing Checklist ✅ :

Reviewer(s)

Choose a reason for hiding this comment

Abhijay007 left a comment

Choose a reason for hiding this comment

AdiAkhileshSingh15 commented Mar 16, 2024

AdiAkhileshSingh15 commented Mar 16, 2024

Abhijay007 left a comment • edited Loading

Choose a reason for hiding this comment

AdiAkhileshSingh15 commented Mar 18, 2024 • edited Loading

Abhijay007 commented Mar 18, 2024

AdiAkhileshSingh15 commented Mar 18, 2024

Abhijay007 commented Mar 18, 2024

AdiAkhileshSingh15 commented Mar 18, 2024

AdiAkhileshSingh15 commented Mar 18, 2024

Abhijay007 commented Mar 18, 2024

AdiAkhileshSingh15 commented Mar 18, 2024

Abhijay007 commented Mar 18, 2024 • edited Loading

AdiAkhileshSingh15 commented Mar 18, 2024

AdiAkhileshSingh15 commented Mar 18, 2024 • edited Loading

AdiAkhileshSingh15 commented Mar 18, 2024

AdiAkhileshSingh15 commented Mar 18, 2024

Abhijay007 commented Mar 18, 2024

Abhijay007 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Abhijay007 Mar 20, 2024 • edited Loading

Choose a reason for hiding this comment

AdiAkhileshSingh15 Mar 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdiAkhileshSingh15 Mar 20, 2024 • edited Loading

Choose a reason for hiding this comment

Abhijay007 Mar 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdiAkhileshSingh15 Mar 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Abhijay007 commented Mar 19, 2024 • edited Loading

AdiAkhileshSingh15 commented Mar 19, 2024

AdiAkhileshSingh15 commented Mar 20, 2024 • edited Loading

Abhijay007 commented Mar 20, 2024

AdiAkhileshSingh15 commented Mar 20, 2024

Abhijay007 commented Mar 23, 2024 • edited Loading

lrasmus commented Mar 25, 2024

lrasmus left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdiAkhileshSingh15 commented Mar 25, 2024

AdiAkhileshSingh15 commented Mar 25, 2024

Abhijay007 left a comment

Choose a reason for hiding this comment

Abhijay007 commented Mar 26, 2024

AdiAkhileshSingh15 commented Mar 26, 2024

Abhijay007 left a comment

Choose a reason for hiding this comment

AdiAkhileshSingh15 commented Mar 26, 2024

lrasmus commented Mar 26, 2024

AdiAkhileshSingh15 commented Mar 16, 2024 •

edited

Loading

Abhijay007 left a comment •

edited

Loading

AdiAkhileshSingh15 commented Mar 18, 2024 •

edited

Loading

Abhijay007 commented Mar 18, 2024 •

edited

Loading

AdiAkhileshSingh15 commented Mar 18, 2024 •

edited

Loading

Abhijay007 Mar 20, 2024 •

edited

Loading

AdiAkhileshSingh15 Mar 20, 2024 •

edited

Loading

AdiAkhileshSingh15 Mar 20, 2024 •

edited

Loading

Abhijay007 Mar 20, 2024 •

edited

Loading

AdiAkhileshSingh15 Mar 18, 2024 •

edited

Loading

Abhijay007 commented Mar 19, 2024 •

edited

Loading

AdiAkhileshSingh15 commented Mar 20, 2024 •

edited

Loading

Abhijay007 commented Mar 23, 2024 •

edited

Loading