Use `create-index`

Add https://github.com/gajus/create-index and autogenerate index.js files for each component folder.

---

@bpierre and I were also discussing what we should do when we need to use “internal” components in more than one place. One idea would be to allow named exports (i.e. export { ... }) from a component so that internal components could access them, but then to not export them to consumers by only re-exporting the default export from each component.

An example, for better clarity:

// in component.js
const InternalComponent = {}
const Component = {} // requires InternalComponent

export { InternalComponent } // this export would be accessible to components inside the library, in case they wanted to restyle it slightly or reuse it
export default Component // this export would be the only component available to outside consumers of the library

// in index.js
export { default as Component } from "component.js"

[onbjerg]

No 😊

[bpierre]

Agree, we could also only generate the file src/components/index.js, and keep src/index.js as a non-generated file to have some control over it:

// src/components/index.js

// DO NOT EDIT: file generated by “npm run update-index”; any edit will be lost.
export { default as ComponentA } from "./ComponentA"
export { default as ComponentB } from "./ComponentB"

// src/index.js
export * from './components'
export { something, somethingElse } from './some-module'
export { anotherThing } from './another-module'

Also, if we strictly follow the rule of one default export per component, we probably don’t even need create-index, we could do something like this instead:

#!/bin/sh
# scripts/update-index.sh

# Generates components/index.js and components/*/index.js files.

ls -d src/components/*/ \
  | xargs basename \
  | awk '{
      print "export * from \"./"$1"\"\nexport default from \"./"$1"\"" > "src/components/"$1"/index.js"
      print "export { default as "$1" } from \"./"$1"\""
    }' \
  > src/components/index.js