@lingxia/bridge 0.5.0 → 0.6.0

package/dist/es5/ui/modal.js

@@ -0,0 +1,84 @@
+var ANIMATION_MS = 200;
+var STYLE_ID = 'lx-modal-style';
+var activeModal = null;
+function ensureModalStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    var style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = "\n.lx-modal-backdrop {\n  position: fixed; inset: 0; z-index: 99999;\n  background: rgba(0,0,0,0.4);\n  opacity: 0; transition: opacity ".concat(ANIMATION_MS, "ms ease;\n  display: flex; align-items: center; justify-content: center;\n}\n.lx-modal-backdrop.lx-modal-visible { opacity: 1; }\n\n.lx-modal-dialog {\n  width: min(92vw, 320px);\n  background: #fff;\n  border-radius: 14px;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  transform: scale(0.95); opacity: 0;\n  transition: transform ").concat(ANIMATION_MS, "ms ease, opacity ").concat(ANIMATION_MS, "ms ease;\n}\n.lx-modal-backdrop.lx-modal-visible .lx-modal-dialog {\n  transform: scale(1); opacity: 1;\n}\n\n.lx-modal-body {\n  padding: 24px 20px 16px;\n  text-align: center;\n}\n.lx-modal-title {\n  margin: 0 0 8px;\n  font-size: 17px;\n  font-weight: 600;\n  color: #000;\n  line-height: 1.35;\n}\n.lx-modal-content {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\n  line-height: 1.5;\n  word-break: break-word;\n}\n.lx-modal-body:has(.lx-modal-title:empty) .lx-modal-content {\n  font-size: 17px;\n  font-weight: 600;\n  color: #000;\n}\n\n.lx-modal-footer {\n  display: flex;\n  border-top: 1px solid #E0E0E0;\n}\n.lx-modal-btn {\n  flex: 1;\n  height: 44px;\n  line-height: 44px;\n  padding: 0;\n  border: none;\n  background: none;\n  font-size: 17px;\n  text-align: center;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n.lx-modal-btn:active { background: rgba(0,0,0,0.06); }\n.lx-modal-btn + .lx-modal-btn {\n  border-left: 1px solid #E0E0E0;\n}\n.lx-modal-btn-cancel {\n  color: #666;\n  font-weight: 400;\n}\n.lx-modal-btn-confirm {\n  font-weight: 600;\n}\n\n@media (prefers-color-scheme: dark) {\n  .lx-modal-dialog { background: #2c2c2e; }\n  .lx-modal-title { color: #f5f5f7; }\n  .lx-modal-content { color: #ababab; }\n  .lx-modal-body:has(.lx-modal-title:empty) .lx-modal-content {\n    color: #f5f5f7;\n  }\n  .lx-modal-footer { border-top-color: #3a3a3c; }\n  .lx-modal-btn:active { background: rgba(255,255,255,0.08); }\n  .lx-modal-btn + .lx-modal-btn { border-left-color: #3a3a3c; }\n  .lx-modal-btn-cancel { color: #ababab; }\n}\n");
+    document.head.appendChild(style);
+}
+export function showModal(params) {
+    var _a, _b, _c, _d, _e, _f;
+    var p = params;
+    var title = (_a = p === null || p === void 0 ? void 0 : p.title) !== null && _a !== void 0 ? _a : '';
+    var content = (_b = p === null || p === void 0 ? void 0 : p.content) !== null && _b !== void 0 ? _b : '';
+    var showCancel = (_c = p === null || p === void 0 ? void 0 : p.showCancel) !== null && _c !== void 0 ? _c : true;
+    var cancelText = (_d = p === null || p === void 0 ? void 0 : p.cancelText) !== null && _d !== void 0 ? _d : 'Cancel';
+    var cancelColor = p === null || p === void 0 ? void 0 : p.cancelColor;
+    var confirmText = (_e = p === null || p === void 0 ? void 0 : p.confirmText) !== null && _e !== void 0 ? _e : 'OK';
+    var confirmColor = (_f = p === null || p === void 0 ? void 0 : p.confirmColor) !== null && _f !== void 0 ? _f : '#007AFF';
+    var task = (activeModal !== null && activeModal !== void 0 ? activeModal : Promise.resolve()).then(function () { return renderModal(title, content, showCancel, cancelText, cancelColor, confirmText, confirmColor); }, function () { return renderModal(title, content, showCancel, cancelText, cancelColor, confirmText, confirmColor); });
+    activeModal = task;
+    return task;
+}
+function renderModal(title, content, showCancel, cancelText, cancelColor, confirmText, confirmColor) {
+    return new Promise(function (resolve) {
+        var dismissed = false;
+        ensureModalStyle();
+        var backdrop = document.createElement('div');
+        backdrop.className = 'lx-modal-backdrop';
+        var dialog = document.createElement('div');
+        dialog.className = 'lx-modal-dialog';
+        // Body
+        var body = document.createElement('div');
+        body.className = 'lx-modal-body';
+        var titleEl = document.createElement('div');
+        titleEl.className = 'lx-modal-title';
+        titleEl.textContent = title;
+        body.appendChild(titleEl);
+        if (content) {
+            var contentEl = document.createElement('p');
+            contentEl.className = 'lx-modal-content';
+            contentEl.textContent = content;
+            body.appendChild(contentEl);
+        }
+        dialog.appendChild(body);
+        // Footer
+        var footer = document.createElement('div');
+        footer.className = 'lx-modal-footer';
+        if (showCancel) {
+            var cancelBtn = document.createElement('button');
+            cancelBtn.className = 'lx-modal-btn lx-modal-btn-cancel';
+            cancelBtn.textContent = cancelText;
+            if (cancelColor)
+                cancelBtn.style.color = cancelColor;
+            cancelBtn.addEventListener('click', function () { return dismiss(false); });
+            footer.appendChild(cancelBtn);
+        }
+        var confirmBtn = document.createElement('button');
+        confirmBtn.className = 'lx-modal-btn lx-modal-btn-confirm';
+        confirmBtn.textContent = confirmText;
+        confirmBtn.style.color = confirmColor;
+        confirmBtn.addEventListener('click', function () { return dismiss(true); });
+        footer.appendChild(confirmBtn);
+        dialog.appendChild(footer);
+        backdrop.appendChild(dialog);
+        document.body.appendChild(backdrop);
+        // Trigger enter animation
+        requestAnimationFrame(function () {
+            backdrop.classList.add('lx-modal-visible');
+        });
+        function dismiss(confirmed) {
+            if (dismissed)
+                return;
+            dismissed = true;
+            backdrop.classList.remove('lx-modal-visible');
+            setTimeout(function () {
+                backdrop.remove();
+                resolve({ confirm: confirmed, cancel: !confirmed });
+            }, ANIMATION_MS);
+        }
+    });
+}

package/dist/es5/ui/toast.js

@@ -0,0 +1,102 @@
+var ANIMATION_MS = 200;
+var STYLE_ID = 'lx-toast-style';
+var currentToast = null;
+var SVG_SUCCESS = "<svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"18\" cy=\"18\" r=\"17\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M11 18l5 5 9-9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>";
+var SVG_ERROR = "<svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"18\" cy=\"18\" r=\"17\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M13 13l10 10M23 13l-10 10\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"/></svg>";
+var SVG_LOADING = "<svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18 4a14 14 0 0 1 14 14\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>";
+function ensureToastStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    var style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = "\n.lx-toast-mask {\n  position: fixed; inset: 0; z-index: 99998;\n}\n.lx-toast-container {\n  position: fixed; left: 0; right: 0; z-index: 99999;\n  display: flex; justify-content: center;\n  pointer-events: none;\n}\n.lx-toast-container.lx-toast-top { top: 0; padding-top: 80px; }\n.lx-toast-container.lx-toast-center { top: 0; bottom: 0; align-items: center; }\n.lx-toast-container.lx-toast-bottom { bottom: 0; padding-bottom: 80px; }\n\n.lx-toast-box {\n  display: flex; flex-direction: column; align-items: center; gap: 10px;\n  min-width: 120px; max-width: 280px;\n  padding: 20px;\n  background: rgba(0,0,0,0.8);\n  border-radius: 12px;\n  color: #fff;\n  pointer-events: auto;\n  transform: scale(0.8); opacity: 0;\n  transition: transform ".concat(ANIMATION_MS, "ms ease, opacity ").concat(ANIMATION_MS, "ms ease;\n}\n.lx-toast-box.lx-toast-no-icon {\n  min-width: auto; min-height: auto;\n  padding: 12px 20px;\n}\n.lx-toast-box.lx-toast-visible {\n  transform: scale(1); opacity: 1;\n}\n.lx-toast-icon {\n  width: 36px; height: 36px;\n  color: #fff;\n  line-height: 0;\n}\n.lx-toast-title {\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;\n  font-size: 16px; font-weight: 500;\n  text-align: center;\n  line-height: 1.4;\n  word-break: break-word;\n  -webkit-font-smoothing: antialiased;\n}\n");
+    document.head.appendChild(style);
+}
+export function showToast(params) {
+    var _a, _b, _c, _d, _e;
+    var p = params;
+    var title = (_a = p === null || p === void 0 ? void 0 : p.title) !== null && _a !== void 0 ? _a : '';
+    var icon = (_b = p === null || p === void 0 ? void 0 : p.icon) !== null && _b !== void 0 ? _b : 'none';
+    var duration = (_c = p === null || p === void 0 ? void 0 : p.duration) !== null && _c !== void 0 ? _c : 1500;
+    var mask = (_d = p === null || p === void 0 ? void 0 : p.mask) !== null && _d !== void 0 ? _d : false;
+    var position = (_e = p === null || p === void 0 ? void 0 : p.position) !== null && _e !== void 0 ? _e : 'center';
+    // Hide existing toast first
+    if (currentToast) {
+        currentToast.dismiss();
+        currentToast = null;
+    }
+    ensureToastStyle();
+    // Mask (prevents interaction)
+    var maskEl = null;
+    if (mask) {
+        maskEl = document.createElement('div');
+        maskEl.className = 'lx-toast-mask';
+        document.body.appendChild(maskEl);
+    }
+    // Container
+    var container = document.createElement('div');
+    container.className = 'lx-toast-container';
+    if (position === 'top')
+        container.classList.add('lx-toast-top');
+    else if (position === 'bottom')
+        container.classList.add('lx-toast-bottom');
+    else
+        container.classList.add('lx-toast-center');
+    // Toast box
+    var box = document.createElement('div');
+    box.className = 'lx-toast-box';
+    var hasIcon = icon !== 'none';
+    if (!hasIcon)
+        box.classList.add('lx-toast-no-icon');
+    // Icon
+    if (hasIcon) {
+        var iconEl = document.createElement('div');
+        iconEl.className = 'lx-toast-icon';
+        if (icon === 'success')
+            iconEl.innerHTML = SVG_SUCCESS;
+        else if (icon === 'error')
+            iconEl.innerHTML = SVG_ERROR;
+        else if (icon === 'loading')
+            iconEl.innerHTML = SVG_LOADING;
+        box.appendChild(iconEl);
+    }
+    // Title
+    var titleEl = document.createElement('div');
+    titleEl.className = 'lx-toast-title';
+    titleEl.textContent = title;
+    box.appendChild(titleEl);
+    container.appendChild(box);
+    document.body.appendChild(container);
+    // Animate in
+    requestAnimationFrame(function () {
+        box.classList.add('lx-toast-visible');
+    });
+    var dismissed = false;
+    function dismiss() {
+        if (dismissed)
+            return;
+        dismissed = true;
+        if ((currentToast === null || currentToast === void 0 ? void 0 : currentToast.dismiss) === dismiss)
+            currentToast = null;
+        box.classList.remove('lx-toast-visible');
+        if (timer)
+            clearTimeout(timer);
+        setTimeout(function () {
+            container.remove();
+            maskEl === null || maskEl === void 0 ? void 0 : maskEl.remove();
+        }, ANIMATION_MS);
+    }
+    var timer = null;
+    if (duration > 0) {
+        timer = setTimeout(dismiss, duration);
+    }
+    currentToast = { dismiss: dismiss, timer: timer };
+    return Promise.resolve();
+}
+export function hideToast() {
+    if (currentToast) {
+        currentToast.dismiss();
+        currentToast = null;
+    }
+    return Promise.resolve();
+}

package/dist/index.d.ts

@@ -5,7 +5,8 @@
  * - Bridge initialization for native communication
  * - Error UI rendering when page cannot be loaded
  */
-export type { BridgeConfig, CallOptions, ChannelOpenOptions, BridgeErrorCode, ChannelEventName, DataSubscriber, ErrorInfo, HostChannelApi, HostApi, LingXiaBridgeInterface, LxChannel, LxBridgeError, LxMethod, LxMethodParams, LxMethodResult, LxMethodStreamData, LxStream, NativeComponentMessage, NotifyOptions, StateInfo, StreamCallOptions, StreamEventName, } from './types';
-export { LingXiaBridge, host, initBridge } from './bridge';
+export type { BridgeConfig, CallOptions, ChannelCloseEvent, ChannelOptions, ChannelOpenOptions, BridgeErrorCode, ChannelEventName, DataSubscriber, ErrorInfo, LingXiaBridgeInterface, LxChannel, LxBridgeError, LxMethod, LxMethodParams, LxMethodResult, LxMethodStreamData, LxStream, NativeComponentMessage, NativeChannel, NativeError, NativeStream, NotifyOptions, InvokeOptions, StateInfo, StreamCallOptions, StreamOptions, StreamEventName, } from './types';
+export { LingXiaBridge, channel, initBridge, invoke, notify, stream, } from './bridge';
+export { isNativeError } from './invocation';
 export { renderErrorUI, hasError, getErrorInfo } from './error';
 export { boot, bootWhenReady } from './boot';

package/dist/invocation.d.ts

@@ -0,0 +1,14 @@
+import type { LxBridgeError, LxChannel, LxStream } from "./types";
+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 toNativeError(err: unknown): import("./types").NativeError;
+export declare function isNativeError(error: unknown, code?: string): error is import("./types").NativeError;
+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;

package/dist/types.d.ts

@@ -31,6 +31,11 @@ export interface LxBridgeError {
     message?: string;
     data?: unknown;
 }
+export interface NativeError {
+    code: string;
+    message: string;
+    data?: unknown;
+}
 export interface StateInfo {
     rev: number;
     initial: boolean;
@@ -79,12 +84,11 @@ export interface LxStream<TData = unknown, TResult = unknown> extends AsyncItera
     readonly id: string;
     readonly result: Promise<TResult>;
 }
-export interface HostChannelApi {
-    [namespace: string]: unknown;
-}
-export interface HostApi {
-    channel: HostChannelApi;
-    [namespace: string]: unknown;
+export interface NativeStream<TEvent = unknown, TResult = void> {
+    onEvent(listener: (event: TEvent) => void): () => void;
+    onError(listener: (error: NativeError) => void): () => void;
+    result: Promise<TResult>;
+    cancel(): void;
 }
 export interface LxChannel<TIn = unknown, TOut = TIn> extends AsyncIterable<TIn> {
     send(payload: TOut): void;
@@ -95,9 +99,20 @@ export interface LxChannel<TIn = unknown, TOut = TIn> extends AsyncIterable<TIn>
     [Symbol.asyncIterator](): AsyncIterator<TIn, void, void>;
     readonly id: string;
 }
+export interface ChannelCloseEvent {
+    code?: string;
+    reason?: string;
+}
+export interface NativeChannel<TIn = unknown, TOut = unknown> {
+    send(message: TIn): void;
+    onMessage(listener: (message: TOut) => void): () => void;
+    onClose(listener: (event: ChannelCloseEvent) => void): () => void;
+    close(code?: string, reason?: string): void;
+}
 declare global {
     interface Window {
         __LX_BRIDGE_CFG?: BridgeConfig;
+        __LX_BRIDGE_INIT_STATE?: 'initializing' | 'initialized';
         __LX_RUNTIME_CONFIG?: RuntimeConfig;
         __pageBridge?: {
             __names: string[];
@@ -113,7 +128,6 @@ declare global {
         NativeComponentBridge?: {
             postMessage: (message: string) => void;
         };
-        host?: HostApi;
         webkit?: {
             messageHandlers: {
                 [key: string]: {
@@ -124,17 +138,14 @@ declare global {
     }
 }
 export interface LingXiaBridgeInterface {
-    call(method: string, params?: unknown, options?: CallOptions): Promise<unknown>;
-    call<M extends LxMethod>(method: M, params?: LxMethodParams<M>, options?: CallOptions): Promise<LxMethodResult<M>>;
-    stream(method: string, params?: unknown, options?: StreamCallOptions): LxStream<unknown, unknown>;
-    stream<M extends LxMethod>(method: M, params?: LxMethodParams<M>, options?: StreamCallOptions): LxStream<LxMethodStreamData<M>, LxMethodResult<M>>;
-    notify(method: string, params?: unknown, options?: NotifyOptions): void;
+    invoke<TResult = unknown, TInput = void>(route: string, input?: TInput, options?: InvokeOptions): Promise<TResult>;
+    stream<TEvent = unknown, TResult = void, TInput = void>(route: string, input?: TInput, options?: StreamOptions): NativeStream<TEvent, TResult>;
+    notify<TInput = void>(route: string, input?: TInput, options?: NotifyOptions): void;
+    channel<TIn = unknown, TOut = unknown>(route: string, input?: unknown, options?: ChannelOptions): Promise<NativeChannel<TIn, TOut>>;
+    raw: LingXiaBridgeRawInterface;
     state: {
         subscribe(callback: DataSubscriber): () => void;
     };
-    channel: {
-        open<TIn = unknown, TOut = TIn>(topic: string, params?: unknown, options?: ChannelOpenOptions): Promise<LxChannel<TIn, TOut>>;
-    };
     _connectWebMessagePort(port: MessagePort): void;
     _receiveEvaluateMessage(messageString: string): void;
     debug: {
@@ -162,3 +173,19 @@ export interface LingXiaBridgeInterface {
     };
     isReady(): boolean;
 }
+export interface LingXiaBridgeRawInterface {
+    call(method: string, params?: unknown, options?: CallOptions): Promise<unknown>;
+    call<M extends LxMethod>(method: M, params?: LxMethodParams<M>, options?: CallOptions): Promise<LxMethodResult<M>>;
+    stream(method: string, params?: unknown, options?: StreamCallOptions): LxStream<unknown, unknown>;
+    stream<M extends LxMethod>(method: M, params?: LxMethodParams<M>, options?: StreamCallOptions): LxStream<LxMethodStreamData<M>, LxMethodResult<M>>;
+    notify(method: string, params?: unknown, options?: NotifyOptions): void;
+    channel: {
+        open<TIn = unknown, TOut = TIn>(topic: string, params?: unknown, options?: ChannelOpenOptions): Promise<LxChannel<TIn, TOut>>;
+    };
+}
+export interface InvokeOptions extends CallOptions {
+}
+export interface StreamOptions extends StreamCallOptions {
+}
+export interface ChannelOptions extends ChannelOpenOptions {
+}

package/package.json

@@ -1,33 +1,45 @@
 {
   "name": "@lingxia/bridge",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "description": "LingXia Web Runtime - Bridge, boot, and error handling for WebView",
   "type": "module",
-  "main": "dist/runtime.es2020.js",
+  "main": "dist/es2020/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/runtime.es2020.js"
+      "default": "./dist/es2020/index.js"
     },
-    "./dist/runtime.es2020.js": "./dist/runtime.es2020.js",
-    "./dist/runtime.es5.js": "./dist/runtime.es5.js",
+    "./es5": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/es5/index.js"
+    },
+    "./invocation": {
+      "types": "./dist/invocation.d.ts",
+      "default": "./dist/es2020/invocation.js"
+    },
+    "./invocation/es5": {
+      "types": "./dist/invocation.d.ts",
+      "default": "./dist/es5/invocation.js"
+    },
+    "./dist/bridge-runtime.es2020.js": "./dist/bridge-runtime.es2020.js",
+    "./dist/bridge-runtime.es5.js": "./dist/bridge-runtime.es5.js",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "npm run clean && npm run build:es2020 && npm run build:es5 && npm run build:types",
-    "build:es2020": "RUNTIME_OUTPUT=runtime.es2020.js rolldown -c",
+    "build": "npm run clean && npm run build:es2020 && npm run build:es5 && npm run build:modules:es2020 && npm run build:modules:es5 && npm run build:types",
+    "build:es2020": "node ./scripts/build-es2020.mjs",
     "build:es5": "node ./scripts/build-es5.mjs",
+    "build:modules:es2020": "tsc -p tsconfig.modules.json",
+    "build:modules:es5": "tsc -p tsconfig.modules.legacy.json",
     "build:types": "tsc -p tsconfig.json --emitDeclarationOnly",
     "dev": "rolldown -c -w",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "esbuild": "^0.25.3",
     "rolldown": "^1.0.0-rc.13",
-    "rollup-plugin-esbuild": "^6.2.1",
     "terser": "^5.39.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.0"