How to shorthand importing of an object in ES6?

Question

In ES6 javascript I have the following:

import CommonModule from '../../common';
const { Link } = CommonModule.components;

Is there any way to turn this into a 1-liner?

Answer 1

There is no nested desturcturing in ES6 that I know of. You could do something like:

import { components as C } from '../../common';

// then later

<C.Link>foobar</C.Link>

Answer 2

Assuming '../../common' returns a structure along the lines of:

CommonModule = {
  components: {
    Link: {...}
    ...
  }
  ...
}

And you would like to dereference CommonModule.components.Link directly then it's not possible to do so in a one-liner using that syntax.

There is currently no way to dereference deeply nested properties in a single line via the import statement, as the syntax only allows for direct children of the module to be dereferenced.

If you are able to use require instead, then you may use:

const Link = require('../../common').components.Link;

If you would like to keep a reference to CommonModule as well within a one-liner, then you may use:

const {components:{Link}} = CommonModule = require('../../common');

But at this point you're getting to where brevity leads to confusion. What you have in two lines is perfectly understandable, and brief. Less code is not always better.

Answer 3

You can create index.js file inside common folder and add below code

import Link from './Link';
module.exports = {
  Link: Link
}

(Note:- I don't know exactly Link file path relative to common folder)

Then you can import Link using

import {Link} from '../../common';