feat: use JSX factory approach

V3RON · V3RON · commit 9f00bccb06e4 · 2026-02-02T13:37:24.000+01:00
diff --git a/apps/playground/rn-harness.config.mjs b/apps/playground/rn-harness.config.mjs
@@ -69,4 +69,5 @@ export default {
   resetEnvironmentBetweenTestFiles: true,
   unstable__skipAlreadyIncludedModules: false,
   forwardClientLogs: true,
+  disableViewFlattening: true,
 };
diff --git a/apps/playground/src/__tests__/ui/out-of-bounds.harness.tsx b/apps/playground/src/__tests__/ui/out-of-bounds.harness.tsx
@@ -8,7 +8,7 @@ describe('Out of bounds', () => {
   	test('should screenshot specific element only', async () => {
 		await render(
 		<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-			<View collapsable={false} testID="out-of-bounds" style={{ width: 1000, height: 100, backgroundColor: 'yellow', flexDirection: 'row' }}>
+			<View testID="out-of-bounds" style={{ width: 1000, height: 100, backgroundColor: 'yellow', flexDirection: 'row' }}>
 				{Array.from({ length: 10 }).map((_, index) => (
 					<View key={index} style={{ width: 100, height: 100, backgroundColor: COLORS[index % COLORS.length] }} />
 				))}
diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json
@@ -19,7 +19,8 @@
     "babel-plugin-istanbul": "^7.0.1"
   },
   "peerDependencies": {
-    "@babel/core": "^7.22.0"
+    "@babel/core": "^7.22.0",
+    "@babel/plugin-transform-react-jsx": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.22.0",
diff --git a/packages/babel-preset/src/collapsible-plugin.ts b/packages/babel-preset/src/collapsible-plugin.ts
diff --git a/packages/babel-preset/src/preset.ts b/packages/babel-preset/src/preset.ts
@@ -1,5 +1,4 @@
 import resolveWeakPlugin from './resolve-weak-plugin';
-import collapsiblePlugin from './collapsible-plugin';
 import path from 'path';
 
 const getIstanbulPlugin = (): string | [string, object] | null => {
@@ -21,8 +20,14 @@ const getIstanbulPlugin = (): string | [string, object] | null => {
 export const rnHarnessPlugins = [
   '@babel/plugin-transform-class-static-block',
   resolveWeakPlugin,
-  process.env.RN_HARNESS_VIEW_FLATTENING === 'false' ? collapsiblePlugin : null,
   getIstanbulPlugin(),
+  [
+    '@babel/plugin-transform-react-jsx',
+    {
+      runtime: 'automatic',
+      importSource: '@react-native-harness/runtime',
+    },
+  ],
 ].filter((plugin) => plugin !== null);
 
 export const rnHarnessPreset = () => {
diff --git a/packages/metro/src/manifest.ts b/packages/metro/src/manifest.ts
@@ -5,7 +5,8 @@ import { Config as HarnessConfig } from '@react-native-harness/config';
 const getManifestContent = (harnessConfig: HarnessConfig): string => {
   return `global.RN_HARNESS = { 
     appRegistryComponentName: '${harnessConfig.appRegistryComponentName}',
-    webSocketPort: ${harnessConfig.webSocketPort}
+    webSocketPort: ${harnessConfig.webSocketPort},
+    disableViewFlattening: ${harnessConfig.disableViewFlattening},
   };`;
 };
 
diff --git a/packages/metro/src/resolver.ts b/packages/metro/src/resolver.ts
@@ -14,7 +14,24 @@ export const getHarnessResolver = (
     paths: [process.cwd()],
   });
 
+  const resolvedJsxRuntimePath = require.resolve('@react-native-harness/runtime/jsx-runtime');
+  const resolvedJsxDevRuntimePath = require.resolve('@react-native-harness/runtime/jsx-dev-runtime');
+
   return (context, moduleName, platform) => {
+    if (moduleName === '@react-native-harness/runtime/jsx-runtime') {
+      return {
+        type: 'sourceFile',
+        filePath: resolvedJsxRuntimePath,
+      };
+    }
+
+    if (moduleName === '@react-native-harness/runtime/jsx-dev-runtime') {
+      return {
+        type: 'sourceFile',
+        filePath: resolvedJsxDevRuntimePath,
+      };
+    }
+
     const existingResolver =
       metroConfig.resolver?.resolveRequest ?? context.resolveRequest;
     const resolvedModule = existingResolver(context, moduleName, platform);
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -23,6 +23,16 @@
       "types": "./dist/entry-point.d.ts",
       "import": "./dist/entry-point.js",
       "default": "./dist/entry-point.js"
+    },
+    "./jsx-runtime": {
+      "development": "./src/jsx/jsx-runtime.ts",
+      "import": "./dist/jsx/jsx-runtime.js",
+      "default": "./dist/jsx/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "development": "./src/jsx/jsx-dev-runtime.ts",
+      "import": "./dist/jsx/jsx-dev-runtime.js",
+      "default": "./dist/jsx/jsx-dev-runtime.js"
     }
   },
   "peerDependencies": {
diff --git a/packages/runtime/src/globals.ts b/packages/runtime/src/globals.ts
@@ -3,6 +3,7 @@ import type { ImageSnapshotOptions } from '@react-native-harness/bridge';
 export type HarnessGlobal = {
   appRegistryComponentName: string;
   webSocketPort?: number;
+  disableViewFlattening?: boolean;
 };
 
 declare global {
diff --git a/packages/runtime/src/jsx/jsx-dev-runtime.ts b/packages/runtime/src/jsx/jsx-dev-runtime.ts
@@ -0,0 +1,29 @@
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+
+export function jsxDEV(
+  type: any,
+  props: any,
+  key: any,
+  isStaticChildren: any,
+  source: any,
+  self: any
+) {
+  if (
+    type &&
+    (type.displayName === 'View' || type.name === 'View') &&
+    props &&
+    props.collapsable === undefined
+  ) {
+    props = { ...props, collapsable: true };
+  }
+  return ReactJSXRuntimeDev.jsxDEV(
+    type,
+    props,
+    key,
+    isStaticChildren,
+    source,
+    self
+  );
+}
diff --git a/packages/runtime/src/jsx/jsx-runtime.ts b/packages/runtime/src/jsx/jsx-runtime.ts
@@ -0,0 +1,38 @@
+import { View } from 'react-native';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+import { getHarnessGlobal } from '../globals.js';
+
+export const Fragment = ReactJSXRuntime.Fragment;
+
+function wrap(
+  type: React.ElementType,
+  props: unknown,
+  key: React.Key | undefined,
+  isStatic: boolean,
+): React.ReactElement {
+  const disableViewFlattening = getHarnessGlobal().disableViewFlattening;
+
+  if (disableViewFlattening && type === View) {
+    props = { ...(props as Record<string, unknown>), collapsable: false };
+  }
+
+  return isStatic
+    ? ReactJSXRuntime.jsxs(type, props, key)
+    : ReactJSXRuntime.jsx(type, props, key);
+}
+
+export function jsx(
+  type: React.ElementType,
+  props: unknown,
+  key?: React.Key,
+): React.ReactElement {
+  return wrap(type, props, key, false);
+}
+
+export function jsxs(
+  type: React.ElementType,
+  props: unknown,
+  key?: React.Key,
+): React.ReactElement {
+  return wrap(type, props, key, true);
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -15,4 +15,4 @@ export {
   type ScreenshotResult,
 } from './screen.js';
 export { userEvent, type UserEvent } from './userEvent.js';
-export type { ViewInfo, ElementBoundingBox } from './types.js';
+export type { ViewInfo, BoundingBox } from './types.js';
