بناء تطبيقات سطح المكتب فائقة السرعة باستخدام Electrobun وTypeScript (2026)

# macOS / Linux
curl -fsSL https://bun.sh/install | bash
 
# Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1|iex"
 
# التحقق
bun --version   # يجب أن يُخرج 1.2.x أو أعلى

bunx electrobun init

cd noteflow
bun install

import { defineRpc } from "electrobun/bun";
 
// استدعاءات من WebView إلى العملية الرئيسية
export const mainRpc = defineRpc({
  listNotes: async (): Promise<string[]> => [],
  readNote: async (filename: string): Promise<string> => "",
  writeNote: async (filename: string, content: string): Promise<void> => {},
  deleteNote: async (filename: string): Promise<void> => {},
  openFilePicker: async (): Promise<string | null> => null,
});
 
// استدعاءات من العملية الرئيسية إلى WebView (أحداث دفع)
export const webviewRpc = defineRpc({
  onNoteChanged: async (filename: string): Promise<void> => {},
});

import { BrowserWindow, app, dialog } from "electrobun/bun";
import { mainRpc } from "../shared/rpc";
import { join } from "path";
import { homedir } from "os";
import { mkdirSync } from "fs";
 
const NOTES_DIR = join(homedir(), ".noteflow", "notes");
mkdirSync(NOTES_DIR, { recursive: true });
 
// سجّل معالجات RPC قبل فتح النافذة
mainRpc.handle({
  async listNotes() {
    const glob = new Bun.Glob("*.md");
    const files: string[] = [];
    for await (const file of glob.scan(NOTES_DIR)) {
      files.push(file);
    }
    return files.sort();
  },
 
  async readNote(filename) {
    const path = join(NOTES_DIR, filename);
    const file = Bun.file(path);
    if (!(await file.exists())) return "";
    return file.text();
  },
 
  async writeNote(filename, content) {
    await Bun.write(join(NOTES_DIR, filename), content);
  },
 
  async deleteNote(filename) {
    await Bun.file(join(NOTES_DIR, filename)).delete();
  },
 
  async openFilePicker() {
    const result = await dialog.showOpenDialog({
      filters: [{ name: "Markdown", extensions: ["md", "txt"] }],
      properties: ["openFile"],
    });
    return result.canceled ? null : result.filePaths[0];
  },
});
 
app.on("ready", () => {
  const win = new BrowserWindow({
    title: "NoteFlow",
    url: "views://mainview/index.html",
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    styleMask: ["titled", "closable", "miniaturizable", "resizable"],
  });
 
  win.show();
});
 
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

import React, { useState, useEffect, useCallback, useRef } from "react";
import { createRoot } from "react-dom/client";
import { mainRpc } from "../../shared/rpc";
 
type Note = { filename: string; title: string };
 
function noteTitle(filename: string) {
  return filename.replace(/\.md$/, "").replace(/-/g, " ");
}
 
function App() {
  const [notes, setNotes] = useState<Note[]>([]);
  const [active, setActive] = useState<string | null>(null);
  const [content, setContent] = useState("");
  const [dirty, setDirty] = useState(false);
  const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
  useEffect(() => {
    refresh();
  }, []);
 
  async function refresh() {
    const files = await mainRpc.call.listNotes();
    const noteList = files.map((f) => ({ filename: f, title: noteTitle(f) }));
    setNotes(noteList);
    if (noteList.length > 0 && active === null) {
      await openNote(noteList[0].filename);
    }
  }
 
  async function openNote(filename: string) {
    if (dirty && active) await save(active, content);
    const text = await mainRpc.call.readNote(filename);
    setActive(filename);
    setContent(text);
    setDirty(false);
  }
 
  function handleChange(value: string) {
    setContent(value);
    setDirty(true);
    if (saveTimer.current) clearTimeout(saveTimer.current);
    saveTimer.current = setTimeout(() => {
      if (active) save(active, value);
    }, 1500);
  }
 
  const save = useCallback(async (filename: string, text: string) => {
    await mainRpc.call.writeNote(filename, text);
    setDirty(false);
  }, []);
 
  async function newNote() {
    const timestamp = new Date().toISOString().split("T")[0];
    const filename = `note-${timestamp}-${Date.now()}.md`;
    await mainRpc.call.writeNote(filename, `# ملاحظة جديدة\n\n`);
    await refresh();
    await openNote(filename);
  }
 
  async function deleteActive() {
    if (!active || !confirm(`حذف "${noteTitle(active)}"؟`)) return;
    await mainRpc.call.deleteNote(active);
    setActive(null);
    setContent("");
    setDirty(false);
    await refresh();
  }
 
  return (
    <div className="app">
      <aside className="sidebar">
        <div className="sidebar-header">
          <span className="brand">NoteFlow</span>
          <button className="icon-btn" onClick={newNote} title="ملاحظة جديدة">+</button>
        </div>
        <ul className="note-list">
          {notes.map((n) => (
            <li
              key={n.filename}
              className={n.filename === active ? "active" : ""}
              onClick={() => openNote(n.filename)}
            >
              {n.title}
            </li>
          ))}
        </ul>
      </aside>
 
      <main className="editor-area">
        {active ? (
          <>
            <div className="toolbar">
              <span className="status">{dirty ? "غير محفوظ…" : "تم الحفظ"}</span>
              <button onClick={() => active && save(active, content)}>حفظ</button>
              <button className="danger" onClick={deleteActive}>حذف</button>
            </div>
            <textarea
              className="editor"
              value={content}
              onChange={(e) => handleChange(e.target.value)}
              onKeyDown={(e) => {
                if ((e.ctrlKey || e.metaKey) && e.key === "s") {
                  e.preventDefault();
                  if (active) save(active, content);
                }
              }}
              spellCheck={false}
              dir="auto"
            />
          </>
        ) : (
          <div className="empty-state">
            <p>انقر + لإنشاء أول ملاحظة.</p>
          </div>
        )}
      </main>
    </div>
  );
}
 
const el = document.getElementById("app");
if (el) createRoot(el).render(<App />);

bun start

import { Menu, MenuItem } from "electrobun/bun";
 
function buildMenu(win: BrowserWindow) {
  const menu = new Menu();
 
  const fileMenu = new MenuItem({
    label: "ملف",
    submenu: [
      new MenuItem({
        label: "ملاحظة جديدة",
        accelerator: "CmdOrCtrl+N",
        click: () => win.webContents.executeScript("window.__newNote?.()"),
      }),
      new MenuItem({ type: "separator" }),
      new MenuItem({ role: "quit" }),
    ],
  });
 
  const editMenu = new MenuItem({
    label: "تحرير",
    submenu: [
      new MenuItem({ role: "undo" }),
      new MenuItem({ role: "redo" }),
      new MenuItem({ type: "separator" }),
      new MenuItem({ role: "cut" }),
      new MenuItem({ role: "copy" }),
      new MenuItem({ role: "paste" }),
      new MenuItem({ role: "selectAll" }),
    ],
  });
 
  menu.append(fileMenu);
  menu.append(editMenu);
  Menu.setApplicationMenu(menu);
}

bunx electrobun build --env=stable

import { defineConfig } from "electrobun/config";
 
export default defineConfig({
  app: {
    name: "NoteFlow",
    version: "1.0.0",
    identifier: "tn.noqta.noteflow",
  },
  updates: {
    provider: "github",
    owner: "your-org",
    repo: "noteflow",
    channel: "stable",
  },
  build: {
    targets: ["mac-arm64", "mac-x64", "win-x64", "linux-x64"],
  },
});

import { autoUpdater } from "electrobun/bun";
 
autoUpdater.on("update-downloaded", () => {
  autoUpdater.quitAndInstall();
});
 
await autoUpdater.checkForUpdates();