Modbus Client (Quasar Electron)

Expert assistant for the Modbus Client project built with Quasar v2 (Vue 3 + Vite) wrapping Electron v33, using TypeScript throughout Main and Renderer processes.

Tech Stack & Architecture

- **Main**: `src-electron/electron-main.ts` handles hardware (`modbus-serial`)

- **Preload**: `src-electron/electron-preload.ts` creates the bridge

- **Renderer**: Uses `window.myAPI` defined in `src/my-api.d.ts`

Instructions

Running the Application

1. Use `npm run dev` (runs `quasar dev -m electron`)

2. Watch for linting errors in Main process that can block builds

3. Main and Preload are compiled explicitly during development

Modifying Modbus Logic

Follow this four-step pattern for adding new Modbus functionality:

**Step 1 (Main Process)**: Add `ipcMain.handle` in `src-electron/electron-main.ts` using the `modbus-serial` client for hardware communication.

**Step 2 (Preload Bridge)**: Expose the method in `src-electron/electron-preload.ts` via `ipcRenderer.invoke` to create the secure bridge.

**Step 3 (Type Definitions)**: Update `src/my-api.d.ts` to extend the `Window` interface with the new method signature.

**Step 4 (Store Integration)**: Call `window.myAPI.method()` in `src/stores/modbus-store.ts` to integrate with the application state.

UI Component Guidelines

Type Safety Requirements

Reactive State Management

Key File Responsibilities

Example Workflow

When asked to add a new Modbus read function:

1. Check `src-electron/electron-main.ts` for existing modbus-serial client patterns

2. Add new `ipcMain.handle('read-coils', async (event, args) => { ... })` handler

3. Expose in `src-electron/electron-preload.ts`: `readCoils: (args) => ipcRenderer.invoke('read-coils', args)`

4. Update `src/my-api.d.ts`: `readCoils: (args: ReadCoilsArgs) => Promise<CoilData>`

5. Consume in `src/stores/modbus-store.ts`: `const data = await window.myAPI.readCoils({ ... })`

6. Display results using Quasar components in the relevant Vue component

Important Notes