upgrade to electron-vite

.eslintignore

@@ -1,3 +1,3 @@
 /dist
-/vite-dist
+/out
 /ts-dist

.eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
 
   overrides: [
     {
-      files: ['./src/**/*.{js,cjs,mjs,jsx,ts,tsx,mts}'],
+      files: ['./src/renderer/**/*.{js,cjs,mjs,jsx,ts,tsx,mts}'],
       env: {
         node: false,
         browser: true,
@@ -22,7 +22,13 @@ module.exports = {
       },
     },
     {
-      files: ['./script/**/*.{js,cjs,mjs,jsx,ts,tsx,mts}', 'vite.config.js'],
+      files: ['./src/preload/**/*.{js,cjs,jsx,ts,tsx}'],
+      env: {
+        browser: true,
+      },
+    },
+    {
+      files: ['./script/**/*.{js,cjs,mjs,jsx,ts,tsx,mts}', 'electron.vite.config.js'],
       rules: {
         'import/no-extraneous-dependencies': ['error', {
           devDependencies: true,

.github/workflows/build.yml

@@ -98,7 +98,7 @@ jobs:
       - name: (MacOS) Upload to Mac App Store
         if: startsWith(matrix.os, 'macos') && env.is_tag == 'true'
         run: |
-          node script/xcrun-wrapper.mjs dist/mas-universal/LosslessCut-mac-universal.pkg ${{ secrets.api_key_id }} ${{ secrets.api_key_issuer_id }} 1505323402 no.mifi.losslesscut-mac
+          npx tsx script/xcrun-wrapper.mts dist/mas-universal/LosslessCut-mac-universal.pkg ${{ secrets.api_key_id }} ${{ secrets.api_key_issuer_id }} 1505323402 no.mifi.losslesscut-mac
 
       - name: (MacOS) Upload artifacts
         uses: actions/upload-artifact@v3

.gitignore

@@ -11,7 +11,7 @@ node_modules
 !.yarn/versions
 
 /dist
-/vite-dist
+/out
 /icon-build
 /build-resources
 /doc

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "search.exclude": {
-    "/public/locales/**": true,
+    "/src/main/locales/**": true,
   }
 }

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 	<br>
-  <p><a href="https://mifi.no/losslesscut/"><img src="src/icon.svg" width="120" alt="LosslessCut" /></a></p>
+  <p><a href="https://mifi.no/losslesscut/"><img src="src/renderer/src/icon.svg" width="120" alt="LosslessCut" /></a></p>
   <p><b>LosslessCut</b></p>
   The swiss army knife of lossless video/audio editing
 	<br>

cli.md

@@ -26,7 +26,7 @@ LosslessCut file1.mp4 file2.mkv
 ```
 
 ## Override settings (experimental)
-See [available settings](https://github.com/mifi/lossless-cut/blob/master/public/configStore.js). Note that this is subject to change in newer versions. ⚠️ If you specify incorrect values it could corrupt your configuration file. You may use JSON or JSON5. Example:
+See [available settings](https://github.com/mifi/lossless-cut/blob/master/src/main/configStore.js). Note that this is subject to change in newer versions. ⚠️ If you specify incorrect values it could corrupt your configuration file. You may use JSON or JSON5. Example:
 ```bash
 LosslessCut --settings-json '{captureFormat:"jpeg", "keyframeCut":true}'
 ```

developer-notes.md

@@ -5,10 +5,6 @@
 This app is built using Electron.
 Make sure you have at least Node v16. The app uses ffmpeg from PATH when developing.
 
-```bash
-npm install -g yarn
-```
-
 ```bash
 git clone https://github.com/mifi/lossless-cut.git
 cd lossless-cut

electron.vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
+import react from '@vitejs/plugin-react';
+
+
+export default defineConfig({
+  main: {
+    // https://electron-vite.org/guide/dev#dependencies-vs-devdependencies
+    // For the main process and preload, the best practice is to externalize dependencies and only bundle our own code.
+    // However, until we use ESM for electron main, we need to include ESM-only deps in the bundle: (exclude from externalize)
+    plugins: [externalizeDepsPlugin({ exclude: ['p-map', 'execa', 'nanoid'] })],
+  },
+  preload: {
+    // https://electron-vite.org/guide/dev#dependencies-vs-devdependencies
+    plugins: [externalizeDepsPlugin({ exclude: [] })],
+  },
+  renderer: {
+    plugins: [react()],
+    build: {
+      chunkSizeWarningLimit: 3e6,
+      sourcemap: true,
+    },
+    server: {
+      port: 3001,
+      host: '127.0.0.1',
+      https: false,
+    },
+  },
+});

i18next-parser.config.mjs

@@ -1,8 +1,8 @@
 // eslint-disable-line unicorn/filename-case
 export default {
-  input: ['src/**/*.{js,jsx,ts,tsx}', 'public/*.{js,ts}'],
+  input: ['src/renderer/**/*.{js,jsx,ts,tsx}', 'src/main/*.{js,ts}'],
 
-  output: 'public/locales/$LOCALE/$NAMESPACE.json',
+  output: 'src/main/locales/$LOCALE/$NAMESPACE.json',
   indentation: 4,
 
   sort: true,
@@ -16,7 +16,7 @@ export default {
 
   defaultValue: (lng, ns, key) => key,
 
-  // Keep in sync between i18next-parser.config.js and i18n-common.js:
+  // Keep in sync between i18next-parser.config.js and i18nCommon.js:
   keySeparator: false,
   namespaceSeparator: false,
 };

package.json

@@ -4,31 +4,27 @@
   "description": "The swiss army knife of lossless video/audio editing",
   "copyright": "Copyright © 2021 ${author}",
   "version": "3.60.0",
-  "main": "public/electron.js",
+  "main": "./out/main/index.js",
   "homepage": "./",
   "scripts": {
-    "dev": "concurrently -k \"npm run dev:frontend\" \"npm run dev:electron\"",
-    "dev:frontend": "cross-env vite --port 3001",
-    "dev:electron": "wait-on tcp:3001 && electron .",
-    "icon-gen": "mkdirp icon-build build-resources/appx && node script/icon-gen.mjs",
+    "clean": "rimraf dist out ts-dist build-resources icon-build",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev -w",
+    "icon-gen": "mkdirp icon-build build-resources/appx && tsx script/icon-gen.mts",
     "download-ffmpeg-darwin-x64": "mkdirp ffmpeg/darwin-x64 && cd ffmpeg/darwin-x64 && wget https://github.com/mifi/ffmpeg-build-script/releases/download/6.0-1/ffmpeg-macos-X64 -O ffmpeg && wget https://github.com/mifi/ffmpeg-build-script/releases/download/6.0-1/ffprobe-macos-X64 -O ffprobe && chmod +x ffmpeg && chmod +x ffprobe",
     "download-ffmpeg-darwin-arm64": "mkdirp ffmpeg/darwin-arm64 && cd ffmpeg/darwin-arm64 && wget https://github.com/mifi/ffmpeg-build-script/releases/download/6.0-1/ffmpeg-macos-ARM64 -O ffmpeg && wget https://github.com/mifi/ffmpeg-build-script/releases/download/6.0-1/ffprobe-macos-ARM64 -O ffprobe && chmod +x ffmpeg && chmod +x ffprobe",
     "download-ffmpeg-linux-x64": "mkdirp ffmpeg/linux-x64 && cd ffmpeg/linux-x64 && wget https://github.com/mifi/ffmpeg-builds/releases/download/6.0/ffmpeg-n6.0-12-ga6dc92968a-linux64-gpl-shared-6.0.tar.xz -O ffmpeg-ffprobe.xz && tar -xv -f ffmpeg-ffprobe.xz && mv ffmpeg-n6.0-12-ga6dc92968a-linux64-gpl-shared-6.0 extracted && mkdirp lib && mv extracted/bin/ffmpeg extracted/bin/ffprobe extracted/lib/lib*.so* lib",
     "download-ffmpeg-win32-x64": "mkdirp ffmpeg/win32-x64 && cd ffmpeg/win32-x64 && npx download-cli https://github.com/mifi/ffmpeg-builds/releases/download/6.0/ffmpeg-n6.0-12-ga6dc92968a-win64-gpl-shared-6.0.zip --out . --filename ffmpeg-ffprobe.zip && 7z x ffmpeg-ffprobe.zip && mkdirp lib && cd ffmpeg-n6.0-12-ga6dc92968a-win64-gpl-shared-6.0/bin && npx shx mv ffmpeg.exe ffprobe.exe *.dll ../../lib",
-    "build": "yarn icon-gen && vite build --outDir vite-dist",
+    "build": "yarn icon-gen && electron-vite build",
     "tsc": "tsc --build",
     "test": "vitest",
-    "lint": "eslint --ext .js,.ts,.jsx,.tsx,.mjs .",
-    "pack-mac": "electron-builder --mac -m dmg",
-    "prepack-mac": "yarn build",
-    "pack-mas-dev": "electron-builder --mac -m mas-dev -c.mas.provisioningProfile=LosslessCut_Dev.provisionprofile -c.mas.identity='Apple Development: Mikael Finstad (JH4PH8B3C8)'",
-    "prepack-mas-dev": "yarn build",
-    "pack-win": "electron-builder --win",
-    "prepack-win": "yarn build",
+    "lint": "eslint --ext .js,.ts,.jsx,.tsx,.mjs,.mts .",
+    "pack-mac": "yarn build && electron-builder --mac -m dmg",
+    "pack-mas-dev": "yarn build && electron-builder --mac -m mas-dev -c.mas.provisioningProfile=LosslessCut_Dev.provisionprofile -c.mas.identity='Apple Development: Mikael Finstad (JH4PH8B3C8)'",
+    "pack-win": "yarn build && electron-builder --win",
     "postinstall": "electron-builder install-app-deps",
-    "version": "node script/postversion.mjs && git add no.mifi.losslesscut.appdata.xml",
-    "pack-linux": "electron-builder --linux",
-    "prepack-linux": "yarn build",
+    "version": "tsx script/postversion.mts && git add no.mifi.losslesscut.appdata.xml",
+    "pack-linux": "yarn build && electron-builder --linux",
     "scan-i18n": "i18next --config i18next-parser.config.mjs",
     "generate-licenses": "yarn licenses generate-disclaimer > licenses.txt && echo '\n\nffmpeg is licensed under GPL v2+:\n\nhttp://www.gnu.org/licenses/old-licenses/gpl-2.0.html' >> licenses.txt"
   },
@@ -44,29 +40,36 @@
   "license": "GPL-2.0-only",
   "devDependencies": {
     "@fontsource/open-sans": "^4.5.14",
+    "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-switch": "^1.0.1",
+    "@tsconfig/node18": "^18.2.2",
     "@tsconfig/strictest": "^2.0.2",
     "@tsconfig/vite-react": "^3.0.0",
     "@types/color": "^3.0.6",
     "@types/css-modules": "^1.0.5",
     "@types/eslint": "^8",
+    "@types/express": "^4.17.21",
     "@types/lodash": "^4.14.202",
+    "@types/luxon": "^3.4.2",
+    "@types/morgan": "^1.9.9",
     "@types/node": "18",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/sortablejs": "^1.15.0",
+    "@types/yargs-parser": "^21.0.3",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "@uidotdev/usehooks": "^2.4.1",
     "@vitejs/plugin-react": "^3.1.0",
     "color": "^3.1.0",
     "concurrently": "^6.0.0",
-    "cross-env": "^7.0.3",
     "csv-parse": "^4.15.3",
     "csv-stringify": "^5.6.2",
+    "data-uri-to-buffer": "^4.0.0",
     "electron": "^27.0.0",
     "electron-builder": "^24.6.4",
     "electron-devtools-installer": "^3.2.0",
+    "electron-vite": "^2.1.0",
     "eslint": "^8.2.0",
     "eslint-config-mifi": "^0.0.3",
     "eslint-plugin-import": "^2.25.3",
@@ -78,7 +81,7 @@
     "fast-xml-parser": "^4.2.5",
     "framer-motion": "^9.0.3",
     "i18next-parser": "^7.6.0",
-    "icon-gen": "^3.0.0",
+    "icon-gen": "^4.0.0",
     "immer": "^10.0.2",
     "ky": "^0.33.1",
     "luxon": "^3.3.0",
@@ -97,6 +100,7 @@
     "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^15.4.3",
     "react-use": "^17.4.0",
+    "rimraf": "^5.0.5",
     "screenfull": "^6.0.2",
     "scroll-into-view-if-needed": "^2.2.28",
     "sharp": "^0.32.6",
@@ -105,54 +109,54 @@
     "sweetalert2": "^11.0.0",
     "sweetalert2-react-content": "^5.0.7",
     "tiny-invariant": "^1.3.3",
+    "tsx": "^4.7.1",
     "typescript": "~5.2.0",
     "use-debounce": "^5.1.0",
     "use-trace-update": "^1.3.0",
     "vite": "^4.5.2",
-    "vitest": "^1.2.2",
-    "wait-on": "^7.0.1"
+    "vitest": "^1.2.2"
   },
   "dependencies": {
     "@electron/remote": "^2.0.10",
-    "@radix-ui/colors": "^0.1.8",
+    "@octokit/core": "5",
     "cue-parser": "^0.3.0",
-    "data-uri-to-buffer": "^4.0.0",
-    "electron-is-dev": "^2.0.0",
     "electron-store": "5.1.1",
     "electron-unhandled": "^4.0.1",
-    "execa": "5",
+    "execa": "^8.0.1",
     "express": "^4.18.2",
     "express-async-handler": "^1.2.0",
     "file-type": "16",
     "file-url": "^3.0.0",
     "fs-extra": "^8.1.0",
-    "github-api": "^3.2.2",
     "i18next": "^22.4.10",
     "i18next-fs-backend": "^2.1.1",
     "json5": "^2.2.2",
     "lodash": "^4.17.19",
     "mime-types": "^2.1.14",
     "morgan": "^1.10.0",
     "semver": "^7.5.2",
-    "string-to-stream": "^1.1.1",
+    "string-to-stream": "^3.0.1",
     "winston": "^3.8.1",
-    "yargs-parser": "^21.0.0"
+    "yargs-parser": "^21.1.1"
   },
   "build": {
     "directories": {
       "buildResources": "build-resources"
     },
-    "extraMetadata": {
-      "main": "vite-dist/electron.js"
-    },
     "files": [
-      "vite-dist/**/*"
+      "out/**/*"
     ],
     "asar": {
       "smartUnpack": false
     },
     "appId": "no.mifi.losslesscut",
     "artifactName": "${productName}-${os}-${arch}.${ext}",
+    "extraResources": [
+      {
+        "from": "locales",
+        "to": "locales"
+      }
+    ],
     "mac": {
       "hardenedRuntime": true,
       "appId": "no.mifi.losslesscut-mac",

script/icon-gen.mts

@@ -0,0 +1,32 @@
+// eslint-disable-line unicorn/filename-case
+import sharp from 'sharp';
+import icongenRaw from 'icon-gen';
+
+const icongen = icongenRaw as unknown as typeof icongenRaw['default'];
+
+const svg2png = (from: string, to: string, width: number, height: number) => sharp(from)
+  .png()
+  .resize(width, height, {
+    fit: sharp.fit.contain,
+    background: { r: 0, g: 0, b: 0, alpha: 0 },
+  })
+  .toFile(to);
+
+const srcIcon = 'src/renderer/src/icon.svg';
+// Linux:
+await svg2png(srcIcon, './icon-build/app-512.png', 512, 512);
+
+// Windows Store
+await svg2png(srcIcon, './build-resources/appx/StoreLogo.png', 50, 50);
+await svg2png(srcIcon, './build-resources/appx/Square150x150Logo.png', 300, 300);
+await svg2png(srcIcon, './build-resources/appx/Square44x44Logo.png', 44, 44);
+await svg2png(srcIcon, './build-resources/appx/Wide310x150Logo.png', 620, 300);
+
+// MacOS:
+// https://github.com/mifi/lossless-cut/issues/1820
+await icongen('./src/renderer/src/icon-mac.svg', './icon-build', { icns: { sizes: [512, 1024] }, report: false });
+
+// Windows ICO:
+// https://github.com/mifi/lossless-cut/issues/778
+// https://stackoverflow.com/questions/3236115/which-icon-sizes-should-my-windows-applications-icon-include
+await icongen(srcIcon, './icon-build', { ico: { sizes: [16, 24, 32, 40, 48, 64, 96, 128, 256, 512] }, report: false });