desktop/lib/preload/preload.ts

import { contextBridge, ipcRenderer, shell } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'
import api from './api'

const applicationLoader = `
<div style="
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-top: 40px;
  text-align: center;
">
  <div style="
    width: 48px;
    height: 48px;
    border: 4px solid #333333;
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  "></div>
  <style>
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</div>
`;

const applicationError = `
<div style="
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
  color: #ffffff;
  padding: 40px;
  text-align: center;
">
  <div style="
      flex-direction: column;
    align-items: center;
    justify-content: center;
  ">
  <div style="
    font-size: 72px;
    margin-bottom: 20px;
  ">
    <svg width="64" height="64" zoomAndPan="magnify" viewBox="0 0 384 383.999986" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ab9f3e3410"><path d="M 134 109 L 369.46875 109 L 369.46875 381.34375 L 134 381.34375 Z M 134 109 " clip-rule="nonzero"/></clipPath><clipPath id="39bead0a6b"><path d="M 14.71875 2.59375 L 249 2.59375 L 249 222 L 14.71875 222 Z M 14.71875 2.59375 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#ab9f3e3410)"><path fill="#ffffff" d="M 254.15625 284.453125 C 288.414062 275.191406 316.179688 260.617188 337.414062 240.769531 C 358.632812 220.917969 369.257812 195.238281 369.257812 163.691406 L 369.257812 109.996094 L 249.550781 110.222656 L 249.550781 168.148438 C 249.550781 184.847656 241.75 198.195312 226.148438 208.21875 C 210.550781 218.226562 188.175781 223.234375 159.007812 223.234375 L 134.070312 223.234375 L 134.070312 300.996094 L 206.652344 381.429688 L 344.765625 381.429688 L 254.15625 284.453125 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#39bead0a6b)"><path fill="#ffffff" d="M 248.417969 109.257812 L 248.417969 2.605469 L 14.769531 2.605469 L 14.769531 221.519531 L 132.9375 221.519531 L 132.9375 109.257812 L 248.417969 109.257812 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
  </div>
  <h1 style="
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
  ">Application Error</h1>
  <p style="
    font-size: 17px;
    color: #a1a1a6;
    margin: 0 0 32px 0;
    max-width: 500px;
    line-height: 1.5;
  ">The application failed to load properly. Please wait for application repairing or reinstall application.</p>
   ${applicationLoader}  
  </div>
  <div style="
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    ">
      <p style="
      font-size: 13px;
      color: #5a5a5f;
    ">rosetta - powering freedom. visit about rosetta-im.com. error: boot_process_failed</p>
  </div>
</div>
`;


const exposeContext = async () => {
  let version = await ipcRenderer.invoke("get-core-version");
  let appPath = await ipcRenderer.invoke("get-app-path");
  let arch = await ipcRenderer.invoke("get-arch");
  let deviceName = await ipcRenderer.invoke("device:name");
  let deviceId = await ipcRenderer.invoke("device:id");
  
  setTimeout(() => {
    /**
     * Если после определенного таймаута приложение так и 
     * не загрузилось, то считаем, что процесс завис,
     * и показываем экран ошибки. Так же отправляем
     * сигнал в main процесс, чтобы тот мог попытаться
     * откатить обновление. 
     */
    if(document.body.innerHTML.length < 100){
      document.body.innerHTML = applicationError;
      ipcRenderer.invoke("report-boot-process-failed");
    }
  }, 5000);
  
  let downloadsPath = await ipcRenderer.invoke("get-downloads-path");
  if (process.contextIsolated) {
    try {
      contextBridge.exposeInMainWorld('electron', electronAPI)
      contextBridge.exposeInMainWorld('api', api)
      contextBridge.exposeInMainWorld('version', version);
      contextBridge.exposeInMainWorld('platform', process.platform);
      contextBridge.exposeInMainWorld('appPath', appPath);
      contextBridge.exposeInMainWorld('arch', arch);
      contextBridge.exposeInMainWorld('deviceName', deviceName);
      contextBridge.exposeInMainWorld('deviceId', deviceId);
      contextBridge.exposeInMainWorld('shell', {
        openExternal: (url: string) => {
          ipcRenderer.invoke('openExternal', url);
        },
        showItemInFolder: (fullPath: string) => {
          ipcRenderer.invoke('showItemInFolder', fullPath);
        }
      });
      contextBridge.exposeInMainWorld('downloadsPath', downloadsPath)
    } catch (error) {
      console.error(error)
    }
  } else {
    window.electron = electronAPI
    window.api = api
    window.version = version;
    window.platform = process.platform;
    window.appPath = appPath;
    window.arch = arch;
    window.shell = shell;
    window.downloadsPath = downloadsPath;
    window.deviceName = deviceName;
    window.deviceId = deviceId;
  }
}

exposeContext();