feat: remove options.document and reuse vnode as dom

.changeset/slick-pandas-flow.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Reuse vnode tree as dom tree in bts

benchmark/react/cases/004-various-update/index.tsx

@@ -1,12 +1,11 @@
 // 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.
+/* eslint-disable @typescript-eslint/unbound-method */
 
 import { root, useEffect, useState } from '@lynx-js/react';
-import {
-  BackgroundSnapshotInstance,
-  SnapshotInstance,
-} from '@lynx-js/react/internal';
+import { SnapshotInstance, options } from '@lynx-js/react/internal';
+import type { BackgroundDOM } from '@lynx-js/react/internal';
 import type { CSSProperties, MainThread, NodesRef } from '@lynx-js/types';
 
 import { hook, isMainThread } from '../../src/hook.js';
@@ -89,26 +88,32 @@ if (typeof Codspeed !== 'undefined' && __MAIN_THREAD__) {
 
 if (typeof Codspeed !== 'undefined' && __BACKGROUND__) {
   hook(
-    BackgroundSnapshotInstance.prototype,
-    'setAttribute',
-    function(this: BackgroundSnapshotInstance, old, key, value) {
-      const values = value as unknown[];
-      if (
-        key === 'values' && values[values.length - 1] === 'stop-benchmark-true'
-      ) {
-        // we only care about the update that stops the benchmark
-
-        Codspeed.startBenchmark();
-        const ret = old!.call(this, key, value);
-        Codspeed.stopBenchmark();
-        Codspeed.setExecutedBenchmark(
-          `${__REPO_FILEPATH__}::${__webpack_chunkname__}-setAttribute__BatchedValues`,
-        );
-        return ret;
-      }
+    options,
+    'setupDom',
+    function(old: typeof options.setupDom, vnode: BackgroundDOM) {
+      old?.(vnode);
+      const oldSetAttribute = vnode.setAttribute;
+      vnode.setAttribute = function(this: BackgroundDOM, key, value) {
+        const values = value as unknown[];
+        if (
+          key === 'values'
+          && values[values.length - 1] === 'stop-benchmark-true'
+        ) {
+          // we only care about the update that stops the benchmark
+
+          Codspeed.startBenchmark();
+          const ret = oldSetAttribute.call(this, key, value);
+          Codspeed.stopBenchmark();
+          Codspeed.setExecutedBenchmark(
+            `${__REPO_FILEPATH__}::${__webpack_chunkname__}-setAttribute__BatchedValues`,
+          );
+          return ret;
+        }
 
-      return old!.call(this, key, value);
-    },
+        return oldSetAttribute.call(this, key, value);
+      };
+      return vnode;
+    } as never,
   );
 }
 

packages/react/package.json

@@ -33,10 +33,6 @@
       "lazy": "./runtime/lazy/internal.js",
       "default": "./runtime/lib/internal.js"
     },
-    "./internal/document": {
-      "types": "./runtime/lib/document.d.ts",
-      "default": "./runtime/lib/document.js"
-    },
     "./jsx-runtime": {
       "types": "./runtime/jsx-runtime/index.d.ts",
       "lazy": "./runtime/lazy/jsx-runtime.js",
@@ -174,7 +170,7 @@
     "api-extractor": "api-extractor run --verbose"
   },
   "dependencies": {
-    "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26"
+    "preact": "https://pkg.pr.new/lynx-family/internal-preact/preact@576a34a"
   },
   "devDependencies": {
     "@lynx-js/types": "3.7.0",

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

@@ -1,10 +1,14 @@
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { elementTree } from './utils/nativeMethod';
-import { backgroundSnapshotInstanceManager, setupPage, snapshotInstanceManager } from '../src/snapshot';
+import {
+  backgroundSnapshotInstanceManager,
+  setupPage,
+  SnapshotInstance,
+  snapshotInstanceManager,
+} from '../src/snapshot';
 import { ComponentFromReactRuntime, wrapWithLynxComponent } from '../src/compat/lynxComponent';
-import { setupDocument } from '../src/document';
-import { Fragment, render } from 'preact';
+import { Fragment, options, render } from 'preact';
 import { globalEnvManager } from './utils/envManager';
 
 const HOLE = null;
@@ -13,7 +17,6 @@ let scratch;
 
 beforeAll(() => {
   globalEnvManager.switchToMainThread();
-  setupDocument();
   setupPage(__CreatePage('0', 0));
 });
 
@@ -22,7 +25,7 @@ beforeEach(() => {
   backgroundSnapshotInstanceManager.nextId = 0;
   snapshotInstanceManager.clear();
   snapshotInstanceManager.nextId = 0;
-  scratch = document.createElement('root');
+  scratch = new SnapshotInstance('root');
 });
 
 afterEach(() => {

packages/react/runtime/__test__/compat/initData.test.jsx

@@ -1,8 +1,7 @@
-import { Component, render } from 'preact';
+import { Component, render, options } from 'preact';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { elementTree, waitSchedule } from '../utils/nativeMethod';
 import { BackgroundSnapshotInstance } from '../../src/backgroundSnapshot';
-import { setupBackgroundDocument } from '../../src/document';
 import { backgroundSnapshotInstanceManager, setupPage, SnapshotInstance } from '../../src/snapshot';
 import { backgroundSnapshotInstanceToJSON } from '../utils/debug';
 import { useState } from 'preact/compat';
@@ -11,22 +10,30 @@ import { globalEnvManager } from '../utils/envManager';
 
 /** @type {SnapshotInstance} */
 let scratch;
+let switchToBackground = globalEnvManager.switchToBackground.bind(globalEnvManager);
 
 beforeAll(() => {
-  setupBackgroundDocument();
   setupPage(__CreatePage('0', 0));
 
-  BackgroundSnapshotInstance.prototype.toJSON = backgroundSnapshotInstanceToJSON;
+  globalEnvManager.switchToBackground = () => {
+    switchToBackground();
+    const oldSetupDom = options.setupDom;
+    options.setupDom = (vnode) => {
+      vnode = oldSetupDom(vnode);
+      vnode.toJSON = backgroundSnapshotInstanceToJSON;
+      return vnode;
+    };
+  };
 
   globalEnvManager.switchToBackground();
 });
 
 afterAll(() => {
-  delete BackgroundSnapshotInstance.prototype.toJSON;
+  globalEnvManager.switchToBackground = switchToBackground;
 });
 
 beforeEach(() => {
-  scratch = document.createElement('root');
+  scratch = options.setupDom({ type: 'root' });
   lynx.__initData = {};
 });