@lynx-js/react 0.105.0

package/runtime/src/hydrate.ts

@@ -0,0 +1,364 @@
+// 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 { __pendingListUpdates, componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { unref } from './snapshot/ref.js';
+import { DynamicPartType, SnapshotInstance } from './snapshot.js';
+import { isEmptyObject } from './utils.js';
+
+export interface DiffResult<K> {
+  $$diff: true;
+  // insert No.j to new
+  i: Record<number, K>;
+  // remove No.i from old
+  r: number[];
+  // move No.i from old to No.j of new
+  m: Record<number, number>;
+}
+
+export interface Typed {
+  type: string;
+}
+
+export function isEmptyDiffResult<K>(diffResult: DiffResult<K>): boolean {
+  const hasChanged = !isEmptyObject(diffResult.i)
+    || !isEmptyObject(diffResult.m) || diffResult.r.length > 0;
+  return !hasChanged;
+}
+
+export function diffArrayLepus<A extends Typed, B extends Typed>(
+  before: A[],
+  after: B[],
+  isSameType: (a: A, b: B) => boolean,
+  onDiffChildren: (a: A, b: B, oldIndex: number, newIndex: number) => void,
+): DiffResult<B> {
+  let lastPlacedIndex = 0;
+  const result: DiffResult<B> = {
+    $$diff: true,
+    i: {},
+    r: [],
+    m: {},
+  };
+  const beforeMap: Record<string, Set<[A, number]>> = {};
+
+  for (let i = 0; i < before.length; i++) {
+    const node = before[i]!;
+    (beforeMap[node.type] ??= new Set()).add([node, i]);
+  }
+
+  for (let i = 0; i < after.length; i++) {
+    const afterNode = after[i]!;
+    const beforeNodes = beforeMap[afterNode.type];
+    let beforeNode: [A, number];
+
+    if (
+      beforeNodes
+      && beforeNodes.size > 0
+      // @ts-expect-error TS does not know about iterator :)
+      && (([beforeNode] = beforeNodes), beforeNode)
+      && isSameType(beforeNode[0], afterNode)
+    ) {
+      // Reuse old node
+      beforeNodes.delete(beforeNode);
+
+      const oldIndex = beforeNode[1];
+      onDiffChildren(beforeNode[0], afterNode, oldIndex, i);
+      if (oldIndex < lastPlacedIndex) {
+        result.m[oldIndex] = i;
+        continue;
+      } else {
+        lastPlacedIndex = oldIndex;
+      }
+    } else {
+      // Create new node
+      result.i[i] = afterNode;
+    }
+  }
+  // Delete
+  for (const k in beforeMap) {
+    for (const [, i] of beforeMap[k]!) {
+      result.r.push(i);
+    }
+  }
+
+  return result;
+}
+
+// export function diffIterableLepus<A extends Typed, B extends Typed>(
+//   before: A[],
+//   after: Iterable<B>,
+//   isSameType: (a: A, b: B) => boolean,
+//   onDiffChildren: (a: A, b: B) => void
+// ): DiffResult<B> {
+//   let returnResult = EMPTY_DIFF_RESULT as DiffResult<B>;
+//   let lastPlacedIndex = 0;
+//   const result: DiffResult<B> = {
+//     $$diff: true,
+//     i: {},
+//     r: [],
+//     m: {},
+//   };
+//   const beforeMap: Record<string, Set<[A, number]>> = {};
+
+//   for (let i = 0; i < before.length; i++) {
+//     let node = before[i];
+//     (beforeMap[node.type] ??= new Set()).add([node, i]);
+//   }
+
+//   let i = 0;
+//   for (const afterNode of after) {
+//     const beforeNodes = beforeMap[afterNode.type];
+//     let beforeNode: [A, number];
+
+//     if (beforeNodes && (([beforeNode] = beforeNodes), beforeNode) && isSameType(beforeNode[0], afterNode)) {
+//       // Reuse old node
+//       beforeNodes.delete(beforeNode);
+
+//       const oldIndex = beforeNode[1];
+//       onDiffChildren(beforeNode[0], afterNode);
+//       if (oldIndex < lastPlacedIndex) {
+//         result.m[oldIndex] = i;
+//         returnResult = result;
+//         i++;
+//         continue;
+//       } else {
+//         lastPlacedIndex = oldIndex;
+//       }
+//     } else {
+//       // Create new node
+//       result.i[i] = afterNode;
+//       returnResult = result;
+//     }
+//     i++;
+//   }
+//   // delete
+//   for (const k in beforeMap) {
+//     for (const [, i] of beforeMap[k]) {
+//       result.r.push(i);
+//       returnResult = result;
+//     }
+//   }
+
+//   return result;
+// }
+
+export function diffArrayAction<T, K>(
+  before: T[],
+  diffResult: DiffResult<K>,
+  onInsert: (node: K, target: T | undefined) => T,
+  onRemove: (node: T) => void,
+  onMove: (node: T, target: T | undefined) => void,
+): T[] {
+  if (isEmptyDiffResult(diffResult)) {
+    return before;
+  }
+  const deleteSet = new Set(diffResult.r);
+  const { i: insertMap, m: placementMap } = diffResult;
+  const moveTempMap = new Map<number, T>();
+  let old: T | undefined;
+  let k = 0;
+  old = before[k];
+  // let current: T | null | undefined = null;
+  const result: T[] = [];
+  let i = 0; // index of the old list
+  let j = 0; // index of the new list
+  let remain = Object.keys(insertMap).length;
+  while (old || remain > 0) {
+    let keep = false;
+    if (old && deleteSet.has(j)) {
+      // delete
+      onRemove(old);
+    } else if (old && placementMap[j] !== undefined) {
+      // save node to re-use
+      moveTempMap.set(placementMap[j]!, old);
+      remain++;
+    } else {
+      // insert node
+      let newNode = old;
+      if (moveTempMap.has(i)) {
+        // insert re-used node
+        newNode = moveTempMap.get(i)!;
+        keep = true;
+        onMove(newNode, old);
+        remain--;
+      } else if (insertMap[i] !== undefined) {
+        // insert new node
+        newNode = onInsert(insertMap[i]!, old);
+        keep = true;
+        remain--;
+      }
+
+      result.push(newNode!);
+      i++;
+    }
+    if (old && !keep) {
+      old = before[++k];
+      j++;
+    }
+  }
+
+  return result;
+}
+
+export interface HydrationOptions {
+  skipUnRef?: boolean;
+  swap?: Record<number, number>;
+}
+
+export function hydrate(before: SnapshotInstance, after: SnapshotInstance, options?: HydrationOptions): void {
+  after.__elements = before.__elements;
+  after.__element_root = before.__element_root;
+
+  if (!(options?.skipUnRef)) {
+    unref(before, false);
+  }
+
+  let swap;
+  if (swap = options?.swap) {
+    swap[before.__id] = after.__id;
+  }
+
+  after.__values?.forEach((value, index) => {
+    const old = before.__values![index];
+    if (value !== old) {
+      after.__values![index] = old;
+      after.setAttribute(index, value);
+    }
+  });
+
+  const { slot } = after.__snapshot_def;
+
+  if (!slot) {
+    return;
+  }
+
+  const beforeChildNodes = before.childNodes;
+  const afterChildNodes = after.childNodes;
+
+  slot.forEach(([type, elementIndex], 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]!;
+        hydrate(v1, v2, options);
+        break;
+      }
+      case DynamicPartType.Children: {
+        const diffResult = diffArrayLepus(
+          beforeChildNodes,
+          afterChildNodes,
+          (a, b) => a.type === b.type,
+          (a, b) => {
+            hydrate(a, b, options);
+          },
+        );
+        diffArrayAction(
+          beforeChildNodes,
+          diffResult,
+          (node, target) => {
+            node.ensureElements();
+            __InsertElementBefore(
+              before.__elements![elementIndex]!,
+              node.__element_root!,
+              target?.__element_root,
+            );
+            return node;
+          },
+          node => {
+            __RemoveElement(
+              before.__elements![elementIndex]!,
+              node.__element_root!,
+            );
+          },
+          (node, target) => {
+            __RemoveElement(
+              before.__elements![elementIndex]!,
+              node.__element_root!,
+            );
+            __InsertElementBefore(
+              before.__elements![elementIndex]!,
+              node.__element_root!,
+              target?.__element_root,
+            );
+          },
+        );
+        break;
+      }
+      case DynamicPartType.ListChildren: {
+        const removals: number[] = [];
+        const insertions: number[] = [];
+        const updateAction: any[] = [];
+
+        const diffResult = diffArrayLepus(
+          beforeChildNodes,
+          afterChildNodes,
+          (a, b) => a.type === b.type,
+          (a, b, oldIndex, newIndex) => {
+            if (
+              JSON.stringify(a.__listItemPlatformInfo)
+                !== JSON.stringify(b.__listItemPlatformInfo)
+            ) {
+              updateAction.push({
+                ...b.__listItemPlatformInfo,
+                from: newIndex,
+                to: newIndex,
+                // no flush
+                flush: false,
+              });
+            }
+
+            // Mark list-item which is rendered (has `__elements`) as DELETE
+            // so list platform will call `enqueueComponent` on it
+            // and will call `componentAtIndex` on the inserted one
+            // In this way:
+            //  1. we make sure `<list/>` for hydrate is like a leaf node
+            //  2. we avoid hydrate so modifying recycleMap can be avoid
+            //  3. the delete list-item is recycled for later use, so no waste
+            if (a.__elements) {
+              removals.push(oldIndex);
+              insertions.push(newIndex);
+            }
+          },
+        );
+
+        for (const i of diffResult.r) {
+          removals.push(i);
+        }
+        for (const i in diffResult.i) {
+          insertions.push(Number(i));
+        }
+        for (const i in diffResult.m) {
+          removals.push(Number(i));
+          insertions.push(diffResult.m[i]!);
+        }
+        insertions.sort((a, b) => a - b);
+        removals.sort((a, b) => a - b);
+
+        const info = {
+          insertAction: insertions.map((it) => ({
+            position: it,
+            type: afterChildNodes[it]!.type,
+            ...afterChildNodes[it]!.__listItemPlatformInfo,
+          })),
+          removeAction: removals,
+          updateAction,
+        };
+
+        const listElement = before.__elements![elementIndex]!;
+        __SetAttribute(listElement, 'update-list-info', info);
+        __UpdateListCallbacks(
+          listElement,
+          componentAtIndexFactory(afterChildNodes),
+          enqueueComponentFactory(),
+        );
+
+        // The `before` & `after` target to the same list element, so we need to
+        // avoid the newly created list's (behind snapshot instance `after`) "update-list-info" being recorded.
+        delete __pendingListUpdates.values[after.__id];
+      }
+    }
+  });
+}

package/runtime/src/index.ts

@@ -0,0 +1,89 @@
+// 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 './lynx.js';
+import './lynx/component.js';
+import {
+  Children,
+  Component,
+  Fragment,
+  PureComponent,
+  Suspense,
+  lazy as backgroundLazy,
+  createContext,
+  createElement,
+  createRef,
+  forwardRef,
+  isValidElement,
+  memo,
+  useSyncExternalStore,
+} from 'preact/compat';
+
+import {
+  useCallback,
+  useContext,
+  useDebugValue,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from './hooks/react.js';
+import { mainThreadLazy } from './lynx/lazy-bundle.js';
+
+export { Component, createContext } from 'preact';
+export { PureComponent } from 'preact/compat';
+export * from './hooks/react.js';
+
+const lazy: typeof import('preact/compat').lazy = __LEPUS__
+  ? mainThreadLazy
+  : backgroundLazy;
+
+/**
+ * @internal
+ */
+export default {
+  // hooks
+  useState,
+  useReducer,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useImperativeHandle,
+  useMemo,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useSyncExternalStore,
+
+  createContext,
+  createRef,
+  Fragment,
+  isValidElement,
+  Children,
+  Component,
+  PureComponent,
+  memo,
+  forwardRef,
+  Suspense,
+  lazy,
+  createElement,
+};
+
+export {
+  Children,
+  createRef,
+  Fragment,
+  isValidElement,
+  memo,
+  forwardRef,
+  Suspense,
+  lazy,
+  createElement,
+  useSyncExternalStore,
+};
+
+export * from './lynx-api.js';

package/runtime/src/internal.ts

@@ -0,0 +1,60 @@
+// 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 { Suspense, createElement, lazy } from 'preact/compat';
+import type { FC } from 'react';
+
+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, snapshotManager, __page, __pageId, createSnapshot } from './snapshot.js';
+
+export { __page, __pageId, __root };
+
+export { SnapshotInstance, snapshotCreateList, createSnapshot, snapshotManager };
+
+export const __DynamicPartSlot: DynamicPartType = DynamicPartType.Slot;
+export const __DynamicPartMultiChildren: DynamicPartType = DynamicPartType.MultiChildren;
+export const __DynamicPartChildren: DynamicPartType = DynamicPartType.Children;
+export const __DynamicPartListChildren: DynamicPartType = DynamicPartType.ListChildren;
+export const __DynamicPartChildren_0: [DynamicPartType, number][] = [[DynamicPartType.Children, 0]];
+
+export { updateSpread } from './snapshot/spread.js';
+export { updateEvent } from './snapshot/event.js';
+export { updateRef, transformRef } from './snapshot/ref.js';
+export { updateWorkletEvent } from './snapshot/workletEvent.js';
+export { updateWorkletRef } from './snapshot/workletRef.js';
+export { updateGesture } from './snapshot/gesture.js';
+export { updateListItemPlatformInfo } from './snapshot/platformInfo.js';
+
+export {
+  options,
+  // Component is not an internal API, but refresh needs it from 'react/internal'
+  Component,
+} from 'preact';
+export type { Options } from 'preact';
+
+export { loadDynamicJS, __dynamicImport } from './lynx/dynamic-js.js';
+
+export { withInitDataInState } from './compat/initData.js';
+
+export { wrapWithLynxComponent } from './compat/lynxComponent.js';
+
+/**
+ * @internal a polyfill for <component is=? />
+ */
+export const __ComponentIsPolyfill: FC<{ is: string }> = /* @__PURE__ */ factory2(
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+  { Suspense, lazy, createElement, useMemo } as any,
+  loadLazyBundle,
+);
+
+export { loadLazyBundle } from './lynx/lazy-bundle.js';
+
+export { transformToWorklet } from './worklet/runWorklet.js';
+export { registerWorkletOnBackground } from './worklet/hmr.js';
+
+export { loadWorkletRuntime } from '@lynx-js/react/worklet-runtime/bindings';

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

@@ -0,0 +1,40 @@
+// 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 { createContext } from 'preact';
+import { lazy } from 'preact/compat';
+
+import {
+  ComponentFromReactRuntime as Component,
+  ComponentFromReactRuntime as PureComponent,
+} from '../compat/lynxComponent.js';
+import { useCallback, useEffect, useMemo, useReducer, useState } from '../hooks/react.js';
+
+/* v8 ignore next 3 */
+function __runInJS<T>(value: T): T | undefined | null {
+  return value;
+}
+
+// should mirror @lynx-js/react-runtime's exports
+export { ComponentFromReactRuntime as Component } from '../compat/lynxComponent.js';
+export { ComponentFromReactRuntime as PureComponent } from '../compat/lynxComponent.js';
+export { createContext } from 'preact';
+export { lazy } from 'preact/compat';
+export { useState, useReducer, useEffect, useMemo, useCallback /*, useInstance */ } from '../hooks/react.js';
+export { __runInJS };
+
+/**
+ * @internal
+ */
+export default {
+  Component,
+  PureComponent,
+  createContext,
+  lazy,
+  useState,
+  useReducer,
+  useEffect,
+  useMemo,
+  useCallback,
+  __runInJS,
+};

package/runtime/src/lifecycle/delayUnmount.ts

@@ -0,0 +1,77 @@
+// 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 { VNode } from 'preact';
+
+import { CATCH_ERROR, COMPONENT, DIFF, VNODE } from '../renderToOpcodes/constants.js';
+
+type FakeVNode = VNode;
+type DelayedUnmounts = (() => void)[];
+let delayedUnmounts: DelayedUnmounts = [];
+let parentVNode: FakeVNode | undefined;
+
+function takeDelayedUnmounts(): DelayedUnmounts {
+  const ret = delayedUnmounts;
+  delayedUnmounts = [];
+  // not clearing `parentVNode` here, which would be cleared before next diff in `options[DIFF]`
+  return ret;
+}
+
+function runDelayedUnmounts(delayedUnmounts: DelayedUnmounts): void {
+  for (const fn of delayedUnmounts) {
+    fn();
+  }
+}
+
+/**
+ * Delay `componentWillUnmount` until main thread patching finishes.
+ */
+function initDelayUnmount(): void {
+  const oldUnmount = options.unmount;
+  options.unmount = (vnode: VNode) => {
+    if (!parentVNode) {
+      // `parentVNode` is the first vnode to unmount,
+      // which is needed to find proper error boundary when running `componentWillUnmount`.
+      // Shallow copy vnode to prevent modification to vnode in preact unmounting process.
+      parentVNode = { ...vnode };
+
+      const oldDiff = options[DIFF] as (vnode: VNode) => void;
+      options[DIFF] = (vnode: VNode) => {
+        // A new diff indicates that the unmounting process of parentVNode is finished.
+        parentVNode = undefined;
+        options[DIFF] = oldDiff;
+        oldDiff?.(vnode);
+      };
+    }
+
+    const component = vnode[COMPONENT];
+    if (component) {
+      if (oldUnmount) {
+        const vnode_clone = { ...vnode };
+        delayedUnmounts.push(() => {
+          const v = vnode_clone[COMPONENT]![VNODE] as VNode<{}> | null;
+          vnode_clone[COMPONENT]![VNODE] = vnode_clone;
+          oldUnmount?.(vnode_clone);
+          vnode_clone[COMPONENT]![VNODE] = v;
+        });
+      }
+      if (component.componentWillUnmount) {
+        const unmount = component.componentWillUnmount;
+        // @ts-ignore
+        component.componentWillUnmount = undefined;
+        const parentVNode_ = parentVNode;
+        delayedUnmounts.push(() => {
+          try {
+            component.componentWillUnmount = unmount;
+            component.componentWillUnmount();
+          } catch (e) {
+            options[CATCH_ERROR](e, parentVNode_);
+          }
+        });
+      }
+    }
+  };
+}
+
+export { initDelayUnmount, takeDelayedUnmounts, runDelayedUnmounts };

package/runtime/src/lifecycle/destroy.ts

@@ -0,0 +1,26 @@
+// 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 { render } from 'preact';
+
+import { __root } from '../root.js';
+import { globalCommitTaskMap } from './patchUpdate.js';
+
+function destroyBackground(): void {
+  if (__PROFILE__) {
+    console.profile('destroyBackground');
+  }
+
+  render(null, __root as any);
+
+  globalCommitTaskMap.forEach(task => {
+    task();
+  });
+  globalCommitTaskMap.clear();
+
+  if (__PROFILE__) {
+    console.profileEnd();
+  }
+}
+
+export { destroyBackground };

package/runtime/src/lifecycle/pass.ts

@@ -0,0 +1,14 @@
+// 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.
+let reloadVersion = 0;
+
+function getReloadVersion(): number {
+  return reloadVersion;
+}
+
+function increaseReloadVersion(): number {
+  return ++reloadVersion;
+}
+
+export { getReloadVersion, increaseReloadVersion };