@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/components/scroll-view/content-container-style-class.test.ts

@@ -0,0 +1,75 @@
+// Regression guard: contentContainerStyle previously accepted ONLY a JS style object/array. It
+// now also resolves a class-name string through the shared style registry, same as `class`/
+// `style` (see shared.ts's resolvedContentContainerStyle getter). Mirrors the Vue twin
+// (content-container-style-class.test.ts) and scroll-view-class-style.test.ts's style-for-this-
+// exact-scenario shape.
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { ScrollView } from './index.ios';
+
+const ROOT_TAG = 952;
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+function committedContentView(): IFakeNode {
+  const node = fabric.find(n => n.viewName === 'RCTScrollContentView');
+  expect(node, 'the scroll content view was committed').toBeDefined();
+  if (node === undefined) throw new Error('unreachable: content view missing');
+  return node;
+}
+
+@Component({
+  selector: 'symbiote-scroll-content-style-class-host',
+  standalone: true,
+  imports: [ScrollView],
+  template: `
+    <ScrollView [contentContainerStyle]="'padded'">
+      <symbiote-text>content</symbiote-text>
+    </ScrollView>
+  `,
+})
+class ScrollViewContentStyleClassHost {}
+
+@Component({
+  selector: 'symbiote-scroll-content-style-object-host',
+  standalone: true,
+  imports: [ScrollView],
+  template: `
+    <ScrollView [contentContainerStyle]="{ padding: 12 }">
+      <symbiote-text>content</symbiote-text>
+    </ScrollView>
+  `,
+})
+class ScrollViewContentStyleObjectHost {}
+
+beforeEach(() => {
+  fabric.reset();
+  registerStyles({ padded: { padding: 20 } });
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('ScrollView contentContainerStyle class-name support', () => {
+  it('resolves a class-name string onto the content view, not the outer scroll view', async () => {
+    mount(ROOT_TAG, ScrollViewContentStyleClassHost);
+    await tick();
+
+    expect(committedContentView().props.padding).toBe(20);
+    const scrollHost = fabric.find(n => n.viewName === 'RCTScrollView');
+    expect(scrollHost?.props.padding).toBeUndefined();
+  });
+
+  it('still accepts an ordinary style object unchanged', async () => {
+    mount(ROOT_TAG, ScrollViewContentStyleObjectHost);
+    await tick();
+
+    expect(committedContentView().props.padding).toBe(12);
+  });
+});

package/src/components/scroll-view/index.android.ts

@@ -0,0 +1,190 @@
+// ScrollView on Android. An Android ScrollView accepts only ONE child, so a
+// RefreshControl can't be a sibling of the content the way iOS allows ("addViewAt: failed to insert
+// view ... at index 1"). RN solves this by having the RefreshControl (AndroidSwipeRefreshLayout)
+// WRAP the scroll view (cloneElement(refreshControl, {style}, scrollView)). Angular mirrors that
+// shape by querying a projected <RefreshControl>, re-rendering its native prop surface as the outer
+// wrapper, and projecting every non-RefreshControl child into the inner scroll content.
+//
+// Android genuinely needs a different Fabric view per
+// axis for BOTH the outer scroll container (RCTScrollView is vertical-only; AndroidHorizontalScrollView
+// is a dedicated ViewManager) AND the inner content view (vertical content is a plain Android View,
+// horizontal content is AndroidHorizontalScrollContentView, which carries its own ShadowNode::
+// layout() override). So the content tag differs by axis — but Angular only reliably projects into a
+// component's LAST-declared <ng-content> when 2+ DISTINCT declarations exist (angular/angular#22972),
+// which an earlier 4-call-site template (one <ng-content> per axis x refresh-control branch) tripped.
+// Fix: exactly ONE `<ng-content>` textually, inside a single top-level `<ng-template>`, re-instantiated
+// into whichever branch is active via a local template-outlet directive (SymbioteTemplateOutletDirective
+// below, `@angular/common`-free per this adapter's dependency policy — see package.json). Only one
+// branch is ever live at a time, and the `<ng-content>` DECLARATION COUNT stays at one, so the "last
+// one wins" limitation never triggers. Covered by `android-scroll-view-axis-projection.test.ts` (all
+// four axis x refresh combos, plus a runtime axis switch) and `flat-list-scroll-containment.test.ts`.
+//
+// Metro picks this on an Android host; no Platform.OS read.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  type EmbeddedViewRef,
+  type OnChanges,
+  type OnDestroy,
+} from '@angular/core';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import {
+  anchorHostStyle,
+  HorizontalScrollView,
+  HorizontalScrollContentView,
+  RefreshControlHost,
+  ScrollContentView,
+  ScrollViewHost,
+  SymbioteHostPropsDirective,
+} from '../../primitives';
+import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
+
+// Minimal local twin of `@angular/common`'s NgTemplateOutlet (this adapter deliberately has no
+// @angular/common dependency — see package.json): re-instantiates the SAME TemplateRef into
+// whichever structural branch below is currently active, so the component's compiled template
+// keeps exactly ONE <ng-content> declaration regardless of how many places reference it.
+@Directive({
+  selector: '[symbioteTemplateOutlet]',
+  standalone: true,
+})
+export class SymbioteTemplateOutletDirective implements OnChanges, OnDestroy {
+  @Input() symbioteTemplateOutlet: TemplateRef<unknown> | null = null;
+
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private viewRef: EmbeddedViewRef<unknown> | undefined;
+
+  ngOnChanges(): void {
+    if (this.viewRef !== undefined) {
+      this.viewRef.destroy();
+      this.viewRef = undefined;
+    }
+    if (this.symbioteTemplateOutlet !== null) {
+      this.viewRef = this.viewContainerRef.createEmbeddedView(this.symbioteTemplateOutlet);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.viewRef?.destroy();
+  }
+}
+
+// anchorHostStyle returns `unknown` (the anchor's already-resolved style, any shape); narrowed
+// here (mirrors the identical `asStyle` in image/shared.ts) rather than `as`-cast to satisfy
+// `IStyleProp<IViewStyle>`'s stricter array-element union.
+function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
+  return typeof value === 'object' && value !== null ? value : undefined;
+}
+
+// The symbiote-* host elements are imported as standalone components; the props directive is
+// applied as a template directive and the projection directive manages sticky-header wrapping.
+@Component({
+  selector: 'ScrollView',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    ScrollViewHost,
+    ScrollContentView,
+    HorizontalScrollView,
+    HorizontalScrollContentView,
+    RefreshControlHost,
+    SymbioteHostPropsDirective,
+    ScrollViewProjectionDirective,
+    SymbioteTemplateOutletDirective,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  inputs: SCROLL_VIEW_INPUTS,
+  template: `
+    <ng-template #sharedContent>
+      <ng-content></ng-content>
+    </ng-template>
+    @if (isHorizontal) {
+      @if (hasProjectedRefreshControl) {
+        <symbiote-refresh-control
+          #refreshHost="symbioteHost"
+          [symbioteHostProps]="androidRefreshControlProps"
+          (refresh)="handleProjectedRefresh(refreshHost.node)"
+        >
+          <symbiote-horizontal-scroll-view
+            #host="symbioteHost"
+            [symbioteHostProps]="androidWrappedScrollProps"
+          >
+            <symbiote-horizontal-scroll-content
+              [symbioteHostProps]="contentProps"
+              [symbioteScrollViewProjection]="projectionController"
+            >
+              <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+            </symbiote-horizontal-scroll-content>
+          </symbiote-horizontal-scroll-view>
+        </symbiote-refresh-control>
+      } @else {
+        <symbiote-horizontal-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+          <symbiote-horizontal-scroll-content
+            [symbioteHostProps]="contentProps"
+            [symbioteScrollViewProjection]="projectionController"
+          >
+            <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+          </symbiote-horizontal-scroll-content>
+        </symbiote-horizontal-scroll-view>
+      }
+    } @else {
+      @if (hasProjectedRefreshControl) {
+        <symbiote-refresh-control
+          #refreshHost="symbioteHost"
+          [symbioteHostProps]="androidRefreshControlProps"
+          (refresh)="handleProjectedRefresh(refreshHost.node)"
+        >
+          <symbiote-scroll-view
+            #host="symbioteHost"
+            [symbioteHostProps]="androidWrappedScrollProps"
+          >
+            <symbiote-scroll-content
+              [symbioteHostProps]="contentProps"
+              [symbioteScrollViewProjection]="projectionController"
+            >
+              <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+            </symbiote-scroll-content>
+          </symbiote-scroll-view>
+        </symbiote-refresh-control>
+      } @else {
+        <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+          <symbiote-scroll-content
+            [symbioteHostProps]="contentProps"
+            [symbioteScrollViewProjection]="projectionController"
+          >
+            <ng-container [symbioteTemplateOutlet]="sharedContent"></ng-container>
+          </symbiote-scroll-content>
+        </symbiote-scroll-view>
+      }
+    }
+  `,
+})
+export class ScrollView extends ScrollViewBase {
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT `#host` in the template above, which targets
+  // the real inner `symbiote-scroll-view`/`symbiote-horizontal-scroll-view` one level down.
+  private readonly elementRef = inject(ElementRef);
+
+  override get scrollProps(): Record<string, unknown> {
+    const props = super.scrollProps;
+    return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
+  }
+
+  // Feeds the anchor's class-derived style INTO the base class's own `splitLayoutProps` call
+  // (shared.ts's `androidWrappedScrollProps`/`androidRefreshControlProps`), not tacked on after —
+  // a class-only layout style (flex/height/gap/…) must be visible to the split itself, or the
+  // Android outer refresh-control wrapper never receives its share and collapses to zero size
+  // (a real device bug: the whole ScrollView renders nothing). See layoutSplitStyle's doc comment
+  // in shared.ts and the identical fix already shipped in the Vue adapter's scroll-view.
+  protected override get layoutSplitStyle(): IStyleProp<IViewStyle> {
+    return [asStyle(anchorHostStyle(this.elementRef)), this.style];
+  }
+}

package/src/components/scroll-view/index.ios.ts

@@ -0,0 +1,79 @@
+// ScrollView on iOS. The RefreshControl is a CHILD of the scroll view, rendered
+// as a SIBLING BEFORE the content container (RN ScrollView.js: {refreshControl}{contentContainer}).
+// The developer composes it as a projected child of <ScrollView>; this template selects it into the
+// sibling slot before the scroll-content. Also the base (index.ts re-exports it) for headless /
+// web. Metro picks this on an iOS host; no Platform.OS read. Mirrors the React/Vue iOS binding.
+//
+// UNLIKE Android, iOS has only ONE host intrinsic pair regardless of axis (both horizontal and
+// vertical map to RCTScrollView / RCTScrollContentView) — `shared.ts`'s `scrollProps` already
+// forwards `horizontal` as a plain prop ("iOS needs `horizontal` to flip RCTScrollView's axis").
+// So, unlike `index.android.ts`, this file does NOT branch the host tag on `isHorizontal` — doing
+// so anyway (mirroring Android's shape for symmetry) used to declare `<ng-content>` once per
+// `@if`/`@else` branch, which trips a documented Angular limitation: content projected into the
+// FIRST (`@if`) branch never receives Angular's native catch-up placement, only the SECOND
+// (`@else`) branch does (angular/angular#53310, #54840 — Angular's own docs: "You should not
+// conditionally include <ng-content> with @if, @for, or @switch"). Symptom here was axis-specific:
+// a horizontal FlatList's cells landed outside the ScrollView entirely. Fix: single unconditional
+// `<ng-content>` call site.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+} from '@angular/core';
+import {
+  anchorHostStyle,
+  RefreshControlHost,
+  ScrollContentView,
+  ScrollViewHost,
+  SymbioteHostPropsDirective,
+} from '../../primitives';
+import { ScrollViewBase, ScrollViewProjectionDirective, SCROLL_VIEW_INPUTS } from './shared';
+export type { IAngularScrollViewProps, IScrollViewHandle } from './shared';
+
+// The symbiote-* host elements are imported as standalone components; the props directive is
+// applied as a template directive and the projection directive manages sticky-header wrapping.
+@Component({
+  selector: 'ScrollView',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    ScrollViewHost,
+    ScrollContentView,
+    RefreshControlHost,
+    SymbioteHostPropsDirective,
+    ScrollViewProjectionDirective,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  inputs: SCROLL_VIEW_INPUTS,
+  template: `
+    <symbiote-scroll-view #host="symbioteHost" [symbioteHostProps]="scrollProps">
+      @if (hasProjectedRefreshControl) {
+        <symbiote-refresh-control
+          #refreshHost="symbioteHost"
+          [symbioteHostProps]="iosRefreshControlProps"
+          (refresh)="handleProjectedRefresh(refreshHost.node)"
+        ></symbiote-refresh-control>
+      }
+      <symbiote-scroll-content
+        [symbioteHostProps]="contentProps"
+        [symbioteScrollViewProjection]="projectionController"
+      >
+        <ng-content></ng-content>
+      </symbiote-scroll-content>
+    </symbiote-scroll-view>
+  `,
+})
+export class ScrollView extends ScrollViewBase {
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT `#host` in the template above, which targets
+  // the real inner `symbiote-scroll-view` one level down.
+  private readonly elementRef = inject(ElementRef);
+
+  override get scrollProps(): Record<string, unknown> {
+    const props = super.scrollProps;
+    return { ...props, style: [anchorHostStyle(this.elementRef), props.style] };
+  }
+}

package/src/components/scroll-view/index.ts

@@ -0,0 +1,7 @@
+// Base / default ScrollView. Re-exports the iOS build. Metro overrides this with index.ios.ts /
+// index.android.ts on a real host; under tsx / tsc / web the host resolves here. Filename is the
+// selector, no Platform.OS read.
+
+export * from './index.ios';
+export { ScrollViewStickyHeader } from './sticky-header';
+export type { IStickyHeaderComponentType } from './sticky-header';