@symbiote-native/angular 2.0.1 → 3.0.1

package/src/runtime-matching.ts

@@ -0,0 +1,80 @@
+// Keeping a directive for the TEMPLATE CHECKER and taking it out of the runtime.
+//
+// An element directive here exists so `<view [testID]="42">` is a compile error and `<view
+// [testID]="'row'">` is not. That is ngtsc's job, done over the TypeScript source before anything
+// runs. What it costs at RUN time is an instance per element: Angular matches the directive, builds
+// it, injects into it, and calls `ngOnChanges`, which forwards each changed input with
+// `renderer.setProperty(host, name, value)` — the same call `ɵɵproperty` makes DIRECTLY on an element
+// no directive claimed. Same destination, one hop shorter.
+//
+// Measured on JavaScriptCore at ~8.5-9.4 us per element (`core/engine/cpp/tests/js/
+// angular-directive-cost.itest.ts`, the `a directive at all` row), and between the two Angular bench
+// arms at ~86 ms on a thousand-row screen — the largest single cost this adapter still carries.
+//
+// HOW: `findDirectiveDefMatches` walks `tView.directiveRegistry` and asks `isNodeMatchingSelectorList`
+// with `def.selectors` (upstream `render3/instructions/shared.ts:466-501`). A def whose selector list
+// is EMPTY is registered, iterated, and never matched — while its class, its decorator and its
+// declared inputs are untouched, which is all the template checker reads. So this is one mutation per
+// class at module load rather than a build step: no linker output to rewrite, and it behaves the same
+// under JIT as under the partial-compiled path a device runs.
+//
+// WHAT A WITHHELD DIRECTIVE STOPS DOING, stated in full because none of it fails a type check:
+//
+//   the forward       `ngOnChanges` no longer runs. `ɵɵproperty` writes the same name and value
+//                     straight to the renderer, so the engine sees the identical prop — asserted by
+//                     census in the ladder (`unmatched` reads created=10002 setProps=10002).
+//   the `on*` wrap    an `on*` PROP is called by the ENGINE, so Angular learns nothing unless
+//                     something marks the view. That moved to `SymbioteRenderer.setProperty`, which
+//                     every path reaches whether a directive claimed the binding or not.
+//   the style shadow  `[style]` and `[class]` are no longer claimed by an input, so `ɵɵstyleMap` and
+//                     `ɵɵclassMap` resolve them per KEY again — ~7 000 renderer calls on the bench
+//                     row where the shadow made 4 000. That is a REGRESSION and it is accepted: the
+//                     bare bench arm already pays it and is still ~86 ms ahead of the matched one.
+//
+// WHICH IS WHY THE LIST IS NOT "ALL OF THEM". A directive with real runtime behaviour must go on
+// matching, and here that is the `ValueChangeElement` chain (`text-input`, `switch` — they listen for
+// the engine's value event and register a view flush) and `refresh-control`. `SymbioteCallbackHost`
+// and the two form accessors match on ATTRIBUTES rather than on a tag, so they land only where they
+// are needed and are never withheld.
+
+/**
+ * Take these directives out of Angular's runtime matcher, leaving ngtsc's view of them untouched.
+ *
+ * Idempotent, and silent on anything that is not a compiled directive — a class whose `ɵdir` cannot
+ * be read is left alone rather than reported, because the only way to reach that state is a build
+ * that never compiled it, which fails far louder elsewhere.
+ */
+export function withholdFromRuntimeMatching(types: readonly unknown[]): void {
+  for (const type of types) {
+    if (typeof type !== 'function') continue;
+    const definition: unknown = Reflect.get(type, 'ɵdir');
+    if (typeof definition !== 'object' || definition === null) continue;
+    const selectors: unknown = Reflect.get(definition, 'selectors');
+    if (!Array.isArray(selectors)) continue;
+    // Ivy holds a `CssSelectorList` — one array per alternative, whose first entry is the tag name
+    // when the alternative names one. Recorded before the emptying, because afterwards there is
+    // nothing to read and the guard below would have no subject.
+    for (const alternative of selectors)
+      if (Array.isArray(alternative)) {
+        const tag: unknown = alternative[0];
+        if (typeof tag === 'string' && tag.length > 0) withheldTags.add(tag);
+      }
+    // Emptied in place rather than replaced: the def holds this array, and reading `ɵdir` under JIT
+    // is what compiles the directive, so the object in hand is the one the matcher will walk.
+    selectors.length = 0;
+  }
+}
+
+/**
+ * Every TAG that lost its directive, for the guard that keeps `SymbioteStyleHost` covering them.
+ *
+ * A withheld tag whose style is claimed by nothing sends an RN style ARRAY into Angular's styling
+ * engine, which throws inside change detection — a device failure with no compile-time tell. So the
+ * set is recorded here at the moment it is emptied rather than maintained as a second list, and
+ * `style-host-covers-withheld-tags.test.ts` reads it.
+ */
+const withheldTags = new Set<string>();
+
+export function tagsWithheldFromRuntimeMatching(): ReadonlySet<string> {
+  return withheldTags;
+}

package/src/style-host.ts

@@ -0,0 +1,94 @@
+// The directive that claims `[style]` and `[class]` on the elements that bind them.
+//
+// IT IS A CORRECTNESS REQUIREMENT BEFORE IT IS AN OPTIMISATION, which is what separates it from
+// `callback-host.ts`. An RN `StyleProp` is allowed to be an ARRAY, and Angular's own styling engine
+// cannot represent one: `ɵɵstyleMap` decomposes the value key by key, so `applyStyling` takes each
+// array MEMBER as a style key and throws inside change detection. Device-diagnosed 2026-09-02 on
+// ImageBackground, and pinned ever since by `renderer/style-input.test.ts`.
+//
+// A declared input is what keeps the value away from that engine — `checkStylingMap` hands the whole
+// value to the input instead of walking it (`render3/instructions/styling.ts:259-288`). So when the
+// tag directives were withheld from runtime matching, the claim had to come from somewhere, or an
+// array style would throw on every screen that writes one.
+//
+// AND IT IS ALSO THE FASTER PATH, which is why `class` rides the same selector. Unclaimed, a style
+// object reaches the renderer once per KEY — measured at ~7 000 renderer calls on the thousand-row
+// bench row against 4 000 when an input claims it.
+//
+// MATCHED ON THE TAG, and the first spelling of this directive matched on `[style],[class]` instead
+// — which does not work, for a reason worth keeping because it is invisible from the outside.
+//
+// `[style]` IS NOT A PROPERTY BINDING. The compiler routes it to `ɵɵstyleMap`, a styling instruction,
+// and the name never lands in the `AttributeMarker.Bindings` run that `findAttrIndexInNode` walks
+// (upstream `node_selector_matcher.ts:240-282`, where `Classes` and `Styles` markers are SKIPPED
+// outright). So a directive selected on `[style]` never matches an element that binds one, and the
+// value goes to the styling engine exactly as if no directive existed. Measured: the AOT fixture in
+// `style-input-aot.test.ts` imports `SYMBIOTE_ELEMENTS`, carries this directive, and still threw
+// `Unsupported styling type: function`. `[onPress]` and every other `on*` name DO work that way,
+// which is why `callback-host.ts` can be attribute-matched and this one cannot.
+//
+// SO IT IS A TAG DIRECTIVE, and it is instantiated per element like the ones it replaces — including
+// on elements that bind no style at all, because a tag selector is the only one that can match. What
+// is bought is its SHAPE: two inputs and two injections against the withheld classes' 279 and three.
+//
+// MEASURED, AND SMALLER THAN THE IDEA PROMISED. On the JavaScriptCore ladder, withholding a directive
+// outright is worth ~70-91 ms over ten thousand elements (`WITHHOLDING it`, 7.0-9.1 us each) — but
+// the adapter cannot take that, because this directive has to stay. What it reads against a bare tag
+// AFTER the change is 58.2 / 58.8 / 71.0 ms, against `a directive at all` at 50.2 / 55.9 / 68.3 in
+// the same runs. Those two are the same number: a directive costs what a directive costs, thin or
+// fat, and nearly all of it is matching and instantiating rather than inputs or injections.
+//
+// So the change is worth the FAT-TO-THIN difference and not the whole crossing — the ladder's own
+// `279 inputs, not 1` (~19.9 ms) plus `the ChangeDetectorRef` (~10-31 ms). Recorded at that size
+// rather than at the one the plan was aimed at.
+//
+// NO `ChangeDetectorRef` HERE. A style write is an ordinary prop write and marks nothing; the view
+// marking belongs to the callback path and lives with it.
+//
+// THE FOUR TAGS THAT KEEP THEIR OWN DIRECTIVE ARE ABSENT from the selector — `text-input`,
+// `text-input-multiline`, `switch` and `refresh-control`. Their fat directive still matches and
+// already declares `style`, and two directives claiming one input both receive it and both forward
+// it, which is the `unchanged` double write this adapter has measured before.
+
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  type OnChanges,
+  type SimpleChanges,
+  inject,
+} from '@angular/core';
+
+/** Exported for the guard, which derives the same set from the withheld directives' own selectors. */
+export const STYLE_HOST_SELECTOR =
+  'view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,' +
+  'pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,' +
+  'touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,' +
+  'scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,' +
+  'safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view';
+
+@Directive({
+  selector:
+    'view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,' +
+    'pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,' +
+    'touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,' +
+    'scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,' +
+    'safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view',
+  // Spelled out rather than referenced: ngtsc statically evaluates decorator metadata, and a
+  // computed selector makes it report the class as not standalone — see `callback-host.ts`.
+  inputs: ['style', 'class'],
+  standalone: true,
+})
+export class SymbioteStyleHost implements OnChanges {
+  private readonly renderer = inject(Renderer2);
+  private readonly host = inject(ElementRef);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const name of Object.keys(changes))
+      this.renderer.setProperty(
+        this.host.nativeElement,
+        name,
+        changes[name]?.currentValue,
+      );
+  }
+}

package/tsconfig.angular.base.json

@@ -9,6 +9,17 @@
   "compilerOptions": {
     "target": "ES2022",
     "module": "ES2022",
+    // ANGULAR'S OWN SETTING, and it defaults the other way at this target. Every `@Input()` on a
+    // directive is a bare field DECLARATION, so with ES2022 class-field semantics each one is a real
+    // `[[Define]]` on every instance — `SymbioteElement` declares 279 of them, and a screen written
+    // against `SYMBIOTE_ELEMENTS` instantiates a directive per TAG. Angular's own integration
+    // configs carry this line beside the same target (`.vendors/angular/integration/*/tsconfig.json`),
+    // and a declaration with no initializer emits nothing at all under it.
+    //
+    // It is a CORRECTNESS setting there before it is a speed one: a subclass field declaration
+    // re-defines an inherited property to `undefined` under define semantics, which is how an input
+    // set before construction finishes gets silently erased.
+    "useDefineForClassFields": false,
     "moduleResolution": "Bundler",
     "strict": true,
     "skipLibCheck": true,