@lynx-js/react 0.111.1 → 0.111.2

package/runtime/src/lifecycle/patch/commit.ts

@@ -1,214 +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.
-
-/**
- * Implements the commit phase of the rendering lifecycle.
- * This module patches Preact's commit phase to integrate with the snapshot system,
- * handling the collection and transmission of patches between threads.
- *
- * The commit phase is responsible for:
- * - Collecting patches from the snapshot system
- * - Managing commit tasks and their execution
- * - Coordinating with the native layer for updates
- * - Handling performance timing and pipeline options
- */
-
-/**
- * This module patches Preact's commit phase by hacking into the internal of
- * its [options](https://preactjs.com/guide/v10/options/) API
- */
-
-import type { VNode } from 'preact';
-import { options } from 'preact';
-
-import { LifecycleConstant } from '../../lifecycleConstant.js';
-import { globalPipelineOptions, markTiming, markTimingLegacy, setPipeline } from '../../lynx/performance.js';
-import { COMMIT } from '../../renderToOpcodes/constants.js';
-import { applyQueuedRefs } from '../../snapshot/ref.js';
-import { backgroundSnapshotInstanceManager } from '../../snapshot.js';
-import { isEmptyObject } from '../../utils.js';
-import { takeWorkletRefInitValuePatch } from '../../worklet/workletRefPool.js';
-import { getReloadVersion } from '../pass.js';
-import type { SnapshotPatch } from './snapshotPatch.js';
-import { takeGlobalSnapshotPatch } from './snapshotPatch.js';
-
-let globalFlushOptions: FlushOptions = {};
-
-const globalCommitTaskMap: Map<number, () => void> = /*@__PURE__*/ new Map<number, () => void>();
-let nextCommitTaskId = 1;
-
-let globalBackgroundSnapshotInstancesToRemove: number[] = [];
-
-/**
- * A single patch operation.
- */
-interface Patch {
-  // TODO: ref: do we need `id`?
-  id: number;
-  snapshotPatch?: SnapshotPatch;
-  workletRefInitValuePatch?: [id: number, value: unknown][];
-}
-
-/**
- * List of patches to be applied in a single update cycle with flush options.
- */
-interface PatchList {
-  patchList: Patch[];
-  flushOptions?: FlushOptions;
-}
-
-/**
- * Configuration options for patch operations
- */
-interface PatchOptions {
-  pipelineOptions?: PipelineOptions;
-  reloadVersion: number;
-  isHydration?: boolean;
-}
-
-/**
- * Replaces Preact's default commit hook with our custom implementation
- */
-function replaceCommitHook(): void {
-  // This is actually not used since Preact use `hooks._commit` for callbacks of `useLayoutEffect`.
-  const originalPreactCommit = options[COMMIT];
-  const commit = async (vnode: VNode, commitQueue: any[]) => {
-    // Skip commit phase for MT runtime
-    if (__MAIN_THREAD__) {
-      // for testing only
-      commitQueue.length = 0;
-      return;
-    }
-
-    // Mark the end of virtual DOM diffing phase for performance tracking
-    markTimingLegacy('updateDiffVdomEnd');
-    markTiming('diffVdomEnd');
-
-    const backgroundSnapshotInstancesToRemove = globalBackgroundSnapshotInstancesToRemove;
-    globalBackgroundSnapshotInstancesToRemove = [];
-
-    const commitTaskId = genCommitTaskId();
-
-    // Register the commit task
-    globalCommitTaskMap.set(commitTaskId, () => {
-      if (backgroundSnapshotInstancesToRemove.length) {
-        setTimeout(() => {
-          backgroundSnapshotInstancesToRemove.forEach(id => {
-            backgroundSnapshotInstanceManager.values.delete(id);
-          });
-        }, 10000);
-      }
-    });
-
-    // Collect patches for this update
-    const snapshotPatch = takeGlobalSnapshotPatch();
-    const flushOptions = globalFlushOptions;
-    const workletRefInitValuePatch = takeWorkletRefInitValuePatch();
-    globalFlushOptions = {};
-    if (!snapshotPatch && workletRefInitValuePatch.length === 0) {
-      // before hydration, skip patch
-      applyQueuedRefs();
-      originalPreactCommit?.(vnode, commitQueue);
-      return;
-    }
-
-    const patch: Patch = {
-      id: commitTaskId,
-    };
-    // TODO: check all fields in `flushOptions` from runtime3
-    if (snapshotPatch?.length) {
-      patch.snapshotPatch = snapshotPatch;
-    }
-    if (workletRefInitValuePatch.length) {
-      patch.workletRefInitValuePatch = workletRefInitValuePatch;
-    }
-    const patchList: PatchList = {
-      patchList: [patch],
-    };
-    if (!isEmptyObject(flushOptions)) {
-      patchList.flushOptions = flushOptions;
-    }
-    const obj = commitPatchUpdate(patchList, {});
-
-    // Send the update to the native layer
-    lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
-      const commitTask = globalCommitTaskMap.get(commitTaskId);
-      if (commitTask) {
-        commitTask();
-        globalCommitTaskMap.delete(commitTaskId);
-      }
-    });
-
-    applyQueuedRefs();
-    originalPreactCommit?.(vnode, commitQueue);
-  };
-  options[COMMIT] = commit as ((...args: Parameters<typeof commit>) => void);
-}
-
-/**
- * Prepares the patch update for transmission to the native layer
- */
-function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions, 'reloadVersion'>): {
-  data: string;
-  patchOptions: PatchOptions;
-} {
-  // console.debug('********** JS update:');
-  // printSnapshotInstance(
-  //   (backgroundSnapshotInstanceManager.values.get(1) || backgroundSnapshotInstanceManager.values.get(-1))!,
-  // );
-  // console.debug('commitPatchUpdate: ', JSON.stringify(patchList));
-  if (__PROFILE__) {
-    console.profile('commitChanges');
-  }
-  markTiming('packChangesStart');
-  const obj: {
-    data: string;
-    patchOptions: PatchOptions;
-  } = {
-    data: JSON.stringify(patchList),
-    patchOptions: {
-      ...patchOptions,
-      reloadVersion: getReloadVersion(),
-    },
-  };
-  markTiming('packChangesEnd');
-  if (globalPipelineOptions) {
-    obj.patchOptions.pipelineOptions = globalPipelineOptions;
-    setPipeline(undefined);
-  }
-  if (__PROFILE__) {
-    console.profileEnd();
-  }
-
-  return obj;
-}
-
-/**
- * Generates a unique ID for commit tasks
- */
-function genCommitTaskId(): number {
-  return nextCommitTaskId++;
-}
-
-/**
- * Resets the commit task ID counter
- */
-function clearCommitTaskId(): void {
-  nextCommitTaskId = 1;
-}
-
-/**
- * @internal
- */
-export {
-  clearCommitTaskId,
-  commitPatchUpdate,
-  genCommitTaskId,
-  globalBackgroundSnapshotInstancesToRemove,
-  globalCommitTaskMap,
-  globalFlushOptions,
-  replaceCommitHook,
-  type PatchList,
-  type PatchOptions,
-};

package/runtime/src/lifecycle/patch/error.ts

@@ -1,61 +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 { backgroundSnapshotInstanceManager, snapshotManager } from '../../snapshot.js';
-
-export const ctxNotFoundType = 'Lynx.Error.CtxNotFound';
-
-const errorMsg = 'snapshotPatchApply failed: ctx not found';
-
-let ctxNotFoundEventListener: ((e: RuntimeProxy.Event) => void) | null = null;
-
-export interface CtxNotFoundData {
-  id: number;
-}
-
-export function sendCtxNotFoundEventToBackground(id: number): void {
-  /* v8 ignore next 3 */
-  if (!lynx.getJSContext) {
-    throw new Error(errorMsg);
-  }
-  lynx.getJSContext().dispatchEvent({
-    type: ctxNotFoundType,
-    data: {
-      id,
-    } as CtxNotFoundData,
-  });
-}
-
-export function reportCtxNotFound(data: CtxNotFoundData): void {
-  const id = data.id;
-  const instance = backgroundSnapshotInstanceManager.values.get(id);
-
-  let snapshotType = 'null';
-
-  if (instance && instance.__snapshot_def) {
-    for (const [snapshotId, snapshot] of snapshotManager.values.entries()) {
-      if (snapshot === instance.__snapshot_def) {
-        snapshotType = snapshotId;
-        break;
-      }
-    }
-  }
-
-  lynx.reportError(new Error(`${errorMsg}, snapshot type: '${snapshotType}'`));
-}
-
-export function addCtxNotFoundEventListener(): void {
-  ctxNotFoundEventListener = (e) => {
-    reportCtxNotFound(e.data as CtxNotFoundData);
-  };
-  lynx.getCoreContext?.().addEventListener(ctxNotFoundType, ctxNotFoundEventListener);
-}
-
-export function removeCtxNotFoundEventListener(): void {
-  const coreContext = lynx.getCoreContext?.();
-  if (coreContext && ctxNotFoundEventListener) {
-    coreContext.removeEventListener(ctxNotFoundType, ctxNotFoundEventListener);
-    ctxNotFoundEventListener = null;
-  }
-}

package/runtime/src/lifecycle/patch/isMainThreadHydrationFinished.ts

@@ -1,13 +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 { onHydrationFinished } from '@lynx-js/react/worklet-runtime/bindings';
-
-export let isMainThreadHydrationFinished = false;
-
-export function setMainThreadHydrationFinished(isFinished: boolean): void {
-  if (isFinished && !isMainThreadHydrationFinished) {
-    onHydrationFinished();
-  }
-  isMainThreadHydrationFinished = isFinished;
-}

package/runtime/src/lifecycle/patch/snapshotPatch.ts

@@ -1,65 +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.
-
-/**
- * Defines the core patch operations for the snapshot system.
- * The patch operations are designed to be serializable and minimal, allowing
- * efficient transmission between threads and application to element tree.
- */
-
-export const SnapshotOperation = {
-  CreateElement: 0,
-  InsertBefore: 1,
-  RemoveChild: 2,
-  SetAttribute: 3,
-  SetAttributes: 4,
-
-  DEV_ONLY_AddSnapshot: 100,
-  DEV_ONLY_RegisterWorklet: 101,
-} as const;
-
-// Operation format definitions:
-//
-// [opcode: SnapshotOperation.CreateElement, type: string, id: number]
-// [opcode: SnapshotOperation.InsertBefore, parentId: number, id: number, beforeId: number | undefined]
-// [opcode: SnapshotOperation.RemoveChild, parentId: number, childId: number]
-// [opcode: SnapshotOperation.SetAttribute, id: number, dynamicPartIndex: number, value: any]
-// [opcode: SnapshotOperation.SetAttributes, id: number, value: any]
-// [
-//   opcode: SnapshotOperation.DEV_ONLY_AddSnapshot,
-//   uniqID: string,
-//   create: string,
-//   update: string[],
-//   /** The same as Snapshot['slot'] */
-//   slot: [DynamicPartType, number][],
-//   cssId: number | undefined,
-//   entryName: string | undefined
-// ]
-// [
-//   opcode: SnapshotOperation.DEV_ONLY_RegisterWorklet,
-//   hash: string,
-//   fn: string,
-// ]
-
-export type SnapshotPatch = unknown[];
-
-export let __globalSnapshotPatch: SnapshotPatch | undefined;
-
-export function takeGlobalSnapshotPatch(): SnapshotPatch | undefined {
-  if (__globalSnapshotPatch) {
-    const list = __globalSnapshotPatch;
-    __globalSnapshotPatch = [];
-    return list;
-  } else {
-    return undefined;
-  }
-}
-
-export function initGlobalSnapshotPatch(): void {
-  __globalSnapshotPatch = [];
-}
-
-export function deinitGlobalSnapshotPatch(): void {
-  __globalSnapshotPatch = undefined;
-}

package/runtime/src/lifecycle/patch/snapshotPatchApply.ts

@@ -1,145 +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.
-
-/**
- * Implements the patch application logic for the snapshot system.
- * This module is responsible for interpreting and executing patch operations
- * that were generated in the background thread, applying them to the DOM
- * in the main thread.
- *
- * The module handles various operations like element creation, insertion,
- * removal, and attribute updates, ensuring they are applied in the correct
- * order and with proper error handling.
- */
-
-import { sendCtxNotFoundEventToBackground } from './error.js';
-import type { SnapshotPatch } from './snapshotPatch.js';
-import { SnapshotOperation } from './snapshotPatch.js';
-import type { DynamicPartType } from '../../snapshot/dynamicPartType.js';
-import {
-  SnapshotInstance,
-  createSnapshot,
-  entryUniqID,
-  snapshotInstanceManager,
-  snapshotManager,
-} from '../../snapshot.js';
-
-/**
- * Applies a patch of snapshot operations to the main thread.
- * This is the counterpart to the patch generation in the background thread.
- * Each operation in the patch is processed sequentially to update the DOM.
- */
-export function snapshotPatchApply(snapshotPatch: SnapshotPatch): void {
-  const length = snapshotPatch.length;
-  for (let i = 0; i < length; ++i) {
-    switch (snapshotPatch[i]) {
-      case SnapshotOperation.CreateElement: {
-        const type = snapshotPatch[++i] as string;
-        const id = snapshotPatch[++i] as number;
-        new SnapshotInstance(type, id);
-        break;
-      }
-      case SnapshotOperation.InsertBefore: {
-        const parentId = snapshotPatch[++i] as number;
-        const childId = snapshotPatch[++i] as number;
-        const beforeId = snapshotPatch[++i] as number | undefined;
-        const parent = snapshotInstanceManager.values.get(parentId);
-        const child = snapshotInstanceManager.values.get(childId);
-        const existingNode = snapshotInstanceManager.values.get(beforeId!);
-        if (!parent || !child) {
-          sendCtxNotFoundEventToBackground(parent ? childId : parentId);
-        } else {
-          parent.insertBefore(child, existingNode);
-        }
-        break;
-      }
-      case SnapshotOperation.RemoveChild: {
-        const parentId = snapshotPatch[++i] as number;
-        const childId = snapshotPatch[++i] as number;
-        const parent = snapshotInstanceManager.values.get(parentId);
-        const child = snapshotInstanceManager.values.get(childId);
-        if (!parent || !child) {
-          sendCtxNotFoundEventToBackground(parent ? childId : parentId);
-        } else {
-          parent.removeChild(child);
-        }
-        break;
-      }
-      case SnapshotOperation.SetAttribute: {
-        const id = snapshotPatch[++i] as number;
-        const dynamicPartIndex = snapshotPatch[++i] as number;
-        const value = snapshotPatch[++i];
-        const si = snapshotInstanceManager.values.get(id);
-        if (si) {
-          si.setAttribute(dynamicPartIndex, value);
-        } else {
-          sendCtxNotFoundEventToBackground(id);
-        }
-        break;
-      }
-      case SnapshotOperation.SetAttributes: {
-        const id = snapshotPatch[++i] as number;
-        const values = snapshotPatch[++i];
-        const si = snapshotInstanceManager.values.get(id);
-        if (si) {
-          si.setAttribute('values', values);
-        } else {
-          sendCtxNotFoundEventToBackground(id);
-        }
-        break;
-      }
-      case SnapshotOperation.DEV_ONLY_AddSnapshot: {
-        if (__DEV__) {
-          const uniqID = snapshotPatch[++i] as string;
-          const create = snapshotPatch[++i] as string;
-          const update = snapshotPatch[++i] as string[];
-          const slot = snapshotPatch[++i] as [DynamicPartType, number][];
-          const cssId = (snapshotPatch[++i] ?? 0) as number;
-          const entryName = snapshotPatch[++i] as string | undefined;
-
-          if (!snapshotManager.values.has(entryUniqID(uniqID, entryName))) {
-            // HMR-related
-            // Update the evaluated snapshots from JS.
-            createSnapshot(
-              uniqID,
-              evaluate<(ctx: SnapshotInstance) => FiberElement[]>(create),
-              // eslint-disable-next-line unicorn/no-array-callback-reference
-              update.map<(ctx: SnapshotInstance, index: number, oldValue: any) => void>(evaluate),
-              slot,
-              cssId,
-              entryName,
-              null,
-            );
-          }
-        }
-        break;
-      }
-        // case SnapshotOperation.DEV_ONLY_RegisterWorklet: {
-        //   // HMR-related
-        //   if (__DEV__) {
-        //     const hash: string = snapshotPatch[++i];
-        //     const fnStr: string = snapshotPatch[++i];
-        //     const fn = evaluate<(ctx: SnapshotInstance) => FiberElement[]>(fnStr);
-        //     registerWorklet('main-thread', hash, fn);
-        //   }
-        //   break;
-        // }
-    }
-  }
-}
-
-/* v8 ignore start */
-/**
- * Evaluates a string as code with ReactLynx runtime injected.
- * Used for HMR (Hot Module Replacement) to update snapshot definitions.
- */
-function evaluate<T>(code: string): T {
-  if (__DEV__) {
-    // We are using `eval` here to make the updated snapshot to access variables like `__webpack_require__`.
-    // See: https://github.com/lynx-family/lynx-stack/issues/983.
-    return eval(`(() => ${code})()`) as T;
-  }
-  throw new Error('unreachable: evaluate is not supported in production');
-}
-/* v8 ignore stop */

package/runtime/src/lifecycle/patch/updateMainThread.ts

@@ -1,64 +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 { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
-
-import type { PatchList, PatchOptions } from './commit.js';
-import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
-import { snapshotPatchApply } from './snapshotPatchApply.js';
-import { LifecycleConstant } from '../../lifecycleConstant.js';
-import { markTiming, setPipeline } from '../../lynx/performance.js';
-import { __pendingListUpdates } from '../../pendingListUpdates.js';
-import { applyRefQueue } from '../../snapshot/workletRef.js';
-import { __page } from '../../snapshot.js';
-import { getReloadVersion } from '../pass.js';
-
-function updateMainThread(
-  { data, patchOptions }: {
-    data: string;
-    patchOptions: PatchOptions;
-  },
-): void {
-  if ((patchOptions.reloadVersion) < getReloadVersion()) {
-    return;
-  }
-
-  setPipeline(patchOptions.pipelineOptions);
-  markTiming('mtsRenderStart');
-  markTiming('parseChangesStart');
-  const { patchList, flushOptions = {} } = JSON.parse(data) as PatchList;
-
-  markTiming('parseChangesEnd');
-  markTiming('patchChangesStart');
-
-  for (const { snapshotPatch, workletRefInitValuePatch } of patchList) {
-    updateWorkletRefInitValueChanges(workletRefInitValuePatch);
-    __pendingListUpdates.clear();
-    if (snapshotPatch) {
-      snapshotPatchApply(snapshotPatch);
-    }
-    __pendingListUpdates.flush();
-    // console.debug('********** Lepus updatePatch:');
-    // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
-  }
-  markTiming('patchChangesEnd');
-  markTiming('mtsRenderEnd');
-  if (patchOptions.isHydration) {
-    setMainThreadHydrationFinished(true);
-  }
-  applyRefQueue();
-  if (patchOptions.pipelineOptions) {
-    flushOptions.pipelineOptions = patchOptions.pipelineOptions;
-  }
-  __FlushElementTree(__page, flushOptions);
-}
-
-function injectUpdateMainThread(): void {
-  Object.assign(globalThis, { [LifecycleConstant.patchUpdate]: updateMainThread });
-}
-
-/**
- * @internal
- */
-export { injectUpdateMainThread };

package/runtime/src/lifecycle/ref/delay.ts

@@ -1,99 +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 { NodesRef, SelectorQuery } from '@lynx-js/types';
-
-import { hydrationMap } from '../../snapshotInstanceHydrationMap.js';
-
-type RefTask = (nodesRef: NodesRef) => SelectorQuery;
-
-/**
- * A flag to indicate whether UI operations should be delayed.
- * When set to true, UI operations will be queued in the `delayedUiOps` array
- * and executed later when `runDelayedUiOps` is called.
- * This is used before hydration to ensure UI operations are batched
- * and executed at the appropriate time.
- */
-const shouldDelayUiOps = { value: true };
-
-/**
- * An array of functions that will be executed later when `runDelayedUiOps` is called.
- * These functions contain UI operations that need to be delayed.
- */
-const delayedUiOps: (() => void)[] = [];
-
-/**
- * Runs a task either immediately or delays it based on the `shouldDelayUiOps` flag.
- * @param task - The function to execute.
- */
-function runOrDelay(task: () => void): void {
-  if (shouldDelayUiOps.value) {
-    delayedUiOps.push(task);
-  } else {
-    task();
-  }
-}
-
-/**
- * Executes all delayed UI operations.
- */
-function runDelayedUiOps(): void {
-  for (const task of delayedUiOps) {
-    task();
-  }
-  shouldDelayUiOps.value = false;
-  delayedUiOps.length = 0;
-}
-
-/**
- * A proxy class designed for managing and executing reference-based tasks.
- * It delays the execution of tasks until hydration is complete.
- */
-class RefProxy {
-  private readonly refAttr: [snapshotInstanceId: number, expIndex: number];
-  private task: RefTask | undefined;
-
-  constructor(refAttr: [snapshotInstanceId: number, expIndex: number]) {
-    this.refAttr = refAttr;
-  }
-
-  private setTask<K extends keyof NodesRef>(
-    method: K,
-    args: Parameters<NodesRef[K]>,
-  ): this {
-    this.task = (nodesRef) => {
-      return (nodesRef[method] as unknown as (...args: any[]) => SelectorQuery)(...args);
-    };
-    return this;
-  }
-
-  invoke(...args: Parameters<NodesRef['invoke']>): RefProxy {
-    return new RefProxy(this.refAttr).setTask('invoke', args);
-  }
-
-  path(...args: Parameters<NodesRef['path']>): RefProxy {
-    return new RefProxy(this.refAttr).setTask('path', args);
-  }
-
-  fields(...args: Parameters<NodesRef['fields']>): RefProxy {
-    return new RefProxy(this.refAttr).setTask('fields', args);
-  }
-
-  setNativeProps(...args: Parameters<NodesRef['setNativeProps']>): RefProxy {
-    return new RefProxy(this.refAttr).setTask('setNativeProps', args);
-  }
-
-  exec(): void {
-    runOrDelay(() => {
-      const realRefId = hydrationMap.get(this.refAttr[0]) ?? this.refAttr[0];
-      const refSelector = `[react-ref-${realRefId}-${this.refAttr[1]}]`;
-      this.task!(lynx.createSelectorQuery().select(refSelector)).exec();
-    });
-  }
-}
-
-/**
- * @internal
- */
-export { RefProxy, runDelayedUiOps, shouldDelayUiOps };