@lingxia/page-runtime 0.5.0

package/src/vue/hook.ts

@@ -0,0 +1,313 @@
+import {
+  onUnmounted,
+  reactive,
+  ref,
+  unref,
+  watch,
+  type Ref,
+} from "vue";
+import type {
+  LxChannel,
+  LxBridgeError,
+  LxStream,
+} from "@lingxia/bridge";
+import {
+  ensurePageBridgeSubscription,
+  getMethodKey,
+  getPageActions,
+  invokeMethod,
+  resolveParams,
+  stableParamKey,
+  subscribePageData,
+  toBridgeError,
+  type ActionMap,
+  type ChannelIn,
+  type ChannelOut,
+  type MethodParams,
+  type ParamsSource,
+  type Snapshot,
+  type StreamData,
+  type StreamResult,
+} from "../shared/runtime.js";
+
+type MethodSource<T> = T | Ref<T>;
+
+function resolveMethod<TMethod>(source: MethodSource<TMethod>): TMethod {
+  return unref(source) as TMethod;
+}
+
+const reactiveSnapshot = reactive<Snapshot>({});
+let snapshotSubscribed = false;
+
+function ensureReactiveSnapshot(): void {
+  if (snapshotSubscribed) return;
+  snapshotSubscribed = true;
+  subscribePageData((next) => {
+    const normalized: Snapshot =
+      next && typeof next === "object" ? (next as Snapshot) : {};
+
+    for (const key of Object.keys(reactiveSnapshot)) {
+      if (!Object.prototype.hasOwnProperty.call(normalized, key)) {
+        delete reactiveSnapshot[key];
+      }
+    }
+    Object.assign(reactiveSnapshot, normalized);
+  });
+}
+
+export function useLxPage<
+  TData = Snapshot,
+  TActions extends ActionMap = ActionMap,
+>(): { data: TData; actions: TActions } {
+  ensurePageBridgeSubscription();
+  ensureReactiveSnapshot();
+  return { data: reactiveSnapshot as TData, actions: getPageActions<TActions>() };
+}
+
+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: Ref<TData | undefined>;
+  result: Ref<TResult | undefined>;
+  error: Ref<LxBridgeError | undefined>;
+  streaming: Ref<boolean>;
+  cancel: () => void;
+  start: () => void;
+}
+
+export function useLxStream<
+  TMethod extends (...args: any[]) => LxStream<any, any>,
+  TReduced = StreamData<TMethod>,
+>(
+  method: MethodSource<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 data = ref<TOut | undefined>(
+    (options?.reduce ? options.initial : undefined) as TOut | undefined,
+  ) as Ref<TOut | undefined>;
+  const result = ref<TResult | undefined>(undefined) as Ref<TResult | undefined>;
+  const error = ref<LxBridgeError | undefined>(undefined);
+  const streaming = ref(false);
+
+  let handle: LxStream<TData, TResult> | null = null;
+  let acc: TReduced | undefined = options?.initial;
+  let runId = 0;
+
+  function cancel(): void {
+    runId += 1;
+    handle?.cancel();
+    handle = null;
+    streaming.value = false;
+  }
+
+  function start(): void {
+    handle?.cancel();
+    const currentRunId = runId + 1;
+    runId = currentRunId;
+
+    acc = options?.initial;
+    data.value = (options?.reduce ? options.initial : undefined) as TOut | undefined;
+    result.value = undefined;
+    error.value = undefined;
+    streaming.value = true;
+
+    let nextHandle: LxStream<TData, TResult>;
+    try {
+      const params = resolveParams(options?.params);
+      nextHandle = invokeMethod(resolveMethod(method), params) as LxStream<TData, TResult>;
+    } catch (err: unknown) {
+      if (runId !== currentRunId) return;
+      handle = null;
+      error.value = toBridgeError(err);
+      streaming.value = false;
+      return;
+    }
+
+    handle = nextHandle;
+
+    nextHandle.on("data", (chunk: TData) => {
+      if (runId !== currentRunId) return;
+      if (options?.reduce) {
+        acc = options.reduce(acc as TReduced, chunk);
+        data.value = acc as TOut;
+      } else {
+        data.value = chunk as unknown as TOut;
+      }
+    });
+
+    nextHandle.on("end", (res: TResult) => {
+      if (runId !== currentRunId) return;
+      handle = null;
+      result.value = res;
+      streaming.value = false;
+    });
+
+    nextHandle.on("error", (err: LxBridgeError) => {
+      if (runId !== currentRunId) return;
+      handle = null;
+      error.value = err;
+      streaming.value = false;
+    });
+  }
+
+  watch(
+    () => {
+      if (options?.manual) return null;
+      const resolvedMethod = resolveMethod(method);
+      return [
+        getMethodKey(resolvedMethod) ?? resolvedMethod,
+        stableParamKey(resolveParams(options?.params)),
+      ];
+    },
+    () => {
+      if (!options?.manual) {
+        start();
+      }
+    },
+    { immediate: !options?.manual },
+  );
+
+  onUnmounted(() => {
+    runId += 1;
+    handle?.cancel();
+    handle = null;
+  });
+
+  return { data, result, error, streaming, cancel, start };
+}
+
+export interface LxChannelOptions {
+  params?: unknown | (() => unknown);
+  manual?: boolean;
+}
+
+export interface LxChannelState<TData, TOut = TData> {
+  last: Ref<TData | undefined>;
+  error: Ref<LxBridgeError | undefined>;
+  connecting: Ref<boolean>;
+  connected: Ref<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: MethodSource<TMethod>,
+  options?: LxChannelOptions & {
+    params?: ParamsSource<MethodParams<TMethod>>;
+  },
+): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>> {
+  type TIn = ChannelIn<TMethod>;
+  type TOut = ChannelOut<TMethod>;
+
+  const last = ref<TIn | undefined>(undefined) as Ref<TIn | undefined>;
+  const error = ref<LxBridgeError | undefined>(undefined);
+  const connecting = ref(false);
+  const connected = ref(false);
+
+  let ch: LxChannel<TIn, TOut> | null = null;
+  let runId = 0;
+
+  function send(payload: TOut): void {
+    ch?.send(payload);
+  }
+
+  function close(code?: string, reason?: string): void {
+    runId += 1;
+    ch?.close(code, reason);
+    ch = null;
+    connecting.value = false;
+    connected.value = false;
+  }
+
+  function reopen(): void {
+    ch?.close();
+    ch = null;
+
+    const thisRunId = ++runId;
+    last.value = undefined;
+    error.value = undefined;
+    connecting.value = true;
+    connected.value = false;
+
+    Promise.resolve(
+      invokeMethod(resolveMethod(method), resolveParams(options?.params)) as Promise<LxChannel<TIn, TOut>>,
+    )
+      .then((nextChannel) => {
+        if (runId !== thisRunId) {
+          nextChannel.close();
+          return;
+        }
+        ch = nextChannel;
+        connecting.value = false;
+        connected.value = true;
+
+        nextChannel.on("data", (payload) => {
+          if (runId !== thisRunId) return;
+          last.value = payload as TIn;
+        });
+
+        nextChannel.on("close", () => {
+          if (runId !== thisRunId) return;
+          ch = null;
+          connecting.value = false;
+          connected.value = false;
+        });
+
+        nextChannel.on("error", (err: LxBridgeError) => {
+          if (runId !== thisRunId) return;
+          ch = null;
+          error.value = err;
+          connecting.value = false;
+          connected.value = false;
+        });
+      })
+      .catch((err: unknown) => {
+        if (runId !== thisRunId) return;
+        error.value = toBridgeError(err);
+        connecting.value = false;
+        connected.value = false;
+      });
+  }
+
+  watch(
+    () => {
+      if (options?.manual) return null;
+      const resolvedMethod = resolveMethod(method);
+      return [
+        getMethodKey(resolvedMethod) ?? resolvedMethod,
+        stableParamKey(resolveParams(options?.params)),
+      ];
+    },
+    () => {
+      if (!options?.manual) {
+        reopen();
+      }
+    },
+    { immediate: !options?.manual },
+  );
+
+  onUnmounted(() => {
+    runId += 1;
+    ch?.close();
+    ch = null;
+  });
+
+  return { last, error, connecting, connected, send, close, reopen };
+}

package/src/vue/index.ts

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

package/src/vue/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/vue/text_component_shared.ts

@@ -0,0 +1,33 @@
+export function getCustomEventDetail<T>(event: Event): T {
+  return ((event as CustomEvent).detail ?? {}) as T;
+}
+
+export function bindElementEvents(
+  currentBoundElement: HTMLElement | null,
+  nextElement: HTMLElement | null,
+  listeners: Record<string, EventListenerObject>
+): HTMLElement | null {
+  if (currentBoundElement && currentBoundElement !== nextElement) {
+    for (const [event, listener] of Object.entries(listeners)) {
+      currentBoundElement.removeEventListener(event, listener);
+    }
+    currentBoundElement = null;
+  }
+  if (nextElement && currentBoundElement !== nextElement) {
+    for (const [event, listener] of Object.entries(listeners)) {
+      nextElement.addEventListener(event, listener);
+    }
+    currentBoundElement = nextElement;
+  }
+  return currentBoundElement;
+}
+
+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/vue/types.ts

@@ -0,0 +1,107 @@
+import type { CSSProperties } from 'vue';
+import type { LxVideoAttributes } from '@lingxia/elements';
+import type { LxNavigatorEvent, NavigatorOpenType, NavigatorTarget } from '@lingxia/elements';
+
+export interface LxVideoProps extends Omit<LxVideoAttributes, 'ref' | 'className' | 'style'> {
+  class?: string;
+  style?: CSSProperties;
+}
+
+export interface LxPickerProps {
+  columns?: string[][] | [string[], Record<string, string[]>];
+  mode?: 'date' | 'time';
+  start?: string;
+  end?: string;
+  fields?: 'year' | 'month' | 'day' | 'range';
+  modelValue?: string | string[];
+  placeholder?: string;
+  class?: string;
+  style?: CSSProperties;
+  disabled?: boolean;
+  cancelText?: string;
+  cancelTextColor?: string;
+  cancelButtonColor?: string;
+  confirmText?: string;
+  confirmTextColor?: string;
+  confirmButtonColor?: string;
+  onChange?: (event: Event) => void;
+  onNativeScroll?: (event: Event) => void;
+  pageBindings?: Record<string, string>;
+}
+
+export interface LxNavigatorProps {
+  url?: string;
+  openType?: NavigatorOpenType;
+  target?: NavigatorTarget;
+  delta?: number;
+  appId?: string;
+  path?: string;
+  phoneNumber?: string;
+  hoverClass?: string;
+  hoverStopPropagation?: boolean;
+  hoverStartTime?: number;
+  hoverStayTime?: number;
+  class?: string;
+  style?: CSSProperties;
+}
+
+export interface LxInputProps {
+  id?: string;
+  modelValue?: string;
+  value?: string;
+  defaultValue?: string;
+  type?: 'text' | 'number' | 'password' | 'digit';
+  password?: boolean;
+  placeholder?: string;
+  placeholderStyle?: string;
+  placeholderClass?: string;
+  maxlength?: number;
+  cursorSpacing?: number;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  focus?: boolean;
+  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
+  alwaysEmbed?: boolean;
+  confirmHold?: boolean;
+  cursor?: number;
+  cursorColor?: string;
+  selectionStart?: number;
+  selectionEnd?: number;
+  adjustPosition?: boolean;
+  holdKeyboard?: boolean;
+  class?: string;
+  style?: CSSProperties;
+  pageBindings?: Record<string, string>;
+}
+
+export interface LxTextareaProps {
+  id?: string;
+  modelValue?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  placeholderStyle?: string;
+  placeholderClass?: string;
+  maxlength?: number;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  focus?: boolean;
+  autoHeight?: boolean;
+  cursorSpacing?: number;
+  showConfirmBar?: boolean;
+  adjustPosition?: boolean;
+  holdKeyboard?: boolean;
+  disableDefaultPadding?: boolean;
+  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return';
+  confirmHold?: boolean;
+  fixed?: boolean;
+  adjustKeyboardTo?: 'cursor' | 'bottom';
+  cursor?: number;
+  selectionStart?: number;
+  selectionEnd?: number;
+  class?: string;
+  style?: CSSProperties;
+  pageBindings?: Record<string, string>;
+}
+
+export type { LxNavigatorEvent };