Aller au contenu principal

Quoi de neuf dans Electron

· 4 mins à lire

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

Propriétés personnalisées CSS

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. Cette fonctionnalité subtile mais puissante permet des changements dynamiques aux interfaces visuelles tout en profitant de l'accélération matérielle du CSS, et réduit la duplication de code entre votre code frontend et vos feuilles de style.

Pour plus d'informations sur les propriétés personnalisées CSS, voir l'article MDN et la démo Google Chrome.

Variables CSS en action

Voyons un exemple de variable simple qui peut être ajusté en direct dans votre application.

:root {
--awesome-color: #A5ECFA;
}

body {
background-color: var(--awesome-color);
}

La valeur de la variable peut être récupérée et modifiée directement en JavaScript :

// Récupère la valeur de la variable '#A5ECFA'
let color = window.getComputedStyle(document.body).getPropertyValue('--awesome-color')

// Définit la valeur de la variable à 'orange'
document.body.style.setProperty('--awesome-color', 'orange')

Les valeurs de la variable peuvent également être modifiées à partir de la section Styles des outils de développement pour un feedback rapide et des ajustements :

Propriétés CSS dans l'onglet Styles{: .screenshot }

Propriété KeyboardEvent.code

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.`)
})

Consultez cet exemple pour le voir en 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('Une promesse rejetée n'a pas été gérée', event.promise, event.reason)
})

window.addEventListener('rejectionhandled', function (événement) {
console.log('Une promesse rejetée a été gérée', event.promise, event.reason)
})

Consultez cet exemple pour le voir en action.

Mises à jour ES2015 en V8

La version de V8 maintenant dans Electron incorpore 91 % de ES2015. Voici quelques ajouts intéressants que vous pouvez utiliser sans options ni pré-compilateurs :

Paramètres par défaut

function multiply(x, y = 1) {
return x * y
}

multiply(5) // 5

Affectation par décomposition

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
Autres exemples
// 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()

Nouvelles API Electron

A few of the new Electron APIs are below, you can see each new API in the release notes for Electron releases.

show and hide events on BrowserWindow

These events are emitted when the window is either shown or hidden.

const {BrowserWindow} = require('electron')

let window = new BrowserWindow({width: 500, height: 500})
window.on('show', function () { console.log('Window was shown') })
window.on('hide', function () { console.log('Window was hidden') })

platform-theme-changed on app for OS X

This event is emitted when the system’s Dark Mode theme is toggled.

const {app} = require('electron')

app.on('platform-theme-changed', function () {
console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`)
})

app.isDarkMode() pour OS X

Cette méthode retourne true si le système est en Mode Sombre, ou false autrement.

scroll-touch-begin and scroll-touch-end events to BrowserWindow for OS X

These events are emitted when the scroll wheel event phase has begun or has ended.

const {BrowserWindow} = require('electron')

let window = new BrowserWindow({width: 500, height: 500})
window.on('scroll-touch-begin', function () { console.log('Scroll touch started') })
window.on('scroll-touch-end', function () { console.log('Scroll touch ended') })