@lingxia/page-runtime 0.5.0 → 0.6.0

package/src/react/text_component_shared.ts

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

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

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

package/src/vue/LxNavigator.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { ref, h, onMounted, onBeforeUnmount, useAttrs } from 'vue';
-import type { LxNavigatorEvent } from '@lingxia/elements';
-import { buildNavigatorNativeAttrs } from '@lingxia/elements';
-import type { LxNavigatorProps } from './types.js';
-import '@lingxia/elements';
-
-const props = withDefaults(defineProps<LxNavigatorProps>(), {
-  openType: 'navigate',
-  delta: 1,
-  hoverClass: 'navigator-hover',
-  hoverStopPropagation: false,
-  hoverStartTime: 20,
-  hoverStayTime: 70,
-});
-
-const slots = defineSlots();
-const attrs = useAttrs();
-
-const emit = defineEmits<{
-  success: [e: LxNavigatorEvent];
-  fail: [e: LxNavigatorEvent];
-  complete: [e: LxNavigatorEvent];
-}>();
-
-const elementRef = ref<HTMLElement | null>(null);
-
-const handleSuccess = (e: Event) => emit('success', e as LxNavigatorEvent);
-const handleFail = (e: Event) => emit('fail', e as LxNavigatorEvent);
-const handleComplete = (e: Event) => emit('complete', e as LxNavigatorEvent);
-const successListener: EventListenerObject = { handleEvent: handleSuccess };
-const failListener: EventListenerObject = { handleEvent: handleFail };
-const completeListener: EventListenerObject = { handleEvent: handleComplete };
-
-onMounted(() => {
-  const el = elementRef.value;
-  if (!el) return;
-  el.addEventListener('success', successListener);
-  el.addEventListener('fail', failListener);
-  el.addEventListener('complete', completeListener);
-});
-
-onBeforeUnmount(() => {
-  const el = elementRef.value;
-  if (!el) return;
-  el.removeEventListener('success', successListener);
-  el.removeEventListener('fail', failListener);
-  el.removeEventListener('complete', completeListener);
-});
-
-defineExpose({ el: elementRef });
-
-const render = () => h(
-  'lx-navigator',
-  {
-    ref: elementRef,
-    ...buildNavigatorNativeAttrs({
-      url: props.url,
-      openType: props.openType,
-      target: props.target,
-      delta: props.delta,
-      appId: props.appId,
-      path: props.path,
-      phoneNumber: props.phoneNumber,
-      hoverClass: props.hoverClass,
-      hoverStopPropagation: props.hoverStopPropagation,
-      hoverStartTime: props.hoverStartTime,
-      hoverStayTime: props.hoverStayTime,
-    }, attrs as Record<string, unknown>),
-    class: props.class ?? attrs.class,
-    style: props.style ?? attrs.style,
-  },
-  slots.default?.()
-);
-</script>
-
-<template>
-  <render />
-</template>

package/src/vue/LxPicker.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
-import { registerPickerComponent } from '@lingxia/elements';
-import {
-  buildPickerNativeAttrs,
-  getPickerDisplayText,
-  getPickerValueFromIndex,
-} from '@lingxia/elements';
-import { bindElementEvents, getCustomEventDetail, unbindElementEvents } from './text_component_shared.js';
-import type { LxPickerProps } from './types.js';
-
-const props = withDefaults(defineProps<LxPickerProps>(), {
-  placeholder: 'Please select',
-  disabled: false,
-});
-const attrs = useAttrs();
-
-const slots = defineSlots();
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | string[]];
-  confirm: [value: string | string[]];
-  cancel: [];
-  scroll: [value: string | string[]];
-}>();
-
-if (typeof window !== 'undefined') {
-  registerPickerComponent();
-}
-
-const visible = ref(false);
-const vueId = useId();
-const pickerId = computed(() => `lx-picker-${vueId.replace(/[:]/g, '')}`);
-const pickerRef = ref<HTMLElement | null>(null);
-let boundElement: HTMLElement | null = null;
-const pickerEventListeners: Record<string, EventListenerObject> = {
-  change: {
-    handleEvent: (event: Event) => handleChange(event),
-  },
-  scroll: {
-    handleEvent: (event: Event) => handleScroll(event),
-  },
-};
-
-const displayText = computed(() => getPickerDisplayText(props.modelValue, props.fields));
-
-function handleChange(e: Event) {
-  props.onChange?.(e);
-  const detail = getCustomEventDetail<{
-    confirmed?: boolean;
-    cancelled?: boolean;
-    value?: string | string[];
-    index?: number | number[];
-  }>(e);
-  if (detail.confirmed) {
-    if (props.mode === 'date' || props.mode === 'time') {
-      const nextValue = detail.value ?? '';
-      emit('update:modelValue', nextValue);
-      emit('confirm', nextValue);
-    } else if (detail.index !== undefined) {
-      const nextValue = getPickerValueFromIndex(props.columns, detail.index);
-      emit('update:modelValue', nextValue);
-      emit('confirm', nextValue);
-    }
-    visible.value = false;
-  } else if (detail.cancelled) {
-    emit('cancel');
-    visible.value = false;
-  }
-}
-
-function handleScroll(e: Event) {
-  props.onNativeScroll?.(e);
-  const detail = getCustomEventDetail<{
-    value?: string | string[];
-    index?: number | number[];
-  }>(e);
-  if (detail.value !== undefined) {
-    emit('scroll', detail.value);
-  } else if (detail.index !== undefined) {
-    emit('scroll', getPickerValueFromIndex(props.columns, detail.index));
-  }
-}
-
-function handleClick() {
-  if (!props.disabled) visible.value = true;
-}
-
-watch(pickerRef, (element) => {
-  boundElement = bindElementEvents(boundElement, element, pickerEventListeners);
-});
-
-onBeforeUnmount(() => {
-  unbindElementEvents(boundElement, pickerEventListeners);
-});
-
-const pickerProps = computed(() => {
-  return buildPickerNativeAttrs({
-    id: pickerId.value,
-    columns: props.columns,
-    mode: props.mode,
-    start: props.start,
-    end: props.end,
-    fields: props.fields,
-    modelValue: props.modelValue,
-    cancelText: props.cancelText,
-    cancelTextColor: props.cancelTextColor,
-    cancelButtonColor: props.cancelButtonColor,
-    confirmText: props.confirmText,
-    confirmTextColor: props.confirmTextColor,
-    confirmButtonColor: props.confirmButtonColor,
-  }, attrs as Record<string, unknown>);
-});
-
-const triggerStyle = computed(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '12px 14px',
-  backgroundColor: '#fff',
-  border: '1px solid #e5e7eb',
-  borderRadius: '8px',
-  cursor: props.disabled ? 'not-allowed' : 'pointer',
-  opacity: props.disabled ? 0.5 : 1,
-  width: '100%',
-  boxSizing: 'border-box',
-}));
-
-defineExpose({ el: pickerRef });
-
-const renderPicker = () => visible.value ? h('lx-picker', { ref: pickerRef, ...pickerProps.value }) : null;
-</script>
-
-<template>
-  <slot :open="handleClick" :disabled="props.disabled">
-    <div :class="props.class ?? attrs.class" :style="[triggerStyle, props.style ?? attrs.style]" @click="handleClick">
-      <span :style="{ color: modelValue ? '#111' : '#9ca3af' }">{{ displayText || placeholder }}</span>
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2">
-        <path d="M6 9l6 6 6-6" />
-      </svg>
-    </div>
-  </slot>
-  <renderPicker />
-</template>

package/src/vue/LxTextarea.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { computed, h, onBeforeUnmount, ref, useAttrs, watch } from 'vue';
-import { registerTextareaComponent } from '@lingxia/elements';
-import { buildTextareaNativeAttrs } from '@lingxia/elements';
-import type { LxTextareaProps } from './types.js';
-import {
-  bindElementEvents,
-  getCustomEventDetail,
-  unbindElementEvents,
-} from './text_component_shared.js';
-
-const props = withDefaults(defineProps<LxTextareaProps>(), {
-  disabled: false,
-});
-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>];
-  lineChange: [detail: Record<string, unknown>];
-  keyboardHeightChange: [detail: Record<string, unknown>];
-}>();
-
-if (typeof window !== 'undefined') {
-  registerTextareaComponent();
-}
-
-const elementRef = ref<HTMLElement | null>(null);
-let boundElement: HTMLElement | null = null;
-
-const textareaEventListeners: 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)),
-  },
-  linechange: {
-    handleEvent: (event: Event) => emit('lineChange', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-  keyboardheightchange: {
-    handleEvent: (event: Event) => emit('keyboardHeightChange', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-};
-
-watch(elementRef, (element) => {
-  boundElement = bindElementEvents(boundElement, element, textareaEventListeners);
-});
-
-onBeforeUnmount(() => {
-  unbindElementEvents(boundElement, textareaEventListeners);
-});
-
-const textareaProps = computed<Record<string, unknown>>(() => {
-  const result: Record<string, unknown> = buildTextareaNativeAttrs({
-    ...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 renderTextarea = () => h('lx-textarea', { ref: elementRef, ...textareaProps.value });
-</script>
-
-<template>
-  <renderTextarea />
-</template>