JOPS 1.1.6: build Electron desktop apps with JOPS, no bundler

[arkwld]

Hi everyone 👋

JOPS 1.1.6 is out, and it brings Electron. A JOPS SPA can now be the UI of an Electron desktop app, set up with a single command, with no bundler.

🖥️ Electron integration

Electron stays what it is: the main process, native windows, menus, the file system and packaging. JOPS is the renderer: class-based views with an Android-style lifecycle, a Router, a Store and an EventBus, loaded as plain ES modules from file://.

• One command, a full project: in an empty folder, npx jops-core init → 4. Electron JOPS Desktop App creates an Electron Forge project (main process, preload bridge, JOPS app, Content-Security-Policy), vendors the library and runs npm install. No need to run create-electron-app first.
• A small working app to start from: a sidebar with two screens in <Router jops screens>, light and dark themes, and two sample IPC calls: app info, and a file list read by the main process.
• Native access through the preload bridge: views call window.api.* functions that the preload exposes with contextBridge, answered by ipcMain.handle() in the main process. JOPS adds no IPC layer of its own, so Electron's documented security model stays as it is.
• Packaging works out of the box: npm run make builds the app with Electron Forge. jops-core is a devDependency, so only the vendored library goes into app.asar.
• Existing Electron projects: run npx jops-core init in a project made from Electron Forge's default template and choose 1, 2 or 5. It vendors the library, sets up the page (import map, script tag, CSP) and keeps Forge's sample page as index.forge.html. Forge's vite and webpack templates are not supported, since they bundle the page.

We tested it with Electron 45 and Electron Forge 8 on macOS (npm start and a packaged .app). A Windows build made on the Mac ran on Windows.

mkdir my-desktop-app && cd my-desktop-app
npx jops-core init      # choose 4
npm start

One rule to know: under file://, every path JOPS resolves (data-app, src=, layout=, loadLayout()) is written relative to the page, with no leading ./ or /, e.g. layout/main.html. The README section "Desktop Apps (Electron)" has the full guide: paths, IPC, events from the main process, and the CSP.

🧩 Also since the last announcement

• 1.1.3: rendering fixes. Views are now rendered when they are declared in any top-level element of a multi-root layout, as a top-level jops tag, inside a Router route's layout, nested inside another jops tag, or in the layout of a view added with addSubView() / insertSubView(). Views removed while still loading no longer run their lifecycle. The Router hides routes even when your CSS sets their display.
• 1.1.4: Router screens mode. <Router jops screens> (opt-in) puts each route in its own full-size screen with its own scroll, which fixes transition glitches in app-like layouts. The default Router is unchanged.
• 1.1.5: docs. How to style screens through .jops-screen / .jops-router.

⬆️ How to upgrade

npm:

npm i jops-core@latest
npx jops-core update

In an Electron project, update refreshes the vendored library in src/lib/.

CDN: @latest serves 1.1.6. The library itself is the same as in 1.1.5 (this release adds the CLI, the template and docs), so pinned @1.1.5 URLs need no change.

---

Building desktop tools? Tell us what you'd build with JOPS and Electron in Ideas. Questions go to Q&A, and bugs to Issues.

Previous announcement: JOPS 1.1.2 and WordPress · Full changelog: CHANGELOG.md · Release: v1.1.6