@lynx-js/react 0.111.1 → 0.112.0

package/runtime/src/compat/initData.ts

@@ -1,150 +0,0 @@
-// 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 { 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];
-};
-
-// for better reuse if runtime is changed
-export function factory<Data>(
-  { 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: Provider<Data>;
-  Consumer: Consumer<Data>;
-  use: () => Data;
-  useChanged: (callback: (data: Data) => void) => void;
-}> {
-  const Context = createContext({} as Data);
-
-  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);
-    };
-
-    useChanged(handleChange);
-
-    return createElement(
-      Context.Provider,
-      {
-        value: __,
-      },
-      children,
-    );
-  };
-
-  const Consumer: Consumer<Data> = Context.Consumer;
-
-  const use = (): Data => {
-    const [__, set] = useState(lynx[prop]);
-    useChanged(() => {
-      if (prop === '__initData') {
-        globalFlushOptions.triggerDataUpdated = true;
-      }
-      set(lynx[prop]);
-    });
-
-    return __ as Data;
-  };
-
-  const useChanged = (callback: (__: Data) => void) => {
-    if (!__LEPUS__) {
-      useListener(eventName, callback);
-    }
-  };
-
-  return {
-    /* v8 ignore next */
-    Context: () => Context,
-    Provider: () => Provider,
-    Consumer: () => Consumer,
-    use: () => use,
-    useChanged: () => useChanged,
-  };
-}
-
-/**
- * Higher-Order Component (HOC) that injects `initData` into the state of the given class component.
- *
- * This HOC checks if the provided component is a class component. If it is, it wraps the component
- * and injects the `initData` into its state. It also adds a listener
- * to update the state when data changes, and removes the listener when the component unmounts.
- *
- * @typeParam P - The type of the props of the wrapped component.
- * @typeParam S - The type of the state of the wrapped component.
- *
- * @param App - The class component to be wrapped by the HOC.
- *
- * @returns The original component if it is not a class component, otherwise a new class component
- *          with `initData` injection and state update functionality.
- *
- * @example
- * ```typescript
- * class App extends React.Component<MyProps, MyState> {
- *   // component implementation
- * }
- *
- * export default withInitDataInState(App);
- * ```
- * @public
- */
-export function withInitDataInState<P, S>(App: ComponentClass<P, S>): ComponentClass<P, S> {
-  const isClassComponent = 'prototype' in App && 'render' in App.prototype;
-  /* v8 ignore next 4 */
-  if (!isClassComponent) {
-    // return as-is when not class component
-    return App;
-  }
-
-  class C extends App {
-    h?: () => void;
-
-    constructor(props: P) {
-      super(props);
-      this.state = {
-        ...this.state,
-        ...lynx.__initData,
-      };
-
-      if (!__LEPUS__) {
-        lynx.getJSModule('GlobalEventEmitter').addListener(
-          'onDataChanged',
-          this.h = () => {
-            globalFlushOptions.triggerDataUpdated = true;
-            this.setState(lynx.__initData as S);
-          },
-        );
-      }
-    }
-
-    override componentWillUnmount(): void {
-      super.componentWillUnmount?.();
-      if (!__LEPUS__) {
-        lynx.getJSModule('GlobalEventEmitter').removeListener(
-          'onDataChanged',
-          this.h!,
-        );
-      }
-    }
-  }
-
-  return C;
-}

package/runtime/src/compat/lynxComponent.ts

@@ -1,79 +0,0 @@
-// 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 { Component } from 'preact';
-import type { ReactNode } from 'react';
-
-export function wrapWithLynxComponent(
-  jsxSnapshot: (c: ReactNode, spread?: Record<string, any>) => ReactNode,
-  jsxComponent: any,
-): ReactNode {
-  const C = jsxComponent.type;
-  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));
-      }
-    }
-  }
-  return jsxComponent;
-}
-
-// @ts-expect-error
-export class ComponentFromReactRuntime extends Component {}
-
-const __COMPONENT_ATTRIBUTES__ = /* @__PURE__ */ new Set([
-  'name',
-  'style',
-  'class',
-  'flatten',
-  'clip-radius',
-  'overlap',
-  'user-interaction-enabled',
-  'native-interaction-enabled',
-  'block-native-event',
-  'enableLayoutOnly',
-  'cssAlignWithLegacyW3C',
-  'intersection-observers',
-  'trigger-global-event',
-  'exposure-scene',
-  'exposure-id',
-  'exposure-screen-margin-top',
-  'exposure-screen-margin-bottom',
-  'exposure-screen-margin-left',
-  'exposure-screen-margin-right',
-  'focusable',
-  'focus-index',
-  'accessibility-label',
-  'accessibility-element',
-  'accessibility-traits',
-  'enable-new-animator',
-]);
-
-function takeComponentAttributes(jsxComponent: any): Record<string, any> {
-  const attributes: Record<string, any> = {};
-  Object.keys(jsxComponent.props).forEach((k) => {
-    // let re1 = Regex::new(r"^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$").unwrap();
-    // let re2 = Regex::new(r"^data-([A-Za-z]+)$").unwrap();
-    if (
-      __COMPONENT_ATTRIBUTES__.has(k)
-      || k === 'id'
-      || k === 'className'
-      || k === 'dataSet'
-      || k === 'data-set'
-      || k === 'removeComponentElement'
-      || (/^(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];
-    }
-  });
-
-  return attributes;
-}

package/runtime/src/debug/debug.ts

@@ -1,9 +0,0 @@
-// 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.
-const logDebug: (...args: any[]) => void = console.debug;
-
-/**
- * @internal
- */
-export { logDebug };

package/runtime/src/debug/printSnapshot.ts

@@ -1,28 +0,0 @@
-// 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 { BackgroundSnapshotInstance } from '../backgroundSnapshot.js';
-import { SnapshotInstance } from '../snapshot.js';
-import { logDebug } from './debug.js';
-
-export function printSnapshotInstance(
-  instance: BackgroundSnapshotInstance | SnapshotInstance,
-  log?: (...data: any[]) => void,
-): void {
-  const impl = (
-    instance: BackgroundSnapshotInstance | SnapshotInstance,
-    level: number,
-  ) => {
-    let msg = '';
-    for (let i = 0; i < level; ++i) {
-      msg += '  ';
-    }
-    msg += `| ${instance.__id}(${instance.type}): ${JSON.stringify(instance.__values)}`;
-    (log ?? logDebug)(msg);
-    for (const c of instance.childNodes) {
-      impl(c, level + 1);
-    }
-  };
-
-  impl(instance, 0);
-}

package/runtime/src/debug/profile.ts

@@ -1,55 +0,0 @@
-// 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 { Component, ComponentClass, VNode } from 'preact';
-
-import { COMPONENT, DIFF, DIFFED, RENDER } from '../renderToOpcodes/constants.js';
-
-export function initProfileHook(): void {
-  const oldDiff = options[DIFF];
-  options[DIFF] = function(vnode: VNode) {
-    // This __PROFILE__ is used for DCE testing
-    if (__PROFILE__ && typeof vnode.type === 'function') {
-      // We only add profiling trace for Component
-      console.profile(`diff::${getDisplayName(vnode.type as ComponentClass)}`);
-    }
-    oldDiff?.(vnode);
-  };
-  const oldDiffed = options[DIFFED];
-  options[DIFFED] = function(vnode) {
-    // This __PROFILE__ is used for DCE testing
-    if (__PROFILE__ && typeof vnode.type === 'function') {
-      console.profileEnd(); // for options[DIFF]
-    }
-    oldDiffed?.(vnode);
-  };
-
-  // Profile the user-provided `render`.
-  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
-      if (__PROFILE__) {
-        console.profile(`render::${displayName}`);
-      }
-      try {
-        return originalRender.call(this, props, state, context);
-      } finally {
-        // This __PROFILE__ is used for DCE testing
-        if (__PROFILE__) {
-          console.profileEnd();
-        }
-        vnode[COMPONENT].render = originalRender;
-      }
-    };
-    oldRender?.(vnode);
-  };
-}
-
-function getDisplayName(type: ComponentClass): string {
-  return type.displayName ?? type.name;
-}

package/runtime/src/document.ts

@@ -1,84 +0,0 @@
-// 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 { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
-import { SnapshotInstance } from './snapshot.js';
-
-/**
- * This module implements an Interface Adapter Pattern to integrate Preact's
- * rendering system with Lynx's custom Snapshot-based virtual DOM.
- *
- * It works by:
- * 1. Defining a minimal {@link Document}-like interface that Preact expects
- * 2. Implementing this interface to return our {@link Snapshot} instances
- * 3. Maintaining the same method signatures as the standard DOM API
- *
- * This allows Preact to build its virtual tree using our Snapshot system
- * without knowing it's not working with a real DOM.
- */
-
-/**
- * Defines the minimal document interface that Preact expects, depending on
- * which thread is running.
- */
-interface SnapshotDocumentAdapter {
-  createElement(type: string): BackgroundSnapshotInstance | SnapshotInstance;
-  createElementNS(ns: string | null, type: string): BackgroundSnapshotInstance | SnapshotInstance;
-  createTextNode(text: string): BackgroundSnapshotInstance | SnapshotInstance;
-}
-
-const document: SnapshotDocumentAdapter = {} as SnapshotDocumentAdapter;
-
-/**
- * Sets up the document interface for the background thread.
- * All DOM operations are intercepted to create {@link BackgroundSnapshotInstance}.
- */
-function setupBackgroundDocument(): void {
-  document.createElement = function(type: string) {
-    return new BackgroundSnapshotInstance(type);
-  };
-  document.createElementNS = function(_ns: string, type: string) {
-    return new BackgroundSnapshotInstance(type);
-  };
-  document.createTextNode = function(text: string) {
-    const i = new BackgroundSnapshotInstance(null as unknown as string);
-    i.setAttribute(0, text);
-    Object.defineProperty(i, 'data', {
-      set(v) {
-        i.setAttribute(0, v);
-      },
-    });
-    return i;
-  };
-}
-
-/**
- * Sets up the document interface for the main thread.
- * All DOM operations are intercepted to create {@link SnapshotInstance}.
- */
-function setupDocument(): void {
-  document.createElement = function(type: string) {
-    return new SnapshotInstance(type);
-  };
-  document.createElementNS = function(_ns: string, type: string) {
-    return new SnapshotInstance(type);
-  };
-  document.createTextNode = function(text: string) {
-    const i = new SnapshotInstance(null as unknown as string);
-    i.setAttribute(0, text);
-    Object.defineProperty(i, 'data', {
-      set(v) {
-        i.setAttribute(0, v);
-      },
-    });
-    return i;
-  };
-}
-
-// if (__JS__) {
-//   setupBackgroundDocument();
-// } else if (__LEPUS__) {
-//   setupDocument();
-// }
-
-export { document, setupBackgroundDocument, setupDocument };

package/runtime/src/gesture/processGesture.ts

@@ -1,89 +0,0 @@
-// 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 { onWorkletCtxUpdate } from '@lynx-js/react/worklet-runtime/bindings';
-
-import { GestureTypeInner } from './types.js';
-import type { BaseGesture, ComposedGesture, GestureConfig, GestureKind } from './types.js';
-
-function isSerializedGesture(gesture: GestureKind): boolean {
-  return gesture.__isSerialized ?? false;
-}
-
-function getGestureInfo(
-  gesture: BaseGesture,
-  oldGesture: BaseGesture | undefined,
-  isFirstScreen: boolean,
-  dom: FiberElement,
-) {
-  const config = {
-    callbacks: [],
-  } as GestureConfig;
-  const baseGesture = gesture;
-
-  if (baseGesture.config) {
-    config.config = baseGesture.config;
-  }
-
-  for (
-    const key of Object.keys(baseGesture.callbacks)
-  ) {
-    const callback = baseGesture.callbacks[key]!;
-    const oldCallback = oldGesture?.callbacks[key];
-    onWorkletCtxUpdate(callback, oldCallback, isFirstScreen, dom);
-    config.callbacks.push({
-      name: key,
-      callback: callback,
-    });
-  }
-
-  const relationMap = {
-    waitFor: baseGesture?.waitFor?.map(subGesture => subGesture.id) ?? [],
-    simultaneous: baseGesture?.simultaneousWith?.map(subGesture => subGesture.id) ?? [],
-    continueWith: baseGesture?.continueWith?.map(subGesture => subGesture.id) ?? [],
-  };
-
-  return {
-    config,
-    relationMap,
-  };
-}
-
-export function processGesture(
-  dom: FiberElement,
-  gesture: GestureKind,
-  oldGesture: GestureKind | undefined,
-  isFirstScreen: boolean,
-  gestureOptions?: {
-    domSet: boolean;
-  },
-): void {
-  if (!gesture || !isSerializedGesture(gesture)) {
-    return;
-  }
-
-  if (!(gestureOptions && gestureOptions.domSet)) {
-    __SetAttribute(dom, 'has-react-gesture', true);
-    __SetAttribute(dom, 'flatten', false);
-  }
-
-  if (gesture.type === GestureTypeInner.COMPOSED) {
-    for (const [index, subGesture] of (gesture as ComposedGesture).gestures.entries()) {
-      processGesture(dom, subGesture, (oldGesture as ComposedGesture)?.gestures[index], isFirstScreen, {
-        domSet: true,
-      });
-    }
-  } else {
-    const baseGesture = gesture as BaseGesture;
-    const oldBaseGesture = oldGesture as BaseGesture | undefined;
-
-    const { config, relationMap } = getGestureInfo(baseGesture, oldBaseGesture, isFirstScreen, dom);
-    __SetGestureDetector(
-      dom,
-      baseGesture.id,
-      baseGesture.type,
-      config,
-      relationMap,
-    );
-  }
-}

package/runtime/src/gesture/processGestureBagkround.ts

@@ -1,19 +0,0 @@
-// 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';
-
-export function processGestureBackground(gesture: GestureKind): void {
-  if (gesture.type === GestureTypeInner.COMPOSED) {
-    for (const subGesture of (gesture as ComposedGesture).gestures) {
-      processGestureBackground(subGesture);
-    }
-  } else {
-    const baseGesture = gesture as BaseGesture;
-    for (const [name, value] of Object.entries(baseGesture.callbacks)) {
-      baseGesture.callbacks[name] = onPostWorkletCtx(value)!;
-    }
-  }
-}

package/runtime/src/gesture/types.ts

@@ -1,44 +0,0 @@
-// 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 {
-  COMPOSED = -1,
-  PAN = 0,
-  FLING = 1,
-  DEFAULT = 2,
-  TAP = 3,
-  LONGPRESS = 4,
-  ROTATION = 5,
-  PINCH = 6,
-  NATIVE = 7,
-}
-
-export interface GestureKind {
-  type: GestureTypeInner;
-  __isSerialized?: boolean;
-  __isGesture?: boolean;
-}
-
-export interface ComposedGesture extends GestureKind {
-  type: GestureTypeInner.COMPOSED;
-  gestures: GestureKind[];
-}
-
-export interface BaseGesture extends GestureKind {
-  id: number;
-  callbacks: Record<string, Worklet>;
-  waitFor: BaseGesture[];
-  simultaneousWith: BaseGesture[];
-  continueWith: BaseGesture[];
-  config?: Record<string, unknown>;
-}
-
-export interface GestureConfig {
-  callbacks: {
-    name: string;
-    callback: Worklet;
-  }[];
-  config?: Record<string, unknown>;
-}

package/runtime/src/hooks/react.ts

@@ -1,62 +0,0 @@
-// 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 {
-  useCallback,
-  useContext,
-  useDebugValue,
-  useErrorBoundary,
-  useId,
-  useImperativeHandle,
-  useMemo,
-  useEffect as usePreactEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'preact/hooks';
-import type { DependencyList, EffectCallback } from 'react';
-
-/**
- * `useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
- *
- * Accepts a function that contains imperative, possibly effectful code. The effects run after main thread dom update without blocking it.
- *
- * @param effect - Imperative function that can return a cleanup function
- * @param deps - If present, effect will only activate if the values in the list change (using ===).
- *
- * @public
- *
- * @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
- */
-function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void {
-  return usePreactEffect(effect, deps);
-}
-
-/**
- * Accepts a function that contains imperative, possibly effectful code.
- * The effects run after main thread dom update without blocking it.
- *
- * @param effect - Imperative function that can return a cleanup function
- * @param deps - If present, effect will only activate if the values in the list change (using ===).
- *
- * @public
- */
-function useEffect(effect: EffectCallback, deps?: DependencyList): void {
-  return usePreactEffect(effect, deps);
-}
-
-export {
-  // preact
-  useState,
-  useReducer,
-  useRef,
-  useImperativeHandle,
-  useLayoutEffect,
-  useEffect,
-  useCallback,
-  useMemo,
-  useContext,
-  useDebugValue,
-  useErrorBoundary,
-  useId,
-};

package/runtime/src/hooks/useLynxGlobalEventListener.ts

@@ -1,59 +0,0 @@
-// 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 { useEffect, useMemo, useRef } from 'preact/hooks';
-
-/**
- * `useLynxGlobalEventListener` help you `addListener` as early as possible.
- *
- * @example
- *
- * Use this hooks to listen to event 'exposure' and event 'disexposure'
- *
- * ```jsx
- * function App() {
- *   useLynxGlobalEventListener('exposure', (e) => {
- *     console.log("exposure", e)
- *   })
- *   useLynxGlobalEventListener('disexposure', (e) => {
- *     console.log("disexposure", e)
- *   })
- *   return (
- *     <view
- *       style='width: 100px; height: 100px; background-color: red;'
- *       exposure-id='a'
- *     />
- *   )
- * }
- * ```
- *
- * @param eventName - Event name to listen
- * @param listener - Event handler
- * @public
- */
-export function useLynxGlobalEventListener<T extends (...args: any[]) => void>(
-  eventName: string,
-  listener: T,
-): void {
-  'background only';
-
-  const previousArgsRef = useRef<[string, T]>();
-
-  useMemo(() => {
-    if (previousArgsRef.current) {
-      const [eventName, listener] = previousArgsRef.current;
-      lynx.getJSModule('GlobalEventEmitter').removeListener(eventName, listener);
-    }
-    lynx.getJSModule('GlobalEventEmitter').addListener(eventName, listener);
-    previousArgsRef.current = [eventName, listener];
-  }, [eventName, listener]);
-
-  useEffect(() => {
-    return () => {
-      if (previousArgsRef.current) {
-        const [eventName, listener] = previousArgsRef.current;
-        lynx.getJSModule('GlobalEventEmitter').removeListener(eventName, listener);
-      }
-    };
-  }, []);
-}