@lynx-js/react 0.111.0 → 0.111.2

package/runtime/src/lynx/calledByNative.ts

@@ -1,160 +0,0 @@
-// 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 { 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 { LifecycleConstant } from '../lifecycleConstant.js';
-import { ssrHydrateByOpcodes } from '../opcodes.js';
-import { __pendingListUpdates } from '../pendingListUpdates.js';
-import { __root, setRoot } from '../root.js';
-import { applyRefQueue } from '../snapshot/workletRef.js';
-import { SnapshotInstance, __page, setupPage } from '../snapshot.js';
-import { isEmptyObject } from '../utils.js';
-import { markTiming, setPipeline } from './performance.js';
-
-function ssrEncode() {
-  const { __opcodes } = __root;
-  delete __root.__opcodes;
-
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  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!');
-  }
-
-  resetJSReady();
-  setupPage(nativePage);
-  const refsMap = __GetTemplateParts(nativePage);
-
-  const { __opcodes, __root_values } = JSON.parse(info) as {
-    __opcodes: unknown[];
-    __root_values: unknown[] | undefined;
-  };
-  if (__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' && __FIRST_SCREEN_SYNC_TIMING__ !== 'jsReady' && __ENABLE_SSR__) {
-    throw new Error('`firstScreenSyncTiming` must be `jsReady` when SSR is enabled');
-  }
-
-  const calledByNative: LynxCallByNative = {
-    renderPage,
-    updatePage,
-    updateGlobalProps,
-    getPageData: function() {
-      return null;
-    },
-    removeComponents: function(): void {},
-    ...(__ENABLE_SSR__ ? { ssrEncode, ssrHydrate } : {}),
-  };
-
-  Object.assign(globalThis, calledByNative);
-  Object.assign(globalThis, {
-    [LifecycleConstant.jsReady]: jsReady,
-  });
-}
-
-function renderPage(data: Record<string, unknown> | undefined): void {
-  // reset `jsReady` state
-  resetJSReady();
-
-  lynx.__initData = data ?? {};
-
-  setupPage(__CreatePage('0', 0));
-  (__root as SnapshotInstance).ensureElements();
-
-  renderMainThread();
-
-  // always call this before `__FlushElementTree`
-  // (There is an implicit `__FlushElementTree` in `renderPage`)
-  __pendingListUpdates.flush();
-  applyRefQueue();
-
-  if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
-    jsReady();
-  }
-}
-
-function updatePage(data: Record<string, unknown> | undefined, options?: UpdatePageOption): void {
-  if (options?.reloadTemplate) {
-    reloadMainThread(data, options);
-    return;
-  }
-
-  if (options?.resetPageData) {
-    lynx.__initData = {};
-  }
-
-  if (typeof data == 'object' && !isEmptyObject(data)) {
-    lynx.__initData ??= {};
-    Object.assign(lynx.__initData, data);
-  }
-
-  const flushOptions = options ?? {};
-  if (!isJSReady) {
-    const oldRoot = __root;
-    setRoot(new SnapshotInstance('root'));
-    __root.__jsx = oldRoot.__jsx;
-
-    setPipeline(options?.pipelineOptions);
-    markTiming('updateDiffVdomStart');
-    {
-      __pendingListUpdates.clear();
-      renderMainThread();
-      // As said by codename `jsReadyEventIdSwap`, this swap will only be used for event remap,
-      // because ref & unref cause by previous render will be ignored
-      hydrate(
-        oldRoot as SnapshotInstance,
-        __root as SnapshotInstance,
-        { skipUnRef: true, swap: jsReadyEventIdSwap },
-      );
-
-      // always call this before `__FlushElementTree`
-      __pendingListUpdates.flush();
-      applyRefQueue();
-    }
-    flushOptions.triggerDataUpdated = true;
-    markTiming('updateDiffVdomEnd');
-  }
-
-  __FlushElementTree(__page, flushOptions);
-}
-
-function updateGlobalProps(_data: any, options?: UpdatePageOption): void {
-  if (options) {
-    __FlushElementTree(__page, options);
-  } else {
-    __FlushElementTree();
-  }
-}
-
-/**
- * @internal
- */
-export { injectCalledByNative };

package/runtime/src/lynx/component.ts

@@ -1,113 +0,0 @@
-// 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.
-
-/* eslint-disable */
-
-import { Component } from 'preact';
-
-import { PerfSpecificKey, markTimingLegacy } from './performance.js';
-import { globalFlushOptions } from '../lifecycle/patch/commit.js';
-import { NEXT_STATE } from '../renderToOpcodes/constants.js';
-
-if (__JS__) {
-  function reportRefDeprecationError(fnName: string, newFnName: string) {
-    if (!__DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__) {
-      lynx.reportError(
-        new Error(
-          `${fnName} is deprecated and has different behavior in ReactLynx 3.0, please use ref or ${newFnName} instead.`,
-        ),
-      );
-    }
-  }
-
-  const __Component = Component as any;
-
-  __Component.prototype._reactAppInstance = lynxCoreInject.tt;
-
-  __Component.prototype.getNodeRef = function(a: string, b?: boolean) {
-    reportRefDeprecationError('getNodeRef', 'lynx.createSelectorQuery');
-
-    // @ts-expect-error hack lynx-kernel
-    return lynxCoreInject.tt._reactLynx.ReactComponent.prototype.getNodeRef
-      .call(
-        {
-          _type: '',
-          // @ts-expect-error hack lynx-kernel
-          _nativeApp: lynxCoreInject.tt._nativeApp,
-          // @ts-expect-error hack lynx-kernel
-          _uiModule: lynxCoreInject.tt._nativeApp.nativeModuleProxy.LynxUIMethodModule,
-          _reactAppInstance: lynxCoreInject.tt,
-        },
-        a,
-        b,
-      );
-  };
-
-  __Component.prototype.getNodeRefFromRoot = function(a: string) {
-    reportRefDeprecationError('getNodeRefFromRoot', 'lynx.createSelectorQuery');
-
-    // @ts-expect-error hack lynx-kernel
-    return lynxCoreInject.tt._reactLynx.ReactComponent.prototype
-      .getNodeRefFromRoot.call(
-        {
-          _type: '',
-          // @ts-expect-error hack lynx-kernel
-          _nativeApp: lynxCoreInject.tt._nativeApp,
-          // @ts-expect-error hack lynx-kernel
-          _uiModule: lynxCoreInject.tt._nativeApp.nativeModuleProxy.LynxUIMethodModule,
-          _reactAppInstance: lynxCoreInject.tt,
-        },
-        a,
-      );
-  };
-
-  __Component.prototype.registerModule = function(
-    name: string,
-    module: object,
-  ): void {
-    this._reactAppInstance.registerModule(name, module);
-  };
-
-  __Component.prototype.getJSModule = function<Module = unknown>(
-    name: string,
-  ): Module {
-    return this._reactAppInstance.getJSModule(name);
-  };
-
-  __Component.prototype.addGlobalEventListener = function(
-    eventName: string,
-    callback: (...args: unknown[]) => void,
-    context?: object,
-  ): void {
-    return this._reactAppInstance.getJSModule('GlobalEventEmitter').addListener(
-      eventName,
-      callback,
-      context,
-    );
-  };
-
-  __Component.prototype.getElementById = function(id: string) {
-    reportRefDeprecationError('getElementById', 'lynx.getElementById');
-    return lynx.getElementById(id);
-  };
-
-  __Component.prototype.GlobalEventEmitter = lynxCoreInject.tt.GlobalEventEmitter;
-
-  __Component.prototype.createSelectorQuery = function() {
-    reportRefDeprecationError('createSelectorQuery on component instance', 'lynx.createSelectorQuery');
-    return lynx.createSelectorQuery();
-  };
-
-  const oldSetState = __Component.prototype.setState;
-  __Component.prototype.setState = function(state: any, callback: any): void {
-    oldSetState.call(this, state, callback);
-    // @ts-ignore
-    const timingFlag = this[NEXT_STATE][PerfSpecificKey];
-    if (timingFlag) {
-      globalFlushOptions.__lynx_timing_flag = timingFlag;
-      markTimingLegacy('updateSetStateTrigger', timingFlag);
-      this[NEXT_STATE][PerfSpecificKey] = '';
-    }
-  };
-}

package/runtime/src/lynx/dynamic-js.ts

@@ -1,36 +0,0 @@
-// 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 { loadLazyBundle } from './lazy-bundle.js';
-
-export function loadDynamicJS<T>(url: string): Promise<T> {
-  if (__LEPUS__) {
-    _ReportError(
-      new Error(`A dynamic import (to "${url}") is leaked to Lepus bundle.`),
-      { errorCode: 202 },
-    );
-    // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-    return Promise.reject();
-  }
-  return new Promise((resolve, reject) => {
-    lynx.requireModuleAsync<T>(url, (err, data) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(data as T);
-      }
-    });
-  });
-}
-
-export function __dynamicImport<T>(
-  url: string,
-  options?: { with?: { type?: 'component' | 'tsx' | 'jsx' } },
-): Promise<T> {
-  const t = options?.with?.type;
-  if (t === 'component' || t === 'tsx' || t === 'jsx') {
-    return loadLazyBundle<any>(url);
-  } else {
-    return loadDynamicJS(url);
-  }
-}

package/runtime/src/lynx/env.ts

@@ -1,109 +0,0 @@
-// 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, InitData, InitDataRaw } from '../lynx-api.js';
-
-export function setupLynxEnv(): void {
-  if (!__LEPUS__) {
-    const { initData, updateData } = lynxCoreInject.tt._params;
-    lynx.__initData = { ...initData, ...updateData };
-    lynx.registerDataProcessors = function() {};
-  }
-
-  if (__LEPUS__) {
-    lynx.__initData = {
-      /* available only in renderPage */
-    };
-    // @ts-expect-error no type for lynx.SystemInfo
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    globalThis.SystemInfo = lynx.SystemInfo ?? {};
-
-    lynx.reportError = function(e: Error) {
-      _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]]);
-    };
-
-    {
-      // eslint-disable-next-line unicorn/consistent-function-scoping
-      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-expect-error hack
-      if (typeof globalThis[__name('')] === 'undefined') {
-        // @ts-expect-error hack
-        globalThis[__name('')] = undefined;
-      }
-    }
-
-    lynx.registerDataProcessors = function(
-      dataProcessorDefinition?: DataProcessorDefinition,
-    ) {
-      let hasDefaultDataProcessorExecuted = false;
-      globalThis.processData = (data, processorName) => {
-        if (__PROFILE__) {
-          console.profile('processData');
-        }
-
-        let r: InitData | InitDataRaw;
-        try {
-          if (processorName) {
-            r = dataProcessorDefinition?.dataProcessors?.[processorName]?.(data) as InitData ?? data;
-          } else {
-            r = dataProcessorDefinition?.defaultDataProcessor?.(data) ?? data;
-          }
-        } catch (e: any) {
-          lynx.reportError(e as Error);
-          // 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-expect-error todo: add types to i18n logic
-          if (globalThis.__I18N_RESOURCE_TRANSLATION__) {
-            r = {
-              ...r,
-              // @ts-expect-error todo: add types to i18n logic
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              __I18N_RESOURCE_TRANSLATION__: globalThis.__I18N_RESOURCE_TRANSLATION__,
-            };
-          }
-
-          // @ts-expect-error todo: add types to __EXTRACT_STR__
-          if (__EXTRACT_STR__) {
-            r = {
-              ...r,
-              // @ts-expect-error todo: add types to __EXTRACT_STR__
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              _EXTRACT_STR: __EXTRACT_STR_IDENT_FLAG__,
-            };
-          }
-        }
-
-        if (processorName) {}
-        else {
-          hasDefaultDataProcessorExecuted = true;
-        }
-
-        return r;
-      };
-    };
-
-    // register empty DataProcessors to make sure `globalThis.processData` is set
-    lynx.registerDataProcessors();
-  }
-}

package/runtime/src/lynx/injectLepusMethods.ts

@@ -1,53 +0,0 @@
-// 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

@@ -1,175 +0,0 @@
-// 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): Promise<T>['then'] {
-  return function<TR1 = T, TR2 = never>(
-    this: Promise<T>,
-    onF?: ((value: T) => TR1 | PromiseLike<TR1>) | null,
-    _onR?: ((reason: any) => TR2 | PromiseLike<TR2>) | null,
-  ): Promise<TR1 | TR2> {
-    if (onF) {
-      let ret: TR1 | PromiseLike<TR1>;
-      try {
-        ret = onF(result);
-      } catch (e) {
-        // if (onR) {
-        //   return Promise.resolve(onR(e));
-        // }
-        return Promise.reject(e as Error);
-      }
-
-      if (ret && typeof (ret as PromiseLike<TR1>).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 ret as Promise<TR1>;
-
-        // 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);
-
-      const then = makeSyncThen(ret as TR1);
-      p.then = then as Promise<Awaited<TR1>>['then'];
-
-      return p as Promise<TR1 | TR2>;
-    }
-
-    return this as Promise<TR1 | TR2>;
-  };
-};
-
-/**
- * Load dynamic component from source. Designed to be used with `lazy`.
- * @param source - where dynamic component template.js locates
- * @returns
- * @public
- */
-export const loadLazyBundle: <
-  T extends { default: React.ComponentType<any> },
->(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 as T;
-      } 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
-      r.then = makeSyncThen(result);
-      return r;
-    } else if (__JS__) {
-      const resolver = withSyncResolvers<T>();
-
-      const callback: (result: { code: number; detail: { schema: string } }) => 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) {
-            resolver.resolve(exports as T);
-            return;
-          }
-        }
-        resolver.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);
-      }
-
-      if (resolver.result !== null) {
-        const p = Promise.resolve(resolver.result);
-        p.then = makeSyncThen(resolver.result) as Promise<Awaited<T>>['then'];
-        return p;
-      } else if (resolver.error === null) {
-        return new Promise((_resolve, _reject) => {
-          resolver.resolve = _resolve;
-          resolver.reject = _reject;
-        });
-      } else {
-        return Promise.reject(resolver.error);
-      }
-    }
-
-    throw new Error('unreachable');
-  }
-
-  return loadLazyBundle;
-})();
-
-function withSyncResolvers<T>() {
-  'background-only';
-
-  const resolver: {
-    result: T | null;
-    error: Error | null;
-    resolve(result: T): void;
-    reject(error: Error): void;
-  } = {
-    resolve: (result: T): void => {
-      resolver.result = result;
-    },
-    reject: (error: Error): void => {
-      resolver.error = error;
-    },
-    result: null,
-    error: null,
-  };
-
-  return resolver;
-}
-
-/**
- * @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
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      return Lazy(props);
-    } catch (e) {
-      // We should never throw at mainThread
-      return createElement(Fragment, {});
-    }
-  }
-
-  return _Lazy as T;
-}