@lynx-js/react 0.106.0 → 0.106.2

package/runtime/src/lynx/calledByNative.ts

@@ -1,19 +1,18 @@
 // 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 { __page, setupPage, SnapshotInstance } from '../snapshot.js';
-// @ts-ignore
-import { render as renderToString } from '../renderToOpcodes/index.js';
-import { LifecycleConstant } from '../lifecycleConstant.js';
-import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
-import { isEmptyObject } from '../utils.js';
-import { __root, setRoot } from '../root.js';
+import { hydrate } from '../hydrate.js';
+import { isJSReady, jsReady, jsReadyEventIdSwap, resetJSReady } from '../lifecycle/event/jsReady.js';
 import { reloadMainThread } from '../lifecycle/reload.js';
 import { renderMainThread } from '../lifecycle/render.js';
-import { hydrate } from '../hydrate.js';
-import { markTiming, PerformanceTimingKeys, setPipeline } from './performance.js';
+import { LifecycleConstant } from '../lifecycleConstant.js';
 import { __pendingListUpdates } from '../list.js';
 import { ssrHydrateByOpcodes } from '../opcodes.js';
+import { __root, setRoot } from '../root.js';
+import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
+import { SnapshotInstance, __page, setupPage } from '../snapshot.js';
+import { isEmptyObject } from '../utils.js';
+import { PerformanceTimingKeys, markTiming, setPipeline } from './performance.js';
 
 function ssrEncode() {
   const { __opcodes } = __root;
@@ -52,10 +51,8 @@ function ssrHydrate(info: string) {
 }
 
 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');
-    }
+  if (process.env['NODE_ENV'] !== 'test' && __FIRST_SCREEN_SYNC_TIMING__ !== 'jsReady' && __ENABLE_SSR__) {
+    throw new Error('`firstScreenSyncTiming` must be `jsReady` when SSR is enabled');
   }
 
   const calledByNative: LynxCallByNative = {
@@ -77,8 +74,7 @@ function injectCalledByNative(): void {
 
 function renderPage(data: any): void {
   // reset `jsReady` state
-  isJSReady = false;
-  jsReadyEventIdSwap = {};
+  resetJSReady();
 
   lynx.__initData = data || {};
 
@@ -96,14 +92,13 @@ function renderPage(data: any): void {
   }
 }
 
-function updatePage(data: any, options?: UpdatePageOption | undefined): void {
+function updatePage(data: any, options?: UpdatePageOption): void {
   if (options?.reloadTemplate) {
     reloadMainThread(data, options);
     return;
   }
 
   if (options?.resetPageData) {
-    // @ts-ignore
     lynx.__initData = {};
   }
 
@@ -146,7 +141,7 @@ function updatePage(data: any, options?: UpdatePageOption | undefined): void {
   }
 }
 
-function updateGlobalProps(_data: any, options?: UpdatePageOption | undefined): void {
+function updateGlobalProps(_data: any, options?: UpdatePageOption): void {
   if (options) {
     __FlushElementTree(__page, options);
   } else {
@@ -154,21 +149,6 @@ function updateGlobalProps(_data: any, options?: UpdatePageOption | undefined):
   }
 }
 
-let isJSReady: boolean;
-let jsReadyEventIdSwap: Record<number, number>;
-function jsReady() {
-  __OnLifecycleEvent([
-    LifecycleConstant.firstScreen, /* FIRST_SCREEN */
-    {
-      root: JSON.stringify(__root),
-      refPatch: JSON.stringify(takeGlobalRefPatchMap()),
-      jsReadyEventIdSwap,
-    },
-  ]);
-  isJSReady = true;
-  jsReadyEventIdSwap = {};
-}
-
 /**
  * @internal
  */

package/runtime/src/lynx/lazy-bundle.ts

@@ -54,57 +54,63 @@ export const makeSyncThen = function<T>(result: T) {
  * @returns
  * @public
  */
-export function loadLazyBundle<
+export const loadLazyBundle: <
   T extends { default: React.ComponentType<any> },
->(source: string): Promise<T> {
-  if (__LEPUS__) {
-    const query = __QueryComponent(source);
-    let result: T;
-    try {
-      result = query.evalResult;
-    } catch (e) {
-      // Here we cannot return a rejected promise
-      // (which will eventually be an unhandled rejection and cause unnecessary redbox)
-      // But we still need a object in shape of Promise
-      // So we return a Promise which will never resolve or reject,
-      // which fit our principle "lepus run only once at first-screen" better
-      return new Promise(() => {});
-    }
-    const r: Promise<T> = Promise.resolve(result);
-    // Why we should modify the implementation of `then`?
-    // We should make it `sync` so lepus first-screen render can use result above instantly
-    // We also should keep promise shape
-    // @ts-ignore
-    r.then = makeSyncThen(result);
-    return r;
-  } else if (__JS__) {
-    return new Promise((resolve, reject) => {
-      const callback: (result: any) => void = result => {
-        const { code, detail } = result;
-        if (code === 0) {
-          const { schema } = detail;
-          const exports = lynxCoreInject.tt.getDynamicComponentExports(schema);
-          // `code === 0` means that the lazy bundle has been successfully parsed. However,
-          // its javascript files may still fail to run, which would prevent the retrieval of the exports object.
-          if (exports) {
-            resolve(exports);
-            return;
+>(source: string) => Promise<T> = /*#__PURE__*/ (() => {
+  lynx.loadLazyBundle = loadLazyBundle;
+
+  function loadLazyBundle<
+    T extends { default: React.ComponentType<any> },
+  >(source: string): Promise<T> {
+    if (__LEPUS__) {
+      const query = __QueryComponent(source);
+      let result: T;
+      try {
+        result = query.evalResult;
+      } catch (e) {
+        // Here we cannot return a rejected promise
+        // (which will eventually be an unhandled rejection and cause unnecessary redbox)
+        // But we still need a object in shape of Promise
+        // So we return a Promise which will never resolve or reject,
+        // which fit our principle "lepus run only once at first-screen" better
+        return new Promise(() => {});
+      }
+      const r: Promise<T> = Promise.resolve(result);
+      // Why we should modify the implementation of `then`?
+      // We should make it `sync` so lepus first-screen render can use result above instantly
+      // We also should keep promise shape
+      // @ts-ignore
+      r.then = makeSyncThen(result);
+      return r;
+    } else if (__JS__) {
+      return new Promise((resolve, reject) => {
+        const callback: (result: any) => void = result => {
+          const { code, detail } = result;
+          if (code === 0) {
+            const { schema } = detail;
+            const exports = lynxCoreInject.tt.getDynamicComponentExports(schema);
+            // `code === 0` means that the lazy bundle has been successfully parsed. However,
+            // its javascript files may still fail to run, which would prevent the retrieval of the exports object.
+            if (exports) {
+              resolve(exports);
+              return;
+            }
           }
+          reject(new Error('Lazy bundle load failed: ' + JSON.stringify(result)));
+        };
+        if (typeof lynx.QueryComponent === 'function') {
+          lynx.QueryComponent(source, callback);
+        } else {
+          lynx.getNativeLynx().QueryComponent!(source, callback);
         }
-        reject(new Error('Lazy bundle load failed: ' + JSON.stringify(result)));
-      };
-      if (typeof lynx.QueryComponent === 'function') {
-        lynx.QueryComponent(source, callback);
-      } else {
-        lynx.getNativeLynx().QueryComponent!(source, callback);
-      }
-    });
-  }
+      });
+    }
 
-  throw new Error('unreachable');
-}
+    throw new Error('unreachable');
+  }
 
-lynx.loadLazyBundle = loadLazyBundle;
+  return loadLazyBundle;
+})();
 
 /**
  * @internal