@unbound-app/api 0.11.0 → 1.1.0

package/testing/fake-react-native-modules.ts

@@ -0,0 +1,362 @@
+import { createElement, type ReactNode } from 'react';
+
+type Listener = (...args: never[]) => void;
+
+type Children = { children?: ReactNode };
+
+type ValueState = { value: number };
+
+type ValueListener = (state: ValueState) => void;
+
+type AnimationConfig = { toValue?: number };
+
+type InterpolationConfig = { inputRange: number[]; outputRange: (number | string)[] };
+
+type Curve = (value: number) => number;
+
+/** A subscription: `remove` stops it. */
+export type EmitterSubscription = { remove: () => void };
+
+/**
+ * @description `react-native`'s `NativeEventEmitter`: `addListener` subscribes, and a test calls `emit` to fire an event as the native module would.
+ */
+export class NativeEventEmitter {
+	private readonly listeners = new Map<string, Set<Listener>>();
+
+	addListener(event: string, listener: Listener): EmitterSubscription {
+		const set = this.listeners.get(event) ?? new Set<Listener>();
+
+		this.listeners.set(event, set);
+		set.add(listener);
+
+		return { remove: () => void set.delete(listener) };
+	}
+
+	emit(event: string, ...args: unknown[]): void {
+		for (const listener of this.listeners.get(event) ?? []) {
+			(listener as (...params: unknown[]) => void)(...args);
+		}
+	}
+
+	listenerCount(event: string): number {
+		return this.listeners.get(event)?.size ?? 0;
+	}
+
+	removeAllListeners(event?: string): void {
+		if (event === undefined) {
+			this.listeners.clear();
+		} else {
+			this.listeners.delete(event);
+		}
+	}
+}
+
+function channels(hex: string): [number, number, number, number] | undefined {
+	const digits =
+		hex.length === 3 || hex.length === 4
+			? Array.from(hex, (char) => char + char)
+			: hex.match(/../g);
+
+	if (!digits || (digits.length !== 3 && digits.length !== 4)) return;
+
+	const [red, green, blue, alpha = 255] = digits.map((digit) => Number.parseInt(digit, 16));
+
+	return [red, green, blue, alpha].some((value) => Number.isNaN(value))
+		? undefined
+		: [red, green, blue, alpha];
+}
+
+function functional(color: string): [number, number, number, number] | undefined {
+	const open = color.indexOf('(');
+
+	if (open < 0 || !color.endsWith(')')) return;
+
+	const parts = color
+		.slice(open + 1, -1)
+		.split(/[\s,/]+/)
+		.filter(Boolean)
+		.map(Number);
+	const [red, green, blue, alpha = 1] = parts;
+
+	if (parts.length < 3 || parts.some((value) => Number.isNaN(value))) return;
+
+	return [red, green, blue, Math.round(alpha * 255)];
+}
+
+/**
+ * @description `react-native`'s `processColor` for hex and `rgb()`/`rgba()` strings: the colour as the unsigned `0xAARRGGBB` number native receives.
+ * @param color The colour, such as `#5865f2` or `rgba(0, 0, 0, 0.5)`.
+ * @returns The number, `undefined` for a string it cannot read, or `color` itself when it is `null` or `undefined`.
+ */
+export function processColor(color: string | number | null | undefined) {
+	if (color === null || color === undefined) {
+		return color;
+	}
+
+	if (typeof color === 'number') {
+		return color >>> 0;
+	}
+
+	const text = color.trim().toLowerCase();
+	const read = text.startsWith('#') ? channels(text.slice(1)) : functional(text);
+
+	if (!read) return;
+
+	const [red, green, blue, alpha] = read;
+
+	return ((alpha << 24) | (red << 16) | (green << 8) | blue) >>> 0;
+}
+
+/** An animated number: reads and writes like `react-native`'s `Animated.Value`, with no frames. */
+export class AnimatedValue {
+	private current: number;
+	private readonly listeners = new Set<ValueListener>();
+
+	constructor(value: number) {
+		this.current = value;
+	}
+
+	setValue(value: number): void {
+		this.current = value;
+
+		for (const listener of this.listeners) listener({ value });
+	}
+
+	setOffset(): void {}
+
+	flattenOffset(): void {}
+
+	stopAnimation(callback?: (value: number) => void): void {
+		callback?.(this.current);
+	}
+
+	addListener(listener: ValueListener): string {
+		this.listeners.add(listener);
+
+		return String(this.listeners.size);
+	}
+
+	removeAllListeners(): void {
+		this.listeners.clear();
+	}
+
+	interpolate(config: InterpolationConfig) {
+		const { inputRange, outputRange } = config;
+		const index = inputRange.findLastIndex((input) => input <= this.current);
+
+		return outputRange[Math.max(index, 0)];
+	}
+
+	__getValue(): number {
+		return this.current;
+	}
+}
+
+type Finish = { finished: boolean };
+
+type Completion = (result: Finish) => void;
+
+type Animation = { start: (callback?: Completion) => void; stop: () => void; reset: () => void };
+
+function instant(run: () => void): Animation {
+	return {
+		start(callback) {
+			run();
+			callback?.({ finished: true });
+		},
+		stop() {},
+		reset() {},
+	};
+}
+
+function toValue(config: AnimationConfig) {
+	return config.toValue ?? 0;
+}
+
+function settle(animations: Animation[]): Animation {
+	return instant(() => {
+		for (const animation of animations) animation.start();
+	});
+}
+
+function component(name: string) {
+	return (props: Children) => createElement(name, props);
+}
+
+/**
+ * @description Creates the `Animated` of `react-native`: every animation finishes at once with its end value, and its views are host nodes `find` reaches by name.
+ * @returns The module.
+ */
+export function createFakeAnimated() {
+	return {
+		Value: AnimatedValue,
+		ValueXY: class AnimatedValueXY {
+			x = new AnimatedValue(0);
+			y = new AnimatedValue(0);
+		},
+		timing: (value: AnimatedValue, config: AnimationConfig) =>
+			instant(() => value.setValue(toValue(config))),
+		spring: (value: AnimatedValue, config: AnimationConfig) =>
+			instant(() => value.setValue(toValue(config))),
+		decay: () => instant(() => {}),
+		parallel: settle,
+		sequence: settle,
+		stagger: (_delay: number, animations: Animation[]) => settle(animations),
+		delay: () => instant(() => {}),
+		loop: (animation: Animation) => instant(() => animation.start()),
+		event: () => () => {},
+		add: (left: AnimatedValue, right: AnimatedValue) =>
+			new AnimatedValue(left.__getValue() + right.__getValue()),
+		subtract: (left: AnimatedValue, right: AnimatedValue) =>
+			new AnimatedValue(left.__getValue() - right.__getValue()),
+		multiply: (left: AnimatedValue, right: AnimatedValue) =>
+			new AnimatedValue(left.__getValue() * right.__getValue()),
+		divide: (left: AnimatedValue, right: AnimatedValue) =>
+			new AnimatedValue(left.__getValue() / right.__getValue()),
+		createAnimatedComponent: <T>(wrapped: T) => wrapped,
+		View: 'Animated.View',
+		Text: 'Animated.Text',
+		Image: 'Animated.Image',
+		ScrollView: 'Animated.ScrollView',
+		FlatList: component('Animated.FlatList'),
+	};
+}
+
+const identity = (value: number) => value;
+
+/**
+ * @description Passes an easing curve through, since the fake draws no frames.
+ * @param curve The curve.
+ * @returns The same curve.
+ */
+function keep(curve: Curve): Curve {
+	return curve;
+}
+
+/**
+ * @description `Easing.bezier` for the fake: every curve is linear.
+ * @returns The linear curve.
+ */
+function bezier(): Curve {
+	return identity;
+}
+
+/** The `Easing` of `react-native`: every curve is linear, as there are no frames to draw. */
+export const Easing = {
+	linear: identity,
+	ease: identity,
+	quad: identity,
+	cubic: identity,
+	sin: identity,
+	circle: identity,
+	exp: identity,
+	bounce: identity,
+	in: keep,
+	out: keep,
+	inOut: keep,
+	bezier,
+};
+
+/**
+ * @description `Share.share` for the fake: sharing succeeds at once.
+ * @returns The shared action.
+ */
+async function share() {
+	return { action: 'sharedAction' };
+}
+
+/** The `Share` of `react-native`: sharing succeeds at once. */
+export const Share = {
+	sharedAction: 'sharedAction',
+	dismissedAction: 'dismissedAction',
+	share,
+};
+
+const SUBSCRIPTION: EmitterSubscription = { remove: () => {} };
+
+/** `react-native`'s `AccessibilityInfo`: every system setting reads as off, and no event fires. */
+export const AccessibilityInfo = {
+	/**
+	 * @description Reads whether reduce motion is on.
+	 * @returns Always `false`.
+	 */
+	isReduceMotionEnabled: async () => false,
+	/**
+	 * @description Reads whether reduce transparency is on.
+	 * @returns Always `false`.
+	 */
+	isReduceTransparencyEnabled: async () => false,
+	/**
+	 * @description Reads whether a screen reader is on.
+	 * @returns Always `false`.
+	 */
+	isScreenReaderEnabled: async () => false,
+	/**
+	 * @description Reads whether bold text is on.
+	 * @returns Always `false`.
+	 */
+	isBoldTextEnabled: async () => false,
+	/**
+	 * @description Reads whether grayscale is on.
+	 * @returns Always `false`.
+	 */
+	isGrayscaleEnabled: async () => false,
+	/**
+	 * @description Reads whether inverted colours is on.
+	 * @returns Always `false`.
+	 */
+	isInvertColorsEnabled: async () => false,
+	/**
+	 * @description Announces nothing.
+	 * @returns Nothing.
+	 */
+	announceForAccessibility: () => {},
+	/**
+	 * @description Focuses nothing.
+	 * @returns Nothing.
+	 */
+	setAccessibilityFocus: () => {},
+	/**
+	 * @description Subscribes to an event that never fires.
+	 * @returns A subscription whose `remove` does nothing.
+	 */
+	addEventListener: () => SUBSCRIPTION,
+};
+
+/** `react-native`'s `AppState`: the app is always `active`, and no event fires. */
+export const AppState = {
+	currentState: 'active',
+	isAvailable: true,
+	/**
+	 * @description Subscribes to an event that never fires.
+	 * @returns A subscription whose `remove` does nothing.
+	 */
+	addEventListener: () => SUBSCRIPTION,
+};
+
+/** What `AppRegistry` keeps for a name: the component getter or runnable it was registered with. */
+// UNKNOWN: a registered component getter or runnable returns whatever React Native's does.
+type Registered = () => unknown;
+
+/**
+ * @description Creates `react-native`'s `AppRegistry`, which keeps each component registered under its name.
+ * @returns The registry; `runApplication` does nothing.
+ */
+export function createAppRegistry() {
+	const components = new Map<string, Registered>();
+
+	return {
+		registerComponent(name: string, getComponent: Registered) {
+			components.set(name, getComponent);
+
+			return name;
+		},
+		registerRunnable(name: string, runnable: Registered) {
+			components.set(name, runnable);
+
+			return name;
+		},
+		getAppKeys: () => [...components.keys()],
+		runApplication: () => {},
+	};
+}

package/testing/fake-react-native.ts

@@ -0,0 +1,180 @@
+import type {
+	ActivityIndicatorProps,
+	FlatListProps,
+	ImageProps,
+	ModalProps,
+	PressableProps,
+	ScrollViewProps,
+	SwitchProps,
+	TextInputProps,
+	TextProps,
+	TouchableOpacityProps,
+	ViewProps,
+} from 'react-native';
+import { createElement, Fragment, type ReactNode } from 'react';
+
+import type { ReactValue } from './react-value';
+import type { FakeModule } from './fake-metro';
+
+import {
+	AccessibilityInfo,
+	AppState,
+	createAppRegistry,
+	createFakeAnimated,
+	Easing,
+	NativeEventEmitter,
+	processColor,
+	Share,
+} from './fake-react-native-modules';
+
+/** The props of each host component the fake `react-native` renders, by name, for `find('Text')`. */
+export type HostPropsByName = {
+	View: ViewProps;
+	Text: TextProps;
+	Image: ImageProps;
+	ImageBackground: ImageProps;
+	ScrollView: ScrollViewProps;
+	Pressable: PressableProps;
+	TouchableOpacity: TouchableOpacityProps;
+	TouchableHighlight: TouchableOpacityProps;
+	TouchableWithoutFeedback: TouchableOpacityProps;
+	TextInput: TextInputProps;
+	Switch: SwitchProps;
+	ActivityIndicator: ActivityIndicatorProps;
+	Modal: ModalProps;
+	SafeAreaView: ViewProps;
+	KeyboardAvoidingView: ViewProps;
+	FlatList: Omit<FlatListProps<unknown>, 'data' | 'renderItem'>;
+	SvgXml: {
+		xml: string;
+		asset: string;
+		color?: string;
+		width?: number | string;
+		height?: number | string;
+	};
+};
+
+/** A host component's name. */
+export type HostName = keyof HostPropsByName;
+
+const HOSTS = [
+	'View',
+	'Text',
+	'Image',
+	'ImageBackground',
+	'ScrollView',
+	'Pressable',
+	'TouchableOpacity',
+	'TouchableHighlight',
+	'TouchableWithoutFeedback',
+	'TextInput',
+	'Switch',
+	'ActivityIndicator',
+	'Modal',
+	'SafeAreaView',
+	'KeyboardAvoidingView',
+] as const satisfies readonly HostName[];
+
+type Style = FakeModule;
+
+type StyleValue = Style | false | null | undefined | StyleValue[];
+
+function flattenStyle(style: StyleValue): Style {
+	if (Array.isArray(style)) {
+		return Object.assign({}, ...style.map(flattenStyle));
+	}
+
+	return style ? { ...style } : {};
+}
+
+type ListItemInfo = { item: ReactValue; index: number };
+
+type PlatformChoices<T> = { ios?: T; android?: T; native?: T; default?: T };
+
+type ListProps = {
+	data?: readonly ReactValue[] | null;
+	renderItem?: (info: ListItemInfo) => ReactNode;
+	keyExtractor?: (item: ReactValue, index: number) => string;
+	ListHeaderComponent?: ReactNode;
+	ListFooterComponent?: ReactNode;
+	ListEmptyComponent?: ReactNode;
+};
+
+// A list renders every item at once, so `find` reaches each row.
+function FlatList({ data, renderItem, keyExtractor, ...rest }: ListProps) {
+	const items = data ?? [];
+	const rows = items.map((item, index) =>
+		createElement(
+			Fragment,
+			{ key: keyExtractor?.(item, index) ?? String(index) },
+			renderItem?.({ item, index }),
+		),
+	);
+
+	return createElement(
+		'FlatList',
+		rest,
+		rest.ListHeaderComponent,
+		items.length ? rows : rest.ListEmptyComponent,
+		rest.ListFooterComponent,
+	);
+}
+
+/**
+ * @description Creates the `react-native` a test imports: each primitive a host component named after itself,
+ * and the plain modules (`StyleSheet`, `Platform`, `Dimensions`, `Animated`, `Share`, `AccessibilityInfo`, `AppRegistry`, `AppState`, `NativeModules`) plugins read at import.
+ * @param os The platform `Platform.OS` reports, read on each access so a test can switch it.
+ * @returns The module's exports.
+ */
+export function createFakeReactNative(os: () => 'ios' | 'android' = () => 'ios') {
+	const hosts = Object.fromEntries(HOSTS.map((name) => [name, name]));
+	// Empty: a test adds the modules a plugin reads.
+	const nativeModules: Record<string, FakeModule> = {};
+	const window = { width: 390, height: 844, scale: 3, fontScale: 1 };
+
+	return {
+		...hosts,
+		AccessibilityInfo,
+		AppRegistry: createAppRegistry(),
+		AppState,
+		NativeModules: nativeModules,
+		FlatList,
+		Animated: createFakeAnimated(),
+		Easing,
+		NativeEventEmitter,
+		Share,
+		processColor,
+		StyleSheet: {
+			create: <T>(styles: T) => styles,
+			flatten: flattenStyle,
+			compose: (left: StyleValue, right: StyleValue) => [left, right],
+			hairlineWidth: 1 / 3,
+			absoluteFill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+			absoluteFillObject: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+		},
+		Platform: {
+			get OS() {
+				return os();
+			},
+			get Version() {
+				return os() === 'ios' ? '18.0' : 35;
+			},
+			select: <T>(choices: PlatformChoices<T>) =>
+				choices[os()] ?? choices.native ?? choices.default,
+		},
+		Dimensions: {
+			get: (_dimension?: 'window' | 'screen') => window,
+			set: (next: Partial<typeof window>) => void Object.assign(window, next),
+			addEventListener: () => ({ remove: () => {} }),
+		},
+		PixelRatio: { get: () => window.scale, getFontScale: () => window.fontScale },
+		Appearance: {
+			getColorScheme: () => 'dark',
+			addChangeListener: () => ({ remove: () => {} }),
+		},
+		Linking: { openURL: async () => {}, canOpenURL: async () => true },
+		Keyboard: { dismiss: () => {}, addListener: () => ({ remove: () => {} }) },
+		useWindowDimensions: () => window,
+		useColorScheme: () => 'dark',
+	};
+}

package/testing/fake-react.ts

@@ -0,0 +1,54 @@
+import type { AnyObject } from '../src/patcher';
+
+/** What `createElement` returns: the element's type and its props with `children`. */
+export type FakeElement = {
+	type: string | ((props: FakeProps) => FakeElement | null);
+	props: FakeProps;
+};
+
+type FakeProps = AnyObject & {
+	children?: FakeChild[];
+};
+
+type Ref<T> = {
+	current: T;
+};
+
+type FakeChild = FakeElement | string | number | boolean | null | undefined;
+
+type SetState<T> = (next: T | ((previous: T) => T)) => void;
+
+/** A React without a renderer: elements are plain objects and hooks run once, as on a first render. */
+export type FakeReact = {
+	Fragment: string;
+	createElement: (
+		type: FakeElement['type'],
+		props?: FakeProps | null,
+		...children: FakeChild[]
+	) => FakeElement;
+	useState: <T>(initial: T | (() => T)) => [T, SetState<T>];
+	useMemo: <T>(factory: () => T) => T;
+	useCallback: <T>(callback: T) => T;
+	useRef: <T>(initial: T) => Ref<T>;
+	useEffect: (effect: () => void | (() => void)) => void;
+};
+
+/**
+ * @description Creates a React whose elements are plain objects, for tests that call components without rendering them.
+ * @returns The fake React.
+ */
+export function createFakeReact(): FakeReact {
+	return {
+		Fragment: 'Fragment',
+		createElement: (type, props, ...children) => ({ type, props: { ...props, children } }),
+		useState<T>(initial: T | (() => T)): [T, SetState<T>] {
+			const value = initial instanceof Function ? initial() : initial;
+
+			return [value, () => {}];
+		},
+		useMemo: (factory) => factory(),
+		useCallback: (callback) => callback,
+		useRef: (initial) => ({ current: initial }),
+		useEffect: () => {},
+	};
+}