[feat] Allow developers to import individual components without tree shaking

[Brenden-Smith]

Does your feature request relate to a specific USWDS component?

No

What USWDS Version is this feature present in?

Not applicable

Is your feature request related to a problem? Please describe.

When you import one component from the library through tree shaking, it seems to import the entire library under the hood. Currently, the individual components don't seem to be exposed to the developer, and tree shaking is the only method of import. This is a problem when working with frameworks where bundle size is of importance, such as Next JS. See below examples:

page1

// page1

import { Button } from "@trussworks/react-uswds";
...

page2

// page2

import {
  Button,
  Banner,
  TextInput,
  Form,
  DatePicker,
  Modal,
  Icon,
} from "@trussworks/react-uswds";
...

Build output

As you can see, the bundle sizes for page1 and page2 are the same. This implies that importing one component imports the whole library. While this example was with a fresh app with nothing else in it, on a full project, that amount makes a big difference.

Describe the solution you'd like

Expose the ability to import one component from a specific file. Such as:

// Current
import { Button, TextInput } from "@trussworks/react-uswds";

// Single file
import Button from "@trussworks/react-uswds/components/Button";
import TextInput from "@trussworks/react-uswds/components/TextInput";

This would reduce the bundle size by only importing the components and code necessary.

Describe alternatives you've considered

The only other alternative is to manually implement USWDS components in my project and allow imports this way, but that would be counter to the idea of this library.

Additional context

If this is already possible, and I just missed it, let me know. Thanks!

[sawyerh]

Related:

• [feat] Investigate pkg.module and bundler tools for better module support & tree shaking #192
• [fix] Using react-uswds results in extremely large client bundles because tree shaking does not remove unused icons #1913