@lynx-js/react 0.111.1 → 0.112.0

package/runtime/src/worklet/ctx.ts

@@ -1,22 +0,0 @@
-// 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 { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
-
-import { isMtsEnabled, isRunOnBackgroundEnabled } from './functionality.js';
-import { registerWorkletCtx } from './runOnBackground.js';
-
-/**
- * @internal
- */
-export function onPostWorkletCtx(afterValue: Worklet | null): Worklet | null {
-  if (!isMtsEnabled() && afterValue) {
-    lynx.reportError(new Error('Main thread script requires Lynx sdk version 2.14'));
-    return null;
-  }
-  if (!afterValue || !isRunOnBackgroundEnabled()) {
-    return afterValue;
-  }
-  registerWorkletCtx(afterValue);
-  return afterValue;
-}

package/runtime/src/worklet/destroy.ts

@@ -1,16 +0,0 @@
-// 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/execMap.ts

@@ -1,51 +0,0 @@
-// 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, Worklet } from '@lynx-js/react/worklet-runtime/bindings';
-
-import { IndexMap } from './indexMap.js';
-
-/**
- * `WorkletExecIdMap` ensures the worklet object is not released in js context when the main thread is still holding the
- * worklet object (or any of its jsFnHandles). The worklet object holds the js functions which might be called by `runOnBackground()`.
- * If the worklet object is incorrectly released earlier, the `runOnBackground()` would result in failure.
- *
- * Every time a worklet object is sent to the main thread, an `execId` is distributed and will be sent to element
- * context with the worklet object. This relationship is recorded in this class. When all the references to the
- * worklet object are released in the main thread, a message will be sent back to remove the record here.
- *
- * @internal
- */
-export class WorkletExecIdMap extends IndexMap<Worklet> {
-  public override add(worklet: Worklet): number {
-    const execId = super.add(worklet);
-    worklet._execId = execId;
-    return execId;
-  }
-
-  public findJsFnHandle(execId: number, fnId: number): JsFnHandle | undefined {
-    const worklet = this.get(execId);
-    if (!worklet) {
-      return undefined;
-    }
-
-    const f = (value: unknown): JsFnHandle | undefined => {
-      if (value === null || typeof value !== 'object') {
-        return undefined;
-      }
-      const obj = value as Record<string, unknown>;
-      if ('_jsFnId' in obj && obj['_jsFnId'] === fnId) {
-        return obj as JsFnHandle;
-      }
-      for (const i in obj) {
-        const result = f(obj[i]);
-        if (result) {
-          return result;
-        }
-      }
-      return undefined;
-    };
-
-    return f(worklet);
-  }
-}

package/runtime/src/worklet/functionCall.ts

@@ -1,42 +0,0 @@
-// 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

@@ -1,29 +0,0 @@
-// 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 { isSdkVersionGt } from '../utils.js';
-
-let mtsEnabled: boolean | undefined;
-let runOnBackgroundEnabled: boolean | undefined;
-
-/**
- * @internal
- */
-function isMtsEnabled(): boolean {
-  return mtsEnabled ??= isSdkVersionGt(2, 13);
-}
-
-/**
- * @internal
- */
-function isRunOnBackgroundEnabled(): boolean {
-  return runOnBackgroundEnabled ??= isSdkVersionGt(2, 15);
-}
-
-function clearConfigCacheForTesting(): void {
-  mtsEnabled = undefined;
-  runOnBackgroundEnabled = undefined;
-}
-
-export { isMtsEnabled, isRunOnBackgroundEnabled, clearConfigCacheForTesting };

package/runtime/src/worklet/hmr.ts

@@ -1,34 +0,0 @@
-// 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 { __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
-
-// const workletHashSet: Set<string> = /* @__PURE__ */ new Set();
-
-/* v8 ignore start */
-/**
- * @internal
- */
-// disable hmr until bugs are fixed
-// TODO: re-enable hmr or change a way to impl it; also need to fix the test case DEV_ONLY_RegisterWorklet
-function registerWorkletOnBackground(
-  _type: string,
-  _hash: string,
-  _fn: (...args: unknown[]) => unknown,
-) {
-  // if (workletHashSet.has(hash)) {
-  //   return;
-  // }
-  // workletHashSet.add(hash);
-  // if (__globalSnapshotPatch) {
-  //   __globalSnapshotPatch.push(
-  //     SnapshotOperation.DEV_ONLY_RegisterWorklet,
-  //     hash,
-  //     // We use `Function.prototype.toString` to serialize the function for Lepus.
-  //     fn.toString(),
-  //   );
-  // }
-}
-/* v8 ignore stop */
-
-export { registerWorkletOnBackground };

package/runtime/src/worklet/indexMap.ts

@@ -1,23 +0,0 @@
-// 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.
-class IndexMap<T> {
-  protected lastIndex = 0;
-  protected indexMap: Map<number, T> = new Map<number, T>();
-
-  public add(value: T): number {
-    const index = ++this.lastIndex;
-    this.indexMap.set(index, value);
-    return index;
-  }
-
-  public get(index: number): T | undefined {
-    return this.indexMap.get(index);
-  }
-
-  public remove(index: number): void {
-    this.indexMap.delete(index);
-  }
-}
-
-export { IndexMap };

package/runtime/src/worklet/runOnBackground.ts

@@ -1,147 +0,0 @@
-// 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 {
-  ClosureValueType,
-  JsFnHandle,
-  RunWorkletCtxRetData,
-  Worklet,
-} from '@lynx-js/react/worklet-runtime/bindings';
-import { WorkletEvents, delayRunOnBackground } 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: ClosureValueType[]): Promise<R> => {
-    return new Promise((resolve) => {
-      const resolveId = onFunctionCall(resolve);
-
-      if (obj._isFirstScreen) {
-        delayRunOnBackground(obj, (fnId: number, execId: number) => {
-          dispatchRunBackgroundFunctionEvent(fnId, params, execId, resolveId);
-        });
-        return;
-      }
-
-      dispatchRunBackgroundFunctionEvent(obj._jsFnId!, params, obj._execId!, resolveId);
-    });
-  };
-}
-
-function dispatchRunBackgroundFunctionEvent(
-  fnId: number,
-  params: ClosureValueType[],
-  execId: number,
-  resolveId: number,
-): void {
-  lynx.getJSContext!().dispatchEvent({
-    type: WorkletEvents.runOnBackground,
-    data: JSON.stringify({
-      obj: {
-        _jsFnId: fnId,
-        _execId: execId,
-      },
-      params,
-      resolveId,
-    } as RunOnBackgroundData),
-  });
-}
-
-export { registerWorkletCtx, runJSFunction, runOnBackground };

package/runtime/src/worklet/runOnMainThread.ts

@@ -1,50 +0,0 @@
-// 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

@@ -1,26 +0,0 @@
-// 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

@@ -1,231 +0,0 @@
-// 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 { RefObject } from 'react';
-
-import type { WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
-import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
-
-import { addWorkletRefInitValue } from './workletRefPool.js';
-import { useMemo } from '../hooks/react.js';
-
-// Split into two variables for testing purposes
-let lastIdBG = 0;
-let lastIdMT = 0;
-
-export function clearWorkletRefLastIdForTesting(): void {
-  lastIdBG = lastIdMT = 0;
-}
-
-abstract class WorkletRef<T> {
-  /**
-   * @internal
-   */
-  protected _wvid: number;
-  /**
-   * @internal
-   */
-  protected _initValue: T | undefined;
-  /**
-   * @internal
-   */
-  protected _type: string;
-  /**
-   * @internal
-   */
-  protected _lifecycleObserver: unknown;
-
-  /**
-   * @internal
-   */
-  protected constructor(initValue: T, type: string) {
-    this._initValue = initValue;
-    this._type = type;
-    if (__JS__) {
-      this._wvid = ++lastIdBG;
-      addWorkletRefInitValue(this._wvid, initValue);
-    } else {
-      this._wvid = --lastIdMT;
-    }
-  }
-
-  get current(): T {
-    if (__JS__ && __DEV__) {
-      throw new Error('MainThreadRef: value of a MainThreadRef cannot be accessed in the background thread.');
-    }
-    if (__LEPUS__ && __DEV__) {
-      /* v8 ignore next 3 */
-      throw new Error('MainThreadRef: value of a MainThreadRef cannot be accessed outside of main thread script.');
-    }
-    return undefined as T;
-  }
-
-  set current(_: T) {
-    if (__JS__ && __DEV__) {
-      throw new Error('MainThreadRef: value of a MainThreadRef cannot be accessed in the background thread.');
-    }
-    if (__LEPUS__ && __DEV__) {
-      throw new Error('MainThreadRef: value of a MainThreadRef cannot be accessed outside of main thread script.');
-    }
-  }
-
-  /**
-   * @internal
-   */
-  toJSON(): { _wvid: WorkletRefImpl<T>['_wvid'] } {
-    return {
-      _wvid: this._wvid,
-    };
-  }
-}
-
-/**
- * A `MainThreadRef` is a ref that can only be accessed on the main thread. It is used to preserve
- * states between main thread function calls.
- * The data saved in `current` property of the `MainThreadRef` can be read and written in
- * multiple main thread functions.
- * @public
- */
-export class MainThreadRef<T> extends WorkletRef<T> {
-  constructor(initValue: T) {
-    super(initValue, 'main-thread');
-    if (__JS__) {
-      const id = this._wvid;
-      this._lifecycleObserver = lynx.getNativeApp().createJSObjectDestructionObserver?.(() => {
-        lynx.getCoreContext?.().dispatchEvent({
-          type: WorkletEvents.releaseWorkletRef,
-          data: {
-            id,
-          },
-        });
-      });
-    }
-  }
-}
-
-/**
- * Create A `MainThreadRef`.
- *
- * A `MainThreadRef` is a ref that can only be accessed on the main thread. It is used to preserve
- * states between main thread function calls.
- * The data saved in `current` property of the `MainThreadRef` can be read and written in
- * multiple main thread functions.
- *
- * It is a hook and it should only be called at the top level of your component.
- *
- * @param initValue - The init value of the `MainThreadRef`.
- *
- * @example
- *
- * ```ts
- * import { useMainThreadRef } from '@lynx-js/react'
- * import type { MainThread } from '@lynx-js/types'
- *
- * export function App() {
- *   const ref = useMainThreadRef<MainThread.Element>(null)
- *
- *   const handleTap = () => {
- *     'main thread'
- *     ref.current?.setStyleProperty('background-color', 'blue')
- *   }
- *
- *   return (
- *     <view
- *       main-thread:ref={ref}
- *       main-thread:bindtap={handleTap}
- *       style={{ width: '300px', height: '300px' }}
- *     />
- *   )
- * }
- * ```
- *
- * @public
- */
-export function useMainThreadRef<T>(initValue: T): MainThreadRef<T>;
-
-// convenience overload for refs given as a ref prop as they typically start with a null value
-/**
- * Create A `MainThreadRef`.
- *
- * A `MainThreadRef` is a ref that can only be accessed on the main thread. It is used to preserve
- * states between main thread function calls.
- * The data saved in `current` property of the `MainThreadRef` can be read and written in
- * multiple main thread functions.
- *
- * It is a hook and it should only be called at the top level of your component.
- *
- * @param initValue - The init value of the `MainThreadRef`.
- *
- * @example
- *
- * ```ts
- * import { useMainThreadRef } from '@lynx-js/react'
- * import type { MainThread } from '@lynx-js/types'
- *
- * export function App() {
- *   const ref = useMainThreadRef<MainThread.Element>(null)
- *
- *   const handleTap = () => {
- *     'main thread'
- *     ref.current?.setStyleProperty('background-color', 'blue')
- *   }
- *
- *   return (
- *     <view
- *       main-thread:ref={ref}
- *       main-thread:bindtap={handleTap}
- *       style={{ width: '300px', height: '300px' }}
- *     />
- *   )
- * }
- * ```
- *
- * @public
- */
-export function useMainThreadRef<T>(initValue: T | null): RefObject<T>;
-
-// convenience overload for potentially undefined initialValue / call with 0 arguments
-// has a default to stop it from defaulting to {} instead
-/**
- * Create A `MainThreadRef`.
- *
- * A `MainThreadRef` is a ref that can only be accessed on the main thread. It is used to preserve
- * states between main thread function calls.
- * The data saved in `current` property of the `MainThreadRef` can be read and written in
- * multiple main thread functions.
- *
- * It is a hook and it should only be called at the top level of your component.
- *
- * @example
- *
- * ```ts
- * import { useMainThreadRef } from '@lynx-js/react'
- * import type { MainThread } from '@lynx-js/types'
- *
- * export function App() {
- *   const ref = useMainThreadRef<MainThread.Element>(null)
- *
- *   const handleTap = () => {
- *     'main thread'
- *     ref.current?.setStyleProperty('background-color', 'blue')
- *   }
- *
- *   return (
- *     <view
- *       main-thread:ref={ref}
- *       main-thread:bindtap={handleTap}
- *       style={{ width: '300px', height: '300px' }}
- *     />
- *   )
- * }
- * ```
- *
- * @public
- */
-export function useMainThreadRef<T = undefined>(): MainThreadRef<T | undefined>;
-
-export function useMainThreadRef<T>(initValue?: T): MainThreadRef<T | undefined> {
-  return useMemo(() => {
-    return new MainThreadRef(initValue);
-  }, []);
-}