Discuss
  • [Proposal] Limited namespace imports

[Proposal] Limited namespace imports

# N. Oxer (6 years ago)

This is best introduced in a possible syntax:

import { A, B, C } as d from "module";

Essentially, it would allow for some form of importing only some exports into a namespace. This would not affect the browser or environments like node, but it would be a boon for module bundlers, such as webpack, rollup, parcel, etc. It would allow you to specifically define which imports you want, and the rest to be tree-shaken, and without any quirks of trying to guess which imports from a

import * as d from "module";

are used.

It also would prevent the scope from getting cluttered. An example of where this would be undesirable/annoying is the @material-ui/icons package on npm. It exports many different icons, and an example of using them might be as such:

import {
  Wifi,
  Accessibility,
  Add,
  Save,
  Search
} from "@material-ui/icons";
import SearchBar from "./search";
// use them in some way
export default () => (
  <>
    <SearchBar />
    <Wifi />
    <Accessibility />
    <Add />
    <Save />
    <Search />
  </>
)

Alternatively, you could just import them * as icons, but then that imports all of them and inflates the bundle size.

If this proposal were to be implemented, you could do something like

import {
  Wifi,
  Accessibility,
  Add,
  Save,
  Search
} as icons from "@material-ui/icons";
import Search from "./search";
// use them in some way
export default () => (
  <>
    <Search />
    <icons.Wifi />
    <icons.Accessibility />
    <icons.Add />
    <icons.Save />
    <icons.Search />
  </>
)

and avoid the downsides.

This would also work for a library like lodash. It currently has ~320 utility functions, looking through their documentation, so importing * as _ would conflate the bundle immensely. With this proposal, issues like that would be much less prevalent.

# N. Oxer (6 years ago)

Nevermind, I was looking back through the mailing list and found this.