@lynx-js/react 0.105.0 → 0.105.1

package/runtime/lib/worklet/runOnMainThread.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `runOnMainThread` allows triggering main thread functions on the main thread asynchronously.
+ * @param fn - The main thread functions to be called.
+ * @returns A function. Calling which with the arguments to be passed to the main thread function to trigger it on the main thread. This function returns a promise that resolves to the return value of the main thread function.
+ * @example
+ * ```ts
+ * import { runOnMainThread } from '@lynx-js/react';
+ *
+ * async function someFunction() {
+ *   const fn = runOnMainThread(() => {
+ *     'main thread';
+ *     return 'hello';
+ *   });
+ *   const result = await fn();
+ * }
+ * ```
+ * @public
+ */
+export declare function runOnMainThread<R, Fn extends (...args: any[]) => R>(fn: Fn): (...args: Parameters<Fn>) => Promise<R>;

package/runtime/lib/worklet/runOnMainThread.js

@@ -0,0 +1,45 @@
+import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
+import { onPostWorkletCtx } from './ctx.js';
+import { isMtsEnabled } from './functionality.js';
+import { onFunctionCall } from './functionCall.js';
+/**
+ * `runOnMainThread` allows triggering main thread functions on the main thread asynchronously.
+ * @param fn - The main thread functions to be called.
+ * @returns A function. Calling which with the arguments to be passed to the main thread function to trigger it on the main thread. This function returns a promise that resolves to the return value of the main thread function.
+ * @example
+ * ```ts
+ * import { runOnMainThread } from '@lynx-js/react';
+ *
+ * async function someFunction() {
+ *   const fn = runOnMainThread(() => {
+ *     'main thread';
+ *     return 'hello';
+ *   });
+ *   const result = await fn();
+ * }
+ * ```
+ * @public
+ */
+export function runOnMainThread(fn) {
+    if (__LEPUS__) {
+        throw new Error('runOnMainThread can only be used on the background thread.');
+    }
+    if (!isMtsEnabled()) {
+        throw new Error('runOnMainThread requires Lynx sdk version 2.14.');
+    }
+    return async (...params) => {
+        return new Promise((resolve) => {
+            onPostWorkletCtx(fn);
+            const resolveId = onFunctionCall(resolve);
+            lynx.getCoreContext().dispatchEvent({
+                type: WorkletEvents.runWorkletCtx,
+                data: JSON.stringify({
+                    worklet: fn,
+                    params,
+                    resolveId,
+                }),
+            });
+        });
+    };
+}
+//# sourceMappingURL=runOnMainThread.js.map

package/runtime/lib/worklet/runOnMainThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runOnMainThread.js","sourceRoot":"","sources":["../../src/worklet/runOnMainThread.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAAsC,EAAM;IACzE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IACD,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;QACpB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IACD,OAAO,KAAK,EAAE,GAAG,MAAa,EAAc,EAAE;QAC5C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,gBAAgB,CAAC,EAAoB,CAAC,CAAC;YACvC,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;YAC1C,IAAI,CAAC,cAAe,EAAE,CAAC,aAAa,CAAC;gBACnC,IAAI,EAAE,aAAa,CAAC,aAAa;gBACjC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;oBACnB,OAAO,EAAE,EAAoB;oBAC7B,MAAM;oBACN,SAAS;iBACW,CAAC;aACxB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/runtime/lib/worklet/transformToWorklet.d.ts

@@ -0,0 +1 @@
+export {};

package/runtime/lib/worklet/transformToWorklet.js

@@ -0,0 +1,21 @@
+let lastId = 0;
+/**
+ * transform args of `runOnBackground()`.
+ *
+ * @internal
+ */
+export function transformToWorklet(obj) {
+    const id = ++lastId;
+    if (typeof obj !== 'function') {
+        // We save the error message in the object, so that we can throw it later when the function is called on the main thread.
+        return {
+            _jsFnId: id,
+            _error: `Argument of runOnBackground should be a function, but got [${typeof obj}] instead`,
+        };
+    }
+    return {
+        _jsFnId: id,
+        _fn: obj,
+    };
+}
+//# sourceMappingURL=transformToWorklet.js.map

package/runtime/lib/worklet/transformToWorklet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformToWorklet.js","sourceRoot":"","sources":["../../src/worklet/transformToWorklet.ts"],"names":[],"mappings":"AAKA,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAA4B;IAC7D,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC;IACpB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;QAC9B,yHAAyH;QACzH,OAAO;YACL,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,8DAA8D,OAAO,GAAG,WAAW;SAC5F,CAAC;IACJ,CAAC;IACD,OAAO;QACL,OAAO,EAAE,EAAE;QACX,GAAG,EAAE,GAAG;KACT,CAAC;AACJ,CAAC"}

package/runtime/lib/worklet/workletRef.js

@@ -1,7 +1,7 @@
 import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
-import { lynxWorkletJsImpl } from './jsImpl.js';
 import { addWorkletRefInitValue } from './workletRefPool.js';
 import { useMemo } from '../hooks/react.js';
+let lastId = 0;
 class WorkletRef {
     /**
      * @internal
@@ -24,8 +24,7 @@ class WorkletRef {
      */
     constructor(initValue, type) {
         if (__JS__) {
-            const impl = lynxWorkletJsImpl();
-            this._id = impl ? ++impl._workletRefLastId : 0;
+            this._id = ++lastId;
             this._initValue = initValue;
             this._type = type;
             addWorkletRefInitValue(this._id, initValue);

package/runtime/lib/worklet/workletRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"workletRef.js","sourceRoot":"","sources":["../../src/worklet/workletRef.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,MAAe,UAAU;IACvB;;OAEG;IACO,GAAG,CAAS;IACtB;;OAEG;IACO,UAAU,CAAgB;IACpC;;OAEG;IACO,KAAK,CAAS;IACxB;;OAEG;IACO,kBAAkB,CAAU;IAEtC;;OAEG;IACH,YAAsB,SAAY,EAAE,IAAY;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;YACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,sBAAsB,CAAC,IAAI,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,+GAA+G;YAC/G,gEAAgE;YAChE,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,IAAI,OAAO;QACT,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CAAC,sFAAsF,CAAC,CAAC;QAC1G,CAAC;QACD,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,oBAAoB;YACpB,MAAM,IAAI,KAAK,CAAC,2FAA2F,CAAC,CAAC;QAC/G,CAAC;QACD,oBAAoB;QACpB,OAAO,SAAc,CAAC;IACxB,CAAC;IAED,IAAI,OAAO,CAAC,CAAI;QACd,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CAAC,sFAAsF,CAAC,CAAC;QAC1G,CAAC;QACD,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,2FAA2F,CAAC,CAAC;QAC/G,CAAC;IACH,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,GAAG;SAChB,CAAC;IACJ,CAAC;CACF;AAED;;;;;;GAMG;AACH,MAAM,OAAO,aAAiB,SAAQ,UAAa;IACjD,YAAY,SAAY;QACtB,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAChC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;YACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,iCAAiC,CAAC,GAAG,EAAE;gBACnF,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC;oBACpC,IAAI,EAAE,aAAa,CAAC,iBAAiB;oBACrC,IAAI,EAAE;wBACJ,EAAE;qBACH;iBACF,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CACF;AA2HD,MAAM,UAAU,gBAAgB,CAAI,SAAa;IAC/C,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,OAAO,IAAI,aAAa,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}
+{"version":3,"file":"workletRef.js","sourceRoot":"","sources":["../../src/worklet/workletRef.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAExE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf,MAAe,UAAU;IACvB;;OAEG;IACO,GAAG,CAAS;IACtB;;OAEG;IACO,UAAU,CAAgB;IACpC;;OAEG;IACO,KAAK,CAAS;IACxB;;OAEG;IACO,kBAAkB,CAAU;IAEtC;;OAEG;IACH,YAAsB,SAAY,EAAE,IAAY;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,GAAG,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,sBAAsB,CAAC,IAAI,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,+GAA+G;YAC/G,gEAAgE;YAChE,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,IAAI,OAAO;QACT,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CAAC,sFAAsF,CAAC,CAAC;QAC1G,CAAC;QACD,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,oBAAoB;YACpB,MAAM,IAAI,KAAK,CAAC,2FAA2F,CAAC,CAAC;QAC/G,CAAC;QACD,oBAAoB;QACpB,OAAO,SAAc,CAAC;IACxB,CAAC;IAED,IAAI,OAAO,CAAC,CAAI;QACd,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CAAC,sFAAsF,CAAC,CAAC;QAC1G,CAAC;QACD,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,2FAA2F,CAAC,CAAC;QAC/G,CAAC;IACH,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,GAAG;SAChB,CAAC;IACJ,CAAC;CACF;AAED;;;;;;GAMG;AACH,MAAM,OAAO,aAAiB,SAAQ,UAAa;IACjD,YAAY,SAAY;QACtB,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAChC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;YACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,iCAAiC,CAAC,GAAG,EAAE;gBACnF,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC;oBACpC,IAAI,EAAE,aAAa,CAAC,iBAAiB;oBACrC,IAAI,EAAE;wBACJ,EAAE;qBACH;iBACF,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CACF;AA2HD,MAAM,UAAU,gBAAgB,CAAI,SAAa;IAC/C,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,OAAO,IAAI,aAAa,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/runtime/lib/worklet/workletRefPool.d.ts

@@ -1,2 +1 @@
-export declare function addWorkletRefInitValue(id: number, value: unknown): void;
-export declare function takeWorkletRefInitValuePatch(): [number, unknown][];
+export {};

package/runtime/lib/worklet/workletRefPool.js

@@ -1,22 +1,25 @@
 // 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.
-import { lynxWorkletJsImpl } from './jsImpl.js';
+import { isMtsEnabled } from './functionality.js';
+let initValuePatch = [];
+const initValueIdSet = /*#__PURE__*/ new Set();
+/**
+ * @internal
+ */
 export function addWorkletRefInitValue(id, value) {
-    const impl = lynxWorkletJsImpl();
-    if (!impl) {
+    if (!isMtsEnabled()) {
         return;
     }
-    impl._workletRefInitValueSet.add(id);
-    impl._workletRefInitValuePatch.push([id, value]);
+    initValueIdSet.add(id);
+    initValuePatch.push([id, value]);
 }
+/**
+ * @internal
+ */
 export function takeWorkletRefInitValuePatch() {
-    const impl = lynxWorkletJsImpl(false);
-    if (!impl) {
-        return [];
-    }
-    const res = impl._workletRefInitValuePatch;
-    impl._workletRefInitValuePatch = [];
+    const res = initValuePatch;
+    initValuePatch = [];
     return res;
 }
 //# sourceMappingURL=workletRefPool.js.map

package/runtime/lib/worklet/workletRefPool.js.map

@@ -1 +1 @@
-{"version":3,"file":"workletRefPool.js","sourceRoot":"","sources":["../../src/worklet/workletRefPool.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,UAAU,sBAAsB,CAAC,EAAU,EAAE,KAAc;IAC/D,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO;IACT,CAAC;IAED,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,4BAA4B;IAC1C,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,GAAG,GAAG,IAAI,CAAC,yBAAyB,CAAC;IAC3C,IAAI,CAAC,yBAAyB,GAAG,EAAE,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"workletRefPool.js","sourceRoot":"","sources":["../../src/worklet/workletRefPool.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,IAAI,cAAc,GAAwB,EAAE,CAAC;AAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,GAAG,EAAU,CAAC;AAEvD;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,EAAU,EAAE,KAAc;IAC/D,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;QACpB,OAAO;IACT,CAAC;IAED,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACvB,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;AACnC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,4BAA4B;IAC1C,MAAM,GAAG,GAAG,cAAc,CAAC;IAC3B,cAAc,GAAG,EAAE,CAAC;IACpB,OAAO,GAAG,CAAC;AACb,CAAC"}

package/runtime/src/internal.ts

@@ -54,7 +54,7 @@ export const __ComponentIsPolyfill: FC<{ is: string }> = /* @__PURE__ */ factory
 
 export { loadLazyBundle } from './lynx/lazy-bundle.js';
 
-export { transformToWorklet } from './worklet/runWorklet.js';
+export { transformToWorklet } from './worklet/transformToWorklet.js';
 export { registerWorkletOnBackground } from './worklet/hmr.js';
 
 export { loadWorkletRuntime } from '@lynx-js/react/worklet-runtime/bindings';

package/runtime/src/legacy-react-runtime/index.ts

@@ -1,14 +1,14 @@
 // 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.
-import { createContext } from 'preact';
+import { createContext, createRef } from 'preact';
 import { lazy } from 'preact/compat';
 
 import {
   ComponentFromReactRuntime as Component,
   ComponentFromReactRuntime as PureComponent,
 } from '../compat/lynxComponent.js';
-import { useCallback, useEffect, useMemo, useReducer, useState } from '../hooks/react.js';
+import { useCallback, useEffect, useMemo, useReducer, useState, useRef } from '../hooks/react.js';
 
 /* v8 ignore next 3 */
 function __runInJS<T>(value: T): T | undefined | null {
@@ -30,9 +30,11 @@ export default {
   Component,
   PureComponent,
   createContext,
+  createRef,
   lazy,
   useState,
   useReducer,
+  useRef,
   useEffect,
   useMemo,
   useCallback,

package/runtime/src/lifecycle/reload.ts

@@ -14,6 +14,7 @@ import { LifecycleConstant } from '../lifecycleConstant.js';
 import { __pendingListUpdates } from '../list.js';
 import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
 import { deinitGlobalSnapshotPatch } from '../snapshotPatch.js';
+import { destroyWorklet } from '../worklet/destroy.js';
 
 function reloadMainThread(data: any, options: UpdatePageOption): void {
   if (__PROFILE__) {
@@ -26,6 +27,7 @@ function reloadMainThread(data: any, options: UpdatePageOption): void {
     Object.assign(lynx.__initData, data);
   }
 
+  destroyWorklet();
   snapshotInstanceManager.clear();
   __pendingListUpdates.clear();
 

package/runtime/src/lynx/tt.ts

@@ -14,7 +14,7 @@ import { CHILDREN } from '../renderToOpcodes/constants.js';
 import { __root } from '../root.js';
 import { globalRefsToSet, updateBackgroundRefs } from '../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../snapshot.js';
-import { destroyWorklet } from '../worklet/jsImpl.js';
+import { destroyWorklet } from '../worklet/destroy.js';
 
 function injectTt(): void {
   // @ts-ignore

package/runtime/src/lynx-api.ts

@@ -7,9 +7,9 @@ import { useState } from 'preact/hooks';
 import type { Consumer, FC, ReactNode } from 'react';
 
 import { factory, withInitDataInState } from './compat/initData.js';
+import { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
 import { LifecycleConstant } from './lifecycleConstant.js';
 import { flushDelayedLifecycleEvents } from './lynx/tt.js';
-import { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
 import { __root } from './root.js';
 
 /**
@@ -87,8 +87,8 @@ export const root: Root = {
     } else {
       __root.__jsx = jsx;
       render(jsx, __root as any);
-      if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
-      } else {
+      if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {}
+      else {
         lynx.getNativeApp().callLepusMethod(LifecycleConstant.jsReady, {});
       }
 
@@ -369,6 +369,7 @@ export interface Lynx {
   registerDataProcessors: (dataProcessorDefinition: DataProcessorDefinition) => void;
 }
 
-export { runOnBackground, runOnMainThread } from './worklet/runWorklet.js';
+export { runOnMainThread } from './worklet/runOnMainThread.js';
+export { runOnBackground } from './worklet/runOnBackground.js';
 export { MainThreadRef, useMainThreadRef } from './worklet/workletRef.js';
 export { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';

package/runtime/src/worklet/ctx.ts

@@ -3,20 +3,20 @@
 // LICENSE file in the root directory of this source tree.
 import type { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { lynxWorkletJsImpl } from './jsImpl.js';
+import { isMtsEnabled, isRunOnBackgroundEnabled } from './functionality.js';
+import { registerWorkletCtx } from './runOnBackground.js';
 
 /**
  * @internal
  */
 export function onPostWorkletCtx(afterValue: Worklet | null): Worklet | null {
-  const impl = lynxWorkletJsImpl();
-  if (!impl && afterValue) {
+  if (!isMtsEnabled() && afterValue) {
     lynx.reportError(new Error('Main thread script requires Lynx sdk version 2.14'));
     return null;
   }
-  if (!afterValue) {
+  if (!afterValue || !isRunOnBackgroundEnabled()) {
     return afterValue;
   }
-  impl?._workletExecIdMap?.add(afterValue);
+  registerWorkletCtx(afterValue);
   return afterValue;
 }

package/runtime/src/worklet/destroy.ts

@@ -0,0 +1,16 @@
+// 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.
+
+import { takeWorkletRefInitValuePatch } from './workletRefPool.js';
+
+export const destroyTasks: (() => void)[] = [];
+
+export function destroyWorklet(): void {
+  takeWorkletRefInitValuePatch();
+
+  for (const task of destroyTasks) {
+    task();
+  }
+  destroyTasks.length = 0;
+}

package/runtime/src/worklet/functionCall.ts

@@ -0,0 +1,42 @@
+// 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 { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
+import type { RunWorkletCtxRetData } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { destroyTasks } from './destroy.js';
+import { IndexMap } from './indexMap.js';
+
+let resolveMap: IndexMap<(value: any) => void> | undefined;
+
+function initReturnValueListener(): void {
+  const context: RuntimeProxy = __JS__ ? lynx.getCoreContext() : lynx.getJSContext();
+
+  resolveMap = new IndexMap();
+  context.addEventListener(WorkletEvents.FunctionCallRet, onFunctionCallRet);
+
+  destroyTasks.push(() => {
+    context.removeEventListener(WorkletEvents.FunctionCallRet, onFunctionCallRet);
+    resolveMap = undefined;
+  });
+}
+
+/**
+ * @internal
+ */
+function onFunctionCall(resolve: (value: any) => void): number {
+  if (!resolveMap) {
+    initReturnValueListener();
+  }
+  return resolveMap!.add(resolve);
+}
+
+function onFunctionCallRet(event: RuntimeProxy.Event): void {
+  const data = JSON.parse(event.data as string) as RunWorkletCtxRetData;
+  const resolve = resolveMap!.get(data.resolveId)!;
+  resolveMap!.remove(data.resolveId);
+  resolve(data.returnValue);
+}
+
+export { onFunctionCall };

package/runtime/src/worklet/functionality.ts

@@ -4,9 +4,32 @@
 
 import { isSdkVersionGt } from '../utils.js';
 
+let mtsEnabled: boolean | undefined;
+let runOnBackgroundEnabled: boolean | undefined;
+
 /**
  * @internal
  */
-export function enableRunOnBackground(): boolean {
-  return isSdkVersionGt(2, 15);
+function isMtsEnabled(): boolean {
+  if (mtsEnabled === undefined) {
+    mtsEnabled = isSdkVersionGt(2, 13);
+  }
+  return mtsEnabled;
 }
+
+/**
+ * @internal
+ */
+function isRunOnBackgroundEnabled(): boolean {
+  if (runOnBackgroundEnabled === undefined) {
+    runOnBackgroundEnabled = isSdkVersionGt(2, 15);
+  }
+  return runOnBackgroundEnabled;
+}
+
+function clearConfigCacheForTesting(): void {
+  mtsEnabled = undefined;
+  runOnBackgroundEnabled = undefined;
+}
+
+export { isMtsEnabled, isRunOnBackgroundEnabled, clearConfigCacheForTesting };

package/runtime/src/worklet/runOnBackground.ts

@@ -0,0 +1,125 @@
+// 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.
+
+import type { JsFnHandle, RunWorkletCtxRetData, Worklet } from '@lynx-js/react/worklet-runtime/bindings';
+import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { destroyTasks } from './destroy.js';
+import { WorkletExecIdMap } from './execMap.js';
+import { isRunOnBackgroundEnabled } from './functionality.js';
+import { onFunctionCall } from './functionCall.js';
+
+/**
+ * @internal
+ */
+interface RunOnBackgroundData {
+  obj: JsFnHandle;
+  params: unknown[];
+  resolveId: number;
+}
+
+let execIdMap: WorkletExecIdMap | undefined;
+
+function init() {
+  'background only';
+  if (execIdMap) {
+    return;
+  }
+
+  execIdMap = new WorkletExecIdMap();
+  lynx.getCoreContext().addEventListener(WorkletEvents.runOnBackground, runJSFunction);
+  lynx.getCoreContext().addEventListener(WorkletEvents.releaseBackgroundWorkletCtx, releaseBackgroundWorkletCtx);
+
+  destroyTasks.push(() => {
+    lynx.getCoreContext().removeEventListener(WorkletEvents.runOnBackground, runJSFunction);
+    lynx.getCoreContext().removeEventListener(WorkletEvents.releaseBackgroundWorkletCtx, releaseBackgroundWorkletCtx);
+    execIdMap = undefined;
+  });
+}
+
+/**
+ * @internal
+ */
+function runJSFunction(event: RuntimeProxy.Event): void {
+  'background only';
+  const data = JSON.parse(event.data as string) as RunOnBackgroundData;
+  const obj = execIdMap!.findJsFnHandle(data.obj._execId!, data.obj._jsFnId);
+  const f = obj?._fn;
+  if (!f) {
+    throw new Error('runOnBackground: JS function not found: ' + JSON.stringify(data.obj));
+  }
+  const returnValue = f(...data.params);
+  lynx.getCoreContext!().dispatchEvent({
+    type: WorkletEvents.FunctionCallRet,
+    data: JSON.stringify({
+      resolveId: data.resolveId,
+      returnValue,
+    } as RunWorkletCtxRetData),
+  });
+}
+
+function releaseBackgroundWorkletCtx(event: RuntimeProxy.Event): void {
+  'background only';
+  for (const id of event.data) {
+    execIdMap!.remove(id as number);
+  }
+}
+
+/**
+ * @internal
+ */
+function registerWorkletCtx(ctx: Worklet): void {
+  'background only';
+  init();
+  execIdMap!.add(ctx);
+}
+
+/**
+ * `runOnBackground` allows triggering js functions on the background thread asynchronously.
+ * @param f - The js function to be called.
+ * @returns A function. Calling which with the arguments to be passed to the js function to trigger it on the background thread. This function returns a promise that resolves to the return value of the js function.
+ * @example
+ * ```ts
+ * import { runOnBackground } from '@lynx-js/react';
+ *
+ * async function someMainthreadFunction() {
+ *   'main thread';
+ *   const fn = runOnBackground(() => {
+ *     return 'hello';
+ *   });
+ *   const result = await fn();
+}
+ * ```
+ * @public
+ */
+function runOnBackground<R, Fn extends (...args: any[]) => R>(f: Fn): (...args: Parameters<Fn>) => Promise<R> {
+  if (!isRunOnBackgroundEnabled()) {
+    throw new Error('runOnBackground requires Lynx sdk version 2.16.');
+  }
+  if (__JS__) {
+    throw new Error('runOnBackground can only be used on the main thread.');
+  }
+  const obj = f as any as JsFnHandle;
+  if (obj._error) {
+    throw new Error(obj._error);
+  }
+  return async (...params: any[]): Promise<R> => {
+    return new Promise((resolve) => {
+      const resolveId = onFunctionCall(resolve);
+      lynx.getJSContext!().dispatchEvent({
+        type: WorkletEvents.runOnBackground,
+        data: JSON.stringify({
+          obj: {
+            _jsFnId: obj._jsFnId,
+            _execId: obj._execId!,
+          },
+          params,
+          resolveId,
+        } as RunOnBackgroundData),
+      });
+    });
+  };
+}
+
+export { registerWorkletCtx, runJSFunction, runOnBackground };

package/runtime/src/worklet/runOnMainThread.ts

@@ -0,0 +1,50 @@
+// 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.
+import type { RunWorkletCtxData, Worklet } from '@lynx-js/react/worklet-runtime/bindings';
+import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { onPostWorkletCtx } from './ctx.js';
+import { isMtsEnabled } from './functionality.js';
+import { onFunctionCall } from './functionCall.js';
+
+/**
+ * `runOnMainThread` allows triggering main thread functions on the main thread asynchronously.
+ * @param fn - The main thread functions to be called.
+ * @returns A function. Calling which with the arguments to be passed to the main thread function to trigger it on the main thread. This function returns a promise that resolves to the return value of the main thread function.
+ * @example
+ * ```ts
+ * import { runOnMainThread } from '@lynx-js/react';
+ *
+ * async function someFunction() {
+ *   const fn = runOnMainThread(() => {
+ *     'main thread';
+ *     return 'hello';
+ *   });
+ *   const result = await fn();
+ * }
+ * ```
+ * @public
+ */
+export function runOnMainThread<R, Fn extends (...args: any[]) => R>(fn: Fn): (...args: Parameters<Fn>) => Promise<R> {
+  if (__LEPUS__) {
+    throw new Error('runOnMainThread can only be used on the background thread.');
+  }
+  if (!isMtsEnabled()) {
+    throw new Error('runOnMainThread requires Lynx sdk version 2.14.');
+  }
+  return async (...params: any[]): Promise<R> => {
+    return new Promise((resolve) => {
+      onPostWorkletCtx(fn as any as Worklet);
+      const resolveId = onFunctionCall(resolve);
+      lynx.getCoreContext!().dispatchEvent({
+        type: WorkletEvents.runWorkletCtx,
+        data: JSON.stringify({
+          worklet: fn as any as Worklet,
+          params,
+          resolveId,
+        } as RunWorkletCtxData),
+      });
+    });
+  };
+}

package/runtime/src/worklet/transformToWorklet.ts

@@ -0,0 +1,26 @@
+// 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.
+import type { JsFnHandle } from '@lynx-js/react/worklet-runtime/bindings';
+
+let lastId = 0;
+
+/**
+ * transform args of `runOnBackground()`.
+ *
+ * @internal
+ */
+export function transformToWorklet(obj: (...args: any[]) => any): JsFnHandle {
+  const id = ++lastId;
+  if (typeof obj !== 'function') {
+    // We save the error message in the object, so that we can throw it later when the function is called on the main thread.
+    return {
+      _jsFnId: id,
+      _error: `Argument of runOnBackground should be a function, but got [${typeof obj}] instead`,
+    };
+  }
+  return {
+    _jsFnId: id,
+    _fn: obj,
+  };
+}

package/runtime/src/worklet/workletRef.ts

@@ -6,10 +6,11 @@ import type { RefObject } from 'react';
 import type { WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { lynxWorkletJsImpl } from './jsImpl.js';
 import { addWorkletRefInitValue } from './workletRefPool.js';
 import { useMemo } from '../hooks/react.js';
 
+let lastId = 0;
+
 abstract class WorkletRef<T> {
   /**
    * @internal
@@ -33,8 +34,7 @@ abstract class WorkletRef<T> {
    */
   protected constructor(initValue: T, type: string) {
     if (__JS__) {
-      const impl = lynxWorkletJsImpl();
-      this._id = impl ? ++impl._workletRefLastId : 0;
+      this._id = ++lastId;
       this._initValue = initValue;
       this._type = type;
       addWorkletRefInitValue(this._id, initValue);