feat: add testing library for ReactLynx

.changeset/thirty-dingos-feel.md

@@ -0,0 +1,8 @@
+---
+"@lynx-js/react-lynx-testing-library": patch
+"@lynx-js/lynx-dom-testing-library": patch
+"@lynx-js/lynx-dom-jest-matchers": patch
+"@lynx-js/lynx-dom": patch
+---
+
+Add testing library for ReactLynx

.dprint.jsonc

@@ -51,6 +51,8 @@
     "**/expected/**",
     "**/rspack-expected/**",
     "packages/**/test/**/hotCases/**",
+
+    "packages/testing-library/react-lynx-testing-library/tsconfig.json",
   ],
   "plugins": [
     "https://plugins.dprint.dev/exec-0.5.0.json@8d9972eee71fa1590e04873540421f3eda7674d0f1aae3d7c788615e7b7413d0",

biome.jsonc

@@ -43,6 +43,8 @@
       "packages/web-platform/**",
 
       "packages/third-party/**",
+
+      "packages/testing-library/**",
     ],
     "rules": {
       // We are migrating from ESLint to Biome

eslint.config.js

@@ -74,6 +74,10 @@ export default tseslint.config(
       // TODO: enable eslint for web-platform
       // web-platform
       'packages/web-platform/**',
+
+      // TODO: enable eslint for testing-library
+      // testing-library
+      'packages/testing-library/**',
     ],
   },
   js.configs.recommended,

packages/react/runtime/src/lynx.ts

@@ -2,7 +2,6 @@
 // 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';
 // to make sure preact's hooks to register earlier than ours
 import './hooks/react.js';
 
@@ -15,7 +14,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';
-import { COMPONENT, DIFF, DIFFED, FORCE } from './renderToOpcodes/constants.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') {
@@ -25,55 +24,6 @@ if (__LEPUS__ && typeof globalThis.processEvalResult === 'undefined') {
   };
 }
 
-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;
-  }
-}
-
 if (__LEPUS__) {
   injectCalledByNative();
   injectUpdatePatch();

packages/react/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;
+  }
+}

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

@@ -9,12 +9,12 @@ import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
 import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patchUpdate.js';
 import { reloadBackground } from '../lifecycle/reload.js';
-import { runWithForce } from '../lynx.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/jsImpl.js';
+import { runWithForce } from './runWithForce.js';
 
 function injectTt(): void {
   // @ts-ignore

packages/react/runtime/src/worklet/runWorklet.ts

@@ -0,0 +1,88 @@
+// 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 type { JsFnHandle, Worklet } from '@lynx-js/react/worklet-runtime/bindings';
+import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { onPostWorkletCtx } from './ctx.js';
+import { enableRunOnBackground } from './functionality.js';
+import { lynxWorkletJsImpl } from './jsImpl.js';
+/**
+ * transform args of `runOnJS()`.
+ *
+ * @internal
+ */
+export function transformToWorklet(obj: Function): JsFnHandle {
+  const impl = lynxWorkletJsImpl();
+  const id = impl ? ++impl._workletJsFnLastId : 0;
+  if (typeof obj !== 'function') {
+    // We save the error message in the object, so that we can throw it later when the function is called on the main thread.
+    return {
+      _jsFnId: id,
+      _error: `Argument of runOnBackground should be a function, but got [${typeof obj}] instead`,
+    };
+  }
+  return {
+    _jsFnId: id,
+    _fn: obj,
+  };
+}
+
+/**
+ * `runOnMainThread` allows triggering main thread functions on the main thread asynchronously.
+ * @param fn - The main thread functions to be called.
+ * @returns A function. Calling which with the arguments to be passed to the main thread function to trigger it on the main thread.
+ * @public
+ */
+export function runOnMainThread<Fn extends (...args: any[]) => any>(fn: Fn): (...args: Parameters<Fn>) => void {
+  if (__LEPUS__) {
+    throw new Error('runOnMainThread can only be used on the background thread.');
+  }
+  const impl = lynxWorkletJsImpl();
+  if (!impl) {
+    throw new Error('runOnMainThread requires Lynx sdk version 2.14.');
+  }
+  return (...params: any[]): void => {
+    onPostWorkletCtx(fn as any as Worklet);
+    lynx.getCoreContext!().dispatchEvent({
+      type: WorkletEvents.runWorkletCtx,
+      data: JSON.stringify({
+        worklet: fn,
+        params,
+      }),
+    });
+  };
+}
+
+/**
+ * `runOnBackground` allows triggering js functions on the js context asynchronously.
+ * @param f - The js function to be called.
+ * @returns A function. Calling which with the arguments to be passed to the js function to trigger it on the js context.
+ * @public
+ */
+export function runOnBackground<Fn extends (...args: any[]) => any>(f: Fn): (...args: Parameters<Fn>) => void {
+  if (!enableRunOnBackground()) {
+    throw new Error('runOnBackground requires Lynx sdk version 2.16.');
+  }
+  if (__JS__) {
+    throw new Error('runOnBackground can only be used on the main thread.');
+  }
+  const obj = f as any as JsFnHandle;
+  if (obj._error) {
+    throw new Error(obj._error);
+  }
+  return (...params: any[]): void => {
+    if (lynx.getJSContext) {
+      lynx.getJSContext().dispatchEvent({
+        type: WorkletEvents.runOnBackground,
+        data: JSON.stringify({
+          obj: {
+            _jsFnId: obj._jsFnId,
+            _execId: obj._execId!,
+          },
+          params,
+        }),
+      });
+    }
+  };
+}