chore(typescript): Unify ES2020 target and TypeScript 5.9.2 across monorepo
Description
This PR standardizes the TypeScript configuration across the entire monorepo by:
- Upgrading TypeScript from 5.3.3 to 5.9.2 across all workspaces
- Unifying the compilation target to ES2020 (from mixed ES2018/ES2022 targets)
- Creating a shared base configuration (
tsconfig.base.json) to eliminate duplication - Refactoring workspace configs to extend the base with only workspace-specific overrides
- Adding comprehensive documentation explaining the TypeScript configuration strategy
Key changes
TypeScript version alignment:
- Updated
typescriptdependency to5.9.2in:1st-gen/package.json1st-gen/projects/css-custom-vars-viewer/package.json1st-gen/projects/example-project-rollup/package.json
Unified ES2020 target:
- Changed build targets from ES2018/ES2022 to ES2020 in:
1st-gen/scripts/ts-tools.js(esbuild target)2nd-gen/packages/core/vite.config.js2nd-gen/packages/swc/vite.config.ts
New base configuration:
- Created
tsconfig.base.jsonwith shared settings:target: "ES2020"andlib: ["ES2020", "DOM", "DOM.Iterable"]- Strict type checking rules
- Common compiler options (decorators, source maps, etc.)
Refactored workspace configs:
1st-gen/tsconfig.jsonnow extends base, only specifies Node resolution2nd-gen/tsconfig.jsonnow extends base, only specifies bundler resolution- Significantly reduced config duplication (removed ~20 duplicated lines per config)
Documentation:
- Added
CONTRIBUTOR-DOCS/01_contributor-guides/10_typescript-configuration.md - Updated navigation in
CONTRIBUTOR-DOCS/README.mdandCONTRIBUTOR-DOCS/01_contributor-guides/README.md - Documents ES2020 rationale, browser support, configuration hierarchy, and upgrade procedures
Motivation and context
The monorepo previously had inconsistent TypeScript targets (ES2018 in 1st-gen, ES2022 in 2nd-gen) and duplicated configuration across workspaces. This made it difficult to:
- Understand what JavaScript features are safe to use
- Update TypeScript versions consistently
- Maintain alignment between build tools
ES2020 was chosen because:
- All target browsers (Chrome 80+, Firefox 74+, Safari 13.1+, Edge 80+) support it
- The codebase already uses ES2020 features extensively (optional chaining, nullish coalescing)
- It provides modern features without polyfills, resulting in smaller bundles
- It's compatible with the Node.js 20.19.0 runtime requirement
Related issue(s)
No associated GitHub issue or Jira ticket. This is a proactive refactoring to improve maintainability and developer experience.
Screenshots (if appropriate)
N/A - Configuration changes only
Author's checklist
- [x] I have read the CONTRIBUTING and PULL_REQUESTS documents.
- [x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
- [x] I have added automated tests to cover my changes.
- [x] I have included a well-written changeset if my change needs to be published.
- [x] I have included updated documentation if my change required it.
Reviewer's checklist
- [ ] Includes a GitHub issue with appropriate flag or Jira ticket number without a link
- [ ] Includes thoughtfully written changeset if changes suggested include
patch,minor, ormajorfeatures - [ ] Automated tests cover all use cases and follow best practices for writing
- [ ] Validated on all supported browsers
- [ ] All VRTs are approved before the author can update Golden Hash
Manual review test cases
-
[ ] Verify 1st-gen build succeeds
- Run
yarn workspace @spectrum-web-components/1st-gen build:clear-cache - Run
yarn build:1st-gen - Expect no TypeScript errors and successful build output
- Run
-
[ ] Verify 2nd-gen build succeeds
- Run
yarn build:2nd-gen - Expect no TypeScript errors and successful Vite build
- Run
-
[ ] Verify cross-generation imports work
- Build entire monorepo with
yarn build - Check that 1st-gen components can import from 2nd-gen core
- Expect no module resolution errors
- Build entire monorepo with
-
[ ] Verify example projects build
- Navigate to
1st-gen/projects/example-project-rollup - Run
yarn build - Expect successful build with no TypeScript errors
- Navigate to
-
[ ] Verify test suite passes
- Run
yarn test - Expect all tests to pass with no new failures
- Run
Device review
- [ ] Did it pass in Desktop?
- [ ] Did it pass in (emulated) Mobile?
- [ ] Did it pass in (emulated) iPad?
⚠️ No Changeset found
Latest commit: 9c8a40547b3e787710cc86468d929bbe163eb4b4
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
📚 Branch Preview
🔍 Visual Regression Test Results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- Spectrum | Light | Medium | LTR
- Spectrum | Dark | Large | RTL
- Express | Light | Medium | LTR
- Express | Dark | Large | RTL
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Dark | Large | RTL
- High Contrast Mode | Medium | LTR
Deployed to Azure Blob Storage: pr-5871
If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
📚 Branch Preview Links
🔍 First Generation Visual Regression Test Results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- Spectrum | Light | Medium | LTR
- Spectrum | Dark | Large | RTL
- Express | Light | Medium | LTR
- Express | Dark | Large | RTL
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Dark | Large | RTL
- High Contrast Mode | Medium | LTR
Deployed to Azure Blob Storage: pr-5871
If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.