feat: Electrobun Svelte+WGPU prototype (Dawn GPU confirmed on Linux)
- Svelte 5 frontend with Catppuccin Mocha theme, 2 project cards - Electrobun v1.16.0 with bundleWGPU: true (Dawn on Linux x64) - WebKitGTK webview + WGPU surface coexistence confirmed - CPU: 6.5% idle (CSS animation + WebKitGTK overhead) - Port 9760 for dev server (project convention)
This commit is contained in:
parent
1f20fc460e
commit
cfc135ffaf
29 changed files with 1106 additions and 1020 deletions
69
ui-electrobun/README.md
Normal file
69
ui-electrobun/README.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# Svelte Electrobun Template
|
||||
|
||||
A fast Electrobun desktop app template with Svelte 5 and Vite for hot module replacement (HMR).
|
||||
|
||||
## Getting Started
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
bun install
|
||||
|
||||
# Development without HMR (uses bundled assets)
|
||||
bun run dev
|
||||
|
||||
# Development with HMR (recommended)
|
||||
bun run dev:hmr
|
||||
|
||||
# Build for production
|
||||
bun run build
|
||||
|
||||
# Build for production release
|
||||
bun run build:prod
|
||||
```
|
||||
|
||||
## How HMR Works
|
||||
|
||||
When you run `bun run dev:hmr`:
|
||||
|
||||
1. **Vite dev server** starts on `http://localhost:5173` with HMR enabled
|
||||
2. **Electrobun** starts and detects the running Vite server
|
||||
3. The app loads from the Vite dev server instead of bundled assets
|
||||
4. Changes to Svelte components update instantly without full page reload
|
||||
|
||||
When you run `bun run dev` (without HMR):
|
||||
|
||||
1. Electrobun starts and loads from `views://mainview/index.html`
|
||||
2. You need to rebuild (`bun run build`) to see changes
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
├── src/
|
||||
│ ├── bun/
|
||||
│ │ └── index.ts # Main process (Electrobun/Bun)
|
||||
│ └── mainview/
|
||||
│ ├── App.svelte # Svelte app component
|
||||
│ ├── main.ts # Svelte entry point
|
||||
│ ├── index.html # HTML template
|
||||
│ └── app.css # Global styles
|
||||
├── electrobun.config.ts # Electrobun configuration
|
||||
├── vite.config.ts # Vite configuration
|
||||
├── svelte.config.js # Svelte configuration
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Svelte 5 Features
|
||||
|
||||
This template uses Svelte 5 with the new runes syntax:
|
||||
|
||||
- `$state()` - reactive state
|
||||
- `$derived()` - computed values
|
||||
- `$effect()` - side effects
|
||||
|
||||
## Customizing
|
||||
|
||||
- **Svelte components**: Edit files in `src/mainview/`
|
||||
- **Global styles**: Edit `src/mainview/app.css`
|
||||
- **Vite settings**: Edit `vite.config.ts`
|
||||
- **Window settings**: Edit `src/bun/index.ts`
|
||||
- **App metadata**: Edit `electrobun.config.ts`
|
||||
Loading…
Add table
Add a link
Reference in a new issue