Aller au contenu principal

Quoi de neuf dans Electron 0.37

· 4 mins de lecture
zeke

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.

Quoi de neuf​

Propriétés personnalisées CSS​

Si vous avez utilisé des langages prétraités comme Sass et Less, vous êtes probablement familier avec les variables __, qui vous permettent de définir des valeurs réutilisables pour des choses comme les modèles de couleurs et les mises en page. 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.

For more info on CSS custom properties, see the MDN article and the Google Chrome demo.

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 :

// 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');

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

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('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);
});

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');
});