20e4d2cdec
TaskBoardTab: $effect called loadTasks() which wrote ++pollToken ($state) → triggered $effect re-run → infinite loop. Fix: onMount instead. Also tasksByCol $derived created new objects via .reduce/.filter. FileBrowser: $effect read openDirs (via new Set(openDirs)) AND wrote to it (openDirs = s) → infinite loop. Fix: onMount with fresh Set. CommsTab: $effect called loadChannels()/loadAgents() which wrote $state → potential cycle. Fix: onMount instead. Rule: NEVER use $effect for initialization that writes to $state. Always use onMount for async init + side effects. |
||
|---|---|---|
| .. | ||
| locales | ||
| scripts | ||
| src | ||
| tests | ||
| bun.lock | ||
| CONTRIBUTING_I18N.md | ||
| electrobun.config.ts | ||
| llms.txt | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| svelte.config.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
Svelte Electrobun Template
A fast Electrobun desktop app template with Svelte 5 and Vite for hot module replacement (HMR).
Getting Started
# 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:
- Vite dev server starts on
http://localhost:5173with HMR enabled - Electrobun starts and detects the running Vite server
- The app loads from the Vite dev server instead of bundled assets
- Changes to Svelte components update instantly without full page reload
When you run bun run dev (without HMR):
- Electrobun starts and loads from
views://mainview/index.html - 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