@lynx-js/react 0.110.1 → 0.111.1

package/runtime/src/lynx/tt.ts

@@ -5,13 +5,7 @@ import { render } from 'preact';
 
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
 import type { FirstScreenData } from '../lifecycleConstant.js';
-import {
-  PerformanceTimingFlags,
-  PerformanceTimingKeys,
-  PipelineOrigins,
-  beginPipeline,
-  markTiming,
-} from './performance.js';
+import { PerformanceTimingFlags, PipelineOrigins, beginPipeline, markTiming } from './performance.js';
 import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
 import { runWithForce } from './runWithForce.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
@@ -80,10 +74,10 @@ function onLifecycleEventImpl(type: LifecycleConstant, data: unknown): void {
         console.profile('hydrate');
       }
       beginPipeline(true, PipelineOrigins.reactLynxHydrate, PerformanceTimingFlags.reactLynxHydrate);
-      markTiming(PerformanceTimingKeys.hydrateParseSnapshotStart);
+      markTiming('hydrateParseSnapshotStart');
       const before = JSON.parse(lepusSide) as SerializedSnapshotInstance;
-      markTiming(PerformanceTimingKeys.hydrateParseSnapshotEnd);
-      markTiming(PerformanceTimingKeys.diffVdomStart);
+      markTiming('hydrateParseSnapshotEnd');
+      markTiming('diffVdomStart');
       const snapshotPatch = hydrate(
         before,
         __root as BackgroundSnapshotInstance,
@@ -91,7 +85,7 @@ function onLifecycleEventImpl(type: LifecycleConstant, data: unknown): void {
       if (__PROFILE__) {
         console.profileEnd();
       }
-      markTiming(PerformanceTimingKeys.diffVdomEnd);
+      markTiming('diffVdomEnd');
 
       // TODO: It seems `delayedEvents` and `delayedLifecycleEvents` should be merged into one array to ensure the proper order of events.
       flushDelayedLifecycleEvents();
@@ -141,6 +135,11 @@ function onLifecycleEventImpl(type: LifecycleConstant, data: unknown): void {
       lynx.getJSModule('GlobalEventEmitter').trigger(eventName, params);
       break;
     }
+    case LifecycleConstant.publishEvent: {
+      const { handlerName, data: d } = data as { handlerName: string; data: unknown };
+      lynxCoreInject.tt.publishEvent(handlerName, d);
+      break;
+    }
   }
 }
 

package/runtime/src/lynx-api.ts

@@ -218,6 +218,82 @@ export interface InitData {}
 
 export { withInitDataInState };
 
+/**
+ * The data processors that registered with {@link Lynx.registerDataProcessors}.
+ *
+ * @example
+ *
+ * Extending `dataProcessors` interface
+ *
+ * ```ts
+ * import type { DataProcessors as WellKnownDataProcessors } from '@lynx-js/react';
+ *
+ * declare module '@lynx-js/react' {
+ *   interface DataProcessors extends WellKnownDataProcessors {
+ *     foo(bar: string): number;
+ *   }
+ * }
+ * ```
+ *
+ * Then you can use `lynx.registerDataProcessors` with types.
+ *
+ * ```js
+ * lynx.registerDataProcessors({
+ *   dataProcessors: {
+ *     foo(bar) {
+ *       return 1;
+ *     }
+ *   }
+ * })
+ * ```
+ *
+ * @public
+ */
+export interface DataProcessors {
+  /**
+   * Optional processor to override screen metrics used by the app
+   *
+   * @param metrics - The physical screen dimensions in pixels
+   *
+   * @returns New screen dimensions to be used by the app
+   *
+   * @example
+   *
+   * ```ts
+   * lynx.registerDataProcessors({
+   *   dataProcessors: {
+   *     getScreenMetricsOverride: (metrics) => {
+   *       // Force a specific aspect ratio
+   *       return {
+   *         width: metrics.width,
+   *         height: metrics.width * (16/9)
+   *       };
+   *     }
+   *   }
+   * });
+   * ```
+   */
+  getScreenMetricsOverride?(metrics: {
+    /**
+     * The physical pixel width of the screen
+     */
+    width: number;
+    /**
+     * The physical pixel height of the screen
+     */
+    height: number;
+  }): { width: number; height: number };
+
+  /**
+   * Custom unknown data processors.
+   *
+   * @remarks
+   *
+   * You may extends the `DataProcessors` interface for better TypeScript types. See {@link DataProcessors}.
+   */
+  [processorName: string]: (...args: any[]) => any;
+}
+
 /**
  * Definition of DataProcessor(s)
  * @public
@@ -238,7 +314,7 @@ export interface DataProcessorDefinition {
    *
    * @public
    */
-  dataProcessors?: Record<string, ((rawInitData: InitDataRaw) => InitData)>;
+  dataProcessors?: DataProcessors;
 }
 
 /**

package/runtime/src/snapshot.ts

@@ -165,10 +165,17 @@ export const backgroundSnapshotInstanceManager: {
       return null;
     }
     const spreadKey = res[2];
-    if (spreadKey) {
-      return (ctx.__values![expIndex] as { [spreadKey]: unknown })[spreadKey];
+    if (res[1] === '__extraProps') {
+      if (spreadKey) {
+        return ctx.__extraProps![spreadKey];
+      }
+      throw new Error('unreachable');
     } else {
-      return ctx.__values![expIndex];
+      if (spreadKey) {
+        return (ctx.__values![expIndex] as { [spreadKey]: unknown })[spreadKey];
+      } else {
+        return ctx.__values![expIndex];
+      }
     }
   },
 };
@@ -241,6 +248,7 @@ export interface SerializedSnapshotInstance {
   id: number;
   type: string;
   values?: any[] | undefined;
+  extraProps?: Record<string, unknown> | undefined;
   children?: SerializedSnapshotInstance[] | undefined;
 }
 
@@ -263,6 +271,7 @@ export class SnapshotInstance {
   __current_slot_index = 0;
   __worklet_ref_set?: Set<WorkletRefImpl<any> | Worklet>;
   __listItemPlatformInfo?: PlatformInfo;
+  __extraProps?: Record<string, unknown> | undefined;
 
   constructor(public type: string, id?: number) {
     this.__snapshot_def = snapshotManager.values.get(type)!;
@@ -596,9 +605,14 @@ export class SnapshotInstance {
       return;
     }
 
-    const index = typeof key === 'string' ? Number(key.slice(2)) : key;
+    if (typeof key === 'string') {
+      // for more flexible usage, we allow setting non-indexed attributes
+      (this.__extraProps ??= {})[key] = value;
+      return;
+    }
+
     this.__values ??= [];
-    this.callUpdateIfNotDirectOrDeepEqual(index, this.__values[index], this.__values[index] = value);
+    this.callUpdateIfNotDirectOrDeepEqual(key, this.__values[key], this.__values[key] = value);
   }
 
   toJSON(): Omit<SerializedSnapshotInstance, 'children'> & { children: SnapshotInstance[] | undefined } {
@@ -606,6 +620,7 @@ export class SnapshotInstance {
       id: this.__id,
       type: this.type,
       values: this.__values,
+      extraProps: this.__extraProps,
       children: this.__firstChild ? this.childNodes : undefined,
     };
   }

package/runtime/src/utils.ts

@@ -33,3 +33,12 @@ export function pick<T extends object, K extends keyof T>(obj: T, keys: Iterable
   }
   return result as Pick<T, K>;
 }
+
+export function maybePromise<T>(value: unknown): value is Promise<T> {
+  return (
+    typeof value === 'object'
+    && value !== null
+    // @ts-expect-error the check is safe
+    && typeof value.then === 'function'
+  );
+}

package/testing-library/dist/env/vitest.js

@@ -171,9 +171,12 @@ const initElementTree = ()=>{
         }
         __RemoveElement(parent, child) {
             let ch = parent.firstChild;
-            while(ch)if (ch === child) {
-                parent.removeChild(ch);
-                break;
+            while(ch){
+                if (ch === child) {
+                    parent.removeChild(ch);
+                    break;
+                }
+                ch = ch.nextSibling;
             }
         }
         __InsertElementBefore(parent, child, ref) {

package/testing-library/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { act } from 'preact/test-utils';
 import { ARIARole } from 'aria-query';
 import { ComponentChild } from 'preact';
 import { ComponentType } from 'preact';
@@ -5,6 +6,8 @@ import { JSDOM } from 'jsdom';
 import { OptionsReceived } from 'pretty-format';
 import * as prettyFormat from 'pretty-format';
 
+export { act }
+
 export declare type AllByAttribute = (
 attribute: string,
 container: HTMLElement,
@@ -1493,7 +1496,7 @@ export declare interface waitForOptions {
  *
  * It will be useful when you want to wait for the next event loop to finish.
  *
- * @public
+ * @deprecated Please use `act` instead
  */
 export declare function waitSchedule(): Promise<void>;
 

package/testing-library/dist/pure.js

@@ -14588,7 +14588,9 @@ function pure_render(ui, { queries, wrapper: WrapperComponent, enableMainThread
     const compBackgroundThread = cloneElement(comp);
     globalThis.lynxTestingEnv.switchToMainThread();
     __root.__jsx = enableMainThread ? compMainThread : null;
-    renderPage();
+    act(()=>{
+        renderPage();
+    });
     if (enableBackgroundThread) {
         globalThis.lynxTestingEnv.switchToBackgroundThread();
         act(()=>{
@@ -14725,4 +14727,4 @@ var __webpack_exports__waitForElementToBeRemoved = dom_esm.mz;
 var __webpack_exports__within = dom_esm.uh;
 var __webpack_exports__wrapAllByQueryWithSuggestion = dom_esm.bH;
 var __webpack_exports__wrapSingleQueryWithSuggestion = dom_esm.kG;
-export { cleanup, fireEvent, pure_render as render, renderHook, waitSchedule, __webpack_exports__buildQueries as buildQueries, __webpack_exports__configure as configure, __webpack_exports__createEvent as createEvent, __webpack_exports__findAllByAltText as findAllByAltText, __webpack_exports__findAllByDisplayValue as findAllByDisplayValue, __webpack_exports__findAllByLabelText as findAllByLabelText, __webpack_exports__findAllByPlaceholderText as findAllByPlaceholderText, __webpack_exports__findAllByRole as findAllByRole, __webpack_exports__findAllByTestId as findAllByTestId, __webpack_exports__findAllByText as findAllByText, __webpack_exports__findAllByTitle as findAllByTitle, __webpack_exports__findByAltText as findByAltText, __webpack_exports__findByDisplayValue as findByDisplayValue, __webpack_exports__findByLabelText as findByLabelText, __webpack_exports__findByPlaceholderText as findByPlaceholderText, __webpack_exports__findByRole as findByRole, __webpack_exports__findByTestId as findByTestId, __webpack_exports__findByText as findByText, __webpack_exports__findByTitle as findByTitle, __webpack_exports__getAllByAltText as getAllByAltText, __webpack_exports__getAllByDisplayValue as getAllByDisplayValue, __webpack_exports__getAllByLabelText as getAllByLabelText, __webpack_exports__getAllByPlaceholderText as getAllByPlaceholderText, __webpack_exports__getAllByRole as getAllByRole, __webpack_exports__getAllByTestId as getAllByTestId, __webpack_exports__getAllByText as getAllByText, __webpack_exports__getAllByTitle as getAllByTitle, __webpack_exports__getByAltText as getByAltText, __webpack_exports__getByDisplayValue as getByDisplayValue, __webpack_exports__getByLabelText as getByLabelText, __webpack_exports__getByPlaceholderText as getByPlaceholderText, __webpack_exports__getByRole as getByRole, __webpack_exports__getByTestId as getByTestId, __webpack_exports__getByText as getByText, __webpack_exports__getByTitle as getByTitle, __webpack_exports__getConfig as getConfig, __webpack_exports__getDefaultNormalizer as getDefaultNormalizer, __webpack_exports__getElementError as getElementError, __webpack_exports__getMultipleElementsFoundError as getMultipleElementsFoundError, __webpack_exports__getNodeText as getNodeText, __webpack_exports__getQueriesForElement as getQueriesForElement, __webpack_exports__getRoles as getRoles, __webpack_exports__getSuggestedQuery as getSuggestedQuery, __webpack_exports__isInaccessible as isInaccessible, __webpack_exports__logDOM as logDOM, __webpack_exports__logRoles as logRoles, __webpack_exports__makeFindQuery as makeFindQuery, __webpack_exports__makeGetAllQuery as makeGetAllQuery, __webpack_exports__makeSingleQuery as makeSingleQuery, __webpack_exports__prettyDOM as prettyDOM, __webpack_exports__prettyFormat as prettyFormat, __webpack_exports__queries as queries, __webpack_exports__queryAllByAltText as queryAllByAltText, __webpack_exports__queryAllByAttribute as queryAllByAttribute, __webpack_exports__queryAllByDisplayValue as queryAllByDisplayValue, __webpack_exports__queryAllByLabelText as queryAllByLabelText, __webpack_exports__queryAllByPlaceholderText as queryAllByPlaceholderText, __webpack_exports__queryAllByRole as queryAllByRole, __webpack_exports__queryAllByTestId as queryAllByTestId, __webpack_exports__queryAllByText as queryAllByText, __webpack_exports__queryAllByTitle as queryAllByTitle, __webpack_exports__queryByAltText as queryByAltText, __webpack_exports__queryByAttribute as queryByAttribute, __webpack_exports__queryByDisplayValue as queryByDisplayValue, __webpack_exports__queryByLabelText as queryByLabelText, __webpack_exports__queryByPlaceholderText as queryByPlaceholderText, __webpack_exports__queryByRole as queryByRole, __webpack_exports__queryByTestId as queryByTestId, __webpack_exports__queryByText as queryByText, __webpack_exports__queryByTitle as queryByTitle, __webpack_exports__queryHelpers as queryHelpers, __webpack_exports__screen as screen, __webpack_exports__waitFor as waitFor, __webpack_exports__waitForElementToBeRemoved as waitForElementToBeRemoved, __webpack_exports__within as within, __webpack_exports__wrapAllByQueryWithSuggestion as wrapAllByQueryWithSuggestion, __webpack_exports__wrapSingleQueryWithSuggestion as wrapSingleQueryWithSuggestion };
+export { act, cleanup, fireEvent, pure_render as render, renderHook, waitSchedule, __webpack_exports__buildQueries as buildQueries, __webpack_exports__configure as configure, __webpack_exports__createEvent as createEvent, __webpack_exports__findAllByAltText as findAllByAltText, __webpack_exports__findAllByDisplayValue as findAllByDisplayValue, __webpack_exports__findAllByLabelText as findAllByLabelText, __webpack_exports__findAllByPlaceholderText as findAllByPlaceholderText, __webpack_exports__findAllByRole as findAllByRole, __webpack_exports__findAllByTestId as findAllByTestId, __webpack_exports__findAllByText as findAllByText, __webpack_exports__findAllByTitle as findAllByTitle, __webpack_exports__findByAltText as findByAltText, __webpack_exports__findByDisplayValue as findByDisplayValue, __webpack_exports__findByLabelText as findByLabelText, __webpack_exports__findByPlaceholderText as findByPlaceholderText, __webpack_exports__findByRole as findByRole, __webpack_exports__findByTestId as findByTestId, __webpack_exports__findByText as findByText, __webpack_exports__findByTitle as findByTitle, __webpack_exports__getAllByAltText as getAllByAltText, __webpack_exports__getAllByDisplayValue as getAllByDisplayValue, __webpack_exports__getAllByLabelText as getAllByLabelText, __webpack_exports__getAllByPlaceholderText as getAllByPlaceholderText, __webpack_exports__getAllByRole as getAllByRole, __webpack_exports__getAllByTestId as getAllByTestId, __webpack_exports__getAllByText as getAllByText, __webpack_exports__getAllByTitle as getAllByTitle, __webpack_exports__getByAltText as getByAltText, __webpack_exports__getByDisplayValue as getByDisplayValue, __webpack_exports__getByLabelText as getByLabelText, __webpack_exports__getByPlaceholderText as getByPlaceholderText, __webpack_exports__getByRole as getByRole, __webpack_exports__getByTestId as getByTestId, __webpack_exports__getByText as getByText, __webpack_exports__getByTitle as getByTitle, __webpack_exports__getConfig as getConfig, __webpack_exports__getDefaultNormalizer as getDefaultNormalizer, __webpack_exports__getElementError as getElementError, __webpack_exports__getMultipleElementsFoundError as getMultipleElementsFoundError, __webpack_exports__getNodeText as getNodeText, __webpack_exports__getQueriesForElement as getQueriesForElement, __webpack_exports__getRoles as getRoles, __webpack_exports__getSuggestedQuery as getSuggestedQuery, __webpack_exports__isInaccessible as isInaccessible, __webpack_exports__logDOM as logDOM, __webpack_exports__logRoles as logRoles, __webpack_exports__makeFindQuery as makeFindQuery, __webpack_exports__makeGetAllQuery as makeGetAllQuery, __webpack_exports__makeSingleQuery as makeSingleQuery, __webpack_exports__prettyDOM as prettyDOM, __webpack_exports__prettyFormat as prettyFormat, __webpack_exports__queries as queries, __webpack_exports__queryAllByAltText as queryAllByAltText, __webpack_exports__queryAllByAttribute as queryAllByAttribute, __webpack_exports__queryAllByDisplayValue as queryAllByDisplayValue, __webpack_exports__queryAllByLabelText as queryAllByLabelText, __webpack_exports__queryAllByPlaceholderText as queryAllByPlaceholderText, __webpack_exports__queryAllByRole as queryAllByRole, __webpack_exports__queryAllByTestId as queryAllByTestId, __webpack_exports__queryAllByText as queryAllByText, __webpack_exports__queryAllByTitle as queryAllByTitle, __webpack_exports__queryByAltText as queryByAltText, __webpack_exports__queryByAttribute as queryByAttribute, __webpack_exports__queryByDisplayValue as queryByDisplayValue, __webpack_exports__queryByLabelText as queryByLabelText, __webpack_exports__queryByPlaceholderText as queryByPlaceholderText, __webpack_exports__queryByRole as queryByRole, __webpack_exports__queryByTestId as queryByTestId, __webpack_exports__queryByText as queryByText, __webpack_exports__queryByTitle as queryByTitle, __webpack_exports__queryHelpers as queryHelpers, __webpack_exports__screen as screen, __webpack_exports__waitFor as waitFor, __webpack_exports__waitForElementToBeRemoved as waitForElementToBeRemoved, __webpack_exports__within as within, __webpack_exports__wrapAllByQueryWithSuggestion as wrapAllByQueryWithSuggestion, __webpack_exports__wrapSingleQueryWithSuggestion as wrapSingleQueryWithSuggestion };

package/testing-library/dist/vitest-global-setup.js

@@ -28,7 +28,7 @@ globalThis.onInitWorkletRuntime = ()=>{
     return true;
 };
 globalThis.onInjectMainThreadGlobals = (target)=>{
-    if (onInjectMainThreadGlobals) onInjectMainThreadGlobals();
+    if (onInjectMainThreadGlobals) onInjectMainThreadGlobals(target);
     if (process.env.DEBUG) console.log('onInjectMainThreadGlobals');
     snapshotInstanceManager.clear();
     snapshotInstanceManager.nextId = 0;
@@ -56,7 +56,7 @@ globalThis.onInjectMainThreadGlobals = (target)=>{
     target.globalPipelineOptions = void 0;
 };
 globalThis.onInjectBackgroundThreadGlobals = (target)=>{
-    if (onInjectBackgroundThreadGlobals) onInjectBackgroundThreadGlobals();
+    if (onInjectBackgroundThreadGlobals) onInjectBackgroundThreadGlobals(target);
     if (process.env.DEBUG) console.log('onInjectBackgroundThreadGlobals');
     backgroundSnapshotInstanceManager.clear();
     backgroundSnapshotInstanceManager.nextId = 0;

package/testing-library/dist/vitest.config.js

@@ -16,7 +16,39 @@ async function ensurePackagesInstalled() {
 }
 const createVitestConfig = async (options)=>{
     await ensurePackagesInstalled();
-    const runtimePkgName = options?.runtimePkgName ?? '@lynx-js/react';
+    const runtimeOSSPkgName = '@lynx-js/react';
+    const runtimePkgName = options?.runtimePkgName ?? runtimeOSSPkgName;
+    const runtimeDir = path.dirname(vitest_config_require.resolve(`${runtimePkgName}/package.json`));
+    const runtimeOSSDir = path.dirname(vitest_config_require.resolve(`${runtimeOSSPkgName}/package.json`, {
+        paths: [
+            runtimeDir
+        ]
+    }));
+    const preactDir = path.dirname(vitest_config_require.resolve('preact/package.json', {
+        paths: [
+            runtimeOSSDir
+        ]
+    }));
+    const generateAlias = (pkgName, pkgDir, resolveDir)=>{
+        const pkgExports = vitest_config_require(path.join(pkgDir, 'package.json')).exports;
+        const pkgAlias = [];
+        Object.keys(pkgExports).forEach((key)=>{
+            const name = path.posix.join(pkgName, key);
+            pkgAlias.push({
+                find: new RegExp('^' + name + '$'),
+                replacement: vitest_config_require.resolve(name, {
+                    paths: [
+                        resolveDir
+                    ]
+                })
+            });
+        });
+        return pkgAlias;
+    };
+    const runtimeOSSAlias = generateAlias(runtimeOSSPkgName, runtimeOSSDir, runtimeDir);
+    let runtimeAlias = [];
+    if (runtimePkgName !== runtimeOSSPkgName) runtimeAlias = generateAlias(runtimePkgName, runtimeDir, vitest_config_dirname);
+    const preactAlias = generateAlias('preact', preactDir, runtimeOSSDir);
     function transformReactLynxPlugin() {
         return {
             name: 'transformReactLynxPlugin',
@@ -83,6 +115,11 @@ const createVitestConfig = async (options)=>{
             globals: true,
             setupFiles: [
                 path.join(vitest_config_dirname, 'vitest-global-setup')
+            ],
+            alias: [
+                ...runtimeOSSAlias,
+                ...runtimeAlias,
+                ...preactAlias
             ]
         }
     });

package/testing-library/types/entry.d.ts

@@ -10,8 +10,9 @@
 import { queries, Queries, BoundFunction } from '@testing-library/dom';
 import { LynxElement, type ElementTree, type LynxTestingEnv } from '@lynx-js/testing-environment';
 import { ComponentChild, ComponentType } from 'preact';
+import { act } from 'preact/test-utils';
 export * from '@testing-library/dom';
-export { ElementTree, LynxTestingEnv };
+export { ElementTree, LynxTestingEnv, act };
 
 /**
  * The options for {@link render}.
@@ -252,6 +253,6 @@ export function renderHook<Result, Props>(
  *
  * It will be useful when you want to wait for the next event loop to finish.
  *
- * @public
+ * @deprecated Please use `act` instead
  */
 export function waitSchedule(): Promise<void>;