Destructuring the imports statement

Question

In the React project I found this piece of code, which is pretty much standard:

import React from 'react';

import {
    ImageLeft,
    ImageRight,
    ImageBottom,
    ImageBanner    
} from './content';

const LAYOUT_COMPONENT = {   
    image_left: ImageLeft,
    image_right: ImageRight,
    image_bottom: ImageBottom,
    image_banner: ImageBanner    
};

LAYOUT_COMPONENT object has repetitions. Is it possible somehow to create it with destructuring from import statement, in order to avoid extra code?

Answer 1

No, there is no destructuring in import statements .

What you could do is

import * as contents from './content';

const LAYOUT_COMPONENT = {};
for (let p of ["Left", "Right", "Bottom", "Banner"])
    LAYOUT_COMPONENT["image_"+p.toLowerCase()] = contents["Image"+p];
}

but notice this will prevent a module bundler from tree shaking.