@teardown/dev-client 2.0.44

package/src/hooks/use-splash-screen.ts

@@ -0,0 +1,177 @@
+/**
+ * Splash screen control hook
+ *
+ * Provides state and control methods for the splash screen.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { SplashScreenApi, SplashScreenConfig } from "../types";
+
+/**
+ * Default splash screen configuration
+ */
+const DEFAULT_CONFIG: Required<SplashScreenConfig> = {
+	backgroundColor: "#ffffff",
+	logo: undefined as unknown as Required<SplashScreenConfig>["logo"],
+	resizeMode: "contain",
+	minDisplayTime: 500,
+	fadeOutDuration: 300,
+	autoHide: true,
+};
+
+/**
+ * Options for useSplashScreen hook
+ */
+export interface UseSplashScreenOptions {
+	/** Splash screen configuration */
+	config?: SplashScreenConfig;
+
+	/** Callback when splash screen is ready to hide */
+	onReady?: () => void;
+
+	/** Callback when splash screen has hidden */
+	onHide?: () => void;
+}
+
+/**
+ * Hook return type
+ */
+export interface UseSplashScreenReturn extends SplashScreenApi {
+	/** Merged configuration */
+	config: Required<SplashScreenConfig>;
+
+	/** Whether fade animation is in progress */
+	isFading: boolean;
+
+	/** Opacity value for animation (0-1) */
+	opacity: number;
+}
+
+/**
+ * Hook for managing splash screen state
+ *
+ * @param options - Configuration options
+ * @returns Splash screen state and control methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const splash = useSplashScreen({
+ *     config: { minDisplayTime: 1000 },
+ *     onReady: () => console.log('App ready'),
+ *   });
+ *
+ *   useEffect(() => {
+ *     // App initialization logic
+ *     initializeApp().then(() => {
+ *       splash.hide();
+ *     });
+ *   }, []);
+ *
+ *   return splash.isVisible ? <SplashScreen {...splash} /> : <MainApp />;
+ * }
+ * ```
+ */
+export function useSplashScreen(options: UseSplashScreenOptions = {}): UseSplashScreenReturn {
+	const { config: userConfig, onReady, onHide } = options;
+
+	// Merge config with defaults
+	const config: Required<SplashScreenConfig> = {
+		...DEFAULT_CONFIG,
+		...userConfig,
+	};
+
+	const [isVisible, setIsVisible] = useState(true);
+	const [isFading, setIsFading] = useState(false);
+	const [opacity, setOpacity] = useState(1);
+
+	const showTimeRef = useRef(Date.now());
+	const fadeIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const hasCalledOnReady = useRef(false);
+
+	// Cleanup function
+	const cleanup = useCallback(() => {
+		if (fadeIntervalRef.current) {
+			clearInterval(fadeIntervalRef.current);
+			fadeIntervalRef.current = null;
+		}
+	}, []);
+
+	// Hide splash screen with optional fade
+	const hide = useCallback(
+		async (hideOptions?: { fade?: boolean }): Promise<void> => {
+			const shouldFade = hideOptions?.fade ?? true;
+			const elapsed = Date.now() - showTimeRef.current;
+			const remaining = Math.max(0, config.minDisplayTime - elapsed);
+
+			// Wait for minimum display time
+			if (remaining > 0) {
+				await new Promise((resolve) => setTimeout(resolve, remaining));
+			}
+
+			if (!shouldFade || config.fadeOutDuration <= 0) {
+				// Instant hide
+				setIsVisible(false);
+				onHide?.();
+				return;
+			}
+
+			// Fade animation
+			setIsFading(true);
+			const steps = 20;
+			const stepDuration = config.fadeOutDuration / steps;
+			const opacityStep = 1 / steps;
+
+			return new Promise((resolve) => {
+				let currentStep = 0;
+				fadeIntervalRef.current = setInterval(() => {
+					currentStep++;
+					setOpacity(1 - currentStep * opacityStep);
+
+					if (currentStep >= steps) {
+						cleanup();
+						setIsVisible(false);
+						setIsFading(false);
+						onHide?.();
+						resolve();
+					}
+				}, stepDuration);
+			});
+		},
+		[config.minDisplayTime, config.fadeOutDuration, onHide, cleanup]
+	);
+
+	// Show splash screen
+	const show = useCallback(async (): Promise<void> => {
+		showTimeRef.current = Date.now();
+		setOpacity(1);
+		setIsFading(false);
+		setIsVisible(true);
+	}, []);
+
+	// Auto-hide when component mounts (if enabled)
+	useEffect(() => {
+		if (!hasCalledOnReady.current) {
+			hasCalledOnReady.current = true;
+			onReady?.();
+
+			if (config.autoHide) {
+				hide();
+			}
+		}
+	}, [config.autoHide, hide, onReady]);
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return cleanup;
+	}, [cleanup]);
+
+	return {
+		isVisible,
+		isFading,
+		opacity,
+		config,
+		hide,
+		show,
+	};
+}

package/src/index.ts

@@ -0,0 +1,77 @@
+/**
+ * @teardown/dev-client
+ *
+ * React Native development client for Teardown applications.
+ * Provides dev menu, splash screen, and error overlay functionality.
+ */
+
+// Components
+export { DevMenu, type DevMenuProps } from "./components/dev-menu";
+export { ErrorOverlay, type ErrorOverlayProps } from "./components/error-overlay";
+export { SplashScreen, type SplashScreenProps } from "./components/splash-screen";
+// Provider
+export {
+	DevClientProvider,
+	type DevClientProviderProps,
+	useDevClient,
+	useDevClientMenu,
+	useDevClientSplash,
+} from "./dev-client-provider";
+// Hooks
+export {
+	createBundlerStatus,
+	type UseBundlerStatusOptions,
+	useBundlerStatus,
+} from "./hooks/use-bundler-status";
+export {
+	createInitialDevMenuState,
+	getDefaultMenuItems,
+	type UseDevMenuOptions,
+	type UseDevMenuReturn,
+	useDevMenu,
+} from "./hooks/use-dev-menu";
+export {
+	type UseSplashScreenOptions,
+	type UseSplashScreenReturn,
+	useSplashScreen,
+} from "./hooks/use-splash-screen";
+// Native modules (for advanced use)
+export {
+	getDevSettings,
+	isNativeModuleAvailable,
+	openDebugger,
+	openDevMenu,
+	reload,
+	setFastRefreshEnabled,
+	setHotLoadingEnabled,
+	toggleElementInspector,
+} from "./native/dev-settings";
+export { ShakeDetector } from "./native/shake-detector";
+// Types
+export type {
+	BundlerStatus,
+	DevClientConfig,
+	DevClientContextValue,
+	DevMenuActions,
+	DevMenuItem,
+	DevMenuState,
+	DevSettings,
+	GetBundlerUrlOptions,
+	SplashScreenApi,
+	SplashScreenConfig,
+} from "./types";
+// Utilities
+export {
+	DEFAULT_BUNDLER_PORT,
+	getBundlerUrl,
+	getDefaultBundlerUrl,
+	isValidBundlerUrl,
+} from "./utils/bundler-url";
+export {
+	currentPlatform,
+	isAndroid,
+	isDev,
+	isEmulator,
+	isIOS,
+	platformSelect,
+} from "./utils/platform";

package/src/native/dev-settings.ts

@@ -0,0 +1,132 @@
+/**
+ * Native dev settings module wrapper
+ *
+ * Provides a unified interface for interacting with React Native's
+ * dev settings across iOS and Android.
+ */
+
+import { NativeModules } from "react-native";
+import type { DevSettings, DevSettingsNativeModule } from "../types";
+
+/**
+ * Teardown native module - will be available when native modules are built
+ */
+const TeardownDevSettings = NativeModules.TeardownDevSettings as DevSettingsNativeModule | undefined;
+
+/**
+ * React Native's built-in DevSettings module
+ */
+const RNDevSettings = NativeModules.DevSettings as
+	| {
+			reload?: () => void;
+			setHotLoadingEnabled?: (enabled: boolean) => void;
+			setProfilingEnabled?: (enabled: boolean) => void;
+	  }
+	| undefined;
+
+/**
+ * React Native's DevMenu module
+ */
+const RNDevMenu = NativeModules.DevMenu as
+	| {
+			show?: () => void;
+	  }
+	| undefined;
+
+/**
+ * Reload the JavaScript bundle
+ */
+export function reload(): void {
+	if (TeardownDevSettings?.reload) {
+		TeardownDevSettings.reload();
+	} else if (RNDevSettings?.reload) {
+		RNDevSettings.reload();
+	} else {
+		console.warn("[DevClient] Reload not available - native module not found");
+	}
+}
+
+/**
+ * Open the debugger
+ */
+export function openDebugger(): void {
+	if (TeardownDevSettings?.openDebugger) {
+		TeardownDevSettings.openDebugger();
+	} else {
+		console.warn("[DevClient] OpenDebugger not available - native module not found");
+	}
+}
+
+/**
+ * Toggle element inspector overlay
+ */
+export function toggleElementInspector(): void {
+	if (TeardownDevSettings?.toggleElementInspector) {
+		TeardownDevSettings.toggleElementInspector();
+	} else {
+		console.warn("[DevClient] ToggleElementInspector not available - native module not found");
+	}
+}
+
+/**
+ * Set hot loading enabled state
+ */
+export function setHotLoadingEnabled(enabled: boolean): void {
+	if (TeardownDevSettings?.setHotLoadingEnabled) {
+		TeardownDevSettings.setHotLoadingEnabled(enabled);
+	} else if (RNDevSettings?.setHotLoadingEnabled) {
+		RNDevSettings.setHotLoadingEnabled(enabled);
+	} else {
+		console.warn("[DevClient] SetHotLoadingEnabled not available - native module not found");
+	}
+}
+
+/**
+ * Set fast refresh enabled state
+ */
+export function setFastRefreshEnabled(enabled: boolean): void {
+	if (TeardownDevSettings?.setFastRefreshEnabled) {
+		TeardownDevSettings.setFastRefreshEnabled(enabled);
+	} else {
+		// Fast refresh uses the same setting as hot loading in RN
+		setHotLoadingEnabled(enabled);
+	}
+}
+
+/**
+ * Get current dev settings
+ */
+export async function getDevSettings(): Promise<DevSettings> {
+	if (TeardownDevSettings?.getDevSettings) {
+		return TeardownDevSettings.getDevSettings();
+	}
+
+	// Return default values if native module not available
+	return {
+		isDebuggingRemotely: false,
+		isElementInspectorShown: false,
+		isHotLoadingEnabled: true,
+		isFastRefreshEnabled: true,
+		isPerfMonitorShown: false,
+	};
+}
+
+/**
+ * Open native dev menu
+ */
+export function openDevMenu(): void {
+	if (TeardownDevSettings?.openDevMenu) {
+		TeardownDevSettings.openDevMenu();
+	} else if (RNDevMenu?.show) {
+		RNDevMenu.show();
+	} else {
+		console.warn("[DevClient] OpenDevMenu not available - native module not found");
+	}
+}
+
+/**
+ * Check if native module is available
+ */
+export function isNativeModuleAvailable(): boolean {
+	return TeardownDevSettings !== undefined;
+}

package/src/native/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Native module exports
+ */
+
+export {
+	getDevSettings,
+	isNativeModuleAvailable,
+	openDebugger,
+	openDevMenu,
+	reload,
+	setFastRefreshEnabled,
+	setHotLoadingEnabled,
+	toggleElementInspector,
+} from "./dev-settings";
+
+export { ShakeDetector } from "./shake-detector";

package/src/native/shake-detector.ts

@@ -0,0 +1,105 @@
+/**
+ * Shake gesture detection
+ *
+ * Provides shake-to-open-dev-menu functionality using
+ * React Native's DeviceEventEmitter or native module.
+ * Uses lazy require so tests can run when react-native is not fully available.
+ */
+
+import EventEmitter from "eventemitter3";
+
+function getRN(): {
+	DeviceEventEmitter?: { addListener: (a: string, b: () => void) => { remove: () => void } };
+	NativeModules?: { TeardownShakeDetector?: { startListening?: () => void; stopListening?: () => void } };
+} {
+	// eslint-disable-next-line @typescript-eslint/no-require-imports
+	return require("react-native") as ReturnType<typeof getRN>;
+}
+
+/**
+ * Native shake detector module (lazy)
+ */
+function getTeardownShakeDetector() {
+	return getRN().NativeModules?.TeardownShakeDetector;
+}
+
+/**
+ * Event types emitted by shake detector
+ */
+export interface ShakeDetectorEvents {
+	shake: () => void;
+}
+
+/**
+ * ShakeDetector class for managing shake gesture detection
+ */
+class ShakeDetectorImpl extends EventEmitter<ShakeDetectorEvents> {
+	private isListening = false;
+	private subscription: { remove: () => void } | null = null;
+
+	/**
+	 * Start listening for shake gestures
+	 */
+	start(): void {
+		if (this.isListening) {
+			return;
+		}
+
+		const rn = getRN();
+		const DeviceEventEmitter = rn.DeviceEventEmitter;
+		if (!DeviceEventEmitter) {
+			return;
+		}
+
+		this.isListening = true;
+		const TeardownShakeDetector = getTeardownShakeDetector();
+
+		// Try native module first
+		if (TeardownShakeDetector?.startListening) {
+			TeardownShakeDetector.startListening();
+			this.subscription = DeviceEventEmitter.addListener("TeardownShakeEvent", () => {
+				this.emit("shake");
+			});
+		} else {
+			// Fallback: Listen for RN's shake event (requires Debug mode)
+			this.subscription = DeviceEventEmitter.addListener("RCTDevMenuShown", () => {
+				// This fires when the native dev menu is shown via shake
+				// We can use this as a proxy for shake detection
+				this.emit("shake");
+			});
+		}
+	}
+
+	/**
+	 * Stop listening for shake gestures
+	 */
+	stop(): void {
+		if (!this.isListening) {
+			return;
+		}
+
+		this.isListening = false;
+		const TeardownShakeDetector = getTeardownShakeDetector();
+
+		if (TeardownShakeDetector?.stopListening) {
+			TeardownShakeDetector.stopListening();
+		}
+
+		if (this.subscription) {
+			this.subscription.remove();
+			this.subscription = null;
+		}
+	}
+
+	/**
+	 * Check if currently listening
+	 */
+	getIsListening(): boolean {
+		return this.isListening;
+	}
+}
+
+/**
+ * Singleton shake detector instance
+ */
+export const ShakeDetector = new ShakeDetectorImpl();