Equivalent of requiring a subproperty in ES6 impor

Question

I have an existing require:

const {dialog} = require('electron').remote;

I started using Babel for ES6, and would like to import this instead. So far I have:

import electron from 'electron';
const {dialog} = electron.remote;

This is ugly, and I can't help but feel there is a better way to do this. I just need the dialog here. How do I get at it in one line?

Answer 1

ECMAScript module syntax doesn't allow deep destructuring. In fact it doesn't destructure at all. Import statements create live bindings between modules.

Here is great blog post written by Ben Nadel. It should shed some light on bindings: http://www.bennadel.com/blog/3131-the-import-statement-creates-a-live-view-of-modules-in-es6-and-typescript-in-angular-2.htm

So by doing

import electron from 'electron';
const {dialog} = electron.remote;

electron is such binding. By doing destructuring assignment dialog is normal constant and it won't be "bound" to electron module (it won't update).

Answer 2

There is nothing 'ugly', it is how the things should be written in ES6.

imports are supposed to be statically analyzed without script evaluation, supported syntax is limited. Default import can't be destructured in import statement, all varieties of syntax are listed in the reference.

It can be written as

import electron from 'electron';
const { remote: { dialog } } = electron;