architecture.md

LWC Signals Architecture

This document explains the internal architecture and concepts of LWC Signals.

Signals Flow

A simple reactive system:

graph LR
    S[Signal] -->|notifies| Sub[Subscribers]
    Sub -->|runs| E[Effects]
    E -->|subscribes to| S
    
    CS[Computed Signal] -->|notifies| Sub
    E -->|subscribes to| CS

    style S fill:#4a9eff,color:#ffffff
    style CS fill:#ff6b6b,color:#ffffff
    style E fill:#4ecb71,color:#ffffff
    style Sub fill:#ddd,color:#333

Loading

• Signals & Computed: Notify subscribers when values change
• Effects: Subscribe to signals and run when changes occur

LWC Integration

WithSignals makes components reactive by tracking dependencies during render:

graph TB
    W[WithSignals] -->|creates| E[Internal Effect]
    R[render] -->|starts| Cap[Capture Dependencies]
    R -->|reads| TS[__updateTimestamp]
    Cap -->|tracks| S[Signals]
    Cap -->|tracks| TS
    S -->|changes| E
    E -->|updates| TS
    TS -->|triggers| Rerender[Component Re-render]
    
    style W fill:#ff6b6b,color:#ffffff
    style E fill:#4ecb71,color:#ffffff
    style S fill:#4a9eff,color:#ffffff
    style TS fill:#ffa94d,color:#ffffff
    style Cap fill:#9775fa,color:#ffffff
    style R fill:#868e96,color:#ffffff
    style Rerender fill:#868e96,color:#ffffff

Loading

• WithSignals: Uses an internal effect to track signal dependencies
• Render Process:
  • Captures which signals are used
  • Reads internal __updateTimestamp property
  • __updateTimestamp becomes a dependency
• Updates: Changes to signals trigger timestamp update, causing re-render