Web components: TypeScript conversion and build improvements

[ethangardner]

Summary

Converted core component files to TypeScript, implemented automatic type definition generation, and refined the build configuration for better Lit dependency handling. Also, a minor style improvement was made to the banner component's language text alignment.

Closes #221

Closes #222

Preview link: N/A

Problem Statement

The project aimed to enhance code quality and maintainability through TypeScript adoption, provide accurate type definitions for library consumers, and establish a robust build process compatible with modern JavaScript modules and Lit dependencies. However, several core component files were still in JavaScript, leading to a lack of type safety. Additionally, type definitions were not automatically generated, and the existing Vite build configuration encountered issues with Lit dependencies in certain environments. The banner component also exhibited an inconsistent default text alignment for its language display.

These issues impacted internal development efficiency, external consumer experience due to missing type information, and introduced potential build instability, alongside a minor visual inconsistency.

Solution Summary

This pull request addresses the identified problems by:

1. Migrating to TypeScript: Converted src/components/index.js, src/components/usa-link/index.js, and src/components/usa-link/usa-link.spec.js to their respective .ts counterparts. This enhances type safety and developer experience.
2. Automated Type Definition Generation: Integrated vite-plugin-dts into config/vite.config.ts. This plugin automates the creation of .d.ts files during the build process, ensuring that consumers of the library have access to accurate type information.
3. Refined Build Configuration for Lit: Updated the rollupOptions.external property in config/vite.config.ts to use a more robust regular expression (/^@?lit(-\w+)?($|\/.+)/). This change specifically resolves known issues related to Lit dependencies within Vite environments, ensuring they are correctly handled as external modules.
4. Improved Banner Text Alignment: Added text-align: start; to the .usa-banner__language selector in src/components/usa-banner/usa-banner.css. This provides a consistent and accessible default text alignment for the banner's language display.

These changes collectively improve the project's maintainability, developer experience, build reliability, and consistency.

Recommended methods for reviewing this change

1. Build Verification: Run npm run build to ensure the project builds successfully and verify that .d.ts files are generated in the dist directory.
2. Component Functionality: Test the usa-link component to confirm it functions as expected after the TypeScript conversion.
3. Visual Confirmation: Inspect the usa-banner component in a browser (e.g., via Storybook) to visually confirm that the language text is aligned to the start.
4. Configuration Review: Examine config/vite.config.ts to review the integration of vite-plugin-dts and the updated rollupOptions for external dependencies and output format.
5. Type Check: Run tsc --noEmit to ensure there are no new TypeScript errors introduced by the changes.

Dependency name	Previous version	New version
vite-plugin-dts	--	4.5.4

[changeset-bot]

🦋 Changeset detected

Latest commit: 8259a19

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@uswds/elements	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR