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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ohah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -85,6 +85,28 @@ module.exports = {
 };
 ```
 
+### Babel preset options
+
+Pass options as the second element of the preset array:
+
+| Option            | Type                                                  | Default | Description                                                             |
+| ----------------- | ----------------------------------------------------- | ------- | ----------------------------------------------------------------------- |
+| `renderHighlight` | `boolean` or `{ style: 'react-scan' \| 'react-mcp' }` | `false` | Start render highlight on load. `true` = style `'react-mcp'` (default). |
+
+- **`true`** — enable with style `'react-mcp'` (cyan #61dafb, default, matches DevTools icon).
+- **`{ style: 'react-mcp' }`** — same as `true`.
+- **`{ style: 'react-scan' }`** — purple, react-scan style.
+
+Example:
+
+```js
+presets: [
+  'module:@react-native/babel-preset',
+  ['@ohah/react-native-mcp-server/babel-preset', { renderHighlight: true }],
+  // or: { renderHighlight: { style: 'react-scan' } }  for purple
+],
+```
+
 Then add the MCP server entry to your client config (e.g. `.cursor/mcp.json` or Claude config) as in the Quick Start step 3.
 
 ## Native tools (idb / adb)
@@ -100,7 +122,9 @@ Without these, other MCP tools (state, network, console, eval) still work.
 
 ## Documentation
 
-- **Full docs:** [https://ohah.github.io/react-native-mcp/](https://ohah.github.io/react-native-mcp/)
+- **Full docs:** [react-native-mcp.dev](https://react-native-mcp.dev) ([en](https://react-native-mcp.dev/en/mcp/getting-started) / [ko](https://react-native-mcp.dev/ko/mcp/getting-started))
+- **VS Code Extension:** Install from [Marketplace](https://marketplace.visualstudio.com/items?itemName=ohah.react-native-mcp-devtools) or `Ctrl+Shift+X` → search **React Native MCP DevTools**. [Doc](https://react-native-mcp.dev/en/mcp/vscode-extension) ([ko](https://react-native-mcp.dev/ko/mcp/vscode-extension))
+- **Tool Reference:** [All MCP tools](https://react-native-mcp.dev/en/mcp/tools/) · **E2E Testing:** [YAML scenarios](https://react-native-mcp.dev/en/test/)
 - **Repository:** [github.com/ohah/react-native-mcp](https://github.com/ohah/react-native-mcp)
 
 ## License

package/babel-plugin-app-registry.cjs

@@ -21,7 +21,12 @@ function babel_plugin_app_registry_default(babel) {
 				if (!state.runtimeInjected) {
 					const programPath = path.findParent((p) => p.isProgram?.());
 					if (programPath?.node?.body) {
+						const rh = state.opts?.renderHighlight;
+						const renderHighlightEnabled = rh === true || typeof rh === "object" && rh !== null && rh.enabled === true;
+						const renderHighlightStyle = rh === true ? "react-mcp" : typeof rh === "object" && rh !== null && (rh.style === "react-scan" || rh.style === "react-mcp") ? rh.style : "react-mcp";
 						programPath.node.body.unshift(t.expressionStatement(t.callExpression(t.identifier("require"), [t.stringLiteral(RUNTIME_MODULE_ID)])));
+						programPath.node.body.unshift(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.identifier("global"), t.identifier("__REACT_NATIVE_MCP_RENDER_HIGHLIGHT_STYLE__")), t.stringLiteral(renderHighlightStyle))));
+						programPath.node.body.unshift(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.identifier("global"), t.identifier("__REACT_NATIVE_MCP_RENDER_HIGHLIGHT__")), t.booleanLiteral(renderHighlightEnabled))));
 						programPath.node.body.unshift(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.identifier("global"), t.identifier("__REACT_NATIVE_MCP_ENABLED__")), t.booleanLiteral(true))));
 						state.runtimeInjected = true;
 					}

package/babel-preset.cjs

@@ -5,6 +5,18 @@
  * babel.config.js에서 presets에 한 번만 넣으면 됨.
  * - __DEV__ 빌드: 자동 활성화 (환경변수 불필요)
  * - Release 빌드: REACT_NATIVE_MCP_ENABLED=true|1 일 때만 활성화
+ *
+ * 옵션 (두 번째 인자로 객체 전달):
+ * - renderHighlight (boolean | { style: 'react-scan' | 'react-mcp' }, default: false)
+ *   - true: 앱 로드 시 렌더 하이라이트 켬, 스타일 'react-mcp'(기본)
+ *   - { style: 'react-mcp' }: React Native MCP DevTools 아이콘 톤(시안 #61dafb)
+ *   - { style: 'react-scan' }: react-scan 스타일(보라)
+ *
+ * @example
+ * presets: [
+ *   ['@ohah/react-native-mcp-server/babel-preset', { renderHighlight: true }],
+ *   ['@ohah/react-native-mcp-server/babel-preset', { renderHighlight: { style: 'react-scan' } }],
+ * ]
  */
 function isMcpEnabled() {
   // Metro는 DEV 빌드 시 NODE_ENV를 'development'로 설정한다
@@ -13,13 +25,29 @@ function isMcpEnabled() {
   return v === 'true' || v === '1';
 }
 
-module.exports = function () {
+function normalizeRenderHighlight(value) {
+  if (value === true) {
+    return { enabled: true, style: 'react-mcp' };
+  }
+  if (
+    value &&
+    typeof value === 'object' &&
+    (value.style === 'react-scan' || value.style === 'react-mcp')
+  ) {
+    return { enabled: true, style: value.style };
+  }
+  return { enabled: false, style: 'react-mcp' };
+}
+
+module.exports = function (api, options) {
   if (!isMcpEnabled()) {
     return { plugins: [] };
   }
+  const opts = options || {};
+  const renderHighlight = normalizeRenderHighlight(opts.renderHighlight);
   return {
     plugins: [
-      require('./babel-plugin-app-registry.cjs'),
+      [require('./babel-plugin-app-registry.cjs'), { renderHighlight }],
       require('./babel-plugin-inject-testid.cjs'),
     ],
   };

package/dist/adb-utils-BKpV6qdg.js

@@ -0,0 +1,3 @@
+import { a as isAndroidEmulator, c as runAdbCommand, i as getAndroidScale, n as checkAdbAvailable, o as listAdbDevices, r as getAndroidInsets, s as resolveSerial, t as adbNotInstalledError } from "./adb-utils-Bb_T_gBq.js";
+
+export { getAndroidScale };

package/dist/{adb-utils-DreOsWp-.js → adb-utils-Bb_T_gBq.js}

@@ -149,16 +149,11 @@ async function getAndroidScale(serial) {
 		return 2.75;
 	}
 }
-const _topInsetBySerial = /* @__PURE__ */ new Map();
 /**
-* Android 디바이스의 실제 top inset(px)을 `dumpsys window displays`에서 파싱.
-* captionBar(태블릿 등)가 있으면 우선, 없으면 statusBars 사용.
-* 파싱 실패 시 0 반환 (호출자가 fallback 처리).
+* Android 디바이스의 statusBar/navBar/captionBar 높이(px)를 dumpsys에서 파싱.
+* getAndroidTopInset 보다 상세한 정보가 필요할 때 사용.
 */
-async function getAndroidTopInset(serial) {
-	const key = serial ?? "_default";
-	const cached = _topInsetBySerial.get(key);
-	if (cached != null) return cached;
+async function getAndroidInsets(serial) {
 	try {
 		const text = await runAdbCommand([
 			"shell",
@@ -166,22 +161,30 @@ async function getAndroidTopInset(serial) {
 			"window",
 			"displays"
 		], serial, { timeoutMs: 5e3 });
-		const captionMatch = text.match(/InsetsSource[^\n]*type=captionBar[^\n]*frame=\[\d+,\d+\]\[\d+,(\d+)\]/);
-		if (captionMatch) {
-			const px = parseInt(captionMatch[1], 10);
-			_topInsetBySerial.set(key, px);
-			return px;
-		}
+		let statusBarPx = 0;
+		let navBarPx = 0;
+		let captionBarPx = 0;
 		const statusMatch = text.match(/InsetsSource[^\n]*type=statusBars[^\n]*frame=\[\d+,\d+\]\[\d+,(\d+)\]/);
-		if (statusMatch) {
-			const px = parseInt(statusMatch[1], 10);
-			_topInsetBySerial.set(key, px);
-			return px;
+		if (statusMatch) statusBarPx = parseInt(statusMatch[1], 10);
+		const navMatch = text.match(/InsetsSource[^\n]*type=navigationBars[^\n]*frame=\[\d+,(\d+)\]\[\d+,\d+\]/);
+		if (navMatch) {
+			const top = parseInt(navMatch[1], 10);
+			const bottomMatch = text.match(/InsetsSource[^\n]*type=navigationBars[^\n]*frame=\[\d+,\d+\]\[\d+,(\d+)\]/);
+			if (bottomMatch) navBarPx = parseInt(bottomMatch[1], 10) - top;
 		}
-		_topInsetBySerial.set(key, 0);
-		return 0;
+		const captionMatch = text.match(/InsetsSource[^\n]*type=captionBar[^\n]*frame=\[\d+,\d+\]\[\d+,(\d+)\]/);
+		if (captionMatch) captionBarPx = parseInt(captionMatch[1], 10);
+		return {
+			statusBarPx,
+			navBarPx,
+			captionBarPx
+		};
 	} catch {
-		return 0;
+		return {
+			statusBarPx: 0,
+			navBarPx: 0,
+			captionBarPx: 0
+		};
 	}
 }
 function adbNotInstalledError() {
@@ -203,4 +206,4 @@ function adbNotInstalledError() {
 }
 
 //#endregion
-export { isAndroidEmulator as a, runAdbCommand as c, getAndroidTopInset as i, runCommand as l, checkAdbAvailable as n, listAdbDevices as o, getAndroidScale as r, resolveSerial as s, adbNotInstalledError as t };
+export { isAndroidEmulator as a, runAdbCommand as c, getAndroidScale as i, runCommand as l, checkAdbAvailable as n, listAdbDevices as o, getAndroidInsets as r, resolveSerial as s, adbNotInstalledError as t };

package/dist/client/index.d.ts

@@ -0,0 +1,2 @@
+import { _ as WaitOpts, a as AssertCountResult, c as CreateAppOptions, d as ElementInfo, f as ElementMeasure, g as VisualCompareResult, h as VisualCompareOpts, i as createApp, l as DebuggerStatus, m as ScrollUntilVisibleResult, n as McpToolError, o as AssertOpts, p as Platform, r as AppClient, s as AssertResult, t as ConnectionError, u as DeviceOpts } from "../index-CEnLTOvE.js";
+export { AppClient, AssertCountResult, AssertOpts, AssertResult, ConnectionError, CreateAppOptions, DebuggerStatus, DeviceOpts, ElementInfo, ElementMeasure, McpToolError, Platform, ScrollUntilVisibleResult, VisualCompareOpts, VisualCompareResult, WaitOpts, createApp };

package/dist/client/index.js

@@ -0,0 +1,3 @@
+import { i as McpToolError, n as createApp, r as ConnectionError, t as AppClient } from "../client-Boy8p1w3.js";
+
+export { AppClient, ConnectionError, McpToolError, createApp };