@symbiote-native/angular 0.8.0 → 2.0.0

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

@@ -1,205 +0,0 @@
-// 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 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 (horizontal content is AndroidHorizontalScrollContentView, with its own
-// ShadowNode::layout() override) — 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, so the declaration count stays at one
-// and the "last one wins" limitation never triggers. Covered by
-// `android-scroll-view-axis-projection.test.ts` 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,
-  Input,
-  TemplateRef,
-  ViewContainerRef,
-  inject,
-  type EmbeddedViewRef,
-  type OnChanges,
-  type OnDestroy,
-} from '@angular/core';
-import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
-import {
-  HorizontalScrollContentView,
-  HorizontalScrollView,
-  RefreshControlHost,
-  ScrollContentView,
-  ScrollViewHost,
-  SymbioteHostPropsDirective,
-  SymbioteStyleInputDirective,
-} 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,
-  hostDirectives: [
-    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-  ],
-  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 {
-  // 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.
-  //
-  // Reads the base's `anchorStyle` SIGNAL rather than calling anchorHostStyle() directly: this
-  // getter is evaluated inside the `androidWrappedScrollProps` computed, where a plain read would
-  // be untracked and leave the memoized bag holding a stale class.
-  protected override get layoutSplitStyle(): IStyleProp<IViewStyle> {
-    return [asStyle(this.anchorStyle()), this.style];
-  }
-}

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

@@ -1,81 +0,0 @@
-// 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,
-} from '@angular/core';
-import {
-  RefreshControlHost,
-  ScrollContentView,
-  ScrollViewHost,
-  SymbioteHostPropsDirective,
-  SymbioteStyleInputDirective,
-} 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,
-  hostDirectives: [
-    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-  ],
-  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>
-  `,
-})
-// Behavior lives entirely in ScrollViewBase; this class exists for the decorator + iOS template.
-// The anchor-style merge that used to be a `scrollProps` override here moved into the base's
-// `scrollProps` computed - a subclass getter cannot override a field, and both platforms merged it
-// identically anyway (see that computed's comment).
-export class ScrollView extends ScrollViewBase {}

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

@@ -1,7 +0,0 @@
-// 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';