chore: upgrade vitejs and esbuild to latest major

Interesting breaking change:
evanw/esbuild#1843

apps/ledger-live-desktop/package.json

@@ -186,7 +186,7 @@
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "5.28.0",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "allure-playwright": "^2.0.0-beta.20",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.1.0",
@@ -200,7 +200,6 @@
     "electron-builder": "^23.6.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.2",
-    "esbuild-loader": "^2.19.0",
     "esbuild-utils": "workspace:*",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^7.2.0",
@@ -239,7 +238,7 @@
     "typescript": "^4.8.3",
     "url-loader": "^4.1.1",
     "v8-to-istanbul": "^8.1.0",
-    "vite": "^3.2.3",
+    "vite": "4",
     "vite-plugin-electron": "0.4.8",
     "yargs": "^15.3.1"
   }

apps/ledger-live-desktop/src/renderer/components/Carousel/Slide.jsx

@@ -10,7 +10,7 @@ import { Wrapper, Label, IllustrationWrapper } from "~/renderer/components/Carou
 import { useHistory } from "react-router-dom";
 
 const Layer = styled(animated.div)`
-  background-image: url(${p => p.image});
+  background-image: url('${p => p.image}');
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;

apps/ledger-live-desktop/src/renderer/components/Carousel/banners/Swap/index.jsx

@@ -20,7 +20,7 @@ import loop from "./images/loop.png";
 import bg from "./images/bg.png";
 
 const Layer = styled(animated.div)`
-  background-image: url(${p => p.image});
+  background-image: url('${p => p.image}');
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;

apps/ledger-live-desktop/src/renderer/components/DeviceIllustration.tsx

@@ -19,20 +19,20 @@ const makeAssetSelector = (lightAsset: any, darkAsset: any) => (p: ThemeProps<De
 
 const NanoS = styled.div`
   // TODO: rendering issue in the SVG in the "hole"
-  background: url(${p => makeAssetSelector(nanoS, nanoSDark)(p)}) no-repeat center;
+  background: url('${p => makeAssetSelector(nanoS, nanoSDark)(p)}') no-repeat center;
 `;
 
 const NanoSP = styled.div`
   // TODO: rendering issue in the SVG in the "hole"
-  background: url(${p => makeAssetSelector(nanoS2, nanoS2Dark)(p)}) no-repeat center;
+  background: url('${p => makeAssetSelector(nanoS2, nanoS2Dark)(p)}') no-repeat center;
 `;
 
 const NanoX = styled.div`
-  background: url(${p => makeAssetSelector(nanoX, nanoXDark)(p)}) no-repeat center;
+  background: url('${p => makeAssetSelector(nanoX, nanoXDark)(p)}') no-repeat center;
 `;
 
 const Stax = styled.div`
-  background: url(${p => makeAssetSelector(stax, staxDark)(p)}) no-repeat center;
+  background: url('${p => makeAssetSelector(stax, staxDark)(p)}') no-repeat center;
 `;
 
 type Illustration = {

apps/ledger-live-desktop/src/renderer/components/Illustration.tsx

@@ -17,7 +17,7 @@ const Illustration: ThemedComponent<Props> = styled(Box).attrs((p: Props) => ({
   width: `${p.size}px`,
   height: p.height ? `${p.height}px` : `${p.size}px`,
 }))<Props>`
-  background: url(${(p: Props) => defineStyleFromTheme(p.lightSource, p.darkSource)(p)});
+  background: url('${(p: Props) => defineStyleFromTheme(p.lightSource, p.darkSource)(p)}');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;

apps/ledger-live-desktop/src/renderer/components/LinkWithExternalIcon.jsx

@@ -25,7 +25,7 @@ const Wrapper: ThemedComponent<{}> = styled(Label).attrs(props => ({
   }
 
   &:after {
-    -webkit-mask: url(${externalLink});
+    -webkit-mask: url('${externalLink}');
     -webkit-mask-size: cover;
     width: 12px;
     height: 12px;

apps/ledger-live-desktop/src/renderer/components/Nft/Placeholder.jsx

@@ -14,7 +14,7 @@ type Props = {
 // TODO Figure out if we really need this once we know who creates/processes the media.
 const StyledPlaceholder: ThemedComponent<Props> = styled.div`
   --hue: ${p => (p?.tokenId || "abcdefg").substr(-8) % 360};
-  background-image: url(${Fallback});
+  background-image: url('${Fallback}');
   background-size: contain;
   border-radius: 4px;
   width: 100%;

apps/ledger-live-desktop/src/renderer/components/Onboarding/OnboardingNavHeader.tsx

@@ -22,8 +22,8 @@ const Logo = styled(Box).attrs({
   height: "25px",
   width: "75px",
 })`
-  -webkit-mask-image: url(${ledgerLogo});
-  mask-image: url(${ledgerLogo});
+  -webkit-mask-image: url('${ledgerLogo}');
+  mask-image: url('${ledgerLogo}');
 `;
 
 interface Props {

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/shared.tsx

@@ -24,7 +24,7 @@ export const AnimationContainer = styled(Flex)`
 `;
 
 export const IllustrationContainer = styled(Flex)<{ src: string }>`
-  background: url(${({ src }) => src}) no-repeat center;
+  background: url('${({ src }) => src}') no-repeat center;
   background-size: contain;
 `;
 

apps/ledger-live-desktop/src/renderer/modals/FullNode/steps/StepDisconnect.jsx

@@ -14,7 +14,7 @@ const Illustration = styled.div`
   margin-bottom: 24px;
   width: 236px;
   height: 64px;
-  background: url(${fullnodeIllustration});
+  background: url('${fullnodeIllustration}');
   background-size: contain;
   align-self: center;
 `;

apps/ledger-live-desktop/src/renderer/modals/FullNode/steps/StepLanding.jsx

@@ -15,7 +15,7 @@ const Illustration = styled.div`
   margin-bottom: 24px;
   width: 193px;
   height: 130px;
-  background: url(${fullnodeIllustration});
+  background: url('${fullnodeIllustration}');
   background-size: contain;
   align-self: center;
 `;

apps/ledger-live-desktop/src/renderer/modals/RecoverySeedWarning/index.jsx

@@ -20,7 +20,7 @@ type Props = {
 };
 
 const Illustration = styled.div`
-  background-image: url(${p => p.image});
+  background-image: url('${p => p.image}');
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;

apps/ledger-live-desktop/src/renderer/screens/USBTroubleshooting/solutions/Intro.jsx

@@ -9,7 +9,7 @@ import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
 
 import illustration from "~/renderer/images/USBTroubleshooting/device.png";
 export const Illustration: ThemedComponent<{}> = styled.div`
-  background-image: url(${p => p.image});
+  background-image: url('${p => p.image}');
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;

apps/ledger-live-desktop/src/renderer/screens/USBTroubleshooting/solutions/shared.jsx

@@ -53,7 +53,7 @@ export const Content: ThemedComponent<{}> = styled(Box).attrs({
 `;
 
 export const Illustration: ThemedComponent<{}> = styled.div`
-  background-image: url(${p => p.image});
+  background-image: url('${p => p.image}');
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;

apps/ledger-live-desktop/src/renderer/screens/learn/assets/NoConnection.tsx

@@ -6,7 +6,7 @@ const NoConnectionIllustration = styled(Flex).attrs({
   height: "200px",
   width: "200px",
 })`
-  background-image: url(${noConnection});
+  background-image: url('${noConnection}');
   background-size: contain;
   ${p => p.theme.colors.type === "light" && "filter: invert(100%);"}
 `;

apps/ledger-live-desktop/src/renderer/screens/manager/Disconnected.jsx

@@ -56,7 +56,7 @@ const illustrations = {
 };
 
 const Illustration: ThemedComponent<{ modelId: string }> = styled.div`
-  background: url(${p => illustrations[p.modelId][p.theme.colors.palette.type || "light"]})
+  background: url('${p => illustrations[p.modelId][p.theme.colors.palette.type || "light"]}')
     no-repeat top right;
   width: ${p => illustrations[p.modelId].width}px;
   height: 50px;

apps/ledger-live-desktop/tools/main.js

@@ -17,39 +17,50 @@ const { buildMainEnv, buildRendererEnv, buildViteConfig, lldRoot } = require("./
 const startDev = async argv => {
   const electron = new Electron("./.webpack/main.bundle.js");
 
-  const devConfig = {
-    minify: false,
-    watch: {
-      onRebuild(error, result) {
-        if (error) {
-          console.error("Watch build failed:", error);
+  const OnRebuildPlugin = {
+    name: "onRebuild",
+    setup(build) {
+      build.onEnd(result => {
+        if (result.errors.length > 0) {
+          console.log(`Build ended with ${result.errors.length} errors.`);
+          console.log(result.errors.map(error => error.message).join("\n"));
         } else {
           electron.reload();
         }
-      },
+      });
     },
   };
 
   const mainConfig = {
     ...require("./config/main.esbuild"),
     define: buildMainEnv("development", argv),
-    plugins: [...(require("./config/main.esbuild").plugins || []), NodeExternalsPlugin],
-    ...devConfig,
+    plugins: [
+      ...(require("./config/main.esbuild").plugins || []),
+      NodeExternalsPlugin,
+      OnRebuildPlugin,
+    ],
+    minify: false,
   };
   const preloaderConfig = {
     ...require("./config/preloader.esbuild"),
     define: buildMainEnv("development", argv),
-    ...devConfig,
+    plugins: [...(require("./config/preloader.esbuild").plugins || []), OnRebuildPlugin],
+    minify: false,
   };
   const webviewPreloaderConfig = {
     ...require("./config/webviewPreloader.esbuild"),
     define: buildMainEnv("development", argv),
-    ...devConfig,
+    plugins: [...(require("./config/webviewPreloader.esbuild").plugins || []), OnRebuildPlugin],
+    minify: false,
   };
   const swapConnectWebviewPreloaderConfig = {
     ...require("./config/swapConnectWebviewPreloader.esbuild"),
     define: buildMainEnv("development", argv),
-    ...devConfig,
+    plugins: [
+      ...(require("./config/swapConnectWebviewPreloader.esbuild").plugins || []),
+      OnRebuildPlugin,
+    ],
+    minify: false,
   };
 
   try {
@@ -60,14 +71,16 @@ const startDev = async argv => {
 
   const rendererServer = await createServer(buildViteConfig(argv));
 
-  await Promise.all([
-    esbuild.build(mainConfig),
-    esbuild.build(preloaderConfig),
-    esbuild.build(webviewPreloaderConfig),
-    esbuild.build(swapConnectWebviewPreloaderConfig),
-    rendererServer.listen(),
+  const contexts = await Promise.all([
+    esbuild.context(mainConfig),
+    esbuild.context(preloaderConfig),
+    esbuild.context(webviewPreloaderConfig),
+    esbuild.context(swapConnectWebviewPreloaderConfig),
   ]);
 
+  await rendererServer.listen();
+  await Promise.all(contexts.map(context => context.watch()));
+
   rendererServer.printUrls();
   electron.start();
 };

apps/ledger-live-desktop/tools/utils/index.js

@@ -22,7 +22,7 @@ if (!GIT_REVISION) {
 
 const parsed = prerelease(pkg.version);
 let PRERELEASE = false;
-let CHANNEL;
+let CHANNEL = null;
 if (parsed) {
   PRERELEASE = !!(parsed && parsed.length);
   CHANNEL = parsed[0];
@@ -45,7 +45,7 @@ const buildMainEnv = (mode, argv) => {
     __GIT_REVISION__: JSON.stringify(GIT_REVISION),
     __SENTRY_URL__: JSON.stringify(SENTRY_URL || null),
     // See: https://github.com/node-formidable/formidable/issues/337
-    "global.GENTLY": false,
+    "global.GENTLY": JSON.stringify(false),
     __PRERELEASE__: JSON.stringify(PRERELEASE),
     __CHANNEL__: JSON.stringify(CHANNEL),
   };

libs/ledger-live-common/package.json

@@ -42,16 +42,10 @@
     }
   },
   "exports": {
-    "./lib/*/": "./lib/*/index.js",
     "./lib/*": "./lib/*.js",
     "./lib/*.js": "./lib/*.js",
-    "./lib-es/*/": "./lib-es/*/index.js",
     "./lib-es/*": "./lib-es/*.js",
     "./lib-es/*.js": "./lib-es/*.js",
-    "./*/": {
-      "require": "./lib/*/index.js",
-      "default": "./lib-es/*/index.js"
-    },
     "./*": {
       "require": "./lib/*.js",
       "default": "./lib-es/*.js"

libs/ledgerjs/packages/cryptoassets/package.json

@@ -45,16 +45,10 @@
     }
   },
   "exports": {
-    "./lib/*/": "./lib/*/index.js",
     "./lib/*": "./lib/*.js",
     "./lib/*.js": "./lib/*.js",
-    "./lib-es/*/": "./lib-es/*/index.js",
     "./lib-es/*": "./lib-es/*.js",
     "./lib-es/*.js": "./lib-es/*.js",
-    "./*/": {
-      "require": "./lib/*/index.js",
-      "default": "./lib-es/*/index.js"
-    },
     "./*": {
       "require": "./lib/*.js",
       "default": "./lib-es/*.js"

package.json

@@ -93,8 +93,8 @@
     "actions": "pnpm --filter @actions/*"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.6",
-    "@changesets/cli": "^2.24.3",
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.0",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@commitlint/prompt-cli": "^17.4.2",
@@ -103,7 +103,7 @@
     "pnpm-utils": "workspace:*",
     "rimraf": "^4.1.2",
     "turbo": "^1.7.2",
-    "zx": "^7.0.7"
+    "zx": "^7.1.1"
   },
   "pnpm": {
     "overrides": {