Skip to content

Commit f67ebe7

Browse files
yzuyryzuyr
authored
feat(templates): add electrobun desktop app template (#19)
* feat(templates): add electrobun desktop app template * fix(electrobun): fix vite dist path
1 parent 3f8595f commit f67ebe7

13 files changed

Lines changed: 672 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Ilha
22

3+
[![Continuous Integration](https://github.com/ilhajs/ilha/actions/workflows/ci.yml/badge.svg)](https://github.com/ilhajs/ilha/actions/workflows/ci.yml)
4+
[![NPM Version](https://img.shields.io/npm/v/ilha)](https://www.npmjs.com/package/ilha)
5+
[![Discord](https://img.shields.io/discord/1428724223756472373)](https://discord.gg/WnVTMCTz74)
6+
37
> Alpha is live
48
59
**Ilha** is a tiny, isomorphic web UI library built around the [islands architecture](https://www.patterns.dev/vanilla/islands-architecture/) — ship minimal JavaScript, hydrate only what matters.

‎templates/electrobun/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
.ilha
15+
build
16+
17+
# Editor directories and files
18+
.vscode/*
19+
!.vscode/extensions.json
20+
.idea
21+
.DS_Store
22+
*.suo
23+
*.ntvs*
24+
*.njsproj
25+
*.sln
26+
*.sw?

‎templates/electrobun/bun.lock‎

Lines changed: 267 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/electrobun/electrobun.config.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { ElectrobunConfig } from "electrobun";
2+
3+
export default {
4+
app: {
5+
name: "Ilha + Electrobun",
6+
identifier: "vanillavite.electrobun.dev",
7+
version: "0.0.1",
8+
},
9+
build: {
10+
copy: {
11+
"dist/index.html": "views/mainview/index.html",
12+
"dist/assets": "views/mainview/assets",
13+
},
14+
watchIgnore: ["dist/**"],
15+
mac: {
16+
bundleCEF: false,
17+
},
18+
linux: {
19+
bundleCEF: false,
20+
},
21+
win: {
22+
bundleCEF: false,
23+
},
24+
},
25+
} satisfies ElectrobunConfig;

‎templates/electrobun/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Ilha + Electrobun</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/mainview/main.ts"></script>
11+
</body>
12+
</html>

‎templates/electrobun/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "electrobun",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"start": "vite build && electrobun dev",
7+
"dev": "electrobun dev --watch",
8+
"dev:hmr": "concurrently \"bun run hmr\" \"bun run start\"",
9+
"hmr": "vite --port 5173",
10+
"build:canary": "vite build && electrobun build --env=canary"
11+
},
12+
"dependencies": {
13+
"@ilha/router": "^0.1.1",
14+
"electrobun": "1.16.0",
15+
"ilha": "^0.1.0"
16+
},
17+
"devDependencies": {
18+
"@types/bun": "latest",
19+
"concurrently": "^9.2.1",
20+
"typescript": "^6.0.3",
21+
"vite": "^8.0.9"
22+
}
23+
}

‎templates/electrobun/src/bun/index.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { BrowserWindow, Updater } from "electrobun/bun";
2+
3+
const DEV_SERVER_PORT = 5173;
4+
const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`;
5+
6+
async function getMainViewUrl(): Promise<string> {
7+
const channel = await Updater.localInfo.channel();
8+
if (channel === "dev") {
9+
try {
10+
await fetch(DEV_SERVER_URL, { method: "HEAD" });
11+
console.log(`HMR enabled: Using Vite dev server at ${DEV_SERVER_URL}`);
12+
return DEV_SERVER_URL;
13+
} catch {
14+
console.log("Vite dev server not running. Run 'bun run dev:hmr' for HMR support.");
15+
}
16+
}
17+
return "views://mainview/index.html";
18+
}
19+
20+
const url = await getMainViewUrl();
21+
22+
const mainWindow = new BrowserWindow({
23+
title: "Ilha + Electrobun",
24+
url,
25+
frame: {
26+
width: 900,
27+
height: 700,
28+
x: 200,
29+
y: 200,
30+
},
31+
});
32+
33+
console.log("Vanilla Vite app started!");

‎templates/electrobun/src/mainview/app.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="../../.ilha/routes" />
2+
/// <reference types="vite/client" />

‎templates/electrobun/src/mainview/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import "./style.css";
2+
import { pageRouter } from "ilha:pages";
3+
4+
pageRouter.mount("#app");

‎templates/electrobun/src/mainview/pages/index.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import ilha, { html } from "ilha";
2+
3+
export default ilha
4+
.state("count", 0)
5+
.on("[data-action=increase]@click", ({ state }) => {
6+
state.count(state.count() + 1);
7+
})
8+
.on("[data-action=reset]@click", ({ state }) => {
9+
state.count(0);
10+
})
11+
.render(
12+
({ state }) => html`
13+
<main>
14+
<div class="container">
15+
<h1>Ilha + Electrobun</h1>
16+
<p class="subtitle">A fast desktop app with hot module replacement — no framework needed</p>
17+
18+
<div class="card">
19+
<h2>Interactive Counter</h2>
20+
<p>
21+
Click the button below to test vanilla TypeScript. With HMR enabled,
22+
you can edit this file and see changes instantly.
23+
</p>
24+
<div class="button-group">
25+
<button class="primary" data-action="increase">
26+
Count: ${state.count()}
27+
</button>
28+
<button class="secondary" data-action="reset">
29+
Reset
30+
</button>
31+
</div>
32+
</div>
33+
34+
<div class="card">
35+
<h2>Getting Started</h2>
36+
<ul>
37+
<li>
38+
<span class="number">1.</span>
39+
Run <code>bun run dev</code> for development without HMR
40+
</li>
41+
<li>
42+
<span class="number">2.</span>
43+
Run <code>bun run dev:hmr</code> for development with hot reload
44+
</li>
45+
<li>
46+
<span class="number">3.</span>
47+
Run <code>bun run build</code> to build for production
48+
</li>
49+
</ul>
50+
</div>
51+
52+
<div class="card">
53+
<h2>Stack</h2>
54+
<div class="stack-grid">
55+
<div class="stack-item">
56+
<span class="icon">⚡</span>
57+
<span>Electrobun</span>
58+
</div>
59+
<div class="stack-item">
60+
<span class="icon">🟦</span>
61+
<span>TypeScript</span>
62+
</div>
63+
<div class="stack-item">
64+
<span class="icon">🔥</span>
65+
<span>Vite HMR</span>
66+
</div>
67+
<div class="stack-item">
68+
<span class="icon">📦</span>
69+
<span>Bun</span>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="footer">
75+
<p>
76+
Edit <code>src/mainview/main.ts</code> and save to see HMR in action
77+
</p>
78+
</div>
79+
</div>
80+
</main>
81+
`,
82+
);

0 commit comments

Comments
 (0)