@lynx-js/react 0.105.2 → 0.106.1

package/runtime/src/lynx/calledByNative.ts

@@ -13,8 +13,51 @@ import { renderMainThread } from '../lifecycle/render.js';
 import { hydrate } from '../hydrate.js';
 import { markTiming, PerformanceTimingKeys, setPipeline } from './performance.js';
 import { __pendingListUpdates } from '../list.js';
+import { ssrHydrateByOpcodes } from '../opcodes.js';
+
+function ssrEncode() {
+  const { __opcodes } = __root;
+  delete __root.__opcodes;
+
+  const oldToJSON = SnapshotInstance.prototype.toJSON;
+  SnapshotInstance.prototype.toJSON = function(this: SnapshotInstance): any {
+    return [
+      this.type,
+      this.__id,
+      this.__elements,
+    ];
+  };
+
+  try {
+    return JSON.stringify({ __opcodes, __root_values: __root.__values });
+  } finally {
+    SnapshotInstance.prototype.toJSON = oldToJSON;
+  }
+}
+
+function ssrHydrate(info: string) {
+  const nativePage = __GetPageElement();
+  if (!nativePage) {
+    throw new Error('SSR Hydration Failed! Please check if the SSR content loaded successfully!');
+  }
+
+  const refsMap = __GetTemplateParts(nativePage);
+
+  const { __opcodes, __root_values } = JSON.parse(info);
+  __root_values && __root.setAttribute('values', __root_values);
+  ssrHydrateByOpcodes(__opcodes, __root as SnapshotInstance, refsMap);
+
+  (__root as SnapshotInstance).__elements = [nativePage];
+  (__root as SnapshotInstance).__element_root = nativePage;
+}
 
 function injectCalledByNative(): void {
+  if (process.env['NODE_ENV'] !== 'test') {
+    if (__FIRST_SCREEN_SYNC_TIMING__ !== 'jsReady' && __ENABLE_SSR__) {
+      throw new Error('`firstScreenSyncTiming` must be `jsReady` when SSR is enabled');
+    }
+  }
+
   const calledByNative: LynxCallByNative = {
     renderPage,
     updatePage,
@@ -23,9 +66,13 @@ function injectCalledByNative(): void {
       return null;
     },
     removeComponents: function(): void {},
+    ...(__ENABLE_SSR__ ? { ssrEncode, ssrHydrate } : {}),
   };
 
   Object.assign(globalThis, calledByNative);
+  Object.assign(globalThis, {
+    [LifecycleConstant.jsReady]: jsReady,
+  });
 }
 
 function renderPage(data: any): void {
@@ -46,10 +93,6 @@ function renderPage(data: any): void {
 
   if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
     jsReady();
-  } else {
-    Object.assign(globalThis, {
-      [LifecycleConstant.jsReady]: jsReady,
-    });
   }
 }
 

package/runtime/src/lynx/tt.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 { options, render } from 'preact';
+import { options } from 'preact';
 import type { VNode } from 'preact';
 
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
@@ -10,6 +10,7 @@ import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
 import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
 import { reloadBackground } from '../lifecycle/reload.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';
@@ -143,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) {
@@ -232,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, {});

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/types/react.docs.d.ts

@@ -48,7 +48,7 @@ export {
   useSyncExternalStore,
 } from 'react';
 
-export { useEffect, useLayoutEffect } from '../runtime/lib/hooks/react.js';
+export { useEffect, useLayoutEffect, useErrorBoundary } from '../runtime/lib/hooks/react.js';
 
 /**
  * Built-in React APIs