Infer threaded components from OnRuntime

Author: Szymon20000

App.tsx

@@ -40,6 +40,7 @@ import { ChatBubble } from './src/chat/ChatBubble';
 import type { RenderedChatItem } from './src/native/ComposeChatListNativeComponent';
 import {
   call,
+  OnRuntime,
   threadedComponent,
   Threaded,
   ThreadedRuntime,
@@ -1404,17 +1405,15 @@ function SecondRuntimeRnListSurface({
   mode: SecondRuntimeRnBenchmarkMode;
 }) {
   return (
-    <Threaded
+    <OnRuntime
       accessibilityLabel={`second-runtime-${mode}`}
-      component={SecondRuntimeRnListApp}
-      props={{
-        blockStatus: 'second-runtime',
-        mode,
-      }}
+      name="background-list"
       style={styles.secondRuntimeSurface}
       surfaceKey={mode}
       testID={`second-runtime-${mode}`}
-    />
+    >
+      <SecondRuntimeRnListApp blockStatus={blockStatus} mode={mode} />
+    </OnRuntime>
   );
 }
 
@@ -1424,24 +1423,20 @@ type SecondRuntimeRnListAppProps = {
   runtimeName?: string;
 };
 
-export const SecondRuntimeRnListApp =
-  threadedComponent<SecondRuntimeRnListAppProps>(
-    'BenchmarkRnList',
-    function SecondRuntimeRnListApp({
-      blockStatus = 'second-runtime',
-      mode = 'flashlist',
-      runtimeName,
-    }: SecondRuntimeRnListAppProps) {
-      const normalizedMode: SecondRuntimeRnBenchmarkMode =
-        mode === 'legendlist' ? 'legendlist' : 'flashlist';
-      return (
-        <RnListBenchmarkScreen
-          blockStatus={`${blockStatus} / ${runtimeName ?? runtimeKind()}`}
-          mode={normalizedMode}
-        />
-      );
-    },
+export function SecondRuntimeRnListApp({
+  blockStatus = 'second-runtime',
+  mode = 'flashlist',
+  runtimeName,
+}: SecondRuntimeRnListAppProps) {
+  const normalizedMode: SecondRuntimeRnBenchmarkMode =
+    mode === 'legendlist' ? 'legendlist' : 'flashlist';
+  return (
+    <RnListBenchmarkScreen
+      blockStatus={`${blockStatus} / ${runtimeName ?? runtimeKind()}`}
+      mode={normalizedMode}
+    />
   );
+}
 
 function SharedTreeRuntimeScreen() {
   return (

packages/core/README.md

@@ -6,6 +6,7 @@ secondary React Native/Hermes runtime.
 The package owns the JS registry and host API:
 
 - `threadedComponent(name, Component)`
+- `OnRuntime`
 - `Threaded`
 - `ThreadedScreen`
 - `withThreadedRuntime(config, options)` from
@@ -98,12 +99,12 @@ component name.
 
 ### 3. Mark Components And Render Them
 
-Most consumers should make a component opt in once and then render it through a
-secondary runtime like a normal React component.
+Most consumers should mount a top-level component inside `OnRuntime`. Metro
+treats the direct child component as a threaded boundary.
 
 ```tsx
 import {
-  Threaded,
+  OnRuntime,
   ThreadedScreen,
   threadedComponent,
 } from '@react-native-runtimes/core';
@@ -113,25 +114,23 @@ type MessageListProps = {
   initialIndex?: number;
 };
 
-export const MessageList = threadedComponent<MessageListProps>(
-  'MessageList',
-  function MessageList(props) {
-    return <ActualMessageList {...props} />;
-  },
-);
+function MessageList(props: MessageListProps) {
+  return <ActualMessageList {...props} />;
+}
 
-<Threaded
-  component={MessageList}
-  props={{ conversationId, initialIndex: 120 }}
-  runtimeName="messages-runtime"
-/>;
+<OnRuntime name="messages-runtime">
+  <MessageList conversationId={conversationId} initialIndex={120} />
+</OnRuntime>;
 ```
 
-`threadedComponent` is the annotation/marker that says this component may be
-mounted by another runtime. `Threaded` serializes `props` and mounts a native
+Metro sees `MessageList` as the direct child of `OnRuntime` and rewrites it to
+an exported `threadedComponent(...)` registration with a stable file-based id.
+`OnRuntime` serializes the child props and mounts a native
 `ThreadedRuntimeSurface` with the generated component name. Props must be
 JSON-serializable; large or mutable data should be passed by id/key and read
-through a shared native store.
+through a shared native store. Keep inferred components in module/global scope
+so Metro can generate the registration and the other runtime can require them by
+name.
 
 For navigation or chat apps where the whole route should live on another JS
 runtime, use `ThreadedScreen`:
@@ -157,6 +156,9 @@ preloads the named runtime by default, and keeps the runtime alive when the
 screen unmounts. Set `destroyOnUnmount` when the route should release its
 secondary runtime immediately.
 
+Use `threadedComponent` and `Threaded` directly when you want a custom component
+name or need to bypass the directive transform.
+
 You can also prewarm the runtime before rendering the screen:
 
 ```tsx

packages/core/metro.js

@@ -14,6 +14,7 @@ const DEFAULT_IGNORED_DIRS = new Set([
   'node_modules',
 ]);
 const IGNORED_FUNCTION_DIRECTIVES = new Set([
+  'threaded',
   'use asm',
   'use strict',
   'worklet',
@@ -57,7 +58,7 @@ function generateThreadedRuntimeEntry({
 }) {
   const root = path.resolve(projectRoot);
   const files = collectSourceFiles(root, roots);
-  const components = files.flatMap(file => scanThreadedComponents(file));
+  const components = files.flatMap(file => scanThreadedComponents(file, root));
   const runtimeFunctions = files.flatMap(file =>
     scanRuntimeFunctions(file, root),
   );
@@ -176,16 +177,45 @@ function walkDirectory(directory, files) {
   });
 }
 
-function scanThreadedComponents(file) {
+function scanThreadedComponents(file, projectRoot) {
   const source = fs.readFileSync(file, 'utf8');
   const ast = parser.parse(source, {
     errorRecovery: true,
     plugins: ['jsx', 'typescript'],
     sourceType: 'module',
   });
   const components = [];
+  const onRuntimeComponentNames = collectOnRuntimeComponentNames(ast);
 
   traverse(ast, {
+    Program(pathRef) {
+      pathRef.get('body').forEach(bodyPath => {
+        let functionPath = bodyPath;
+        if (bodyPath.isExportNamedDeclaration()) {
+          const declarationPath = bodyPath.get('declaration');
+          if (!declarationPath.isFunctionDeclaration()) {
+            return;
+          }
+          functionPath = declarationPath;
+        }
+
+        if (!functionPath.isFunctionDeclaration()) {
+          return;
+        }
+
+        const functionNode = functionPath.node;
+        if (!onRuntimeComponentNames.has(functionNode.id.name)) {
+          return;
+        }
+
+        components.push({
+          exportName: functionNode.id.name,
+          file,
+          name: threadedComponentId(file, projectRoot, functionNode.id.name),
+        });
+      });
+    },
+
     ExportNamedDeclaration(pathRef) {
       const declaration = pathRef.node.declaration;
       if (!declaration || declaration.type !== 'VariableDeclaration') {
@@ -317,6 +347,48 @@ function isThreadedComponentCall(node) {
   return callee.type === 'Identifier' && callee.name === 'threadedComponent';
 }
 
+function onRuntimeChildNameFromJsxElement(node) {
+  if (
+    node.openingElement.name.type !== 'JSXIdentifier' ||
+    node.openingElement.name.name !== 'OnRuntime'
+  ) {
+    return null;
+  }
+
+  const children = node.children.filter(child => {
+    if (child.type === 'JSXText') {
+      return child.value.trim().length > 0;
+    }
+    if (
+      child.type === 'JSXExpressionContainer' &&
+      child.expression.type === 'JSXEmptyExpression'
+    ) {
+      return false;
+    }
+    return true;
+  });
+
+  if (children.length !== 1 || children[0].type !== 'JSXElement') {
+    return null;
+  }
+
+  const childName = children[0].openingElement.name;
+  return childName.type === 'JSXIdentifier' ? childName.name : null;
+}
+
+function collectOnRuntimeComponentNames(ast) {
+  const componentNames = new Set();
+  traverse(ast, {
+    JSXElement(pathRef) {
+      const componentName = onRuntimeChildNameFromJsxElement(pathRef.node);
+      if (componentName) {
+        componentNames.add(componentName);
+      }
+    },
+  });
+  return componentNames;
+}
+
 function isRuntimeFunctionCall(node) {
   if (!node || node.type !== 'CallExpression') {
     return false;
@@ -361,6 +433,10 @@ function runtimeFunctionId(file, projectRoot, exportName) {
   )}.${exportName}`;
 }
 
+function threadedComponentId(file, projectRoot, exportName) {
+  return runtimeFunctionId(file, projectRoot, exportName);
+}
+
 function renderGeneratedEntry({
   components,
   generatedEntry,