@lingxia/page-runtime 0.5.0 → 0.6.0

package/src/vue/LxVideo.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
-import { registerVideoComponent } from '@lingxia/elements';
-import {
-  buildVideoNativeAttrs,
-  VIDEO_DOM_EVENT_MAP,
-} from '@lingxia/elements';
-import { bindElementEvents, unbindElementEvents } from './text_component_shared.js';
-import type { LxVideoProps } from './types.js';
-
-const props = withDefaults(defineProps<LxVideoProps>(), {
-  autoplay: false,
-  loop: false,
-  muted: false,
-  controls: true,
-  progressBar: true,
-  live: false,
-});
-const attrs = useAttrs();
-
-const emit = defineEmits<{
-  playRequest: [e: Event];
-  play: [e: Event];
-  playing: [e: Event];
-  pause: [e: Event];
-  stop: [e: Event];
-  ended: [e: Event];
-  timeUpdate: [e: Event];
-  error: [e: Event];
-  loadedMetadata: [e: Event];
-  fullscreenChange: [e: Event];
-  waiting: [e: Event];
-  qualityChange: [e: Event];
-  rateChange: [e: Event];
-}>();
-
-if (typeof window !== 'undefined') {
-  registerVideoComponent();
-}
-
-const elementRef = ref<HTMLElement | null>(null);
-const vueId = useId();
-let boundElement: HTMLElement | null = null;
-
-const resolvedId = computed(() => props.id || `lx-video-${vueId.replace(/[:]/g, '')}`);
-
-const videoEventListeners: Record<string, EventListenerObject> = {
-  [VIDEO_DOM_EVENT_MAP.onPlayRequest]: { handleEvent: (event: Event) => emit('playRequest', event) },
-  [VIDEO_DOM_EVENT_MAP.onPlay]: { handleEvent: (event: Event) => emit('play', event) },
-  [VIDEO_DOM_EVENT_MAP.onPlaying]: { handleEvent: (event: Event) => emit('playing', event) },
-  [VIDEO_DOM_EVENT_MAP.onPause]: { handleEvent: (event: Event) => emit('pause', event) },
-  [VIDEO_DOM_EVENT_MAP.onStop]: { handleEvent: (event: Event) => emit('stop', event) },
-  [VIDEO_DOM_EVENT_MAP.onEnded]: { handleEvent: (event: Event) => emit('ended', event) },
-  [VIDEO_DOM_EVENT_MAP.onTimeUpdate]: { handleEvent: (event: Event) => emit('timeUpdate', event) },
-  [VIDEO_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', event) },
-  [VIDEO_DOM_EVENT_MAP.onLoadedMetadata]: { handleEvent: (event: Event) => emit('loadedMetadata', event) },
-  [VIDEO_DOM_EVENT_MAP.onFullscreenChange]: { handleEvent: (event: Event) => emit('fullscreenChange', event) },
-  [VIDEO_DOM_EVENT_MAP.onWaiting]: { handleEvent: (event: Event) => emit('waiting', event) },
-  [VIDEO_DOM_EVENT_MAP.onQualityChange]: { handleEvent: (event: Event) => emit('qualityChange', event) },
-  [VIDEO_DOM_EVENT_MAP.onRateChange]: { handleEvent: (event: Event) => emit('rateChange', event) },
-};
-
-watch(elementRef, (element) => {
-  boundElement = bindElementEvents(boundElement, element, videoEventListeners);
-});
-
-onBeforeUnmount(() => {
-  unbindElementEvents(boundElement, videoEventListeners);
-});
-
-watch(
-  [elementRef, () => props.rotate, () => props.objectFit],
-  () => {
-    const el = elementRef.value;
-    if (!el) return;
-    const rotate = props.rotate;
-    if (rotate === undefined || rotate === null || rotate === '') {
-      el.removeAttribute('rotate');
-    } else {
-      el.setAttribute('rotate', String(rotate).trim());
-    }
-    const objectFit = props.objectFit;
-    if (objectFit === undefined || objectFit === null || objectFit === '') {
-      el.removeAttribute('object-fit');
-    } else {
-      el.setAttribute('object-fit', String(objectFit).trim().toLowerCase());
-    }
-  },
-  { immediate: true }
-);
-
-const domProps = computed(() => {
-  const result = buildVideoNativeAttrs({
-    ...props,
-    id: resolvedId.value,
-  }, attrs as Record<string, unknown>);
-  return {
-    ...result,
-    class: props.class ?? attrs.class,
-    style: props.style ?? attrs.style,
-  };
-});
-
-defineExpose({ el: elementRef });
-
-const render = () => h('lx-video', { ref: elementRef, ...domProps.value });
-</script>
-
-<template>
-  <render />
-</template>

package/src/vue/hook.ts

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

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

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

package/src/vue/text_component_shared.ts

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

@@ -1,107 +0,0 @@
-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 };