@teardown/dev-client 2.0.44

package/src/dev-client-provider.tsx

@@ -0,0 +1,204 @@
+/**
+ * DevClientProvider
+ *
+ * Root provider component that wraps the application and provides
+ * development client functionality including dev menu and splash screen.
+ */
+
+import React, { createContext, type PropsWithChildren, useContext, useMemo } from "react";
+import { DevMenu } from "./components/dev-menu";
+import { SplashScreen } from "./components/splash-screen";
+import { useBundlerStatus } from "./hooks/use-bundler-status";
+import { useDevMenu } from "./hooks/use-dev-menu";
+import { useSplashScreen } from "./hooks/use-splash-screen";
+import type { DevClientConfig, DevClientContextValue } from "./types";
+
+/**
+ * Default configuration
+ */
+const DEFAULT_CONFIG: DevClientConfig = {
+	enableShakeGesture: true,
+	enableThreeFingerTap: true,
+	splash: {
+		backgroundColor: "#ffffff",
+		minDisplayTime: 500,
+		fadeOutDuration: 300,
+		autoHide: true,
+	},
+	verbose: __DEV__,
+};
+
+/**
+ * DevClient context
+ */
+const DevClientContext = createContext<DevClientContextValue | null>(null);
+
+/**
+ * DevClientProvider props
+ */
+export interface DevClientProviderProps extends PropsWithChildren {
+	/** Configuration options */
+	config?: DevClientConfig;
+
+	/** Whether to show splash screen (default: true in dev) */
+	showSplash?: boolean;
+
+	/** Whether to enable dev menu (default: true in dev) */
+	enableDevMenu?: boolean;
+}
+
+/**
+ * DevClientProvider component
+ *
+ * Wraps the application and provides development client functionality.
+ *
+ * @example
+ * ```tsx
+ * import { DevClientProvider } from '@teardown/dev-client';
+ *
+ * function Root() {
+ *   return (
+ *     <DevClientProvider
+ *       config={{
+ *         enableShakeGesture: true,
+ *         splash: {
+ *           backgroundColor: '#000000',
+ *           logo: require('./assets/logo.png'),
+ *         },
+ *       }}
+ *     >
+ *       <App />
+ *     </DevClientProvider>
+ *   );
+ * }
+ * ```
+ */
+export function DevClientProvider(props: DevClientProviderProps): React.JSX.Element {
+	const { children, config: userConfig, showSplash = __DEV__, enableDevMenu = __DEV__ } = props;
+
+	// Merge config with defaults
+	const config: DevClientConfig = useMemo(
+		() => ({
+			...DEFAULT_CONFIG,
+			...userConfig,
+			splash: {
+				...DEFAULT_CONFIG.splash,
+				...userConfig?.splash,
+			},
+		}),
+		[userConfig]
+	);
+
+	// Bundler status
+	const bundlerStatus = useBundlerStatus({
+		bundlerUrl: config.bundlerUrl,
+		enablePolling: __DEV__,
+	});
+
+	// Dev menu
+	const devMenu = useDevMenu({
+		enableShakeGesture: enableDevMenu && config.enableShakeGesture,
+		bundlerStatus,
+	});
+
+	// Splash screen
+	const splashScreen = useSplashScreen({
+		config: config.splash,
+	});
+
+	// Context value
+	const contextValue: DevClientContextValue = useMemo(
+		() => ({
+			config,
+			devMenu: {
+				state: devMenu.state,
+				actions: devMenu.actions,
+				defaultItems: devMenu.defaultMenuItems,
+			},
+			splashScreen: {
+				isVisible: splashScreen.isVisible,
+				hide: splashScreen.hide,
+				show: splashScreen.show,
+			},
+			bundlerStatus,
+		}),
+		[config, devMenu, splashScreen, bundlerStatus]
+	);
+
+	return (
+		<DevClientContext.Provider value={contextValue}>
+			{children}
+
+			{/* Dev Menu */}
+			{enableDevMenu && (
+				<DevMenu
+					visible={devMenu.state.isVisible}
+					onDismiss={devMenu.actions.hide}
+					items={[...devMenu.defaultMenuItems, ...(config.customMenuItems ?? [])]}
+					bundlerStatus={bundlerStatus}
+					isLoading={devMenu.state.isLoading}
+					testID="teardown-dev-menu"
+				/>
+			)}
+
+			{/* Splash Screen */}
+			{showSplash && (
+				<SplashScreen
+					visible={splashScreen.isVisible}
+					backgroundColor={splashScreen.config.backgroundColor}
+					logo={splashScreen.config.logo}
+					resizeMode={splashScreen.config.resizeMode}
+					opacity={splashScreen.opacity}
+					isFading={splashScreen.isFading}
+					testID="teardown-splash-screen"
+				/>
+			)}
+		</DevClientContext.Provider>
+	);
+}
+
+/**
+ * Hook to access dev client context
+ *
+ * @returns Dev client context value
+ * @throws Error if used outside DevClientProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { devMenu, splashScreen } = useDevClient();
+ *
+ *   return (
+ *     <Button
+ *       title="Open Dev Menu"
+ *       onPress={devMenu.actions.show}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useDevClient(): DevClientContextValue {
+	const context = useContext(DevClientContext);
+
+	if (!context) {
+		throw new Error("useDevClient must be used within a DevClientProvider");
+	}
+
+	return context;
+}
+
+/**
+ * Hook to access dev menu (convenience wrapper)
+ */
+export function useDevClientMenu() {
+	const { devMenu } = useDevClient();
+	return devMenu;
+}
+
+/**
+ * Hook to access splash screen (convenience wrapper)
+ */
+export function useDevClientSplash() {
+	const { splashScreen } = useDevClient();
+	return splashScreen;
+}

package/src/hooks/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Hook exports
+ */
+
+export {
+	createBundlerStatus,
+	type UseBundlerStatusOptions,
+	useBundlerStatus,
+} from "./use-bundler-status";
+
+export {
+	createInitialDevMenuState,
+	type DefaultMenuItemHandlers,
+	getDefaultMenuItems,
+	type UseDevMenuOptions,
+	type UseDevMenuReturn,
+	useDevMenu,
+} from "./use-dev-menu";
+
+export {
+	type UseSplashScreenOptions,
+	type UseSplashScreenReturn,
+	useSplashScreen,
+} from "./use-splash-screen";

package/src/hooks/use-bundler-status.ts

@@ -0,0 +1,139 @@
+/**
+ * Bundler status hook
+ *
+ * Tracks connection status to the Metro bundler.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { BundlerStatus } from "../types";
+import { getBundlerUrl, isValidBundlerUrl } from "../utils/bundler-url";
+import { isEmulator as checkIsEmulator, currentPlatform } from "../utils/platform";
+
+/**
+ * Default bundler status
+ */
+const DEFAULT_STATUS: BundlerStatus = {
+	connected: false,
+	url: null,
+	error: null,
+	lastConnectedAt: null,
+};
+
+/**
+ * Create a bundler status object
+ *
+ * @param overrides - Partial status to override defaults
+ * @returns Complete bundler status object
+ */
+export function createBundlerStatus(overrides: Partial<BundlerStatus> = {}): BundlerStatus {
+	return {
+		...DEFAULT_STATUS,
+		...overrides,
+	};
+}
+
+/**
+ * Options for useBundlerStatus hook
+ */
+export interface UseBundlerStatusOptions {
+	/** Custom bundler URL override */
+	bundlerUrl?: string;
+
+	/** Custom port */
+	port?: number;
+
+	/** Polling interval in ms (default: 5000) */
+	pollInterval?: number;
+
+	/** Enable automatic polling (default: true in __DEV__) */
+	enablePolling?: boolean;
+}
+
+/**
+ * Hook to track Metro bundler connection status
+ *
+ * @param options - Configuration options
+ * @returns Current bundler status
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const status = useBundlerStatus();
+ *
+ *   if (!status.connected) {
+ *     return <Text>Connecting to bundler...</Text>;
+ *   }
+ *
+ *   return <Text>Connected to {status.url}</Text>;
+ * }
+ * ```
+ */
+export function useBundlerStatus(options: UseBundlerStatusOptions = {}): BundlerStatus {
+	const { bundlerUrl, port, pollInterval = 5000, enablePolling = __DEV__ } = options;
+
+	const [status, setStatus] = useState<BundlerStatus>(DEFAULT_STATUS);
+	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+	const checkConnection = useCallback(async () => {
+		try {
+			const isEmu = await checkIsEmulator();
+			const url =
+				bundlerUrl && isValidBundlerUrl(bundlerUrl)
+					? bundlerUrl
+					: getBundlerUrl({
+							platform: currentPlatform,
+							isEmulator: isEmu,
+							port,
+						});
+
+			// Check bundler status endpoint
+			const statusUrl = `${url}/status`;
+			const response = await fetch(statusUrl, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+			});
+
+			if (response.ok) {
+				setStatus({
+					connected: true,
+					url,
+					error: null,
+					lastConnectedAt: new Date(),
+				});
+			} else {
+				setStatus((prev) => ({
+					...prev,
+					connected: false,
+					url,
+					error: `Bundler returned status ${response.status}`,
+				}));
+			}
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : "Unknown error";
+			setStatus((prev) => ({
+				...prev,
+				connected: false,
+				error: errorMessage,
+			}));
+		}
+	}, [bundlerUrl, port]);
+
+	useEffect(() => {
+		// Initial check
+		checkConnection();
+
+		// Set up polling if enabled
+		if (enablePolling && pollInterval > 0) {
+			intervalRef.current = setInterval(checkConnection, pollInterval);
+		}
+
+		return () => {
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+				intervalRef.current = null;
+			}
+		};
+	}, [checkConnection, enablePolling, pollInterval]);
+
+	return status;
+}

package/src/hooks/use-dev-menu.ts

@@ -0,0 +1,306 @@
+/**
+ * Dev menu state management hook
+ *
+ * Provides state and actions for the developer menu.
+ */
+
+import { useEffect, useMemo, useReducer } from "react";
+import {
+	getDevSettings,
+	openDebugger,
+	reload,
+	setHotLoadingEnabled,
+	toggleElementInspector,
+} from "../native/dev-settings";
+import { ShakeDetector } from "../native/shake-detector";
+import type { BundlerStatus, DevMenuActions, DevMenuItem, DevMenuState } from "../types";
+
+/**
+ * Default bundler status
+ */
+const DEFAULT_BUNDLER_STATUS: BundlerStatus = {
+	connected: false,
+	url: null,
+	error: null,
+	lastConnectedAt: null,
+};
+
+/**
+ * Default dev menu state
+ */
+const DEFAULT_STATE: DevMenuState = {
+	isVisible: false,
+	isLoading: false,
+	bundlerStatus: DEFAULT_BUNDLER_STATUS,
+	hotReloadEnabled: true,
+	fastRefreshEnabled: true,
+};
+
+/**
+ * Create initial dev menu state
+ *
+ * @param overrides - Partial state to override defaults
+ * @returns Complete dev menu state
+ */
+export function createInitialDevMenuState(overrides: Partial<DevMenuState> = {}): DevMenuState {
+	return {
+		...DEFAULT_STATE,
+		...overrides,
+	};
+}
+
+/**
+ * Action types for dev menu reducer
+ */
+type DevMenuAction =
+	| { type: "SHOW" }
+	| { type: "HIDE" }
+	| { type: "TOGGLE" }
+	| { type: "SET_LOADING"; payload: boolean }
+	| { type: "SET_BUNDLER_STATUS"; payload: BundlerStatus }
+	| { type: "SET_HOT_RELOAD"; payload: boolean }
+	| { type: "SET_FAST_REFRESH"; payload: boolean }
+	| { type: "UPDATE_FROM_NATIVE"; payload: Partial<DevMenuState> };
+
+/**
+ * Dev menu state reducer
+ */
+function devMenuReducer(state: DevMenuState, action: DevMenuAction): DevMenuState {
+	switch (action.type) {
+		case "SHOW":
+			return { ...state, isVisible: true };
+		case "HIDE":
+			return { ...state, isVisible: false };
+		case "TOGGLE":
+			return { ...state, isVisible: !state.isVisible };
+		case "SET_LOADING":
+			return { ...state, isLoading: action.payload };
+		case "SET_BUNDLER_STATUS":
+			return { ...state, bundlerStatus: action.payload };
+		case "SET_HOT_RELOAD":
+			return { ...state, hotReloadEnabled: action.payload };
+		case "SET_FAST_REFRESH":
+			return { ...state, fastRefreshEnabled: action.payload };
+		case "UPDATE_FROM_NATIVE":
+			return { ...state, ...action.payload };
+		default:
+			return state;
+	}
+}
+
+/**
+ * Options for default menu item handlers
+ */
+export interface DefaultMenuItemHandlers {
+	onReload: () => Promise<void>;
+	onOpenDebugger: () => Promise<void>;
+	onToggleInspector: () => Promise<void>;
+	onTogglePerfMonitor: () => Promise<void>;
+}
+
+/**
+ * Get default dev menu items
+ *
+ * @param handlers - Action handlers for menu items
+ * @returns Array of default menu items
+ */
+export function getDefaultMenuItems(handlers: DefaultMenuItemHandlers): DevMenuItem[] {
+	return [
+		{
+			id: "reload",
+			label: "Reload",
+			onPress: handlers.onReload,
+			devOnly: false,
+		},
+		{
+			id: "debugger",
+			label: "Open Debugger",
+			onPress: handlers.onOpenDebugger,
+			devOnly: true,
+		},
+		{
+			id: "inspector",
+			label: "Toggle Element Inspector",
+			onPress: handlers.onToggleInspector,
+			devOnly: true,
+		},
+		{
+			id: "perf-monitor",
+			label: "Toggle Performance Monitor",
+			onPress: handlers.onTogglePerfMonitor,
+			devOnly: true,
+		},
+	];
+}
+
+/**
+ * Options for useDevMenu hook
+ */
+export interface UseDevMenuOptions {
+	/** Enable shake gesture to open menu (default: true) */
+	enableShakeGesture?: boolean;
+
+	/** Custom bundler status (optional, otherwise uses internal tracking) */
+	bundlerStatus?: BundlerStatus;
+
+	/** Initial visibility state */
+	initialVisible?: boolean;
+}
+
+/**
+ * Hook return type
+ */
+export interface UseDevMenuReturn {
+	/** Current dev menu state */
+	state: DevMenuState;
+
+	/** Actions to control the dev menu */
+	actions: DevMenuActions;
+
+	/** Default menu items */
+	defaultMenuItems: DevMenuItem[];
+}
+
+/**
+ * Hook for managing dev menu state
+ *
+ * @param options - Configuration options
+ * @returns State, actions, and default menu items
+ *
+ * @example
+ * ```tsx
+ * function DevMenuContainer() {
+ *   const { state, actions, defaultMenuItems } = useDevMenu();
+ *
+ *   return (
+ *     <DevMenu
+ *       visible={state.isVisible}
+ *       onDismiss={actions.hide}
+ *       items={defaultMenuItems}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useDevMenu(options: UseDevMenuOptions = {}): UseDevMenuReturn {
+	const { enableShakeGesture = true, bundlerStatus, initialVisible = false } = options;
+
+	const [state, dispatch] = useReducer(
+		devMenuReducer,
+		createInitialDevMenuState({
+			isVisible: initialVisible,
+			bundlerStatus: bundlerStatus ?? DEFAULT_BUNDLER_STATUS,
+		})
+	);
+
+	// Update bundler status when prop changes
+	useEffect(() => {
+		if (bundlerStatus) {
+			dispatch({ type: "SET_BUNDLER_STATUS", payload: bundlerStatus });
+		}
+	}, [bundlerStatus]);
+
+	// Fetch initial settings from native
+	useEffect(() => {
+		const fetchSettings = async () => {
+			try {
+				const settings = await getDevSettings();
+				dispatch({
+					type: "UPDATE_FROM_NATIVE",
+					payload: {
+						hotReloadEnabled: settings.isHotLoadingEnabled,
+						fastRefreshEnabled: settings.isFastRefreshEnabled,
+					},
+				});
+			} catch {
+				// Ignore errors - native module might not be available
+			}
+		};
+
+		if (__DEV__) {
+			fetchSettings();
+		}
+	}, []);
+
+	// Set up shake gesture listener
+	useEffect(() => {
+		if (!enableShakeGesture || !__DEV__) {
+			return;
+		}
+
+		const handleShake = () => {
+			dispatch({ type: "TOGGLE" });
+		};
+
+		ShakeDetector.on("shake", handleShake);
+		ShakeDetector.start();
+
+		return () => {
+			ShakeDetector.off("shake", handleShake);
+			ShakeDetector.stop();
+		};
+	}, [enableShakeGesture]);
+
+	// Actions
+	const actions: DevMenuActions = useMemo(
+		() => ({
+			show: () => dispatch({ type: "SHOW" }),
+			hide: () => dispatch({ type: "HIDE" }),
+			toggle: () => dispatch({ type: "TOGGLE" }),
+
+			reload: async () => {
+				dispatch({ type: "SET_LOADING", payload: true });
+				try {
+					reload();
+				} finally {
+					dispatch({ type: "SET_LOADING", payload: false });
+				}
+			},
+
+			openDebugger: async () => {
+				dispatch({ type: "SET_LOADING", payload: true });
+				try {
+					openDebugger();
+				} finally {
+					dispatch({ type: "SET_LOADING", payload: false });
+					dispatch({ type: "HIDE" });
+				}
+			},
+
+			toggleElementInspector: async () => {
+				toggleElementInspector();
+				dispatch({ type: "HIDE" });
+			},
+
+			togglePerfMonitor: async () => {
+				// Performance monitor toggle is handled by native
+				// Just hide the menu
+				dispatch({ type: "HIDE" });
+			},
+
+			setHotReloadEnabled: async (enabled: boolean) => {
+				setHotLoadingEnabled(enabled);
+				dispatch({ type: "SET_HOT_RELOAD", payload: enabled });
+			},
+		}),
+		[]
+	);
+
+	// Default menu items
+	const defaultMenuItems = useMemo(
+		() =>
+			getDefaultMenuItems({
+				onReload: actions.reload,
+				onOpenDebugger: actions.openDebugger,
+				onToggleInspector: actions.toggleElementInspector,
+				onTogglePerfMonitor: actions.togglePerfMonitor,
+			}),
+		[actions]
+	);
+
+	return {
+		state,
+		actions,
+		defaultMenuItems,
+	};
+}