base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[core] Improve DX of importing Base UI components

Open michaldudak opened this issue 1 year ago • 3 comments

Changed how components are exported. Previously we had two index files: index.ts containing unprefixed component names (such as Root, Input, Indicator) and index.barrel.ts with full names (SwitchRoot, CheckboxIndicator). The former was supposed to be used as import * as Foo from '@base_ui/react/Foo, while the latter import { FooRoot } from '@base_ui/react'.

Now we still have two index files per component, but only index.ts is meant to be imported. index.parts.ts aggregates and exports all parts of a component, while index.ts reexports them and names the exported namespace.

This makes all component parts accessible only through the component namespace:

import { Checkbox } from '@base_ui/react/Checkbox'; // or '@base_ui/react'
const CheckboxRoot = Checkbox.Root;

Closes #650

michaldudak avatar Oct 02 '24 06:10 michaldudak

Netlify deploy preview

https://deploy-preview-700--base-ui.netlify.app/

Generated by :no_entry_sign: dangerJS against 256ec7a735abbb8f1c887d97ccde446920b13d2e

mui-bot avatar Oct 02 '24 06:10 mui-bot

This still works with tree-shaking if you test a minimal Vite repo and build for production?

atomiks avatar Oct 09 '24 02:10 atomiks

Yes, the resulting bundle does not contain the code of unused parts.

michaldudak avatar Oct 09 '24 09:10 michaldudak