# mixone

[English](./README.md) | [中文](./README.zh-CN.md)

A universal Electron desktop application scaffolding tool. With just `mixone` as your dependency, you get out-of-the-box support for **Vue 3 / React 19 / react-native-web** renderers, powered by Vite + Electron with a launcher-based dev mode.

## Features

- **Zero Config** – `mixone create` generates projects with auto-installed dependencies
- **3 Renderers** – Vue 3, React 19, react-native-web
- **TypeScript** – `--ts` flag generates TS templates with full type coverage
- **V8 Bytecode** – `mixone build --bytecode` compiles main process to .jsc for source protection
- **Built-in IPC Bridge** – Window management, dialogs, filesystem, clipboard, shell APIs
- **Splash Screen** – Pure HTML splash with custom `splash.html` support
- **Unified Dependencies** – vue/react/vite/electron/bytenode all provided by mixone

## Quick Start

```bash
# Create a project
npm create mixone@latest my-app

# Or install globally first
npm install -g mixone
mixone create my-app
```

```bash
cd my-app
npm run dev      # Dev mode (Vite + Electron, HMR)
npm run build    # Build renderer to dist/
npm run start    # Start production (electron .)
```

## CLI Commands

### mixone create

```bash
mixone create <name> [options]
```

| Option | Description |
|--------|-------------|
| `--template vue\|react\|react-native-web` | Renderer (default: vue) |
| `--ts` | Generate TypeScript template |
| `--ui <lib>` | UI library (see below) |
| `--yes` | Skip interactive prompts |
| `--skip-install` | Skip npm install |
| `--force` | Overwrite existing directory |

### mixone dev

Start dev mode. Auto-detects TS projects and compiles main process. Auto-switches port if occupied.

```bash
mixone dev              # Auto-detect port from 5173
mixone dev --port 3000  # Start from custom port
```

### mixone build

Build renderer to `dist/`.

```bash
mixone build              # Build renderer only
mixone build --bytecode   # Build + compile main process to V8 bytecode
```

### mixone build:bytecode

Compile main process bytecode only (without building renderer).

```bash
mixone build:bytecode
```

### Other Commands

```bash
mixone doctor    # Check environment and project
mixone list      # List available templates and UI libraries
```

## Templates

| Template | Description |
|----------|-------------|
| `vue` | Vue 3 + vue-router (default) |
| `react` | React 19 + react-router |
| `react-native-web` | React Native Web + react-router |

TypeScript variants with `--ts`:

```bash
mixone create app --template vue --ts
mixone create app --template react --ts
```

## UI Libraries

| Renderer | Available Libraries |
|----------|-------------------|
| vue | `element-plus`, `ant-design-vue`, `naive-ui`, `vuetify` |
| react | `antd`, `mui`, `mantine` |

```bash
mixone create app --template vue --ui element-plus
mixone create app --template react --ui antd
```

## Project Structure

```
my-app/
├── main.js                 # Electron main process (CommonJS)
├── preload.js              # contextBridge IPC bridge
├── appConfig.js            # userData/cache redirect to temp dir
├── mixone.vite.config.js   # Vite configuration
├── package.json            # Dependencies: mixone + electron-builder
├── tsconfig.json           # TypeScript config (--ts only)
└── src/                    # Renderer
    ├── main.js             # Entry point
    ├── App.vue / App.jsx   # Root component
    ├── router.js           # Route config
    ├── components/         # Reusable components
    ├── utils/              # Utility functions
    ├── assets/             # Static assets
    └── views/ / pages/     # Page components
```

## Built-in IPC Bridge

The generated project exposes APIs via `window.mixone`:

```js
const mixone = window.mixone

// System info
mixone.platform    // 'win32' | 'darwin' | 'linux'
mixone.version     // Electron version
mixone.node        // Node.js version

// Window management
mixone.window.open({ url: 'https://example.com', width: 800, height: 600 })
mixone.window.openModal({ url: '/sub', width: 520, height: 420 })
mixone.window.close()
mixone.window.minimize()
mixone.window.maximize()

// Dialogs
await mixone.dialog.openFile({ filters: [{ name: 'Text', extensions: ['txt'] }] })
await mixone.dialog.saveFile({ defaultPath: 'untitled.txt' })
await mixone.dialog.messageBox({ type: 'info', message: 'Hello' })

// Filesystem
const { content } = await mixone.fs.readText('/path/to/file')
await mixone.fs.writeText('/path/to/file', 'content')
const { entries } = await mixone.fs.readDir('/path/to/dir')
await mixone.fs.mkdir('/path/to/dir', { recursive: true })
await mixone.fs.rename('/old', '/new')
await mixone.fs.copyFile('/src', '/dest')
await mixone.fs.appendText('/path', 'more')
const { data } = await mixone.fs.readJson('/config.json')
await mixone.fs.writeJson('/config.json', { key: 'value' })

// Clipboard
await mixone.clipboard.writeText('hello')
const text = await mixone.clipboard.readText()
await mixone.clipboard.writeHtml('<b>bold</b>')
await mixone.clipboard.clear()

// Shell
await mixone.shell.openExternal('https://example.com')
await mixone.shell.showItemInFolder('/path/to/file')
mixone.shell.beep()

// App
const info = await mixone.app.info()
mixone.app.relaunch()
mixone.app.quit()
```

## Packaging

Templates include electron-builder config. Run:

```bash
npm run build:desktop    # Build + package for current platform
```

Output directory: `release/`

## V8 Bytecode

Protects source code by compiling main process files to .jsc bytecode.

```bash
mixone build --bytecode           # Build + bytecode
MIXONE_NO_BYTECODE=1 mixone build  # Disable bytecode
```

Or set in `package.json`:

```json
{ "mixone": { "bytecode": false } }
```

## Custom Splash Screen

Place a `splash.html` in your project root to replace the default:

```html
<!DOCTYPE html>
<html>
<head><style>body { background: #0f172a; color: white; }</style></head>
<body><h1>Loading...</h1></body>
</html>
```

## How It Works

- **Launcher Mode** – Vite dev server spawns in Node process (not Electron), Electron connects when ready
- **Unified Dependencies** – All heavy deps (vue/react/vite/electron) provided by mixone
- **Cache Isolation** – userData/sessionData/chromium-cache redirected to `%TEMP%/<package-name>`

## Contributing

- Issues: https://github.com/qew4/mixone-example/issues
- Include `mixone doctor` output and minimal reproduction steps

## License

MIT