@symbiote-native/angular 3.2.0 → 3.3.0

package/src/host-instance/index.ts

@@ -21,14 +21,14 @@ import {
 
 export type { IHostInstance } from '@symbiote-native/engine';
 
-function resolveHostNode(candidate: unknown): ISymbioteNode | null {
+export function hostNodeOf(candidate: unknown): ISymbioteNode | null {
   if (candidate === null || candidate === undefined) return null;
   if (isSymbioteNode(candidate)) return candidate;
   if (candidate instanceof ElementRef)
-    return resolveHostNode(candidate.nativeElement);
+    return hostNodeOf(candidate.nativeElement);
   const maybeHost = candidate as { nativeElement?: unknown };
   if (typeof maybeHost.nativeElement !== 'undefined') {
-    return resolveHostNode(maybeHost.nativeElement);
+    return hostNodeOf(maybeHost.nativeElement);
   }
   return null;
 }
@@ -37,6 +37,6 @@ export function findNodeHandle(componentOrHandle: unknown): number | null {
   if (componentOrHandle === null || componentOrHandle === undefined)
     return null;
   if (typeof componentOrHandle === 'number') return componentOrHandle;
-  const node = resolveHostNode(componentOrHandle);
+  const node = hostNodeOf(componentOrHandle);
   return node ? (getNativeTag(node) ?? null) : null;
 }

package/src/index.ts

@@ -89,6 +89,7 @@ export type {
   IAngularTouchableOpacityProps,
   IAngularTouchableWithoutFeedbackProps,
   IButtonProps,
+  ICheckboxProps,
   ICellLayout,
   IFlatListHandle,
   IFlatListProps,
@@ -144,6 +145,7 @@ export {
   ActivityIndicatorElement,
   ActivityIndicatorSpinnerElement,
   ButtonElement,
+  CheckboxElement,
   HorizontalScrollContentElement,
   HorizontalScrollViewElement,
   ImageBackgroundElement,
@@ -187,6 +189,7 @@ export { mount, unmount } from './render';
 // @symbiote-native/slider) can render a shared @symbiote-native/components/@symbiote-native/slider Descriptor tree
 // without hand-writing its own Renderer2 walker.
 export { DescriptorOutlet } from './descriptor-to-angular';
+export { DescriptorHost } from './descriptor-to-angular/descriptor-host';
 // createPortal (same-surface only — see the file header) and createTunnel (cross-surface,
 // see its file header) are the Angular twins of the React/Vue portal/tunnel primitives.
 // Angular can't synthesize components at runtime (no JIT under Metro/Hermes), so both are
@@ -206,7 +209,7 @@ export { SymbioteRenderer, SymbioteRendererFactory } from './renderer';
 // import straight from that subpath so app-screen registration never routes through this cyclic
 // barrel.
 export { registerComposedComponent } from './anchor-host-registry';
-export { findNodeHandle } from './host-instance';
+export { findNodeHandle, hostNodeOf } from './host-instance';
 export type { IHostInstance } from './host-instance';
 export { StatusBar } from './modules/status-bar';
 export type { IStatusBarProps, IStatusBarStyle } from './modules/status-bar';
@@ -230,6 +233,8 @@ export {
   WindowDimensionsService,
   createResourceHook,
   createEventValueHook,
+  injectEvent,
+  injectEventListener,
   connectWatchedSignal,
   PermissionsServiceBase,
 } from './services';

package/src/native-view-base.ts

@@ -1,18 +1,32 @@
-import { Directive, ElementRef, inject, Input } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  inject,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import type { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
 import type { IDescriptor } from '@symbiote-native/components';
 import type {
   IStyleProp,
   ISymbioteEvent,
+  ISymbioteNode,
   IViewStyle,
 } from '@symbiote-native/engine';
 import { AccessibilityInputsBase } from './accessibility-inputs';
+import { DescriptorOutlet } from './descriptor-to-angular';
+import { hostNodeOf } from './host-instance';
 import { anchorStyleProp } from './primitives/shared';
 
 // Shared shell of a component that paints one Expo native view: the common inputs, the anchor
 // host `class="..."` resolves onto, and a descriptor that recomputes on every OnPush check
 @Directive()
-export abstract class NativeViewBase extends AccessibilityInputsBase {
+export abstract class NativeViewBase
+  extends AccessibilityInputsBase
+  implements OnChanges, OnDestroy
+{
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() testID?: string;
   @Input() nativeID?: string;
@@ -23,6 +37,27 @@ export abstract class NativeViewBase extends AccessibilityInputsBase {
 
   // This component's own `ElementRef`, the anchor a `class="..."` at the use site lands on
   private readonly elementRef = inject(ElementRef);
+  protected readonly changeDetector = inject(ChangeDetectorRef);
+
+  @ViewChild(DescriptorOutlet) private readonly nativeOutlet?: DescriptorOutlet;
+
+  // The committed host node of the native view, for a component that calls its view functions
+  protected hostNode(): ISymbioteNode | null {
+    return hostNodeOf(this.nativeOutlet?.rootNode);
+  }
+
+  // Hook for a component that holds more than its native node, runs once when it is destroyed
+  protected disposeView(): void {}
+
+  // A `[style]` binding reaches the `style` input without dirtying an OnPush view, a plain
+  // `[prop]` does. A subclass with its own `ngOnChanges` calls this one first
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('style' in changes) this.changeDetector.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.disposeView();
+  }
 
   // Names of the component's own inputs that go to the native view, read off `this`
   protected abstract readonly propNames: readonly string[];

package/src/services/index.ts

@@ -2,5 +2,6 @@ export { ColorSchemeService } from './color-scheme.service';
 export { WindowDimensionsService } from './window-dimensions.service';
 export { createResourceHook } from './create-resource-hook';
 export { createEventValueHook } from './create-event-value-hook';
+export { injectEvent, injectEventListener } from './inject-event';
 export { connectWatchedSignal } from './connect-watched-signal';
 export { PermissionsServiceBase } from './permissions-service-base';

package/src/services/inject-event.ts

@@ -0,0 +1,52 @@
+// Angular twins of `useEvent` and `useEventListener` of the `expo` package, for any emitter
+
+import { effect, signal, untracked } from '@angular/core';
+import type { Signal } from '@angular/core';
+import { bindEventListener } from '@symbiote-native/engine';
+import type {
+  IEventEmitterOf,
+  IEventName,
+  IEventPayload,
+  IEventsMap,
+} from '@symbiote-native/engine';
+
+/** Calls the listener for each event, the latest one, and stops with the injection context */
+export function injectEventListener<
+  TEventsMap extends IEventsMap,
+  TName extends IEventName<TEventsMap>,
+>(
+  emitter: () => IEventEmitterOf<TEventsMap>,
+  eventName: () => TName,
+  listener: () => TEventsMap[TName],
+): void {
+  effect(onCleanup => {
+    const source = emitter();
+    const name = eventName();
+    // The listener is read at each event, a new one is not a new subscription
+    onCleanup(bindEventListener(source, name, () => untracked(listener)));
+  });
+}
+
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export function injectEvent<
+  TEventsMap extends IEventsMap,
+  TName extends IEventName<TEventsMap>,
+>(
+  emitter: () => IEventEmitterOf<TEventsMap>,
+  eventName: () => TName,
+  initialValue: IEventPayload<TEventsMap, TName> | null = null,
+): Signal<IEventPayload<TEventsMap, TName> | null> {
+  const event = signal<IEventPayload<TEventsMap, TName> | null>(initialValue);
+  effect(onCleanup => {
+    const source = emitter();
+    const name = eventName();
+    onCleanup(
+      bindEventListener(
+        source,
+        name,
+        () => (next: IEventPayload<TEventsMap, TName>) => event.set(next),
+      ),
+    );
+  });
+  return event.asReadonly();
+}