Merge pull request #21 from Kosinkadink/vue-rework

Vue 3 + TypeScript rewrite

Author: Kosinkadink

.github/workflows/build-release.yml

@@ -48,7 +48,13 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build
+      - name: Lint
+        run: npm run lint
+
+      - name: Compile
+        run: npm run build
+
+      - name: Package
         run: npx electron-builder ${{ matrix.args }} --publish never
 
       - name: Upload artifacts

.gitignore

@@ -1,4 +1,6 @@
 node_modules/
 dist/
+out/
 *.log
+*.tsbuildinfo
 result

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false,
+  "trailingComma": "none",
+  "printWidth": 100
+}

README.md

@@ -26,12 +26,6 @@ chmod +x ComfyUI-Launcher-*.AppImage
 ./ComfyUI-Launcher-*.AppImage --no-sandbox
 ```
 
-**Nix (flake):**
-
-> ⚠️ The Nix flake (`flake.nix`) is not working currently.
-
-
-
 ## Development
 
 ### Prerequisites
@@ -49,6 +43,35 @@ nvm use 22
 node --version   # should print v22.x.x
 ```
 
+### Stack
+
+- **Build tool:** [electron-vite](https://electron-vite.org/)
+- **Renderer:** [Vue 3](https://vuejs.org/) (Composition API) + [TypeScript](https://www.typescriptlang.org/)
+- **State:** [Pinia](https://pinia.vuejs.org/)
+- **i18n:** [vue-i18n](https://vue-i18n.intlify.dev/) (locale files in `locales/`)
+- **Styling:** [Tailwind CSS v4](https://tailwindcss.com/)
+- **Icons:** [Lucide](https://lucide.dev/)
+- **Main process:** TypeScript (`src/main/`)
+- **Linting:** [ESLint](https://eslint.org/) (flat config) + [Prettier](https://prettier.io/)
+- **Testing:** [Vitest](https://vitest.dev/) + [Vue Test Utils](https://test-utils.vuejs.org/)
+
+### Project structure
+
+```
+src/
+  main/          # Electron main process (TypeScript)
+  preload/       # Preload scripts (context bridge)
+  renderer/src/  # Vue 3 renderer
+    components/  # Reusable UI components
+    composables/ # Vue composables (useModal, useTheme, …)
+    stores/      # Pinia stores (session, installation)
+    views/       # Top-level views and modal views
+    types/       # Renderer-side type re-exports
+  types/         # Shared IPC types (single source of truth)
+locales/         # i18n translation files
+sources/         # Installation source plugins
+```
+
 ### Setup
 
 ```bash
@@ -61,24 +84,45 @@ npm install
 
 **Windows / macOS:**
 ```bash
-npm start
+npm run dev
 ```
 
 **Linux:**
 ```bash
 ./linux-dev.sh
 ```
 
-### Build for distribution
+### Type checking
 
 ```bash
-# Current platform
-npm run dist
+npm run typecheck          # both main + renderer
+npm run typecheck:node     # main process only
+npm run typecheck:web      # renderer only
+```
 
+### Linting
+
+```bash
+npm run lint           # check for lint errors
+npm run lint:fix       # auto-fix lint errors
+npm run format         # format with Prettier
+npm run format:check   # check formatting without writing
+```
+
+### Testing
+
+```bash
+npm test               # run all unit tests
+npm run test:watch     # run in watch mode
+```
+
+### Build for distribution
+
+```bash
 # Platform-specific
-npm run dist:win      # Windows (NSIS installer)
-npm run dist:mac      # macOS (DMG)
-npm run dist:linux    # Linux (AppImage, .deb)
+npm run build:win      # Windows (NSIS installer)
+npm run build:mac      # macOS (DMG)
+npm run build:linux    # Linux (AppImage, .deb)
 ```
 
 Build output is written to the `dist/` directory.

electron-builder.yml

@@ -0,0 +1,40 @@
+appId: com.kosinkadink.comfyui-launcher
+productName: ComfyUI Launcher
+directories:
+  buildResources: resources
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!eslint.config.ts'
+  - '!{.eslintcache,.prettierrc.json,README.md,DESIGN_PROCESS.md,MANAGER_RESTART.md,REFERENCE_COMFY_DESKTOP.md}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - '!{.env,.env.*,.npmrc}'
+  - '!docs/*'
+  - '!reference/*'
+asarUnpack:
+  - node_modules/7zip-bin/**/*
+publish:
+  provider: github
+  owner: Kosinkadink
+  repo: ComfyUI-Launcher
+artifactName: ComfyUI-Launcher-${version}-${os}-${arch}.${ext}
+win:
+  target: nsis
+  icon: assets/Comfy_Logo_x256.png
+nsis:
+  oneClick: false
+  perMachine: false
+  allowToChangeInstallationDirectory: true
+mac:
+  target:
+    - dmg
+    - zip
+  icon: assets/Comfy_Logo_x512.png
+  category: public.app-category.developer-tools
+linux:
+  target:
+    - AppImage
+    - deb
+  icon: assets/Comfy_Logo_x256.png
+  category: Development

electron.vite.config.ts

@@ -0,0 +1,17 @@
+import { resolve } from 'path'
+import { defineConfig } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  main: {},
+  preload: {},
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src')
+      }
+    },
+    plugins: [vue(), tailwindcss()]
+  }
+})

eslint.config.ts

@@ -0,0 +1,79 @@
+import pluginJs from '@eslint/js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import unusedImports from 'eslint-plugin-unused-imports'
+import pluginVue from 'eslint-plugin-vue'
+import { defineConfig } from 'eslint/config'
+import globals from 'globals'
+import {
+  configs as tseslintConfigs,
+  parser as tseslintParser
+} from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
+
+const extraFileExtensions = ['.vue']
+
+const commonParserOptions = {
+  parser: tseslintParser,
+  projectService: true,
+  tsConfigRootDir: import.meta.dirname,
+  ecmaVersion: 2020,
+  sourceType: 'module',
+  extraFileExtensions
+} as const
+
+export default defineConfig([
+  {
+    ignores: ['out/*', 'dist/*', 'node_modules/*']
+  },
+  {
+    files: ['./**/*.{ts,mts}'],
+    languageOptions: {
+      globals: { ...globals.node },
+      parserOptions: {
+        ...commonParserOptions,
+        projectService: {
+          allowDefaultProject: ['electron.vite.config.ts', 'eslint.config.ts']
+        }
+      }
+    }
+  },
+  {
+    files: ['./**/*.vue'],
+    languageOptions: {
+      globals: { ...globals.browser },
+      parser: vueParser,
+      parserOptions: commonParserOptions
+    }
+  },
+  pluginJs.configs.recommended,
+  tseslintConfigs.recommended,
+  pluginVue.configs['flat/recommended'],
+  eslintConfigPrettier,
+  {
+    plugins: {
+      'unused-imports': unusedImports
+    },
+    rules: {
+      'no-empty': ['error', { allowEmptyCatch: true }],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-import-type-side-effects': 'error',
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        { allowInterfaces: 'always' }
+      ],
+      'unused-imports/no-unused-imports': 'error',
+      'vue/no-v-html': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/match-component-import-name': 'error',
+      'vue/no-unused-properties': 'error',
+      'vue/no-unused-refs': 'error',
+      'vue/no-useless-mustaches': 'error',
+      'vue/no-useless-v-bind': 'error',
+      'vue/no-unused-emit-declarations': 'error',
+      'vue/no-use-v-else-with-v-for': 'error',
+      'vue/one-component-per-file': 'error'
+    }
+  }
+])