@lynx-js/react 0.110.0 → 0.111.0

package/runtime/src/compat/initData.ts

@@ -1,9 +1,11 @@
 // 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 { ComponentClass, Consumer, Context, FC, PropsWithChildren, ReactNode } from 'react';
+import type { ComponentChildren, Consumer, Context, Provider } from 'preact';
+import type { ComponentClass } from 'react';
 
 import { useLynxGlobalEventListener } from '../hooks/useLynxGlobalEventListener.js';
+import { globalFlushOptions } from '../lifecycle/patch/commit.js';
 
 type Getter<T> = {
   [key in keyof T]: () => T[key];
@@ -11,26 +13,30 @@ type Getter<T> = {
 
 // for better reuse if runtime is changed
 export function factory<Data>(
-  { createContext, useState, createElement, useLynxGlobalEventListener: useListener }: typeof import('react') & {
+  { createContext, useState, createElement, useLynxGlobalEventListener: useListener }: {
+    createContext: typeof import('preact').createContext;
+    useState: typeof import('preact/hooks').useState;
+    createElement: typeof import('preact').createElement;
     useLynxGlobalEventListener: typeof useLynxGlobalEventListener;
   },
   prop: '__globalProps' | '__initData',
   eventName: string,
 ): Getter<{
   Context: Context<Data>;
-  Provider: FC<{
-    children?: ReactNode | undefined;
-  }>;
+  Provider: Provider<Data>;
   Consumer: Consumer<Data>;
   use: () => Data;
   useChanged: (callback: (data: Data) => void) => void;
 }> {
   const Context = createContext({} as Data);
 
-  const Provider: FC<PropsWithChildren> = ({ children }) => {
+  const Provider = ({ children }: { children?: ComponentChildren }) => {
     const [__, set] = useState<Data>(lynx[prop] as Data);
 
     const handleChange = () => {
+      if (prop === '__initData') {
+        globalFlushOptions.triggerDataUpdated = true;
+      }
       set(lynx[prop] as Data);
     };
 
@@ -50,6 +56,9 @@ export function factory<Data>(
   const use = (): Data => {
     const [__, set] = useState(lynx[prop]);
     useChanged(() => {
+      if (prop === '__initData') {
+        globalFlushOptions.triggerDataUpdated = true;
+      }
       set(lynx[prop]);
     });
 
@@ -58,12 +67,12 @@ export function factory<Data>(
 
   const useChanged = (callback: (__: Data) => void) => {
     if (!__LEPUS__) {
-      // @ts-ignore
-      useListener<(__: unknown) => void>(eventName, callback);
+      useListener(eventName, callback);
     }
   };
 
   return {
+    /* v8 ignore next */
     Context: () => Context,
     Provider: () => Provider,
     Consumer: () => Consumer,
@@ -98,7 +107,8 @@ export function factory<Data>(
  * @public
  */
 export function withInitDataInState<P, S>(App: ComponentClass<P, S>): ComponentClass<P, S> {
-  const isClassComponent = 'prototype' in App && App.prototype.render;
+  const isClassComponent = 'prototype' in App && 'render' in App.prototype;
+  /* v8 ignore next 4 */
   if (!isClassComponent) {
     // return as-is when not class component
     return App;
@@ -118,6 +128,7 @@ export function withInitDataInState<P, S>(App: ComponentClass<P, S>): ComponentC
         lynx.getJSModule('GlobalEventEmitter').addListener(
           'onDataChanged',
           this.h = () => {
+            globalFlushOptions.triggerDataUpdated = true;
             this.setState(lynx.__initData as S);
           },
         );

package/runtime/src/compat/lynxComponent.ts

@@ -9,15 +9,15 @@ export function wrapWithLynxComponent(
   jsxComponent: any,
 ): ReactNode {
   const C = jsxComponent.type;
-  if (typeof C === 'function') {
-    if (C === ComponentFromReactRuntime || C.prototype instanceof ComponentFromReactRuntime) {
-      if (jsxSnapshot.length === 1) {
-        return jsxSnapshot(jsxComponent);
-      } else {
-        // spread
-        if (!jsxComponent.props.removeComponentElement) {
-          return jsxSnapshot(jsxComponent, takeComponentAttributes(jsxComponent));
-        }
+  if (
+    typeof C === 'function' && (C === ComponentFromReactRuntime || C.prototype instanceof ComponentFromReactRuntime)
+  ) {
+    if (jsxSnapshot.length === 1) {
+      return jsxSnapshot(jsxComponent);
+    } else {
+      // spread
+      if (!jsxComponent.props.removeComponentElement) {
+        return jsxSnapshot(jsxComponent, takeComponentAttributes(jsxComponent));
       }
     }
   }
@@ -25,8 +25,7 @@ export function wrapWithLynxComponent(
 }
 
 // @ts-expect-error
-export class ComponentFromReactRuntime extends Component {
-}
+export class ComponentFromReactRuntime extends Component {}
 
 const __COMPONENT_ATTRIBUTES__ = /* @__PURE__ */ new Set([
   'name',
@@ -68,8 +67,8 @@ function takeComponentAttributes(jsxComponent: any): Record<string, any> {
       || k === 'dataSet'
       || k === 'data-set'
       || k === 'removeComponentElement'
-      || k.match(/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/)
-      || k.match(/^data-([A-Za-z]+)$/)
+      || (/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/.exec(k))
+      || (/^data-([A-Za-z]+)$/.exec(k))
     ) {
       attributes[k] = jsxComponent.props[k];
       delete jsxComponent.props[k];

package/runtime/src/debug/profile.ts

@@ -29,6 +29,7 @@ export function initProfileHook(): void {
   const oldRender = options[RENDER];
   options[RENDER] = function(vnode: VNode & { [COMPONENT]: Component }) {
     const displayName = getDisplayName(vnode.type as ComponentClass);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const originalRender = vnode[COMPONENT].render;
     vnode[COMPONENT].render = function render(this, props, state, context) {
       // This __PROFILE__ is used for DCE testing

package/runtime/src/gesture/processGestureBagkround.ts

@@ -1,5 +1,9 @@
+// Copyright 2025 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 { GestureTypeInner } from './types.js';
+import type { BaseGesture, ComposedGesture, GestureKind } from './types.js';
 import { onPostWorkletCtx } from '../worklet/ctx.js';
-import { type GestureKind, GestureTypeInner, type ComposedGesture, type BaseGesture } from './types.js';
 
 export function processGestureBackground(gesture: GestureKind): void {
   if (gesture.type === GestureTypeInner.COMPOSED) {

package/runtime/src/gesture/types.ts

@@ -1,3 +1,6 @@
+// Copyright 2025 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 } from '@lynx-js/react/worklet-runtime/bindings';
 
 export enum GestureTypeInner {

package/runtime/src/hooks/useLynxGlobalEventListener.ts

@@ -31,7 +31,7 @@ import { useEffect, useMemo, useRef } from 'preact/hooks';
  * @param listener - Event handler
  * @public
  */
-export function useLynxGlobalEventListener<T extends (...args: unknown[]) => void>(
+export function useLynxGlobalEventListener<T extends (...args: any[]) => void>(
   eventName: string,
   listener: T,
 ): void {

package/runtime/src/hydrate.ts

@@ -2,9 +2,11 @@
 // 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 { __pendingListUpdates, componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { __pendingListUpdates } from './pendingListUpdates.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
 import { unref } from './snapshot/ref.js';
-import { DynamicPartType, SnapshotInstance } from './snapshot.js';
+import type { SnapshotInstance } from './snapshot.js';
 import { isEmptyObject } from './utils.js';
 
 export interface DiffResult<K> {
@@ -215,7 +217,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
   }
 
   let swap;
-  if (swap = options?.swap) {
+  if ((swap = options?.swap)) {
     swap[before.__id] = after.__id;
   }
 
@@ -349,7 +351,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
 
         const listElement = before.__elements![elementIndex]!;
         __SetAttribute(listElement, 'update-list-info', info);
-        const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(afterChildNodes);
+        const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(afterChildNodes, hydrate);
         __UpdateListCallbacks(
           listElement,
           componentAtIndex,

package/runtime/src/index.ts

@@ -11,6 +11,7 @@ import {
   PureComponent,
   Suspense,
   lazy as backgroundLazy,
+  cloneElement,
   createContext,
   createElement,
   createRef,
@@ -86,6 +87,7 @@ export {
   Suspense,
   lazy,
   createElement,
+  cloneElement,
   useSyncExternalStore,
 };
 

package/runtime/src/internal.ts

@@ -9,10 +9,11 @@ import './lynx.js';
 
 import { factory as factory2 } from './compat/componentIs.js';
 import { useMemo } from './hooks/react.js';
-import { snapshotCreateList } from './list.js';
 import { loadLazyBundle } from './lynx/lazy-bundle.js';
 import { __root } from './root.js';
-import { DynamicPartType, SnapshotInstance, __page, __pageId, createSnapshot, snapshotManager } from './snapshot.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
+import { snapshotCreateList } from './snapshot/list.js';
+import { SnapshotInstance, __page, __pageId, createSnapshot, snapshotManager } from './snapshot.js';
 
 export { __page, __pageId, __root };
 

package/runtime/src/legacy-react-runtime/index.ts

@@ -8,7 +8,7 @@ import {
   ComponentFromReactRuntime as Component,
   ComponentFromReactRuntime as PureComponent,
 } from '../compat/lynxComponent.js';
-import { useCallback, useEffect, useMemo, useReducer, useState, useRef } from '../hooks/react.js';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from '../hooks/react.js';
 
 /* v8 ignore next 3 */
 function __runInJS<T>(value: T): T | undefined | null {

package/runtime/src/lifecycle/patch/commit.ts

@@ -23,13 +23,7 @@ import type { VNode } from 'preact';
 import { options } from 'preact';
 
 import { LifecycleConstant } from '../../lifecycleConstant.js';
-import {
-  PerformanceTimingKeys,
-  globalPipelineOptions,
-  markTiming,
-  markTimingLegacy,
-  setPipeline,
-} from '../../lynx/performance.js';
+import { globalPipelineOptions, markTiming, markTimingLegacy, setPipeline } from '../../lynx/performance.js';
 import { COMMIT } from '../../renderToOpcodes/constants.js';
 import { applyQueuedRefs } from '../../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../../snapshot.js';
@@ -88,8 +82,8 @@ function replaceCommitHook(): void {
     }
 
     // Mark the end of virtual DOM diffing phase for performance tracking
-    markTimingLegacy(PerformanceTimingKeys.updateDiffVdomEnd);
-    markTiming(PerformanceTimingKeys.diffVdomEnd);
+    markTimingLegacy('updateDiffVdomEnd');
+    markTiming('diffVdomEnd');
 
     const backgroundSnapshotInstancesToRemove = globalBackgroundSnapshotInstancesToRemove;
     globalBackgroundSnapshotInstancesToRemove = [];
@@ -167,7 +161,7 @@ function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions
   if (__PROFILE__) {
     console.profile('commitChanges');
   }
-  markTiming(PerformanceTimingKeys.packChangesStart);
+  markTiming('packChangesStart');
   const obj: {
     data: string;
     patchOptions: PatchOptions;
@@ -178,7 +172,7 @@ function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions
       reloadVersion: getReloadVersion(),
     },
   };
-  markTiming(PerformanceTimingKeys.packChangesEnd);
+  markTiming('packChangesEnd');
   if (globalPipelineOptions) {
     obj.patchOptions.pipelineOptions = globalPipelineOptions;
     setPipeline(undefined);

package/runtime/src/lifecycle/patch/snapshotPatch.ts

@@ -8,16 +8,16 @@
  * efficient transmission between threads and application to element tree.
  */
 
-export const enum SnapshotOperation {
-  CreateElement,
-  InsertBefore,
-  RemoveChild,
-  SetAttribute,
-  SetAttributes,
+export const SnapshotOperation = {
+  CreateElement: 0,
+  InsertBefore: 1,
+  RemoveChild: 2,
+  SetAttribute: 3,
+  SetAttributes: 4,
 
-  DEV_ONLY_AddSnapshot = 100,
-  DEV_ONLY_RegisterWorklet = 101,
-}
+  DEV_ONLY_AddSnapshot: 100,
+  DEV_ONLY_RegisterWorklet: 101,
+} as const;
 
 // Operation format definitions:
 //

package/runtime/src/lifecycle/patch/snapshotPatchApply.ts

@@ -16,6 +16,7 @@
 import { sendCtxNotFoundEventToBackground } from './error.js';
 import type { SnapshotPatch } from './snapshotPatch.js';
 import { SnapshotOperation } from './snapshotPatch.js';
+import type { DynamicPartType } from '../../snapshot/dynamicPartType.js';
 import {
   SnapshotInstance,
   createSnapshot,
@@ -23,7 +24,6 @@ import {
   snapshotInstanceManager,
   snapshotManager,
 } from '../../snapshot.js';
-import type { DynamicPartType } from '../../snapshot.js';
 
 /**
  * Applies a patch of snapshot operations to the main thread.

package/runtime/src/lifecycle/patch/updateMainThread.ts

@@ -4,15 +4,15 @@
 
 import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { LifecycleConstant } from '../../lifecycleConstant.js';
-import { __pendingListUpdates } from '../../list.js';
-import { PerformanceTimingKeys, markTiming, setPipeline } from '../../lynx/performance.js';
-import { __page } from '../../snapshot.js';
-import { getReloadVersion } from '../pass.js';
 import type { PatchList, PatchOptions } from './commit.js';
 import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
+import { LifecycleConstant } from '../../lifecycleConstant.js';
+import { markTiming, setPipeline } from '../../lynx/performance.js';
+import { __pendingListUpdates } from '../../pendingListUpdates.js';
 import { applyRefQueue } from '../../snapshot/workletRef.js';
+import { __page } from '../../snapshot.js';
+import { getReloadVersion } from '../pass.js';
 
 function updateMainThread(
   { data, patchOptions }: {
@@ -25,12 +25,12 @@ function updateMainThread(
   }
 
   setPipeline(patchOptions.pipelineOptions);
-  markTiming(PerformanceTimingKeys.mtsRenderStart);
-  markTiming(PerformanceTimingKeys.parseChangesStart);
+  markTiming('mtsRenderStart');
+  markTiming('parseChangesStart');
   const { patchList, flushOptions = {} } = JSON.parse(data) as PatchList;
 
-  markTiming(PerformanceTimingKeys.parseChangesEnd);
-  markTiming(PerformanceTimingKeys.patchChangesStart);
+  markTiming('parseChangesEnd');
+  markTiming('patchChangesStart');
 
   for (const { snapshotPatch, workletRefInitValuePatch } of patchList) {
     updateWorkletRefInitValueChanges(workletRefInitValuePatch);
@@ -42,8 +42,8 @@ function updateMainThread(
     // console.debug('********** Lepus updatePatch:');
     // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
   }
-  markTiming(PerformanceTimingKeys.patchChangesEnd);
-  markTiming(PerformanceTimingKeys.mtsRenderEnd);
+  markTiming('patchChangesEnd');
+  markTiming('mtsRenderEnd');
   if (patchOptions.isHydration) {
     setMainThreadHydrationFinished(true);
   }
@@ -51,7 +51,6 @@ function updateMainThread(
   if (patchOptions.pipelineOptions) {
     flushOptions.pipelineOptions = patchOptions.pipelineOptions;
   }
-  // TODO: triggerDataUpdated?
   __FlushElementTree(__page, flushOptions);
 }
 

package/runtime/src/lifecycle/reload.ts

@@ -11,7 +11,7 @@ import { render } from 'preact';
 
 import { hydrate } from '../hydrate.js';
 import { LifecycleConstant } from '../lifecycleConstant.js';
-import { __pendingListUpdates } from '../list.js';
+import { __pendingListUpdates } from '../pendingListUpdates.js';
 import { __root, setRoot } from '../root.js';
 import { destroyBackground } from './destroy.js';
 import { applyRefQueue } from '../snapshot/workletRef.js';

package/runtime/src/lifecycleConstant.ts

@@ -7,6 +7,7 @@ export const enum LifecycleConstant {
   globalEventFromLepus = 'globalEventFromLepus',
   jsReady = 'rLynxJSReady',
   patchUpdate = 'rLynxChange',
+  publishEvent = 'rLynxPublishEvent',
 }
 
 export interface FirstScreenData {