chore(typescript): Unify ES2020 target and TypeScript 5.9.2 across monorepo

[caseyisonit]

Description

This PR standardizes the TypeScript configuration across the entire monorepo by:

1. Upgrading TypeScript from 5.3.3 to 5.9.2 across all workspaces
2. Unifying the compilation target to ES2020 (from mixed ES2018/ES2022 targets)
3. Creating a shared base configuration (tsconfig.base.json) to eliminate duplication
4. Refactoring workspace configs to extend the base with only workspace-specific overrides
5. Adding comprehensive documentation explaining the TypeScript configuration strategy

Key changes

TypeScript version alignment:

• Updated typescript dependency to 5.9.2 in:
  • 1st-gen/package.json
  • 1st-gen/projects/css-custom-vars-viewer/package.json
  • 1st-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.js
  • 2nd-gen/packages/swc/vite.config.ts

New base configuration:

• Created tsconfig.base.json with shared settings:
  • target: "ES2020" and lib: ["ES2020", "DOM", "DOM.Iterable"]
  • Strict type checking rules
  • Common compiler options (decorators, source maps, etc.)

Refactored workspace configs:

• 1st-gen/tsconfig.json now extends base, only specifies Node resolution
• 2nd-gen/tsconfig.json now 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.md and CONTRIBUTOR-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

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• 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, or major features
• 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

  1. Run yarn workspace @spectrum-web-components/1st-gen build:clear-cache
  2. Run yarn build:1st-gen
  3. Expect no TypeScript errors and successful build output

• Verify 2nd-gen build succeeds

  1. Run yarn build:2nd-gen
  2. Expect no TypeScript errors and successful Vite build

• Verify cross-generation imports work

  1. Build entire monorepo with yarn build
  2. Check that 1st-gen components can import from 2nd-gen core
  3. Expect no module resolution errors

• Verify example projects build

  1. Navigate to 1st-gen/projects/example-project-rollup
  2. Run yarn build
  3. Expect successful build with no TypeScript errors

• Verify test suite passes

  1. Run yarn test
  2. Expect all tests to pass with no new failures

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 90dbf25

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

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 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.