fix(react/runtime): export correct cloneElement on main-thread

.changeset/tall-seals-notice.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Fix `cloneElement` and `createElement` not working correctly on the main thread.

packages/react/components/src/DeferredListItem.tsx

@@ -4,9 +4,8 @@
 
 import type { FC, ReactNode, RefCallback } from 'react';
 
-import { cloneElement as _cloneElement, useCallback, useRef, useState } from '@lynx-js/react';
+import { cloneElement, useCallback, useRef, useState } from '@lynx-js/react';
 import type { SnapshotInstance } from '@lynx-js/react/internal';
-import { cloneElement as _cloneElementMainThread } from '@lynx-js/react/lepus';
 
 export interface DeferredListItemProps {
   defer?: boolean | { unmountRecycled?: boolean };
@@ -15,8 +14,6 @@ export interface DeferredListItemProps {
 }
 
 export const DeferredListItem: FC<DeferredListItemProps> = ({ defer, renderListItem, renderChildren }) => {
-  const __cloneElement = __MAIN_THREAD__ ? _cloneElementMainThread : _cloneElement;
-
   const initialDeferRef = useRef(defer);
   const prevDeferRef = useRef(defer);
   const [isReady, setIsReady] = useState(!defer);
@@ -50,7 +47,7 @@ export const DeferredListItem: FC<DeferredListItemProps> = ({ defer, renderListI
   }
 
   return initialDeferRef.current
-    ? __cloneElement(renderListItem(isReady ? renderChildren() : null), {
+    ? cloneElement(renderListItem(isReady ? renderChildren() : null), {
       isReady: +isReady, // hack: preact specially handled boolean props
       ref: onGetSnapshotInstance,
     })

packages/react/runtime/lepus/index.d.ts

@@ -1,4 +1,4 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-export { cloneElement, createElement } from 'react';
+export { cloneElement, createElement } from 'preact/compat';

packages/react/runtime/src/cloneElement.ts

@@ -0,0 +1,15 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { cloneElement as preactCloneElement } from 'preact/compat';
+
+import { cloneElement as mainThreadCloneElement } from '../lepus/index.js';
+
+export const cloneElement: typeof import('preact/compat').cloneElement = /*#__PURE__*/ (() => {
+  if (__BACKGROUND__) {
+    return preactCloneElement;
+  } else {
+    return mainThreadCloneElement;
+  }
+})();

packages/react/runtime/src/createElement.ts

@@ -0,0 +1,14 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { createElement as preactCreateElement } from 'preact/compat';
+
+import { createElement as mainThreadCreateElement } from '../lepus/index.js';
+
+export const createElement: typeof import('preact/compat').createElement = /*#__PURE__*/ (() => {
+  if (__BACKGROUND__) {
+    return preactCreateElement;
+  } else {
+    return mainThreadCreateElement;
+  }
+})();

packages/react/runtime/src/index.ts

@@ -9,9 +9,7 @@ import {
   Component,
   Fragment,
   PureComponent,
-  cloneElement,
   createContext,
-  createElement,
   createRef,
   forwardRef,
   isValidElement,
@@ -20,6 +18,8 @@ import {
   useSyncExternalStore,
 } from 'preact/compat';
 
+import { cloneElement } from './cloneElement.js';
+import { createElement } from './createElement.js';
 import {
   useCallback,
   useContext,
@@ -72,6 +72,7 @@ export default {
   forwardRef,
   Suspense,
   lazy,
+  cloneElement,
   createElement,
 };
 

packages/react/runtime/src/lynx/suspense.ts

@@ -3,23 +3,20 @@
 // LICENSE file in the root directory of this source tree.
 
 import type { FunctionComponent, VNode } from 'preact';
-import { Suspense as PreactSuspense, createElement as createElementBackground } from 'preact/compat';
+import { Suspense as PreactSuspense } from 'preact/compat';
 import { useRef } from 'preact/hooks';
 
-import { createElement as createElementMainThread } from '@lynx-js/react/lepus';
-
 import type { BackgroundSnapshotInstance } from '../backgroundSnapshot.js';
+import { createElement } from '../createElement.js';
 import { globalBackgroundSnapshotInstancesToRemove } from '../lifecycle/patch/commit.js';
 
 export const Suspense: FunctionComponent<{ children: VNode | VNode[]; fallback: VNode }> = (
   { children, fallback },
 ) => {
-  const __createElement =
-    (__MAIN_THREAD__ ? createElementMainThread : createElementBackground) as typeof createElementBackground;
   const childrenRef = useRef<BackgroundSnapshotInstance>();
 
   // @ts-expect-error wrapper is a valid element type
-  const newChildren = __createElement('wrapper', {
+  const newChildren = createElement('wrapper', {
     ref: (bsi: BackgroundSnapshotInstance) => {
       if (bsi) {
         childrenRef.current = bsi;
@@ -28,7 +25,7 @@ export const Suspense: FunctionComponent<{ children: VNode | VNode[]; fallback:
   }, children);
 
   // @ts-expect-error wrapper is a valid element type
-  const newFallback = __createElement('wrapper', {
+  const newFallback = createElement('wrapper', {
     ref: (bsi: BackgroundSnapshotInstance) => {
       if (bsi && childrenRef.current) {
         const i = globalBackgroundSnapshotInstancesToRemove.indexOf(childrenRef.current.__id);
@@ -40,5 +37,5 @@ export const Suspense: FunctionComponent<{ children: VNode | VNode[]; fallback:
     },
   }, fallback);
 
-  return __createElement(PreactSuspense, { fallback: newFallback }, newChildren);
+  return createElement(PreactSuspense, { fallback: newFallback }, newChildren);
 };