Electron 0.37 wurde vor kurzem veröffentlicht und beinhaltet ein großes Upgrade von Chrome 47 zu Chrome 49 und auch mehrere neue Kern-APIs. Dieses neuste Release bringt alle neuen Features von Chrome 48 und Chrome 49 mit. Dies beinhaltet CSS custom Properties, erweiterte ES6-Unterstützung, KeyboardEvent-Verbesserungen, Promise-Verbesserungen und viele andere neue Features, welche jetzt in deiner Electron-App zur Verfügung stehen.
Was ist neu
CSS Custom Properties
Wenn Sie preprocessed Sprachen wie Sass und Less verwendet haben, sind Sie wahrscheinlich mit _Variablen_vertraut, mit denen Sie wiederverwendbare Werte für Dinge wie Farbschemata und Layouts definieren können. Variablen helfen dabei, Ihre Stylesheets DRY und wartbarer zu halten.
CSS custom properties ähneln preprocessed Variablen, da sie wiederverwendbar sind, aber sie haben auch eine einzigartige Qualität, die sie noch mächtiger und flexibler macht: sie können mit JavaScript manipuliert werden. This subtle but powerful feature allows for dynamic changes to visual interfaces while still benefitting from CSS's hardware acceleration, and reduced code duplication between your frontend code and stylesheets.
Weitere Informationen zu CSS custom properties finden Sie im MDN Artikel und in der Google Chrome Demo.
CSS-Variablen in Aktion
Gehen wir durch ein einfaches variables Beispiel, das live in deiner App angepasst werden kann.
:root {
--awesome-color: #a5ecfa;
}
body {
background-color: var(--awesome-color);
}
Der Variablenwert kann direkt in JavaScript abgerufen und geändert werden:
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');
document.body.style.setProperty('--awesome-color', 'orange');
Die Variablenwerte können auch aus dem Styles Abschnitt der Entwicklungstools bearbeitet werden, um schnelle Rückmeldungen und Optimierungen zu erhalten:
KeyboardEvent.code Eigenschaft
Chrome 48 hat die neue code Eigenschaft für KeyboardEvent Ereignisse hinzugefügt, die die physikalische Taste, unabhängig vom Betriebssystem-Tastaturlayout, die gedrückt wurde, angibt.
Dies sollte die Implementierung benutzerdefinierter Tastaturkürzel in Ihrer Electron-App über Maschinen und Konfigurationen hinweg genauer und konsistenter machen.
window.addEventListener('keydown', function (event) {
console.log(`${event.code} wurde gedrückt.`);
});
Schauen Sie sich dieses Beispiel an, um es in Aktion zu sehen.
Promise Rejection Events
Chrome 49 hat zwei neue window Events hinzugefügt, die es Ihnen erlauben, benachrichtigt zu werden, wenn eine abgelehnte Promise nicht verarbeitet wird.
window.addEventListener('unhandledrejection', function (event) {
console.log('A rejected promise was unhandled', event.promise, event.reason);
});
window.addEventListener('rejectionhandled', function (event) {
console.log('A rejected promise was handled', event.promise, event.reason);
});
Schauen Sie sich dieses Beispiel an, um es in Aktion zu sehen.
ES2015 Updates in V8
Die Version von V8 jetzt in Electron beinhaltet 91% von ES2015. Hier sind ein paar interessante Ergänzungen, die Sie out of the Box verwenden können – ohne Flags oder pre-compilers:
Standardparameter
function multiply(x, y = 1) {
return x * y;
}
multiply(5);
Destructuring assignment
Mit Chrome 49 wurde die destructuring assignment hinzugefügt, um die Zuweisung von Variablen und Funktionsparametern zu vereinfachen.
Dies macht Electron sauberer und kompakter, um es jetzt zuzuweisen:
Browser Process Requires
const { app, BrowserWindow, Menu } = require('electron');
Renderer Process Requires
const { dialog, Tray } = require('electron').remote;
Andere Beispiele
const [first, , last] = findAll();
function whois({ displayName: displayName, fullName: { firstName: name } }) {
console.log(`${displayName} is ${name}`);
}
let user = {
displayName: 'jdoe',
fullName: {
firstName: 'John',
lastName: 'Doe',
},
};
whois(user);
let { name, avatar } = getUser();
Neue Electron-APIs
Einige der neuen Electron-APIs sind unten, Sie können jede neue API in den Versionshinweisen für Electron Releases sehen.
show und hide Events auf BrowserWindow
Diese Ereignisse werden emittiert, wenn das Fenster entweder angezeigt oder ausgeblendet wird.
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
console.log('Fenster wurde angezeigt');
});
window.on('hide', function () {
console.log('Fenster wurde versteckt');
});
Dieses Event wird emittiert, wenn der Dunkle Modus des Systems aktiviert ist.
const { app } = require('electron');
app.on('platform-theme-changed', function () {
console.log(`Plattform Thema geändert. Im dunklen Modus? ${app.isDarkMode()}`);
});
app.isDarkMode() für OS X
Diese Methode gibt true zurück, wenn sich das System im Dunklen Modus befindet, andernfalls false.
Diese Ereignisse werden emittiert, wenn die scroll wheel event Phase begonnen hat oder beendet ist.
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
console.log('Scroll touch gestartet');
});
window.on('scroll-touch-end', function () {
console.log('Scroll touch geendet');
});
