@lynx-js/react 0.111.1 → 0.111.2

package/runtime/src/lynx-api.ts

@@ -1,455 +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 { 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 { LifecycleConstant } from './lifecycleConstant.js';
-import { flushDelayedLifecycleEvents } from './lynx/tt.js';
-import { __root } from './root.js';
-
-/**
- * The default root exported by `@lynx-js/react` for you to render a JSX
- * @public
- */
-export interface Root {
-  /**
-   * Use this API to pass in your JSX to render
-   *
-   * @example
-   *
-   * ```ts
-   * import { root } from "@lynx-js/react"
-   *
-   * function App() {
-   *   // Your app
-   *   return <view>...</view>
-   * }
-   *
-   * root.render(<App/>);
-   * ```
-   *
-   * @example
-   *
-   * ```tsx
-   * import { root } from "@lynx-js/react"
-   *
-   * function App() {
-   *   // Your app
-   *   return <view>...</view>
-   * }
-   *
-   * if (__MAIN_THREAD__) {
-   *   root.render(
-   *     <DataProvider data={DEFAULT_DATA}>
-   *        <App/>
-   *     </DataProvider>
-   *   );
-   * } else if (__BACKGROUND__) {
-   *   fetchData().then((data) => {
-   *     root.render(
-   *       <DataProvider data={data}>
-   *          <App/>
-   *       </DataProvider>
-   *     ); // You can render later after your data is ready
-   *   })
-   * }
-   * ```
-   *
-   * @public
-   */
-  render: (jsx: ReactNode) => void;
-  /**
-   * {@inheritDoc Lynx.registerDataProcessors}
-   * @deprecated use {@link Lynx.registerDataProcessors | lynx.registerDataProcessors} instead
-   * @public
-   */
-  registerDataProcessors: (dataProcessorDefinition: DataProcessorDefinition) => void;
-}
-
-/**
- * The default and only root of ReactLynx for you to render JSX
- * @example
- * ```ts
- * import { root } from "@lynx-js/react"
- * ```
- *
- * @public
- */
-export const root: Root = {
-  render: (jsx: ReactNode): void => {
-    if (__MAIN_THREAD__) {
-      __root.__jsx = jsx;
-    } else {
-      __root.__jsx = jsx;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      render(jsx, __root as any);
-      if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
-        // This is for cases where `root.render()` is called asynchronously,
-        // `firstScreen` message might have been reached.
-        flushDelayedLifecycleEvents();
-      } else {
-        lynx.getNativeApp().callLepusMethod(LifecycleConstant.jsReady, {});
-      }
-    }
-  },
-  registerDataProcessors: (dataProcessorDefinition: DataProcessorDefinition): void => {
-    lynx.registerDataProcessors(dataProcessorDefinition);
-  },
-};
-
-const _InitData = /* @__PURE__ */ factory<InitData>(
-  {
-    createContext,
-    useState,
-    createElement,
-    useLynxGlobalEventListener,
-  },
-  '__initData',
-  'onDataChanged',
-);
-/**
- * The {@link https://react.dev/reference/react/createContext#provider | Provider} Component that provide `initData`,
- * you must wrap your JSX inside it
- * @group Components
- *
- * @example
- *
- * ```ts
- * import { root } from "@lynx-js/react"
- *
- * function App() {
- *   return (
- *     <InitDataConsumer children={(initData) => <view>...</view>}/>
- *   )
- * }
- *
- * root.render(
- *   <InitDataProvider>
- *      <App/>
- *   </InitDataProvider>
- * );
- *
- * ```
- *
- * @public
- */
-// @ts-expect-error make preact and react types work
-export const InitDataProvider: FC<{ children?: ReactNode | undefined }> = /* @__PURE__ */ _InitData.Provider();
-/**
- * The {@link https://react.dev/reference/react/createContext#consumer | Consumer} Component that provide `initData`.
- * This should be used with {@link InitDataProvider}
- * @group Components
- * @public
- */
-// @ts-expect-error make preact and react types work
-export const InitDataConsumer: Consumer<InitData> = /* @__PURE__ */ _InitData.Consumer();
-/**
- * A React Hooks for you to get `initData`.
- * If `initData` is changed, a re-render will be triggered automatically.
- *
- * @example
- *
- * ```ts
- * function App() {
- *   const initData = useInitData();
- *
- *   initData.someProperty // use it
- * }
- * ```
- *
- * @public
- */
-export const useInitData: () => InitData = /* @__PURE__ */ _InitData.use();
-/**
- * A React Hooks for you to get notified when `initData` changed.
- *
- * @example
- * ```ts
- * function App() {
- *   useInitDataChanged((data) => {
- *     data.someProperty // can use it
- *   })
- * }
- * ```
- * @public
- */
-export const useInitDataChanged: (callback: (data: InitData) => void) => void = /* @__PURE__ */ _InitData.useChanged();
-
-// const {
-//   Provider: GlobalPropsProvider,
-//   Consumer: GlobalPropsConsumer,
-//   // InitDataContext,
-//   use: useGlobalProps,
-//   useChanged: useGlobalPropsChanged,
-// } = /* @__PURE__ */ factory(
-//   {
-//     createContext,
-//     useState,
-//     useEffect,
-//     createElement,
-//   } as any,
-//   "__globalProps",
-//   "onGlobalPropsChanged"
-// );
-
-// export { GlobalPropsProvider, GlobalPropsConsumer, useGlobalProps, useGlobalPropsChanged };
-
-/**
- * The interface you can extends so that the `defaultDataProcessor` parameter can be customized
- *
- * Should be used with `lynx.registerDataProcessors`. See more examples at {@link Lynx.registerDataProcessors}.
- *
- * @public
- */
-export interface InitDataRaw {}
-/**
- * The interface you can extends so that the `defaultDataProcessor` returning value can be customized
- *
- * Should be used with `lynx.registerDataProcessors`. See more examples at {@link Lynx.registerDataProcessors}.
- *
- * @public
- */
-export interface InitData {}
-
-export { withInitDataInState };
-
-/**
- * The data processors that registered with {@link Lynx.registerDataProcessors}.
- *
- * @example
- *
- * Extending `dataProcessors` interface
- *
- * ```ts
- * import type { DataProcessors as WellKnownDataProcessors } from '@lynx-js/react';
- *
- * declare module '@lynx-js/react' {
- *   interface DataProcessors extends WellKnownDataProcessors {
- *     foo(bar: string): number;
- *   }
- * }
- * ```
- *
- * Then you can use `lynx.registerDataProcessors` with types.
- *
- * ```js
- * lynx.registerDataProcessors({
- *   dataProcessors: {
- *     foo(bar) {
- *       return 1;
- *     }
- *   }
- * })
- * ```
- *
- * @public
- */
-export interface DataProcessors {
-  /**
-   * Optional processor to override screen metrics used by the app
-   *
-   * @param metrics - The physical screen dimensions in pixels
-   *
-   * @returns New screen dimensions to be used by the app
-   *
-   * @example
-   *
-   * ```ts
-   * lynx.registerDataProcessors({
-   *   dataProcessors: {
-   *     getScreenMetricsOverride: (metrics) => {
-   *       // Force a specific aspect ratio
-   *       return {
-   *         width: metrics.width,
-   *         height: metrics.width * (16/9)
-   *       };
-   *     }
-   *   }
-   * });
-   * ```
-   */
-  getScreenMetricsOverride?(metrics: {
-    /**
-     * The physical pixel width of the screen
-     */
-    width: number;
-    /**
-     * The physical pixel height of the screen
-     */
-    height: number;
-  }): { width: number; height: number };
-
-  /**
-   * Custom unknown data processors.
-   *
-   * @remarks
-   *
-   * You may extends the `DataProcessors` interface for better TypeScript types. See {@link DataProcessors}.
-   */
-  [processorName: string]: (...args: any[]) => any;
-}
-
-/**
- * Definition of DataProcessor(s)
- * @public
- */
-export interface DataProcessorDefinition {
-  /**
-   * You can custom input and output type of `defaultDataProcessor` by extends {@link InitDataRaw} and {@link InitData}
-   *
-   * Should be used with `lynx.registerDataProcessors`. See more examples at {@link Lynx.registerDataProcessors}.
-   *
-   * @param rawInitData - initData passed from native code
-   * @returns
-   * @public
-   */
-  defaultDataProcessor?: (rawInitData: InitDataRaw) => InitData;
-  /**
-   * Should be used with `lynx.registerDataProcessors`. See more examples at {@link Lynx.registerDataProcessors}.
-   *
-   * @public
-   */
-  dataProcessors?: DataProcessors;
-}
-
-/**
- * APIs under `lynx` global variable that added by ReactLynx.
- *
- * @example
- *
- * ```ts
- * lynx.registerDataProcessors(...);
- * lynx.querySelector(...);
- * lynx.querySelectorAll(...);
- * ```
- *
- * @public
- */
-export interface Lynx {
-  /**
-   * An alias of `lynx.getJSModule("GlobalEventEmitter").trigger(eventName, params)` only in Lepus
-   *
-   * @public
-   */
-  triggerGlobalEventFromLepus: (eventName: string, params: any) => void;
-
-  /**
-   * Register DataProcessors. You MUST call this before `root.render()`.
-   *
-   * @example
-   *
-   * You MUST call `lynx.registerDataProcessors` before calling `root.render()`.
-   *
-   * ```ts
-   * import { root } from "@lynx-js/react"
-   *
-   * // You MUST call this before `root.render()`
-   * lynx.registerDataProcessors({
-   *   defaultDataProcessor: () => {...} // default DataProcessor
-   *   dataProcessors: {
-   *     getScreenMetricsOverride: () => {...} // named DataProcessor
-   *   }
-   * })
-   *
-   * root.render(<App/>);
-   * ```
-   *
-   * @example
-   *
-   * If you have a class component with `static defaultDataProcessor`
-   * or `static dataProcessors`, you can use it to register DataProcessors.
-   *
-   * ```ts
-   * import { root, Component } from "@lynx-js/react"
-   *
-   * class App extends Component {
-   *   static defaultDataProcessor() {
-   *      ...
-   *   }
-   *
-   *   static dataProcessors = {
-   *     getScreenMetricsOverride() {
-   *       ...
-   *     }
-   *   }
-   * }
-   *
-   * lynx.registerDataProcessors(App); // You can pass `App` because it has the required shape
-   * root.render(<App/>);
-   * ```
-   *
-   * @example
-   *
-   * For developers who want fully typed `defaultDataProcessor`,
-   * they can achieve it by extends interface `InitDataRaw` and `InitData`.
-   *
-   * ```ts
-   * import { root } from "@lynx-js/react"
-   *
-   * interface ExistingInterface {
-   *   somePropertyFromExistingInterface: number
-   * }
-   *
-   * declare module '@lynx-js/react' {
-   *   interface InitDataRaw extends ExistingInterface {
-   *     someAnotherCustomProperty: string
-   *   }
-   * }
-   *
-   * lynx.registerDataProcessors({
-   *   defaultDataProcessor: (initDataRaw) => {
-   *     initDataRaw.somePropertyFromExistingInterface // will be typed
-   *   }
-   * })
-   *
-   * ```
-   *
-   * @example
-   *
-   * For developers who want fully typed `defaultDataProcessor`,
-   * they can achieve it by extends interface `InitDataRaw` and `InitData`.
-   *
-   * ```ts
-   * import { root, useInitData } from "@lynx-js/react"
-   *
-   * interface AnotherExistingInterface {
-   *   someAnotherPropertyFromExistingInterface: number
-   * }
-   *
-   * declare module '@lynx-js/react' {
-   *   interface InitData extends AnotherExistingInterface {
-   *     someCustomProperty: string
-   *   }
-   * }
-   *
-   * root.registerDataProcessors({
-   *   defaultDataProcessor: () => {
-   *     return {
-   *       someCustomProperty: 'value', // will be typed
-   *       someAnotherPropertyFromExistingInterface: 1, // will be typed
-   *     }
-   *   }
-   * })
-   *
-   * function App() {
-   *   const initData = useInitData();
-   *
-   *   initData.someCustomProperty // will be typed
-   *   initData.someAnotherPropertyFromExistingInterface // will be typed
-   * }
-   *
-   * ```
-   * @public
-   */
-  registerDataProcessors: (dataProcessorDefinition?: DataProcessorDefinition) => void;
-}
-
-export { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
-export { runOnBackground } from './worklet/runOnBackground.js';
-export { runOnMainThread } from './worklet/runOnMainThread.js';
-export { MainThreadRef, useMainThreadRef } from './worklet/workletRef.js';

package/runtime/src/lynx.ts

@@ -1,58 +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 { options } 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 { replaceCommitHook } from './lifecycle/patch/commit.js';
-import { addCtxNotFoundEventListener } from './lifecycle/patch/error.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';
-
-export { runWithForce } from './lynx/runWithForce.js';
-
-// @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
-if (__MAIN_THREAD__ && 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) | undefined, schema: string) => {
-    return result?.(schema);
-  };
-}
-
-if (__MAIN_THREAD__) {
-  injectCalledByNative();
-  injectUpdateMainThread();
-  if (__DEV__) {
-    injectLepusMethods();
-  }
-}
-
-// TODO: replace this with __PROFILE__
-if (__PROFILE__) {
-  // We are profiling both main-thread and background.
-  initProfileHook();
-}
-
-if (__BACKGROUND__) {
-  // Trick Preact and TypeScript to accept our custom document adapter.
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  options.document = document as any;
-  setupBackgroundDocument();
-  injectTt();
-  addCtxNotFoundEventListener();
-
-  if (process.env['NODE_ENV'] === 'test') {}
-  else {
-    replaceCommitHook();
-    initTimingAPI();
-  }
-}
-
-setupLynxEnv();

package/runtime/src/opcodes.ts

@@ -1,155 +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 { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
-import { CHILDREN } from './renderToOpcodes/constants.js';
-import { SnapshotInstance } from './snapshot.js';
-
-const enum Opcode {
-  Begin = 0,
-  End,
-  Attr,
-  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, componentAtIndexes] = componentAtIndexFactory(top.childNodes, hydrate);
-          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, componentAtIndexes);
-        }
-
-        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];
-  for (let i = 0; i < opcodes.length;) {
-    const opcode = opcodes[i];
-    switch (opcode) {
-      case Opcode.Begin: {
-        const p = top;
-        top = opcodes[i + 1];
-        // @ts-ignore
-        if (top.__parent) {
-          // already inserted
-          top = new SnapshotInstance(top.type);
-          opcodes[i + 1] = top;
-        }
-        p.insertBefore(top);
-        stack.push(top);
-
-        i += 2;
-        break;
-      }
-      case Opcode.End: {
-        // @ts-ignore
-        top[CHILDREN] = undefined;
-
-        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 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);
-
-        i += 2;
-        break;
-      }
-    }
-  }
-}

package/runtime/src/pendingListUpdates.ts

@@ -1,18 +0,0 @@
-// Copyright 2025 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 { ListUpdateInfo } from './listUpdateInfo.js';
-
-export const __pendingListUpdates = {
-  values: {} as Record<number, ListUpdateInfo>,
-  clear(): void {
-    this.values = {};
-  },
-  flush(): void {
-    Object.values(this.values).forEach(update => {
-      update.flush();
-    });
-    this.clear();
-  },
-};

package/runtime/src/renderToOpcodes/constants.ts

@@ -1,24 +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.
-export const DIFF = '__b';
-export const RENDER = '__r';
-export const DIFFED = 'diffed';
-export const COMMIT = '__c';
-export const SKIP_EFFECTS = '__s';
-export const CATCH_ERROR = '__e';
-
-// VNode properties
-export const COMPONENT = '__c';
-export const CHILDREN = '__k';
-export const PARENT = '__';
-export const MASK = '__m';
-
-// Component properties
-export const VNODE = '__v';
-export const DIRTY = '__d';
-export const FORCE = '__e';
-export const NEXT_STATE = '__s';
-export const CHILD_DID_SUSPEND = '__c';
-export const RENDER_CALLBACKS = '__h';
-export const HOOK = '__h';