feat(react): support profile in production build

.changeset/forty-aliens-play.md

@@ -0,0 +1,11 @@
+---
+"@lynx-js/react": patch
+---
+
+Add profile in production build:
+
+1. `diff:__COMPONENT_NAME__`: how long ReactLynx diff took.
+2. `render:__COMPONENT_NAME__`: how long your render function took.
+3. `setState`: an instant trace event, indicate when your setState was called.
+
+NOTE: `__COMPONENT_NAME__` may be unreadable when minified, setting `displayName` may help.

packages/react/runtime/__test__/debug/hook.js

@@ -4,10 +4,11 @@
 import { options } from 'preact';
 import { vi } from 'vitest';
 
-import { DIFF, DIFFED, RENDER } from '../../src/renderToOpcodes/constants';
+import { DIFF, DIFF2, DIFFED, RENDER } from '../../src/renderToOpcodes/constants';
 
 export const noop = vi.fn();
 
 options[DIFF] = noop;
+options[DIFF2] = noop;
 options[RENDER] = noop;
 options[DIFFED] = noop;

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

@@ -26,14 +26,12 @@ describe('profile', () => {
   });
 
   test('original options hooks should be called', async () => {
-    vi.stubGlobal('__JS__', true);
-
     render(
       null,
       scratch,
     );
 
-    expect(noop).toBeCalledTimes(3);
+    expect(noop).toBeCalledTimes(4);
   });
 
   test('diff and render should be profiled', async () => {
@@ -59,18 +57,18 @@ describe('profile', () => {
       scratch,
     );
 
-    // render::
-    expect(console.profile).toBeCalledWith(`render::Foo`);
-    expect(console.profile).not.toBeCalledWith(`render::Bar`);
-    expect(console.profile).toBeCalledWith(`render::Baz`);
-    expect(console.profile).not.toBeCalledWith(`render::ClassComponent`);
-    expect(console.profile).toBeCalledWith(`render::Clazz`);
+    // // ReactLynx::render::
+    expect(lynx.performance.profileStart).toBeCalledWith(`ReactLynx::render::Foo`);
+    expect(lynx.performance.profileStart).not.toBeCalledWith(`ReactLynx::render::Bar`);
+    expect(lynx.performance.profileStart).toBeCalledWith(`ReactLynx::render::Baz`);
+    expect(lynx.performance.profileStart).not.toBeCalledWith(`ReactLynx::render::ClassComponent`);
+    expect(lynx.performance.profileStart).toBeCalledWith(`ReactLynx::render::Clazz`);
 
-    // diff::
-    expect(console.profile).toBeCalledWith(`diff::Foo`);
-    expect(console.profile).not.toBeCalledWith(`diff::Bar`);
-    expect(console.profile).toBeCalledWith(`diff::Baz`);
-    expect(console.profile).not.toBeCalledWith(`diff::ClassComponent`);
-    expect(console.profile).toBeCalledWith(`diff::Clazz`);
+    // // ReactLynx::diff::
+    expect(lynx.performance.profileStart).toBeCalledWith(`ReactLynx::diff::Foo`, {});
+    expect(lynx.performance.profileStart).not.toBeCalledWith(`ReactLynx::diff::Bar`);
+    expect(lynx.performance.profileStart).toBeCalledWith(`ReactLynx::diff::Baz`, {});
+    expect(lynx.performance.profileStart).not.toBeCalledWith(`ReactLynx::diff::ClassComponent`);
+    expect(lynx.performance.profileStart).toBeCalledWith(`ReactLynx::diff::Clazz`, {});
   });
 });

packages/react/runtime/__test__/lifecycle/reload.test.jsx

@@ -127,6 +127,9 @@ describe('reload', () => {
         {
           "data": "{"patchList":[{"id":3,"snapshotPatch":[3,-5,0,{"dataX2":"WorldX2"},3,-8,0,"update",3,-6,0,{"attr":{"dataX2":"WorldX2"}}]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "reloadVersion": 0,
           },
         }
@@ -235,6 +238,9 @@ describe('reload', () => {
         {
           "data": "{"patchList":[{"id":4,"snapshotPatch":[3,-8,0,"???"]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "reloadVersion": 0,
           },
         }
@@ -384,6 +390,9 @@ describe('reload', () => {
         {
           "data": "{"patchList":[{"id":8,"snapshotPatch":[3,-16,0,"update"]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "reloadVersion": 2,
           },
         }
@@ -530,6 +539,9 @@ describe('reload', () => {
         {
           "data": "{"patchList":[{"id":11,"snapshotPatch":[3,-5,0,{"dataX2":"WorldX2"},3,-8,0,"update",3,-6,0,{"attr":{"dataX2":"WorldX2"}}]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "reloadVersion": 2,
           },
         }
@@ -642,6 +654,9 @@ describe('reload', () => {
         {
           "data": "{"patchList":[{"id":12,"snapshotPatch":[3,-8,0,"???"]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "reloadVersion": 2,
           },
         }
@@ -795,6 +810,9 @@ describe('reload', () => {
         {
           "data": "{"patchList":[{"id":16,"snapshotPatch":[3,-17,0,"update"]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "reloadVersion": 4,
           },
         }
@@ -980,6 +998,9 @@ describe('reload', () => {
             {
               "data": "{"patchList":[{"id":19,"snapshotPatch":[3,-6,0,"d",3,-7,0,"e",3,-8,0,"f"]}]}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 4,
               },
             },

packages/react/runtime/__test__/lifecycle/updateData.test.jsx

@@ -140,6 +140,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":3,"snapshotPatch":[3,-3,0,"update"]}],"flushOptions":{"triggerDataUpdated":true}}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -277,6 +280,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":6}],"flushOptions":{"triggerDataUpdated":true}}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -287,6 +293,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":7,"snapshotPatch":[3,-6,0,"update"]}]}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -297,6 +306,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":8,"snapshotPatch":[3,-8,0,"update"]}]}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -467,6 +479,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":11}],"flushOptions":{"triggerDataUpdated":true}}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -477,6 +492,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":12,"snapshotPatch":[3,-5,0,"update"]}]}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -487,6 +505,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":13,"snapshotPatch":[3,-7,0,"update"]}]}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },
@@ -628,6 +649,9 @@ describe('triggerDataUpdated', () => {
             {
               "data": "{"patchList":[{"id":16,"snapshotPatch":[3,-3,0,"update"]}],"flushOptions":{"triggerDataUpdated":true}}",
               "patchOptions": {
+                "flowIds": [
+                  666,
+                ],
                 "reloadVersion": 0,
               },
             },

packages/react/runtime/__test__/lynx/timing.test.jsx

@@ -100,6 +100,9 @@ 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": {
+          "flowIds": [
+            666,
+          ],
           "pipelineOptions": {
             "dsl": "reactLynx",
             "needTimestamps": false,
@@ -179,6 +182,9 @@ 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": {
+          "flowIds": [
+            666,
+          ],
           "pipelineOptions": {
             "dsl": "reactLynx",
             "needTimestamps": true,
@@ -368,6 +374,9 @@ 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": {
+          "flowIds": [
+            666,
+          ],
           "pipelineOptions": {
             "dsl": "reactLynx",
             "needTimestamps": true,
@@ -540,6 +549,9 @@ describe('attribute timing api', () => {
         {
           "data": "{"patchList":[{"id":14,"snapshotPatch":[3,-2,1,444]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "pipelineOptions": {
               "dsl": "reactLynx",
               "needTimestamps": false,
@@ -706,6 +718,9 @@ 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": {
+            "flowIds": [
+              666,
+            ],
             "pipelineOptions": {
               "dsl": "reactLynx",
               "needTimestamps": true,
@@ -819,6 +834,9 @@ describe('attribute timing api', () => {
         {
           "data": "{"patchList":[{"id":18,"snapshotPatch":[3,3,0,{"xxx":666,"__lynx_timing_flag":"__lynx_timing_actual_fmp"}]}]}",
           "patchOptions": {
+            "flowIds": [
+              666,
+            ],
             "pipelineOptions": {
               "dsl": "reactLynx",
               "needTimestamps": false,

packages/react/runtime/__test__/utils/globals.js

@@ -1,7 +1,7 @@
 // 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.
-import { vi } from 'vitest';
+import { afterEach, beforeEach, expect, vi } from 'vitest';
 
 import { getJSModule } from './jsModule.ts';
 
@@ -35,6 +35,12 @@ const performance = {
   _bindPipelineIdWithTimingFlag: vi.fn((id, flag) => {
     performance.__functionCallHistory.push(['_bindPipelineIdWithTimingFlag', id, flag]);
   }),
+
+  profileStart: vi.fn(),
+  profileEnd: vi.fn(),
+  profileMark: vi.fn(),
+  profileFlowId: vi.fn(() => 666),
+  isProfileRecording: vi.fn(() => true),
 };
 
 class SelectorQuery {
@@ -133,4 +139,24 @@ function injectGlobals() {
   console.alog = vi.fn();
 }
 
+beforeEach(() => {
+  performance.profileStart.mockClear();
+  performance.profileEnd.mockClear();
+});
+
+afterEach((context) => {
+  const skippedTasks = [
+    // Skip preact/debug tests since it would throw errors and abort the rendering process
+    'preact/debug',
+    'should remove event listener when throw in cleanup',
+  ];
+  if (skippedTasks.some(task => context.task.name.includes(task))) {
+    return;
+  }
+
+  expect(performance.profileStart.mock.calls.length).toBe(
+    performance.profileEnd.mock.calls.length,
+  );
+});
+
 injectGlobals();