@ohah/react-native-mcp-server 0.1.0-rc.1

package/dist/init-202kCwU5.js

@@ -0,0 +1,330 @@
+import { execSync } from "node:child_process";
+import os from "node:os";
+import path from "node:path";
+import fs from "node:fs";
+import readline from "node:readline/promises";
+import { stdin, stdout } from "node:process";
+
+//#region src/init/detect.ts
+/**
+* 프로젝트 타입 감지 (Expo vs bare RN, 패키지 매니저, babel 설정 등)
+*/
+const BABEL_CONFIG_FILES = [
+	"babel.config.js",
+	"babel.config.cjs",
+	"babel.config.mjs",
+	".babelrc",
+	".babelrc.js"
+];
+function detectProject(cwd) {
+	const pkgPath = path.join(cwd, "package.json");
+	let rnVersion = null;
+	let expoVersion = null;
+	if (fs.existsSync(pkgPath)) try {
+		const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+		const deps = {
+			...pkg.dependencies,
+			...pkg.devDependencies
+		};
+		rnVersion = deps["react-native"] ?? null;
+		expoVersion = deps["expo"] ?? null;
+	} catch {}
+	const isExpo = expoVersion != null || fs.existsSync(path.join(cwd, "app.json")) || fs.existsSync(path.join(cwd, "app.config.js")) || fs.existsSync(path.join(cwd, "app.config.ts"));
+	let babelConfigPath = null;
+	for (const name of BABEL_CONFIG_FILES) {
+		const full = path.join(cwd, name);
+		if (fs.existsSync(full)) {
+			babelConfigPath = full;
+			break;
+		}
+	}
+	return {
+		isExpo,
+		rnVersion,
+		expoVersion,
+		hasBabelConfig: babelConfigPath != null,
+		babelConfigPath,
+		packageManager: detectPackageManager(cwd)
+	};
+}
+function detectPackageManager(cwd) {
+	if (fs.existsSync(path.join(cwd, "bun.lockb")) || fs.existsSync(path.join(cwd, "bun.lock"))) return "bun";
+	if (fs.existsSync(path.join(cwd, "yarn.lock"))) return "yarn";
+	if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+	return "npm";
+}
+function checkCommand(cmd, versionFlag = "--version") {
+	try {
+		return {
+			installed: true,
+			version: execSync(`${cmd} ${versionFlag}`, {
+				stdio: [
+					"pipe",
+					"pipe",
+					"pipe"
+				],
+				timeout: 5e3
+			}).toString().trim().split("\n")[0]
+		};
+	} catch {
+		return {
+			installed: false,
+			version: null
+		};
+	}
+}
+function checkExternalTools() {
+	const isMac = process.platform === "darwin";
+	const tools = [];
+	const docsBase = "https://ohah.github.io/react-native-mcp/mcp/#4-native-tools-idb--adb";
+	const adb = checkCommand("adb");
+	tools.push({
+		name: "adb",
+		installed: adb.installed,
+		version: adb.version,
+		hint: isMac ? `brew install android-platform-tools  or  install Android Studio\n    Docs: ${docsBase}` : `Install Android Studio (includes adb)  or  sudo apt install adb\n    Docs: ${docsBase}`
+	});
+	if (isMac) {
+		const idb = checkCommand("idb");
+		tools.push({
+			name: "idb",
+			installed: idb.installed,
+			version: idb.version,
+			hint: `brew tap facebook/fb && brew install idb-companion\n    Docs: ${docsBase}`
+		});
+	}
+	return tools;
+}
+
+//#endregion
+//#region src/init/babel-config.ts
+/**
+* babel.config.js에 MCP babel preset 추가
+*/
+const MCP_PRESET = "@ohah/react-native-mcp-server/babel-preset";
+function updateBabelConfig(info) {
+	if (!info.hasBabelConfig || !info.babelConfigPath) return {
+		success: false,
+		skipped: false,
+		message: "babel.config.js not found — add the preset manually"
+	};
+	const content = fs.readFileSync(info.babelConfigPath, "utf-8");
+	if (content.includes(MCP_PRESET)) return {
+		success: true,
+		skipped: true,
+		message: "preset already configured"
+	};
+	const match = content.match(/(presets\s*:\s*\[)([\s\S]*?)(\])/);
+	if (!match) return {
+		success: false,
+		skipped: false,
+		message: `Could not find presets array — add manually:\n  presets: [..., '${MCP_PRESET}']`
+	};
+	const fullMatch = match[0];
+	const before = match[1];
+	const presetsContent = match[2];
+	const after = match[3];
+	if (before === void 0 || presetsContent === void 0 || after === void 0) return {
+		success: false,
+		skipped: false,
+		message: `Could not find presets array — add manually:\n  presets: [..., '${MCP_PRESET}']`
+	};
+	const trimmed = presetsContent.trimEnd();
+	const separator = trimmed.length > 0 && !trimmed.endsWith(",") ? "," : "";
+	const newContent = content.replace(fullMatch, `${before}${presetsContent.trimEnd()}${separator} '${MCP_PRESET}'${after}`);
+	fs.writeFileSync(info.babelConfigPath, newContent, "utf-8");
+	return {
+		success: true,
+		skipped: false,
+		message: "preset added"
+	};
+}
+
+//#endregion
+//#region src/init/mcp-config.ts
+/**
+* MCP 클라이언트 설정 파일 생성/업데이트
+*/
+const MCP_CLIENTS = [
+	{
+		label: "Cursor",
+		value: "cursor"
+	},
+	{
+		label: "Claude Code (CLI)",
+		value: "claude-code"
+	},
+	{
+		label: "Claude Desktop",
+		value: "claude-desktop"
+	},
+	{
+		label: "Windsurf",
+		value: "windsurf"
+	},
+	{
+		label: "Antigravity",
+		value: "antigravity"
+	}
+];
+const MCP_SERVER_ENTRY = {
+	command: "npx",
+	args: ["-y", "@ohah/react-native-mcp-server"]
+};
+function setupMcpConfig(client, cwd) {
+	switch (client) {
+		case "cursor": return writeJsonConfig(path.join(cwd, ".cursor", "mcp.json"));
+		case "windsurf": return writeJsonConfig(path.join(os.homedir(), ".codeium", "windsurf", "mcp_config.json"));
+		case "antigravity": return writeJsonConfig(path.join(os.homedir(), ".gemini", "antigravity", "mcp_config.json"));
+		case "claude-desktop": return writeClaudeDesktopConfig();
+		case "claude-code": return runClaudeCodeAdd();
+	}
+}
+function writeJsonConfig(configPath) {
+	const dir = path.dirname(configPath);
+	if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+	let existing = {};
+	if (fs.existsSync(configPath)) try {
+		existing = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+	} catch {}
+	const mcpServers = existing.mcpServers ?? {};
+	if (mcpServers["react-native-mcp"]) return {
+		success: true,
+		message: "already configured"
+	};
+	mcpServers["react-native-mcp"] = MCP_SERVER_ENTRY;
+	existing.mcpServers = mcpServers;
+	fs.writeFileSync(configPath, JSON.stringify(existing, null, 2) + "\n", "utf-8");
+	return {
+		success: true,
+		message: `created ${path.relative(process.cwd(), configPath)}`
+	};
+}
+function getClaudeDesktopConfigPath() {
+	if (process.platform === "darwin") return path.join(os.homedir(), "Library", "Application Support", "Claude", "claude_desktop_config.json");
+	if (process.platform === "win32") return path.join(process.env.APPDATA ?? "", "Claude", "claude_desktop_config.json");
+	return path.join(os.homedir(), ".config", "Claude", "claude_desktop_config.json");
+}
+function writeClaudeDesktopConfig() {
+	return writeJsonConfig(getClaudeDesktopConfigPath());
+}
+function runClaudeCodeAdd() {
+	try {
+		execSync("claude mcp add react-native-mcp -- npx -y @ohah/react-native-mcp-server", { stdio: "pipe" });
+		return {
+			success: true,
+			message: "added via claude mcp add"
+		};
+	} catch (err) {
+		return {
+			success: false,
+			message: `claude mcp add failed: ${err instanceof Error ? err.message : String(err)}\nRun manually: claude mcp add react-native-mcp -- npx -y @ohah/react-native-mcp-server`
+		};
+	}
+}
+
+//#endregion
+//#region src/init/prompts.ts
+/**
+* readline 기반 인터랙티브 프롬프트
+*/
+let rl = null;
+function getRL() {
+	if (!rl) rl = readline.createInterface({
+		input: stdin,
+		output: stdout
+	});
+	return rl;
+}
+function closeRL() {
+	if (rl) {
+		rl.close();
+		rl = null;
+	}
+}
+async function select(question, items, labelFn) {
+	const r = getRL();
+	console.log();
+	console.log(question);
+	for (const [i, item] of items.entries()) console.log(`  ${i + 1}. ${labelFn(item)}`);
+	while (true) {
+		const answer = await r.question(`> `);
+		const num = parseInt(answer.trim(), 10);
+		if (num >= 1 && num <= items.length) {
+			const chosen = items[num - 1];
+			if (chosen !== void 0) return chosen;
+		}
+		console.log(`  Please enter a number between 1 and ${items.length}`);
+	}
+}
+
+//#endregion
+//#region src/init/index.ts
+/**
+* `npx react-native-mcp init` 메인 플로우
+*/
+async function runInit(options = {}) {
+	const cwd = process.cwd();
+	const interactive = options.interactive !== false;
+	console.log();
+	console.log("\x1B[1m React Native MCP Setup\x1B[0m");
+	console.log();
+	console.log(" Detecting project...");
+	const info = detectProject(cwd);
+	if (!info.rnVersion) {
+		console.log("  \x1B[33m⚠\x1B[0m React Native not found in package.json");
+		console.log("    Make sure you are in a React Native project directory.");
+		process.exitCode = 1;
+		closeRL();
+		return;
+	}
+	console.log(`  \x1b[32m✓\x1b[0m React Native ${info.rnVersion}`);
+	if (info.isExpo) console.log(`  \x1b[32m✓\x1b[0m Expo detected${info.expoVersion ? ` (expo@${info.expoVersion})` : ""}`);
+	console.log(`  \x1b[32m✓\x1b[0m Package manager: ${info.packageManager}`);
+	console.log();
+	console.log(" Checking external tools...");
+	const tools = checkExternalTools();
+	let hasWarning = false;
+	for (const tool of tools) if (tool.installed) console.log(`  \x1b[32m✓\x1b[0m ${tool.name} — found`);
+	else {
+		hasWarning = true;
+		console.log(`  \x1b[33m⚠\x1b[0m ${tool.name} — not found`);
+		console.log(`    Install: ${tool.hint}`);
+	}
+	if (!hasWarning) console.log("  All tools ready!");
+	let client;
+	if (options.client) client = options.client;
+	else if (interactive) client = (await select("? Which MCP client do you use?", MCP_CLIENTS, (c) => c.label)).value;
+	else client = "cursor";
+	console.log();
+	console.log(" Applying changes...");
+	const babelResult = updateBabelConfig(info);
+	if (babelResult.success) console.log(`  \x1b[32m✓\x1b[0m ${info.babelConfigPath ? path.basename(info.babelConfigPath) : "babel.config.js"} — ${babelResult.message}`);
+	else console.log(`  \x1b[33m⚠\x1b[0m babel.config.js — ${babelResult.message}`);
+	const mcpResult = setupMcpConfig(client, cwd);
+	if (mcpResult.success) console.log(`  \x1b[32m✓\x1b[0m MCP config — ${mcpResult.message}`);
+	else console.log(`  \x1b[31m✗\x1b[0m MCP config — ${mcpResult.message}`);
+	updateGitignore(cwd);
+	console.log();
+	console.log("\x1B[32m Done!\x1B[0m Next steps:");
+	if (info.isExpo) console.log("  1. Start your app: npx expo start");
+	else console.log("  1. Start Metro: REACT_NATIVE_MCP_ENABLED=true npx react-native start");
+	const clientLabel = MCP_CLIENTS.find((c) => c.value === client)?.label ?? client;
+	console.log(`  2. Open ${clientLabel} — MCP tools are ready to use`);
+	console.log();
+	closeRL();
+}
+function updateGitignore(cwd) {
+	const gitignorePath = path.join(cwd, ".gitignore");
+	if (!fs.existsSync(gitignorePath)) return;
+	const content = fs.readFileSync(gitignorePath, "utf-8");
+	if (content.includes("/results/") || content.includes("results/")) {
+		console.log("  \x1B[32m✓\x1B[0m .gitignore — already has results/");
+		return;
+	}
+	fs.appendFileSync(gitignorePath, "\n# React Native MCP\n/results/\n", "utf-8");
+	console.log("  \x1B[32m✓\x1B[0m .gitignore — updated");
+}
+
+//#endregion
+export { runInit };

package/dist/transformer-entry.d.ts

@@ -0,0 +1,44 @@
+//#region src/metro/transform-source.d.ts
+/**
+ * Metro 커스텀 transformer용 소스 변환 (AST 기반)
+ *
+ * 앱 진입점에서 AppRegistry.registerComponent 호출을 찾아
+ * MCP 런타임 래퍼로 감싸서, CLI 테스트로 동작 여부를 검증할 수 있게 한다.
+ */
+/**
+ * 소스 코드를 AST로 파싱한 뒤:
+ * 1) 진입점 상단에 MCP 런타임 require 주입
+ * 2) AppRegistry.registerComponent → __REACT_NATIVE_MCP__.registerComponent 치환
+ *
+ * @param src - 변환할 소스 문자열
+ * @param filename - 파일 경로 (소스맵용, 선택)
+ * @returns 변환된 code (그리고 추후 sourceMap)
+ */
+declare function transformSource(src: string, filename?: string): Promise<{
+  code: string;
+}>;
+//#endregion
+//#region src/babel/inject-testid.d.ts
+/**
+ * Babel AST 변환: JSX 요소에 자동 testID 주입 + displayName 보존
+ *
+ * DESIGN.md Phase 3 계획에 따른 자동 testID 생성.
+ * 커스텀 컴포넌트 내부의 JSX 요소 중 testID가 없으면
+ * ComponentName-index-TagName 형식으로 주입한다.
+ *
+ * PascalCase 함수 컴포넌트에 displayName을 자동 주입해
+ * release 빌드에서도 Fiber 트리에서 컴포넌트 이름을 보존한다.
+ */
+/**
+ * 소스 코드를 파싱한 뒤, 컴포넌트 함수 내부의 JSX 요소에
+ * testID가 없으면 자동으로 주입한다.
+ *
+ * @param src - 변환할 소스 문자열
+ * @param filename - 파일 경로 (선택)
+ * @returns 변환된 code
+ */
+declare function injectTestIds(src: string, filename?: string): Promise<{
+  code: string;
+}>;
+//#endregion
+export { injectTestIds, transformSource };