@lynx-js/react 0.105.1 → 0.106.0

package/runtime/src/lynx/tt.ts

@@ -1,21 +1,71 @@
 // 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 { options } from 'preact';
+import type { VNode } from 'preact';
 
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
 import { PerformanceTimingKeys, beginPipeline, markTiming } from './performance.js';
 import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
-import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patchUpdate.js';
+import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
 import { reloadBackground } from '../lifecycle/reload.js';
-import { runWithForce } from '../lynx.js';
-import { CHILDREN } from '../renderToOpcodes/constants.js';
+import { renderBackground } from '../lifecycle/render.js';
+import { CHILDREN, COMPONENT, DIFF, DIFFED, FORCE } from '../renderToOpcodes/constants.js';
 import { __root } from '../root.js';
 import { globalRefsToSet, updateBackgroundRefs } from '../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../snapshot.js';
 import { destroyWorklet } from '../worklet/destroy.js';
 
+export function runWithForce(cb: () => void): void {
+  // save vnode and its `_component` in WeakMap
+  const m = new WeakMap<VNode, any>();
+
+  const oldDiff = options[DIFF];
+
+  options[DIFF] = (vnode: VNode) => {
+    if (oldDiff) {
+      oldDiff(vnode);
+    }
+
+    // when `options[DIFF]` is called, a newVnode is passed in
+    // so its `vnode[COMPONENT]` should be null,
+    // but it will be set later
+    Object.defineProperty(vnode, COMPONENT, {
+      configurable: true,
+      set(c) {
+        m.set(vnode, c);
+        if (c) {
+          c[FORCE] = true;
+        }
+      },
+      get() {
+        return m.get(vnode);
+      },
+    });
+  };
+
+  const oldDiffed = options[DIFFED];
+
+  options[DIFFED] = (vnode: VNode) => {
+    if (oldDiffed) {
+      oldDiffed(vnode);
+    }
+
+    // delete is a reverse operation of previous `Object.defineProperty`
+    delete vnode[COMPONENT];
+    // restore
+    vnode[COMPONENT] = m.get(vnode);
+  };
+
+  try {
+    cb();
+  } finally {
+    options[DIFF] = oldDiff as (vnode: VNode) => void;
+    options[DIFFED] = oldDiffed as (vnode: VNode) => void;
+  }
+}
+
 function injectTt(): void {
   // @ts-ignore
   const tt = lynxCoreInject.tt;
@@ -76,7 +126,7 @@ async function OnLifecycleEvent([type, data]: [string, any]) {
           try {
             publishEvent([idStr, ...rest].join(':'), data);
           } catch (e) {
-            lynx.reportError(e);
+            lynx.reportError(e as Error);
           }
         });
         delayedEvents.length = 0;
@@ -94,14 +144,13 @@ async function OnLifecycleEvent([type, data]: [string, any]) {
       if (__PROFILE__) {
         console.profileEnd();
       }
-      markTiming(PerformanceTimingKeys.pack_changes_start);
       // console.debug("********** After hydration:");
       // printSnapshotInstance(__root as BackgroundSnapshotInstance);
       if (__PROFILE__) {
         console.profile('commitChanges');
       }
       const commitTaskId = genCommitTaskId();
-      await commitPatchUpdate({ snapshotPatch }, { commitTaskId, isHydration: true });
+      await commitPatchUpdate({ patchList: [{ snapshotPatch, id: commitTaskId }] }, { isHydration: true });
       updateBackgroundRefs(commitTaskId);
       globalCommitTaskMap.forEach((commitTask, id) => {
         if (id > commitTaskId) {
@@ -139,7 +188,7 @@ function flushDelayedLifecycleEvents(): void {
       try {
         OnLifecycleEvent(e);
       } catch (e) {
-        lynx.reportError(e);
+        lynx.reportError(e as Error);
       }
     });
     delayedLifecycleEvents.length = 0;
@@ -183,7 +232,7 @@ function updateGlobalProps(newData: Record<string, any>): void {
   // This is already done because updateFromRoot will consume all dirty flags marked by
   // the setState, and setState's flush will be a noop. No extra diffs will be needed.
   Promise.resolve().then(() => {
-    runWithForce(() => render(__root.__jsx, __root as any));
+    runWithForce(() => renderBackground(__root.__jsx, __root as any));
   });
   lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged');
 }

package/runtime/src/lynx-api.ts

@@ -1,13 +1,13 @@
 // 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 { createContext, createElement } from 'preact/compat';
 import { useState } from 'preact/hooks';
 import type { Consumer, FC, ReactNode } from 'react';
 
 import { factory, withInitDataInState } from './compat/initData.js';
 import { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
+import { renderBackground } from './lifecycle/render.js';
 import { LifecycleConstant } from './lifecycleConstant.js';
 import { flushDelayedLifecycleEvents } from './lynx/tt.js';
 import { __root } from './root.js';
@@ -86,7 +86,7 @@ export const root: Root = {
       __root.__jsx = jsx;
     } else {
       __root.__jsx = jsx;
-      render(jsx, __root as any);
+      renderBackground(jsx, __root as any);
       if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {}
       else {
         lynx.getNativeApp().callLepusMethod(LifecycleConstant.jsReady, {});
@@ -366,7 +366,7 @@ export interface Lynx {
    * ```
    * @public
    */
-  registerDataProcessors: (dataProcessorDefinition: DataProcessorDefinition) => void;
+  registerDataProcessors: (dataProcessorDefinition?: DataProcessorDefinition) => void;
 }
 
 export { runOnMainThread } from './worklet/runOnMainThread.js';

package/runtime/src/lynx.ts

@@ -2,81 +2,31 @@
 // 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';
 // to make sure preact's hooks to register earlier than ours
 import './hooks/react.js';
 
 import { initProfileHook } from './debug/profile.js';
 import { document, setupBackgroundDocument } from './document.js';
 import { initDelayUnmount } from './lifecycle/delayUnmount.js';
-import { injectUpdatePatch, replaceCommitHook, replaceRequestAnimationFrame } from './lifecycle/patchUpdate.js';
+import { replaceCommitHook, replaceRequestAnimationFrame } from './lifecycle/patch/commit.js';
+import { injectUpdateMainThread } from './lifecycle/patch/updateMainThread.js';
 import { injectCalledByNative } from './lynx/calledByNative.js';
 import { setupLynxEnv } from './lynx/env.js';
 import { injectLepusMethods } from './lynx/injectLepusMethods.js';
 import { initTimingAPI } from './lynx/performance.js';
 import { injectTt } from './lynx/tt.js';
-import { COMPONENT, DIFF, DIFFED, FORCE } from './renderToOpcodes/constants.js';
 
 // @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
 if (__LEPUS__ && typeof globalThis.processEvalResult === 'undefined') {
   // @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
-  globalThis.processEvalResult = <T>(result: (schema: string) => T, schema: string) => {
-    return result(schema);
+  globalThis.processEvalResult = <T>(result: ((schema: string) => T) | undefined, schema: string) => {
+    return result?.(schema);
   };
 }
 
-export function runWithForce(cb: () => void): void {
-  // save vnode and its `_component` in WeakMap
-  const m = new WeakMap<VNode, any>();
-
-  const oldDiff = options[DIFF];
-
-  options[DIFF] = (vnode: VNode) => {
-    if (oldDiff) {
-      oldDiff(vnode);
-    }
-
-    // when `options[DIFF]` is called, a newVnode is passed in
-    // so its `vnode[COMPONENT]` should be null,
-    // but it will be set later
-    Object.defineProperty(vnode, COMPONENT, {
-      configurable: true,
-      set(c) {
-        m.set(vnode, c);
-        if (c) {
-          c[FORCE] = true;
-        }
-      },
-      get() {
-        return m.get(vnode);
-      },
-    });
-  };
-
-  const oldDiffed = options[DIFFED];
-
-  options[DIFFED] = (vnode: VNode) => {
-    if (oldDiffed) {
-      oldDiffed(vnode);
-    }
-
-    // delete is a reverse operation of previous `Object.defineProperty`
-    delete vnode[COMPONENT];
-    // restore
-    vnode[COMPONENT] = m.get(vnode);
-  };
-
-  try {
-    cb();
-  } finally {
-    options[DIFF] = oldDiff as (vnode: VNode) => void;
-    options[DIFFED] = oldDiffed as (vnode: VNode) => void;
-  }
-}
-
 if (__LEPUS__) {
   injectCalledByNative();
-  injectUpdatePatch();
+  injectUpdateMainThread();
   if (__DEV__) {
     injectLepusMethods();
   }

package/runtime/src/opcodes.ts

@@ -1,6 +1,7 @@
 // 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 { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
 import { CHILDREN } from './renderToOpcodes/constants.js';
 import { SnapshotInstance } from './snapshot.js';
 
@@ -11,6 +12,90 @@ const enum Opcode {
   Text,
 }
 
+interface SSRFiberElement {
+  ssrID: string;
+}
+export type SSRSnapshotInstance = [string, number, SSRFiberElement[]];
+
+export function ssrHydrateByOpcodes(
+  opcodes: any[],
+  into: SnapshotInstance,
+  refMap?: Record<string, FiberElement>,
+): void {
+  let top: SnapshotInstance & { __pendingElements?: SSRFiberElement[] } = into;
+  const stack: SnapshotInstance[] = [into];
+  for (let i = 0; i < opcodes.length;) {
+    const opcode = opcodes[i];
+    switch (opcode) {
+      case Opcode.Begin: {
+        const p = top;
+        const [type, __id, elements] = opcodes[i + 1] as SSRSnapshotInstance;
+        top = new SnapshotInstance(type, __id);
+        top.__pendingElements = elements;
+        p.insertBefore(top);
+        stack.push(top);
+
+        i += 2;
+        break;
+      }
+      case Opcode.End: {
+        // @ts-ignore
+        top[CHILDREN] = undefined;
+
+        top.__elements = top.__pendingElements!.map(({ ssrID }) => refMap![ssrID]!);
+        top.__element_root = top.__elements[0];
+        delete top.__pendingElements;
+
+        if (top.__snapshot_def.isListHolder) {
+          const listElement = top.__element_root!;
+          const listElementUniqueID = __GetElementUniqueID(listElement);
+          const signMap = gSignMap[listElementUniqueID] = new Map();
+          gRecycleMap[listElementUniqueID] = new Map();
+          const enqueueFunc = enqueueComponentFactory();
+          const componentAtIndex = componentAtIndexFactory(top.childNodes);
+          for (const child of top.childNodes) {
+            if (child.__element_root) {
+              const childElementUniqueID = __GetElementUniqueID(child.__element_root);
+              signMap.set(childElementUniqueID, child);
+              enqueueFunc(
+                listElement,
+                listElementUniqueID,
+                childElementUniqueID,
+              );
+            }
+          }
+          __UpdateListCallbacks(listElement, componentAtIndex, enqueueFunc);
+        }
+
+        stack.pop();
+        const p = stack[stack.length - 1];
+        top = p!;
+
+        i += 1;
+        break;
+      }
+      case Opcode.Attr: {
+        const key = opcodes[i + 1];
+        const value = opcodes[i + 2];
+        top.setAttribute(key, value);
+
+        i += 3;
+        break;
+      }
+      case Opcode.Text: {
+        const [[type, __id, elements], text] = opcodes[i + 1] as [SSRSnapshotInstance, string];
+        const s = new SnapshotInstance(type, __id);
+        s.setAttribute(0, text);
+        top.insertBefore(s);
+        s.__elements = elements.map(({ ssrID }) => refMap![ssrID]!);
+        s.__element_root = s.__elements[0];
+        i += 2;
+        break;
+      }
+    }
+  }
+}
+
 export function renderOpcodesInto(opcodes: any[], into: SnapshotInstance): void {
   let top: SnapshotInstance = into;
   const stack: SnapshotInstance[] = [into];
@@ -24,6 +109,7 @@ export function renderOpcodesInto(opcodes: any[], into: SnapshotInstance): void
         if (top.__parent) {
           // already inserted
           top = new SnapshotInstance(top.type);
+          opcodes[i + 1] = top;
         }
         p.insertBefore(top);
         stack.push(top);
@@ -53,6 +139,10 @@ export function renderOpcodesInto(opcodes: any[], into: SnapshotInstance): void
       case Opcode.Text: {
         const text = opcodes[i + 1];
         const s = new SnapshotInstance(null as unknown as string);
+        if (__ENABLE_SSR__) {
+          // We need store the just created SnapshotInstance, or it will be lost when we leave the function
+          opcodes[i + 1] = [s, text];
+        }
         s.setAttribute(0, text);
         top.insertBefore(s);
 

package/runtime/src/root.ts

@@ -4,7 +4,7 @@
 import { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
 import { SnapshotInstance } from './snapshot.js';
 
-let __root: (SnapshotInstance | BackgroundSnapshotInstance) & { __jsx?: React.ReactNode };
+let __root: (SnapshotInstance | BackgroundSnapshotInstance) & { __jsx?: React.ReactNode; __opcodes?: any[] };
 
 function setRoot(root: typeof __root): void {
   __root = root;

package/runtime/src/snapshot/ref.ts

@@ -3,13 +3,13 @@
 // LICENSE file in the root directory of this source tree.
 import type { Worklet, WorkletRef } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { nextCommitTaskId } from '../lifecycle/patchUpdate.js';
+import { nextCommitTaskId } from '../lifecycle/patch/commit.js';
 import { SnapshotInstance, backgroundSnapshotInstanceManager } from '../snapshot.js';
 import { workletUnRef } from './workletRef.js';
 
 let globalRefPatch: Record<string, number | null> = {};
-let globalRefsToRemove: Map</* commitId */ number, Map</* sign */ string, /* ref */ any>> = /* @__PURE__ */ new Map();
-let globalRefsToSet: Map</* commitId */ number, Record<string, number>> = /* @__PURE__ */ new Map();
+const globalRefsToRemove: Map</* commitId */ number, Map</* sign */ string, /* ref */ any>> = /* @__PURE__ */ new Map();
+const globalRefsToSet: Map</* commitId */ number, Record<string, number>> = /* @__PURE__ */ new Map();
 let nextRefId = 1;
 
 function unref(snapshot: SnapshotInstance, recursive: boolean): void {
@@ -35,7 +35,7 @@ function unref(snapshot: SnapshotInstance, recursive: boolean): void {
 function applyRef(ref: any, value: any) {
   // TODO: ref: exceptions thrown in user functions should be able to be caught by an Error Boundary
   if (typeof ref == 'function') {
-    let hasRefUnmount = typeof ref._unmount == 'function';
+    const hasRefUnmount = typeof ref._unmount == 'function';
     if (hasRefUnmount) {
       // @ts-ignore TS doesn't like moving narrowing checks into variables
       ref._unmount();
@@ -54,7 +54,7 @@ function updateBackgroundRefs(commitId: number): void {
   const oldRefMap = globalRefsToRemove.get(commitId);
   if (oldRefMap) {
     globalRefsToRemove.delete(commitId);
-    for (let ref of oldRefMap.values()) {
+    for (const ref of oldRefMap.values()) {
       applyRef(ref, null);
     }
   }
@@ -65,10 +65,7 @@ function updateBackgroundRefs(commitId: number): void {
       const ref = backgroundSnapshotInstanceManager.getValueBySign(sign);
       if (ref) {
         // TODO: ref: support __REF_FIRE_IMMEDIATELY__
-        const v = newRefMap[sign]
-          && lynx.createSelectorQuery().selectUniqueID(
-            newRefMap[sign],
-          );
+        const v = newRefMap[sign] && lynx.createSelectorQuery().selectUniqueID(newRefMap[sign]);
         applyRef(ref, v);
       }
     }

package/runtime/src/snapshot.ts

@@ -6,7 +6,7 @@ import type { Worklet, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bin
 import type { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
 import { ListUpdateInfoRecording, __pendingListUpdates, snapshotDestroyList } from './list.js';
 import { unref } from './snapshot/ref.js';
-import { SnapshotOperation, __globalSnapshotPatch } from './snapshotPatch.js';
+import { SnapshotOperation, __globalSnapshotPatch } from './lifecycle/patch/snapshotPatch.js';
 import { isDirectOrDeepEqual } from './utils.js';
 
 export const enum DynamicPartType {

package/runtime/src/worklet/functionCall.ts

@@ -11,7 +11,7 @@ import { IndexMap } from './indexMap.js';
 let resolveMap: IndexMap<(value: any) => void> | undefined;
 
 function initReturnValueListener(): void {
-  const context: RuntimeProxy = __JS__ ? lynx.getCoreContext() : lynx.getJSContext();
+  const context: RuntimeProxy = __JS__ ? lynx.getCoreContext!() : lynx.getJSContext!();
 
   resolveMap = new IndexMap();
   context.addEventListener(WorkletEvents.FunctionCallRet, onFunctionCallRet);

package/runtime/src/worklet/hmr.ts

@@ -1,7 +1,7 @@
 // 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 { SnapshotOperation, __globalSnapshotPatch } from '../snapshotPatch.js';
+import { SnapshotOperation, __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
 
 const workletHashSet: Set<string> = /* @__PURE__ */ new Set();
 

package/runtime/src/worklet/runOnBackground.ts

@@ -28,12 +28,12 @@ function init() {
   }
 
   execIdMap = new WorkletExecIdMap();
-  lynx.getCoreContext().addEventListener(WorkletEvents.runOnBackground, runJSFunction);
-  lynx.getCoreContext().addEventListener(WorkletEvents.releaseBackgroundWorkletCtx, releaseBackgroundWorkletCtx);
+  lynx.getCoreContext!().addEventListener(WorkletEvents.runOnBackground, runJSFunction);
+  lynx.getCoreContext!().addEventListener(WorkletEvents.releaseBackgroundWorkletCtx, releaseBackgroundWorkletCtx);
 
   destroyTasks.push(() => {
-    lynx.getCoreContext().removeEventListener(WorkletEvents.runOnBackground, runJSFunction);
-    lynx.getCoreContext().removeEventListener(WorkletEvents.releaseBackgroundWorkletCtx, releaseBackgroundWorkletCtx);
+    lynx.getCoreContext!().removeEventListener(WorkletEvents.runOnBackground, runJSFunction);
+    lynx.getCoreContext!().removeEventListener(WorkletEvents.releaseBackgroundWorkletCtx, releaseBackgroundWorkletCtx);
     execIdMap = undefined;
   });
 }

package/runtime/src/worklet/workletRef.ts

@@ -89,7 +89,7 @@ export class MainThreadRef<T> extends WorkletRef<T> {
     super(initValue, 'main-thread');
     if (__JS__) {
       const id = this._id;
-      this._lifecycleObserver = lynx.getNativeApp().createJSObjectDestructionObserver(() => {
+      this._lifecycleObserver = lynx.getNativeApp().createJSObjectDestructionObserver?.(() => {
         lynx.getCoreContext?.().dispatchEvent({
           type: WorkletEvents.releaseWorkletRef,
           data: {