@symbiote-native/angular 0.1.0

package/src/components/flat-list/flat-list-class-style.test.ts

@@ -0,0 +1,74 @@
+// Regression test for the anchor/class bug (angular-adapter skill): FlatList is its own
+// ANCHOR_HOST_COMPONENTS entry, separate from the VirtualizedList/ScrollView anchors it wraps two
+// levels down — a class= on <FlatList> resolves onto FlatList's OWN anchor and needs its OWN
+// anchorHostStyle merge (see index.ts's ngOnChanges), it is NOT transitively fixed by
+// VirtualizedList's or ScrollView's own fixes. Mirrors pressable.test.ts's "resolves a class=" case.
+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 } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { FlatList } from './index';
+import { VListItemDirective } from '../virtualized-list/directives';
+
+const ROOT_TAG = 951;
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+interface IRow {
+  id: string;
+}
+
+const rows: IRow[] = [{ id: 'a' }, { id: 'b' }];
+
+@Component({
+  selector: 'symbiote-flatlist-class-host',
+  standalone: true,
+  imports: [FlatList, VListItemDirective],
+  template: `
+    <FlatList
+      class="card"
+      [data]="rows"
+      [keyExtractor]="keyExtractor"
+      [getItemLayout]="getItemLayout"
+    >
+      <ng-template vListItem let-item>
+        <symbiote-text [testID]="item.id">{{ item.id }}</symbiote-text>
+      </ng-template>
+    </FlatList>
+  `,
+})
+class FlatListClassHost {
+  rows = rows;
+  keyExtractor = (item: IRow): string => item.id;
+  getItemLayout = (
+    _data: unknown,
+    index: number,
+  ): { length: number; offset: number; index: number } => ({
+    length: 30,
+    offset: 30 * index,
+    index,
+  });
+}
+
+beforeEach(() => {
+  fabric.reset();
+  registerStyles({ card: { backgroundColor: 'red' } });
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('FlatList anchor class= resolution', () => {
+  it('resolves a class= on the FlatList use site onto the real committed scroll host', async () => {
+    mount(ROOT_TAG, FlatListClassHost);
+    await tick();
+    await tick();
+
+    const node = fabric.find(n => n.props.backgroundColor === 'red');
+    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
+  });
+});

package/src/components/flat-list/flat-list-scroll-containment.test.ts

@@ -0,0 +1,107 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { FlatList } from './index';
+import { VListItemDirective } from '../virtualized-list/directives';
+
+const ROOT_TAG = 907;
+const fabric = installFabric();
+
+interface IChip {
+  id: string;
+  n: number;
+}
+
+const chips: IChip[] = Array.from({ length: 24 }, (_unused, index) => ({
+  id: `c-${index}`,
+  n: index,
+}));
+
+// Mirrors examples/angular/App.ts's "FlatList · 24 chips" demo end to end: a horizontal FlatList
+// with getItemLayout. Regression coverage for a bug fixed 2026-07 (see angular-adapter skill §18):
+// cell content used to land OUTSIDE the ScrollView's content view entirely — as top-level siblings
+// of the committed RCTScrollView node, instead of children of its RCTScrollContentView — which is
+// why the device screenshot showed full-width vertically-stacked chips instead of a small
+// horizontal row. Root cause was `<ng-content>` declared once per `@if`/`@else` branch in
+// scroll-view/index.ios.ts (a documented Angular limitation, angular/angular#53310); fixed by
+// collapsing to a single unconditional host tag since iOS never needed axis-specific tags to begin
+// with (`horizontal` already flows as a plain prop). This test pins the CORRECT tree shape.
+@Component({
+  selector: 'symbiote-chip-container-host',
+  standalone: true,
+  imports: [FlatList, VListItemDirective],
+  template: `
+    <FlatList
+      testID="chips-list"
+      [data]="chips"
+      [horizontal]="true"
+      [keyExtractor]="keyExtractor"
+      [getItemLayout]="getItemLayout"
+      [style]="chipListStyle"
+    >
+      <ng-template vListItem let-item>
+        <symbiote-view [testID]="'chip-' + item.n" [style]="chipCardStyle">
+          <symbiote-text>{{ item.n }}</symbiote-text>
+        </symbiote-view>
+      </ng-template>
+    </FlatList>
+  `,
+})
+class ChipContainerHost {
+  chips = chips;
+  chipListStyle = { height: 84 };
+  chipCardStyle = { width: 72, height: 64, borderRadius: 14 };
+  keyExtractor = (item: IChip): string => item.id;
+  getItemLayout = (
+    _data: unknown,
+    index: number,
+  ): { length: number; offset: number; index: number } => ({
+    length: 64,
+    offset: 64 * index,
+    index,
+  });
+}
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+function findWithin(
+  root: (typeof fabric.committed)[number],
+  predicate: (n: (typeof fabric.committed)[number]) => boolean,
+): (typeof fabric.committed)[number] | undefined {
+  if (predicate(root)) return root;
+  for (const child of root.children) {
+    const found = findWithin(child, predicate);
+    if (found !== undefined) return found;
+  }
+  return undefined;
+}
+
+function findTop(
+  nodes: typeof fabric.committed,
+  predicate: (n: (typeof nodes)[number]) => boolean,
+): (typeof nodes)[number] | undefined {
+  for (const node of nodes) {
+    const found = findWithin(node, predicate);
+    if (found !== undefined) return found;
+  }
+  return undefined;
+}
+
+describe('FlatList cells stay inside the ScrollView content view', () => {
+  it('nests chip cells under RCTScrollContentView, not as siblings of RCTScrollView', async () => {
+    mount(ROOT_TAG, ChipContainerHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const scroll = findTop(fabric.committed, node => node.viewName === 'RCTScrollView');
+    expect(scroll).toBeDefined();
+    if (scroll === undefined) return;
+
+    const chip0InsideScroll = findWithin(scroll, node => node.props.testID === 'chip-0');
+    expect(chip0InsideScroll).toBeDefined();
+  });
+});

package/src/components/flat-list/flat-list.test.ts

@@ -0,0 +1,99 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { FlatList } from './index';
+import {
+  VListEmptyDirective,
+  VListFooterDirective,
+  VListHeaderDirective,
+  VListItemDirective,
+} from '../virtualized-list/directives';
+
+const ROOT_TAG = 904;
+const fabric = installFabric();
+
+interface IRow {
+  id: string;
+  n: number;
+}
+
+const rows: IRow[] = Array.from({ length: 5 }, (_unused, index) => ({
+  id: `r-${index}`,
+  n: index,
+}));
+
+// Regression coverage for a real bug: FlatList's single-column path used to forward the app's
+// <ng-template vListItem> to the inner VirtualizedList via a bare <ng-content></ng-content>
+// passthrough. Angular's @ContentChild does NOT resolve a directive across that second projection
+// hop (it only sees what was projected directly onto the querying component's own tag), so
+// VirtualizedList's itemDir stayed undefined and every cell rendered empty — a real device symptom
+// (a blank list) that headless testing never caught because no test existed for this component
+// family. Fixed by having FlatList capture its own @ContentChild (a single, direct hop) and
+// re-stamp explicit <ng-template>s onto <VirtualizedList>, mirroring VirtualizedSectionList's own
+// (already-working) re-stamp pattern. SectionList had the identical bug, fixed the same way.
+@Component({
+  selector: 'symbiote-flatlist-host',
+  standalone: true,
+  imports: [
+    FlatList,
+    VListItemDirective,
+    VListHeaderDirective,
+    VListFooterDirective,
+    VListEmptyDirective,
+  ],
+  template: `
+    <FlatList
+      testID="rows-list"
+      [data]="rows"
+      [keyExtractor]="keyExtractor"
+      [getItemLayout]="getItemLayout"
+      [style]="{ height: 120 }"
+    >
+      <ng-template vListHeader>
+        <symbiote-text testID="header">header</symbiote-text>
+      </ng-template>
+      <ng-template vListItem let-item>
+        <symbiote-text [testID]="'row-' + item.n">{{ 'row ' + item.n }}</symbiote-text>
+      </ng-template>
+      <ng-template vListFooter>
+        <symbiote-text testID="footer">footer</symbiote-text>
+      </ng-template>
+    </FlatList>
+  `,
+})
+class FlatListHost {
+  rows = rows;
+  keyExtractor = (item: IRow): string => item.id;
+  getItemLayout = (
+    _data: unknown,
+    index: number,
+  ): { length: number; offset: number; index: number } => ({
+    length: 30,
+    offset: 30 * index,
+    index,
+  });
+}
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+describe('FlatList', () => {
+  it('stamps the header, every row, and the footer through the projected templates', async () => {
+    mount(ROOT_TAG, FlatListHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const texts = fabric.created
+      .filter(node => node.props.testID !== undefined)
+      .map(node => node.props.testID);
+
+    expect(texts).toContain('header');
+    expect(texts).toContain('footer');
+    for (let index = 0; index < rows.length; index += 1) {
+      expect(texts).toContain(`row-${index}`);
+    }
+  });
+});