@symbiote-native/angular 0.0.0-canary-20260724081123

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

@@ -0,0 +1,76 @@
+// Regression test for the anchor/class bug: VirtualizedList is its own
+// ANCHOR_HOST_COMPONENTS entry — a class= on <VirtualizedList> resolves onto VirtualizedList's OWN
+// anchor and needs its OWN anchorHostStyle merge (see index.ts's recomputeView), it is NOT
+// transitively fixed by ScrollView's own fix one level down. 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 { VirtualizedList } from './index';
+import { VListItemDirective } from './directives';
+
+const ROOT_TAG = 952;
+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-virtualized-list-class-host',
+  standalone: true,
+  imports: [VirtualizedList, VListItemDirective],
+  template: `
+    <VirtualizedList
+      class="card"
+      [data]="rows"
+      [getItem]="getItem"
+      [getItemCount]="getItemCount"
+      [getItemLayout]="getItemLayout"
+    >
+      <ng-template vListItem let-item>
+        <symbiote-text [testID]="item.id">{{ item.id }}</symbiote-text>
+      </ng-template>
+    </VirtualizedList>
+  `,
+})
+class VirtualizedListClassHost {
+  rows = rows;
+  getItem = (data: readonly IRow[], index: number): IRow => data[index];
+  getItemCount = (data: readonly IRow[]): number => data.length;
+  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('VirtualizedList anchor class= resolution', () => {
+  it('resolves a class= on the VirtualizedList use site onto the real committed scroll host', async () => {
+    mount(ROOT_TAG, VirtualizedListClassHost);
+    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/virtualized-section-list/directives.ts

@@ -0,0 +1,90 @@
+// VirtualizedSectionList authoring directives: the Angular-faithful equivalent of React/Vue's
+// `renderItem` / `renderSectionHeader` / `renderSectionFooter` / `SectionSeparatorComponent`.
+// React/Vue pass element-returning callbacks; that does NOT translate to Angular, where per-cell
+// content is a TEMPLATE. So the app supplies each section slot as an `<ng-template>` carrying one
+// of these structural directives, and VirtualizedSectionList stamps the windowed slice through
+// them. The shared flatten/window surface stays in @symbiote-native/components, only the cell-AUTHORING shape is
+// framework-specific. SectionList (the next layer) reuses these same directives verbatim.
+//
+// Authoring API (what the app imports and what SectionList builds on):
+//   <VirtualizedSectionList [sections]="sections">
+//     <ng-template vSectionItem let-item let-index="index" let-section="section" let-separators="separators"> … </ng-template>
+//     <ng-template vSectionHeader let-section> … </ng-template>
+//     <ng-template vSectionFooter let-section> … </ng-template>
+//     <ng-template vSectionSeparator> … </ng-template>            <!-- between adjacent sections -->
+//     <!-- list-level slots reuse VirtualizedList's own directives: -->
+//     <ng-template vListHeader> … </ng-template>
+//     <ng-template vListFooter> … </ng-template>
+//     <ng-template vListEmpty> … </ng-template>
+//     <ng-template vListSeparator let-highlighted let-leadingItem="leadingItem"> … </ng-template>  <!-- between items -->
+//   </VirtualizedSectionList>
+//
+// Each directive carries a static ngTemplateContextGuard so the `let-` bindings infer at the call
+// site (the Angular twin of renderItem / renderSectionHeader's typed info arg).
+
+import { Directive, TemplateRef, inject } from '@angular/core';
+import type { ISection, ISeparators } from '@symbiote-native/components';
+
+// The context a `vSectionItem` template receives, mirroring RN's section renderItem info arg
+// ({ item, index, section, separators }). `$implicit` is the item, so `let-item` (no key) binds it.
+export interface IVSectionItemContext<ItemT> {
+  $implicit: ItemT;
+  item: ItemT;
+  index: number;
+  section: ISection<ItemT>;
+  separators: ISeparators;
+}
+
+// The context a `vSectionHeader` / `vSectionFooter` template receives (RN's renderSectionHeader /
+// renderSectionFooter info arg, { section }). `$implicit` is the section, so `let-section` (no key)
+// binds it.
+export interface IVSectionContext<ItemT> {
+  $implicit: ISection<ItemT>;
+  section: ISection<ItemT>;
+}
+
+// `<ng-template vSectionItem>` — one section item row. The static guard types the `let-` bindings.
+@Directive({ selector: '[vSectionItem]', standalone: true })
+export class VSectionItemDirective<ItemT = unknown> {
+  readonly templateRef = inject<TemplateRef<IVSectionItemContext<ItemT>>>(TemplateRef);
+
+  static ngTemplateContextGuard<T>(
+    _dir: VSectionItemDirective<T>,
+    _ctx: unknown,
+  ): _ctx is IVSectionItemContext<T> {
+    return true;
+  }
+}
+
+// `<ng-template vSectionHeader>` — rendered above each section's items (RN renderSectionHeader).
+@Directive({ selector: '[vSectionHeader]', standalone: true })
+export class VSectionHeaderDirective<ItemT = unknown> {
+  readonly templateRef = inject<TemplateRef<IVSectionContext<ItemT>>>(TemplateRef);
+
+  static ngTemplateContextGuard<T>(
+    _dir: VSectionHeaderDirective<T>,
+    _ctx: unknown,
+  ): _ctx is IVSectionContext<T> {
+    return true;
+  }
+}
+
+// `<ng-template vSectionFooter>` — rendered below each section's items (RN renderSectionFooter).
+@Directive({ selector: '[vSectionFooter]', standalone: true })
+export class VSectionFooterDirective<ItemT = unknown> {
+  readonly templateRef = inject<TemplateRef<IVSectionContext<ItemT>>>(TemplateRef);
+
+  static ngTemplateContextGuard<T>(
+    _dir: VSectionFooterDirective<T>,
+    _ctx: unknown,
+  ): _ctx is IVSectionContext<T> {
+    return true;
+  }
+}
+
+// `<ng-template vSectionSeparator>` — painted between adjacent sections (after one section's footer,
+// before the next section's header). Mirrors RN's SectionSeparatorComponent; carries no context.
+@Directive({ selector: '[vSectionSeparator]', standalone: true })
+export class VSectionSeparatorDirective {
+  readonly templateRef = inject(TemplateRef);
+}