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/__test__/lifecycle/reload.test.jsx

@@ -123,7 +123,7 @@ describe('reload', () => {
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"id":3,"snapshotPatch":[3,-5,0,{"dataX2":"WorldX2"},3,-8,0,"update",3,-6,0,{"attr":{"dataX2":"WorldX2"}}]}]}",
+          "data": "{"patchList":[{"id":3,"snapshotPatch":[3,-2,0,{"dataX2":"WorldX2"},3,-8,0,"update",3,-6,0,{"attr":{"dataX2":"WorldX2"}}]}]}",
           "patchOptions": {
             "flowIds": [
               666,
@@ -305,7 +305,7 @@ describe('reload', () => {
             [
               "rLynxFirstScreen",
               {
-                "root": "{"id":-9,"type":"root","children":[{"id":-13,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-10,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-15,"type":null,"values":["Enjoy"]}]},{"id":-11,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-16,"type":null,"values":["World"]}]},{"id":-12,"type":"wrapper","children":[{"id":-14,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
+                "root": "{"id":-9,"type":"root","children":[{"id":-10,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-11,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-15,"type":null,"values":["Enjoy"]}]},{"id":-12,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-16,"type":null,"values":["World"]}]},{"id":-13,"type":"wrapper","children":[{"id":-14,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
               },
             ],
           ],
@@ -535,7 +535,7 @@ describe('reload', () => {
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"id":11,"snapshotPatch":[3,-5,0,{"dataX2":"WorldX2"},3,-8,0,"update",3,-6,0,{"attr":{"dataX2":"WorldX2"}}]}]}",
+          "data": "{"patchList":[{"id":11,"snapshotPatch":[3,-3,0,{"dataX2":"WorldX2"},3,-9,0,"update",3,-7,0,{"attr":{"dataX2":"WorldX2"}}]}]}",
           "patchOptions": {
             "flowIds": [
               666,
@@ -650,7 +650,7 @@ describe('reload', () => {
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"id":12,"snapshotPatch":[3,-8,0,"???"]}]}",
+          "data": "{"patchList":[{"id":12,"snapshotPatch":[3,-9,0,"???"]}]}",
           "patchOptions": {
             "flowIds": [
               666,
@@ -723,7 +723,7 @@ describe('reload', () => {
             [
               "rLynxFirstScreen",
               {
-                "root": "{"id":-9,"type":"root","children":[{"id":-15,"type":"__Card__:__snapshot_a94a8_test_5","children":[{"id":-13,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-10,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-16,"type":null,"values":["Enjoy"]}]},{"id":-11,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-17,"type":null,"values":["World"]}]},{"id":-12,"type":"wrapper","children":[{"id":-14,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}]}",
+                "root": "{"id":-10,"type":"root","children":[{"id":-11,"type":"__Card__:__snapshot_a94a8_test_5","children":[{"id":-12,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-13,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-17,"type":null,"values":["Enjoy"]}]},{"id":-14,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-18,"type":null,"values":["World"]}]},{"id":-15,"type":"wrapper","children":[{"id":-16,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}]}",
               },
             ],
           ],
@@ -806,7 +806,7 @@ describe('reload', () => {
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"id":16,"snapshotPatch":[3,-17,0,"update"]}]}",
+          "data": "{"patchList":[{"id":16,"snapshotPatch":[3,-18,0,"update"]}]}",
           "patchOptions": {
             "flowIds": [
               666,
@@ -994,7 +994,7 @@ describe('reload', () => {
           [
             "rLynxChange",
             {
-              "data": "{"patchList":[{"id":19,"snapshotPatch":[3,-6,0,"d",3,-7,0,"e",3,-8,0,"f"]}]}",
+              "data": "{"patchList":[{"id":19,"snapshotPatch":[3,-4,0,"d",3,-6,0,"e",3,-8,0,"f"]}]}",
               "patchOptions": {
                 "flowIds": [
                   666,
@@ -1314,15 +1314,15 @@ describe('firstScreenSyncTiming - jsReady', () => {
                 "-8": -16,
                 "-9": -17,
               },
-              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-18,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"]}]},{"id":-19,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"]}]},{"id":-20,"type":"wrapper","children":[{"id":-22,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
+              "root": "{"id":-17,"type":"root","children":[{"id":-18,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-19,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"]}]},{"id":-20,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"]}]},{"id":-21,"type":"wrapper","children":[{"id":-22,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
             },
           ],
         ]
       `);
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"snapshotPatch":[2,-17,-21,0,"__Card__:__snapshot_a94a8_test_5",2,0,"__Card__:__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__Card__:__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,1,3,4,null,0,"__Card__:__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,1,3,6,null,0,"wrapper",8,0,"__Card__:__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,1,3,8,null,1,2,3,null,1,-17,2,null],"id":21}]}",
+          "data": "{"patchList":[{"snapshotPatch":[2,-17,-18,0,"__Card__:__snapshot_a94a8_test_5",2,0,"__Card__:__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__Card__:__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,1,3,4,null,0,"__Card__:__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,1,3,6,null,0,"wrapper",8,0,"__Card__:__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,1,3,8,null,1,2,3,null,1,-17,2,null],"id":21}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {
@@ -1513,11 +1513,11 @@ describe('firstScreenSyncTiming - jsReady', () => {
             {
               "jsReadyEventIdSwap": {
                 "-1": -9,
-                "-13": -21,
-                "-5": -13,
+                "-10": -18,
+                "-2": -10,
                 "-9": -17,
               },
-              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__Card__:__snapshot_a94a8_test_7","children":[{"id":-18,"type":"__Card__:__snapshot_a94a8_test_8","values":[{"item-key":0}],"children":[{"id":-22,"type":"__Card__:__snapshot_a94a8_test_6","values":["a"]}]},{"id":-19,"type":"__Card__:__snapshot_a94a8_test_8","values":[{"item-key":1}],"children":[{"id":-23,"type":"__Card__:__snapshot_a94a8_test_6","values":["b"]}]},{"id":-20,"type":"__Card__:__snapshot_a94a8_test_8","values":[{"item-key":2}],"children":[{"id":-24,"type":"__Card__:__snapshot_a94a8_test_6","values":["c"]}]}]}]}",
+              "root": "{"id":-17,"type":"root","children":[{"id":-18,"type":"__Card__:__snapshot_a94a8_test_7","children":[{"id":-19,"type":"__Card__:__snapshot_a94a8_test_8","values":[{"item-key":0}],"children":[{"id":-20,"type":"__Card__:__snapshot_a94a8_test_6","values":["a"]}]},{"id":-21,"type":"__Card__:__snapshot_a94a8_test_8","values":[{"item-key":1}],"children":[{"id":-22,"type":"__Card__:__snapshot_a94a8_test_6","values":["b"]}]},{"id":-23,"type":"__Card__:__snapshot_a94a8_test_8","values":[{"item-key":2}],"children":[{"id":-24,"type":"__Card__:__snapshot_a94a8_test_6","values":["c"]}]}]}]}",
             },
           ],
         ]
@@ -1679,9 +1679,9 @@ describe('firstScreenSyncTiming - jsReady', () => {
               "jsReadyEventIdSwap": {
                 "-1": -2,
                 "-2": -10,
-                "-6": -14,
+                "-3": -11,
               },
-              "root": "{"id":-10,"type":"root","children":[{"id":-14,"type":"__Card__:__snapshot_a94a8_test_9","children":[{"id":-11,"type":"__Card__:__snapshot_a94a8_test_10","values":[{"item-key":0}],"children":[{"id":-15,"type":"__Card__:__snapshot_a94a8_test_6","values":["a"]}]},{"id":-12,"type":"__Card__:__snapshot_a94a8_test_10","values":[{"item-key":1}],"children":[{"id":-16,"type":"__Card__:__snapshot_a94a8_test_6","values":["b"]}]},{"id":-13,"type":"__Card__:__snapshot_a94a8_test_10","values":[{"item-key":2}],"children":[{"id":-17,"type":"__Card__:__snapshot_a94a8_test_6","values":["c"]}]}]}]}",
+              "root": "{"id":-10,"type":"root","children":[{"id":-11,"type":"__Card__:__snapshot_a94a8_test_9","children":[{"id":-12,"type":"__Card__:__snapshot_a94a8_test_10","values":[{"item-key":0}],"children":[{"id":-13,"type":"__Card__:__snapshot_a94a8_test_6","values":["a"]}]},{"id":-14,"type":"__Card__:__snapshot_a94a8_test_10","values":[{"item-key":1}],"children":[{"id":-15,"type":"__Card__:__snapshot_a94a8_test_6","values":["b"]}]},{"id":-16,"type":"__Card__:__snapshot_a94a8_test_10","values":[{"item-key":2}],"children":[{"id":-17,"type":"__Card__:__snapshot_a94a8_test_6","values":["c"]}]}]}]}",
             },
           ],
         ]
@@ -1874,15 +1874,15 @@ describe('firstScreenSyncTiming - jsReady', () => {
             "rLynxFirstScreen",
             {
               "jsReadyEventIdSwap": {},
-              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-18,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"]}]},{"id":-19,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"]}]},{"id":-20,"type":"wrapper","children":[{"id":-22,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
+              "root": "{"id":-17,"type":"root","children":[{"id":-18,"type":"__Card__:__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-19,"type":"__Card__:__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"]}]},{"id":-20,"type":"__Card__:__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"]}]},{"id":-21,"type":"wrapper","children":[{"id":-22,"type":"__Card__:__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
             },
           ],
         ]
       `);
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"snapshotPatch":[2,-17,-21,0,"__Card__:__snapshot_a94a8_test_5",2,0,"__Card__:__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__Card__:__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,1,3,4,null,0,"__Card__:__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,1,3,6,null,0,"wrapper",8,0,"__Card__:__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,1,3,8,null,1,2,3,null,1,-17,2,null],"id":27}]}",
+          "data": "{"patchList":[{"snapshotPatch":[2,-17,-18,0,"__Card__:__snapshot_a94a8_test_5",2,0,"__Card__:__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__Card__:__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,1,3,4,null,0,"__Card__:__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,1,3,6,null,0,"wrapper",8,0,"__Card__:__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,1,3,8,null,1,2,3,null,1,-17,2,null],"id":27}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {

packages/react/runtime/__test__/lifecycle/reloadMT.jsx

@@ -4,8 +4,6 @@
 // LICENSE file in the root directory of this source tree.
 */
 
-/** @jsxImportSource ../../lepus */
-
 import { useState } from '../../src/index';
 
 function SubCompMT(props) {

packages/react/runtime/__test__/list.test.jsx

@@ -1,4 +1,3 @@
-/** @jsxImportSource ../lepus */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { elementTree, nativeMethodQueue } from './utils/nativeMethod';
@@ -3502,7 +3501,7 @@ describe('list-item with "defer" attribute', () => {
               "rLynxPublishEvent",
               {
                 "data": {},
-                "handlerName": "-6:__extraProps:onComponentAtIndex",
+                "handlerName": "-3:__extraProps:onComponentAtIndex",
               },
             ],
           ],
@@ -3511,7 +3510,7 @@ describe('list-item with "defer" attribute', () => {
               "rLynxPublishEvent",
               {
                 "data": {},
-                "handlerName": "-4:__extraProps:onRecycleComponent",
+                "handlerName": "-2:__extraProps:onRecycleComponent",
               },
             ],
           ],