feat: migrate from rollup to electron-vite (#1364)

* feat: electron-vite PoC

* fix: fix preload path

* remove rollup deps and config

* fix: debug mode

* fix: build mode, asset path

* fix: remove unused dependencies

* feat: use `executeJavaScriptInIsolatedWorld` instead of `executeJavaScript`

* feat: enable `minify`

* fix(actions): update task name

* fix: fix dev mode check

* fix: remove unused variable

src/plugins/adblocker/inject.d.ts

@@ -1,3 +1 @@
-const inject: () => void;
-
-export default inject;
+export const inject: () => void;

src/plugins/adblocker/inject.js

@@ -7,7 +7,7 @@
   Parts of this code is derived from set-constant.js:
   https://github.com/gorhill/uBlock/blob/5de0ce975753b7565759ac40983d31978d1f84ca/assets/resources/scriptlets.js#L704
   */
-module.exports = () => {
+export const inject = () => {
   {
     const pruner = function (o) {
       delete o.playerAds;

src/plugins/adblocker/preload.ts

@@ -1,5 +1,5 @@
 import config, { shouldUseBlocklists } from './config';
-import inject from './inject';
+import { inject } from './inject';
 import injectCliqzPreload from './inject-cliqz-preload';
 
 import { blockers } from './blocker-types';

src/plugins/captions-selector/front.ts

@@ -1,6 +1,6 @@
 import configProvider from './config-renderer';
 
-import CaptionsSettingsButtonHTML from './templates/captions-settings-template.html';
+import CaptionsSettingsButtonHTML from './templates/captions-settings-template.html?raw';
 
 import { ElementFromHtml } from '../utils-renderer';
 import { YoutubePlayer } from '../../types/youtube-player';

src/plugins/discord/back.ts

@@ -208,8 +208,10 @@ export default (
       // if lastSent is more than 5 seconds ago, send the new time
       if (currentTime - lastSent > 5000) {
         lastSent = currentTime;
-        lastSongInfo.elapsedSeconds = t;
-        updateActivity(lastSongInfo);
+        if (lastSongInfo) {
+          lastSongInfo.elapsedSeconds = t;
+          updateActivity(lastSongInfo);
+        }
       }
     });
   });

src/plugins/downloader/front.ts

@@ -1,4 +1,4 @@
-import downloadHTML from './templates/download.html';
+import downloadHTML from './templates/download.html?raw';
 
 import defaultConfig from '../../config/defaults';
 import { getSongMenu } from '../../providers/dom-elements';

src/plugins/in-app-menu/front.ts

@@ -1,12 +1,13 @@
 import { createPanel } from './menu/panel';
 
-import logo from './assets/menu.svg';
-import close from './assets/close.svg';
-import minimize from './assets/minimize.svg';
-import maximize from './assets/maximize.svg';
-import unmaximize from './assets/unmaximize.svg';
+import logoRaw from './assets/menu.svg?inline';
+import closeRaw from './assets/close.svg?inline';
+import minimizeRaw from './assets/minimize.svg?inline';
+import maximizeRaw from './assets/maximize.svg?inline';
+import unmaximizeRaw from './assets/unmaximize.svg?inline';
 
 import type { Menu } from 'electron';
+import * as electron from 'electron';
 
 function $<E extends Element = Element>(selector: string) {
   return document.querySelector<E>(selector);
@@ -23,6 +24,26 @@ export default async () => {
   let maximizeButton: HTMLButtonElement;
   if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
 
+  const logo = document.createElement('img');
+  const close = document.createElement('img');
+  const minimize = document.createElement('img');
+  const maximize = document.createElement('img');
+  const unmaximize = document.createElement('img');
+
+  if (window.ELECTRON_RENDERER_URL) {
+    logo.src = window.ELECTRON_RENDERER_URL + '/' + logoRaw;
+    close.src = window.ELECTRON_RENDERER_URL + '/' + closeRaw;
+    minimize.src = window.ELECTRON_RENDERER_URL + '/' + minimizeRaw;
+    maximize.src = window.ELECTRON_RENDERER_URL + '/' + maximizeRaw;
+    unmaximize.src = window.ELECTRON_RENDERER_URL + '/' + unmaximizeRaw;
+  } else {
+    logo.src = logoRaw;
+    close.src = closeRaw;
+    minimize.src = minimizeRaw;
+    maximize.src = maximizeRaw;
+    unmaximize.src = unmaximizeRaw;
+  }
+
   logo.classList.add('title-bar-icon');
   const logoClick = () => {
     hideMenu = !hideMenu;

src/plugins/navigation/front.ts

@@ -1,5 +1,5 @@
-import forwardHTML from './templates/forward.html';
-import backHTML from './templates/back.html';
+import forwardHTML from './templates/forward.html?raw';
+import backHTML from './templates/back.html?raw';
 
 import { ElementFromHtml } from '../utils-renderer';
 

src/plugins/notifications/utils.ts

@@ -7,9 +7,10 @@ import config from './config';
 
 import { cache } from '../../providers/decorators';
 import { SongInfo } from '../../providers/song-info';
-import { getAssetsDirectoryLocation } from '../utils';
 
-const defaultIcon = path.join(getAssetsDirectoryLocation(), 'youtube-music.png');
+import youtubeMusicIcon from '../../../assets/youtube-music.png?asset';
+
+
 const userData = app.getPath('userData');
 const temporaryIcon = path.join(userData, 'tempIcon.png');
 const temporaryBanner = path.join(userData, 'tempBanner.png');
@@ -45,7 +46,7 @@ const nativeImageToLogo = cache((nativeImage: NativeImage) => {
 
 export const notificationImage = (songInfo: SongInfo) => {
   if (!songInfo.image) {
-    return defaultIcon;
+    return youtubeMusicIcon;
   }
 
   if (!config.get('interactive')) {
@@ -68,8 +69,9 @@ export const saveImage = cache((img: NativeImage, savePath: string) => {
   try {
     fs.writeFileSync(savePath, img.toPNG());
   } catch (error: unknown) {
-    console.log(`Error writing song icon to disk:\n${String(error)}`);
-    return defaultIcon;
+    console.error('Error writing song icon to disk:');
+    console.trace(error);
+    return youtubeMusicIcon;
   }
 
   return savePath;

src/plugins/picture-in-picture/front.ts

@@ -1,7 +1,7 @@
 import { toKeyEvent } from 'keyboardevent-from-electron-accelerator';
 import keyEventAreEqual from 'keyboardevents-areequal';
 
-import pipHTML from './templates/picture-in-picture.html';
+import pipHTML from './templates/picture-in-picture.html?raw';
 
 import { getSongMenu } from '../../providers/dom-elements';
 

src/plugins/playback-speed/front.ts

@@ -1,4 +1,4 @@
-import sliderHTML from './templates/slider.html';
+import sliderHTML from './templates/slider.html?raw';
 
 import { getSongMenu } from '../../providers/dom-elements';
 import { ElementFromHtml } from '../utils-renderer';

src/plugins/quality-changer/front.ts

@@ -1,4 +1,4 @@
-import qualitySettingsTemplate from './templates/qualitySettingsTemplate.html';
+import qualitySettingsTemplate from './templates/qualitySettingsTemplate.html?raw';
 
 import { ElementFromHtml } from '../utils-renderer';
 import { YoutubePlayer } from '../../types/youtube-player';

src/plugins/utils.ts

@@ -4,10 +4,9 @@ import path from 'node:path';
 import { app } from 'electron';
 import is from 'electron-is';
 
-import { ValueOf } from '../utils/type-utils';
 import defaultConfig from '../config/defaults';
 
-export const getAssetsDirectoryLocation = () => path.resolve(__dirname, 'assets');
+export const getAssetsDirectoryLocation = () => path.resolve(__dirname, '..', 'assets');
 
 export const getMediaIconLocation = () =>
   app.isPackaged

src/plugins/video-toggle/front.ts

@@ -1,4 +1,4 @@
-import buttonTemplate from './templates/button_template.html';
+import buttonTemplate from './templates/button_template.html?raw';
 
 import { ElementFromHtml } from '../utils-renderer';