0.1.0-beta.11

@diamonddigitaldev/electron-kit | Beta Preview (v0.1.0-beta.11)

Important

A beta: the API can still change between 0.x versions. It's published under npm's next tag.

A bar along the window's bottom with a panel per item, a status line of its own, a form dialog, update checks through a proxy, and settings only main may change. Every new piece is additive: an app on 0.1.0-beta.10 runs on it unchanged. What an app may notice is under Changed: Settings tabs' cards fill the pane, and scrollbars are thin.

npm install @diamonddigitaldev/electron-kit@next

New

• The bottom bar: kit.ui.mountShell({ statusBar: { items: [{ id, label, live, panel: { label, width } }] } }). A 26px bar under the whole frame, the rail included; while it shows, the frame takes the rest of the window, so nothing scrolls. It's hidden until shell.statusBar.show(true). Each item is a borderless button the app fills, named by its label and its content, and live: true makes it a polite live region (nothing else in the bar is announced). shell.statusBar.item(id) → { button, panel, open(), close(), opened }.
• A panel per item: a non-modal dialog named by panel.label, panel.width px wide (capped to the window), above its item, with a close button at its top right and the app's elements inside. It opens on a click, Enter or Space and takes the focus. Escape, its close button, or Tab past its last control close it and put the focus back on the item; a click outside closes it too. One panel is open at a time.
• kit.ui.statusLine({ text, tone, title }) → { element, set() }: a card's status line (its dot in one of the card's tones, running pulsing) anywhere on a page, such as a settings row. A card now builds its own line through it, so the two can't drift.
• kit.ui.dialog({ title, icon, body, actions }) → { element, action(value), close(value), closed }: a small form in the same modal as confirm(), for an app's own options. The body is the app's own elements; the actions run left to right (one may be primary, one cancel: true). Enter in a one-line field presses the primary button unless it's disabled. Escape and the close button give the cancel value; a click on the backdrop does nothing, so nothing typed is lost. An action with close: false leaves the form open while the app works, and the app closes it with close(value). Forms and prompts wait their turn, one at a time.
• kit.updater.setProxy({ proxyRules, proxyBypassRules }), in main: every update check and download goes through a proxy, on electron-updater's own session. A proxy set before the updater loads is applied before its first check. null goes back to how the app was launched. A change cancels a download under way, which fails and says so; nothing restarts by itself.
• kit.start({ settings: { mainOnly, checks } }): the page's change naming a mainOnly setting is refused whole, with nothing stored. A check per setting ((value) => boolean) refuses a value from the page or from main unless it returns exactly true. Reads are unchanged.
• kit.settings.onChange((changes, after, { from }) => …), in main, returns the function that stops it. It hears every stored change, from "page" or "main", after the kit's own handling. A listener that throws is logged, and the change stays.

Changed

• Settings tabs' cards fill the pane: the Update tab's cards no longer stop at 36rem (the channel's select keeps its width). An app's own Settings tabs should fill the pane too; a readable width, where one is wanted, is the text inside a card.
• Thin scrollbars everywhere: 6px, no arrow buttons, the thumb the theme's text colour at half on a track that isn't drawn (3:1 or more against the page in both themes), stronger while hovered. They're drawn through ::-webkit-scrollbar, which Chromium ignores on any element that sets the standard scrollbar-width or scrollbar-color: an app that sets either on an element gets Chromium's own bar there, so drop any scrollbar CSS of your own. The --scrollbar-thumb and --scrollbar-thumb-hover tokens are now the theme's text colour, set on each theme's root.
• A card's status line is a span rather than a div, drawn the same.

Docs

• The Shell, Settings and Credits: The Bottom Bar, and a tab's cards filling the pane.
• Page Components: The Status Line, and Form Dialogs with the house's form row.
• Updates: Through a Proxy.
• The Main Process: The Settings (settings only main changes, checks, and hearing a change).
• Theme, Accent and Tokens: Scrollbars.

Closes #65, closes #66, closes #67, closes #68, closes #70.

The docs are in the repository: start at docs/README.md.

Found something wrong? Open an issue.