Vite as suite devserver (#17152)

* fix(suite): remove immer with Object.freeze from guideReducer as it contains 'react' structure

* chore(suite): add ignore comments to dynamic imports for vite

* fix(suite): make the calling of the GraphWorker as a function call, not constructor

* fix(connect): make the imports of the dynamic connect methods "static" without template variables in the paths

* fix(suite): edit the dynamic imports to make the more reliable

* chore(suite): add info about yarn suite:dev:vite command to README.md

* feat(suite): add option to have vite as a dev server

* feat(suite): have Vite devserver serve the webpack original index.html file

* fix(suite): make the dynamic import of the flag svg actaully dynamic

* fix(suite): fix circular dependency

* chore(connect-expolorer-theme): remove unused vitest from connect-expolorer-theme

Author: vojtatranta

README.md

@@ -44,6 +44,7 @@ Historically, Trezor Connect had its [own repository](https://github.com/trezor/
 Run a dev build:
 
 -   `yarn suite:dev` (web app)
+-   `yarn suite:dev:vite` (⚠️ EXPERIMENTAL: web app with Vite bundler used for **development only**, use `yarn suite:dev` if you want fidelity to production app)
 -   `yarn suite:dev:desktop` (electron app)
 
 ## **Trezor Suite Lite** @suite-native/app

package.json

@@ -25,6 +25,7 @@
         "suite:build:web": "yarn workspace @trezor/suite-web build",
         "_______ Start Scripts _______": "Here are standalone scripts for running individual applications for development.",
         "suite:dev": "yarn workspace @trezor/suite-web dev",
+        "suite:dev:vite": "yarn workspace @trezor/suite-web dev:vite",
         "suite:dev:desktop": "yarn workspace @trezor/suite-desktop dev",
         "native:start": "yarn workspace @suite-native/app start",
         "_______ Testing _______": "Testing, linting, type checking...",

packages/address-validator/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require('../../jest.config.base');
+
+module.exports = {
+    ...baseConfig,
+    transformIgnorePatterns: [
+        ...(baseConfig.transformIgnorePatterns ?? []),
+        '/node_modules/(?!chai/)',
+    ],
+};

packages/address-validator/package.json

@@ -6,7 +6,7 @@
     "private": true,
     "main": "src/index",
     "scripts": {
-        "test:unit": "yarn g:jest -c ../../jest.config.base.js"
+        "test:unit": "yarn g:jest -c ./jest.config.js"
     },
     "dependencies": {
         "base-x": "^5.0.0",

packages/address-validator/src/crypto/cnBase58.js

@@ -1,4 +1,5 @@
-var JSBigInt = require('./biginteger')['JSBigInt'];
+var moduleImport = require('./biginteger');
+var JSBigInt = moduleImport.JSBigInt;
 
 /**
 Copyright (c) 2017, moneroexamples

packages/address-validator/tests/wallet_address_get_currencies.test.js

@@ -1,4 +1,4 @@
-var isNode = typeof module !== 'undefined' && typeof module.exports !== 'undefined';
+var isNode = true;
 
 var chai = isNode ? require('chai') : window.chai,
     expect = chai.expect;

packages/components/src/components/Flag/Flag.tsx

@@ -1,6 +1,9 @@
+import { useEffect, useState } from 'react';
+
 import styled from 'styled-components';
 
 import { FLAGS } from './flags';
+import { SkeletonRectangle } from '../skeletons/SkeletonRectangle';
 
 export type FlagType = keyof typeof FLAGS;
 
@@ -15,13 +18,26 @@ export interface FlagProps {
     size?: number;
 }
 
-export const Flag = ({ size = 24, country, className }: FlagProps) => (
-    <Wrapper>
-        <img
-            src={require(`../../images/flags/${country.toLowerCase()}.svg`)}
-            width={`${size}px`}
-            alt={`flag-${country}`}
-            className={className}
-        />
-    </Wrapper>
-);
+export const Flag = ({ size = 24, country, className }: FlagProps) => {
+    const [src, setSrc] = useState('');
+    useEffect(() => {
+        import(`../../images/flags/${country.toLowerCase()}.svg`)
+            .then(module => {
+                setSrc(module.default);
+            })
+            .catch(err => {
+                // NOTE: keep error here as this is not a critical issue
+                console.error('Flag image loading error: ', err);
+            });
+    }, [country]);
+
+    return (
+        <Wrapper>
+            {src ? (
+                <img src={src} width={`${size}px`} alt={`flag-${country}`} className={className} />
+            ) : (
+                <SkeletonRectangle width={size} height={size} />
+            )}
+        </Wrapper>
+    );
+};

packages/connect-explorer-theme/package.json

@@ -27,7 +27,6 @@
         "@trezor/components": "workspace:*",
         "@trezor/product-components": "workspace:*",
         "@trezor/theme": "workspace:*",
-        "@vitejs/plugin-react": "^3.0.1",
         "clsx": "^2.1.1",
         "escape-string-regexp": "^5.0.0",
         "flexsearch": "^0.7.31",
@@ -58,8 +57,7 @@
         "postcss-import": "^15.1.0",
         "postcss-lightningcss": "^1.0.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "vitest": "^0.34.0"
+        "react-dom": "^18.2.0"
     },
     "sideEffects": [
         "./src/polyfill.ts"

packages/connect-explorer-theme/vite.config.ts

@@ -80,6 +80,8 @@ const TrezorConnect = factory(
 export default TrezorConnect;
 export * from '@trezor/connect/src/exports';
 
-window.addEventListener('beforeunload', () => {
-    impl.dispose();
-});
+if (typeof window !== 'undefined') {
+    window.addEventListener('beforeunload', () => {
+        impl.dispose();
+    });
+}

packages/connect-web/src/module/index.ts

@@ -15,7 +15,9 @@ export const getMethod = async (message: IFrameCallMessage): Promise<AbstractMet
 
     const methodModule = getMethodModule(method);
     const methods = methodModule
-        ? await import(/* webpackChunkName: "[request]" */ `../api/${methodModule}/api`)
+        ? await import(
+              /* webpackChunkName: "[request]" */ /* @vite-ignore */ `../api/${methodModule}/api/index.ts`
+          )
         : Methods;
     const MethodConstructor = methods[method];
 

packages/connect/src/core/method.ts

@@ -16,6 +16,9 @@ const config: webpack.Configuration = {
     output: {
         path: path.join(baseDir, 'build'),
     },
+    resolve: {
+        fallback: { vm: require.resolve('vm-browserify') },
+    },
     plugins: [
         new CopyWebpackPlugin({
             patterns: ['browser-detection', 'fonts', 'images', 'oauth', 'videos', 'guide/assets']

packages/suite-build/configs/web.webpack.config.ts

@@ -36,6 +36,7 @@
         "stream-browserify": "^3.0.0",
         "style-loader": "^3.3.4",
         "terser-webpack-plugin": "^5.3.11",
+        "vm-browserify": "^1.1.2",
         "webpack": "^5.97.1",
         "webpack-bundle-analyzer": "^4.10.1",
         "webpack-merge": "^6.0.1",

packages/suite-build/package.json

@@ -1,10 +1,19 @@
-import { eslint } from '@trezor/eslint';
+import { eslint, globalNoExtraneousDependenciesDevDependencies } from '@trezor/eslint';
 
 export default [
     ...eslint,
     {
         rules: {
             'import/no-default-export': 'off', // Todo: fix and solve
+            'import/no-extraneous-dependencies': [
+                'error',
+                {
+                    devDependencies: [
+                        ...globalNoExtraneousDependenciesDevDependencies,
+                        '**/vite.config.ts',
+                    ],
+                },
+            ],
         },
     },
 ];

packages/suite-web/eslint.config.mjs

@@ -7,6 +7,7 @@
         "type-check:watch": "yarn type-check -- --watch",
         "lint:styles": "npx stylelint './src/**/*{.ts,.tsx}' --cache --config ../../.stylelintrc",
         "dev": "yarn rimraf ./build && yarn workspace @trezor/suite-build run dev:web",
+        "dev:vite": "PROJECT=web yarn rimraf ./build && vite",
         "analyze": "ANALYZE=true yarn build",
         "build": "yarn rimraf ./build && yarn workspace @trezor/suite-build run build:web"
     },
@@ -28,6 +29,7 @@
         "worker-loader": "^3.0.8"
     },
     "devDependencies": {
+        "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@suite-common/test-utils": "workspace:*",
         "@suite-common/wallet-config": "workspace:*",
         "@trezor/connect": "workspace:*",
@@ -43,10 +45,13 @@
         "@types/react-dom": "18.2.19",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.1.7",
+        "@vitejs/plugin-react": "^4.2.1",
         "rimraf": "^6.0.1",
         "stylelint": "^16.14.1",
         "stylelint-config-standard": "^36.0.0",
         "tsx": "^4.19.3",
+        "vite": "^5.4.14",
+        "vite-plugin-wasm": "^3.4.1",
         "webpack": "^5.97.1",
         "ws": "^8.18.0",
         "yargs": "17.7.2"

packages/suite-web/package.json

@@ -5,7 +5,6 @@
         <meta name="google" content="notranslate" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta charset="utf-8" />
-
         <link media="all" rel="stylesheet" href="<%= assetPrefix %>/static/fonts/fonts.css" />
         <link rel="icon" href="<%= assetPrefix %>/static/images/favicons/favicon.png" />
         <link rel="apple-touch-icon" href="<%= assetPrefix %>/static/images/favicons/favicon.png" />

packages/suite-web/src/static/index.html

@@ -0,0 +1,10 @@
+/*
+ * This entry is only used for Vite dev server!
+ */
+
+const appElement = document.getElementById('app');
+if (appElement) {
+    import('../Main').then(comp => comp.init(appElement)).catch(err => console.error(err)); // Fatal error
+}
+
+export {};