feat(react): createPortal via nodesRef patch ops

.changeset/feat-react-portal-patch-channel.md

@@ -0,0 +1,17 @@
+---
+"@lynx-js/react": patch
+---
+
+Add `createPortal` for rendering a subtree into a different ReactLynx element identified by a `NodesRef`.
+
+```tsx
+function App() {
+  const [host, setHost] = useState(null);
+  return (
+    <view>
+      <view ref={setHost} />
+      {host && createPortal(<text>hi</text>, host)}
+    </view>
+  );
+}
+```

packages/genui/a2ui-playground/lynx-src/App.tsx

@@ -217,7 +217,6 @@ export function App() {
   const [error, setError] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   useEffect(() => {
     let cancelled = false;
 

packages/react/etc/react.api.md

@@ -6,6 +6,7 @@
 
 import { cloneElement } from 'react';
 import { Component } from 'react';
+import type { ComponentChild } from 'preact';
 import type { ComponentClass } from 'react';
 import type { Consumer } from 'react';
 import { createContext } from 'react';
@@ -19,6 +20,7 @@ import { Fragment } from 'react';
 import { isValidElement } from 'react';
 import { lazy } from 'react';
 import { memo } from 'react';
+import type { NodesRef } from '@lynx-js/types';
 import { PureComponent } from 'react';
 import type { ReactNode } from 'react';
 import type { RefObject } from 'react';
@@ -33,6 +35,7 @@ import { useReducer } from 'react';
 import { useRef } from 'react';
 import { useState } from 'react';
 import { useSyncExternalStore } from 'react';
+import type { VNode } from 'preact';
 
 export { cloneElement }
 
@@ -42,6 +45,9 @@ export { createContext }
 
 export { createElement }
 
+// @public
+export function createPortal(vnode: ComponentChild, container: NodesRef): VNode<any> | null;
+
 export { createRef }
 
 // @public

packages/react/runtime/__test__/snapshot/debug/formatPatch.test.ts

@@ -23,6 +23,13 @@ describe('formatPatch', () => {
       SnapshotOperation.SetAttributes,
       2,
       { hidden: true },
+      SnapshotOperation.nodesRefInsertBefore,
+      '[react-ref-2-0]',
+      3,
+      undefined,
+      SnapshotOperation.nodesRefRemoveChild,
+      '[react-ref-2-0]',
+      3,
       SnapshotOperation.DEV_ONLY_AddSnapshot,
       'unique-1',
       'snapshotCreator-val',
@@ -37,6 +44,17 @@ describe('formatPatch', () => {
       { op: 'RemoveChild', parentId: 1, childId: 2 },
       { op: 'SetAttribute', id: 2, dynamicPartIndex: 1, value: 'disabled' },
       { op: 'SetAttributes', id: 2, values: { hidden: true } },
+      {
+        op: 'nodesRefInsertBefore',
+        identifier: '[react-ref-2-0]',
+        childId: 3,
+        beforeId: undefined,
+      },
+      {
+        op: 'nodesRefRemoveChild',
+        identifier: '[react-ref-2-0]',
+        childId: 3,
+      },
       {
         op: 'DEV_ONLY_AddSnapshot',
         uniqID: 'unique-1',