@lynx-js/react 0.105.0

package/runtime/src/backgroundSnapshot.ts

@@ -0,0 +1,452 @@
+// 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 } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { diffArrayAction, diffArrayLepus } from './hydrate.js';
+import { globalBackgroundSnapshotInstancesToRemove } from './lifecycle/patchUpdate.js';
+import { markRefToRemove } from './snapshot/ref.js';
+import { transformSpread } from './snapshot/spread.js';
+import {
+  DynamicPartType,
+  backgroundSnapshotInstanceManager,
+  snapshotManager,
+  traverseSnapshotInstance,
+} from './snapshot.js';
+import type { SerializedSnapshotInstance } from './snapshot.js';
+import {
+  SnapshotOperation,
+  __globalSnapshotPatch,
+  initGlobalSnapshotPatch,
+  takeGlobalSnapshotPatch,
+} from './snapshotPatch.js';
+import type { SnapshotPatch } from './snapshotPatch.js';
+import { isDirectOrDeepEqual } from './utils.js';
+import { onPostWorkletCtx } from './worklet/ctx.js';
+import { processGestureBackground } from './gesture/processGestureBagkround.js';
+import type { GestureKind } from './gesture/types.js';
+import { globalPipelineOptions } from './lynx/performance.js';
+
+export class BackgroundSnapshotInstance {
+  constructor(public type: string) {
+    let id;
+    id = this.__id = backgroundSnapshotInstanceManager.nextId += 1;
+    backgroundSnapshotInstanceManager.values.set(id, this);
+
+    __globalSnapshotPatch?.push(SnapshotOperation.CreateElement, type, id);
+  }
+
+  __id: number;
+  __values: any[] | undefined;
+
+  private __parent: BackgroundSnapshotInstance | null = null;
+  private __firstChild: BackgroundSnapshotInstance | null = null;
+  private __lastChild: BackgroundSnapshotInstance | null = null;
+  private __previousSibling: BackgroundSnapshotInstance | null = null;
+  private __nextSibling: BackgroundSnapshotInstance | null = null;
+
+  get parentNode(): BackgroundSnapshotInstance | null {
+    return this.__parent;
+  }
+
+  get nextSibling(): BackgroundSnapshotInstance | null {
+    return this.__nextSibling;
+  }
+
+  // get isConnected() {
+  //   return !!this.__parent;
+  // }
+
+  contains(child: BackgroundSnapshotInstance): boolean {
+    return child.parentNode === this;
+  }
+
+  // TODO: write tests for this
+  // This will be called in `lazy`/`Suspense`.
+  // We currently ignore this since we did not find a way to test.
+  /* v8 ignore start */
+  appendChild(child: BackgroundSnapshotInstance): void {
+    return this.insertBefore(child);
+  }
+  /* v8 ignore stop */
+
+  insertBefore(
+    node: BackgroundSnapshotInstance,
+    beforeNode?: BackgroundSnapshotInstance,
+  ): void {
+    __globalSnapshotPatch?.push(
+      SnapshotOperation.InsertBefore,
+      this.__id,
+      node.__id,
+      beforeNode?.__id,
+    );
+
+    // If the node already has a parent, remove it from its current parent
+    const p = node.__parent;
+    if (p) {
+      if (node.__previousSibling) {
+        node.__previousSibling.__nextSibling = node.__nextSibling;
+      } else {
+        p.__firstChild = node.__nextSibling;
+      }
+
+      if (node.__nextSibling) {
+        node.__nextSibling.__previousSibling = node.__previousSibling;
+      } else {
+        p.__lastChild = node.__previousSibling;
+      }
+    }
+
+    // If beforeNode is not provided, add the new node as the last child
+    if (beforeNode) {
+      // If beforeNode is provided, insert the new node before beforeNode
+      if (beforeNode.__previousSibling) {
+        beforeNode.__previousSibling.__nextSibling = node;
+        node.__previousSibling = beforeNode.__previousSibling;
+      } else {
+        this.__firstChild = node;
+        node.__previousSibling = null;
+      }
+      beforeNode.__previousSibling = node;
+      node.__nextSibling = beforeNode;
+      node.__parent = this;
+    } else {
+      if (this.__lastChild) {
+        this.__lastChild.__nextSibling = node;
+        node.__previousSibling = this.__lastChild;
+      } else {
+        this.__firstChild = node;
+        node.__previousSibling = null;
+      }
+      this.__lastChild = node;
+      node.__parent = this;
+      node.__nextSibling = null;
+    }
+  }
+
+  removeChild(node: BackgroundSnapshotInstance): void {
+    __globalSnapshotPatch?.push(
+      SnapshotOperation.RemoveChild,
+      this.__id,
+      node.__id,
+    );
+
+    if (node.__parent !== this) {
+      throw new Error('The node to be removed is not a child of this node.');
+    }
+
+    if (node.__previousSibling) {
+      node.__previousSibling.__nextSibling = node.__nextSibling;
+    } else {
+      this.__firstChild = node.__nextSibling;
+    }
+
+    if (node.__nextSibling) {
+      node.__nextSibling.__previousSibling = node.__previousSibling;
+    } else {
+      this.__lastChild = node.__previousSibling;
+    }
+
+    node.__parent = null;
+    node.__previousSibling = null;
+    node.__nextSibling = null;
+
+    traverseSnapshotInstance(node, v => {
+      v.__parent = null;
+      globalBackgroundSnapshotInstancesToRemove.push(v.__id);
+    });
+  }
+
+  get childNodes(): BackgroundSnapshotInstance[] {
+    const nodes: BackgroundSnapshotInstance[] = [];
+    let node = this.__firstChild;
+    while (node) {
+      nodes.push(node);
+      if (node === this.__lastChild) {
+        break;
+      }
+      node = node.__nextSibling;
+    }
+    return nodes;
+  }
+
+  setAttribute(key: string | number, value: any): void {
+    if (__PROFILE__) {
+      console.profile('setAttribute');
+    }
+    if (key === 'values') {
+      if (__globalSnapshotPatch) {
+        const oldValues = this.__values;
+        if (oldValues) {
+          for (let index = 0; index < value.length; index++) {
+            const { needUpdate, valueToCommit } = this.setAttributeImpl(value[index], oldValues[index], index);
+            if (needUpdate) {
+              __globalSnapshotPatch?.push(
+                SnapshotOperation.SetAttribute,
+                this.__id,
+                index,
+                valueToCommit,
+              );
+            }
+          }
+        } else {
+          const patch = [];
+          const length = value.length;
+          for (let index = 0; index < length; ++index) {
+            const { valueToCommit } = this.setAttributeImpl(value[index], null, index);
+            patch[index] = valueToCommit;
+          }
+          __globalSnapshotPatch?.push(
+            SnapshotOperation.SetAttributes,
+            this.__id,
+            patch,
+          );
+        }
+      }
+      this.__values = value;
+      if (__PROFILE__) {
+        console.profileEnd();
+      }
+      return;
+    }
+
+    // old path (`<__snapshot_xxxx_xxxx __0={} __1={} />` or `this.setAttribute(0, xxx)`)
+    // is reserved as slow path
+    const index = typeof key === 'string' ? Number(key.slice(2)) : key;
+    (this.__values ??= [])[index] = value;
+
+    __globalSnapshotPatch?.push(
+      SnapshotOperation.SetAttribute,
+      this.__id,
+      index,
+      value,
+    );
+    if (__PROFILE__) {
+      console.profileEnd();
+    }
+  }
+
+  private setAttributeImpl(newValue: any, oldValue: any, index: number): {
+    needUpdate: boolean;
+    valueToCommit: any;
+  } {
+    if (!newValue) {
+      if (oldValue && oldValue.__ref) {
+        markRefToRemove(`${this.__id}:${index}:`, oldValue);
+      }
+      return { needUpdate: oldValue !== newValue, valueToCommit: newValue };
+    }
+
+    const newType = typeof newValue;
+    if (newType === 'object') {
+      if (newValue.__spread) {
+        const oldSpread = oldValue ? oldValue.__spread : oldValue;
+        const newSpread = transformSpread(this, index, newValue);
+        const needUpdate = !isDirectOrDeepEqual(oldSpread, newSpread);
+        // use __spread to cache the transform result for next diff
+        newValue.__spread = newSpread;
+        if (needUpdate) {
+          if (oldSpread && oldSpread.ref) {
+            markRefToRemove(`${this.__id}:${index}:ref`, oldValue.ref);
+          }
+          for (let key in newSpread) {
+            const newSpreadValue = newSpread[key];
+            if (!newSpreadValue) {
+              continue;
+            }
+            if ((newSpreadValue as any)._wkltId) {
+              newSpread[key] = onPostWorkletCtx(newSpreadValue as Worklet);
+            } else if ((newSpreadValue as any).__isGesture) {
+              processGestureBackground(newSpreadValue as GestureKind);
+            } else if (key == '__lynx_timing_flag' && oldSpread?.[key] != newSpreadValue) {
+              if (globalPipelineOptions) {
+                globalPipelineOptions.needTimestamps = true;
+              }
+            }
+          }
+        }
+        return { needUpdate, valueToCommit: newSpread };
+      }
+      if (newValue.__ref) {
+        // force update to update ref value
+        // TODO: ref: optimize this. The ref update maybe can be done on the background thread to reduce updating.
+        // The old ref must have a place to be stored because it needs to be cleared when the main thread returns.
+        markRefToRemove(`${this.__id}:${index}:`, oldValue);
+        // update ref. On the main thread, the ref id will be replaced with value's sign when updating.
+        return { needUpdate: true, valueToCommit: newValue.__ref };
+      }
+      if (newValue._wkltId) {
+        return { needUpdate: true, valueToCommit: onPostWorkletCtx(newValue) };
+      }
+      if (newValue.__isGesture) {
+        processGestureBackground(newValue);
+        return { needUpdate: true, valueToCommit: newValue };
+      }
+      if (newValue.__ltf) {
+        // __lynx_timing_flag
+        if (globalPipelineOptions && oldValue?.__ltf != newValue.__ltf) {
+          globalPipelineOptions.needTimestamps = true;
+          return { needUpdate: true, valueToCommit: newValue };
+        }
+        return { needUpdate: false, valueToCommit: newValue };
+      }
+      return { needUpdate: !isDirectOrDeepEqual(oldValue, newValue), valueToCommit: newValue };
+    }
+    if (newType === 'function') {
+      if (newValue.__ref) {
+        markRefToRemove(`${this.__id}:${index}:`, oldValue);
+        return { needUpdate: true, valueToCommit: newValue.__ref };
+      }
+      /* event */
+      return { needUpdate: !oldValue, valueToCommit: 1 };
+    }
+    return { needUpdate: oldValue !== newValue, valueToCommit: newValue };
+  }
+}
+
+export function hydrate(
+  before: SerializedSnapshotInstance,
+  after: BackgroundSnapshotInstance,
+): SnapshotPatch {
+  initGlobalSnapshotPatch();
+
+  const helper2 = (afters: BackgroundSnapshotInstance[], parentId: number) => {
+    for (const child of afters) {
+      const id = child.__id;
+      __globalSnapshotPatch!.push(SnapshotOperation.CreateElement, child.type, id);
+      const values = child.__values;
+      if (values) {
+        child.__values = undefined;
+        child.setAttribute('values', values);
+      }
+      helper2(child.childNodes, id);
+      __globalSnapshotPatch!.push(SnapshotOperation.InsertBefore, parentId, id, undefined);
+    }
+  };
+
+  const helper = (
+    before: SerializedSnapshotInstance,
+    after: BackgroundSnapshotInstance,
+  ) => {
+    backgroundSnapshotInstanceManager.updateId(after.__id, before.id);
+    after.__values?.forEach((value, index) => {
+      const old = before.values![index];
+
+      if (value) {
+        if (value.__spread) {
+          // `value.__spread` my contain event ids using snapshot ids before hydration. Remove it.
+          delete value.__spread;
+          value = transformSpread(after, index, value);
+          for (let key in value) {
+            if (value[key] && value[key]._wkltId) {
+              onPostWorkletCtx(value[key]);
+            } else if (value[key] && value[key].__isGesture) {
+              processGestureBackground(value[key] as GestureKind);
+            }
+          }
+          after.__values![index]!.__spread = value;
+        } else if (value.__ref) {
+          if (old) {
+            // skip patch
+            value = old;
+          } else {
+            value = value.__ref;
+          }
+        } else if (typeof value === 'function') {
+          value = `${after.__id}:${index}:`;
+        }
+      }
+
+      if (value && value._wkltId) {
+        onPostWorkletCtx(value);
+      } else if (value && value.__isGesture) {
+        processGestureBackground(value);
+      }
+      if (!isDirectOrDeepEqual(value, old)) {
+        __globalSnapshotPatch!.push(
+          SnapshotOperation.SetAttribute,
+          after.__id,
+          index,
+          value,
+        );
+      }
+    });
+
+    const { slot } = snapshotManager.values.get(after.type)!;
+
+    const beforeChildNodes = before.children || [];
+    const afterChildNodes = after.childNodes;
+
+    if (!slot) {
+      return;
+    }
+
+    slot.forEach(([type], index) => {
+      switch (type) {
+        case DynamicPartType.Slot:
+        case DynamicPartType.MultiChildren: {
+          // TODO: the following null assertions are not 100% safe
+          const v1 = beforeChildNodes[index]!;
+          const v2 = afterChildNodes[index]!;
+          helper(v1, v2);
+          break;
+        }
+        case DynamicPartType.Children:
+        case DynamicPartType.ListChildren: {
+          const diffResult = diffArrayLepus(
+            beforeChildNodes,
+            afterChildNodes,
+            (a, b) => a.type === b.type,
+            (a, b) => {
+              helper(a, b);
+            },
+          );
+          diffArrayAction(
+            beforeChildNodes,
+            diffResult,
+            (node, target) => {
+              __globalSnapshotPatch!.push(
+                SnapshotOperation.CreateElement,
+                node.type,
+                node.__id,
+              );
+              helper2(node.childNodes, node.__id);
+              const values = node.__values;
+              if (values) {
+                node.__values = undefined;
+                node.setAttribute('values', values);
+              }
+              __globalSnapshotPatch!.push(
+                SnapshotOperation.InsertBefore,
+                before.id,
+                node.__id,
+                target?.id,
+              );
+              return undefined as unknown as SerializedSnapshotInstance;
+            },
+            node => {
+              __globalSnapshotPatch!.push(
+                SnapshotOperation.RemoveChild,
+                before.id,
+                node.id,
+              );
+            },
+            (node, target) => {
+              // changedList.push([SnapshotOperation.RemoveChild, before.id, node.id]);
+              __globalSnapshotPatch!.push(
+                SnapshotOperation.InsertBefore,
+                before.id,
+                node.id,
+                target?.id,
+              );
+            },
+          );
+          break;
+        }
+      }
+    });
+  };
+
+  helper(before, after);
+  return takeGlobalSnapshotPatch()!;
+}

package/runtime/src/compat/componentIs.ts

@@ -0,0 +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 type { FC } from 'react';
+
+// for better reuse if runtime is changed
+export function factory(
+  { createElement, useMemo, Suspense, lazy }: typeof import('react'),
+  loadLazyBundle: any,
+): FC<{ is: string }> {
+  /**
+   * @internal a polyfill for <component is=? />
+   */
+  const __ComponentIsPolyfill: FC<{ is: string }> = ({ is, ...props }) => {
+    if (typeof is !== 'string') {
+      lynx.reportError(
+        new Error(
+          'You must provide a string to props `is` when using syntax `<component is=? />`.',
+        ),
+      );
+      return null;
+    }
+    // @ts-ignore
+    const D = useMemo(() => lazy(() => loadLazyBundle(is)), [is]);
+    return createElement(Suspense, { key: is }, createElement(D, props));
+  };
+
+  return __ComponentIsPolyfill;
+}

package/runtime/src/compat/initData.ts

@@ -0,0 +1,140 @@
+// 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 { useLynxGlobalEventListener } from '../hooks/useLynxGlobalEventListener.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 }: typeof import('react') & {
+    useLynxGlobalEventListener: typeof useLynxGlobalEventListener;
+  },
+  prop: '__globalProps' | '__initData',
+  eventName: string,
+): Getter<{
+  Context: Context<Data>;
+  Provider: FC<{
+    children?: ReactNode | undefined;
+  }>;
+  Consumer: Consumer<Data>;
+  use: () => Data;
+  useChanged: (callback: (data: Data) => void) => void;
+}> {
+  const Context = createContext({} as Data);
+
+  const Provider: FC<PropsWithChildren> = ({ children }) => {
+    const [__, set] = useState<Data>(lynx[prop] as Data);
+
+    const handleChange = () => {
+      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(() => {
+      set(lynx[prop]);
+    });
+
+    return __ as Data;
+  };
+
+  const useChanged = (callback: (__: Data) => void) => {
+    if (!__LEPUS__) {
+      // @ts-ignore
+      useListener<(__: unknown) => void>(eventName, callback);
+    }
+  };
+
+  return {
+    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 && App.prototype.render;
+  if (!isClassComponent) {
+    // return as-is when not class component
+    return App;
+  }
+
+  class C extends App {
+    h?: Function;
+
+    constructor(props: any) {
+      super(props);
+      this.state = {
+        ...this.state,
+        ...lynx.__initData,
+      };
+
+      if (!__LEPUS__) {
+        // @ts-ignore
+        lynx.getJSModule('GlobalEventEmitter').addListener(
+          'onDataChanged',
+          this.h = () => {
+            this.setState(lynx.__initData);
+          },
+        );
+      }
+    }
+
+    override componentWillUnmount(): void {
+      super.componentWillUnmount?.();
+      if (!__LEPUS__) {
+        // @ts-ignore
+        lynx.getJSModule('GlobalEventEmitter').removeListener(
+          'onDataChanged',
+          this.h,
+        );
+      }
+    }
+  }
+
+  return C;
+}

package/runtime/src/compat/lynxComponent.ts

@@ -0,0 +1,80 @@
+// 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') {
+    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));
+        }
+      }
+    }
+  }
+  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'
+      || k.match(/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/)
+      || k.match(/^data-([A-Za-z]+)$/)
+    ) {
+      attributes[k] = jsxComponent.props[k];
+      delete jsxComponent.props[k];
+    }
+  });
+
+  return attributes;
+}

package/runtime/src/debug/debug.ts

@@ -0,0 +1,9 @@
+// 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 };