@lynx-js/react 0.105.0

package/runtime/src/lynx/env.ts

@@ -0,0 +1,110 @@
+// 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 { DataProcessorDefinition } from '../lynx-api.js';
+
+export function setupLynxEnv(): void {
+  if (!__LEPUS__) {
+    const { initData, updateData } = lynxCoreInject.tt._params;
+    // @ts-ignore
+    lynx.__initData = { ...initData, ...updateData };
+    lynx.registerDataProcessors = function() {};
+  }
+
+  if (__LEPUS__) {
+    // @ts-ignore
+    lynx.__initData = {
+      /* available only in renderPage */
+    };
+    // @ts-ignore
+    globalThis.SystemInfo = lynx.SystemInfo || {};
+
+    lynx.reportError = function(e: any) {
+      _ReportError(e, {
+        errorCode: 1101, // ErrCode::LYNX_ERROR_CODE_LEPUS in Lynx/base/debug/error_code.h
+      });
+    };
+
+    lynx.triggerGlobalEventFromLepus = function(
+      eventName: string,
+      params: any,
+    ) {
+      __OnLifecycleEvent(['globalEventFromLepus', [eventName, params]]);
+    };
+
+    {
+      function __name(empty: string) {
+        return `Native${empty}Modules`;
+      }
+      // TODO(hongzhiyuan.hzy): make sure this is run before any other code (especially code access `NativeModules`)
+      // @ts-ignore
+      if (typeof globalThis[__name('')] === 'undefined') {
+        // @ts-ignore
+        globalThis[__name('')] = undefined;
+      }
+    }
+
+    lynx.registerDataProcessors = function(
+      dataProcessorDefinition?: DataProcessorDefinition,
+    ) {
+      let hasDefaultDataProcessorExecuted = false;
+      // @ts-ignore
+      globalThis.processData = (data, processorName) => {
+        if (__PROFILE__) {
+          console.profile('processData');
+        }
+
+        let r;
+        try {
+          if (processorName) {
+            r = dataProcessorDefinition?.dataProcessors?.[processorName]?.(data)
+              ?? data;
+          } else {
+            r = dataProcessorDefinition?.defaultDataProcessor?.(data) ?? data;
+          }
+        } catch (e: any) {
+          lynx.reportError(e);
+          // when there is an error
+          // we should perform like dataProcessor returns nothing
+          // so use `{}` rather than `data`
+          r = {};
+        }
+
+        if (__PROFILE__) {
+          console.profileEnd();
+        }
+
+        if (hasDefaultDataProcessorExecuted === false) {
+          // @ts-ignore
+          if (globalThis.__I18N_RESOURCE_TRANSLATION__) {
+            r = {
+              ...r,
+              // @ts-ignore
+              __I18N_RESOURCE_TRANSLATION__: globalThis.__I18N_RESOURCE_TRANSLATION__,
+            };
+          }
+
+          // @ts-ignore
+          if (__EXTRACT_STR__) {
+            r = {
+              ...r,
+              // @ts-ignore
+              _EXTRACT_STR: __EXTRACT_STR_IDENT_FLAG__,
+            };
+          }
+        }
+
+        if (processorName) {
+        } else {
+          hasDefaultDataProcessorExecuted = true;
+        }
+
+        return r;
+        // TODO
+      };
+    };
+
+    // register empty DataProcessors to make sure `globalThis.processData` is set
+    lynx.registerDataProcessors();
+  }
+}

package/runtime/src/lynx/injectLepusMethods.ts

@@ -0,0 +1,53 @@
+// 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 { snapshotInstanceManager } from '../snapshot.js';
+
+function injectLepusMethods(): void {
+  Object.assign(globalThis, {
+    getUniqueIdListBySnapshotId,
+    getSnapshotIdByUniqueId,
+  });
+}
+
+/**
+ * Get the list of `unique_id` of the fiber element by the SnapshotInstance `__id`.
+ */
+function getUniqueIdListBySnapshotId({ snapshotId }: { snapshotId: number }) {
+  const si = snapshotInstanceManager.values.get(snapshotId);
+  if (si?.__elements?.length) {
+    const uniqueIdList = [];
+    for (const element of si.__elements) {
+      const uniqueId = __GetElementUniqueID(element);
+      uniqueIdList.push(uniqueId);
+    }
+    return {
+      uniqueIdList,
+    };
+  }
+  return null;
+}
+
+/**
+ * Get the SnapshotInstance `__id` of the fiber element by the `unique_id`.
+ */
+function getSnapshotIdByUniqueId({ uniqueId }: { uniqueId: number }) {
+  for (const si of snapshotInstanceManager.values.values()) {
+    if (si?.__elements?.length) {
+      for (const element of si.__elements) {
+        const unique_id = __GetElementUniqueID(element);
+        if (unique_id === uniqueId) {
+          return {
+            snapshotId: si.__id,
+          };
+        }
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * @internal
+ */
+export { injectLepusMethods };

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

@@ -0,0 +1,126 @@
+// 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 { Fragment, lazy as backgroundLazy, createElement } from 'preact/compat';
+
+/**
+ * To make code below works
+ * const App1 = lazy(() => import("./x").then(({App1}) => ({default: App1})))
+ * const App2 = lazy(() => import("./x").then(({App2}) => ({default: App2})))
+ * @internal
+ */
+export const makeSyncThen = function<T>(result: T) {
+  return function(this: Promise<T>, onF?: Function): Promise<T> {
+    if (onF) {
+      let ret;
+      try {
+        ret = onF(result);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+
+      // @ts-ignore
+      if (ret && typeof ret.then === 'function' /* `thenable` object */) {
+        // lazy(() =>
+        //   import("./x").then(() => new Promise(...))
+        // )
+        // Calling `then` and passing a callback is standard behavior
+        // but in Lepus runtime the callback will never be called
+        // So can be simplified to code below
+        return new Promise(() => {});
+
+        // TODO(hongzhiyuan.hzy): Avoid warning that cannot be turned-off, so the warning is commented
+        // lynx.reportError(
+        //   new Error(
+        //     'You returned a Promise in promise-chain of lazy-bundle import (eg. `import("./x").then(() => new Promise(...))`), which will cause related Component unavailable at first-screen, '
+        //   ),
+        //   { level: "warning" }
+        // );
+      }
+
+      const p = Promise.resolve(ret);
+      // @ts-ignore
+      p.then = makeSyncThen(ret);
+      return p;
+    }
+
+    return this;
+  };
+};
+
+/**
+ * Load dynamic component from source. Designed to be used with `lazy`.
+ * @param source - where dynamic component template.js locates
+ * @returns
+ * @public
+ */
+export 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);
+      }
+    });
+  }
+
+  throw new Error('unreachable');
+}
+
+lynx.loadLazyBundle = loadLazyBundle;
+
+/**
+ * @internal
+ */
+export function mainThreadLazy<T>(loader: () => Promise<{ default: T } | T>) {
+  const Lazy = backgroundLazy<T>(loader);
+
+  function _Lazy(props: any) {
+    try {
+      // @ts-expect-error `Lazy` returned from `backgroundLazy` should be a FC
+      return Lazy(props);
+    } catch (e) {
+      // We should never throw at mainThread
+      return createElement(Fragment, {});
+    }
+  }
+
+  return _Lazy as T;
+}

package/runtime/src/lynx/performance.ts

@@ -0,0 +1,117 @@
+// 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 { DIFF } from '../renderToOpcodes/constants.js';
+import { __globalSnapshotPatch } from '../snapshotPatch.js';
+
+enum PerformanceTimingKeys {
+  update_set_state_trigger,
+  update_diff_vdom_start,
+  update_diff_vdom_end,
+  // update_set_state_trigger, update_diff_vdom_start and update_diff_vdom_end is deprecated
+  diff_vdom_start,
+  diff_vdom_end,
+  pack_changes_start,
+  pack_changes_end,
+  parse_changes_start,
+  parse_changes_end,
+  patch_changes_start,
+  patch_changes_end,
+  hydrate_parse_snapshot_start,
+  hydrate_parse_snapshot_end,
+}
+
+/**
+ * @deprecated used by old timing api(setState timing flag)
+ */
+const PerfSpecificKey = '__lynx_timing_flag';
+let timingFlag: string | undefined;
+let shouldMarkDiffVdomStart = false;
+let shouldMarkDiffVdomEnd = false;
+
+let globalPipelineOptions: PipelineOptions | undefined;
+
+/**
+ * @deprecated used by old timing api(setState timing flag)
+ */
+function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): void {
+  switch (key) {
+    case PerformanceTimingKeys.update_set_state_trigger: {
+      shouldMarkDiffVdomStart = true;
+      shouldMarkDiffVdomEnd = true;
+      timingFlag = timingFlag_;
+      break;
+    }
+    case PerformanceTimingKeys.update_diff_vdom_start: {
+      /* v8 ignore start */
+      if (!shouldMarkDiffVdomStart) {
+        return;
+      }
+      /* v8 ignore stop */
+      shouldMarkDiffVdomStart = false;
+      break;
+    }
+    case PerformanceTimingKeys.update_diff_vdom_end: {
+      if (!shouldMarkDiffVdomEnd) {
+        return;
+      }
+      shouldMarkDiffVdomEnd = false;
+      break;
+    }
+  }
+  lynx.getNativeApp().markTiming?.(timingFlag, PerformanceTimingKeys[key]);
+}
+
+function beginPipeline(needTimestamps: boolean, timingFlag?: string): void {
+  globalPipelineOptions = lynx.performance?._generatePipelineOptions?.();
+  if (globalPipelineOptions) {
+    globalPipelineOptions.needTimestamps = needTimestamps;
+    lynx.performance?._onPipelineStart?.(globalPipelineOptions.pipelineID);
+    if (timingFlag) {
+      lynx.performance?._bindPipelineIdWithTimingFlag?.(globalPipelineOptions.pipelineID, timingFlag);
+    }
+  }
+}
+
+function setPipeline(pipeline: PipelineOptions | undefined): void {
+  globalPipelineOptions = pipeline;
+}
+
+function markTiming(timestampKey: PerformanceTimingKeys, force?: boolean): void {
+  if (globalPipelineOptions && (force || globalPipelineOptions.needTimestamps)) {
+    lynx.performance?._markTiming?.(globalPipelineOptions.pipelineID, PerformanceTimingKeys[timestampKey]);
+  }
+}
+
+function initTimingAPI(): void {
+  const oldDiff = options[DIFF];
+  options[DIFF] = (vnode: VNode) => {
+    // check `__globalSnapshotPatch` to make sure this only runs after hydrate
+    if (__JS__ && __globalSnapshotPatch) {
+      if (!globalPipelineOptions) {
+        beginPipeline(false);
+        markTiming(PerformanceTimingKeys.diff_vdom_start, true);
+      }
+      if (shouldMarkDiffVdomStart) {
+        markTimingLegacy(PerformanceTimingKeys.update_diff_vdom_start);
+      }
+    }
+    oldDiff?.(vnode);
+  };
+}
+
+/**
+ * @internal
+ */
+export {
+  PerformanceTimingKeys,
+  PerfSpecificKey,
+  markTimingLegacy,
+  initTimingAPI,
+  beginPipeline,
+  markTiming,
+  setPipeline,
+  globalPipelineOptions,
+};

package/runtime/src/lynx/tt.ts

@@ -0,0 +1,212 @@
+// 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 { 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 { reloadBackground } from '../lifecycle/reload.js';
+import { runWithForce } from '../lynx.js';
+import { CHILDREN } 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/jsImpl.js';
+
+function injectTt(): void {
+  // @ts-ignore
+  const tt = lynxCoreInject.tt;
+  tt.OnLifecycleEvent = OnLifecycleEvent;
+  tt.publishEvent = delayedPublishEvent;
+  tt.publicComponentEvent = delayedPublicComponentEvent;
+  tt.callDestroyLifetimeFun = () => {
+    destroyWorklet();
+    destroyBackground();
+  };
+  tt.updateGlobalProps = updateGlobalProps;
+  tt.updateCardData = updateCardData;
+  tt.onAppReload = reloadBackground;
+  tt.processCardConfig = () => {
+    // used to updateTheme, no longer rely on this function
+  };
+}
+
+let delayedLifecycleEvents: [type: string, data: any][];
+async function OnLifecycleEvent([type, data]: [string, any]) {
+  const hasRootRendered = CHILDREN in __root;
+  // never called `render(<App/>, __root)`
+  // happens if user call `root.render()` async
+  if (!hasRootRendered) {
+    delayedLifecycleEvents ??= [];
+    delayedLifecycleEvents.push([type, data]);
+    return;
+  }
+
+  if (__PROFILE__) {
+    console.profile(`OnLifecycleEvent::${type}`);
+  }
+  switch (type) {
+    case LifecycleConstant.firstScreen: {
+      const { root: lepusSide, refPatch, jsReadyEventIdSwap } = data;
+      if (__PROFILE__) {
+        console.profile('hydrate');
+      }
+      beginPipeline(true, 'react_lynx_hydrate');
+      markTiming(PerformanceTimingKeys.hydrate_parse_snapshot_start);
+      const before = JSON.parse(lepusSide);
+      markTiming(PerformanceTimingKeys.hydrate_parse_snapshot_end);
+      markTiming(PerformanceTimingKeys.diff_vdom_start);
+      const snapshotPatch = hydrate(
+        before,
+        __root as BackgroundSnapshotInstance,
+      );
+      if (__PROFILE__) {
+        console.profileEnd();
+      }
+      markTiming(PerformanceTimingKeys.diff_vdom_end);
+
+      if (delayedEvents) {
+        delayedEvents.forEach((args) => {
+          const [handlerName, data] = args;
+          let [idStr, ...rest] = handlerName.split(':');
+          while (jsReadyEventIdSwap[idStr!]) idStr = jsReadyEventIdSwap[idStr!];
+          try {
+            publishEvent([idStr, ...rest].join(':'), data);
+          } catch (e) {
+            lynx.reportError(e);
+          }
+        });
+        delayedEvents.length = 0;
+      }
+      lynxCoreInject.tt.publishEvent = publishEvent;
+      lynxCoreInject.tt.publicComponentEvent = publicComponentEvent;
+
+      if (__PROFILE__) {
+        console.profile('patchRef');
+      }
+      if (refPatch) {
+        globalRefsToSet.set(0, JSON.parse(refPatch));
+        updateBackgroundRefs(0);
+      }
+      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 });
+      updateBackgroundRefs(commitTaskId);
+      globalCommitTaskMap.forEach((commitTask, id) => {
+        if (id > commitTaskId) {
+          return;
+        }
+        commitTask();
+        globalCommitTaskMap.delete(id);
+      });
+      break;
+    }
+    case LifecycleConstant.globalEventFromLepus: {
+      const [eventName, params] = data;
+      lynx.getJSModule('GlobalEventEmitter').trigger(eventName, params);
+      break;
+    }
+    case LifecycleConstant.ref: {
+      const { refPatch, commitTaskId } = data;
+      if (commitTaskId) {
+        globalRefsToSet.set(commitTaskId, JSON.parse(refPatch));
+      } else {
+        globalRefsToSet.set(0, JSON.parse(refPatch));
+        updateBackgroundRefs(0);
+      }
+      break;
+    }
+  }
+  if (__PROFILE__) {
+    console.profileEnd();
+  }
+}
+
+function flushDelayedLifecycleEvents(): void {
+  if (delayedLifecycleEvents) {
+    delayedLifecycleEvents.forEach((e) => {
+      try {
+        OnLifecycleEvent(e);
+      } catch (e) {
+        lynx.reportError(e);
+      }
+    });
+    delayedLifecycleEvents.length = 0;
+  }
+}
+
+function publishEvent(handlerName: string, data: unknown) {
+  // TODO: delay js events until js ready
+  lynxCoreInject.tt.callBeforePublishEvent?.(data);
+  const eventHandler = backgroundSnapshotInstanceManager.getValueBySign(
+    handlerName,
+  );
+  if (eventHandler) {
+    try {
+      (eventHandler as Function)(data);
+    } catch (e) {
+      lynx.reportError(e as Error);
+    }
+  }
+}
+
+function publicComponentEvent(_componentId: string, handlerName: string, data: unknown) {
+  publishEvent(handlerName, data);
+}
+
+let delayedEvents: [handlerName: string, data: unknown][];
+function delayedPublishEvent(handlerName: string, data: unknown) {
+  delayedEvents ??= [];
+  delayedEvents.push([handlerName, data]);
+}
+
+function delayedPublicComponentEvent(_componentId: string, handlerName: string, data: unknown) {
+  delayedPublishEvent(handlerName, data);
+}
+
+function updateGlobalProps(newData: Record<string, any>): void {
+  Object.assign(lynx.__globalProps, newData);
+
+  // Our purpose is to make sure SYNC setState inside `emit`'s listeners
+  // can be batched with updateFromRoot
+  // 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));
+  });
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged');
+}
+
+function updateCardData(newData: Record<string, any>, options?: Record<string, any>): void {
+  const { ['__lynx_timing_flag']: performanceTimingFlag, ...restNewData } = newData;
+  if (performanceTimingFlag) {
+    lynx.reportError(
+      new Error(
+        `Received unsupported updateData with \`__lynx_timing_flag\` (value "${performanceTimingFlag}"), the timing flag is ignored`,
+      ),
+    );
+  }
+  const { type = NativeUpdateDataType.UPDATE } = options || {};
+  if (type == NativeUpdateDataType.RESET) {
+    // @ts-ignore
+    lynx.__initData = {};
+  }
+
+  // COW when modify `lynx.__initData` to make sure Provider & Consumer works
+  // @ts-ignore
+  lynx.__initData = Object.assign({}, lynx.__initData, restNewData);
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged');
+}
+
+export { injectTt, flushDelayedLifecycleEvents, delayedLifecycleEvents };