@lingxia/page-runtime 0.5.0

package/dist/react/LxVideo.js

@@ -0,0 +1,113 @@
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
+import { registerVideoComponent } from '@lingxia/elements';
+import { buildVideoNativeAttrs, VIDEO_DOM_EVENT_MAP, } from '@lingxia/elements';
+import { assignForwardedRef, bindElementEvents, unbindElementEvents, } from './text_component_shared.js';
+if (typeof window !== "undefined") {
+    registerVideoComponent();
+}
+export const LxVideo = forwardRef(({ 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(null);
+    const boundElementRef = useRef(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(Object.fromEntries(Object.entries(VIDEO_DOM_EVENT_MAP).map(([propKey, eventName]) => [
+        eventName,
+        {
+            handleEvent: (event) => {
+                const handler = handlerRef.current[propKey];
+                if (typeof handler === "function") {
+                    handler(event);
+                }
+            },
+        },
+    ])));
+    const elementRefCallback = useCallback((element) => {
+        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;
+        if (el && pageBindings) {
+            el.pageBindings = pageBindings;
+        }
+    }, [pageBindings]);
+    const domProps = buildVideoNativeAttrs({
+        id: resolvedId,
+        src,
+        poster,
+        autoplay,
+        loop,
+        muted,
+        controls,
+        progressBar,
+        live,
+        volume,
+        qualities,
+        playbackRates,
+    }, rest);
+    return React.createElement('lx-video', {
+        ref: elementRefCallback,
+        className,
+        style,
+        ...domProps
+    });
+});
+LxVideo.displayName = 'LxVideo';

package/dist/react/hook.d.ts

@@ -0,0 +1,39 @@
+import type { LxChannel, LxBridgeError, LxStream } from "@lingxia/bridge";
+import { type ActionMap, type ChannelIn, type ChannelOut, type MethodParams, type ParamsSource, type Snapshot, type StreamData, type StreamResult } from "../shared/runtime.js";
+export declare function useLxPage<TData = Snapshot, TActions extends ActionMap = ActionMap>(): {
+    data: TData;
+    actions: 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: TData | undefined;
+    result: TResult | undefined;
+    error: LxBridgeError | undefined;
+    streaming: boolean;
+    cancel: () => void;
+    start: () => void;
+}
+export declare 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>>;
+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 declare function useLxChannel<TMethod extends (...args: any[]) => Promise<LxChannel<any, any>>>(method: TMethod, options?: LxChannelOptions & {
+    params?: ParamsSource<MethodParams<TMethod>>;
+}): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>>;

package/dist/react/hook.js

@@ -0,0 +1,212 @@
+import * as React from "react";
+import { ensurePageBridgeSubscription, getMethodKey, getPageActions, getPageSnapshot, invokeMethod, resolveParams, stableParamKey, subscribePageSnapshot, toBridgeError, } from "../shared/runtime.js";
+export function useLxPage() {
+    ensurePageBridgeSubscription();
+    const [, setVersion] = React.useState(0);
+    React.useEffect(() => {
+        ensurePageBridgeSubscription();
+        const listener = () => setVersion((v) => v + 1);
+        const unsubscribe = subscribePageSnapshot(listener);
+        setVersion((v) => v + 1);
+        return unsubscribe;
+    }, []);
+    const actions = React.useMemo(() => getPageActions(), []);
+    return { data: getPageSnapshot(), actions };
+}
+export function useLxStream(method, options) {
+    var _a;
+    const [state, setState] = React.useState({
+        data: ((options === null || options === void 0 ? void 0 : options.reduce) ? options.initial : undefined),
+        result: undefined,
+        error: undefined,
+        streaming: false,
+    });
+    const handleRef = React.useRef(null);
+    const accRef = React.useRef(options === null || options === void 0 ? void 0 : options.initial);
+    const optionsRef = React.useRef(options);
+    const methodRef = React.useRef(method);
+    const paramsRef = React.useRef(resolveParams(options === null || options === void 0 ? void 0 : options.params));
+    const runIdRef = React.useRef(0);
+    const resolvedParams = resolveParams(options === null || options === void 0 ? void 0 : options.params);
+    const paramsKey = (options === null || options === void 0 ? void 0 : options.manual) ? "" : stableParamKey(resolvedParams);
+    const methodDep = (_a = getMethodKey(method)) !== null && _a !== void 0 ? _a : method;
+    optionsRef.current = options;
+    methodRef.current = method;
+    paramsRef.current = resolvedParams;
+    const cancel = React.useCallback(() => {
+        var _a;
+        runIdRef.current += 1;
+        (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        handleRef.current = null;
+        setState((prev) => ({ ...prev, streaming: false }));
+    }, []);
+    const start = React.useCallback(() => {
+        var _a;
+        (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        const runId = runIdRef.current + 1;
+        runIdRef.current = runId;
+        const opts = optionsRef.current;
+        accRef.current = opts === null || opts === void 0 ? void 0 : opts.initial;
+        setState({
+            data: ((opts === null || opts === void 0 ? void 0 : opts.reduce) ? opts.initial : undefined),
+            result: undefined,
+            error: undefined,
+            streaming: true,
+        });
+        let handle;
+        try {
+            handle = invokeMethod(methodRef.current, paramsRef.current);
+        }
+        catch (err) {
+            if (runIdRef.current !== runId)
+                return;
+            handleRef.current = null;
+            setState((prev) => ({
+                ...prev,
+                error: toBridgeError(err),
+                streaming: false,
+            }));
+            return;
+        }
+        handleRef.current = handle;
+        handle.on("data", (chunk) => {
+            if (runIdRef.current !== runId)
+                return;
+            const currentOpts = optionsRef.current;
+            if (currentOpts === null || currentOpts === void 0 ? void 0 : currentOpts.reduce) {
+                accRef.current = currentOpts.reduce(accRef.current, chunk);
+                setState((prev) => ({
+                    ...prev,
+                    data: accRef.current,
+                }));
+            }
+            else {
+                setState((prev) => ({
+                    ...prev,
+                    data: chunk,
+                }));
+            }
+        });
+        handle.on("end", (result) => {
+            if (runIdRef.current !== runId)
+                return;
+            handleRef.current = null;
+            setState((prev) => ({
+                ...prev,
+                result,
+                streaming: false,
+            }));
+        });
+        handle.on("error", (err) => {
+            if (runIdRef.current !== runId)
+                return;
+            handleRef.current = null;
+            setState((prev) => ({
+                ...prev,
+                error: err,
+                streaming: false,
+            }));
+        });
+    }, []);
+    React.useEffect(() => {
+        if (!(options === null || options === void 0 ? void 0 : options.manual)) {
+            start();
+        }
+        return () => {
+            var _a;
+            runIdRef.current += 1;
+            (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+            handleRef.current = null;
+        };
+    }, [methodDep, options === null || options === void 0 ? void 0 : options.manual, paramsKey, start]);
+    return { ...state, cancel, start };
+}
+export function useLxChannel(method, options) {
+    var _a;
+    const [state, setState] = React.useState({
+        last: undefined,
+        error: undefined,
+        connecting: false,
+        connected: false,
+    });
+    const chRef = React.useRef(null);
+    const methodRef = React.useRef(method);
+    const paramsRef = React.useRef(resolveParams(options === null || options === void 0 ? void 0 : options.params));
+    const runIdRef = React.useRef(0);
+    const resolvedParams = resolveParams(options === null || options === void 0 ? void 0 : options.params);
+    const paramsKey = (options === null || options === void 0 ? void 0 : options.manual) ? "" : stableParamKey(resolvedParams);
+    const methodDep = (_a = getMethodKey(method)) !== null && _a !== void 0 ? _a : method;
+    methodRef.current = method;
+    paramsRef.current = resolvedParams;
+    const send = React.useCallback((payload) => {
+        var _a;
+        (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.send(payload);
+    }, []);
+    const close = React.useCallback((code, reason) => {
+        var _a;
+        runIdRef.current += 1;
+        (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.close(code, reason);
+        chRef.current = null;
+        setState((prev) => ({ ...prev, connecting: false, connected: false }));
+    }, []);
+    const reopen = React.useCallback(() => {
+        var _a;
+        (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        chRef.current = null;
+        const runId = ++runIdRef.current;
+        setState({
+            last: undefined,
+            error: undefined,
+            connecting: true,
+            connected: false,
+        });
+        Promise.resolve(invokeMethod(methodRef.current, paramsRef.current))
+            .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 }));
+            });
+            ch.on("close", () => {
+                if (runIdRef.current !== runId)
+                    return;
+                chRef.current = null;
+                setState((prev) => ({ ...prev, connecting: false, connected: false }));
+            });
+            ch.on("error", (err) => {
+                if (runIdRef.current !== runId)
+                    return;
+                chRef.current = null;
+                setState((prev) => ({ ...prev, error: err, connecting: false, connected: false }));
+            });
+        })
+            .catch((err) => {
+            if (runIdRef.current !== runId)
+                return;
+            setState({
+                last: undefined,
+                error: toBridgeError(err),
+                connecting: false,
+                connected: false,
+            });
+        });
+    }, []);
+    React.useEffect(() => {
+        if (!(options === null || options === void 0 ? void 0 : options.manual)) {
+            reopen();
+        }
+        return () => {
+            var _a;
+            runIdRef.current += 1;
+            (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.close();
+            chRef.current = null;
+        };
+    }, [methodDep, options === null || options === void 0 ? void 0 : options.manual, paramsKey, reopen]);
+    return { ...state, send, close, reopen };
+}

package/dist/react/index.d.ts

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

package/dist/react/index.js

@@ -0,0 +1,6 @@
+export { useLxPage, useLxStream, useLxChannel, } from "./hook.js";
+export { LxVideo } from "./LxVideo.js";
+export { LxPicker } from "./LxPicker.js";
+export { LxNavigator } from "./LxNavigator.js";
+export { LxInput } from "./LxInput.js";
+export { LxTextarea } from "./LxTextarea.js";

package/dist/react/text_component_shared.d.ts

@@ -0,0 +1,5 @@
+import type { ForwardedRef } from "react";
+export declare function getCustomEventDetail<T>(event: Event): T;
+export declare function assignForwardedRef<T>(ref: ForwardedRef<T>, value: T | null): void;
+export declare function bindElementEvents(boundElement: HTMLElement | null, nextElement: HTMLElement | null, listeners: Record<string, EventListenerObject>): HTMLElement | null;
+export declare function unbindElementEvents(boundElement: HTMLElement | null, listeners: Record<string, EventListenerObject>): void;

package/dist/react/text_component_shared.js

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

package/dist/shared/runtime.d.ts

@@ -0,0 +1,21 @@
+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;
+export declare function toBridgeError(err: unknown): LxBridgeError;
+export declare function resolveParams<T>(source?: ParamsSource<T>): T | undefined;
+export declare function stableParamKey(value: unknown): string;
+export declare function invokeMethod<TMethod extends (...args: any[]) => any>(method: TMethod, params: unknown): ReturnType<TMethod>;
+export declare function getMethodKey(method: unknown): string | undefined;
+export declare function ensurePageBridgeSubscription(): void;
+export declare function subscribePageSnapshot(listener: Listener): () => void;
+export declare function subscribePageData(callback: DataSubscriber): () => void;
+export declare function getPageSnapshot<TData = Snapshot>(): TData;
+export declare function getPageActions<TActions extends ActionMap>(): TActions;
+export declare function getPageStateInfo(): StateInfo;

package/dist/shared/runtime.js

@@ -0,0 +1,142 @@
+let snapshot = {};
+let stateInfo = { rev: -1, initial: true };
+let subscribed = false;
+let subscribeRetryTimer = null;
+let initialSnapshotResolved = false;
+let snapshotRequestInFlight = false;
+const listeners = new Set();
+export function toBridgeError(err) {
+    return err && typeof err === "object" && "code" in err
+        ? err
+        : {
+            code: "BRIDGE_INTERNAL_ERROR",
+            message: err instanceof Error ? err.message : String(err),
+        };
+}
+export function resolveParams(source) {
+    if (typeof source === "function") {
+        return source();
+    }
+    return source;
+}
+export function stableParamKey(value) {
+    var _a;
+    if (value === undefined)
+        return "undefined";
+    try {
+        return (_a = JSON.stringify(value)) !== null && _a !== void 0 ? _a : "undefined";
+    }
+    catch {
+        return String(value);
+    }
+}
+export function invokeMethod(method, params) {
+    if (params === undefined) {
+        return method();
+    }
+    return method(params);
+}
+export function getMethodKey(method) {
+    if (typeof method !== "function")
+        return undefined;
+    const candidate = method.__funcName;
+    return typeof candidate === "string" && candidate !== "" ? candidate : undefined;
+}
+function notifyListeners() {
+    listeners.forEach((listener) => {
+        try {
+            listener();
+        }
+        catch {
+            // Ignore listener errors to avoid breaking state fanout.
+        }
+    });
+}
+function updateSnapshot(next, info) {
+    snapshot = next && typeof next === "object" ? next : {};
+    stateInfo = info;
+    notifyListeners();
+}
+function scheduleSubscribeRetry() {
+    if (subscribeRetryTimer !== null || subscribed)
+        return;
+    subscribeRetryTimer = setTimeout(() => {
+        subscribeRetryTimer = null;
+        ensurePageBridgeSubscription();
+    }, 10);
+}
+function requestInitialSnapshot(bridge) {
+    if (initialSnapshotResolved || snapshotRequestInFlight)
+        return;
+    if (!(bridge === null || bridge === void 0 ? void 0 : bridge.call))
+        return;
+    snapshotRequestInFlight = true;
+    bridge
+        .call("state.getSnapshot", { scope: "page" })
+        .then(() => {
+        initialSnapshotResolved = true;
+    })
+        .catch(() => {
+        scheduleSubscribeRetry();
+    })
+        .finally(() => {
+        snapshotRequestInFlight = false;
+    });
+}
+export function ensurePageBridgeSubscription() {
+    var _a;
+    if (subscribed)
+        return;
+    const bridge = window.LingXiaBridge;
+    const subscribeState = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.state) === null || _a === void 0 ? void 0 : _a.subscribe;
+    if (!subscribeState) {
+        scheduleSubscribeRetry();
+        return;
+    }
+    subscribeState((next, info) => {
+        updateSnapshot(next, info);
+    });
+    subscribed = true;
+    requestInitialSnapshot(bridge);
+}
+export function subscribePageSnapshot(listener) {
+    ensurePageBridgeSubscription();
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function subscribePageData(callback) {
+    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() {
+    ensurePageBridgeSubscription();
+    return snapshot;
+}
+export function getPageActions() {
+    const actions = {};
+    const bridge = window.__pageBridge;
+    if (!(bridge === null || bridge === void 0 ? void 0 : bridge.__names)) {
+        return actions;
+    }
+    for (const name of bridge.__names) {
+        if (typeof name !== "string")
+            continue;
+        const fn = bridge[name];
+        if (typeof fn === "function") {
+            actions[name] = fn;
+        }
+    }
+    return actions;
+}
+export function getPageStateInfo() {
+    return stateInfo;
+}

package/dist/vue/LxInput.vue

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