@symbiote-native/angular 0.6.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (193) hide show
  1. package/README.md +1 -1
  2. package/babel-register-composed.cjs +11 -3
  3. package/build/angular/anchor-host-registry.d.ts +2 -0
  4. package/build/angular/anchor-host-registry.js +84 -0
  5. package/build/angular/anchor-host-registry.js.map +1 -0
  6. package/build/angular/components/input-accessory-view/index.d.ts +2 -1
  7. package/build/angular/components/input-accessory-view/index.js +28 -39
  8. package/build/angular/components/input-accessory-view/index.js.map +1 -1
  9. package/build/angular/components/scroll-view/projection.js +70 -48
  10. package/build/angular/components/scroll-view/projection.js.map +1 -1
  11. package/build/angular/components/scroll-view/shared.js +28 -25
  12. package/build/angular/components/scroll-view/shared.js.map +1 -1
  13. package/build/angular/components/scroll-view/sticky-header.d.ts +6 -7
  14. package/build/angular/components/scroll-view/sticky-header.js +82 -65
  15. package/build/angular/components/scroll-view/sticky-header.js.map +1 -1
  16. package/build/angular/components/touchable/index.d.ts +2 -5
  17. package/build/angular/components/touchable/index.js +36 -56
  18. package/build/angular/components/touchable/index.js.map +1 -1
  19. package/build/angular/components/virtualized-list/index.d.ts +5 -20
  20. package/build/angular/components/virtualized-list/index.js +145 -275
  21. package/build/angular/components/virtualized-list/index.js.map +1 -1
  22. package/build/angular/components/virtualized-section-list/index.js +2 -4
  23. package/build/angular/components/virtualized-section-list/index.js.map +1 -1
  24. package/build/angular/index.d.ts +2 -1
  25. package/build/angular/index.js +6 -1
  26. package/build/angular/index.js.map +1 -1
  27. package/build/angular/renderer/index.d.ts +0 -1
  28. package/build/angular/renderer/index.js +5 -60
  29. package/build/angular/renderer/index.js.map +1 -1
  30. package/package.json +8 -4
  31. package/src/anchor-host-registry.ts +88 -0
  32. package/src/components/input-accessory-view/index.ts +30 -39
  33. package/src/components/scroll-view/projection.ts +76 -46
  34. package/src/components/scroll-view/shared.ts +27 -19
  35. package/src/components/scroll-view/sticky-header.ts +89 -64
  36. package/src/components/touchable/index.ts +52 -66
  37. package/src/components/virtualized-list/index.ts +157 -368
  38. package/src/components/virtualized-section-list/index.ts +6 -3
  39. package/src/index.ts +6 -1
  40. package/src/renderer/index.ts +5 -63
  41. package/build/bootstrap.d.ts +0 -7
  42. package/build/bootstrap.js +0 -14
  43. package/build/components/activity-indicator/index.android.d.ts +0 -9
  44. package/build/components/activity-indicator/index.android.js +0 -64
  45. package/build/components/activity-indicator/index.d.ts +0 -1
  46. package/build/components/activity-indicator/index.ios.d.ts +0 -5
  47. package/build/components/activity-indicator/index.ios.js +0 -64
  48. package/build/components/activity-indicator/index.js +0 -3
  49. package/build/components/activity-indicator/shared.d.ts +0 -64
  50. package/build/components/activity-indicator/shared.js +0 -424
  51. package/build/components/button.d.ts +0 -60
  52. package/build/components/button.js +0 -456
  53. package/build/components/flat-list/index.d.ts +0 -119
  54. package/build/components/flat-list/index.js +0 -691
  55. package/build/components/image/index.android.d.ts +0 -7
  56. package/build/components/image/index.android.js +0 -88
  57. package/build/components/image/index.d.ts +0 -1
  58. package/build/components/image/index.ios.d.ts +0 -7
  59. package/build/components/image/index.ios.js +0 -88
  60. package/build/components/image/index.js +0 -2
  61. package/build/components/image/shared.d.ts +0 -101
  62. package/build/components/image/shared.js +0 -405
  63. package/build/components/image-background.d.ts +0 -78
  64. package/build/components/image-background.js +0 -583
  65. package/build/components/input-accessory-view/index.d.ts +0 -56
  66. package/build/components/input-accessory-view/index.js +0 -403
  67. package/build/components/keyboard-avoiding-view/index.d.ts +0 -79
  68. package/build/components/keyboard-avoiding-view/index.js +0 -504
  69. package/build/components/modal/index.d.ts +0 -89
  70. package/build/components/modal/index.js +0 -529
  71. package/build/components/pressable/index.d.ts +0 -120
  72. package/build/components/pressable/index.js +0 -639
  73. package/build/components/refresh-control/index.d.ts +0 -83
  74. package/build/components/refresh-control/index.js +0 -509
  75. package/build/components/safe-area-view/index.d.ts +0 -54
  76. package/build/components/safe-area-view/index.js +0 -388
  77. package/build/components/scroll-view/index.android.d.ts +0 -16
  78. package/build/components/scroll-view/index.android.js +0 -228
  79. package/build/components/scroll-view/index.d.ts +0 -3
  80. package/build/components/scroll-view/index.ios.d.ts +0 -6
  81. package/build/components/scroll-view/index.ios.js +0 -113
  82. package/build/components/scroll-view/index.js +0 -5
  83. package/build/components/scroll-view/projection.d.ts +0 -32
  84. package/build/components/scroll-view/projection.js +0 -311
  85. package/build/components/scroll-view/shared.d.ts +0 -225
  86. package/build/components/scroll-view/shared.js +0 -757
  87. package/build/components/scroll-view/sticky-header.d.ts +0 -38
  88. package/build/components/scroll-view/sticky-header.js +0 -257
  89. package/build/components/section-list/index.d.ts +0 -113
  90. package/build/components/section-list/index.js +0 -768
  91. package/build/components/switch/index.android.d.ts +0 -17
  92. package/build/components/switch/index.android.js +0 -107
  93. package/build/components/switch/index.d.ts +0 -1
  94. package/build/components/switch/index.ios.d.ts +0 -16
  95. package/build/components/switch/index.ios.js +0 -106
  96. package/build/components/switch/index.js +0 -3
  97. package/build/components/switch/shared.d.ts +0 -37
  98. package/build/components/switch/shared.js +0 -176
  99. package/build/components/text-input.d.ts +0 -150
  100. package/build/components/text-input.js +0 -821
  101. package/build/components/touchable/index.d.ts +0 -241
  102. package/build/components/touchable/index.js +0 -1672
  103. package/build/components/touchable-native-feedback/index.d.ts +0 -80
  104. package/build/components/touchable-native-feedback/index.js +0 -545
  105. package/build/components/virtualized-list/directives.d.ts +0 -41
  106. package/build/components/virtualized-list/directives.js +0 -249
  107. package/build/components/virtualized-list/index.d.ts +0 -265
  108. package/build/components/virtualized-list/index.js +0 -1343
  109. package/build/components/virtualized-section-list/directives.d.ts +0 -28
  110. package/build/components/virtualized-section-list/directives.js +0 -148
  111. package/build/components/virtualized-section-list/index.d.ts +0 -175
  112. package/build/components/virtualized-section-list/index.js +0 -854
  113. package/build/components.d.ts +0 -39
  114. package/build/components.js +0 -37
  115. package/build/create-portal/index.d.ts +0 -17
  116. package/build/create-portal/index.js +0 -128
  117. package/build/create-tunnel/index.d.ts +0 -29
  118. package/build/create-tunnel/index.js +0 -181
  119. package/build/descriptor-to-angular/index.d.ts +0 -19
  120. package/build/descriptor-to-angular/index.js +0 -186
  121. package/build/host-instance/index.d.ts +0 -2
  122. package/build/host-instance/index.js +0 -36
  123. package/build/index.d.ts +0 -21
  124. package/build/index.js +0 -40
  125. package/build/modules/animated/animated-leaf-binder/index.d.ts +0 -14
  126. package/build/modules/animated/animated-leaf-binder/index.js +0 -90
  127. package/build/modules/animated/animated-leaf-binder.d.ts +0 -14
  128. package/build/modules/animated/animated-leaf-binder.js +0 -90
  129. package/build/modules/animated/create-animated-component.d.ts +0 -48
  130. package/build/modules/animated/create-animated-component.js +0 -425
  131. package/build/modules/animated/index.d.ts +0 -51
  132. package/build/modules/animated/index.js +0 -58
  133. package/build/modules/app-registry/index.d.ts +0 -7
  134. package/build/modules/app-registry/index.js +0 -22
  135. package/build/modules/status-bar/index.d.ts +0 -17
  136. package/build/modules/status-bar/index.js +0 -121
  137. package/build/primitives/index.d.ts +0 -32
  138. package/build/primitives/index.js +0 -386
  139. package/build/primitives/shared.d.ts +0 -83
  140. package/build/primitives/shared.js +0 -230
  141. package/build/render/index.d.ts +0 -11
  142. package/build/render/index.js +0 -170
  143. package/build/renderer/index.d.ts +0 -38
  144. package/build/renderer/index.js +0 -355
  145. package/build/services/color-scheme.service.d.ts +0 -13
  146. package/build/services/color-scheme.service.js +0 -72
  147. package/build/services/index.d.ts +0 -2
  148. package/build/services/index.js +0 -2
  149. package/build/services/window-dimensions.service.d.ts +0 -13
  150. package/build/services/window-dimensions.service.js +0 -83
  151. package/src/__tests__/responder-change-detection.test.ts +0 -102
  152. package/src/__tests__/responder-nested-cd.test.ts +0 -113
  153. package/src/angular-gaps.test.ts +0 -142
  154. package/src/angular-imports.test.ts +0 -100
  155. package/src/components/activity-indicator/activity-indicator-class-style.test.ts +0 -44
  156. package/src/components/activity-indicator/activity-indicator.test.ts +0 -131
  157. package/src/components/flat-list/column-wrapper-style-class.test.ts +0 -116
  158. package/src/components/flat-list/flat-list-array-style.test.ts +0 -131
  159. package/src/components/flat-list/flat-list-class-style.test.ts +0 -74
  160. package/src/components/flat-list/flat-list-scroll-containment.test.ts +0 -107
  161. package/src/components/flat-list/flat-list.test.ts +0 -99
  162. package/src/components/image/image-class-style.test.ts +0 -46
  163. package/src/components/image-background-class-style.test.ts +0 -48
  164. package/src/components/image-background-style-class.test.ts +0 -79
  165. package/src/components/input-accessory-view/input-accessory-view.test.ts +0 -43
  166. package/src/components/keyboard-avoiding-view/keyboard-avoiding-view.test.ts +0 -54
  167. package/src/components/modal/modal.test.ts +0 -43
  168. package/src/components/pressable/pressable.test.ts +0 -85
  169. package/src/components/refresh-control/refresh-control.test.ts +0 -41
  170. package/src/components/safe-area-view/safe-area-view.test.ts +0 -43
  171. package/src/components/scroll-view/android-scroll-view-axis-projection.test.ts +0 -123
  172. package/src/components/scroll-view/content-container-style-class.test.ts +0 -75
  173. package/src/components/scroll-view/scroll-view-class-style.test.ts +0 -134
  174. package/src/components/scroll-view/scroll-view-projection.test.ts +0 -194
  175. package/src/components/switch/android-switch-class.test.ts +0 -42
  176. package/src/components/switch/switch.test.ts +0 -92
  177. package/src/components/text-input-class-style.test.ts +0 -54
  178. package/src/components/touchable/touchable.test.ts +0 -102
  179. package/src/components/touchable-native-feedback/touchable-native-feedback.test.ts +0 -49
  180. package/src/components/virtualized-list/virtualized-list-class-style.test.ts +0 -76
  181. package/src/components/virtualized-section-list/virtualized-section-list-class-style.test.ts +0 -60
  182. package/src/create-portal/create-portal.test.ts +0 -90
  183. package/src/create-tunnel/create-tunnel.test.ts +0 -120
  184. package/src/descriptor-to-angular/descriptor-outlet.test.ts +0 -94
  185. package/src/host-instance/host-instance.test.ts +0 -49
  186. package/src/modules/animated/animated-leaf-binder/animated-leaf-binder.test.ts +0 -116
  187. package/src/modules/animated/animated-leaf-binder.test.ts +0 -116
  188. package/src/modules/animated/animated-scroll-view.test.ts +0 -102
  189. package/src/modules/app-registry/app-registry.test.ts +0 -106
  190. package/src/modules/status-bar/status-bar.test.ts +0 -50
  191. package/src/render/render.test.ts +0 -147
  192. package/src/renderer/renderer.test.ts +0 -202
  193. package/src/services/services.test.ts +0 -163
@@ -1,131 +0,0 @@
1
- import '@angular/compiler';
2
- import { Component } from '@angular/core';
3
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
4
- import { installFabric } from '@symbiote-native/test-utils';
5
- import { flattenStyle } from '@symbiote-native/engine';
6
-
7
- import { mount, unmount } from '../../render';
8
- import { FlatList } from './index';
9
- import { VListItemDirective } from '../virtualized-list/directives';
10
-
11
- const ROOT_TAG = 905;
12
- const fabric = installFabric();
13
-
14
- interface IChip {
15
- id: string;
16
- n: number;
17
- }
18
-
19
- const chips: IChip[] = Array.from({ length: 24 }, (_unused, index) => ({
20
- id: `c-${index}`,
21
- n: index,
22
- }));
23
-
24
- // Regression coverage for a real device bug: Angular compiles a literal `[style]="…"` binding to
25
- // the built-in ɵɵstyleMap instruction (NOT a regular @Input() property write), regardless of the
26
- // target's declared type — it only understands a flat style object, never an array. RN's own
27
- // `style={[base, override]}` composition idiom (used by examples/angular/App.ts's "FlatList · 24
28
- // chips" demo for the per-item computed backgroundColor) crashed deep inside Angular's own styling
29
- // engine (`prop.indexOf is not a function`), and the crash landed inside a zoneless
30
- // SymbioteChangeDetectionScheduler tick with no catch around it — so the retry kept re-firing
31
- // forever (RAM climbing, constant re-render log spam on device) while the item never painted its
32
- // style. Fixed by flattening any array-composed style with the engine's own `flattenStyle` before
33
- // it reaches a `[style]=` binding — required of app authors (see App.ts) AND of every adapter
34
- // component that forwards its own `style` @Input() onward (see the `resolvedStyle` getters/fields
35
- // in virtualized-list, section-list, virtualized-section-list — flat-list's own `rowStyle` had the
36
- // identical landmine, always assigning an array).
37
- @Component({
38
- selector: 'symbiote-chip-list-host',
39
- standalone: true,
40
- imports: [FlatList, VListItemDirective],
41
- template: `
42
- <FlatList
43
- testID="chips-list"
44
- [data]="chips"
45
- [horizontal]="true"
46
- [keyExtractor]="keyExtractor"
47
- [getItemLayout]="getItemLayout"
48
- [style]="{ height: 84 }"
49
- >
50
- <ng-template vListItem let-item>
51
- <symbiote-view
52
- [testID]="'chip-' + item.n"
53
- [style]="flattenStyle([{ height: 72, width: 64 }, { backgroundColor: chipColor(item) }])"
54
- >
55
- <symbiote-text>{{ item.n }}</symbiote-text>
56
- </symbiote-view>
57
- </ng-template>
58
- </FlatList>
59
- `,
60
- })
61
- class ChipListHost {
62
- chips = chips;
63
- flattenStyle = flattenStyle;
64
- keyExtractor = (item: IChip): string => item.id;
65
- getItemLayout = (
66
- _data: unknown,
67
- index: number,
68
- ): { length: number; offset: number; index: number } => ({
69
- length: 64,
70
- offset: 64 * index,
71
- index,
72
- });
73
- chipColor(item: IChip): string {
74
- return `hsl(${(item.n * 47) % 360}, 70%, 50%)`;
75
- }
76
- }
77
-
78
- beforeEach(() => fabric.reset());
79
- afterEach(() => unmount(ROOT_TAG));
80
-
81
- function findCommitted(
82
- nodes: typeof fabric.committed,
83
- predicate: (n: (typeof nodes)[number]) => boolean,
84
- ): (typeof nodes)[number] | undefined {
85
- for (const node of nodes) {
86
- if (predicate(node)) return node;
87
- const found = findCommitted(node.children, predicate);
88
- if (found !== undefined) return found;
89
- }
90
- return undefined;
91
- }
92
-
93
- describe('FlatList array-composed item style', () => {
94
- it('flattens to a plain object instead of crashing ɵɵstyleMap, and commits it', async () => {
95
- mount(ROOT_TAG, ChipListHost);
96
- await new Promise<void>(resolve => setTimeout(resolve, 0));
97
- await new Promise<void>(resolve => setTimeout(resolve, 0));
98
-
99
- const chip0 = findCommitted(fabric.committed, node => node.props.testID === 'chip-0');
100
- expect(chip0?.props).toMatchObject({
101
- height: 72,
102
- width: 64,
103
- backgroundColor: 'hsl(0, 70%, 50%)',
104
- });
105
- });
106
-
107
- it('does not free-run change detection once the window settles', async () => {
108
- mount(ROOT_TAG, ChipListHost);
109
- await new Promise<void>(resolve => setTimeout(resolve, 0));
110
- await new Promise<void>(resolve => setTimeout(resolve, 0));
111
-
112
- const scroll = fabric.find(node => node.viewName === 'RCTScrollView');
113
- if (scroll !== undefined) {
114
- fabric.fireEvent(scroll.instanceHandle, 'topLayout', {
115
- layout: { x: 0, y: 0, width: 360, height: 84 },
116
- });
117
- }
118
- await new Promise<void>(resolve => setTimeout(resolve, 0));
119
- await new Promise<void>(resolve => setTimeout(resolve, 0));
120
-
121
- let previous = fabric.counts.completeRoot;
122
- let stillGrowing = false;
123
- for (let tick = 0; tick < 10; tick += 1) {
124
- await new Promise<void>(resolve => setTimeout(resolve, 0));
125
- const current = fabric.counts.completeRoot;
126
- if (current > previous) stillGrowing = true;
127
- previous = current;
128
- }
129
- expect(stillGrowing).toBe(false);
130
- });
131
- });
@@ -1,74 +0,0 @@
1
- // Regression test for the anchor/class bug: FlatList is its own
2
- // ANCHOR_HOST_COMPONENTS entry, separate from the VirtualizedList/ScrollView anchors it wraps two
3
- // levels down — a class= on <FlatList> resolves onto FlatList's OWN anchor and needs its OWN
4
- // anchorHostStyle merge (see index.ts's ngOnChanges), it is NOT transitively fixed by
5
- // VirtualizedList's or ScrollView's own fixes. Mirrors pressable.test.ts's "resolves a class=" case.
6
- import '@angular/compiler';
7
- import { Component } from '@angular/core';
8
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
9
- import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
10
- import { installFabric } from '@symbiote-native/test-utils';
11
-
12
- import { mount, unmount } from '../../render';
13
- import { FlatList } from './index';
14
- import { VListItemDirective } from '../virtualized-list/directives';
15
-
16
- const ROOT_TAG = 951;
17
- const fabric = installFabric();
18
- const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
19
-
20
- interface IRow {
21
- id: string;
22
- }
23
-
24
- const rows: IRow[] = [{ id: 'a' }, { id: 'b' }];
25
-
26
- @Component({
27
- selector: 'symbiote-flatlist-class-host',
28
- standalone: true,
29
- imports: [FlatList, VListItemDirective],
30
- template: `
31
- <FlatList
32
- class="card"
33
- [data]="rows"
34
- [keyExtractor]="keyExtractor"
35
- [getItemLayout]="getItemLayout"
36
- >
37
- <ng-template vListItem let-item>
38
- <symbiote-text [testID]="item.id">{{ item.id }}</symbiote-text>
39
- </ng-template>
40
- </FlatList>
41
- `,
42
- })
43
- class FlatListClassHost {
44
- rows = rows;
45
- keyExtractor = (item: IRow): string => item.id;
46
- getItemLayout = (
47
- _data: unknown,
48
- index: number,
49
- ): { length: number; offset: number; index: number } => ({
50
- length: 30,
51
- offset: 30 * index,
52
- index,
53
- });
54
- }
55
-
56
- beforeEach(() => {
57
- fabric.reset();
58
- registerStyles({ card: { backgroundColor: 'red' } });
59
- });
60
- afterEach(() => {
61
- unmount(ROOT_TAG);
62
- clearGlobalStyles();
63
- });
64
-
65
- describe('FlatList anchor class= resolution', () => {
66
- it('resolves a class= on the FlatList use site onto the real committed scroll host', async () => {
67
- mount(ROOT_TAG, FlatListClassHost);
68
- await tick();
69
- await tick();
70
-
71
- const node = fabric.find(n => n.props.backgroundColor === 'red');
72
- expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
73
- });
74
- });
@@ -1,107 +0,0 @@
1
- import '@angular/compiler';
2
- import { Component } from '@angular/core';
3
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
4
- import { installFabric } from '@symbiote-native/test-utils';
5
-
6
- import { mount, unmount } from '../../render';
7
- import { FlatList } from './index';
8
- import { VListItemDirective } from '../virtualized-list/directives';
9
-
10
- const ROOT_TAG = 907;
11
- const fabric = installFabric();
12
-
13
- interface IChip {
14
- id: string;
15
- n: number;
16
- }
17
-
18
- const chips: IChip[] = Array.from({ length: 24 }, (_unused, index) => ({
19
- id: `c-${index}`,
20
- n: index,
21
- }));
22
-
23
- // Mirrors examples/angular/App.ts's "FlatList · 24 chips" demo end to end: a horizontal FlatList
24
- // with getItemLayout. Regression coverage for a bug fixed 2026-07: cell content used to land
25
- // OUTSIDE the ScrollView's content view entirely — as top-level siblings
26
- // of the committed RCTScrollView node, instead of children of its RCTScrollContentView — which is
27
- // why the device screenshot showed full-width vertically-stacked chips instead of a small
28
- // horizontal row. Root cause was `<ng-content>` declared once per `@if`/`@else` branch in
29
- // scroll-view/index.ios.ts (a documented Angular limitation, angular/angular#53310); fixed by
30
- // collapsing to a single unconditional host tag since iOS never needed axis-specific tags to begin
31
- // with (`horizontal` already flows as a plain prop). This test pins the CORRECT tree shape.
32
- @Component({
33
- selector: 'symbiote-chip-container-host',
34
- standalone: true,
35
- imports: [FlatList, VListItemDirective],
36
- template: `
37
- <FlatList
38
- testID="chips-list"
39
- [data]="chips"
40
- [horizontal]="true"
41
- [keyExtractor]="keyExtractor"
42
- [getItemLayout]="getItemLayout"
43
- [style]="chipListStyle"
44
- >
45
- <ng-template vListItem let-item>
46
- <symbiote-view [testID]="'chip-' + item.n" [style]="chipCardStyle">
47
- <symbiote-text>{{ item.n }}</symbiote-text>
48
- </symbiote-view>
49
- </ng-template>
50
- </FlatList>
51
- `,
52
- })
53
- class ChipContainerHost {
54
- chips = chips;
55
- chipListStyle = { height: 84 };
56
- chipCardStyle = { width: 72, height: 64, borderRadius: 14 };
57
- keyExtractor = (item: IChip): string => item.id;
58
- getItemLayout = (
59
- _data: unknown,
60
- index: number,
61
- ): { length: number; offset: number; index: number } => ({
62
- length: 64,
63
- offset: 64 * index,
64
- index,
65
- });
66
- }
67
-
68
- beforeEach(() => fabric.reset());
69
- afterEach(() => unmount(ROOT_TAG));
70
-
71
- function findWithin(
72
- root: (typeof fabric.committed)[number],
73
- predicate: (n: (typeof fabric.committed)[number]) => boolean,
74
- ): (typeof fabric.committed)[number] | undefined {
75
- if (predicate(root)) return root;
76
- for (const child of root.children) {
77
- const found = findWithin(child, predicate);
78
- if (found !== undefined) return found;
79
- }
80
- return undefined;
81
- }
82
-
83
- function findTop(
84
- nodes: typeof fabric.committed,
85
- predicate: (n: (typeof nodes)[number]) => boolean,
86
- ): (typeof nodes)[number] | undefined {
87
- for (const node of nodes) {
88
- const found = findWithin(node, predicate);
89
- if (found !== undefined) return found;
90
- }
91
- return undefined;
92
- }
93
-
94
- describe('FlatList cells stay inside the ScrollView content view', () => {
95
- it('nests chip cells under RCTScrollContentView, not as siblings of RCTScrollView', async () => {
96
- mount(ROOT_TAG, ChipContainerHost);
97
- await new Promise<void>(resolve => setTimeout(resolve, 0));
98
- await new Promise<void>(resolve => setTimeout(resolve, 0));
99
-
100
- const scroll = findTop(fabric.committed, node => node.viewName === 'RCTScrollView');
101
- expect(scroll).toBeDefined();
102
- if (scroll === undefined) return;
103
-
104
- const chip0InsideScroll = findWithin(scroll, node => node.props.testID === 'chip-0');
105
- expect(chip0InsideScroll).toBeDefined();
106
- });
107
- });
@@ -1,99 +0,0 @@
1
- import '@angular/compiler';
2
- import { Component } from '@angular/core';
3
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
4
- import { installFabric } from '@symbiote-native/test-utils';
5
-
6
- import { mount, unmount } from '../../render';
7
- import { FlatList } from './index';
8
- import {
9
- VListEmptyDirective,
10
- VListFooterDirective,
11
- VListHeaderDirective,
12
- VListItemDirective,
13
- } from '../virtualized-list/directives';
14
-
15
- const ROOT_TAG = 904;
16
- const fabric = installFabric();
17
-
18
- interface IRow {
19
- id: string;
20
- n: number;
21
- }
22
-
23
- const rows: IRow[] = Array.from({ length: 5 }, (_unused, index) => ({
24
- id: `r-${index}`,
25
- n: index,
26
- }));
27
-
28
- // Regression coverage for a real bug: FlatList's single-column path used to forward the app's
29
- // <ng-template vListItem> to the inner VirtualizedList via a bare <ng-content></ng-content>
30
- // passthrough. Angular's @ContentChild does NOT resolve a directive across that second projection
31
- // hop (it only sees what was projected directly onto the querying component's own tag), so
32
- // VirtualizedList's itemDir stayed undefined and every cell rendered empty — a real device symptom
33
- // (a blank list) that headless testing never caught because no test existed for this component
34
- // family. Fixed by having FlatList capture its own @ContentChild (a single, direct hop) and
35
- // re-stamp explicit <ng-template>s onto <VirtualizedList>, mirroring VirtualizedSectionList's own
36
- // (already-working) re-stamp pattern. SectionList had the identical bug, fixed the same way.
37
- @Component({
38
- selector: 'symbiote-flatlist-host',
39
- standalone: true,
40
- imports: [
41
- FlatList,
42
- VListItemDirective,
43
- VListHeaderDirective,
44
- VListFooterDirective,
45
- VListEmptyDirective,
46
- ],
47
- template: `
48
- <FlatList
49
- testID="rows-list"
50
- [data]="rows"
51
- [keyExtractor]="keyExtractor"
52
- [getItemLayout]="getItemLayout"
53
- [style]="{ height: 120 }"
54
- >
55
- <ng-template vListHeader>
56
- <symbiote-text testID="header">header</symbiote-text>
57
- </ng-template>
58
- <ng-template vListItem let-item>
59
- <symbiote-text [testID]="'row-' + item.n">{{ 'row ' + item.n }}</symbiote-text>
60
- </ng-template>
61
- <ng-template vListFooter>
62
- <symbiote-text testID="footer">footer</symbiote-text>
63
- </ng-template>
64
- </FlatList>
65
- `,
66
- })
67
- class FlatListHost {
68
- rows = rows;
69
- keyExtractor = (item: IRow): string => item.id;
70
- getItemLayout = (
71
- _data: unknown,
72
- index: number,
73
- ): { length: number; offset: number; index: number } => ({
74
- length: 30,
75
- offset: 30 * index,
76
- index,
77
- });
78
- }
79
-
80
- beforeEach(() => fabric.reset());
81
- afterEach(() => unmount(ROOT_TAG));
82
-
83
- describe('FlatList', () => {
84
- it('stamps the header, every row, and the footer through the projected templates', async () => {
85
- mount(ROOT_TAG, FlatListHost);
86
- await new Promise<void>(resolve => setTimeout(resolve, 0));
87
- await new Promise<void>(resolve => setTimeout(resolve, 0));
88
-
89
- const texts = fabric.created
90
- .filter(node => node.props.testID !== undefined)
91
- .map(node => node.props.testID);
92
-
93
- expect(texts).toContain('header');
94
- expect(texts).toContain('footer');
95
- for (let index = 0; index < rows.length; index += 1) {
96
- expect(texts).toContain(`row-${index}`);
97
- }
98
- });
99
- });
@@ -1,46 +0,0 @@
1
- // Regression test for the anchor/class bug: Image is its own
2
- // ANCHOR_HOST_COMPONENTS entry — a class= on <Image> resolves onto Image's OWN anchor and needs
3
- // its OWN anchorHostStyle merge (see index.ios.ts/index.android.ts's imageProps override), not
4
- // transitively fixed by anything else. Mirrors pressable.test.ts's "resolves a class=" case.
5
- import '@angular/compiler';
6
- import { Component } from '@angular/core';
7
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
8
- import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
9
- import { installFabric } from '@symbiote-native/test-utils';
10
-
11
- import { mount, unmount } from '../../render';
12
- import { Image } from './index';
13
-
14
- const ROOT_TAG = 915;
15
- const fabric = installFabric();
16
-
17
- @Component({
18
- selector: 'symbiote-image-class-host',
19
- standalone: true,
20
- imports: [Image],
21
- template: `<Image
22
- [testID]="'photo'"
23
- class="card"
24
- [source]="{ uri: 'https://example.com/a.png' }"
25
- />`,
26
- })
27
- class ImageClassHost {}
28
-
29
- beforeEach(() => {
30
- fabric.reset();
31
- registerStyles({ card: { backgroundColor: 'red' } });
32
- });
33
- afterEach(() => {
34
- unmount(ROOT_TAG);
35
- clearGlobalStyles();
36
- });
37
-
38
- describe('Image anchor class= resolution', () => {
39
- it('resolves a class= on the Image use site onto the real committed view, not the anchor', async () => {
40
- mount(ROOT_TAG, ImageClassHost);
41
- await new Promise<void>(resolve => setTimeout(resolve, 0));
42
-
43
- const node = fabric.find(n => n.props.testID === 'photo');
44
- expect(node?.props.backgroundColor).toBe('red');
45
- });
46
- });
@@ -1,48 +0,0 @@
1
- // Regression test for the anchor/class bug: ImageBackground is its own
2
- // ANCHOR_HOST_COMPONENTS entry, separate from the Image it composes internally — a class= on
3
- // <ImageBackground> resolves onto ImageBackground's OWN anchor and needs its OWN anchorHostStyle
4
- // merge onto its wrapper View (see image-background.ts's wrapperStyle getter), NOT onto its
5
- // `imageStyle` (a separate, deliberately untouched prop — see the file's header comment).
6
- // Mirrors pressable.test.ts's "resolves a class=" case.
7
- import '@angular/compiler';
8
- import { Component } from '@angular/core';
9
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
10
- import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
11
- import { installFabric } from '@symbiote-native/test-utils';
12
-
13
- import { mount, unmount } from '../render';
14
- import { ImageBackground } from './image-background';
15
-
16
- const ROOT_TAG = 916;
17
- const fabric = installFabric();
18
-
19
- @Component({
20
- selector: 'symbiote-image-background-class-host',
21
- standalone: true,
22
- imports: [ImageBackground],
23
- template: `
24
- <ImageBackground class="card" [source]="{ uri: 'https://example.com/a.png' }">
25
- <symbiote-text>on top</symbiote-text>
26
- </ImageBackground>
27
- `,
28
- })
29
- class ImageBackgroundClassHost {}
30
-
31
- beforeEach(() => {
32
- fabric.reset();
33
- registerStyles({ card: { backgroundColor: 'red' } });
34
- });
35
- afterEach(() => {
36
- unmount(ROOT_TAG);
37
- clearGlobalStyles();
38
- });
39
-
40
- describe('ImageBackground anchor class= resolution', () => {
41
- it('resolves a class= on the ImageBackground use site onto the real committed wrapper View', async () => {
42
- mount(ROOT_TAG, ImageBackgroundClassHost);
43
- await new Promise<void>(resolve => setTimeout(resolve, 0));
44
-
45
- const node = fabric.find(n => n.props.backgroundColor === 'red');
46
- expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
47
- });
48
- });
@@ -1,79 +0,0 @@
1
- // Regression guard: imageStyle previously accepted ONLY a JS style object/array. It now also
2
- // resolves a class-name string through the shared style registry, same as the `class` prop fix on
3
- // the WRAPPER view (see image-background-class-style.test.ts) — and must land on the INNER image,
4
- // never the wrapper, exactly like that prior fix. Mirrors the Vue twin
5
- // (image-background-style-class.test.ts).
6
- import '@angular/compiler';
7
- import { Component } from '@angular/core';
8
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
9
- import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
10
- import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
11
-
12
- import { mount, unmount } from '../render';
13
- import { ImageBackground } from './image-background';
14
-
15
- const ROOT_TAG = 917;
16
- const fabric = installFabric();
17
- const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
18
-
19
- function committedImage(): IFakeNode {
20
- const node = fabric.find(n => n.viewName === 'RCTImageView');
21
- expect(node, 'the inner image was committed').toBeDefined();
22
- if (node === undefined) throw new Error('unreachable: image missing');
23
- return node;
24
- }
25
-
26
- function committedWrapper(): IFakeNode {
27
- const node = fabric.find(n => n.viewName === 'RCTView');
28
- expect(node, 'the wrapper view was committed').toBeDefined();
29
- if (node === undefined) throw new Error('unreachable: wrapper missing');
30
- return node;
31
- }
32
-
33
- @Component({
34
- selector: 'symbiote-image-background-style-class-host',
35
- standalone: true,
36
- imports: [ImageBackground],
37
- template: `<ImageBackground
38
- [source]="{ uri: 'https://example.com/a.png' }"
39
- [imageStyle]="'tinted'"
40
- />`,
41
- })
42
- class ImageBackgroundStyleClassHost {}
43
-
44
- @Component({
45
- selector: 'symbiote-image-background-style-object-host',
46
- standalone: true,
47
- imports: [ImageBackground],
48
- template: `<ImageBackground
49
- [source]="{ uri: 'https://example.com/a.png' }"
50
- [imageStyle]="{ opacity: 0.25 }"
51
- />`,
52
- })
53
- class ImageBackgroundStyleObjectHost {}
54
-
55
- beforeEach(() => {
56
- fabric.reset();
57
- registerStyles({ tinted: { opacity: 0.5 } });
58
- });
59
- afterEach(() => {
60
- unmount(ROOT_TAG);
61
- clearGlobalStyles();
62
- });
63
-
64
- describe('ImageBackground imageStyle class-name support', () => {
65
- it('resolves a class-name string onto the inner image, not the wrapper', async () => {
66
- mount(ROOT_TAG, ImageBackgroundStyleClassHost);
67
- await tick();
68
-
69
- expect(committedImage().props.opacity).toBe(0.5);
70
- expect(committedWrapper().props.opacity).toBeUndefined();
71
- });
72
-
73
- it('still accepts an ordinary style object unchanged', async () => {
74
- mount(ROOT_TAG, ImageBackgroundStyleObjectHost);
75
- await tick();
76
-
77
- expect(committedImage().props.opacity).toBe(0.25);
78
- });
79
- });
@@ -1,43 +0,0 @@
1
- import '@angular/compiler';
2
- import { Component } from '@angular/core';
3
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
4
- import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
5
- import { installFabric } from '@symbiote-native/test-utils';
6
-
7
- import { mount, unmount } from '../../render';
8
- import { InputAccessoryView } from './index';
9
-
10
- const ROOT_TAG = 913;
11
- const fabric = installFabric();
12
-
13
- @Component({
14
- selector: 'symbiote-iav-host',
15
- standalone: true,
16
- imports: [InputAccessoryView],
17
- template: `
18
- <InputAccessoryView [testID]="'iav'" class="toolbar">
19
- <symbiote-text>Hello</symbiote-text>
20
- </InputAccessoryView>
21
- `,
22
- })
23
- class InputAccessoryViewHostFixture {}
24
-
25
- beforeEach(() => {
26
- fabric.reset();
27
- });
28
- afterEach(() => {
29
- unmount(ROOT_TAG);
30
- clearGlobalStyles();
31
- });
32
-
33
- describe('InputAccessoryView', () => {
34
- it('resolves a class= on the InputAccessoryView use site onto the real committed view, not the anchor', async () => {
35
- registerStyles({ toolbar: { backgroundColor: 'orange' } });
36
-
37
- mount(ROOT_TAG, InputAccessoryViewHostFixture);
38
- await new Promise<void>(resolve => setTimeout(resolve, 0));
39
-
40
- const node = fabric.find(n => n.props.testID === 'iav');
41
- expect(node?.props.backgroundColor).toBe('orange');
42
- });
43
- });
@@ -1,54 +0,0 @@
1
- import '@angular/compiler';
2
- import { Component } from '@angular/core';
3
- import { afterEach, beforeEach, describe, expect, it } from 'vitest';
4
- import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
5
- import { installFabric } from '@symbiote-native/test-utils';
6
-
7
- import { mount, unmount } from '../../render';
8
- import { KeyboardAvoidingView } from './index';
9
-
10
- const ROOT_TAG = 911;
11
- const fabric = installFabric();
12
-
13
- // KeyboardAvoidingView's ngOnInit subscribes to the Keyboard module, which installs the
14
- // bridgeless device-event hub on first use — needs a fake RN$registerCallableModule so
15
- // installDeviceEventHub() doesn't throw (core/engine/src/native-events.ts). No native event is
16
- // actually emitted in this test, only the subscribe/unsubscribe lifecycle runs.
17
- Object.assign(globalThis, {
18
- RN$registerCallableModule: (
19
- _name: string,
20
- _factory: () => { emit: (eventType: string, ...args: unknown[]) => void },
21
- ): void => {},
22
- });
23
-
24
- @Component({
25
- selector: 'symbiote-kav-host',
26
- standalone: true,
27
- imports: [KeyboardAvoidingView],
28
- template: `
29
- <KeyboardAvoidingView [testID]="'kav'" class="panel">
30
- <symbiote-text>Hello</symbiote-text>
31
- </KeyboardAvoidingView>
32
- `,
33
- })
34
- class KeyboardAvoidingViewHostFixture {}
35
-
36
- beforeEach(() => {
37
- fabric.reset();
38
- });
39
- afterEach(() => {
40
- unmount(ROOT_TAG);
41
- clearGlobalStyles();
42
- });
43
-
44
- describe('KeyboardAvoidingView', () => {
45
- it('resolves a class= on the KeyboardAvoidingView use site onto the real committed view, not the anchor', async () => {
46
- registerStyles({ panel: { backgroundColor: 'teal' } });
47
-
48
- mount(ROOT_TAG, KeyboardAvoidingViewHostFixture);
49
- await new Promise<void>(resolve => setTimeout(resolve, 0));
50
-
51
- const node = fabric.find(n => n.props.testID === 'kav');
52
- expect(node?.props.backgroundColor).toBe('teal');
53
- });
54
- });