@blario/react-native 0.1.4 → 0.1.6

package/src/fiber/text.ts

@@ -3,6 +3,8 @@ import type { Fiber } from './types.ts';
 
 const PRIVATE_USE_GLYPHS = /[-\u{F0000}-\u{10FFFF}]/gu;
 
+export const TEXT_HOST_TYPE = 'RCTText';
+
 export function normalizeText(value: string): string {
   return value.replace(PRIVATE_USE_GLYPHS, '').replace(/\s+/g, ' ').trim();
 }

package/src/snapshot/capture.ts

@@ -12,8 +12,8 @@ import { describeScrollDirections } from './scroll.ts';
 import { groupIntoLines, limitCharacters, type PositionedText } from './text-layout.ts';
 import { orderForReading } from './ordering.ts';
 import { buildView } from './view.ts';
-import { classifyVisibility, keepInTextTree, measureScrollGeometries, type ScrollGeometries } from './visibility.ts';
-import { dropWrapperDuplicates, limitOffscreen, type MeasuredCandidate } from './wrappers.ts';
+import { classifyVisibility, keepInTextTree, markOffscreenText, measureScrollGeometries, type ScrollGeometries } from './visibility.ts';
+import { dropWrapperDuplicates, type MeasuredCandidate } from './wrappers.ts';
 
 export interface Snapshot {
   screen: string;
@@ -27,6 +27,7 @@ export interface SnapshotDependencies {
   getAnchorFiber: () => Fiber | null;
   registry: ElementRegistry;
   getViewport: () => Size;
+  getWindow: () => Size;
   getExtraRoutes: () => string[];
 }
 
@@ -77,7 +78,7 @@ export class SnapshotCapturer {
           return null;
         }
         const visibility = classifyVisibility(rect, viewport, block.scrollContainers, geometries);
-        return keepInTextTree(visibility, rect, viewport, options.viewportOnly) ? { rect, text: block.text, heading: block.heading } : null;
+        return keepInTextTree(visibility, rect, viewport, options.viewportOnly) ? { rect, text: markOffscreenText(visibility, block.text), heading: block.heading } : null;
       }),
     );
     const lines = limitCharacters(groupIntoLines(measured.filter((entry): entry is PositionedText => entry !== null)), options.maxChars);
@@ -91,8 +92,9 @@ export class SnapshotCapturer {
     return root === null ? [] : collect(root).focusedScreens;
   }
 
+  // The whole window, not the part above the keyboard: what the keyboard covers is still pressable.
   private async measureVisible(kept: Candidate[], geometries: ScrollGeometries): Promise<MeasuredCandidate[]> {
-    const viewport = this.dependencies.getViewport();
+    const viewport = this.dependencies.getWindow();
     const measured = await Promise.all(
       kept.map(async (candidate): Promise<MeasuredCandidate | null> => {
         const rect = await measureHost(candidate.host);
@@ -104,10 +106,10 @@ export class SnapshotCapturer {
           return null;
         }
         const offscreen = visibility.kind === 'offscreen' ? visibility : null;
-        return { candidate, rect, offscreen: offscreen?.direction ?? null, distance: offscreen?.distance ?? 0 };
+        return { candidate, rect, offscreen: offscreen?.direction ?? null };
       }),
     );
-    return limitOffscreen(measured.filter((entry): entry is MeasuredCandidate => entry !== null));
+    return measured.filter((entry): entry is MeasuredCandidate => entry !== null);
   }
 
   private assemble(
@@ -124,6 +126,7 @@ export class SnapshotCapturer {
         rect,
         scroll: candidate.kind === 'scroll' ? describeScrollDirections(geometries.get(candidate.fiber) ?? null) : null,
         offscreen,
+        wheelOption: candidate.wheelOption,
       }),
     );
     if (mode === 'register') {

package/src/snapshot/collect.ts

@@ -1,5 +1,5 @@
 import { childrenOf, componentName, firstHostDescendant, isHostComponent, propsOf } from '../fiber/reader.ts';
-import { collectText } from '../fiber/text.ts';
+import { collectText, TEXT_HOST_TYPE } from '../fiber/text.ts';
 import type { Fiber } from '../fiber/types.ts';
 import { classify } from './classify.ts';
 import type { ElementKind } from './kinds.ts';
@@ -19,7 +19,6 @@ export interface Candidate {
 }
 
 const MODAL_COMPONENT_NAME = 'Modal';
-const TEXT_HOST_TYPE = 'RCTText';
 const WHEEL_OPTION_LIMIT = 24;
 const TEXT_BLOCK_LIMIT = 800;
 const HEADING_ROLES: readonly string[] = ['header', 'heading'];

package/src/snapshot/render.ts

@@ -17,7 +17,7 @@ function flag(name: string, enabled: boolean): Attribute {
 function renderAttributes(attributes: Attribute[]): string {
   return attributes
     .filter((attribute): attribute is readonly [string, string] => attribute[1] !== null)
-    .map(([name, value]) => (value === '' ? name : `${name}=${clip(value, ATTRIBUTE_LIMIT)}`))
+    .map(([name, value]) => (value === '' ? name : `${name}=${name === 'list' ? value : clip(value, ATTRIBUTE_LIMIT)}`))
     .filter((rendered) => rendered.length > 0)
     .join(' ');
 }
@@ -51,6 +51,7 @@ function renderButton(view: ElementView, twins: number): string {
   const tag = openTag('button', [
     ['role', view.role],
     ['testID', view.testID],
+    ['list', view.list],
     ['icon', view.icon],
     ['offscreen', view.offscreen],
     ...commonStateAttributes(view),
@@ -94,6 +95,7 @@ function renderSwitch(view: ElementView, twins: number): string {
 function renderScroll(view: ElementView): string {
   const tag = openTag('scroll', [
     ['testID', view.testID],
+    ['list', view.list],
     ['scroll', view.scroll],
   ]);
   return `${tag} />`;
@@ -113,7 +115,7 @@ function renderBody(view: ElementView, twins: number): string {
 }
 
 export function twinSignature(view: ElementView): string {
-  return [view.kind, view.label, view.icon ?? '', view.role ?? ''].join('|');
+  return [view.kind, view.label, view.icon ?? '', view.role ?? '', view.list ?? ''].join('|');
 }
 
 export function countTwins(views: ElementView[]): Map<string, number> {

package/src/snapshot/view.ts

@@ -2,6 +2,7 @@ import { collectText, precedingText } from '../fiber/text.ts';
 import { propsOf } from '../fiber/reader.ts';
 import type { Fiber } from '../fiber/types.ts';
 import type { Rect } from '../host/rect.ts';
+import { scrollInstanceOf } from './classify.ts';
 import { iconNameIn } from './icon.ts';
 import type { Offscreen } from './visibility.ts';
 import type { ElementKind } from './kinds.ts';
@@ -33,9 +34,24 @@ export interface ElementView {
   selected: boolean | null;
   scroll: string | null;
   offscreen: Offscreen | null;
+  list: string | null;
   rect: Rect;
 }
 
+const LIST_NAME_DEPTH = 8;
+
+// What a list is called: hosts name the view around it, as AgendaPro does with Hours and Minutes.
+export function listNameOf(list: Fiber, ancestors: Fiber[]): string | null {
+  for (const fiber of [list, ...ancestors.slice(-LIST_NAME_DEPTH).reverse()]) {
+    const props = propsOf(fiber);
+    const name = explicitLabelOf(props) ?? testIdOf(props);
+    if (name !== null) {
+      return name;
+    }
+  }
+  return null;
+}
+
 function labelFor(kind: ElementKind, fiber: Fiber, ancestors: Fiber[]): string {
   const explicit = explicitLabelOf(propsOf(fiber));
   if (explicit !== null) {
@@ -57,6 +73,23 @@ export interface ViewSource {
   rect: Rect;
   scroll: string | null;
   offscreen?: Offscreen | null;
+  wheelOption?: boolean;
+}
+
+function listOfView({ kind, fiber, ancestors, wheelOption }: ViewSource): string | null {
+  if (kind === 'scroll') {
+    return listNameOf(fiber, ancestors);
+  }
+  if (wheelOption !== true) {
+    return null;
+  }
+  for (let index = ancestors.length - 1; index >= 0; index -= 1) {
+    const ancestor = ancestors[index];
+    if (ancestor !== undefined && scrollInstanceOf(ancestor) !== null) {
+      return listNameOf(ancestor, ancestors.slice(0, index));
+    }
+  }
+  return null;
 }
 
 export function buildView(source: ViewSource): ElementView {
@@ -82,6 +115,7 @@ export function buildView(source: ViewSource): ElementView {
     selected: flags.selected,
     scroll,
     offscreen,
+    list: listOfView(source),
     rect,
   };
 }

package/src/snapshot/visibility.ts

@@ -16,7 +16,7 @@ export type Offscreen = 'above' | 'below' | 'left' | 'right';
 
 export type Visibility =
   | { kind: 'visible' }
-  | { kind: 'offscreen'; direction: Offscreen; distance: number }
+  | { kind: 'offscreen'; direction: Offscreen }
   | { kind: 'hidden' };
 
 const VISIBLE: Visibility = { kind: 'visible' };
@@ -25,13 +25,9 @@ const HIDDEN: Visibility = { kind: 'hidden' };
 function offscreenAgainst(rect: Rect, geometry: ScrollGeometry): Visibility {
   const { viewport, horizontal } = geometry;
   if (horizontal) {
-    return rect.x >= viewport.x + viewport.width
-      ? { kind: 'offscreen', direction: 'right', distance: rect.x - (viewport.x + viewport.width) }
-      : { kind: 'offscreen', direction: 'left', distance: viewport.x - (rect.x + rect.width) };
+    return { kind: 'offscreen', direction: rect.x >= viewport.x + viewport.width ? 'right' : 'left' };
   }
-  return rect.y >= viewport.y + viewport.height
-    ? { kind: 'offscreen', direction: 'below', distance: rect.y - (viewport.y + viewport.height) }
-    : { kind: 'offscreen', direction: 'above', distance: viewport.y - (rect.y + rect.height) };
+  return { kind: 'offscreen', direction: rect.y >= viewport.y + viewport.height ? 'below' : 'above' };
 }
 
 export function classifyVisibility(rect: Rect, window: Size, containers: Fiber[], geometries: ScrollGeometries): Visibility {
@@ -52,10 +48,15 @@ function isBeyondWindowEdge(rect: Rect, window: Size): boolean {
   return rect.x >= window.width || rect.x + rect.width <= 0;
 }
 
+const OFFSCREEN_MARK = '[off-screen]';
+
+// Text off to the side can be another page of a pager or another day of a calendar, so it can't read as what's on screen.
+export function markOffscreenText(visibility: Visibility, text: string): string {
+  const sideways = visibility.kind === 'offscreen' && (visibility.direction === 'left' || visibility.direction === 'right');
+  return sideways ? `${OFFSCREEN_MARK} ${text}` : text;
+}
+
 export function keepInTextTree(visibility: Visibility, rect: Rect, window: Size, viewportOnly: boolean): boolean {
-  if (visibility.kind === 'offscreen' && (visibility.direction === 'left' || visibility.direction === 'right')) {
-    return false;
-  }
   if (visibility.kind === 'hidden' && isBeyondWindowEdge(rect, window)) {
     return false;
   }

package/src/snapshot/wrappers.ts

@@ -7,7 +7,6 @@ export interface MeasuredCandidate {
   candidate: Candidate;
   rect: Rect;
   offscreen: Offscreen | null;
-  distance: number;
 }
 
 const RECT_TOLERANCE = 1;
@@ -56,15 +55,3 @@ export function dropWrapperDuplicates(measured: MeasuredCandidate[]): MeasuredCa
   }
   return measured.filter((entry) => !wrappers.has(entry));
 }
-
-const OFFSCREEN_LIMIT = 30;
-
-export function limitOffscreen(measured: MeasuredCandidate[]): MeasuredCandidate[] {
-  // Every option of a wheel stays listed: one dropped here could never be selected.
-  const hidden = measured.filter((entry) => entry.offscreen !== null && entry.candidate.kind !== 'scroll' && entry.candidate.wheelOption !== true);
-  if (hidden.length <= OFFSCREEN_LIMIT) {
-    return measured;
-  }
-  const dropped = new Set(hidden.sort((left, right) => left.distance - right.distance).slice(OFFSCREEN_LIMIT));
-  return measured.filter((entry) => !dropped.has(entry));
-}

package/src/version.ts

@@ -1 +1 @@
-export const SDK_VERSION = '0.1.4';
+export const SDK_VERSION = '0.1.6';