worklets plugin: preserve JSX imports in bundle mode (#9212)

## Summary

This adds support for importing JSX statements/imports in worklets
bundle mode!

## Test plan

- Unit tests
- example app babel plugin tests:

<img width="1419" height="801" alt="Screenshot 2026-06-06 at 12 56 56"
src="https://github.com/user-attachments/assets/69385021-22b4-47f5-85f5-8d2e7dd7f2ee"
/>

---------

Co-authored-by: Tomasz Żelawski <tzelawski@gmail.com>

Author: hannojg

apps/common-app/src/apps/reanimated/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -187,6 +187,7 @@ export default function RuntimeTestsExample() {
               require('./tests/plugin/contextObjects.test');
               require('./tests/plugin/workletClasses.test');
             }
+            require('./tests/plugin/jsxInWorklets.test');
             require('./tests/plugin/recursion.test');
             require('./tests/plugin/versionMismatch.test');
           },

apps/common-app/src/apps/reanimated/examples/RuntimeTests/tests/plugin/jsxInWorklets.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {
+  beforeEach,
+  describe,
+  expect,
+  notify,
+  test,
+  waitForNotification,
+} from '../../ReJest/RuntimeTestsApi';
+import {
+  isUIRuntime as ImportedComponent,
+  scheduleOnRN,
+  scheduleOnUI,
+} from 'react-native-worklets';
+
+describe('Test JSX in worklets', () => {
+  const PASS_NOTIFICATION = 'PASS';
+  let result = false;
+
+  const callbackPass = (value: boolean) => {
+    result = value;
+    notify(PASS_NOTIFICATION);
+  };
+
+  beforeEach(() => {
+    result = false;
+  });
+
+  if (globalThis._WORKLETS_BUNDLE_MODE_ENABLED) {
+    test('worklets with JSX work on Worklet runtime', async () => {
+      function renderView() {
+        'worklet';
+        return <ImportedComponent />;
+      }
+
+      scheduleOnUI(() => {
+        'worklet';
+        const element = renderView() as React.ReactElement;
+        scheduleOnRN(callbackPass, typeof element.type === 'function');
+      });
+
+      await waitForNotification(PASS_NOTIFICATION);
+      expect(result).toBe(true);
+    });
+  }
+});

packages/react-native-worklets/__tests__/plugin-bundleMode.test.ts

@@ -28,6 +28,7 @@ import type { PluginOptions } from '../plugin';
 import plugin from '../plugin';
 
 const MOCK_LOCATION = 'test.js';
+const MOCK_TSX_LOCATION = 'test.tsx';
 const MOCK_WORKLET_RUNTIME_ENTRY = 'react-native-worklets/src/index.ts';
 const MOCK_OTHER_FILE = 'someOtherFile.ts';
 
@@ -200,6 +201,46 @@ describe('babel plugin in bundleMode', () => {
       expect(files[0].content).toMatchSnapshot();
     });
 
+    test('strips JSX dev attributes in written worklet files', () => {
+      const input = html`<script>
+        import { ImportedComponent } from 'react-native-worklets';
+
+        function renderView() {
+          'worklet';
+          return <ImportedComponent />;
+        }
+      </script>`;
+
+      const control = transformSync(input.replace(/<\/?script[^>]*>/g, ''), {
+        filename: MOCK_TSX_LOCATION,
+        compact: false,
+        babelrc: false,
+        configFile: false,
+        presets: [
+          ['@babel/preset-react', { runtime: 'classic', development: true }],
+        ],
+        envName: 'development',
+      })!.code;
+      expect(control).toContain('__self');
+      expect(control).toContain('__source');
+
+      const { files } = runPlugin(
+        input,
+        {
+          presets: [
+            ['@babel/preset-react', { runtime: 'classic', development: true }],
+          ],
+          envName: 'development',
+        },
+        { importForwarding: { moduleNames: ['react-native-worklets'] } },
+        MOCK_TSX_LOCATION
+      );
+      expect(files).toHaveLength(1);
+      expect(files[0].content).toContain('return <ImportedComponent />;');
+      expect(files[0].content).not.toContain('__self');
+      expect(files[0].content).not.toContain('__source');
+    });
+
     test('rebases relative imports against the worklets directory', () => {
       const input = html`<script>
         import { foo } from './bar';

packages/react-native-worklets/plugin/index.js

@@ -32,7 +32,7 @@ export function getClosure(
         typePath.skip();
       },
       ReferencedIdentifier(idPath) {
-        if (idPath.isJSXIdentifier()) {
+        if (idPath.isJSXIdentifier() && !state.opts.bundleMode) {
           return;
         }
 

packages/react-native-worklets/plugin/src/closure.ts

@@ -4,6 +4,7 @@ import type {
   FunctionExpression,
   ImportDeclaration,
   ImportSpecifier,
+  JSXAttribute,
 } from '@babel/types';
 import {
   cloneNode,
@@ -72,7 +73,7 @@ export function generateWorkletFile(
   const transformedProg = transformFromAstSync(newProg, undefined, {
     filename: state.file.opts.filename,
     presets: ['@babel/preset-typescript'],
-    plugins: [state.autoworkletizationPlugin],
+    plugins: [state.autoworkletizationPlugin, stripJsxDevAttributesPlugin],
     ast: false,
     babelrc: false,
     configFile: false,
@@ -85,3 +86,22 @@ export function generateWorkletFile(
 
   writeFileSync(dedicatedFilePath, transformedProg);
 }
+
+const stripJsxDevAttributesPlugin = {
+  name: 'worklets-strip-jsx-dev-attributes',
+  visitor: {
+    JSXAttribute(path: NodePath<JSXAttribute>) {
+      const name = path.node.name;
+
+      if (name.type !== 'JSXIdentifier') {
+        return;
+      }
+
+      if (name.name !== '__self' && name.name !== '__source') {
+        return;
+      }
+
+      path.remove();
+    },
+  },
+};