Avoid barrel files

[david-crespo]

Barrel files are bad for Vite dev server performance (and probably bad for code splitting too if we were doing more of it — and we intend to). We should get rid of them, starting with the biggest ones. It should be a noisy but very mechanical change. I think this also means getting rid of @oxide/ui and friends in favor of normal direct imports from, e.g., ~/libs/ui/... or whatever.

https://vitejs.dev/guide/performance.html#avoid-barrel-files

Avoid Barrel Files

Barrel files are files that re-export the APIs of other files in the same directory. For example:
js

// src/utils/index.js
export * from './color.js'
export * from './dom.js'
export * from './slash.js'

When you only import an individual API, e.g. import { slash } from './utils', all the files in that barrel file need to be fetched and transformed as they may contain the slash API and may also contain side-effects that run on initialization. This means you're loading more files than required on the initial page load, resulting in a slower page load.

If possible, you should avoid barrel files and import the individual APIs directly, e.g. import { slash } from './utils/slash.js'. You can read issue #8237 for more information.

---

We have numerous examples, some worse than others.

console/app/pages/project/index.tsx

Lines 9 to 14 in 5d989a7

	export * from './access'
	export * from './disks'
	export * from './images'
	export * from './instances'
	export * from './networking'
	export * from './snapshots'

I think this means that from Vite's point of view, any file that imports any UI component depends on every UI component.

console/libs/ui/index.ts

Lines 15 to 55 in 5d989a7

	export * from './lib/action-menu/ActionMenu'
	export * from './lib/auth-code/AuthCodeInput'
	export * from './lib/badge/Badge'
	export * from './lib/button/Button'
	export * from './lib/checkbox/Checkbox'
	export * from './lib/copy-to-clipboard/CopyToClipboard'
	export * from './lib/date-picker/DateRangePicker'
	export * from './lib/divider/Divider'
	export * from './lib/dropdown-menu/DropdownMenu'
	export * from './lib/file-input/FileInput'
	export * from './lib/empty-message/EmptyMessage'
	export * from './lib/field-label/FieldLabel'
	export * from './lib/identicon/Identicon'
	export * from './lib/message/Message'
	export * from './lib/listbox/Listbox'
	export * from './lib/message/Message'
	export * from './lib/modal/Modal'
	export * from './lib/ModalLinks'
	export * as MiniTable from './lib/mini-table/MiniTable'
	export * from './lib/number-input/NumberInput'
	export * from './lib/page-header/PageHeader'
	export * from './lib/pagination/Pagination'
	export * from './lib/progress/Progress'
	export * from './lib/properties-table/PropertiesTable'
	export * from './lib/radio-group/RadioGroup'
	export * from './lib/radio/Radio'
	export * from './lib/resource-meter/ResourceMeter'
	export * from './lib/settings-group/SettingsGroup'
	export * from './lib/side-modal/SideModal'
	export * from './lib/skip-link/SkipLink'
	export * from './lib/spinner/Spinner'
	export * from './lib/table/Table'
	export * from './lib/tabs/Tabs'
	export * from './lib/text-input/TextInput'
	export * from './lib/toast/Toast'
	export * from './lib/tooltip/Tooltip'
	export * from './lib/truncate/Truncate'
	export * from './util/wrap'
	export * from '@oxide/design-system/icons/react'

[david-crespo]

There are a couple more (app/hooks is the one that matters) but we're close enough and are seeing (I think) substantially faster HMR as a result of only having to reload the one changed file instead of nearly all of them. Initial page load doesn't seem faster.