chore: move favicon script to suite-data and make it work with Vite too

.prettierignore

@@ -144,4 +144,6 @@ packages/suite-data/files/videos/lottie/*.json
 
 /.nx/cache
 
-/.nx/workspace-data
+/.nx/workspace-data
+
+favicon.js

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

@@ -15,10 +15,6 @@ const config: webpack.Configuration = {
     target: 'browserslist',
     entry: {
         main: path.join(baseDir, 'src', 'index.ts'),
-        favicon: {
-            filename: 'static/favicon.js',
-            import: path.join(baseDir, 'src', 'favicon.ts'),
-        },
         ['sessions-background-sharedworker']: {
             filename: 'workers/[name].js',
             import: path.resolve(
@@ -37,7 +33,15 @@ const config: webpack.Configuration = {
     },
     plugins: [
         new CopyWebpackPlugin({
-            patterns: ['browser-detection', 'fonts', 'images', 'oauth', 'videos', 'guide/assets']
+            patterns: [
+                'browser-detection',
+                'fonts',
+                'images',
+                'oauth',
+                'videos',
+                'guide/assets',
+                'favicon.js',
+            ]
                 .map(dir => ({
                     from: path.join(__dirname, '..', '..', 'suite-data', 'files', dir),
                     to: path.join(baseDir, 'build', 'static', dir),

packages/suite-build/vite.config.mts

@@ -236,6 +236,99 @@ const sessionsSharedWorkerPlugin = () => {
     };
 };
 
+// Plugin to build favicon.js from suite-data for /static/favicon.js usage
+const faviconPlugin = (): Plugin => {
+    const faviconOutDir = resolve(__dirname, '../suite-data/files');
+    const faviconEntryPath = resolve(__dirname, '../suite-data/src/favicon.ts');
+    const faviconFileName = 'favicon.js';
+    const faviconOutputPath = resolve(faviconOutDir, faviconFileName);
+
+    let buildInFlight: Promise<string | null> | null = null;
+    let hasBuilt = false;
+
+    const buildFavicon = () => {
+        if (buildInFlight) {
+            return buildInFlight;
+        }
+
+        buildInFlight = (async () => {
+            if (!fs.existsSync(faviconOutDir)) {
+                fs.mkdirSync(faviconOutDir, { recursive: true });
+            }
+
+            console.log(`Building favicon from ${faviconEntryPath}...`);
+
+            try {
+                await build({
+                    configFile: false,
+                    resolve: {
+                        alias,
+                    },
+                    build: {
+                        outDir: faviconOutDir,
+                        emptyOutDir: false,
+                        lib: {
+                            entry: faviconEntryPath,
+                            formats: ['iife'],
+                            fileName: () => faviconFileName,
+                            name: 'TrezorSuiteFavicon',
+                        },
+                        rollupOptions: {
+                            output: {
+                                inlineDynamicImports: true,
+                            },
+                        },
+                        minify: false,
+                        target: 'es2020',
+                        write: true,
+                    },
+                    define: {
+                        'process.env.ASSET_PREFIX': JSON.stringify(assetPrefix),
+                        'process.env.NODE_ENV': JSON.stringify(
+                            process.env.NODE_ENV ?? 'development',
+                        ),
+                    },
+                });
+
+                console.log(`Favicon built successfully at ${faviconOutputPath}`);
+                hasBuilt = true;
+
+                return faviconOutputPath;
+            } catch (error) {
+                console.error('Failed to build favicon:', error);
+
+                return null;
+            } finally {
+                buildInFlight = null;
+            }
+        })();
+
+        return buildInFlight;
+    };
+
+    return {
+        name: 'favicon-build',
+        async configureServer(server: ViteDevServer) {
+            if (!hasBuilt) {
+                await buildFavicon();
+            }
+
+            server.watcher.add(faviconEntryPath);
+            server.watcher.on('change', async (changedPath: string) => {
+                if (changedPath === faviconEntryPath) {
+                    console.log('Favicon source changed, rebuilding...');
+                    await buildFavicon();
+                }
+            });
+        },
+        async buildStart() {
+            if (!hasBuilt) {
+                await buildFavicon();
+            }
+        },
+    };
+};
+
 // Plugin to handle workers similar to webpack's worker-loader
 const workerPlugin = (): Plugin => ({
     name: 'worker-loader',
@@ -443,6 +536,7 @@ export default defineConfig({
         trezorLogosRequirePlugin(),
         staticAliasPlugin(),
         sessionsSharedWorkerPlugin(),
+        faviconPlugin(),
         viteCommonjs(),
         workerPlugin(),
         wasm(),

packages/suite-data/favicon.webpack.ts

@@ -0,0 +1,38 @@
+import path from 'path';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { DefinePlugin } from 'webpack';
+
+module.exports = {
+    target: 'browserslist',
+    mode: 'production',
+    entry: path.resolve(__dirname, './src/favicon.ts'),
+    output: {
+        path: path.resolve(__dirname, 'files'),
+        filename: 'favicon.js',
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env', '@babel/preset-typescript'],
+                    },
+                },
+            },
+        ],
+    },
+    plugins: [
+        new DefinePlugin({
+            'process.env.ASSET_PREFIX': JSON.stringify(process.env?.ASSET_PREFIX),
+        }),
+    ],
+    performance: {
+        hints: false,
+    },
+};

packages/suite-data/files/favicon.js

@@ -0,0 +1 @@
+!function(){var e="".concat("","/static/images/favicons/favicon.png"),t="".concat("","/static/images/favicons/favicon_dm.png");function n(n){var c=n.matches,i=document.querySelector("link[rel=icon]"),a=document.querySelector("link[rel=apple-touch-icon]");c?(null==i||i.setAttribute("href",t),null==a||a.setAttribute("href",t)):(null==i||i.setAttribute("href",e),null==a||a.setAttribute("href",e))}if(window.matchMedia){var c=window.matchMedia("(prefers-color-scheme: dark)");c.addEventListener("change",n),n(c)}}();

packages/suite-data/package.json

@@ -11,8 +11,9 @@
     "description": "Trezor data",
     "scripts": {
         "depcheck": "yarn g:depcheck",
-        "build:lib": "yarn browser-detection && yarn guide-pull-content",
+        "build:lib": "yarn browser-detection & yarn favicon && yarn guide-pull-content",
         "browser-detection": "webpack --config ./browser-detection.webpack.ts",
+        "favicon": "webpack --config ./favicon.webpack.ts",
         "guide-pull-content": "yarn tsx ./src/guide/index.ts",
         "update-coinjoin-middleware": "./files/bin/coinjoin/update.sh",
         "type-check": "yarn g:tsc --build tsconfig.json"