[v0.9] Fix memory leaks and standardize subscription lifecycle in web_core and react renderers

[jacobsimionato]

This issue tracks critical memory leaks and architectural redundancies identified in the A2UI v0.9 Web, React, and Angular renderers. These issues lead to unbounded memory growth in long-lived surfaces and leaked background processes (e.g., timers) when components are unmounted.

Identified Issues

Core & Shared Logic:

1. Unbounded Signal Cache in DataModel: The DataModel.signals Map caches every path ever queried. These are only cleared when the entire surface is disposed. In surfaces with many ephemeral components or large lists, this leads to significant memory growth.
2. FormatString Recursive Leaks: The formatString implementation in basic_functions.ts resolves internal expressions into signals using context.resolveSignal(part) but never calls unsubscribe on them. Any function call (like ${now()}) inside a string will leak its listeners/timers until the DataModel is disposed.
3. Broken Cleanup Chain in DataContext: resolveSignal in DataContext.ts creates recursive effects for function arguments but does not properly take ownership of unsubscribe methods on signals returned by function implementations.

React Renderer:
4. Redundant Subscription Layers: The React adapter wraps the GenericBinder in additional useSyncExternalStore and useEffect layers. While not a leak, it increases complexity and makes cleanup harder to audit.

Angular Renderer:
5. Root-Scoped Leaks in ComponentBinder: ComponentBinder.ts injects DestroyRef at the root level. All subscriptions created via bind() are tied to the application lifetime rather than the component lifetime, causing massive leaks as users navigate surfaces.
6. Stale Bindings: Angular does not listen to ComponentModel.onUpdated. If component properties change in the protocol (e.g., type remains same but props change), the Angular UI stays stale.

Goals

• Implement reference counting or explicit signal removal in DataModel.
• Ensure all recursive signals created by formatString and function calls are tracked and disposed of via a unified unsubscribe chain.
• Fix the DestroyRef scoping in the Angular renderer.
• Implement property refresh logic in Angular to match the React GenericBinder behavior.
• Add exhaustive regression tests verifying that AbortSignal listeners and internal Maps are cleared after component unmount across all frameworks.

[jacobsimionato]

Coding agent prompt:

Design Document: Fixing Memory Leaks in A2UI Web, React, and Angular Renderers

Objective

Fix three specific categories of memory leaks in the v0.9 TypeScript implementation and standardize the subscription cleanup lifecycle across the Data Layer, React View Layer, and Angular View Layer.

Context References

• @renderers/web_core/src/v0_9/ (Core state logic)
• @renderers/react/src/v0_9/ (React adapter and components)
• @renderers/angular/src/v0_9/ (Angular services and components)
• @specification/v0_9/docs/renderer_guide.md (Architectural standards)

Implementation Strategy

1. DataModel Signal Ref-Counting

The DataModel.signals map currently grows indefinitely.

• Task: Modify DataModel.ts to implement reference counting for cached signals.
• Details:
  • When getSignal(path) is called, increment a counter for that path.
  • Wrap the returned Signal or provide a disposal callback.
  • When the last subscriber to a path's signal calls unsubscribe, remove the signal from the signals Map.
  • Ensure dispose() still clears everything as a fallback.

2. Recursive Cleanup in DataContext

DataContext.resolveSignal creates nested signals and effects that are not always cleaned up.

• Task: Update DataContext.ts to ensure every signal created during recursive resolution is disposed of.
• Details:
  • When resolveSignal creates an internal effect or computed for function arguments, it must ensure those are stopped when the returned signal's unsubscribe is called.
  • If a FunctionImplementation returns a result that has an unsubscribe method (which it should for reactive functions), DataContext must take ownership of that method and call it during its own cleanup phase.

3. FormatString Lifecycle Management

FormatStringImplementation in basic_functions.ts is a major leak source.

• Task: Refactor FormatStringImplementation to return a managed reactive object.
• Details:
  • It currently maps parts to signals via context.resolveSignal(part) but discards the handles.
  • It must return a Signal that, when unsubscribed, iterates through all dynamicParts and calls their respective unsubscribe methods.

4. Angular Renderer: ComponentBinder Scoping

• Task: Fix the DestroyRef leak in ComponentBinder.ts.
• Details:
  • ComponentBinder is a root service that injects the application-level DestroyRef. This causes all property signals to leak for the life of the app.
  • Modify ComponentBinder.bind() to accept a DestroyRef from the calling component.
  • Update ComponentHostComponent.ts to pass its own DestroyRef to the binder.
• Bonus: Refactor Angular to use the core's GenericBinder if possible to unify property update logic.

5. Angular Renderer: Property Refresh

• Task: Implement support for ComponentModel.onUpdated in Angular.
• Details: Ensure that if a component's properties change in an updateComponents message, the Angular UI refreshes its bindings (currently it only binds once in OnInit).

6. Component Replacement Audit

• Task: Ensure MessageProcessor.ts correctly disposes of old ComponentModel instances during type-change updates.

Testing Requirements

You MUST create a new test suite @renderers/web_core/src/v0_9/test/memory_leak.test.ts that includes:

1. Map Size Assertion: A test that adds a dynamic path, subscribes to it, unsubscribes, and asserts that DataModel['signals'].size returns to its initial state.
2. AbortSignal Verification: Create a mock function metronome(interval) that attaches a listener to the provided AbortSignal. Call this function inside a formatString (e.g., ${metronome(10)}). Mount/Unmount the component and verify the AbortSignal is triggered.
3. Recursive Depth Test: A test with nested function calls ${a(arg:${b()})} verifying that b()'s cleanup is called when the top-level string subscription is disposed.
4. Angular Scoping Test: Create an Angular test verifying that toAngularSignal calls unsubscribe on the Preact signal when the component's DestroyRef fires.

Edge Cases to Handle

• Shared Signals: Multiple components subscribing to the same path /user/name should share a signal; it should only be evicted from the map when all components unmount.
• Rapid Updates: Ensure no race conditions between updateComponents and unmounting.
• Sync vs Async: EventEmitter is async; ensure cleanup handles this gracefully.

[jacobsimionato]

@gspencergoog @ava-cassiopeia we will want to fix these issues at some point I think!

[Dijo-404]

Could i work on this and raise a pr ?

[ava-cassiopeia]

Could i work on this and raise a pr ?

I think you might want to wait until #943 is complete, as I'm gonna be messing with some of the very lines I think you'll need to touch, but otherwise you're welcome to take a crack at it!

[Dijo-404]

Could i work on this and raise a pr ?

I think you might want to wait until #943 is complete, as I'm gonna be messing with some of the very lines I think you'll need to touch, but otherwise you're welcome to take a crack at it!

sure, ig #943 is fixed now, i'm starting to work on it