Skip to content

perf: ⚡ Slim down SolidElement base class to reduce bundle size #2971

@AaronWeber90

Description

@AaronWeber90

Current behavior

The SolidElement base class is inherited by all 59 components and includes several features that are only used by a handful of components:

  • dir and lang reactive properties (unused by any component; native HTML attributes still work)
  • token() method and animate.ts import (used by only 3 components: tag, video, audio)
  • onThemeChange lifecycle hook (used by only 2 components: icon, audio)
  • CSS @import for interactive.css, headline.css, paragraph.css (used by ~14 components)

This means every component carries the cost of these features in its bundle, even when unused.

Benefits

  • Significantly reduced bundle size for consumers who import individual components
  • Cleaner separation of concerns — features are opt-in rather than always included
  • Better performance for end users

Technical Information

Removed rarely-used features from the SolidElement base class and moved them to opt-in modules:

  • Removed dir and lang reactive properties
  • Moved token() method and animate.ts import → standalone token() utility in src/internal/token.ts
  • Moved onThemeChange lifecycle hook → self-managed listeners in the 2 consuming components (icon, audio)
  • Moved CSS @import for interactive.css, headline.css, paragraph.css → importable modules in src/internal/shared-styles.ts (only added by the ~14 components that actually use them)
  • Updated Storybook Vite config to process the new shared-styles.ts file with Tailwind

What remains in SolidElement:

  • Tailwind --tw-* CSS variable resets (needed by all components)
  • box-sizing reset and [hidden] rule
  • emit() method (used by 20+ components)

DoR

  • Item has business value
  • Item has been estimated by the team
  • Item is clear and well-defined
  • Item dependencies have been identified

DoD

  • Documentation has been created/updated (if applicable)
  • Migration Guide has been created/updated (if applicable)
  • Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
  • Relevant stories (Features, A11y) are created/updated
  • Implementation works successfully on feature branch

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    📋 Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions