Refactor to avoid barrel files

[lilouartz]

Looks like at some point a barrel file was introduced.

export * as Accordion from './accordion';
export * as Alert from './alert';
export * as Avatar from './avatar';
export { Badge, type BadgeProps } from './badge';
export { Button, type ButtonProps } from './button';
export * as Card from './card';
export * as Carousel from './carousel';
export * as Checkbox from './checkbox';
export * as Clipboard from './clipboard';
export { Code, type CodeProps } from './code';
export * as Collapsible from './collapsible';
export * as ColorPicker from './color-picker';
export * as Combobox from './combobox';
export * as Dialog from './dialog';
export * as Drawer from './drawer';
export * as Editable from './editable';
export * as Field from './field';
export * as FileUpload from './file-upload';
export { FormLabel, type FormLabelProps } from './form-label';
export { Heading, type HeadingProps } from './heading';
export * as HoverCard from './hover-card';
export { IconButton, type IconButtonProps } from './icon-button';
export { Input, type InputProps } from './input';
export { Kbd, type KbdProps } from './kbd';
export { Link, type LinkProps } from './link';
export * as Menu from './menu';
export * as NumberInput from './number-input';
export * as Pagination from './pagination';
export * as PinInput from './pin-input';
export * as Popover from './popover';
export * as Progress from './progress';
export * as QrCode from './qr-code';
export * as RadioButtonGroup from './radio-button-group';
export * as RadioGroup from './radio-group';
export * as RatingGroup from './rating-group';
export * as SegmentGroup from './segment-group';
export * as Select from './select';
export * as SignaturePad from './signature-pad';
export { Skeleton, type SkeletonProps } from './skeleton';
export * as Slider from './slider';
export { Spinner, type SpinnerProps } from './spinner';
export * as Splitter from './splitter';
export * as Switch from './switch';
export * as Table from './table';
export * as Tabs from './tabs';
export * as TagsInput from './tags-input';
export { Text, type TextProps } from './text';
export { Textarea, type TextareaProps } from './textarea';
export * as Toast from './toast';
export * as ToggleGroup from './toggle-group';
export * as Tooltip from './tooltip';
export * as TreeView from './tree-view';

This is causing a whole host of problems tree shaking the bundle and also the build times have substantially increased.

Normally, I would just make sure that the file is not referenced anywhere in my codebase (or just delete it). But the problem is that the barrel file is also referenced within the component library.

I ended up rewriting all references in the generated code, e.g. avatar.tsx:

- import { Avatar as ArkAvatar } from '#app/components/ui/primitives/avatar';
+ import * as ArkAvatar from '#app/components/ui/primitives/avatar';

However, I would greatly appreciate if you consider dropping this pattern.

[lilouartz]

Ended up writing a post generation script to fix this.

[cschroeter]

@lilouartz

This is an interesting topic. I understand that there are some downsides to using asterisk exports like:

export * from './avatar'

Since the compiler/transpiler needs to resolve each export individually. However, I thought this kind of import should be fine as the compiler knows what it resolves:

import * as Avatar from '~/components/ui/avatar'

We use this approach to abstract away whether the user should use * as or a normal import syntax:

import * as Avatar from '~/components/ui/avatar'
// or
import { Avatar } from '~/components/ui/avatar'

Could you provide some numbers to verify your claim about tree shaking and bundle size?

[lilouartz]

@cschroeter wow, this latest update is great! Thank you so much ❤️