@lynx-js/react 0.107.1 → 0.108.1

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

@@ -1,12 +1,28 @@
 // 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 type { Component } from 'preact/compat';
 
-import type { SnapshotPatch } from './snapshotPatch.js';
-import { takeGlobalSnapshotPatch } from './snapshotPatch.js';
 import { LifecycleConstant } from '../../lifecycleConstant.js';
 import {
   PerformanceTimingKeys,
@@ -16,12 +32,14 @@ import {
   setPipeline,
 } from '../../lynx/performance.js';
 import { CATCH_ERROR, COMMIT, RENDER_CALLBACKS, VNODE } from '../../renderToOpcodes/constants.js';
-import { updateBackgroundRefs } from '../../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../../snapshot.js';
+import { updateBackgroundRefs } from '../../snapshot/ref.js';
 import { isEmptyObject } from '../../utils.js';
 import { takeWorkletRefInitValuePatch } from '../../worklet/workletRefPool.js';
 import { runDelayedUnmounts, takeDelayedUnmounts } from '../delayUnmount.js';
 import { getReloadVersion } from '../pass.js';
+import type { SnapshotPatch } from './snapshotPatch.js';
+import { takeGlobalSnapshotPatch } from './snapshotPatch.js';
 
 let globalFlushOptions: FlushOptions = {};
 
@@ -30,58 +48,50 @@ let nextCommitTaskId = 1;
 
 let globalBackgroundSnapshotInstancesToRemove: number[] = [];
 
-let patchesToCommit: Patch[] = [];
-function clearPatchesToCommit(): void {
-  patchesToCommit = [];
-}
-
+/**
+ * A single patch operation.
+ */
 interface Patch {
   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 {
-  // use our own `options.debounceRendering` to insert a timing flag before render
-  type DebounceRendering = (f: () => void) => void;
-  const injectDebounceRendering = (debounceRendering: DebounceRendering): DebounceRendering => {
-    return (f: () => void) => {
-      debounceRendering(() => {
-        f();
-        void commitToMainThread();
-      });
-    };
-  };
-  const defaultDebounceRendering = options.debounceRendering?.bind(options)
-    ?? (Promise.prototype.then.bind(Promise.resolve()) as DebounceRendering);
-  let _debounceRendering = injectDebounceRendering(defaultDebounceRendering);
-  Object.defineProperty(options, 'debounceRendering', {
-    get() {
-      return _debounceRendering;
-    },
-    set(debounceRendering: DebounceRendering) {
-      _debounceRendering = injectDebounceRendering(debounceRendering);
-    },
-  });
-
-  const oldCommit = options[COMMIT];
+  const originalPreactCommit = options[COMMIT];
   const commit = async (vnode: VNode, commitQueue: any[]) => {
-    if (__LEPUS__) {
+    // 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(PerformanceTimingKeys.updateDiffVdomEnd);
+    markTiming(PerformanceTimingKeys.diffVdomEnd);
+
+    // The callback functions to be called after components are rendered.
     const renderCallbacks = commitQueue.map((component: Component<any>) => {
       const ret = {
         component,
@@ -92,16 +102,19 @@ function replaceCommitHook(): void {
       return ret;
     });
     commitQueue.length = 0;
+
     const delayedUnmounts = takeDelayedUnmounts();
 
     const backgroundSnapshotInstancesToRemove = globalBackgroundSnapshotInstancesToRemove;
     globalBackgroundSnapshotInstancesToRemove = [];
 
     const commitTaskId = genCommitTaskId();
+
+    // Register the commit task
     globalCommitTaskMap.set(commitTaskId, () => {
       updateBackgroundRefs(commitTaskId);
       runDelayedUnmounts(delayedUnmounts);
-      oldCommit?.(vnode, renderCallbacks);
+      originalPreactCommit?.(vnode, renderCallbacks);
       renderCallbacks.some(wrapper => {
         try {
           wrapper[RENDER_CALLBACKS].some((cb: (this: Component) => void) => {
@@ -120,8 +133,11 @@ function replaceCommitHook(): void {
       }
     });
 
+    // Collect patches for this update
     const snapshotPatch = takeGlobalSnapshotPatch();
+    const flushOptions = globalFlushOptions;
     const workletRefInitValuePatch = takeWorkletRefInitValuePatch();
+    globalFlushOptions = {};
     if (!snapshotPatch && workletRefInitValuePatch.length === 0) {
       // before hydration, skip patch
       return;
@@ -137,46 +153,29 @@ function replaceCommitHook(): void {
     if (workletRefInitValuePatch.length) {
       patch.workletRefInitValuePatch = workletRefInitValuePatch;
     }
+    const patchList: PatchList = {
+      patchList: [patch],
+    };
+    if (!isEmptyObject(flushOptions)) {
+      patchList.flushOptions = flushOptions;
+    }
+    const obj = commitPatchUpdate(patchList, {});
 
-    patchesToCommit.push(patch);
-  };
-  options[COMMIT] = commit as ((...args: Parameters<typeof commit>) => void);
-}
-
-async function commitToMainThread(): Promise<void> {
-  if (patchesToCommit.length === 0) {
-    return;
-  }
-
-  markTimingLegacy(PerformanceTimingKeys.updateDiffVdomEnd);
-  markTiming(PerformanceTimingKeys.diffVdomEnd);
-
-  const flushOptions = globalFlushOptions;
-  globalFlushOptions = {};
-
-  const patchList: PatchList = {
-    patchList: patchesToCommit,
-  };
-  patchesToCommit = [];
-
-  if (!isEmptyObject(flushOptions)) {
-    patchList.flushOptions = flushOptions;
-  }
-
-  const obj = commitPatchUpdate(patchList, {});
-
-  lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
-    for (let i = 0; i < patchList.patchList.length; i++) {
-      const patch = patchList.patchList[i]!;
-      const commitTask = globalCommitTaskMap.get(patch.id);
+    // Send the update to the native layer
+    lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
+      const commitTask = globalCommitTaskMap.get(commitTaskId);
       if (commitTask) {
         commitTask();
-        globalCommitTaskMap.delete(patch.id);
+        globalCommitTaskMap.delete(commitTaskId);
       }
-    }
-  });
+    });
+  };
+  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;
@@ -212,9 +211,16 @@ function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions
   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;
 }
@@ -231,18 +237,15 @@ function replaceRequestAnimationFrame(): void {
  * @internal
  */
 export {
+  clearCommitTaskId,
   commitPatchUpdate,
-  commitToMainThread,
   genCommitTaskId,
-  clearCommitTaskId,
   globalBackgroundSnapshotInstancesToRemove,
   globalCommitTaskMap,
   globalFlushOptions,
   nextCommitTaskId,
-  patchesToCommit,
-  clearPatchesToCommit,
   replaceCommitHook,
   replaceRequestAnimationFrame,
-  type PatchOptions,
   type PatchList,
+  type PatchOptions,
 };

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

@@ -0,0 +1,10 @@
+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,6 +1,13 @@
 // 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 enum SnapshotOperation {
   CreateElement,
   InsertBefore,
@@ -12,6 +19,8 @@ export const enum SnapshotOperation {
   DEV_ONLY_RegisterWorklet = 101,
 }
 
+// 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]

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

@@ -1,14 +1,31 @@
 // 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 { SnapshotInstance, createSnapshot, snapshotInstanceManager, snapshotManager } from '../../snapshot.js';
 import type { SnapshotPatch } from './snapshotPatch.js';
 import { SnapshotOperation } from './snapshotPatch.js';
-import { SnapshotInstance, createSnapshot, snapshotInstanceManager, snapshotManager } from '../../snapshot.js';
 
 function reportCtxNotFound(): void {
   lynx.reportError(new Error(`snapshotPatchApply failed: ctx not found`));
 }
 
+/**
+ * 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) {
@@ -107,10 +124,8 @@ export function snapshotPatchApply(snapshotPatch: SnapshotPatch): void {
 }
 
 /**
- * Given an expression string, return the evaluated result with ReactLynx runtime injected.
- *
- * @param code - The code to be evaluated
- * @returns the evaluated expression
+ * 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 {
   return new Function(`return ${code}`)();

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

@@ -2,17 +2,18 @@
 // 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 { clearDelayedWorklets, updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
+import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
 
 import type { PatchList, PatchOptions } from './commit.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
 import { LifecycleConstant } from '../../lifecycleConstant.js';
 import { __pendingListUpdates } from '../../list.js';
-import { PerformanceTimingKeys, markTiming, setPipeline } from '../../lynx/performance.js';
+import { markTiming, PerformanceTimingKeys, setPipeline } from '../../lynx/performance.js';
 import { takeGlobalRefPatchMap } from '../../snapshot/ref.js';
 import { __page } from '../../snapshot.js';
 import { isEmptyObject } from '../../utils.js';
 import { getReloadVersion } from '../pass.js';
+import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
 
 function updateMainThread(
   { data, patchOptions }: {
@@ -47,7 +48,7 @@ function updateMainThread(
   markTiming(PerformanceTimingKeys.patchChangesEnd);
   markTiming(PerformanceTimingKeys.mtsRenderEnd);
   if (patchOptions.isHydration) {
-    clearDelayedWorklets();
+    setMainThreadHydrationFinished(true);
   }
   if (patchOptions.pipelineOptions) {
     flushOptions.pipelineOptions = patchOptions.pipelineOptions;

package/runtime/src/lifecycle/reload.ts

@@ -1,19 +1,28 @@
 // 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 reload (thinking of "refresh" in browser) for both main thread
+ * and background thread.
+ */
+
+import { render } from 'preact';
+
 import { hydrate } from '../hydrate.js';
 import { LifecycleConstant } from '../lifecycleConstant.js';
 import { __pendingListUpdates } from '../list.js';
 import { __root, setRoot } from '../root.js';
-import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
 import { SnapshotInstance, __page, snapshotInstanceManager } from '../snapshot.js';
+import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
 import { isEmptyObject } from '../utils.js';
-import { destroyBackground } from './destroy.js';
 import { destroyWorklet } from '../worklet/destroy.js';
+import { destroyBackground } from './destroy.js';
 import { clearJSReadyEventIdSwap, isJSReady } from './event/jsReady.js';
 import { increaseReloadVersion } from './pass.js';
 import { deinitGlobalSnapshotPatch } from './patch/snapshotPatch.js';
-import { renderBackground, renderMainThread } from './render.js';
+import { renderMainThread } from './render.js';
+import { setMainThreadHydrationFinished } from './patch/isMainThreadHydrationFinished.js';
 
 function reloadMainThread(data: any, options: UpdatePageOption): void {
   if (__PROFILE__) {
@@ -30,6 +39,7 @@ function reloadMainThread(data: any, options: UpdatePageOption): void {
   snapshotInstanceManager.clear();
   __pendingListUpdates.clear();
   clearJSReadyEventIdSwap();
+  setMainThreadHydrationFinished(false);
 
   const oldRoot = __root;
   setRoot(new SnapshotInstance('root'));
@@ -74,7 +84,7 @@ function reloadBackground(updateData: Record<string, any>): void {
   // COW when modify `lynx.__initData` to make sure Provider & Consumer works
   lynx.__initData = Object.assign({}, lynx.__initData, updateData);
 
-  renderBackground(__root.__jsx, __root as any);
+  render(__root.__jsx, __root as any);
 
   if (__PROFILE__) {
     console.profileEnd();

package/runtime/src/lifecycle/render.ts

@@ -1,13 +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.
+
+/**
+ * Implements the IFR (Instant First-Frame Rendering) on main thread.
+ */
+
 import { render } from 'preact';
-import type { ComponentChild, ContainerNode } from 'preact';
 
 import { renderOpcodesInto } from '../opcodes.js';
 import { render as renderToString } from '../renderToOpcodes/index.js';
 import { __root } from '../root.js';
-import { commitToMainThread } from './patch/commit.js';
 
 function renderMainThread(): void {
   /* v8 ignore start */
@@ -47,9 +50,4 @@ function renderMainThread(): void {
   /* v8 ignore stop */
 }
 
-function renderBackground(vnode: ComponentChild, parent: ContainerNode): void {
-  render(vnode, parent);
-  void commitToMainThread();
-}
-
-export { renderMainThread, renderBackground };
+export { renderMainThread };

package/runtime/src/list.ts

@@ -78,10 +78,12 @@ export class ListUpdateInfoRecording implements ListUpdateInfo {
     //   __FlushElementTree(listElement);
     // });
     __SetAttribute(listElement, 'update-list-info', this.__toAttribute());
+    const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(this.list.childNodes);
     __UpdateListCallbacks(
       listElement,
-      componentAtIndexFactory(this.list.childNodes),
+      componentAtIndex,
       enqueueComponentFactory(),
+      componentAtIndexes,
     );
   }
 
@@ -243,13 +245,17 @@ export function clearListGlobal(): void {
   }
 }
 
-export function componentAtIndexFactory(ctx: SnapshotInstance[]): ComponentAtIndexCallback {
+export function componentAtIndexFactory(
+  ctx: SnapshotInstance[],
+): [ComponentAtIndexCallback, ComponentAtIndexesCallback] {
   const componentAtIndex = (
     list: FiberElement,
     listID: number,
     cellIndex: number,
     operationID: number,
     enableReuseNotification: boolean,
+    enableBatchRender: boolean = false,
+    asyncFlush: boolean = false,
   ) => {
     const signMap = gSignMap[listID];
     const recycleMap = gRecycleMap[listID];
@@ -284,7 +290,14 @@ export function componentAtIndexFactory(ctx: SnapshotInstance[]): ComponentAtInd
       if (recycleSignMap?.has(sign)) {
         signMap.set(sign, childCtx);
         recycleSignMap.delete(sign);
-        __FlushElementTree(root, { triggerLayout: true, operationID, elementID: sign, listID });
+        if (!enableBatchRender) {
+          __FlushElementTree(root, { triggerLayout: true, operationID, elementID: sign, listID });
+        } else if (enableBatchRender && asyncFlush) {
+          __FlushElementTree(root, { asyncFlush: true });
+        } else {
+          // enableBatchRender == true && asyncFlush == false
+          // in this case, no need to invoke __FlushElementTree because in the end of componentAtIndexes(), the list will invoke __FlushElementTree.
+        }
         return sign;
       } else {
         const newCtx = childCtx.takeElements();
@@ -299,24 +312,31 @@ export function componentAtIndexFactory(ctx: SnapshotInstance[]): ComponentAtInd
       hydrate(oldCtx, childCtx);
       oldCtx.unRenderElements();
       const root = childCtx.__element_root!;
-      if (enableReuseNotification) {
-        __FlushElementTree(root, {
+      if (!enableBatchRender) {
+        const flushOptions: FlushOptions = {
           triggerLayout: true,
           operationID,
           elementID: sign,
           listID,
-          listReuseNotification: {
+        };
+        if (enableReuseNotification) {
+          flushOptions.listReuseNotification = {
             listElement: list,
             itemKey: platformInfo['item-key'],
-          },
-        });
-      } else {
-        __FlushElementTree(root, {
-          triggerLayout: true,
-          operationID,
-          elementID: sign,
-          listID,
-        });
+          };
+        }
+        __FlushElementTree(root, flushOptions);
+      } else if (enableBatchRender && asyncFlush) {
+        const flushOptions: FlushOptions = {
+          asyncFlush: true,
+        };
+        if (enableReuseNotification) {
+          flushOptions.listReuseNotification = {
+            listElement: list,
+            itemKey: platformInfo['item-key'],
+          };
+        }
+        __FlushElementTree(root, flushOptions);
       }
       signMap.set(sign, childCtx);
       commitMainThreadPatchUpdate(undefined);
@@ -327,17 +347,43 @@ export function componentAtIndexFactory(ctx: SnapshotInstance[]): ComponentAtInd
     const root = childCtx.__element_root!;
     __AppendElement(list, root);
     const sign = __GetElementUniqueID(root);
-    __FlushElementTree(root, {
-      triggerLayout: true,
-      operationID,
-      elementID: sign,
-      listID,
-    });
+    if (!enableBatchRender) {
+      __FlushElementTree(root, {
+        triggerLayout: true,
+        operationID,
+        elementID: sign,
+        listID,
+      });
+    } else if (enableBatchRender && asyncFlush) {
+      __FlushElementTree(root, {
+        asyncFlush: true,
+      });
+    }
     signMap.set(sign, childCtx);
     commitMainThreadPatchUpdate(undefined);
     return sign;
   };
-  return componentAtIndex;
+
+  const componentAtIndexes = (
+    list: FiberElement,
+    listID: number,
+    cellIndexes: number[],
+    operationIDs: number[],
+    enableReuseNotification: boolean,
+    asyncFlush: boolean,
+  ) => {
+    const uiSigns = cellIndexes.map((cellIndex, index) => {
+      const operationID = operationIDs[index] ?? 0;
+      return componentAtIndex(list, listID, cellIndex, operationID, enableReuseNotification, true, asyncFlush);
+    });
+    __FlushElementTree(list, {
+      triggerLayout: true,
+      operationIDs: operationIDs,
+      elementIDs: uiSigns,
+      listID,
+    });
+  };
+  return [componentAtIndex, componentAtIndexes] as const;
 }
 
 export function enqueueComponentFactory(): EnqueueComponentCallback {
@@ -371,11 +417,13 @@ export function snapshotCreateList(
 ): FiberElement {
   const signMap = new Map<number, SnapshotInstance>();
   const recycleMap = new Map<string, Map<number, SnapshotInstance>>();
+  const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory([]);
   const list = __CreateList(
     pageId,
-    componentAtIndexFactory([]),
+    componentAtIndex,
     enqueueComponentFactory(),
     {},
+    componentAtIndexes,
   );
   const listID = __GetElementUniqueID(list);
   gSignMap[listID] = signMap;

package/runtime/src/lynx/env.ts

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import type { DataProcessorDefinition } from '../lynx-api.js';
 
-export function setupLynxEnv(): void {
+export function setupLynxTestingEnv(): void {
   if (!__LEPUS__) {
     const { initData, updateData } = lynxCoreInject.tt._params;
     // @ts-ignore

package/runtime/src/lynx/runWithForce.ts

@@ -2,13 +2,17 @@ import { options } from 'preact';
 import type { VNode } from 'preact';
 import { COMPONENT, DIFF, DIFFED, FORCE } from '../renderToOpcodes/constants.js';
 
+const sForcedVNode = Symbol('FORCE');
+
+type PatchedVNode = VNode & { [sForcedVNode]?: true };
+
 export function runWithForce(cb: () => void): void {
   // save vnode and its `_component` in WeakMap
   const m = new WeakMap<VNode, any>();
 
   const oldDiff = options[DIFF];
 
-  options[DIFF] = (vnode: VNode) => {
+  options[DIFF] = (vnode: PatchedVNode) => {
     if (oldDiff) {
       oldDiff(vnode);
     }
@@ -28,19 +32,26 @@ export function runWithForce(cb: () => void): void {
         return m.get(vnode);
       },
     });
+    vnode[sForcedVNode] = true;
   };
 
   const oldDiffed = options[DIFFED];
 
-  options[DIFFED] = (vnode: VNode) => {
+  options[DIFFED] = (vnode: PatchedVNode) => {
     if (oldDiffed) {
       oldDiffed(vnode);
     }
 
-    // delete is a reverse operation of previous `Object.defineProperty`
-    delete vnode[COMPONENT];
-    // restore
-    vnode[COMPONENT] = m.get(vnode);
+    // There would be cases when `options[DIFF]` has been reset while options[DIFFED] is not,
+    // so we need to check if `vnode` is patched by `options[DIFF]`.
+    // We only want to change the patched vnode
+    if (vnode[sForcedVNode]) {
+      // delete is a reverse operation of previous `Object.defineProperty`
+      delete vnode[COMPONENT];
+      delete vnode[sForcedVNode];
+      // restore
+      vnode[COMPONENT] = m.get(vnode);
+    }
   };
 
   try {