@lingxia/page-runtime 0.5.0

package/dist/vue/text_component_shared.js

@@ -0,0 +1,26 @@
+export function getCustomEventDetail(event) {
+    var _a;
+    return ((_a = event.detail) !== null && _a !== void 0 ? _a : {});
+}
+export function bindElementEvents(currentBoundElement, nextElement, listeners) {
+    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, listeners) {
+    if (!boundElement)
+        return;
+    for (const [event, listener] of Object.entries(listeners)) {
+        boundElement.removeEventListener(event, listener);
+    }
+}

package/dist/vue/types.d.ts

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

package/dist/vue/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@lingxia/page-runtime",
+  "version": "0.5.0",
+  "private": false,
+  "description": "LingXia page runtime for HTML, React, and Vue lxapp views",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "default": "./dist/vue/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "npm run clean && tsc -p tsconfig.json && mkdir -p dist/vue && cp src/vue/*.vue dist/vue/",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@lingxia/bridge": ">=0.5.0",
+    "@lingxia/elements": ">=0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "vue": ">=3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@lingxia/bridge": "file:../lingxia-bridge",
+    "@lingxia/elements": "file:../lingxia-elements",
+    "@types/react": "^19.2.7",
+    "react": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vue": "^3.5.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LingXia-Dev/LingXia.git",
+    "directory": "packages/lingxia-page-runtime"
+  },
+  "license": "MIT"
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+export {
+  ensurePageBridgeSubscription,
+  getPageActions,
+  getPageSnapshot,
+  getPageStateInfo,
+  subscribePageData,
+  subscribePageSnapshot,
+  toBridgeError,
+  resolveParams,
+  stableParamKey,
+  invokeMethod,
+  getMethodKey,
+  type ActionMap,
+  type Snapshot,
+  type ParamsSource,
+  type MethodParams,
+  type StreamData,
+  type StreamResult,
+  type ChannelIn,
+  type ChannelOut,
+} from "./shared/runtime.js";

package/src/react/LxInput.tsx

@@ -0,0 +1,224 @@
+import React, { forwardRef, useCallback, useEffect, useRef } from "react";
+import { registerInputComponent } from "@lingxia/elements";
+import { buildInputNativeAttrs } from "@lingxia/elements";
+import {
+  assignForwardedRef,
+  bindElementEvents,
+  getCustomEventDetail,
+  unbindElementEvents,
+} from "./text_component_shared.js";
+
+export interface LxInputEventDetail {
+  value?: string;
+  cursor?: number;
+  keyCode?: number;
+  height?: number;
+  duration?: number;
+  encryptedValue?: string;
+  encryptError?: string;
+  pass?: boolean;
+  timeout?: boolean;
+}
+
+export interface LxInputProps {
+  id?: 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;
+
+  onInput?: (detail: LxInputEventDetail) => void;
+  onChange?: (detail: LxInputEventDetail) => void;
+  onFocus?: (detail: LxInputEventDetail) => void;
+  onBlur?: (detail: LxInputEventDetail) => void;
+  onConfirm?: (detail: LxInputEventDetail) => void;
+  onKeyboardHeightChange?: (detail: LxInputEventDetail) => void;
+  onNicknameReview?: (detail: LxInputEventDetail) => void;
+
+  // Logic bindings (CLI-generated)
+  pageBindings?: Record<string, string>;
+
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+if (typeof window !== "undefined") {
+  registerInputComponent();
+}
+
+export const LxInput = forwardRef<HTMLElement, LxInputProps>(({
+  value,
+  defaultValue,
+  type,
+  password,
+  placeholder,
+  placeholderStyle,
+  placeholderClass,
+  maxlength,
+  cursorSpacing,
+  autoFocus,
+  disabled,
+  focus,
+  confirmType,
+  alwaysEmbed,
+  confirmHold,
+  cursor,
+  cursorColor,
+  selectionStart,
+  selectionEnd,
+  adjustPosition,
+  holdKeyboard,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onConfirm,
+  onKeyboardHeightChange,
+  onNicknameReview,
+  pageBindings,
+  className,
+  style,
+  id,
+  ...rest
+}, ref) => {
+  const elementRef = useRef<HTMLElement | null>(null);
+  const boundElementRef = useRef<HTMLElement | null>(null);
+  const handlerRef = useRef({
+    onInput,
+    onChange,
+    onFocus,
+    onBlur,
+    onConfirm,
+    onKeyboardHeightChange,
+    onNicknameReview,
+  });
+  handlerRef.current = {
+    onInput,
+    onChange,
+    onFocus,
+    onBlur,
+    onConfirm,
+    onKeyboardHeightChange,
+    onNicknameReview,
+  };
+  const listenerMapRef = useRef<Record<string, EventListenerObject>>({
+    input: {
+      handleEvent: (event: Event) => handlerRef.current.onInput?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+    change: {
+      handleEvent: (event: Event) => handlerRef.current.onChange?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+    focus: {
+      handleEvent: (event: Event) => handlerRef.current.onFocus?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+    blur: {
+      handleEvent: (event: Event) => handlerRef.current.onBlur?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+    confirm: {
+      handleEvent: (event: Event) => handlerRef.current.onConfirm?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+    keyboardheightchange: {
+      handleEvent: (event: Event) => handlerRef.current.onKeyboardHeightChange?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+    nicknamereview: {
+      handleEvent: (event: Event) => handlerRef.current.onNicknameReview?.(getCustomEventDetail<LxInputEventDetail>(event)),
+    },
+  });
+  const elementRefCallback = useCallback((element: HTMLElement | null) => {
+    boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
+    elementRef.current = element;
+    assignForwardedRef(ref, element);
+  }, [ref]);
+
+  useEffect(() => () => {
+    unbindElementEvents(boundElementRef.current, listenerMapRef.current);
+    boundElementRef.current = null;
+    elementRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    const setAttr = (name: string, next: string | null) => {
+      if (next === null) {
+        el.removeAttribute(name);
+        return;
+      }
+      el.setAttribute(name, next);
+    };
+
+    if (type && String(type).trim().length > 0) {
+      el.setAttribute("type", String(type).trim().toLowerCase());
+    } else {
+      el.removeAttribute("type");
+    }
+    if (password) {
+      el.setAttribute("password", "true");
+    } else {
+      el.removeAttribute("password");
+    }
+    setAttr("value", value !== undefined ? String(value) : null);
+    setAttr("focus", focus !== undefined ? (focus ? "true" : "false") : null);
+    setAttr("maxlength", maxlength !== undefined ? String(maxlength) : null);
+    setAttr("placeholder-style", placeholderStyle ? String(placeholderStyle) : null);
+  }, [type, password, value, focus, maxlength, placeholderStyle]);
+
+  // Set pageBindings property on custom element
+  useEffect(() => {
+    const el = elementRef.current as any;
+    if (el && pageBindings) {
+      el.pageBindings = pageBindings;
+    }
+  }, [pageBindings]);
+
+  const inputProps = buildInputNativeAttrs({
+    id,
+    value,
+    defaultValue,
+    type,
+    password,
+    placeholder,
+    placeholderStyle,
+    placeholderClass,
+    maxlength,
+    cursorSpacing,
+    autoFocus,
+    disabled,
+    focus,
+    confirmType,
+    alwaysEmbed,
+    confirmHold,
+    cursor,
+    cursorColor,
+    selectionStart,
+    selectionEnd,
+    adjustPosition,
+    holdKeyboard,
+  }, rest as Record<string, unknown>, boundElementRef.current !== null);
+
+  return React.createElement("lx-input", {
+    ref: elementRefCallback,
+    className,
+    style,
+    ...inputProps,
+  });
+});
+
+LxInput.displayName = "LxInput";

package/src/react/LxNavigator.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import type {
+  LxNavigatorAttributes,
+  LxNavigatorEvent,
+  NavigatorOpenType,
+  NavigatorTarget
+} from '@lingxia/elements';
+import { buildNavigatorNativeAttrs } from '@lingxia/elements';
+
+// Import to ensure custom element is registered
+import '@lingxia/elements';
+
+export interface LxNavigatorProps extends Omit<LxNavigatorAttributes, 'onSuccess' | 'onFail' | 'onComplete'> {
+  // Navigation
+  url?: string;
+  openType?: NavigatorOpenType;
+  target?: NavigatorTarget; // Auto-inferred if not specified
+  delta?: number;
+
+  // Open external lxapp
+  appId?: string;
+  path?: string; // Supports query string
+
+  // Phone call
+  phoneNumber?: string;
+
+  // Hover effect
+  hoverClass?: string;
+  hoverStopPropagation?: boolean;
+  hoverStartTime?: number;
+  hoverStayTime?: number;
+
+  // Styling
+  className?: string;
+  style?: React.CSSProperties;
+
+  // Events
+  onSuccess?: (e: LxNavigatorEvent) => void;
+  onFail?: (e: LxNavigatorEvent) => void;
+  onComplete?: (e: LxNavigatorEvent) => void;
+
+  // Children
+  children?: React.ReactNode;
+}
+
+export const LxNavigator = React.forwardRef<HTMLElement, LxNavigatorProps>(
+  (props, ref) => {
+    const {
+      url,
+      openType = 'navigate',
+      target, // Auto-inferred, no default
+      delta = 1,
+      appId,
+      path,
+      phoneNumber,
+      hoverClass = 'navigator-hover',
+      hoverStopPropagation = false,
+      hoverStartTime = 20,
+      hoverStayTime = 70,
+      className,
+      style,
+      onSuccess,
+      onFail,
+      onComplete,
+      children,
+      ...rest
+    } = props;
+
+    const elementRef = React.useRef<HTMLElement>(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current!);
+
+    React.useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      const handleSuccess = (e: Event) => {
+        if (onSuccess) {
+          onSuccess(e as LxNavigatorEvent);
+        }
+      };
+
+      const handleFail = (e: Event) => {
+        if (onFail) {
+          onFail(e as LxNavigatorEvent);
+        }
+      };
+
+      const handleComplete = (e: Event) => {
+        if (onComplete) {
+          onComplete(e as LxNavigatorEvent);
+        }
+      };
+      const successListener: EventListenerObject = { handleEvent: handleSuccess };
+      const failListener: EventListenerObject = { handleEvent: handleFail };
+      const completeListener: EventListenerObject = { handleEvent: handleComplete };
+
+      element.addEventListener('success', successListener);
+      element.addEventListener('fail', failListener);
+      element.addEventListener('complete', completeListener);
+
+      return () => {
+        element.removeEventListener('success', successListener);
+        element.removeEventListener('fail', failListener);
+        element.removeEventListener('complete', completeListener);
+      };
+    }, [onSuccess, onFail, onComplete]);
+
+    const navigatorProps = buildNavigatorNativeAttrs({
+      url,
+      openType,
+      target,
+      delta,
+      appId,
+      path,
+      phoneNumber,
+      hoverClass,
+      hoverStopPropagation,
+      hoverStartTime,
+      hoverStayTime,
+    }, rest as Record<string, unknown>);
+
+    return React.createElement('lx-navigator', {
+      ref: elementRef,
+      className,
+      style,
+      ...navigatorProps
+    }, children);
+  }
+);
+
+LxNavigator.displayName = 'LxNavigator';