Downshift: Break up components into seperate files

[souporserious]

If you think this is a good idea, I'll work on a PR.

[kentcdodds]

I've thought about it. Open a PR and we'll see what it looks like. Thanks!

[souporserious]

Working on this first 😁 I think it will help with other updates moving forward.

[erikfox]

+1

I think this is always a good idea.

Unless I'm mistaken, this would require importing the full module before destructuring the desired export:

import { SpecificExport } from 'some-package';

whereas this only imports the specific module (if it is available as a unique file):

import SpecificExport from 'package/SpecificExport';

As the library grows, this could help users to not bloat their bundle sizes.

(Basing above knowledge on having read it a few times: https://hackernoon.com/optimising-your-application-bundle-size-with-webpack-e85b00bab579. Not 100% sure of actually under-the-hood process.)

[souporserious]

This only exports one component for right now, but after this is done, it could open up the possibility of using components like Menu and Item regardless of the Autocomplete component.

[kentcdodds]

Thanks for the input @erikfox.

As the library grows, this could help users to not bloat their bundle sizes.

I really don't expect the library to grow much more than it is currently. Maybe only in ways that are desireable (like for accessibility). I don't think that you'd ever want to just import _some_ of the components and not others, so that's not something that we'll be working on.

[erikfox]

@souporserious What about using Autocomplete without Menu or Item? I think every component should have its own file, and index.js should be nothing but this:

import Autocomplete from './Autocomplete'
import Menu from './Menu'
import Item from './Item'
// ...etc

module.exports = {
  Autocomplete,
  Menu,
  Item,
  // ...etc
}

// or export default with other exports

[erikfox]

@kentcdodds Understood. 👍 I'm behind sticking to that intended use case. Just wanted to raise the option if it hadn't been previously considered.

[kentcdodds]

Thanks. I've considered making each component individually importable, but I personally prefer referencing things as Autocomplete.Menu rather than simply Menu... But open to enabling the individual import as well..

[erikfox]

For the size of the package it's probably not a priority or performance-relevant.

Have mostly noticed the pattern in much larger utility-kit packages, like d3 or lodash.

[souporserious]

Done with https://github.com/kentcdodds/react-autocompletely/pull/22 🎉