@symbiote-native/angular 0.6.2 → 0.8.0

package/src/components/touchable-native-feedback/index.ts

@@ -1,22 +1,19 @@
 // TouchableNativeFeedback: the Angular lifecycle half. Android's ripple / state-drawable
-// touchable, built on Pressable like the rest of the family (the Angular twin of the React/Vue
-// adapter). RN realizes its feedback by cloning the child into an RCTView carrying native ripple
-// props; we instead nest the child under a feedback <symbiote-view> that carries those props
-// (nativeBackgroundAndroid / nativeForegroundAndroid), inside a <Pressable> that owns the press
-// wiring. The native props are read by Android's ReactViewManager; on iOS they are inert props,
-// so the child still renders with working press wiring. The static factories + background mapping
-// are shared in @symbiote-native/components and reused verbatim — Angular only attaches them onto the
-// component class and nests the feedback view. No JS-side platform branch (one Fabric path both
-// platforms), so this stays a flat single file, mirroring React/Vue.
+// touchable, built on Pressable like the rest of the family. RN realizes its feedback by cloning
+// the child into an RCTView carrying native ripple props; we instead nest the child under a
+// feedback <symbiote-view> that carries those props (nativeBackgroundAndroid /
+// nativeForegroundAndroid), inside a <Pressable> that owns the press wiring. The native props are
+// read by Android's ReactViewManager; on iOS they are inert, so the child still renders with
+// working press wiring. The static factories + background mapping are shared in
+// @symbiote-native/components and reused verbatim. One Fabric path both platforms, so this stays
+// a flat single file, mirroring React/Vue.
 //
 // This component's own press/hover events are real @Output() EventEmitters too, matching
-// Pressable (which it wraps) — `(press)="press.emit($event)"`, never `[onPress]="onPress"`.
-// Non-event config (delayLongPress, hitSlop, ...) still rides down as plain @Input() bindings. The
-// a11y identity bag + the four a11y events live on the feedback view — the one host intrinsic here —
-// folded through the shared resolveAccessibilityProps and routed through emit() on the (event)
-// channel (Angular blocks [onX] property bindings on host elements; events flow through (event)
-// only). disabled folds into the a11y state via resolveDisabledAccessibilityState, exactly as
-// Pressable does for its own host.
+// Pressable (which it wraps) — `(press)="press.emit($event)"`, never `[onPress]="onPress"`. The
+// a11y identity bag + the four a11y events live on the feedback view — the one host intrinsic here
+// — folded through the shared resolveAccessibilityProps and routed through emit() on the (event)
+// channel (Angular blocks [onX] property bindings on host elements). disabled folds into the a11y
+// state via resolveDisabledAccessibilityState, exactly as Pressable does for its own host.
 
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -24,9 +21,12 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  computed,
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
   type OnChanges,
 } from '@angular/core';
 import {
@@ -44,8 +44,16 @@ import {
   type IPressableAndroidRippleConfig,
   type IRectOffset,
 } from '@symbiote-native/components';
-import { dlog, isSymbioteEvent, type ISymbioteEvent } from '@symbiote-native/engine';
-import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import {
+  dlog,
+  isSymbioteEvent,
+  type ISymbioteEvent,
+} from '@symbiote-native/engine';
+import {
+  anchorHostStyle,
+  SymbioteHostPropsDirective,
+  ViewHost,
+} from '../../primitives';
 import { Pressable, type IAngularPressableInputs } from '../pressable';
 
 export type {
@@ -58,7 +66,10 @@ export type {
 // feedback config) minus children (Angular takes children via <ng-content>) and minus the press/
 // hover events (declared as this component's OWN @Output()s below). Declared per-adapter over the
 // shared Pressable INPUT surface.
-export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs, 'style'> & {
+export type IAngularTouchableNativeFeedbackProps = Omit<
+  IAngularPressableInputs,
+  'style'
+> & {
   background?: INativeFeedbackBackground;
   useForeground?: boolean;
 };
@@ -90,7 +101,7 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
       [android_disableSound]="android_disableSound"
     >
       <symbiote-view
-        [symbioteHostProps]="hostProps"
+        [symbioteHostProps]="hostProps()"
         (accessibilityAction)="emit(accessibilityAction, $event)"
         (accessibilityTap)="emit(accessibilityTap, $event)"
         (magicTap)="emit(magicTap, $event)"
@@ -101,11 +112,14 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
     </Pressable>
   `,
 })
-export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackProps, OnChanges {
+export class TouchableNativeFeedback
+  implements IAngularTouchableNativeFeedbackProps, OnChanges, DoCheck
+{
   // The static helpers are pure config-dict producers; they live as members on the component class
   // so callers reach them as `TouchableNativeFeedback.Ripple(...)`, exactly like RN.
   static readonly SelectableBackground = selectableBackground;
-  static readonly SelectableBackgroundBorderless = selectableBackgroundBorderless;
+  static readonly SelectableBackgroundBorderless =
+    selectableBackgroundBorderless;
   static readonly Ripple = rippleBackground;
   static readonly canUseNativeForeground = canUseNativeForeground;
 
@@ -142,8 +156,10 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -175,7 +191,37 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
   // anchor's class-derived style is the ONLY style source for hostProps.style below.
   private readonly elementRef = inject(ElementRef);
 
+  // Bridges the non-reactive @Input fields above into the reactive graph, so the computed() bag
+  // below can memoize a value derived from them. Signal inputs would make this unnecessary, but
+  // `input()` is visible only to the AOT compiler and this package's unit suite runs on JIT - see
+  // the `angular-adapter-change-detection` skill, §6. Mirrors ScrollView's identical bridge
+  // (components/scroll-view/shared.ts), including its constraint: ONLY safe for a bag whose every
+  // dependency is an @Input or carries its own signal, never for plain internal mutable state.
+  private readonly inputsRevision = signal(0);
+
+  // The anchor's class-derived style is hostProps' one dependency that is NOT an @Input:
+  // `class="..."`/`[class.x]`/`[ngClass]` at the use site resolves through the renderer's
+  // addClass/removeClass onto the anchor node (anchorHostStyle's doc comment), so it never appears
+  // in SimpleChanges and ngOnChanges cannot cover it. The engine's commitClassStyle allocates a
+  // fresh [classStyle, explicitStyle] array on exactly the passes where a class token actually
+  // moved, so signal.set's own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  // ngDoCheck is the only hook that observes the anchor AFTER the parent wrote it. Angular flushes
+  // a node's pre-order hooks at the next `advance` PAST it (hooks.ts callHooks runs "until that
+  // node index exclusive") or in refreshView's post-template flush - both strictly after the
+  // parent's classProp on this element, and strictly before this component's own view refreshes.
+  // Angular also nulls the active consumer around lifecycle hooks (render3/hooks.ts), so this
+  // write registers no dependency on the caller's view and cannot throw NG0600.
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   ngOnChanges(): void {
+    // Tells the computed bag below that an @Input moved - plain class fields are not reactive on
+    // their own. Must stay in ngOnChanges: that is the single moment Angular has finished writing
+    // every changed input for this pass.
+    this.inputsRevision.update(revision => revision + 1);
     dlog(
       `TouchableNativeFeedback render ${this.resolvedBackground.type} useForeground ${this.useForeground === true}`,
     );
@@ -190,22 +236,34 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
   // backgroundProps picks the foreground slot only where the platform supports it, else the
   // background slot (canUseNativeForeground) — shared with React/Vue. One side is always undefined.
   get feedback(): Record<string, INativeFeedbackBackground> {
-    return backgroundProps(this.resolvedBackground, this.useForeground === true);
+    return backgroundProps(
+      this.resolvedBackground,
+      this.useForeground === true,
+    );
   }
 
   // Assembles the SAME resolved values the template used to bind one-by-one into a single
   // flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) — see primitives/shared.ts.
-  get hostProps(): Record<string, unknown> {
+  //
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, and a
+  // press dirties this very view (SymbioteHostPropsDirective wraps each flat-bag onX with
+  // markForCheck), so `[symbioteHostProps]`'s reference check failed every time and re-pushed
+  // every key through Renderer2.setProperty -> routeProp for an identical bag. Memoized, an
+  // unchanged bag costs one reference compare. Every dependency below is either an @Input (covered
+  // by inputsRevision) or the anchor style (covered by its own signal) - nothing here reads plain
+  // internal mutable state, which is what makes memoizing this one safe.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.inputsRevision();
     return {
       nativeBackgroundAndroid: this.feedback['nativeBackgroundAndroid'],
       nativeForegroundAndroid: this.feedback['nativeForegroundAndroid'],
-      style: anchorHostStyle(this.elementRef),
+      style: this.anchorStyle(),
       testID: this.testID,
       nativeID: this.nativeID,
       accessible: this.accessible,
       ...this.folded,
     };
-  }
+  });
 
   // Forward an engine event to the matching @Output(), narrowing the template's untyped $event.
   emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
@@ -220,7 +278,10 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
       accessibilityLabel: this.accessibilityLabel,
       accessibilityHint: this.accessibilityHint,
       accessibilityRole: this.accessibilityRole,
-      accessibilityState: resolveDisabledAccessibilityState(this.accessibilityState, this.disabled),
+      accessibilityState: resolveDisabledAccessibilityState(
+        this.accessibilityState,
+        this.disabled,
+      ),
       accessibilityValue: this.accessibilityValue,
       accessibilityActions: this.accessibilityActions,
       accessibilityLabelledBy: this.accessibilityLabelledBy,
@@ -231,8 +292,10 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,

package/src/components/virtualized-list/directives.ts

@@ -36,6 +36,7 @@ import {
   type SimpleChanges,
 } from '@angular/core';
 import { dlog } from '@symbiote-native/engine';
+import { countAngular } from '../../diagnostics';
 import type { ISeparators } from '@symbiote-native/components';
 
 let vListOutletInstanceCounter = 0;
@@ -68,7 +69,8 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 // typed at the call site (let-item: ItemT, let-index: number, let-separators: ISeparators).
 @Directive({ selector: '[vListItem]', standalone: true })
 export class VListItemDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVListItemContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVListItemContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VListItemDirective<T>,
@@ -101,7 +103,8 @@ export class VListEmptyDirective {
 // types the `let-` bindings against the separator props.
 @Directive({ selector: '[vListSeparator]', standalone: true })
 export class VListSeparatorDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVListSeparatorContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVListSeparatorContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VListSeparatorDirective<T>,
@@ -130,20 +133,28 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
         `Angular VListOutlet#${this.instanceId} templateRef CHANGED (was=${changes['templateRef'].previousValue !== undefined} now=${this.templateRef !== undefined}) -> clear + recreate`,
       );
       this.viewContainer.clear();
+      countAngular('outletCreates');
       this.viewRef =
         this.templateRef === undefined
           ? null
-          : this.viewContainer.createEmbeddedView(this.templateRef, this.context);
+          : this.viewContainer.createEmbeddedView(
+              this.templateRef,
+              this.context,
+            );
       return;
     }
     if (this.viewRef !== null && this.context !== undefined) {
-      dlog(`Angular VListOutlet#${this.instanceId} context updated, markForCheck`);
+      countAngular('outletUpdates');
+      dlog(
+        `Angular VListOutlet#${this.instanceId} context updated, markForCheck`,
+      );
       this.updateContext(this.viewRef.context, this.context);
       this.viewRef.markForCheck();
     }
   }
 
   ngOnDestroy(): void {
+    countAngular('outletDestroys');
     dlog(`Angular VListOutlet#${this.instanceId} destroyed`);
     this.viewContainer.clear();
   }
@@ -158,7 +169,10 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
   }
 }
 
-function copyContextFields(target: Record<string, unknown>, source: Record<string, unknown>): void {
+function copyContextFields(
+  target: Record<string, unknown>,
+  source: Record<string, unknown>,
+): void {
   for (const key of Object.keys(target)) {
     if (!(key in source)) delete target[key];
   }