@lynx-js/react 0.105.0

package/runtime/src/debug/printSnapshot.ts

@@ -0,0 +1,28 @@
+// 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

@@ -0,0 +1,54 @@
+// 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);
+    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

@@ -0,0 +1,53 @@
+// 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';
+
+const document: any = {};
+
+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;
+  };
+}
+
+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 { setupBackgroundDocument, setupDocument, document };

package/runtime/src/gesture/processGesture.ts

@@ -0,0 +1,77 @@
+import {
+  type GestureKind,
+  GestureTypeInner,
+  type ComposedGesture,
+  type BaseGesture,
+  type GestureConfig,
+} from './types.js';
+import { onWorkletCtxUpdate } from '@lynx-js/react/worklet-runtime/bindings';
+
+function isSerializedGesture(gesture: GestureKind): boolean {
+  return gesture.__isSerialized ?? false;
+}
+
+function getGestureInfo(gesture: BaseGesture, dom: FiberElement) {
+  const config = {
+    callbacks: [],
+  } as GestureConfig;
+  const baseGesture = gesture;
+
+  for (
+    const key of Object.keys(baseGesture.callbacks) as Array<
+      keyof BaseGesture['callbacks']
+    >
+  ) {
+    const callback = baseGesture.callbacks[key]!;
+    onWorkletCtxUpdate(callback, 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,
+  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 subGesture of (gesture as ComposedGesture).gestures) {
+      processGesture(dom, subGesture, { domSet: true });
+    }
+  } else {
+    const baseGesture = gesture as BaseGesture;
+
+    const { config, relationMap } = getGestureInfo(baseGesture, dom);
+    __SetGestureDetector(
+      dom,
+      baseGesture.id,
+      baseGesture.type,
+      config,
+      relationMap,
+    );
+  }
+}

package/runtime/src/gesture/processGestureBagkround.ts

@@ -0,0 +1,15 @@
+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) {
+    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

@@ -0,0 +1,39 @@
+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[];
+}
+
+export interface GestureConfig {
+  callbacks: {
+    name: string;
+    callback: Worklet;
+  }[];
+}

package/runtime/src/hooks/react.ts

@@ -0,0 +1,62 @@
+// 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,
+  useLayoutEffect as usePreactLayoutEffect,
+  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 usePreactLayoutEffect(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 usePreactLayoutEffect(effect, deps);
+}
+
+export {
+  // preact
+  useState,
+  useReducer,
+  useRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useEffect,
+  useCallback,
+  useMemo,
+  useContext,
+  useDebugValue,
+  useErrorBoundary,
+  useId,
+};

package/runtime/src/hooks/useLynxGlobalEventListener.ts

@@ -0,0 +1,59 @@
+// 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: unknown[]) => 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);
+      }
+    };
+  }, []);
+}