@symbiote-native/angular 0.1.0

package/build/angular/primitives/shared.js

@@ -0,0 +1,172 @@
+import { ChangeDetectorRef, Directive, ElementRef, inject, Input, Renderer2, } from '@angular/core';
+import { flattenStyle, isSymbioteNode, } from '@symbiote-native/engine';
+import * as i0 from "@angular/core";
+/**
+ * A composed Angular component (Pressable, SafeAreaView, ScrollView, ...) is created as a
+ * non-painting ANCHOR host (`ANCHOR_HOST_COMPONENTS` in renderer.ts) so it doesn't paint an
+ * extra native view over its own template's real content. `class="..."`/`[class.x]`/`[ngClass]`
+ * at the component's use site ALWAYS resolves through the renderer's addClass/removeClass onto
+ * that anchor — Angular gives no `@Input()` interception hook for `class` the way it does for
+ * `[style]` (which is why `style` alone was declared as an `@Input()` in the first place, see
+ * `SymbiotePrimitiveHost` above) — so the anchor ends up holding the fully-resolved class-derived
+ * style (`routeProp`'s `commitClassStyle` already wrote it to `anchor.props.style`) while the
+ * REAL native node the component's own template creates never sees it.
+ *
+ * Call this from a composed component's own `hostProps`/style getter and merge the result AHEAD
+ * of its own explicit `style` @Input, e.g. `style: [anchorHostStyle(this.elementRef),
+ * this.resolvedStyle]` — array order matters: `flattenStyle`'s later-wins collapse is what makes
+ * an explicit `[style]` on the component still beat its ambient class, mirroring the
+ * class-loses-to-explicit-style cascade `commitClassStyle` already enforces for a direct
+ * primitive. `this.elementRef` must be this component's OWN injected `ElementRef` (its anchor
+ * host), not a `@ViewChild` into its template's inner primitive.
+ *
+ * Skipping this call for a new `ANCHOR_HOST_COMPONENTS` entry compiles clean under `tsc` AND a
+ * real `ngc` AOT build — no type error, no template error — it just silently drops `class="..."`
+ * forever; only a device/simulator render (or a committed-node style assertion) catches it. See
+ * the `angular-adapter` skill §21 for the device-confirmed incident and the full checklist.
+ */
+export function anchorHostStyle(elementRef) {
+    const node = elementRef.nativeElement;
+    return isSymbioteNode(node) ? node.props.style : undefined;
+}
+// anchorHostStyle returns `unknown` (it reads whatever already resolved onto the anchor node's
+// props bag); a style prop's fields are all optional so any object structurally satisfies it —
+// this narrows just enough (falsy-per-IStyleProp, or an object/array) to fold it into a
+// strictly-typed IStyleProp<T> array without an `as` cast, for a composed component whose own
+// inner primitive declares a real `@Input() style: IStyleProp<SomeConcreteStyle>` (e.g.
+// TouchableOpacity's Pressable, Button's TouchableOpacity) rather than the loosely-typed
+// `symbioteHostProps` bag most composed components merge anchorHostStyle into directly.
+function isStyleValue(value) {
+    return (value === undefined ||
+        value === null ||
+        value === false ||
+        value === '' ||
+        typeof value === 'object');
+}
+export function anchorStyleProp(elementRef) {
+    const value = anchorHostStyle(elementRef);
+    return isStyleValue(value) ? value : undefined;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function shallowStyleEqual(a, b) {
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length)
+        return false;
+    return aKeys.every(key => a[key] === b[key]);
+}
+/**
+ * `anchorHostStyle` must be re-read on every check (a bare `class="x"` with no matching
+ * `[style]` binding never appears in Angular's `SimpleChanges`/dirty-check inputs, so nothing
+ * else signals "the anchor's class-derived style may have changed"). But `flattenStyle([...])`
+ * always allocates a FRESH object, even when its content is byte-for-byte identical to last
+ * time — and a windowed list component (FlatList/VirtualizedList/SectionList/
+ * VirtualizedSectionList) binds its resolved style into a structural-directive-bound `@Input()`
+ * chain where a fresh reference on an UNRELATED CD pass is mistaken for a real change, which
+ * reschedules ANOTHER CD tick (`VListOutletDirective`'s `context` `@Input()` calling
+ * `markForCheck()`) — free-running forever. See the `flat-list-array-style.test.ts` regression
+ * this fixes (and the near-identical `lastRecompute` dedup guard in `virtualized-list/index.ts`,
+ * which this mirrors at the style-merge call site instead of a whole recompute step). Returns
+ * `previous` unchanged when the freshly-flattened merge is shallow-equal to it, so a downstream
+ * `@Input() style` binding sees NO change and skips its own update on an unrelated tick.
+ */
+export function stableAnchorStyle(elementRef, explicitStyle, previous) {
+    const next = flattenStyle([anchorHostStyle(elementRef), explicitStyle]);
+    return isRecord(previous) && shallowStyleEqual(previous, next) ? previous : next;
+}
+const ON_PREFIX = /^on[A-Z]/;
+/**
+ * Base for all Angular primitive host components (`symbiote-view`, `symbiote-text`, ...).
+ * RN's `StyleProp` can be an object, an array, nested arrays, falsy entries, and Animated
+ * values. Angular's raw `[style]` binding on a custom element routes through the CSS style
+ * engine (`setStyle` per key), which crashes on numeric array keys. By declaring `style` as
+ * an Angular `@Input()` on a known component, we intercept it here and forward a flattened
+ * style object through `Renderer2.setProperty`, bypassing Angular's CSS styling path.
+ *
+ * Other props (source, pointerEvents, ...) are intentionally *not* declared as inputs.
+ * Angular then treats them as host property bindings and still dispatches them through the
+ * custom renderer's `setProperty`, so the engine's `routeProp` handles them as usual.
+ */
+export class SymbiotePrimitiveHost {
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    style;
+    /**
+     * The underlying engine host node (public instance). Exposed so `findNodeHandle` can resolve
+     * an Angular template ref (`#ref`) on a primitive host to its native reactTag.
+     */
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    ngOnChanges(changes) {
+        if (!('style' in changes))
+            return;
+        const value = this.style === undefined ? undefined : flattenStyle(this.style);
+        this.renderer.setProperty(this.elementRef.nativeElement, 'style', value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SymbiotePrimitiveHost, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: SymbiotePrimitiveHost, isStandalone: true, inputs: { style: "style" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SymbiotePrimitiveHost, decorators: [{
+            type: Directive
+        }], propDecorators: { style: [{
+                type: Input
+            }] } });
+/**
+ * Applies a whole resolved props record (a shared `renderX(...).props` bag) onto a host
+ * element via `Renderer2.setProperty`, one call per key. Angular templates compile bindings
+ * ahead of time — there is no `v-bind="obj"` equivalent for a custom element — so a component
+ * whose props come from a shared render function would otherwise have to declare every key as
+ * its own static `[prop]="hostProps['x']"` binding. This generalizes the pattern
+ * `SwitchHostPropsDirective` proved first: `<symbiote-x [symbioteHostProps]="hostProps" #ref="symbioteHost">`,
+ * with `ref.node` exposing the native element for any imperative follow-up call.
+ */
+export class SymbioteHostPropsDirective {
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    // The directive lives in its HOST component's template, so its injected ChangeDetectorRef IS
+    // that component's own view detector — the one thing that can refresh it (see wrapCallback).
+    cdr = inject(ChangeDetectorRef);
+    get node() {
+        return this.elementRef.nativeElement;
+    }
+    set symbioteHostProps(props) {
+        for (const [key, value] of Object.entries(props)) {
+            this.renderer.setProperty(this.elementRef.nativeElement, key, this.wrapCallback(key, value));
+        }
+    }
+    // A flat-bag `onX` callback (responder negotiation, onLongPress, …) is invoked by the engine's
+    // event dispatch — a plain JS call, entirely outside Angular. In Angular 20 a component compiles
+    // as a SignalView (not CheckAlways), so a plain (non-signal) state mutation inside such a callback
+    // does NOT dirty the view's reactive consumer, and the scheduler's root detectChanges() will NOT
+    // descend into it (a Global pass only refreshes CheckAlways / Dirty / RefreshView views) — the
+    // "pan does nothing" bug on a nested component. `markForCheck()` flags THIS component's view AND
+    // all its ancestors with RefreshView (which survives the descent) and notifies the CD scheduler,
+    // so the next root tick repaints the mutation. It targets the directive's injecting view
+    // (`_cdRefInjectingView`, i.e. the host component), unlike `detectChanges()` which acts on a
+    // resolved `_lView` that is NOT the host component here. The Angular twin of what React/Vue get
+    // for free (setState / proxy reactivity). See the `angular-adapter` skill §17.
+    wrapCallback(key, value) {
+        if (!ON_PREFIX.test(key) || typeof value !== 'function')
+            return value;
+        const handler = value;
+        return (...args) => {
+            const result = handler(...args);
+            this.cdr.markForCheck();
+            return result;
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SymbioteHostPropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: SymbioteHostPropsDirective, isStandalone: true, selector: "[symbioteHostProps]", inputs: { symbioteHostProps: "symbioteHostProps" }, exportAs: ["symbioteHost"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SymbioteHostPropsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[symbioteHostProps]',
+                    standalone: true,
+                    exportAs: 'symbioteHost',
+                    inputs: ['symbioteHostProps'],
+                }]
+        }] });
+//# sourceMappingURL=shared.js.map

package/build/angular/primitives/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../src/primitives/shared.ts"],"names":[],"mappings":"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"}

package/build/angular/render.d.ts

@@ -0,0 +1,11 @@
+import { type IRootTag, type SymbioteSurface } from '@symbiote-native/engine';
+import { type Type } from '@angular/core';
+export interface IMountOptions {
+    initialProps?: object;
+    wrapperComponent?: Type<unknown>;
+}
+export declare function mount(rootTag: IRootTag, rootComponent: Type<unknown>, options?: IMountOptions): SymbioteSurface;
+export declare function unmount(rootTag: IRootTag): void;
+declare global {
+    var RN$stopSurface: ((surfaceId: number) => void) | undefined;
+}

package/build/angular/render.js

@@ -0,0 +1,161 @@
+// Mount an Angular app onto a Fabric surface. The native host hands us a rootTag; we
+// create a surface and bootstrap a standalone Angular component WITHOUT platform-browser
+// (no DOM) — createEnvironmentInjector + createComponent over @angular/core only, with our
+// SymbioteRendererFactory provided so Angular drives the engine, which commits into
+// nativeFabricUIManager; RN's own renderer never in the path. Angular twin of
+// adapters/vue/src/render.ts. See the `angular-adapter` skill (§2 bootstrap).
+import { createElement as createEngineElement, createSurface, disposeRoot, dlog, toPublicInstance, } from '@symbiote-native/engine';
+import { descriptorFor } from '@symbiote-native/components';
+import { ApplicationRef, createComponent, createEnvironmentInjector, DOCUMENT, RendererFactory2, ɵINJECTOR_SCOPE as INJECTOR_SCOPE, ɵprovideZonelessChangeDetectionInternal as provideZonelessChangeDetectionInternal, } from '@angular/core';
+import { SymbioteRendererFactory } from './renderer';
+import { ColorSchemeService, WindowDimensionsService } from './services';
+// The two FFI-edge casts of this adapter, both confined here to bootstrap. Angular's core
+// types model a browser: the injector parent is a non-null EnvironmentInjector, the host is
+// a DOM Element. Our root has neither shape — a null parent IS a root injector, and the host
+// is a SymbioteSurface (or, for a wrapped AppRegistry root, a plain engine node) the
+// SymbioteRenderer (not the DOM) consumes. These are the sanctioned I/O-edge casts where our
+// objects cross into Angular's web-typed API; revisit if Angular ever exposes a cast-free
+// host. Nothing else in the adapter casts.
+function rootInjectorParent() {
+    return null;
+}
+function asAngularHost(hostNode) {
+    // Angular's locateHostElement reads hostElement.tagName even when a concrete hostElement
+    // is supplied. The host container is given Angular the tiny DOM-shaped field it probes
+    // without changing the renderer target.
+    Object.defineProperty(hostNode, 'tagName', {
+        configurable: true,
+        value: 'symbiote-root',
+    });
+    return hostNode;
+}
+// A bare `symbiote-view` node, created directly through the engine (bypassing Angular's own
+// createElement, which only resolves KNOWN symbiote primitives, never an arbitrary component's
+// selector — see SymbioteRenderer.createElement). Used as the AppRegistry root's host when a
+// wrapperComponentProvider is set: Angular has no hostElement-less bootstrap for our renderer
+// (it would try `renderer.createElement(rootComponent.selector)`, which throws for anything
+// that isn't one of our primitives), so the root needs an explicit host too, one we then hand
+// to the wrapper as projectable content.
+function createDetachedViewHost() {
+    const descriptor = descriptorFor('View');
+    return toPublicInstance(createEngineElement(descriptor.component, descriptor.isText));
+}
+function applyInputs(cmpRef, initialProps) {
+    if (initialProps === undefined)
+        return;
+    for (const [key, value] of Object.entries(initialProps)) {
+        cmpRef.setInput(key, value);
+    }
+}
+// One Angular app per surface, so a surface can be torn down (unmount) or cleanly
+// re-mounted on the same rootTag: the bridgeless host stops and restarts a surface on Fast
+// Refresh and on lifecycle/focus changes, reusing the rootTag.
+const apps = new Map();
+function teardown(rootTag) {
+    const app = apps.get(rootTag);
+    if (app === undefined)
+        return;
+    app.rootRef?.destroy();
+    app.cmpRef.destroy();
+    app.injector.destroy();
+    apps.delete(rootTag);
+    disposeRoot(rootTag);
+}
+export function mount(rootTag, rootComponent, options) {
+    // A re-mount on a live rootTag starts clean; otherwise the stale app double-drives the surface.
+    teardown(rootTag);
+    const surface = createSurface(rootTag);
+    const injector = createEnvironmentInjector([
+        {
+            provide: RendererFactory2,
+            useValue: new SymbioteRendererFactory(surface),
+        },
+        { provide: DOCUMENT, useValue: { head: surface, body: surface } },
+        // createEnvironmentInjector with a null parent gives this injector scope
+        // {'environment'} only (see EnvironmentNgModuleRefAdapter), so providedIn:'root'
+        // tokens — ApplicationRef included — never resolve on their own (R3Injector.get
+        // walks up looking for an injector whose `scopes` contains 'root', and a null
+        // parent means that search always dead-ends in NullInjector). platform-browser's
+        // BROWSER_MODULE_PROVIDERS solves this the same way for real DOM apps: it hands
+        // { provide: INJECTOR_SCOPE, useValue: 'root' } to its OWN app-level providers, and
+        // R3Injector's constructor reads that provider and self-tags this.scopes with
+        // 'root'. We do the same here — no PlatformRef, no DOM, just this one provider.
+        { provide: INJECTOR_SCOPE, useValue: 'root' },
+        // Supplies the real ChangeDetectionSchedulerImpl (microtask-batched, self-scheduling
+        // via ApplicationRef.afterTick) + NoopNgZone + ZONELESS_ENABLED: true — the exact
+        // bundle internalCreateApplication() uses. With ApplicationRef reachable (see above),
+        // there is no more reason for a hand-rolled scheduler: it replaces our old
+        // unconditional `rootView.detectChanges(); cmpView.detectChanges()` (which force-ran
+        // BOTH root views on every tick regardless of cause) with Angular's own tick(), which
+        // only enters an attached view when something actually marked it (RefreshView / Dirty
+        // consumer / HasChildViewsToRefresh). NOTE: this does NOT stop the root's own template
+        // from re-running on a plain press or `ChangeDetectorRef.markForCheck()` anywhere in
+        // the tree — `markViewDirty` (which both native (event) bindings and `markForCheck()`
+        // go through, see SymbioteHostPropsDirective) unconditionally sets RefreshView on
+        // EVERY ancestor up to the root; that is fundamental, unavoidable Angular zoneless
+        // behavior, true in every Angular app, not something this swap changes. What DOES
+        // still protect a sibling branch from an unrelated press is a genuine child
+        // `@Component` boundary — SignalView-compiled children are skip-eligible regardless of
+        // this scheduler (see the `angular-adapter` skill §20 for the full investigation,
+        // including the test that disproved the stronger claim before it shipped).
+        ...provideZonelessChangeDetectionInternal(),
+        ColorSchemeService,
+        WindowDimensionsService,
+    ], rootInjectorParent());
+    // hostElement = the surface: the component's template content commits straight into the
+    // surface with no wrapper view, the engine wrapping surface.children in its synthetic flex
+    // root — the Angular equivalent of Vue's `app.mount(surface)`.
+    let cmpRef;
+    let rootRef;
+    if (options?.wrapperComponent === undefined) {
+        cmpRef = createComponent(rootComponent, {
+            environmentInjector: injector,
+            hostElement: asAngularHost(surface),
+        });
+        applyInputs(cmpRef, options?.initialProps);
+    }
+    else {
+        // The root gets its own host node from the renderer (createComponent without a
+        // hostElement) but is not attached to the surface directly; it is handed to the
+        // wrapper as projectable content instead, so only the wrapper needs a real host.
+        const rootHost = asAngularHost(createDetachedViewHost());
+        rootRef = createComponent(rootComponent, {
+            environmentInjector: injector,
+            hostElement: rootHost,
+        });
+        applyInputs(rootRef, options.initialProps);
+        cmpRef = createComponent(options.wrapperComponent, {
+            environmentInjector: injector,
+            hostElement: asAngularHost(surface),
+            projectableNodes: [[rootHost]],
+        });
+    }
+    // Attach both root views to ApplicationRef so its own tick() (via the real
+    // ChangeDetectionSchedulerImpl provided above) drives them from here on — no manual
+    // ChangeDetectorRef juggling needed. markForCheck anywhere in the tree now notifies
+    // the real scheduler, which batches a microtask and calls appRef.tick() itself.
+    const appRef = injector.get(ApplicationRef);
+    appRef.attachView(cmpRef.hostView);
+    if (rootRef !== undefined) {
+        appRef.attachView(rootRef.hostView);
+    }
+    dlog(`angular mount root=${rootTag}`);
+    appRef.tick(); // first paint
+    surface.requestCommit();
+    apps.set(rootTag, { cmpRef, rootRef, injector });
+    return surface;
+}
+// Tear down a surface by rootTag: the public pair of `mount`, and the JS half of the
+// bridgeless `RN$stopSurface` contract (see installStopSurfaceGlobal).
+export function unmount(rootTag) {
+    dlog(`angular unmount root=${rootTag}`);
+    teardown(rootTag);
+}
+function installStopSurfaceGlobal() {
+    globalThis.RN$stopSurface = (surfaceId) => {
+        unmount(surfaceId);
+    };
+    dlog('installed global.RN$stopSurface');
+}
+installStopSurfaceGlobal();
+//# sourceMappingURL=render.js.map

package/build/angular/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/render.ts"],"names":[],"mappings":"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"}

package/build/angular/renderer.d.ts

@@ -0,0 +1,38 @@
+import { SymbioteSurface, type ISymbioteNode } from '@symbiote-native/engine';
+import type { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
+type IHostNode = ISymbioteNode;
+type IHostElement = ISymbioteNode | SymbioteSurface;
+export declare function registerComposedComponent(selector: string): void;
+export declare class SymbioteRenderer implements Renderer2 {
+    private readonly surface;
+    readonly data: Record<string, unknown>;
+    destroyNode: ((node: ISymbioteNode) => void) | null;
+    constructor(surface: SymbioteSurface);
+    destroy(): void;
+    createElement(name: string): IHostNode;
+    createComment(): IHostNode;
+    createText(value: string): IHostNode;
+    appendChild(parent: IHostElement | null, newChild: IHostNode): void;
+    insertBefore(parent: IHostElement | null, newChild: IHostNode, refChild: IHostNode | null): void;
+    removeChild(_parent: IHostElement | null, oldChild: IHostNode): void;
+    parentNode(node: IHostNode): IHostElement | null;
+    nextSibling(node: IHostNode): IHostNode | null;
+    selectRootElement(selectorOrNode: string | IHostElement): IHostElement;
+    setAttribute(el: IHostElement, name: string, value: string): void;
+    removeAttribute(el: IHostElement, name: string): void;
+    private readonly classTokens;
+    addClass(el: IHostElement, name: string): void;
+    removeClass(el: IHostElement, name: string): void;
+    setStyle(el: IHostElement, style: string, value: unknown): void;
+    removeStyle(el: IHostElement, style: string): void;
+    setProperty(el: IHostElement, name: string, value: unknown): void;
+    setValue(node: IHostNode, value: string): void;
+    listen(target: unknown, eventName: string, callback: (event: unknown) => boolean | void): () => void;
+}
+export declare class SymbioteRendererFactory implements RendererFactory2 {
+    private readonly surface;
+    private renderer;
+    constructor(surface: SymbioteSurface);
+    createRenderer(_hostElement: unknown, _type: RendererType2 | null): Renderer2;
+}
+export {};