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:@hongzhiyuan/preact@10.24.0-00213bad"
+    "preact": "npm:@upupming/preact@10.24.0-simple-bsi.4"
   },
   "devDependencies": {
     "@lynx-js/types": "3.4.11",

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 = {};
 });
 

packages/react/runtime/__test__/debug/printSnapshot.test.jsx

@@ -6,7 +6,7 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { backgroundSnapshotInstanceManager, snapshotInstanceManager } from '../../src/snapshot';
 import { elementTree } from '../utils/nativeMethod';
-import { BackgroundSnapshotInstance } from '../../src/backgroundSnapshot';
+import { BackgroundSnapshotInstance, setupDom } from '../../src/backgroundSnapshot';
 import { printSnapshotInstance } from '../../src/debug/printSnapshot';
 
 const HOLE = null;
@@ -51,10 +51,10 @@ describe('printSnapshotInstance', () => {
   });
 
   it('basic', async function() {
-    const bsi1 = new BackgroundSnapshotInstance(snapshot1);
-    const bsi2 = new BackgroundSnapshotInstance(snapshot2);
-    const bsi22 = new BackgroundSnapshotInstance(snapshot2);
-    const bsi3 = new BackgroundSnapshotInstance(snapshot3);
+    const bsi1 = setupDom({ type: snapshot1 });
+    const bsi2 = setupDom({ type: snapshot2 });
+    const bsi22 = setupDom({ type: snapshot2 });
+    const bsi3 = setupDom({ type: snapshot3 });
     bsi1.insertBefore(bsi2);
     bsi1.insertBefore(bsi22);
     bsi2.insertBefore(bsi3);
@@ -73,10 +73,10 @@ describe('printSnapshotInstance', () => {
   });
 
   it('printToScreen', async function() {
-    const bsi1 = new BackgroundSnapshotInstance(snapshot1);
-    const bsi2 = new BackgroundSnapshotInstance(snapshot2);
-    const bsi22 = new BackgroundSnapshotInstance(snapshot2);
-    const bsi3 = new BackgroundSnapshotInstance(snapshot3);
+    const bsi1 = setupDom({ type: snapshot1 });
+    const bsi2 = setupDom({ type: snapshot2 });
+    const bsi22 = setupDom({ type: snapshot2 });
+    const bsi3 = setupDom({ type: snapshot3 });
     bsi1.insertBefore(bsi2);
     bsi1.insertBefore(bsi22);
     bsi2.insertBefore(bsi3);

packages/react/runtime/__test__/debug/profile.test.jsx

@@ -5,24 +5,22 @@
 */
 import { noop } from './hook';
 
-import { render } from 'preact';
+import { render, options } from 'preact';
 import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 
-import { setupDocument } from '../../src/document';
 import { setupPage, snapshotInstanceManager } from '../../src/snapshot';
 import { initProfileHook } from '../../src/debug/profile';
 
 describe('profile', () => {
   let scratch;
   beforeAll(() => {
     initProfileHook();
-    setupDocument();
     setupPage(__CreatePage('0', 0));
   });
 
   beforeEach(() => {
     snapshotInstanceManager.clear();
-    scratch = document.createElement('root');
+    scratch = options.setupDom({ type: 'root' });
   });
 
   test('original options hooks should be called', async () => {

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

@@ -1,15 +1,15 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { BackgroundSnapshotInstance } from '../src/backgroundSnapshot';
+import { setupDom } from '../src/backgroundSnapshot';
 
 describe('BackgroundSnapshotInstance', () => {
   let root, child1, child2, child3;
 
   beforeEach(() => {
-    root = new BackgroundSnapshotInstance('');
-    child1 = new BackgroundSnapshotInstance('');
-    child2 = new BackgroundSnapshotInstance('');
-    child3 = new BackgroundSnapshotInstance('');
+    root = setupDom({ type: '' });
+    child1 = setupDom({ type: '' });
+    child2 = setupDom({ type: '' });
+    child3 = setupDom({ type: '' });
   });
 
   it('insertBefore', () => {
@@ -25,6 +25,9 @@ describe('BackgroundSnapshotInstance', () => {
 
   it('removeChild', () => {
     root.insertBefore(child1);
+    expect(root.__removed_from_tree).toEqual(undefined);
+    expect(root.lastChild).toEqual(child1);
+    expect(child2.parentNode).toEqual(null);
     root.insertBefore(child2);
     root.insertBefore(child3);
     expect(root.childNodes).toEqual([child1, child2, child3]);

packages/react/runtime/__test__/hooks/useLynxGlobalEventListener.test.jsx

@@ -5,27 +5,35 @@
 */
 import { EventEmitter } from 'node:events';
 
-import { render } from 'preact';
+import { render, options } from 'preact';
 import { useState } from 'preact/compat';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { BackgroundSnapshotInstance } from '../../src/backgroundSnapshot';
-import { setupBackgroundDocument } from '../../src/document';
 import { useLynxGlobalEventListener } from '../../src/lynx-api';
 import { SnapshotInstance, backgroundSnapshotInstanceManager, setupPage } from '../../src/snapshot';
 import { backgroundSnapshotInstanceToJSON } from '../utils/debug.js';
 import { elementTree } from '../utils/nativeMethod';
+import { globalEnvManager } from '../utils/envManager';
 
 describe('useLynxGlobalEventListener', () => {
   /** @type {SnapshotInstance} */
   let scratch;
+  let switchToBackground = globalEnvManager.switchToBackground.bind(globalEnvManager);
   const ee = new EventEmitter();
 
   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;
+      };
+    };
 
     const lynx = {
       ...globalThis.lynx,
@@ -39,11 +47,12 @@ describe('useLynxGlobalEventListener', () => {
   });
 
   afterAll(() => {
-    delete BackgroundSnapshotInstance.prototype.toJSON;
+    globalEnvManager.switchToBackground = switchToBackground;
   });
 
   beforeEach(() => {
-    scratch = document.createElement('root');
+    globalEnvManager.switchToBackground();
+    scratch = options.setupDom({ type: 'root' });
   });
 
   afterEach(() => {