diff --git a/.changeset/eighty-planes-decide.md b/.changeset/eighty-planes-decide.md new file mode 100644 index 0000000000..44b9e01a42 --- /dev/null +++ b/.changeset/eighty-planes-decide.md @@ -0,0 +1,6 @@ +--- +"@lynx-js/react-rsbuild-plugin": patch +"@lynx-js/react-webpack-plugin": patch +--- + +Support @lynx-js/react v0.107.0 diff --git a/.changeset/honest-pandas-float.md b/.changeset/honest-pandas-float.md new file mode 100644 index 0000000000..56a9c22b61 --- /dev/null +++ b/.changeset/honest-pandas-float.md @@ -0,0 +1,21 @@ +--- +"@lynx-js/react": minor +--- + +Some of the timing keys are renamed to match the naming convention of the Lynx Engine. + +- `update_set_state_trigger` -> `updateSetStateTrigger` +- `update_diff_vdom_start` -> `updateDiffVdomStart` +- `update_diff_vdom_end` -> `updateDiffVdomEnd` +- `diff_vdom_start` -> `diffVdomStart` +- `diff_vdom_end` -> `diffVdomEnd` +- `pack_changes_start` -> `packChangesStart` +- `pack_changes_end` -> `packChangesEnd` +- `parse_changes_start` -> `parseChangesStart` +- `parse_changes_end` -> `parseChangesEnd` +- `patch_changes_start` -> `patchChangesStart` +- `patch_changes_end` -> `patchChangesEnd` +- `hydrate_parse_snapshot_start` -> `hydrateParseSnapshotStart` +- `hydrate_parse_snapshot_end` -> `hydrateParseSnapshotEnd` +- `mts_render_start` -> `mtsRenderStart` +- `mts_render_end` -> `mtsRenderEnd` diff --git a/cspell.jsonc b/cspell.jsonc index 45de5e0786..e239b41a65 100644 --- a/cspell.jsonc +++ b/cspell.jsonc @@ -115,6 +115,7 @@ "parseable", // https://pnpm.io/cli/list "debugids", // https://getsentry.github.io/debugids/ "zizmor", // https://github.com/woodruffw/zizmor + "Vdom", "wvid", "bindscroll", "deinit", diff --git a/packages/react/runtime/__test__/lifecycle/reload.test.jsx b/packages/react/runtime/__test__/lifecycle/reload.test.jsx index c29f4dc52d..eb7203c291 100644 --- a/packages/react/runtime/__test__/lifecycle/reload.test.jsx +++ b/packages/react/runtime/__test__/lifecycle/reload.test.jsx @@ -102,8 +102,11 @@ describe('reload', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -314,8 +317,11 @@ describe('reload', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 2, }, @@ -496,8 +502,11 @@ describe('reload', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 2, }, @@ -718,8 +727,11 @@ describe('reload', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 4, }, @@ -1315,8 +1327,11 @@ describe('firstScreenSyncTiming - jsReady', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 5, }, @@ -1516,8 +1531,11 @@ describe('firstScreenSyncTiming - jsReady', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 5, }, @@ -1678,8 +1696,11 @@ describe('firstScreenSyncTiming - jsReady', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 5, }, @@ -1869,8 +1890,11 @@ describe('firstScreenSyncTiming - jsReady', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 7, }, diff --git a/packages/react/runtime/__test__/lynx/timing.test.jsx b/packages/react/runtime/__test__/lynx/timing.test.jsx index a49ce2159e..04601e217a 100644 --- a/packages/react/runtime/__test__/lynx/timing.test.jsx +++ b/packages/react/runtime/__test__/lynx/timing.test.jsx @@ -83,17 +83,17 @@ describe('setState timing api', () => { expect(lynx.getNativeApp().markTiming).toHaveBeenNthCalledWith( 1, '__lynx_timing_actual_fmp', - 'update_set_state_trigger', + 'updateSetStateTrigger', ); expect(lynx.getNativeApp().markTiming).toHaveBeenNthCalledWith( 2, '__lynx_timing_actual_fmp', - 'update_diff_vdom_start', + 'updateDiffVdomStart', ); expect(lynx.getNativeApp().markTiming).toHaveBeenNthCalledWith( 3, '__lynx_timing_actual_fmp', - 'update_diff_vdom_end', + 'updateDiffVdomEnd', ); expect(mtCallbacks[0][1]).toMatchInlineSnapshot(` @@ -101,8 +101,11 @@ describe('setState timing api', () => { "data": "{"patchList":[{"id":3,"snapshotPatch":[0,"__Card__:__snapshot_a94a8_test_2",3,0,null,4,3,4,0,1,1,3,4,null,1,-2,3,null]}],"flushOptions":{"__lynx_timing_flag":"__lynx_timing_actual_fmp"}}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": false, "pipelineID": "pipelineID", + "pipelineOrigin": "updateTriggeredByBts", + "stage": "update", }, "reloadVersion": 0, }, @@ -177,8 +180,11 @@ describe('attribute timing api', () => { "data": "{"patchList":[{"id":6,"snapshotPatch":[0,"__Card__:__snapshot_a94a8_test_4",3,4,3,[{"__ltf":"__lynx_timing_actual_fmp"}],0,null,4,3,4,0,1,1,3,4,null,1,-2,3,null]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "updateTriggeredByBts", + "stage": "update", }, "reloadVersion": 0, }, @@ -215,42 +221,52 @@ describe('attribute timing api', () => { [ "_markTiming", "pipelineID", - "diff_vdom_start", + "diffVdomStart", ], [ "_markTiming", "pipelineID", - "diff_vdom_end", + "diffVdomEnd", ], [ "_markTiming", "pipelineID", - "pack_changes_start", + "packChangesStart", ], [ "_markTiming", "pipelineID", - "pack_changes_end", + "packChangesEnd", ], [ "_markTiming", "pipelineID", - "parse_changes_start", + "mtsRenderStart", ], [ "_markTiming", "pipelineID", - "parse_changes_end", + "parseChangesStart", ], [ "_markTiming", "pipelineID", - "patch_changes_start", + "parseChangesEnd", ], [ "_markTiming", "pipelineID", - "patch_changes_end", + "patchChangesStart", + ], + [ + "_markTiming", + "pipelineID", + "patchChangesEnd", + ], + [ + "_markTiming", + "pipelineID", + "mtsRenderEnd", ], ] `); @@ -315,22 +331,22 @@ describe('attribute timing api', () => { [ "_markTiming", "pipelineID", - "diff_vdom_start", + "diffVdomStart", ], [ "_markTiming", "pipelineID", - "diff_vdom_end", + "diffVdomEnd", ], [ "_markTiming", "pipelineID", - "pack_changes_start", + "packChangesStart", ], [ "_markTiming", "pipelineID", - "pack_changes_end", + "packChangesEnd", ], ] `); @@ -339,8 +355,11 @@ describe('attribute timing api', () => { "data": "{"patchList":[{"id":9,"snapshotPatch":[0,"__Card__:__snapshot_a94a8_test_6",3,4,3,[{"__ltf":"__lynx_timing_actual_fmp"}],0,null,4,3,4,0,1,1,3,4,null,1,-2,3,null]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "updateTriggeredByBts", + "stage": "update", }, "reloadVersion": 0, }, @@ -407,32 +426,32 @@ describe('attribute timing api', () => { [ "_markTiming", "pipelineID", - "hydrate_parse_snapshot_start", + "hydrateParseSnapshotStart", ], [ "_markTiming", "pipelineID", - "hydrate_parse_snapshot_end", + "hydrateParseSnapshotEnd", ], [ "_markTiming", "pipelineID", - "diff_vdom_start", + "diffVdomStart", ], [ "_markTiming", "pipelineID", - "diff_vdom_end", + "diffVdomEnd", ], [ "_markTiming", "pipelineID", - "pack_changes_start", + "packChangesStart", ], [ "_markTiming", "pipelineID", - "pack_changes_end", + "packChangesEnd", ], ] `); @@ -442,8 +461,11 @@ describe('attribute timing api', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -498,8 +520,11 @@ describe('attribute timing api', () => { "data": "{"patchList":[{"id":14,"snapshotPatch":[3,-2,1,444]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": false, "pipelineID": "pipelineID", + "pipelineOrigin": "updateTriggeredByBts", + "stage": "update", }, "reloadVersion": 0, }, @@ -518,7 +543,7 @@ describe('attribute timing api', () => { [ "_markTiming", "pipelineID", - "diff_vdom_start", + "diffVdomStart", ], ] `); @@ -654,8 +679,11 @@ describe('attribute timing api', () => { "data": "{"patchList":[{"id":17,"snapshotPatch":[0,"__Card__:__snapshot_a94a8_test_15",3,4,3,[{"xxx":333,"__lynx_timing_flag":"__lynx_timing_actual_fmp"}],0,null,4,3,4,0,1,1,3,4,null,1,-2,3,null]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "updateTriggeredByBts", + "stage": "update", }, "reloadVersion": 0, }, @@ -693,42 +721,52 @@ describe('attribute timing api', () => { [ "_markTiming", "pipelineID", - "diff_vdom_start", + "diffVdomStart", + ], + [ + "_markTiming", + "pipelineID", + "diffVdomEnd", + ], + [ + "_markTiming", + "pipelineID", + "packChangesStart", ], [ "_markTiming", "pipelineID", - "diff_vdom_end", + "packChangesEnd", ], [ "_markTiming", "pipelineID", - "pack_changes_start", + "mtsRenderStart", ], [ "_markTiming", "pipelineID", - "pack_changes_end", + "parseChangesStart", ], [ "_markTiming", "pipelineID", - "parse_changes_start", + "parseChangesEnd", ], [ "_markTiming", "pipelineID", - "parse_changes_end", + "patchChangesStart", ], [ "_markTiming", "pipelineID", - "patch_changes_start", + "patchChangesEnd", ], [ "_markTiming", "pipelineID", - "patch_changes_end", + "mtsRenderEnd", ], ] `); @@ -747,8 +785,11 @@ describe('attribute timing api', () => { "data": "{"patchList":[{"id":18,"snapshotPatch":[3,3,0,{"xxx":666,"__lynx_timing_flag":"__lynx_timing_actual_fmp"}]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": false, "pipelineID": "pipelineID", + "pipelineOrigin": "updateTriggeredByBts", + "stage": "update", }, "reloadVersion": 0, }, @@ -786,7 +827,7 @@ describe('attribute timing api', () => { [ "_markTiming", "pipelineID", - "diff_vdom_start", + "diffVdomStart", ], ] `); diff --git a/packages/react/runtime/__test__/snapshot/event.test.jsx b/packages/react/runtime/__test__/snapshot/event.test.jsx index 8e1821ba1a..9916075aa4 100644 --- a/packages/react/runtime/__test__/snapshot/event.test.jsx +++ b/packages/react/runtime/__test__/snapshot/event.test.jsx @@ -95,8 +95,11 @@ describe('eventUpdate', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, diff --git a/packages/react/runtime/__test__/snapshot/workletRef.test.jsx b/packages/react/runtime/__test__/snapshot/workletRef.test.jsx index 1a95537f2f..b7655c49a6 100644 --- a/packages/react/runtime/__test__/snapshot/workletRef.test.jsx +++ b/packages/react/runtime/__test__/snapshot/workletRef.test.jsx @@ -237,8 +237,11 @@ describe('WorkletRef', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, diff --git a/packages/react/runtime/__test__/worklet/workletRef.test.jsx b/packages/react/runtime/__test__/worklet/workletRef.test.jsx index 4dd66af169..9eb2079f3e 100644 --- a/packages/react/runtime/__test__/worklet/workletRef.test.jsx +++ b/packages/react/runtime/__test__/worklet/workletRef.test.jsx @@ -102,8 +102,11 @@ describe('WorkletRef in js', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -191,8 +194,11 @@ describe('WorkletRef in js', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, diff --git a/packages/react/runtime/src/lifecycle/patch/commit.ts b/packages/react/runtime/src/lifecycle/patch/commit.ts index 8590d4c582..296bd00ae0 100644 --- a/packages/react/runtime/src/lifecycle/patch/commit.ts +++ b/packages/react/runtime/src/lifecycle/patch/commit.ts @@ -148,8 +148,8 @@ async function commitToMainThread(): Promise { return; } - markTimingLegacy(PerformanceTimingKeys.update_diff_vdom_end); - markTiming(PerformanceTimingKeys.diff_vdom_end); + markTimingLegacy(PerformanceTimingKeys.updateDiffVdomEnd); + markTiming(PerformanceTimingKeys.diffVdomEnd); const flushOptions = globalFlushOptions; globalFlushOptions = {}; @@ -189,7 +189,7 @@ function commitPatchUpdate(patchList: PatchList, patchOptions: Omit { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -236,8 +239,11 @@ test('fireEvent triggers useEffect calls', async () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -250,8 +256,11 @@ test('fireEvent triggers useEffect calls', async () => { "data": "{"patchList":[{"id":3,"snapshotPatch":[3,3,0,1]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, diff --git a/packages/react/testing-library/src/__tests__/end-to-end.test.jsx b/packages/react/testing-library/src/__tests__/end-to-end.test.jsx index fb767449b5..e806d66bc7 100644 --- a/packages/react/testing-library/src/__tests__/end-to-end.test.jsx +++ b/packages/react/testing-library/src/__tests__/end-to-end.test.jsx @@ -100,8 +100,11 @@ test('state change will cause re-render', async () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -114,8 +117,11 @@ test('state change will cause re-render', async () => { "data": "{"patchList":[{"id":3,"snapshotPatch":[2,-1,2,0,"__Card__:__snapshot_354a3_test_2",3,0,null,4,3,4,0,"Hello World",1,3,4,null,1,-1,3,null]}]}", "patchOptions": { "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, diff --git a/packages/react/testing-library/src/__tests__/worklet.test.jsx b/packages/react/testing-library/src/__tests__/worklet.test.jsx index ca04e40f43..221a73a413 100644 --- a/packages/react/testing-library/src/__tests__/worklet.test.jsx +++ b/packages/react/testing-library/src/__tests__/worklet.test.jsx @@ -81,8 +81,11 @@ describe('worklet', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -160,8 +163,11 @@ describe('worklet', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -247,8 +253,11 @@ describe('worklet', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -338,8 +347,11 @@ describe('worklet', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, @@ -433,8 +445,11 @@ describe('worklet', () => { "patchOptions": { "isHydration": true, "pipelineOptions": { + "dsl": "reactLynx", "needTimestamps": true, "pipelineID": "pipelineID", + "pipelineOrigin": "reactLynxHydrate", + "stage": "hydrate", }, "reloadVersion": 0, }, diff --git a/packages/react/types/react.d.ts b/packages/react/types/react.d.ts index 9068c0a707..1684169d9f 100644 --- a/packages/react/types/react.d.ts +++ b/packages/react/types/react.d.ts @@ -144,6 +144,35 @@ declare module '@lynx-js/types' { */ 'reuse-identifier'?: Key; } + + export interface FrameworkRenderingTimings { + reactLynxHydrate: { + dsl: 'reactLynx'; + stage: 'hydrate'; + diffVdomStart: number; + diffVdomEnd: number; + packChangesStart: number; + packChangesEnd: number; + parseChangesStart: number; + parseChangesEnd: number; + patchChangesStart: number; + patchChangesEnd: number; + hydrateParseSnapshotStart: number; + hydrateParseSnapshotEnd: number; + }; + reactLynxUpdate: { + dsl: 'reactLynx'; + stage: 'update'; + diffVdomStart: number; + diffVdomEnd: number; + packChangesStart: number; + packChangesEnd: number; + parseChangesStart: number; + parseChangesEnd: number; + patchChangesStart: number; + patchChangesEnd: number; + }; + } } export type { JSX } from '../runtime/jsx-runtime/index.d.ts'; diff --git a/packages/rspeedy/plugin-react/package.json b/packages/rspeedy/plugin-react/package.json index 22a1c31b7a..f27cd5be17 100644 --- a/packages/rspeedy/plugin-react/package.json +++ b/packages/rspeedy/plugin-react/package.json @@ -64,7 +64,7 @@ "typia-rspack-plugin": "2.0.1" }, "peerDependencies": { - "@lynx-js/react": "^0.103.0 || ^0.104.0 || ^0.105.0 || ^0.106.0" + "@lynx-js/react": "^0.103.0 || ^0.104.0 || ^0.105.0 || ^0.106.0 || ^0.107.0" }, "peerDependenciesMeta": { "@lynx-js/react": { diff --git a/packages/webpack/react-webpack-plugin/package.json b/packages/webpack/react-webpack-plugin/package.json index 965f25c7c9..eee06d75be 100644 --- a/packages/webpack/react-webpack-plugin/package.json +++ b/packages/webpack/react-webpack-plugin/package.json @@ -53,7 +53,7 @@ "webpack": "^5.99.5" }, "peerDependencies": { - "@lynx-js/react": "^0.103.0 || ^0.104.0 || ^0.105.0 || ^0.106.0", + "@lynx-js/react": "^0.103.0 || ^0.104.0 || ^0.105.0 || ^0.106.0 || ^0.107.0", "@lynx-js/template-webpack-plugin": "^0.4.0 || ^0.5.0 || ^0.6.0" }, "peerDependenciesMeta": {