@lynx-js/react 0.106.5 → 0.107.1

package/runtime/src/lynx/component.ts

@@ -109,7 +109,7 @@ if (__JS__) {
     const timingFlag = this[NEXT_STATE][PerfSpecificKey];
     if (timingFlag) {
       globalFlushOptions.__lynx_timing_flag = timingFlag;
-      markTimingLegacy(PerformanceTimingKeys.update_set_state_trigger, timingFlag);
+      markTimingLegacy(PerformanceTimingKeys.updateSetStateTrigger, timingFlag);
       this[NEXT_STATE][PerfSpecificKey] = '';
     }
   };

package/runtime/src/lynx/performance.ts

@@ -6,24 +6,38 @@ import type { VNode } from 'preact';
 
 import { DIFF } from '../renderToOpcodes/constants.js';
 import { __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
+import { isSdkVersionGt } from '../utils.js';
 
 enum PerformanceTimingKeys {
-  update_set_state_trigger,
-  update_diff_vdom_start,
-  update_diff_vdom_end,
-  // update_set_state_trigger, update_diff_vdom_start and update_diff_vdom_end is deprecated
-  diff_vdom_start,
-  diff_vdom_end,
-  pack_changes_start,
-  pack_changes_end,
-  parse_changes_start,
-  parse_changes_end,
-  patch_changes_start,
-  patch_changes_end,
-  hydrate_parse_snapshot_start,
-  hydrate_parse_snapshot_end,
+  updateSetStateTrigger,
+  updateDiffVdomStart,
+  updateDiffVdomEnd,
+  // updateSetStateTrigger, updateDiffVdomStart and updateDiffVdomEnd is deprecated
+  diffVdomStart,
+  diffVdomEnd,
+  packChangesStart,
+  packChangesEnd,
+  parseChangesStart,
+  parseChangesEnd,
+  patchChangesStart,
+  patchChangesEnd,
+  hydrateParseSnapshotStart,
+  hydrateParseSnapshotEnd,
+  mtsRenderStart,
+  mtsRenderEnd,
 }
 
+const PerformanceTimingFlags = {
+  reactLynxHydrate: 'react_lynx_hydrate',
+} as const;
+
+const PipelineOrigins = {
+  reactLynxHydrate: 'reactLynxHydrate',
+  updateTriggeredByBts: 'updateTriggeredByBts',
+} as const;
+
+type PipelineOrigin = typeof PipelineOrigins[keyof typeof PipelineOrigins];
+
 /**
  * @deprecated used by old timing api(setState timing flag)
  */
@@ -39,13 +53,13 @@ let globalPipelineOptions: PipelineOptions | undefined;
  */
 function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): void {
   switch (key) {
-    case PerformanceTimingKeys.update_set_state_trigger: {
+    case PerformanceTimingKeys.updateSetStateTrigger: {
       shouldMarkDiffVdomStart = true;
       shouldMarkDiffVdomEnd = true;
       timingFlag = timingFlag_;
       break;
     }
-    case PerformanceTimingKeys.update_diff_vdom_start: {
+    case PerformanceTimingKeys.updateDiffVdomStart: {
       /* v8 ignore start */
       if (!shouldMarkDiffVdomStart) {
         return;
@@ -54,7 +68,7 @@ function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): voi
       shouldMarkDiffVdomStart = false;
       break;
     }
-    case PerformanceTimingKeys.update_diff_vdom_end: {
+    case PerformanceTimingKeys.updateDiffVdomEnd: {
       if (!shouldMarkDiffVdomEnd) {
         return;
       }
@@ -65,11 +79,26 @@ function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): voi
   lynx.getNativeApp().markTiming?.(timingFlag!, PerformanceTimingKeys[key]);
 }
 
-function beginPipeline(needTimestamps: boolean, timingFlag?: string): void {
+function beginPipeline(needTimestamps: boolean, pipelineOrigin: PipelineOrigin, timingFlag?: string): void {
   globalPipelineOptions = lynx.performance?._generatePipelineOptions?.();
   if (globalPipelineOptions) {
     globalPipelineOptions.needTimestamps = needTimestamps;
-    lynx.performance?._onPipelineStart?.(globalPipelineOptions.pipelineID);
+    globalPipelineOptions.pipelineOrigin = pipelineOrigin;
+    globalPipelineOptions.dsl = 'reactLynx';
+    switch (pipelineOrigin) {
+      case PipelineOrigins.reactLynxHydrate:
+        globalPipelineOptions.stage = 'hydrate';
+        break;
+      case PipelineOrigins.updateTriggeredByBts:
+        globalPipelineOptions.stage = 'update';
+        break;
+    }
+
+    if (isSdkVersionGt(3, 0)) {
+      lynx.performance?._onPipelineStart?.(globalPipelineOptions.pipelineID, globalPipelineOptions);
+    } else {
+      lynx.performance?._onPipelineStart?.(globalPipelineOptions.pipelineID);
+    }
     if (timingFlag) {
       lynx.performance?._bindPipelineIdWithTimingFlag?.(globalPipelineOptions.pipelineID, timingFlag);
     }
@@ -92,11 +121,11 @@ function initTimingAPI(): void {
     // check `__globalSnapshotPatch` to make sure this only runs after hydrate
     if (__JS__ && __globalSnapshotPatch) {
       if (!globalPipelineOptions) {
-        beginPipeline(false);
-        markTiming(PerformanceTimingKeys.diff_vdom_start, true);
+        beginPipeline(false, PipelineOrigins.updateTriggeredByBts);
+        markTiming(PerformanceTimingKeys.diffVdomStart, true);
       }
       if (shouldMarkDiffVdomStart) {
-        markTimingLegacy(PerformanceTimingKeys.update_diff_vdom_start);
+        markTimingLegacy(PerformanceTimingKeys.updateDiffVdomStart);
       }
     }
     oldDiff?.(vnode);
@@ -108,6 +137,8 @@ function initTimingAPI(): void {
  */
 export {
   PerformanceTimingKeys,
+  PerformanceTimingFlags,
+  PipelineOrigins,
   PerfSpecificKey,
   markTimingLegacy,
   initTimingAPI,

package/runtime/src/lynx/runWithForce.ts

@@ -0,0 +1,52 @@
+import { options } from 'preact';
+import type { VNode } from 'preact';
+import { COMPONENT, DIFF, DIFFED, FORCE } from '../renderToOpcodes/constants.js';
+
+export function runWithForce(cb: () => void): void {
+  // save vnode and its `_component` in WeakMap
+  const m = new WeakMap<VNode, any>();
+
+  const oldDiff = options[DIFF];
+
+  options[DIFF] = (vnode: VNode) => {
+    if (oldDiff) {
+      oldDiff(vnode);
+    }
+
+    // when `options[DIFF]` is called, a newVnode is passed in
+    // so its `vnode[COMPONENT]` should be null,
+    // but it will be set later
+    Object.defineProperty(vnode, COMPONENT, {
+      configurable: true,
+      set(c) {
+        m.set(vnode, c);
+        if (c) {
+          c[FORCE] = true;
+        }
+      },
+      get() {
+        return m.get(vnode);
+      },
+    });
+  };
+
+  const oldDiffed = options[DIFFED];
+
+  options[DIFFED] = (vnode: VNode) => {
+    if (oldDiffed) {
+      oldDiffed(vnode);
+    }
+
+    // delete is a reverse operation of previous `Object.defineProperty`
+    delete vnode[COMPONENT];
+    // restore
+    vnode[COMPONENT] = m.get(vnode);
+  };
+
+  try {
+    cb();
+  } finally {
+    options[DIFF] = oldDiff as (vnode: VNode) => void;
+    options[DIFFED] = oldDiffed as (vnode: VNode) => void;
+  }
+}

package/runtime/src/lynx/tt.ts

@@ -1,72 +1,35 @@
 // 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 { options } from 'preact';
-import type { VNode } from 'preact';
-
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
-import { PerformanceTimingKeys, beginPipeline, markTiming } from './performance.js';
+import {
+  PerformanceTimingKeys,
+  PerformanceTimingFlags,
+  PipelineOrigins,
+  beginPipeline,
+  markTiming,
+} from './performance.js';
 import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
 import { delayedEvents, delayedPublishEvent } from '../lifecycle/event/delayEvents.js';
 import { delayLifecycleEvent, delayedLifecycleEvents } from '../lifecycle/event/delayLifecycleEvents.js';
-import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
+import {
+  clearPatchesToCommit,
+  commitPatchUpdate,
+  genCommitTaskId,
+  globalCommitTaskMap,
+  patchesToCommit,
+  type PatchList,
+} from '../lifecycle/patch/commit.js';
 import { reloadBackground } from '../lifecycle/reload.js';
 import { renderBackground } from '../lifecycle/render.js';
-import { CHILDREN, COMPONENT, DIFF, DIFFED, FORCE } from '../renderToOpcodes/constants.js';
+import { CHILDREN } from '../renderToOpcodes/constants.js';
 import { __root } from '../root.js';
 import { globalRefsToSet, updateBackgroundRefs } from '../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../snapshot.js';
 import { destroyWorklet } from '../worklet/destroy.js';
-
-export function runWithForce(cb: () => void): void {
-  // save vnode and its `_component` in WeakMap
-  const m = new WeakMap<VNode, any>();
-
-  const oldDiff = options[DIFF];
-
-  options[DIFF] = (vnode: VNode) => {
-    if (oldDiff) {
-      oldDiff(vnode);
-    }
-
-    // when `options[DIFF]` is called, a newVnode is passed in
-    // so its `vnode[COMPONENT]` should be null,
-    // but it will be set later
-    Object.defineProperty(vnode, COMPONENT, {
-      configurable: true,
-      set(c) {
-        m.set(vnode, c);
-        if (c) {
-          c[FORCE] = true;
-        }
-      },
-      get() {
-        return m.get(vnode);
-      },
-    });
-  };
-
-  const oldDiffed = options[DIFFED];
-
-  options[DIFFED] = (vnode: VNode) => {
-    if (oldDiffed) {
-      oldDiffed(vnode);
-    }
-
-    // delete is a reverse operation of previous `Object.defineProperty`
-    delete vnode[COMPONENT];
-    // restore
-    vnode[COMPONENT] = m.get(vnode);
-  };
-
-  try {
-    cb();
-  } finally {
-    options[DIFF] = oldDiff as (vnode: VNode) => void;
-    options[DIFFED] = oldDiffed as (vnode: VNode) => void;
-  }
-}
+import { runWithForce } from './runWithForce.js';
+export { runWithForce };
 
 function injectTt(): void {
   // @ts-ignore
@@ -100,7 +63,7 @@ function onLifecycleEvent([type, data]: [string, any]) {
   }
 
   try {
-    void onLifecycleEventImpl(type, data);
+    onLifecycleEventImpl(type, data);
   } catch (e) {
     lynx.reportError(e as Error);
   }
@@ -110,18 +73,18 @@ function onLifecycleEvent([type, data]: [string, any]) {
   }
 }
 
-async function onLifecycleEventImpl(type: string, data: any): Promise<void> {
+function onLifecycleEventImpl(type: string, data: any): void {
   switch (type) {
     case LifecycleConstant.firstScreen: {
       const { root: lepusSide, refPatch, jsReadyEventIdSwap } = data;
       if (__PROFILE__) {
         console.profile('hydrate');
       }
-      beginPipeline(true, 'react_lynx_hydrate');
-      markTiming(PerformanceTimingKeys.hydrate_parse_snapshot_start);
+      beginPipeline(true, PipelineOrigins.reactLynxHydrate, PerformanceTimingFlags.reactLynxHydrate);
+      markTiming(PerformanceTimingKeys.hydrateParseSnapshotStart);
       const before = JSON.parse(lepusSide);
-      markTiming(PerformanceTimingKeys.hydrate_parse_snapshot_end);
-      markTiming(PerformanceTimingKeys.diff_vdom_start);
+      markTiming(PerformanceTimingKeys.hydrateParseSnapshotEnd);
+      markTiming(PerformanceTimingKeys.diffVdomStart);
       const snapshotPatch = hydrate(
         before,
         __root as BackgroundSnapshotInstance,
@@ -129,7 +92,7 @@ async function onLifecycleEventImpl(type: string, data: any): Promise<void> {
       if (__PROFILE__) {
         console.profileEnd();
       }
-      markTiming(PerformanceTimingKeys.diff_vdom_end);
+      markTiming(PerformanceTimingKeys.diffVdomEnd);
 
       // TODO: It seems `delayedEvents` and `delayedLifecycleEvents` should be merged into one array to ensure the proper order of events.
       flushDelayedLifecycleEvents();
@@ -166,14 +129,23 @@ async function onLifecycleEventImpl(type: string, data: any): Promise<void> {
         console.profile('commitChanges');
       }
       const commitTaskId = genCommitTaskId();
-      await commitPatchUpdate({ patchList: [{ snapshotPatch, id: commitTaskId }] }, { isHydration: true });
-      updateBackgroundRefs(commitTaskId);
-      globalCommitTaskMap.forEach((commitTask, id) => {
-        if (id > commitTaskId) {
-          return;
-        }
-        commitTask();
-        globalCommitTaskMap.delete(id);
+      patchesToCommit.push(
+        { snapshotPatch, id: commitTaskId },
+      );
+      const patchList: PatchList = {
+        patchList: patchesToCommit,
+      };
+      clearPatchesToCommit();
+      const obj = commitPatchUpdate(patchList, { isHydration: true });
+      lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
+        updateBackgroundRefs(commitTaskId);
+        globalCommitTaskMap.forEach((commitTask, id) => {
+          if (id > commitTaskId) {
+            return;
+          }
+          commitTask();
+          globalCommitTaskMap.delete(id);
+        });
       });
       break;
     }

package/runtime/src/lynx.ts

@@ -15,6 +15,7 @@ import { setupLynxEnv } from './lynx/env.js';
 import { injectLepusMethods } from './lynx/injectLepusMethods.js';
 import { initTimingAPI } from './lynx/performance.js';
 import { injectTt } from './lynx/tt.js';
+export { runWithForce } from './lynx/runWithForce.js';
 
 // @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
 if (__LEPUS__ && typeof globalThis.processEvalResult === 'undefined') {

package/testing-library/README.md

@@ -0,0 +1,70 @@
+# @lynx-js/react/testing-library
+
+ReactLynx Testing Library is a simple and complete ReactLynx unit testing library that encourages good testing practices.
+
+> Inspired completely by [react-testing-library](https://github.com/testing-library/react-testing-library)
+
+Similar to [react-testing-library](https://github.com/testing-library/react-testing-library), this library is designed to test your ReactLynx components in the same way you would test React components using react-testing-library.
+
+## Setup
+
+Setup vitest:
+
+```js
+// vitest.config.js
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
+
+const defaultConfig = createVitestConfig();
+const config = defineConfig({
+  test: {
+    // ...
+  },
+});
+
+export default mergeConfig(defaultConfig, config);
+```
+
+Then you can start writing tests and run them with vitest!
+
+## Usage
+
+```js
+import '@testing-library/jest-dom';
+import { test, expect } from 'vitest';
+import { render } from '@lynx-js/react/testing-library';
+
+test('renders options.wrapper around node', async () => {
+  const WrapperComponent = ({ children }) => (
+    <view data-testid='wrapper'>{children}</view>
+  );
+  const Comp = () => {
+    return <view data-testid='inner' style='background-color: yellow;' />;
+  };
+  const { container, getByTestId } = render(<Comp />, {
+    wrapper: WrapperComponent,
+  });
+  expect(getByTestId('wrapper')).toBeInTheDocument();
+  expect(container.firstChild).toMatchInlineSnapshot(`
+    <view
+      data-testid="wrapper"
+    >
+      <view
+        data-testid="inner"
+        style="background-color: yellow;"
+      />
+    </view>
+  `);
+});
+```
+
+💡 Since our testing environment (`@lynx-js/test-environment`) is based on jsdom, You may also be interested in installing `@testing-library/jest-dom` so you can use
+[the custom jest matchers](https://github.com/testing-library/jest-dom).
+
+## Examples
+
+See our [examples](https://github.com/lynx-family/lynx-stack/tree/main/packages/react/testing-library/src/__tests__) for more usage.
+
+## Credits
+
+- [Testing Library](https://testing-library.com/) for the testing utilities and good practices for React testing.