@lynx-js/react 0.107.1 → 0.108.1

package/runtime/src/lynx/tt.ts

@@ -1,34 +1,30 @@
 // 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 { render } from 'preact';
+
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
 import {
-  PerformanceTimingKeys,
   PerformanceTimingFlags,
+  PerformanceTimingKeys,
   PipelineOrigins,
   beginPipeline,
   markTiming,
 } from './performance.js';
 import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
+import { runWithForce } from './runWithForce.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
 import { delayedEvents, delayedPublishEvent } from '../lifecycle/event/delayEvents.js';
 import { delayLifecycleEvent, delayedLifecycleEvents } from '../lifecycle/event/delayLifecycleEvents.js';
-import {
-  clearPatchesToCommit,
-  commitPatchUpdate,
-  genCommitTaskId,
-  globalCommitTaskMap,
-  patchesToCommit,
-  type PatchList,
-} from '../lifecycle/patch/commit.js';
+import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
+import type { PatchList } from '../lifecycle/patch/commit.js';
 import { reloadBackground } from '../lifecycle/reload.js';
-import { renderBackground } from '../lifecycle/render.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';
-import { runWithForce } from './runWithForce.js';
+
 export { runWithForce };
 
 function injectTt(): void {
@@ -129,14 +125,11 @@ function onLifecycleEventImpl(type: string, data: any): void {
         console.profile('commitChanges');
       }
       const commitTaskId = genCommitTaskId();
-      patchesToCommit.push(
-        { snapshotPatch, id: commitTaskId },
-      );
       const patchList: PatchList = {
-        patchList: patchesToCommit,
+        patchList: [{ snapshotPatch, id: commitTaskId }],
       };
-      clearPatchesToCommit();
       const obj = commitPatchUpdate(patchList, { isHydration: true });
+
       lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
         updateBackgroundRefs(commitTaskId);
         globalCommitTaskMap.forEach((commitTask, id) => {
@@ -212,7 +205,7 @@ function updateGlobalProps(newData: Record<string, any>): void {
   // This is already done because updateFromRoot will consume all dirty flags marked by
   // the setState, and setState's flush will be a noop. No extra diffs will be needed.
   Promise.resolve().then(() => {
-    runWithForce(() => renderBackground(__root.__jsx, __root as any));
+    runWithForce(() => render(__root.__jsx, __root as any));
   });
   lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged');
 }

package/runtime/src/lynx-api.ts

@@ -1,13 +1,13 @@
 // 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 { render } from 'preact';
 import { createContext, createElement } from 'preact/compat';
 import { useState } from 'preact/hooks';
 import type { Consumer, FC, ReactNode } from 'react';
 
 import { factory, withInitDataInState } from './compat/initData.js';
 import { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
-import { renderBackground } from './lifecycle/render.js';
 import { LifecycleConstant } from './lifecycleConstant.js';
 import { flushDelayedLifecycleEvents } from './lynx/tt.js';
 import { __root } from './root.js';
@@ -43,13 +43,13 @@ export interface Root {
    *   return <view>...</view>
    * }
    *
-   * if (__LEPUS__) {
+   * if (__MAIN_THREAD__) {
    *   root.render(
    *     <DataProvider data={DEFAULT_DATA}>
    *        <App/>
    *     </DataProvider>
    *   );
-   * } else if (__JS__) {
+   * } else if (__BACKGROUND__) {
    *   fetchData().then((data) => {
    *     root.render(
    *       <DataProvider data={data}>
@@ -82,11 +82,11 @@ export interface Root {
  */
 export const root: Root = {
   render: (jsx: ReactNode): void => {
-    if (__LEPUS__) {
+    if (__MAIN_THREAD__) {
       __root.__jsx = jsx;
     } else {
       __root.__jsx = jsx;
-      renderBackground(jsx, __root as any);
+      render(jsx, __root as any);
       if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
         // This is for cases where `root.render()` is called asynchronously,
         // `firstScreen` message might have been reached.
@@ -370,7 +370,7 @@ export interface Lynx {
   registerDataProcessors: (dataProcessorDefinition?: DataProcessorDefinition) => void;
 }
 
-export { runOnMainThread } from './worklet/runOnMainThread.js';
+export { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
 export { runOnBackground } from './worklet/runOnBackground.js';
+export { runOnMainThread } from './worklet/runOnMainThread.js';
 export { MainThreadRef, useMainThreadRef } from './worklet/workletRef.js';
-export { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';

package/runtime/src/lynx.ts

@@ -11,21 +11,21 @@ import { initDelayUnmount } from './lifecycle/delayUnmount.js';
 import { replaceCommitHook, replaceRequestAnimationFrame } from './lifecycle/patch/commit.js';
 import { injectUpdateMainThread } from './lifecycle/patch/updateMainThread.js';
 import { injectCalledByNative } from './lynx/calledByNative.js';
-import { setupLynxEnv } from './lynx/env.js';
+import { setupLynxTestingEnv } 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') {
+if (__MAIN_THREAD__ && typeof globalThis.processEvalResult === 'undefined') {
   // @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
   globalThis.processEvalResult = <T>(result: ((schema: string) => T) | undefined, schema: string) => {
     return result?.(schema);
   };
 }
 
-if (__LEPUS__) {
+if (__MAIN_THREAD__) {
   injectCalledByNative();
   injectUpdateMainThread();
   if (__DEV__) {
@@ -39,8 +39,9 @@ if (__PROFILE__) {
   initProfileHook();
 }
 
-if (__JS__) {
-  options.document = document;
+if (__BACKGROUND__) {
+  // Trick Preact and TypeScript to accept our custom document adapter.
+  options.document = document as any;
   setupBackgroundDocument();
   injectTt();
 
@@ -53,4 +54,4 @@ if (__JS__) {
   }
 }
 
-setupLynxEnv();
+setupLynxTestingEnv();

package/runtime/src/opcodes.ts

@@ -52,7 +52,7 @@ export function ssrHydrateByOpcodes(
           const signMap = gSignMap[listElementUniqueID] = new Map();
           gRecycleMap[listElementUniqueID] = new Map();
           const enqueueFunc = enqueueComponentFactory();
-          const componentAtIndex = componentAtIndexFactory(top.childNodes);
+          const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(top.childNodes);
           for (const child of top.childNodes) {
             if (child.__element_root) {
               const childElementUniqueID = __GetElementUniqueID(child.__element_root);
@@ -64,7 +64,7 @@ export function ssrHydrateByOpcodes(
               );
             }
           }
-          __UpdateListCallbacks(listElement, componentAtIndex, enqueueFunc);
+          __UpdateListCallbacks(listElement, componentAtIndex, enqueueFunc, componentAtIndexes);
         }
 
         stack.pop();

package/runtime/src/renderToOpcodes/index.ts

@@ -2,7 +2,12 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-// modified from preact-render-to-string@6.0.3
+/**
+ * Implements rendering to opcodes.
+ * This module is modified from preact-render-to-string@6.0.3 to generate
+ * opcodes instead of HTML strings for Lynx.
+ */
+
 // @ts-nocheck
 
 import { Fragment, h, options } from 'preact';

package/runtime/src/root.ts

@@ -4,15 +4,19 @@
 import { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
 import { SnapshotInstance } from './snapshot.js';
 
+/**
+ * The internal ReactLynx's root.
+ * {@link @lynx-js/react!Root | root}.
+ */
 let __root: (SnapshotInstance | BackgroundSnapshotInstance) & { __jsx?: React.ReactNode; __opcodes?: any[] };
 
 function setRoot(root: typeof __root): void {
   __root = root;
 }
 
-if (__LEPUS__) {
+if (__MAIN_THREAD__) {
   setRoot(new SnapshotInstance('root'));
-} else if (__JS__) {
+} else if (__BACKGROUND__) {
   setRoot(new BackgroundSnapshotInstance('root'));
 }
 

package/runtime/src/snapshot/ref.ts

@@ -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 type { Worklet, WorkletRef } from '@lynx-js/react/worklet-runtime/bindings';
+import type { Element, Worklet, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 
 import { nextCommitTaskId } from '../lifecycle/patch/commit.js';
 import { SnapshotInstance, backgroundSnapshotInstanceManager } from '../snapshot.js';
@@ -20,7 +20,7 @@ function unref(snapshot: SnapshotInstance, recursive: boolean): void {
 
   snapshot.__worklet_ref_set?.forEach(v => {
     if (v) {
-      workletUnRef(v as Worklet | WorkletRef<unknown>);
+      workletUnRef(v as Worklet | WorkletRefImpl<Element>);
     }
   });
   snapshot.__worklet_ref_set?.clear();
@@ -137,12 +137,12 @@ function markRefToRemove(sign: string, ref: unknown): void {
 }
 
 export {
-  updateRef,
-  takeGlobalRefPatchMap,
-  updateBackgroundRefs,
-  unref,
-  transformRef,
   globalRefsToRemove,
   globalRefsToSet,
   markRefToRemove,
+  takeGlobalRefPatchMap,
+  transformRef,
+  unref,
+  updateBackgroundRefs,
+  updateRef,
 };

package/runtime/src/snapshot/spread.ts

@@ -1,16 +1,26 @@
 // 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.
+
+/**
+ * Handles JSX spread operator in the snapshot system.
+ *
+ * Spread operators in JSX (e.g., <div {...props}>) are transformed into
+ * optimized attribute updates at compile time, avoiding runtime object spreads.
+ */
+
+import type { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { BackgroundSnapshotInstance } from '../backgroundSnapshot.js';
+import { ListUpdateInfoRecording, __pendingListUpdates } from '../list.js';
 import { SnapshotInstance } from '../snapshot.js';
+import { isDirectOrDeepEqual, isEmptyObject, pick } from '../utils.js';
 import { updateEvent } from './event.js';
-import { BackgroundSnapshotInstance } from '../backgroundSnapshot.js';
+import { updateGesture } from './gesture.js';
+import { platformInfoAttributes, updateListItemPlatformInfo } from './platformInfo.js';
 import { transformRef, updateRef } from './ref.js';
 import { updateWorkletEvent } from './workletEvent.js';
 import { updateWorkletRef } from './workletRef.js';
-import { updateGesture } from './gesture.js';
-import { platformInfoAttributes, updateListItemPlatformInfo } from './platformInfo.js';
-import { isDirectOrDeepEqual, isEmptyObject, pick } from '../utils.js';
-import { __pendingListUpdates, ListUpdateInfoRecording } from '../list.js';
 
 const eventRegExp = /^(([A-Za-z-]*):)?(bind|catch|capture-bind|capture-catch|global-bind)([A-Za-z]+)$/;
 const eventTypeMap: Record<string, string> = {
@@ -29,7 +39,7 @@ const noFlattenAttributes = /* @__PURE__ */ new Set<string>([
 ]);
 
 function updateSpread(snapshot: SnapshotInstance, index: number, oldValue: any, elementIndex: number): void {
-  oldValue ||= {};
+  oldValue ??= {};
   let newValue: Record<string, any> = snapshot.__values![index]; // compiler guarantee this must be an object;
 
   // @ts-ignore
@@ -124,7 +134,7 @@ function updateSpread(snapshot: SnapshotInstance, index: number, oldValue: any,
           __elements: snapshot.__elements,
         } as SnapshotInstance;
         updateGesture(fakeSnapshot, index, oldValue[key], elementIndex, workletType);
-      } else if ((match = key.match(eventRegExp))) {
+      } else if ((match = eventRegExp.exec(key))) {
         const workletType = match[2];
         const eventType = eventTypeMap[match[3]!]!;
         const eventName = match[4]!;
@@ -142,7 +152,15 @@ function updateSpread(snapshot: SnapshotInstance, index: number, oldValue: any,
           __elements: snapshot.__elements,
         } as SnapshotInstance;
         if (workletType) {
-          updateWorkletEvent(fakeSnapshot, index, oldValue[key], elementIndex, workletType, eventType, eventName);
+          updateWorkletEvent(
+            fakeSnapshot,
+            index,
+            oldValue[key] as Worklet,
+            elementIndex,
+            workletType,
+            eventType,
+            eventName,
+          );
         } else {
           updateEvent(fakeSnapshot, index, oldValue[key], elementIndex, eventType, eventName, key);
         }
@@ -212,7 +230,7 @@ function updateSpread(snapshot: SnapshotInstance, index: number, oldValue: any,
           __elements: snapshot.__elements,
         } as SnapshotInstance;
         updateGesture(fakeSnapshot, index, oldValue[key], elementIndex, workletType);
-      } else if ((match = key.match(eventRegExp))) {
+      } else if ((match = eventRegExp.exec(key))) {
         const workletType = match[2];
         const eventType = eventTypeMap[match[3]!]!;
         const eventName = match[4]!;
@@ -284,4 +302,4 @@ function transformSpread(
   return result;
 }
 
-export { updateSpread, transformSpread };
+export { transformSpread, updateSpread };

package/runtime/src/snapshot/workletEvent.ts

@@ -2,13 +2,14 @@
 // 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 { onWorkletCtxUpdate } from '@lynx-js/react/worklet-runtime/bindings';
+import type { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
 
 import { SnapshotInstance } from '../snapshot.js';
 
 function updateWorkletEvent(
   snapshot: SnapshotInstance,
   expIndex: number,
-  _oldValue: any,
+  _oldValue: Worklet,
   elementIndex: number,
   workletType: string,
   eventType: string,
@@ -17,7 +18,7 @@ function updateWorkletEvent(
   if (!snapshot.__elements) {
     return;
   }
-  const value = snapshot.__values![expIndex] || {};
+  const value = (snapshot.__values![expIndex] as Worklet || undefined) ?? {};
   value._workletType = workletType;
 
   if (workletType === 'main-thread') {

package/runtime/src/snapshot/workletRef.ts

@@ -1,23 +1,19 @@
 // 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 Worklet,
-  type WorkletRef,
-  runWorkletCtx,
-  updateWorkletRef as update,
-} from '@lynx-js/react/worklet-runtime/bindings';
+import { runWorkletCtx, updateWorkletRef as update } from '@lynx-js/react/worklet-runtime/bindings';
+import type { Element, Worklet, WorkletRefId, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { SnapshotInstance } from '../snapshot.js';
+import type { SnapshotInstance } from '../snapshot.js';
 
-function workletUnRef(value: Worklet | WorkletRef<unknown>): void {
-  if ('_wvid' in value) {
-    update(value as any, null);
+function workletUnRef(value: Worklet | WorkletRefImpl<Element>): void {
+  if ('_wvid' in value && (value._wvid as WorkletRefId) > 0) {
+    update(value as WorkletRefImpl<Element>, null);
   } else if ('_wkltId' in value) {
     if (typeof value._unmount == 'function') {
-      value._unmount();
+      (value._unmount as () => void)();
     } else {
-      runWorkletCtx(value as any, [null]);
+      runWorkletCtx(value, [null]);
     }
   }
 }
@@ -25,7 +21,7 @@ function workletUnRef(value: Worklet | WorkletRef<unknown>): void {
 function updateWorkletRef(
   snapshot: SnapshotInstance,
   expIndex: number,
-  oldValue: any,
+  oldValue: WorkletRefImpl<Element> | Worklet | undefined,
   elementIndex: number,
   _workletType: string,
 ): void {
@@ -38,15 +34,18 @@ function updateWorkletRef(
     snapshot.__worklet_ref_set?.delete(oldValue);
   }
 
-  const value = snapshot.__values![expIndex];
+  const value = snapshot.__values![expIndex] as (WorkletRefImpl<Element> | Worklet | undefined);
   if (value === null || value === undefined) {
     // do nothing
   } else if (value._wvid) {
-    update(value as any, snapshot.__elements[elementIndex]!);
-  } else if (value._wkltId) {
-    // @ts-ignore
-    value._unmount = runWorkletCtx(value as any, [{ elementRefptr: snapshot.__elements[elementIndex]! }]);
-  } else if (value._type === '__LEPUS__' || value._lepusWorkletHash) {
+    if ((value._wvid as WorkletRefId) > 0) {
+      update(value as WorkletRefImpl<Element>, snapshot.__elements[elementIndex]!);
+    }
+  } else if ((value as Worklet)._wkltId) {
+    (value as Worklet)._unmount = runWorkletCtx(value as Worklet, [{
+      elementRefptr: (snapshot.__elements[elementIndex]!) as any,
+    }]) as () => void;
+  } else if (value._type === '__LEPUS__' || (value as Worklet)._lepusWorkletHash) {
     // During the initial render, we will not update the WorkletRef because the background thread is not ready yet.
   } else {
     throw new Error('MainThreadRef: main-thread:ref must be of type MainThreadRef or main-thread function.');

package/runtime/src/snapshot.ts

@@ -1,26 +1,44 @@
 // 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.
+
+/**
+ * Core snapshot system that implements a compiler-hinted virtual DOM.
+ *
+ * Key components:
+ * 1. {@link Snapshot}: Template definition generated at compile time
+ * 2. {@link SnapshotInstance}: Runtime instance in the main thread
+ * 3. {@link BackgroundSnapshotInstance}: Runtime instance in the background thread
+ *
+ * The system uses static analysis to identify dynamic parts and generate
+ * optimized update instructions, avoiding full virtual DOM diffing.
+ */
+
 import type { Worklet, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 
 import type { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
+import { SnapshotOperation, __globalSnapshotPatch } from './lifecycle/patch/snapshotPatch.js';
 import { ListUpdateInfoRecording, __pendingListUpdates, snapshotDestroyList } from './list.js';
 import { unref } from './snapshot/ref.js';
-import { SnapshotOperation, __globalSnapshotPatch } from './lifecycle/patch/snapshotPatch.js';
 import { isDirectOrDeepEqual } from './utils.js';
 
+/**
+ * Types of dynamic parts that can be updated in a snapshot
+ * These are determined at compile time through static analysis
+ */
 export const enum DynamicPartType {
-  Attr = 0,
-  Spread,
-  Slot,
-  // Component,
-  Children,
-  ListChildren,
-
-  // Used by compat layer
-  MultiChildren,
+  Attr = 0, // Regular attribute updates
+  Spread, // Spread operator in JSX
+  Slot, // Slot for component children
+  Children, // Regular children updates
+  ListChildren, // List/array children updates
+  MultiChildren, // Multiple children updates (compat layer)
 }
 
+/**
+ * A snapshot definition that contains all the information needed to create and update elements
+ * This is generated at compile time through static analysis of the JSX
+ */
 interface Snapshot {
   create: null | ((ctx: SnapshotInstance) => FiberElement[]);
   update: null | ((ctx: SnapshotInstance, index: number, oldValue: any) => void)[];
@@ -234,6 +252,13 @@ export interface SerializedSnapshotInstance {
 const DEFAULT_ENTRY_NAME = '__Card__';
 const DEFAULT_CSS_ID = 0;
 
+/**
+ * The runtime instance of a {@link Snapshot} on the main thread that manages
+ * the actual elements and handles updates to dynamic parts.
+ *
+ * This class is designed to be compatible with Preact's {@link ContainerNode}
+ * interface for Preact's renderer to operate upon.
+ */
 export class SnapshotInstance {
   __id: number;
   __snapshot_def: Snapshot;

package/runtime/src/worklet/workletRef.ts

@@ -9,13 +9,19 @@ import { WorkletEvents } from '@lynx-js/react/worklet-runtime/bindings';
 import { addWorkletRefInitValue } from './workletRefPool.js';
 import { useMemo } from '../hooks/react.js';
 
-let lastId = 0;
+// Split into two variables for testing purposes
+let lastIdBG = 0;
+let lastIdMT = 0;
+
+export function clearWorkletRefLastIdForTesting(): void {
+  lastIdBG = lastIdMT = 0;
+}
 
 abstract class WorkletRef<T> {
   /**
    * @internal
    */
-  protected _id: number;
+  protected _wvid: number;
   /**
    * @internal
    */
@@ -33,16 +39,13 @@ abstract class WorkletRef<T> {
    * @internal
    */
   protected constructor(initValue: T, type: string) {
+    this._initValue = initValue;
+    this._type = type;
     if (__JS__) {
-      this._id = ++lastId;
-      this._initValue = initValue;
-      this._type = type;
-      addWorkletRefInitValue(this._id, initValue);
+      this._wvid = ++lastIdBG;
+      addWorkletRefInitValue(this._wvid, initValue);
     } else {
-      // Out of the js thread, the `WorkletRef` class here is just a placeholder and should not be accessed directly.
-      // The real WorkletRef will be generated by the worklet runtime.
-      this._id = -1;
-      this._type = '__LEPUS__';
+      this._wvid = --lastIdMT;
     }
   }
 
@@ -72,7 +75,7 @@ abstract class WorkletRef<T> {
    */
   toJSON(): { _wvid: WorkletRefImpl<T>['_wvid'] } {
     return {
-      _wvid: this._id,
+      _wvid: this._wvid,
     };
   }
 }
@@ -88,7 +91,7 @@ export class MainThreadRef<T> extends WorkletRef<T> {
   constructor(initValue: T) {
     super(initValue, 'main-thread');
     if (__JS__) {
-      const id = this._id;
+      const id = this._wvid;
       this._lifecycleObserver = lynx.getNativeApp().createJSObjectDestructionObserver?.(() => {
         lynx.getCoreContext?.().dispatchEvent({
           type: WorkletEvents.releaseWorkletRef,

package/testing-library/README.md

@@ -58,7 +58,7 @@ test('renders options.wrapper around node', async () => {
 });
 ```
 
-💡 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
+💡 Since our testing environment (`@lynx-js/testing-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