@lingxia/page-runtime 0.5.0 → 0.6.0

package/src/react/LxTextarea.tsx

@@ -1,216 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import { registerTextareaComponent } from "@lingxia/elements";
-import { buildTextareaNativeAttrs } from "@lingxia/elements";
-import {
-  assignForwardedRef,
-  bindElementEvents,
-  getCustomEventDetail,
-  unbindElementEvents,
-} from "./text_component_shared.js";
-
-export interface LxTextareaEventDetail {
-  value?: string;
-  cursor?: number;
-  lineCount?: number;
-  height?: number;
-  duration?: number;
-  selectionStart?: number;
-  selectionEnd?: number;
-  heightRpx?: number;
-}
-
-export interface LxTextareaProps {
-  id?: 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;
-
-  onInput?: (detail: LxTextareaEventDetail) => void;
-  onChange?: (detail: LxTextareaEventDetail) => void;
-  onFocus?: (detail: LxTextareaEventDetail) => void;
-  onBlur?: (detail: LxTextareaEventDetail) => void;
-  onConfirm?: (detail: LxTextareaEventDetail) => void;
-  onLineChange?: (detail: LxTextareaEventDetail) => void;
-  onKeyboardHeightChange?: (detail: LxTextareaEventDetail) => void;
-
-  // Logic bindings (CLI-generated)
-  pageBindings?: Record<string, string>;
-
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-if (typeof window !== "undefined") {
-  registerTextareaComponent();
-}
-
-export const LxTextarea = forwardRef<HTMLElement, LxTextareaProps>(({
-  value,
-  defaultValue,
-  placeholder,
-  placeholderStyle,
-  placeholderClass,
-  maxlength,
-  disabled,
-  autoFocus,
-  focus,
-  autoHeight,
-  cursorSpacing,
-  showConfirmBar,
-  adjustPosition,
-  holdKeyboard,
-  disableDefaultPadding,
-  confirmType,
-  confirmHold,
-  fixed,
-  adjustKeyboardTo,
-  cursor,
-  selectionStart,
-  selectionEnd,
-  onInput,
-  onChange,
-  onFocus,
-  onBlur,
-  onConfirm,
-  onLineChange,
-  onKeyboardHeightChange,
-  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,
-    onLineChange,
-    onKeyboardHeightChange,
-  });
-  handlerRef.current = {
-    onInput,
-    onChange,
-    onFocus,
-    onBlur,
-    onConfirm,
-    onLineChange,
-    onKeyboardHeightChange,
-  };
-  const listenerMapRef = useRef<Record<string, EventListenerObject>>({
-    input: {
-      handleEvent: (event: Event) => handlerRef.current.onInput?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
-    },
-    change: {
-      handleEvent: (event: Event) => handlerRef.current.onChange?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
-    },
-    focus: {
-      handleEvent: (event: Event) => handlerRef.current.onFocus?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
-    },
-    blur: {
-      handleEvent: (event: Event) => handlerRef.current.onBlur?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
-    },
-    confirm: {
-      handleEvent: (event: Event) => handlerRef.current.onConfirm?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
-    },
-    linechange: {
-      handleEvent: (event: Event) => handlerRef.current.onLineChange?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
-    },
-    keyboardheightchange: {
-      handleEvent: (event: Event) => handlerRef.current.onKeyboardHeightChange?.(getCustomEventDetail<LxTextareaEventDetail>(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;
-  }, []);
-
-  React.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);
-    };
-    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);
-    setAttr("auto-height", autoHeight ? "true" : null);
-  }, [value, focus, maxlength, placeholderStyle, autoHeight]);
-
-  // Set pageBindings property on custom element
-  useEffect(() => {
-    const el = elementRef.current as any;
-    if (el && pageBindings) {
-      el.pageBindings = pageBindings;
-    }
-  }, [pageBindings]);
-
-  const textareaProps = buildTextareaNativeAttrs({
-    id,
-    value,
-    defaultValue,
-    placeholder,
-    placeholderStyle,
-    placeholderClass,
-    maxlength,
-    disabled,
-    autoFocus,
-    focus,
-    autoHeight,
-    cursorSpacing,
-    showConfirmBar,
-    adjustPosition,
-    holdKeyboard,
-    disableDefaultPadding,
-    confirmType,
-    confirmHold,
-    fixed,
-    adjustKeyboardTo,
-    cursor,
-    selectionStart,
-    selectionEnd,
-  }, rest as Record<string, unknown>, boundElementRef.current !== null);
-
-  return React.createElement("lx-textarea", {
-    ref: elementRefCallback,
-    className,
-    style,
-    ...textareaProps,
-  });
-});
-
-LxTextarea.displayName = "LxTextarea";

package/src/react/LxVideo.tsx

@@ -1,166 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { registerVideoComponent, type LxVideoAttributes } from '@lingxia/elements';
-import {
-  buildVideoNativeAttrs,
-  VIDEO_DOM_EVENT_MAP,
-} from '@lingxia/elements';
-import {
-  assignForwardedRef,
-  bindElementEvents,
-  unbindElementEvents,
-} from './text_component_shared.js';
-
-export interface LxVideoProps
-  extends LxVideoAttributes,
-    Omit<
-      React.HTMLAttributes<HTMLElement>,
-      keyof LxVideoAttributes | "children" | "dangerouslySetInnerHTML" | "ref" | "onPlaying"
-    > {}
-
-if (typeof window !== "undefined") {
-  registerVideoComponent();
-}
-export const LxVideo = forwardRef<HTMLElement, LxVideoProps>(({
-  id,
-  src,
-  poster,
-  objectFit,
-  rotate,
-  autoplay,
-  loop,
-  muted,
-  controls,
-  progressBar,
-  live,
-  volume,
-  qualities,
-  playbackRates,
-  onPlayRequest,
-  onPlay,
-  onPlaying,
-  onPause,
-  onStop,
-  onEnded,
-  onTimeUpdate,
-  onError,
-  onLoadedMetadata,
-  onFullscreenChange,
-  onWaiting,
-  onQualityChange,
-  onRateChange,
-  pageBindings,
-  className,
-  style,
-  ...rest
-}, ref) => {
-  const elementRef = useRef<HTMLElement | null>(null);
-  const boundElementRef = useRef<HTMLElement | null>(null);
-  const reactId = useId();
-  const resolvedId = useMemo(() => {
-    if (id) return id;
-    return `lx-video-${reactId.replace(/[:]/g, "")}`;
-  }, [id, reactId]);
-  const handlerRef = useRef({
-    onPlayRequest,
-    onPlay,
-    onPlaying,
-    onPause,
-    onStop,
-    onEnded,
-    onTimeUpdate,
-    onError,
-    onLoadedMetadata,
-    onFullscreenChange,
-    onWaiting,
-    onQualityChange,
-    onRateChange,
-  });
-  handlerRef.current = {
-    onPlayRequest,
-    onPlay,
-    onPlaying,
-    onPause,
-    onStop,
-    onEnded,
-    onTimeUpdate,
-    onError,
-    onLoadedMetadata,
-    onFullscreenChange,
-    onWaiting,
-    onQualityChange,
-    onRateChange,
-  };
-  const listenerMapRef = useRef<Record<string, EventListenerObject>>(
-    Object.fromEntries(
-      Object.entries(VIDEO_DOM_EVENT_MAP).map(([propKey, eventName]) => [
-        eventName,
-        {
-          handleEvent: (event: Event) => {
-            const handler = handlerRef.current[propKey as keyof typeof handlerRef.current];
-            if (typeof handler === "function") {
-              handler(event);
-            }
-          },
-        } satisfies EventListenerObject,
-      ])
-    )
-  );
-  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;
-    if (rotate === undefined || rotate === null) {
-      el.removeAttribute("rotate");
-    } else {
-      el.setAttribute("rotate", String(rotate).trim());
-    }
-    if (objectFit === undefined || objectFit === null) {
-      el.removeAttribute("object-fit");
-    } else {
-      el.setAttribute("object-fit", String(objectFit).trim().toLowerCase());
-    }
-  }, [rotate, objectFit]);
-
-  // Set pageBindings property on custom element
-  useEffect(() => {
-    const el = elementRef.current as any;
-    if (el && pageBindings) {
-      el.pageBindings = pageBindings;
-    }
-  }, [pageBindings]);
-
-  const domProps = buildVideoNativeAttrs({
-    id: resolvedId,
-    src,
-    poster,
-    autoplay,
-    loop,
-    muted,
-    controls,
-    progressBar,
-    live,
-    volume,
-    qualities,
-    playbackRates,
-  }, rest as Record<string, unknown>);
-
-  return React.createElement('lx-video', {
-    ref: elementRefCallback,
-    className,
-    style,
-    ...domProps
-  });
-});
-
-LxVideo.displayName = 'LxVideo';

package/src/react/hook.ts

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

@@ -1,14 +0,0 @@
-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";