[DDW-596] webpack 5 upgrade #2772

danielmain · 2021-12-03T13:49:14Z

This PR updates Webpack 4 to 5 and introduces some DX improvements.

Todos

Upgrade Webpack and related dependencies (Dominik)
Get Webpack 5 to build our project (Dominik)
Improve yarn dev mode with react fast-refresh (Dominik)
Fix small bug with maintaining window size on page reloads (Dominik)
How to reproduce: move or resize the app window and reload the page with cmd + R -> the window jumps back into the previous place
Fix broken test environment (Dominik)
Update sass-loader and move from node-sass (deprecated) to dart-sass (Przemysław Włodek)
fix broken storybook (Dominik)
fix failing tests (Dominik)
Make CI builds pass (@michalrus )

Screenshots

React fast-refresh for "instant" CSS changes:

css-fast-refresh.mp4

React fast-refresh for "instant" component changes:

fast-refresh-components.mp4

Any changes in the renderer outside of components will result in a page reload like previously.
Any changes in the main process files will reload the whole app

Testing Checklist

Slack QA thread
Since this changes our build process it potentially affects all areas of our codebase and thorough QA testing is required
Especially: Test if maintaining window size feature still works the same as before (+ bug with reloading page after change is fixed)

Review Checklist

Basics

Code Quality

Important parts of the code are properly commented and documented
Code is properly typed with typescript types
React components are split-up enough to avoid unnecessary re-renderings
Any code that only works in main process is neatly separated from components

Testing

New feature/change is covered by acceptance tests
New feature/change is manually tested and approved by QA team
All existing acceptance tests are still up-to-date
New feature/change is covered by Daedalus Testing scenario
All existing Daedalus Testing scenarios are still up-to-date

After Review

Update Slack QA thread by marking it with a green checkmark

# Conflicts: # .eslintrc # package.json # yarn.lock

By default webpack uses in-memory cache in development and no cache for production builds, which is exactly what we need.

…tput-hk/daedalus into chore/ddw-596-webpack-5-upgrade

source/main/windows/main.ts

renanvalentin

Really amazing job!

renanvalentin · 2022-06-14T14:36:19Z

source/common/ipc/lib/IpcChannel.ts

+    if (existingChannel)
+      throw new Error(`Channel ${channelName} already exists`);


Can we make sure this will not result in any side-effects?

Is this related to the upgrade?

This is fixing an eslint error:

source/main/ipc/hardwareWallets/ledger/deviceDetection/deviceDetection.ts

source/main/preload.ts

source/main/webpack.config.js

renanvalentin · 2022-06-14T14:48:23Z

source/main/windows/main.ts

@@ -77,7 +80,11 @@ export const createMainWindow = (locale: string, windowBounds?: Rectangle) => {
    if (event.sender !== window.webContents) return;
    window.close();
  });
-  window.loadURL(`file://${__dirname}/../renderer/index.html`);
+  if (isDev) {
+    window.loadURL(`http://localhost:8080`);


Why do we have localhost hard coded?

Because that's the webpack dev server - but i agree we could pass this as env var into the main process 👍 but i would do that in a separate PR tbh

renanvalentin · 2022-06-14T17:33:12Z

source/renderer/app/components/wallet/tokens/WalletTokens.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useCallback, useMemo } from 'react';


File moved to source/renderer/app/components/wallet/tokens/wallet-tokens/WalletTokens.tsx

renanvalentin · 2022-06-14T17:33:35Z

source/renderer/app/components/wallet/tokens/WalletTokensList.tsx

@@ -0,0 +1,232 @@
+import React, { useState, useMemo, useCallback } from 'react';


File moved to source/renderer/app/components/wallet/tokens/wallet-tokens-list/WalletTokensList.tsx

source/renderer/app/components/wallet/tokens/WalletTokensSearch.tsx

source/renderer/app/containers/wallet/PaperWalletCreateCertificatePage.tsx

source/renderer/app/stores/AppUpdateStore.ts

source/main/webpack.config.js

source/renderer/app/containers/MenuUpdater/MenuUpdater.ts

source/renderer/app/i18n/locales/en-US.json

…ed `dylib`s

szymonmaslowski · 2022-06-15T14:36:10Z

source/renderer/index.ejs

+  <body>
+    <div id="root"></div>
+  </body>
+</html>


This file should have an .http extension as it does not use any templating feature.

you mean .html right?

Yes.
.http - haha 🤣

… into chore/ddw-596-webpack-5-upgrade

miorsufianiohk

LGTM on all 4 builds: intel Mac, M1 Mac, Linux and Windows. Tested on 21914. Great work everyone 👍 (ps: Great job on fixing the M1 build @michalrus )

michalrus · 2022-06-21T09:55:04Z

Thank you, everyone! 🙇 ✨

DominikGuzei · 2022-06-21T10:48:54Z

A miracle happened 🎉 thanks everyone for your precious contributions!!

renanvalentin and others added 9 commits November 29, 2021 08:33

[DDW-732] - Update storybook

da81491

[DDW-732] Remove depedencies from yarnlock

5cfa61f

[DDW-732] Downgrade storybook to 6.1.18

2a43c7e

[DDW-732] Update netfliy

d80dfcc

[DDW-732] Remove deps

3c858cd

[DDW-596] enable build with webpack 5

7806127

[DDW-732] Upgrade back to 6.3.12

b696f1e

Merge branch 'develop' into chore/ddw-596-webpack-5-upgrade

62c6dd9

# Conflicts: # .eslintrc # package.json # yarn.lock

bump webpack-cli

8986283

danielmain added ⏳release-vNext chore labels Dec 3, 2021

danielmain requested review from DominikGuzei, mchappell and tomislavhoracek December 3, 2021 13:49

danielmain added 2 commits December 3, 2021 14:55

sovled merge issues

cc37528

[DDW-596] Updated starting steps

deae7cb

danielmain added the WIP label Dec 3, 2021

DominikGuzei and others added 13 commits December 6, 2021 14:50

[DDW-596] make yarn dev work like expected

2d47c10

[DDW-596] Deactivate webpack cache

3f6b509

[DDW-596] Use wepback default caching behavior

b8909ad

By default webpack uses in-memory cache in development and no cache for production builds, which is exactly what we need.

[DDW-821] Replace node-sass with sass (dart-sass)

cdcaab6

[DDW-596] Fix yarn lockfile

6f44932

[DDW-596] Improve electron process webpack plugin

18aa558

[DDW-596] Cleanup gulpfile

5bf23ae

Merge branch 'develop' into chore/ddw-596-webpack-5-upgrade

812b802

[DDW-821] Update styles to use new math.div API (dart-sass)

0f46337

[DDW-596] Fix tests

6161e8f

Merge branch 'develop' into chore/ddw-596-webpack-5-upgrade

9de9396

[DDW-596] Replace deprecated @babel/polyfill pkg

dc8f225

Merge branch 'chore/ddw-596-webpack-5-upgrade' of github.com:input-ou…

b620723

…tput-hk/daedalus into chore/ddw-596-webpack-5-upgrade

Merge branch 'develop' into chore/ddw-596-webpack-5-upgrade

1890cd1

michalrus force-pushed the chore/ddw-596-webpack-5-upgrade branch from fdde1bf to 1890cd1 Compare June 6, 2022 13:16

gabriela-ponce approved these changes Jun 13, 2022

View reviewed changes

dmitrii-gaico approved these changes Jun 13, 2022

View reviewed changes

miorsufianiohk self-requested a review June 14, 2022 08:33

[DDW-1110] Turn off Boehm GC in Nix

870ad0f

shawnbusuttil self-requested a review June 14, 2022 12:46

DominikGuzei added 2 commits June 14, 2022 16:49

[DDW-596] remove duplicated token files

b02eee9

[DDW-596] remove duplicated wallet summary asset file

9d0a031

DominikGuzei reviewed Jun 14, 2022

View reviewed changes

source/main/windows/main.ts Show resolved Hide resolved

DominikGuzei reviewed Jun 14, 2022

View reviewed changes

source/main/windows/main.ts Show resolved Hide resolved

[DDW-596] remove unused method instead of commenting it out

d7d4a5d

renanvalentin suggested changes Jun 14, 2022

View reviewed changes

lucas-barros reviewed Jun 14, 2022

View reviewed changes

source/main/webpack.config.js Show resolved Hide resolved

lucas-barros reviewed Jun 14, 2022

View reviewed changes

source/renderer/app/containers/MenuUpdater/MenuUpdater.ts Outdated Show resolved Hide resolved

lucas-barros reviewed Jun 14, 2022

View reviewed changes

source/renderer/app/i18n/locales/en-US.json Show resolved Hide resolved

[DDW-596] Substitute detection.node with the one with already chain…

d34c73f

…ed `dylib`s

szymonmaslowski reviewed Jun 15, 2022

View reviewed changes

DominikGuzei added 2 commits June 16, 2022 13:07

[DDW-596] update i18n messages

e7e6c07

Merge remote-tracking branch 'origin/chore/ddw-596-webpack-5-upgrade'…

e1f25c7

… into chore/ddw-596-webpack-5-upgrade

miorsufianiohk approved these changes Jun 17, 2022

View reviewed changes

DominikGuzei and others added 3 commits June 20, 2022 21:10

Merge branch 'develop' into chore/ddw-596-webpack-5-upgrade

112bd74

[DDW-596] update to latest develop

bb335e2

[DDW-596] Drop minimize-runtime-dependencies superseded by #2997

38e13cc

danielmain merged commit 35f93ba into develop Jun 21, 2022

iohk-bors bot deleted the chore/ddw-596-webpack-5-upgrade branch June 21, 2022 09:54

danielmain added release-4.12.0 and removed ⏳release-vNext labels Aug 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DDW-596] webpack 5 upgrade #2772

[DDW-596] webpack 5 upgrade #2772

danielmain commented Dec 3, 2021 •

edited by DominikGuzei

Loading

renanvalentin left a comment

renanvalentin Jun 14, 2022

shawnbusuttil Jun 15, 2022

DominikGuzei Jun 20, 2022

renanvalentin Jun 14, 2022

DominikGuzei Jun 20, 2022

renanvalentin Jun 14, 2022

renanvalentin Jun 14, 2022

szymonmaslowski Jun 15, 2022

DominikGuzei Jun 20, 2022

szymonmaslowski Jun 21, 2022

miorsufianiohk left a comment

michalrus commented Jun 21, 2022

DominikGuzei commented Jun 21, 2022

		if (existingChannel)
		throw new Error(`Channel ${channelName} already exists`);

		@@ -0,0 +1,158 @@
		import React, { useState, useCallback, useMemo } from 'react';

		@@ -0,0 +1,232 @@
		import React, { useState, useMemo, useCallback } from 'react';

[DDW-596] webpack 5 upgrade #2772

[DDW-596] webpack 5 upgrade #2772

Conversation

danielmain commented Dec 3, 2021 • edited by DominikGuzei Loading

Todos

Screenshots

Testing Checklist

Review Checklist

Basics

Code Quality

Testing

After Review

renanvalentin 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

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

Choose a reason for hiding this comment

miorsufianiohk left a comment

Choose a reason for hiding this comment

michalrus commented Jun 21, 2022

DominikGuzei commented Jun 21, 2022

danielmain commented Dec 3, 2021 •

edited by DominikGuzei

Loading