What's new in Electron 0.37
Electron 0.37 was recently released and included a major upgrade from Chrome 47 to Chrome 49 and also several new core APIs. This latest release brings in all the new features shipped in Chrome 48 and Chrome 49. This includes CSS custom properties, increased ES6 support, KeyboardEvent improvements, Promise improvements, and many other new features now available in your Electron app.
What's New
CSS Custom Properties
If you've used preprocessed languages like Sass and Less, you're probably familiar with variables, which allow you to define reusable values for things like color schemes and layouts. Variables help keep your stylesheets DRY and more maintainable.
CSS custom properties are similar to preprocessed variables in that they are reusable, but they also have a unique quality that makes them even more powerful and flexible: they can be manipulated with JavaScript. 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.
For more info on CSS custom properties, see the MDN article and the Google Chrome demo.
CSS Variables In Action
Let's walk through a simple variable example that can be tweaked live in your app.
:root {
--awesome-color: #a5ecfa;
}
body {
background-color: var(--awesome-color);
}
The variable value can be retrieved and changed directly in JavaScript:
// Get the variable value ' #A5ECFA'
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');
// Set the variable value to 'orange'
document.body.style.setProperty('--awesome-color', 'orange');
The variable values can be also edited from the Styles section of the development tools for quick feedback and tweaks:
KeyboardEvent.code Property
Chrome 48 added the new code property available on KeyboardEvent events that will be the physical key pressed independent of the operating system keyboard layout.
This should make implementing custom keyboard shortcuts in your Electron app more accurate and consistent across machines and configurations.
window.addEventListener('keydown', function (event) {
console.log(`${event.code} was pressed.`);
});
Check out this example to see it in action.
Promise Rejection Events
Chrome 49 added two new window events that allow you to be notified when an rejected Promise goes unhandled.
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);
});
Check out this example to see it in action.
ES2015 Updates in V8
The version of V8 now in Electron incorporates 91% of ES2015. Here are a few interesting additions you can use out of the box—without flags or pre-compilers:
Default parameters
function multiply(x, y = 1) {
return x * y;
}
multiply(5); // 5
Деструктирующее присваивание
Chrome 49 added destructuring assignment to make assigning variables and function parameters much easier.
This makes Electron requires cleaner and more compact to assign now:
Browser Process Requires
const { app, BrowserWindow, Menu } = require('electron');
Renderer Process Requires
const { dialog, Tray } = require('electron').remote;
Other Examples
// Destructuring an array and skipping the second element
const [first, , last] = findAll();
// Destructuring function parameters
function whois({ displayName: displayName, fullName: { firstName: name } }) {
console.log(`${displayName} is ${name}`);
}
let user = {
displayName: 'jdoe',
fullName: {
firstName: 'John',
lastName: 'Doe',
},
};
whois(user); // "jdoe is John"
// Destructuring an object
let { name, avatar } = getUser();
Новые API Electron
Ниже приведены некоторые из новых API Electron, а также вы можете ознакомиться с каждым новым API в примечаниях к релизам Electron releases.
События show и hide для BrowserWindow
Эти события происходят, когда окно показывается или скрывается.
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
console.log('Окно было отображено');
});
window.on('hide', function () {
console.log('Окно было скрыто');
});
platform-theme-changed на app для OS X
Это событие возникает, когда переключается системная тема Dark Mode.
const { app } = require('electron');
app.on('platform-theme-changed', function () {
console.log(`Тема платформы изменена. Тёмный режим? ${app.isDarkMode()}`);
});
app.isDarkMode() для OS X
Этот метод возвращает true, если система находится в темном режиме, и false в противном случае.
События scroll-touch-begin и scroll-touch-end в BrowserWindow для OS X
Эти события возникают, когда начинается или заканчивается фаза событий при прокрутке.
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
console.log('Прокрутка касанием началась');
});
window.on('scroll-touch-end', function () {
console.log(''Прокрутка касанием закончилась'');
});
