fix: withInitDataInState wrong state after 2nd defaultDataProcessor (#1478)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

<!-- The AI summary below will be auto-generated - feel free to replace
it with your own. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Resolved an issue where state was not correctly maintained across
multiple calls to the data processor, ensuring consistent state updates
in components using initialization data.

* **Tests**
* Added and improved tests for state injection and update behavior when
using the initialization data feature, enhancing test clarity and
coverage.

* **Chores**
* Simplified and restructured test setup for better reliability and
maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

## Checklist

<!--- Check and mark with an "x" -->

- [x] Tests updated (or not required).
- [ ] Documentation updated (or not required).
- [x] Changeset added, and when a BREAKING CHANGE occurs, it needs to be
clearly marked (or not required).

Author: upupming

.changeset/free-colts-listen.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+fix \`withInitDataInState\` got wrong state in 2nd or more times `defaultDataProcessor`, now it will keep its own state.

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

@@ -1,54 +1,42 @@
-import { render } from 'preact';
+import { Component, render } from 'preact';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-import { elementTree } from '../utils/nativeMethod';
+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';
-import { useInitData } from '../../src/lynx-api';
-import { EventEmitter } from 'node:events';
+import { useInitData, withInitDataInState } from '../../src/lynx-api';
 import { globalEnvManager } from '../utils/envManager';
 
-describe('initData', () => {
-  /** @type {SnapshotInstance} */
-  let scratch;
-  const ee = new EventEmitter();
-
-  beforeAll(() => {
-    setupBackgroundDocument();
-    setupPage(__CreatePage('0', 0));
+/** @type {SnapshotInstance} */
+let scratch;
 
-    BackgroundSnapshotInstance.prototype.toJSON = backgroundSnapshotInstanceToJSON;
+beforeAll(() => {
+  setupBackgroundDocument();
+  setupPage(__CreatePage('0', 0));
 
-    globalEnvManager.switchToBackground();
+  BackgroundSnapshotInstance.prototype.toJSON = backgroundSnapshotInstanceToJSON;
 
-    const lynx = {
-      ...globalThis.lynx,
-      getJSModule: (moduleName) => {
-        if (moduleName === 'GlobalEventEmitter') {
-          return ee;
-        }
-      },
-      __initData: {},
-    };
-    vi.stubGlobal('lynx', lynx);
-  });
+  globalEnvManager.switchToBackground();
+});
 
-  afterAll(() => {
-    delete BackgroundSnapshotInstance.prototype.toJSON;
-  });
+afterAll(() => {
+  delete BackgroundSnapshotInstance.prototype.toJSON;
+});
 
-  beforeEach(() => {
-    scratch = document.createElement('root');
-  });
+beforeEach(() => {
+  scratch = document.createElement('root');
+  lynx.__initData = {};
+});
 
-  afterEach(() => {
-    render(null, scratch);
-    elementTree.clear();
-    backgroundSnapshotInstanceManager.clear();
-  });
+afterEach(() => {
+  render(null, scratch);
+  elementTree.clear();
+  backgroundSnapshotInstanceManager.clear();
+});
 
+describe('initData', () => {
   it('should get latest initData', async function() {
     let _setD, _initData;
     function App() {
@@ -66,13 +54,94 @@ describe('initData', () => {
     lynx.getJSModule('GlobalEventEmitter').emit('onDataChanged');
     _setD(2);
     await new Promise(resolve => setTimeout(resolve, 0));
-    expect(ee.listeners('onDataChanged').length).toMatchInlineSnapshot(`1`);
+    expect(lynx.getJSModule('GlobalEventEmitter').listeners['onDataChanged'].length).toMatchInlineSnapshot(`1`);
     expect(_initData).toMatchInlineSnapshot(`
       {
         "key1": "value1",
       }
     `);
     render(null, scratch);
-    expect(ee.listeners('onDataChanged').length).toMatchInlineSnapshot(`0`);
+    expect(lynx.getJSModule('GlobalEventEmitter').listeners['onDataChanged'].length).toMatchInlineSnapshot(`0`);
+  });
+});
+
+describe('withInitDataInState', () => {
+  let app;
+  class App extends Component {
+    constructor() {
+      super();
+      app = this;
+    }
+    render() {
+      const initData = useInitData();
+      return <view d={initData} />;
+    }
+  }
+  const _App = withInitDataInState(App);
+  it('should inject `__initData` to `state` of component', async () => {
+    render(<_App />, scratch);
+    const tt = lynxCoreInject.tt;
+    expect(app.state).toMatchInlineSnapshot(`{}`);
+    tt.updateCardData({
+      'key2': 'value2',
+    });
+    expect(lynx.__initData).toMatchInlineSnapshot(`
+      {
+        "key2": "value2",
+      }
+    `);
+    // setState is called with the initData
+    expect(app.state).toMatchInlineSnapshot(`{}`);
+    expect(app.__s).toMatchInlineSnapshot(`
+      {
+        "key2": "value2",
+      }
+    `);
+    await waitSchedule();
+    // state is updated
+    expect(app.state).toMatchInlineSnapshot(`
+      {
+        "key2": "value2",
+      }
+    `);
+  });
+  it('updateCardData twice', async () => {
+    const _App = withInitDataInState(App);
+    render(<_App />, scratch);
+    const tt = lynxCoreInject.tt;
+    expect(app.state).toMatchInlineSnapshot(`{}`);
+    tt.updateCardData({
+      'key3': 'value3',
+    });
+    await waitSchedule();
+    // state is updated
+    expect(app.state).toMatchInlineSnapshot(`
+      {
+        "key3": "value3",
+      }
+    `);
+    app.setState({
+      'key3': null,
+    });
+    await waitSchedule();
+    expect(app.state).toMatchInlineSnapshot(`
+      {
+        "key3": null,
+      }
+    `);
+    tt.updateCardData({});
+    await waitSchedule();
+    expect(app.state).not.eq(lynx.__initData);
+    // Should keep the state if no new data
+    expect(app.state).toMatchInlineSnapshot(`
+      {
+        "key3": null,
+      }
+    `);
+    expect(lynx.__initData).toMatchInlineSnapshot(`
+      {
+        "key3": "value3",
+      }
+    `);
   });
 });

packages/react/runtime/src/compat/initData.ts

@@ -127,9 +127,10 @@ export function withInitDataInState<P, S>(App: ComponentClass<P, S>): ComponentC
       if (!__LEPUS__) {
         lynx.getJSModule('GlobalEventEmitter').addListener(
           'onDataChanged',
-          this.h = () => {
+          this.h = (...args: unknown[]) => {
+            const [newData] = args as [S];
             globalFlushOptions.triggerDataUpdated = true;
-            this.setState(lynx.__initData as S);
+            this.setState(newData);
           },
         );
       }

packages/react/runtime/src/lynx/tt.ts

@@ -209,7 +209,7 @@ function updateCardData(newData: Record<string, any>, options?: Record<string, a
 
   // COW when modify `lynx.__initData` to make sure Provider & Consumer works
   lynx.__initData = Object.assign({}, lynx.__initData, restNewData);
-  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged', undefined);
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged', [restNewData]);
 }
 
 export { injectTt, flushDelayedLifecycleEvents };