@lingxia/page-runtime 0.5.0

package/src/react/hook.ts

@@ -0,0 +1,317 @@
+import * as React from "react";
+import type {
+  LxChannel,
+  LxBridgeError,
+  LxStream,
+} from "@lingxia/bridge";
+import {
+  ensurePageBridgeSubscription,
+  getMethodKey,
+  getPageActions,
+  getPageSnapshot,
+  invokeMethod,
+  resolveParams,
+  stableParamKey,
+  subscribePageSnapshot,
+  toBridgeError,
+  type ActionMap,
+  type ChannelIn,
+  type ChannelOut,
+  type Listener,
+  type MethodParams,
+  type ParamsSource,
+  type Snapshot,
+  type StreamData,
+  type StreamResult,
+} from "../shared/runtime.js";
+
+export function useLxPage<
+  TData = Snapshot,
+  TActions extends ActionMap = ActionMap,
+>(): { data: TData; actions: TActions } {
+  ensurePageBridgeSubscription();
+  const [, setVersion] = React.useState(0);
+
+  React.useEffect(() => {
+    ensurePageBridgeSubscription();
+    const listener: Listener = () => setVersion((v) => v + 1);
+    const unsubscribe = subscribePageSnapshot(listener);
+    setVersion((v) => v + 1);
+    return unsubscribe;
+  }, []);
+
+  const actions = React.useMemo(() => getPageActions<TActions>(), []);
+  return { data: getPageSnapshot<TData>(), actions };
+}
+
+export interface LxStreamOptions<TData, TReduced> {
+  params?: unknown | (() => unknown);
+  manual?: boolean;
+  reduce?: (accumulated: TReduced, chunk: TData) => TReduced;
+  initial?: TReduced;
+}
+
+export interface LxStreamState<TData, TResult = unknown> {
+  data: TData | undefined;
+  result: TResult | undefined;
+  error: LxBridgeError | undefined;
+  streaming: boolean;
+  cancel: () => void;
+  start: () => void;
+}
+
+export function useLxStream<
+  TMethod extends (...args: any[]) => LxStream<any, any>,
+  TReduced = StreamData<TMethod>,
+>(
+  method: TMethod,
+  options?: LxStreamOptions<StreamData<TMethod>, TReduced> & {
+    params?: ParamsSource<MethodParams<TMethod>>;
+  },
+): LxStreamState<
+  TReduced extends StreamData<TMethod> ? StreamData<TMethod> : TReduced,
+  StreamResult<TMethod>
+> {
+  type TData = StreamData<TMethod>;
+  type TResult = StreamResult<TMethod>;
+  type TOut = TReduced extends TData ? TData : TReduced;
+
+  const [state, setState] = React.useState<{
+    data: TOut | undefined;
+    result: TResult | undefined;
+    error: LxBridgeError | undefined;
+    streaming: boolean;
+  }>({
+    data: (options?.reduce ? options.initial : undefined) as TOut | undefined,
+    result: undefined,
+    error: undefined,
+    streaming: false,
+  });
+
+  const handleRef = React.useRef<LxStream<TData, TResult> | null>(null);
+  const accRef = React.useRef<TReduced | undefined>(options?.initial);
+  const optionsRef = React.useRef(options);
+  const methodRef = React.useRef(method);
+  const paramsRef = React.useRef(resolveParams(options?.params));
+  const runIdRef = React.useRef(0);
+  const resolvedParams = resolveParams(options?.params);
+  const paramsKey = options?.manual ? "" : stableParamKey(resolvedParams);
+  const methodDep = getMethodKey(method) ?? method;
+
+  optionsRef.current = options;
+  methodRef.current = method;
+  paramsRef.current = resolvedParams;
+
+  const cancel = React.useCallback(() => {
+    runIdRef.current += 1;
+    handleRef.current?.cancel();
+    handleRef.current = null;
+    setState((prev) => ({ ...prev, streaming: false }));
+  }, []);
+
+  const start = React.useCallback(() => {
+    handleRef.current?.cancel();
+    const runId = runIdRef.current + 1;
+    runIdRef.current = runId;
+
+    const opts = optionsRef.current;
+    accRef.current = opts?.initial;
+    setState({
+      data: (opts?.reduce ? opts.initial : undefined) as TOut | undefined,
+      result: undefined,
+      error: undefined,
+      streaming: true,
+    });
+
+    let handle: LxStream<TData, TResult>;
+    try {
+      handle = invokeMethod(methodRef.current, paramsRef.current) as LxStream<TData, TResult>;
+    } catch (err: unknown) {
+      if (runIdRef.current !== runId) return;
+      handleRef.current = null;
+      setState((prev) => ({
+        ...prev,
+        error: toBridgeError(err),
+        streaming: false,
+      }));
+      return;
+    }
+    handleRef.current = handle;
+
+    handle.on("data", (chunk: TData) => {
+      if (runIdRef.current !== runId) return;
+      const currentOpts = optionsRef.current;
+      if (currentOpts?.reduce) {
+        accRef.current = currentOpts.reduce(
+          accRef.current as TReduced,
+          chunk,
+        );
+        setState((prev) => ({
+          ...prev,
+          data: accRef.current as TOut,
+        }));
+      } else {
+        setState((prev) => ({
+          ...prev,
+          data: chunk as unknown as TOut,
+        }));
+      }
+    });
+
+    handle.on("end", (result: TResult) => {
+      if (runIdRef.current !== runId) return;
+      handleRef.current = null;
+      setState((prev) => ({
+        ...prev,
+        result,
+        streaming: false,
+      }));
+    });
+
+    handle.on("error", (err: LxBridgeError) => {
+      if (runIdRef.current !== runId) return;
+      handleRef.current = null;
+      setState((prev) => ({
+        ...prev,
+        error: err,
+        streaming: false,
+      }));
+    });
+  }, []);
+
+  React.useEffect(() => {
+    if (!options?.manual) {
+      start();
+    }
+    return () => {
+      runIdRef.current += 1;
+      handleRef.current?.cancel();
+      handleRef.current = null;
+    };
+  }, [methodDep, options?.manual, paramsKey, start]);
+
+  return { ...state, cancel, start };
+}
+
+export interface LxChannelOptions {
+  params?: unknown | (() => unknown);
+  manual?: boolean;
+}
+
+export interface LxChannelState<TData, TOut = TData> {
+  last: TData | undefined;
+  error: LxBridgeError | undefined;
+  connecting: boolean;
+  connected: boolean;
+  send: (payload: TOut) => void;
+  close: (code?: string, reason?: string) => void;
+  reopen: () => void;
+}
+
+export function useLxChannel<
+  TMethod extends (...args: any[]) => Promise<LxChannel<any, any>>,
+>(
+  method: TMethod,
+  options?: LxChannelOptions & {
+    params?: ParamsSource<MethodParams<TMethod>>;
+  },
+): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>> {
+  type TIn = ChannelIn<TMethod>;
+  type TOut = ChannelOut<TMethod>;
+
+  const [state, setState] = React.useState<{
+    last: TIn | undefined;
+    error: LxBridgeError | undefined;
+    connecting: boolean;
+    connected: boolean;
+  }>({
+    last: undefined,
+    error: undefined,
+    connecting: false,
+    connected: false,
+  });
+
+  const chRef = React.useRef<LxChannel<TIn, TOut> | null>(null);
+  const methodRef = React.useRef(method);
+  const paramsRef = React.useRef(resolveParams(options?.params));
+  const runIdRef = React.useRef(0);
+  const resolvedParams = resolveParams(options?.params);
+  const paramsKey = options?.manual ? "" : stableParamKey(resolvedParams);
+  const methodDep = getMethodKey(method) ?? method;
+
+  methodRef.current = method;
+  paramsRef.current = resolvedParams;
+
+  const send = React.useCallback((payload: TOut) => {
+    chRef.current?.send(payload);
+  }, []);
+
+  const close = React.useCallback((code?: string, reason?: string) => {
+    runIdRef.current += 1;
+    chRef.current?.close(code, reason);
+    chRef.current = null;
+    setState((prev) => ({ ...prev, connecting: false, connected: false }));
+  }, []);
+
+  const reopen = React.useCallback(() => {
+    chRef.current?.close();
+    chRef.current = null;
+
+    const runId = ++runIdRef.current;
+    setState({
+      last: undefined,
+      error: undefined,
+      connecting: true,
+      connected: false,
+    });
+
+    Promise.resolve(
+      invokeMethod(methodRef.current, paramsRef.current) as Promise<LxChannel<TIn, TOut>>,
+    )
+      .then((ch) => {
+        if (runIdRef.current !== runId) {
+          ch.close();
+          return;
+        }
+        chRef.current = ch;
+        setState((prev) => ({ ...prev, connecting: false, connected: true }));
+
+        ch.on("data", (payload) => {
+          if (runIdRef.current !== runId) return;
+          setState((prev) => ({ ...prev, last: payload as TIn }));
+        });
+        ch.on("close", () => {
+          if (runIdRef.current !== runId) return;
+          chRef.current = null;
+          setState((prev) => ({ ...prev, connecting: false, connected: false }));
+        });
+        ch.on("error", (err: LxBridgeError) => {
+          if (runIdRef.current !== runId) return;
+          chRef.current = null;
+          setState((prev) => ({ ...prev, error: err, connecting: false, connected: false }));
+        });
+      })
+      .catch((err: unknown) => {
+        if (runIdRef.current !== runId) return;
+        setState({
+          last: undefined,
+          error: toBridgeError(err),
+          connecting: false,
+          connected: false,
+        });
+      });
+  }, []);
+
+  React.useEffect(() => {
+    if (!options?.manual) {
+      reopen();
+    }
+    return () => {
+      runIdRef.current += 1;
+      chRef.current?.close();
+      chRef.current = null;
+    };
+  }, [methodDep, options?.manual, paramsKey, reopen]);
+
+  return { ...state, send, close, reopen };
+}

package/src/react/index.ts

@@ -0,0 +1,14 @@
+export {
+  useLxPage,
+  useLxStream,
+  useLxChannel,
+  type LxStreamOptions,
+  type LxStreamState,
+  type LxChannelOptions,
+  type LxChannelState,
+} from "./hook.js";
+export { LxVideo, type LxVideoProps } from "./LxVideo.js";
+export { LxPicker, type LxPickerProps } from "./LxPicker.js";
+export { LxNavigator, type LxNavigatorProps } from "./LxNavigator.js";
+export { LxInput, type LxInputProps } from "./LxInput.js";
+export { LxTextarea, type LxTextareaProps } from "./LxTextarea.js";

package/src/react/text_component_shared.ts

@@ -0,0 +1,43 @@
+import type { ForwardedRef } from "react";
+
+export function getCustomEventDetail<T>(event: Event): T {
+  return ((event as CustomEvent).detail ?? {}) as T;
+}
+
+export function assignForwardedRef<T>(ref: ForwardedRef<T>, value: T | null): void {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}
+
+export function bindElementEvents(
+  boundElement: HTMLElement | null,
+  nextElement: HTMLElement | null,
+  listeners: Record<string, EventListenerObject>
+): HTMLElement | null {
+  if (boundElement && boundElement !== nextElement) {
+    unbindElementEvents(boundElement, listeners);
+    boundElement = null;
+  }
+  if (nextElement && boundElement !== nextElement) {
+    for (const [event, listener] of Object.entries(listeners)) {
+      nextElement.addEventListener(event, listener);
+    }
+    boundElement = nextElement;
+  }
+  return boundElement;
+}
+
+export function unbindElementEvents(
+  boundElement: HTMLElement | null,
+  listeners: Record<string, EventListenerObject>
+): void {
+  if (!boundElement) return;
+  for (const [event, listener] of Object.entries(listeners)) {
+    boundElement.removeEventListener(event, listener);
+  }
+}

package/src/shared/runtime.ts

@@ -0,0 +1,186 @@
+import type {
+  DataSubscriber,
+  LxBridgeError,
+  LxChannel,
+  LxStream,
+  StateInfo,
+} from "@lingxia/bridge";
+
+export type ActionMap = Record<string, (...args: unknown[]) => unknown>;
+export type Snapshot = Record<string, unknown>;
+export type Listener = () => void;
+export type ParamsSource<T> = T | (() => T);
+export type MethodParams<TMethod> = TMethod extends () => any
+  ? undefined
+  : TMethod extends (params: infer P) => any
+    ? P
+    : never;
+export type StreamData<TMethod> =
+  TMethod extends (...args: any[]) => LxStream<infer TData, any> ? TData : never;
+export type StreamResult<TMethod> =
+  TMethod extends (...args: any[]) => LxStream<any, infer TResult>
+    ? TResult
+    : never;
+export type ChannelIn<TMethod> =
+  TMethod extends (...args: any[]) => Promise<LxChannel<infer TIn, any>>
+    ? TIn
+    : never;
+export type ChannelOut<TMethod> =
+  TMethod extends (...args: any[]) => Promise<LxChannel<any, infer TOut>>
+    ? TOut
+    : never;
+
+let snapshot: Snapshot = {};
+let stateInfo: StateInfo = { rev: -1, initial: true };
+let subscribed = false;
+let subscribeRetryTimer: ReturnType<typeof setTimeout> | null = null;
+let initialSnapshotResolved = false;
+let snapshotRequestInFlight = false;
+const listeners = new Set<Listener>();
+
+export function toBridgeError(err: unknown): LxBridgeError {
+  return err && typeof err === "object" && "code" in err
+    ? (err as LxBridgeError)
+    : {
+        code: "BRIDGE_INTERNAL_ERROR",
+        message: err instanceof Error ? err.message : String(err),
+      };
+}
+
+export function resolveParams<T>(source?: ParamsSource<T>): T | undefined {
+  if (typeof source === "function") {
+    return (source as () => T)();
+  }
+  return source;
+}
+
+export function stableParamKey(value: unknown): string {
+  if (value === undefined) return "undefined";
+  try {
+    return JSON.stringify(value) ?? "undefined";
+  } catch {
+    return String(value);
+  }
+}
+
+export function invokeMethod<TMethod extends (...args: any[]) => any>(
+  method: TMethod,
+  params: unknown,
+): ReturnType<TMethod> {
+  if (params === undefined) {
+    return method() as ReturnType<TMethod>;
+  }
+  return method(params) as ReturnType<TMethod>;
+}
+
+export function getMethodKey(method: unknown): string | undefined {
+  if (typeof method !== "function") return undefined;
+  const candidate = (method as { __funcName?: unknown }).__funcName;
+  return typeof candidate === "string" && candidate !== "" ? candidate : undefined;
+}
+
+function notifyListeners(): void {
+  listeners.forEach((listener) => {
+    try {
+      listener();
+    } catch {
+      // Ignore listener errors to avoid breaking state fanout.
+    }
+  });
+}
+
+function updateSnapshot(next: unknown, info: StateInfo): void {
+  snapshot = next && typeof next === "object" ? (next as Snapshot) : {};
+  stateInfo = info;
+  notifyListeners();
+}
+
+function scheduleSubscribeRetry(): void {
+  if (subscribeRetryTimer !== null || subscribed) return;
+  subscribeRetryTimer = setTimeout(() => {
+    subscribeRetryTimer = null;
+    ensurePageBridgeSubscription();
+  }, 10);
+}
+
+function requestInitialSnapshot(bridge: Window["LingXiaBridge"] | undefined): void {
+  if (initialSnapshotResolved || snapshotRequestInFlight) return;
+  if (!bridge?.call) return;
+  snapshotRequestInFlight = true;
+  bridge
+    .call("state.getSnapshot", { scope: "page" })
+    .then(() => {
+      initialSnapshotResolved = true;
+    })
+    .catch(() => {
+      scheduleSubscribeRetry();
+    })
+    .finally(() => {
+      snapshotRequestInFlight = false;
+    });
+}
+
+export function ensurePageBridgeSubscription(): void {
+  if (subscribed) return;
+  const bridge = window.LingXiaBridge;
+  const subscribeState = bridge?.state?.subscribe;
+  if (!subscribeState) {
+    scheduleSubscribeRetry();
+    return;
+  }
+  subscribeState((next, info) => {
+    updateSnapshot(next, info);
+  });
+  subscribed = true;
+  requestInitialSnapshot(bridge);
+}
+
+export function subscribePageSnapshot(listener: Listener): () => void {
+  ensurePageBridgeSubscription();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function subscribePageData(
+  callback: DataSubscriber,
+): () => void {
+  if (typeof callback !== "function") return () => {};
+  ensurePageBridgeSubscription();
+
+  if (stateInfo.rev >= 0) {
+    callback(snapshot, { rev: stateInfo.rev, initial: true });
+  }
+
+  return subscribePageSnapshot(() => {
+    callback(snapshot, stateInfo);
+  });
+}
+
+export function getPageSnapshot<TData = Snapshot>(): TData {
+  ensurePageBridgeSubscription();
+  return snapshot as TData;
+}
+
+export function getPageActions<TActions extends ActionMap>(): TActions {
+  const actions: ActionMap = {};
+  const bridge = window.__pageBridge;
+  if (!bridge?.__names) {
+    return actions as TActions;
+  }
+
+  for (const name of bridge.__names) {
+    if (typeof name !== "string") continue;
+    const fn = bridge[name];
+    if (typeof fn === "function") {
+      actions[name] = fn as (...args: unknown[]) => unknown;
+    }
+  }
+
+  return actions as TActions;
+}
+
+export function getPageStateInfo(): StateInfo {
+  return stateInfo;
+}

package/src/vue/LxInput.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, h, onBeforeUnmount, ref, useAttrs, watch } from 'vue';
+import { registerInputComponent } from '@lingxia/elements';
+import { buildInputNativeAttrs } from '@lingxia/elements';
+import type { LxInputProps } from './types.js';
+import {
+  bindElementEvents,
+  getCustomEventDetail,
+  unbindElementEvents,
+} from './text_component_shared.js';
+
+const props = withDefaults(defineProps<LxInputProps>(), {
+  type: 'text',
+  disabled: false,
+  confirmType: 'done',
+});
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  input: [detail: Record<string, unknown>];
+  change: [detail: Record<string, unknown>];
+  focus: [detail: Record<string, unknown>];
+  blur: [detail: Record<string, unknown>];
+  confirm: [detail: Record<string, unknown>];
+  keyboardHeightChange: [detail: Record<string, unknown>];
+  nicknameReview: [detail: Record<string, unknown>];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerInputComponent();
+}
+
+const elementRef = ref<HTMLElement | null>(null);
+let boundElement: HTMLElement | null = null;
+
+const inputEventListeners: Record<string, EventListenerObject> = {
+  input: {
+    handleEvent: (event: Event) => {
+      const detail = getCustomEventDetail<Record<string, unknown>>(event);
+      if (typeof detail.value === 'string') {
+        emit('update:modelValue', detail.value);
+      }
+      emit('input', detail);
+    },
+  },
+  change: {
+    handleEvent: (event: Event) => emit('change', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+  focus: {
+    handleEvent: (event: Event) => emit('focus', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+  blur: {
+    handleEvent: (event: Event) => emit('blur', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+  confirm: {
+    handleEvent: (event: Event) => emit('confirm', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+  keyboardheightchange: {
+    handleEvent: (event: Event) => emit('keyboardHeightChange', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+  nicknamereview: {
+    handleEvent: (event: Event) => emit('nicknameReview', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+};
+
+watch(elementRef, (element) => {
+  boundElement = bindElementEvents(boundElement, element, inputEventListeners);
+});
+
+onBeforeUnmount(() => {
+  unbindElementEvents(boundElement, inputEventListeners);
+});
+
+const inputProps = computed<Record<string, unknown>>(() => {
+  const result: Record<string, unknown> = buildInputNativeAttrs({
+    ...props,
+    id: props.id ?? (typeof attrs.id === 'string' ? attrs.id : undefined),
+  }, attrs as Record<string, unknown>, elementRef.value !== null);
+  result.class = props.class ?? attrs.class;
+  result.style = props.style ?? attrs.style;
+  return result;
+});
+
+defineExpose({ el: elementRef });
+
+const renderInput = () => h('lx-input', { ref: elementRef, ...inputProps.value });
+</script>
+
+<template>
+  <renderInput />
+</template>