Cómo configurar Tauri para usar ventanas transparentes

Hoy he estado probando Rust + Tauri + React en una aplicación de escritorio y la experiencia ha sido muy positiva.

Qué es Tauri

Tauri es una herramienta que permite crear aplicaciones de escritorio basadas en Rust + frameworks web (React, Angular, Vue, Svelte, etc.). A diferencia de ElectronJS, las aplicaciones de Tauri no incluyen su propia versión de Chromium integrada, por lo que pesan mucho menos, consumen menos memoria y son más rápidas. Además, al usar Rust, también son más seguras y robustas.

Cómo crear ventanas transparentes en Tauri

Lo que a priori parecía una tarea trivial me terminó llevando casi 2 horas y media. Mi objetivo era crear una ventana así:

Quería crear una especie de spotlight que me permitiera comunicar una aplicación con GPT-3 (haré un post sobre esto en un futuro próximo) en una especie de chatbot. Sin embargo, no conseguía que la ventana fuera transparente, siempre me salía con un fondo blanco. Algo así:

El truco está en el fichero tauri.conf.json. En la definición de la ventana hay que especificarle que queremos hacerla transparente:

{
	"tauri": {
		"windows": [
			{
				"fullscreen": false,
				"height": 600,
	            "resizable": true,
    	        "title": "my-title",
        	    "width": 800,
            	"transparent": true
			}
		]
    }
}

Sin embargo, hacer este cambio no hará que tu ventana sea transparente en ordenadores Mac (¡este fue realmente mi problema!). Para que la ventana sea transparente también en ordenadores Mac, debes añadir tauri.macOSPrivateApi=true en el fichero:

{
	"tauri": {
    	"macOSPrivateApi": true,
		"windows": [
			{
				"fullscreen": false,
				"height": 600,
	            "resizable": true,
    	        "title": "my-title",
        	    "width": 800,
            	"transparent": true
			}
		]
    }
}

Una vez añadida esta línea, tu ventana ya será transparente!