@lingxia/bridge 0.5.0 → 0.6.0

package/dist/es2020/error.js

@@ -0,0 +1,89 @@
+const ERROR_STYLES = `
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #f5f5f7;
+  color: #1d1d1f;
+  padding: 20px;
+  -webkit-font-smoothing: antialiased;
+}
+.lx-error {
+  text-align: center;
+  max-width: 400px;
+}
+.lx-error-code {
+  font-size: 120px;
+  font-weight: 700;
+  color: #d1d1d6;
+  line-height: 1;
+  letter-spacing: -4px;
+}
+.lx-error-title {
+  font-size: 21px;
+  font-weight: 600;
+  margin: 16px 0 8px;
+  color: #1d1d1f;
+}
+.lx-error-desc {
+  font-size: 15px;
+  color: #86868b;
+  line-height: 1.5;
+}
+.lx-error-path {
+  display: inline-block;
+  margin-top: 20px;
+  padding: 10px 16px;
+  background: rgba(0,0,0,0.04);
+  border-radius: 8px;
+  font-family: 'SF Mono', ui-monospace, Menlo, Monaco, monospace;
+  font-size: 13px;
+  color: #1d1d1f;
+  word-break: break-all;
+  max-width: 100%;
+}
+@media (prefers-color-scheme: dark) {
+  body { background: #000; color: #f5f5f7; }
+  .lx-error-code { color: #3a3a3c; }
+  .lx-error-title { color: #f5f5f7; }
+  .lx-error-desc { color: #86868b; }
+  .lx-error-path { background: rgba(255,255,255,0.08); color: #f5f5f7; }
+}
+`;
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+export function renderErrorUI(errorInfo) {
+    const { failedPath, reason } = errorInfo;
+    const styleEl = document.createElement('style');
+    styleEl.textContent = ERROR_STYLES;
+    document.head.appendChild(styleEl);
+    document.body.innerHTML = '';
+    document.body.style.cssText = '';
+    const container = document.createElement('div');
+    container.className = 'lx-error';
+    let html = '<div class="lx-error-code">404</div>';
+    html += '<h1 class="lx-error-title">Page Not Found</h1>';
+    html += '<p class="lx-error-desc">The page you\'re looking for doesn\'t exist.</p>';
+    if (failedPath) {
+        html += `<div class="lx-error-path">${escapeHtml(failedPath)}</div>`;
+    }
+    if (reason) {
+        html += `<p class="lx-error-desc" style="margin-top:12px">${escapeHtml(reason)}</p>`;
+    }
+    container.innerHTML = html;
+    document.body.appendChild(container);
+}
+export function hasError() {
+    const config = window.__LX_RUNTIME_CONFIG;
+    return !!(config && config.error);
+}
+export function getErrorInfo() {
+    const config = window.__LX_RUNTIME_CONFIG;
+    return config?.error || null;
+}

package/dist/es2020/image-proxy.js

@@ -0,0 +1,82 @@
+import { getPlatformOS } from './runtime-env';
+const PROXY_PREFIX = 'lx://proxy/';
+function shouldProxyImageUrl(trimmed) {
+    if (trimmed.length === 0) {
+        return false;
+    }
+    if (trimmed.startsWith('lx://') ||
+        trimmed.startsWith('data:') ||
+        trimmed.startsWith('blob:') ||
+        trimmed.startsWith('file:')) {
+        return false;
+    }
+    return trimmed.startsWith('http://') || trimmed.startsWith('https://');
+}
+function toProxyUrl(url) {
+    const b64 = btoa(url);
+    const urlSafe = b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+    return `${PROXY_PREFIX}${urlSafe}`;
+}
+function proxyImageUrl(url) {
+    const trimmed = url.trim();
+    if (!shouldProxyImageUrl(trimmed))
+        return url;
+    return toProxyUrl(trimmed);
+}
+export function setupImageProxy() {
+    const os = getPlatformOS();
+    if (os !== 'iOS' && os !== 'macOS')
+        return;
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    if (typeof HTMLImageElement === 'undefined')
+        return;
+    const proto = HTMLImageElement.prototype;
+    if (proto.__lxProxyPatched)
+        return;
+    proto.__lxProxyPatched = true;
+    const originalSetAttribute = proto.setAttribute;
+    proto.setAttribute = function (name, value) {
+        if (typeof name === 'string' && name.toLowerCase() === 'src' && typeof value === 'string') {
+            return originalSetAttribute.call(this, name, proxyImageUrl(value));
+        }
+        return originalSetAttribute.call(this, name, value);
+    };
+    const srcDescriptor = Object.getOwnPropertyDescriptor(proto, 'src');
+    if (srcDescriptor?.set) {
+        Object.defineProperty(proto, 'src', {
+            configurable: srcDescriptor.configurable,
+            enumerable: srcDescriptor.enumerable,
+            get: srcDescriptor.get,
+            set(value) {
+                if (typeof value === 'string') {
+                    srcDescriptor.set?.call(this, proxyImageUrl(value));
+                }
+                else {
+                    srcDescriptor.set?.call(this, value);
+                }
+            },
+        });
+    }
+    const rewriteExisting = () => {
+        const imgs = document.querySelectorAll('img[src]');
+        imgs.forEach((img) => {
+            const src = img.getAttribute('src');
+            if (!src)
+                return;
+            const proxied = proxyImageUrl(src);
+            if (proxied !== src) {
+                originalSetAttribute.call(img, 'src', proxied);
+            }
+        });
+    };
+    const domReadyListener = {
+        handleEvent: () => rewriteExisting(),
+    };
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', domReadyListener);
+    }
+    else {
+        rewriteExisting();
+    }
+}

package/dist/es2020/index.js

@@ -0,0 +1,19 @@
+/**
+ * LingXia Web Runtime
+ *
+ * Injected into SPA HTML to handle:
+ * - Bridge initialization for native communication
+ * - Error UI rendering when page cannot be loaded
+ */
+export { LingXiaBridge, channel, initBridge, invoke, notify, stream, } from './bridge';
+export { isNativeError } from './invocation';
+export { renderErrorUI, hasError, getErrorInfo } from './error';
+export { boot, bootWhenReady } from './boot';
+import { bootWhenReady } from './boot';
+import { setupImageProxy } from './image-proxy';
+import { registerUIHandlers } from './ui';
+if (__LX_RUNTIME_PLATFORM__ === 'all' || __LX_RUNTIME_PLATFORM__ === 'desktop') {
+    registerUIHandlers();
+}
+setupImageProxy();
+bootWhenReady();

package/dist/es2020/invocation.js

@@ -0,0 +1,77 @@
+import { BRIDGE_ERROR } from "./types";
+class BridgeInvocationError extends Error {
+    constructor(code, message, data) {
+        super(message);
+        this.name = "BridgeInvocationError";
+        this.code = code;
+        this.data = data;
+    }
+}
+export function toBridgeError(err) {
+    if (err instanceof BridgeInvocationError)
+        return err;
+    if (err && typeof err === "object") {
+        const source = err;
+        let code = BRIDGE_ERROR.INTERNAL_ERROR;
+        if (typeof source.code === "string" && source.code.trim() !== "") {
+            code = source.code;
+        }
+        else if (typeof source.code === "number" && Number.isFinite(source.code)) {
+            code = source.code;
+        }
+        const message = typeof source.message === "string" && source.message.trim() !== ""
+            ? source.message
+            : "Unknown error";
+        return new BridgeInvocationError(code, message, "data" in source ? source.data : undefined);
+    }
+    const message = err instanceof Error ? err.message : typeof err === "string" ? err : "Unknown error";
+    return new BridgeInvocationError(BRIDGE_ERROR.INTERNAL_ERROR, message);
+}
+export function toNativeError(err) {
+    const bridgeError = toBridgeError(err);
+    return {
+        code: String(bridgeError.code || BRIDGE_ERROR.INTERNAL_ERROR),
+        message: typeof bridgeError.message === "string" && bridgeError.message.trim() !== ""
+            ? bridgeError.message
+            : "Unknown error",
+        ...(bridgeError.data === undefined ? {} : { data: bridgeError.data }),
+    };
+}
+export function isNativeError(error, code) {
+    if (!error || typeof error !== "object")
+        return false;
+    const candidate = error;
+    if (typeof candidate.code !== "string" || candidate.code.trim() === "")
+        return false;
+    if (typeof candidate.message !== "string")
+        return false;
+    return code === undefined || candidate.code === code;
+}
+export function resolveParams(source) {
+    if (typeof source === "function") {
+        return source();
+    }
+    return source;
+}
+export function stableParamKey(value) {
+    if (value === undefined)
+        return "undefined";
+    try {
+        return JSON.stringify(value) ?? "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;
+}

package/dist/es2020/nativecomponents/coverage-monitor.js

@@ -0,0 +1,159 @@
+export function installNativeComponentCoverageMonitor({ os, send }) {
+    if (typeof window === 'undefined')
+        return;
+    if (typeof document === 'undefined')
+        return;
+    const isIOS = os === 'iOS';
+    const isAndroid = os === 'Android';
+    if (!isIOS && !isAndroid)
+        return;
+    const key = Symbol.for('LingXia.NativeComponentCoverageMonitor');
+    const existing = window[key];
+    if (existing?.installed)
+        return;
+    const state = {
+        installed: true,
+        coveredById: new Map(),
+        coveredCount: 0,
+        anyCovered: false,
+        scheduled: false,
+        hasAnyVideo: false,
+        scrollLocked: false,
+        scrollY: 0,
+        htmlOverflow: '',
+        bodyOverflow: '',
+        bodyPosition: '',
+        bodyTop: '',
+        bodyWidth: '',
+    };
+    window[key] = state;
+    function lockScroll() {
+        if (!isIOS)
+            return;
+        if (state.scrollLocked)
+            return;
+        const html = document.documentElement;
+        const body = document.body;
+        if (!html || !body)
+            return;
+        state.scrollLocked = true;
+        state.scrollY = window.scrollY || html.scrollTop || 0;
+        state.htmlOverflow = html.style.overflow || '';
+        state.bodyOverflow = body.style.overflow || '';
+        state.bodyPosition = body.style.position || '';
+        state.bodyTop = body.style.top || '';
+        state.bodyWidth = body.style.width || '';
+        html.style.overflow = 'hidden';
+        body.style.overflow = 'hidden';
+        body.style.position = 'fixed';
+        body.style.top = `${-state.scrollY}px`;
+        body.style.width = '100%';
+    }
+    function unlockScroll() {
+        if (!isIOS)
+            return;
+        if (!state.scrollLocked)
+            return;
+        const html = document.documentElement;
+        const body = document.body;
+        if (!html || !body)
+            return;
+        state.scrollLocked = false;
+        html.style.overflow = state.htmlOverflow;
+        body.style.overflow = state.bodyOverflow;
+        body.style.position = state.bodyPosition;
+        body.style.top = state.bodyTop;
+        body.style.width = state.bodyWidth;
+        window.scrollTo(0, state.scrollY);
+    }
+    function isElementCovered(el) {
+        const rect = el.getBoundingClientRect?.();
+        if (!rect)
+            return false;
+        if (rect.width < 2 || rect.height < 2)
+            return false;
+        const x = rect.left + rect.width / 2;
+        const y = rect.top + rect.height / 2;
+        if (x < 0 || y < 0 || x >= window.innerWidth || y >= window.innerHeight)
+            return false;
+        const top = document.elementFromPoint?.(x, y);
+        if (!top)
+            return false;
+        if (top === document.documentElement || top === document.body)
+            return false;
+        return !(top === el || el.contains(top));
+    }
+    function check() {
+        state.scheduled = false;
+        const nodes = document.querySelectorAll('lx-video[id]');
+        state.hasAnyVideo = nodes.length > 0;
+        if (!state.hasAnyVideo && state.coveredById.size === 0 && !state.anyCovered) {
+            return;
+        }
+        const seenIds = new Set();
+        for (const node of Array.from(nodes)) {
+            const id = node.id;
+            if (!id)
+                continue;
+            seenIds.add(id);
+            const covered = isElementCovered(node);
+            const prev = state.coveredById.get(id);
+            if (prev === covered)
+                continue;
+            if (prev === true)
+                state.coveredCount -= 1;
+            if (covered === true)
+                state.coveredCount += 1;
+            state.coveredById.set(id, covered);
+            send({ id, action: 'component.coverage', covered });
+        }
+        const staleIds = [];
+        for (const [id, covered] of state.coveredById.entries()) {
+            if (seenIds.has(id))
+                continue;
+            staleIds.push(id);
+            if (covered === true)
+                state.coveredCount -= 1;
+        }
+        for (const id of staleIds) {
+            state.coveredById.delete(id);
+            send({ id, action: 'component.coverage', covered: false });
+        }
+        const anyCovered = state.coveredCount > 0;
+        if (anyCovered !== state.anyCovered) {
+            state.anyCovered = anyCovered;
+            if (isIOS) {
+                if (anyCovered)
+                    lockScroll();
+                else
+                    unlockScroll();
+            }
+        }
+    }
+    function schedule() {
+        if (state.scheduled)
+            return;
+        state.scheduled = true;
+        requestAnimationFrame(check);
+    }
+    function onScroll() {
+        if (!state.hasAnyVideo && state.coveredById.size === 0)
+            return;
+        schedule();
+    }
+    const observer = new MutationObserver(schedule);
+    observer.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+    });
+    const scrollListener = {
+        handleEvent: () => onScroll(),
+    };
+    const resizeListener = {
+        handleEvent: () => schedule(),
+    };
+    window.addEventListener('scroll', scrollListener, { capture: true, passive: true });
+    window.addEventListener('resize', resizeListener);
+    schedule();
+}

package/dist/es2020/runtime-env.js

@@ -0,0 +1,31 @@
+export const BRIDGE_CONFIG = (typeof window !== 'undefined' && window.__LX_BRIDGE_CFG) || {};
+export function getPlatformOS() {
+    return BRIDGE_CONFIG.os || 'unknown';
+}
+export function isHarmony() {
+    return BRIDGE_CONFIG.os === 'Harmony';
+}
+export function isIOS() {
+    return BRIDGE_CONFIG.os === 'iOS';
+}
+export function isAndroid() {
+    return BRIDGE_CONFIG.os === 'Android';
+}
+export function isMacOS() {
+    return BRIDGE_CONFIG.os === 'macOS';
+}
+export function isDesktop() {
+    return isMacOS();
+}
+export function getCommunicationMethod() {
+    if (BRIDGE_CONFIG.os === 'iOS' || BRIDGE_CONFIG.os === 'macOS')
+        return 'webkit';
+    if (BRIDGE_CONFIG.os === 'Harmony')
+        return 'messageport';
+    if (BRIDGE_CONFIG.os === 'Android') {
+        if (window.LingXiaProxy?.supportsMessagePort?.())
+            return 'messageport';
+        return 'jsinterface';
+    }
+    return 'unknown';
+}

package/dist/es2020/types.js

@@ -0,0 +1,16 @@
+// V2 Error Codes (stable)
+export const BRIDGE_ERROR = {
+    NOT_READY: 'BRIDGE_NOT_READY',
+    TIMEOUT: 'BRIDGE_TIMEOUT',
+    CANCELED: 'BRIDGE_CANCELED',
+    PROTOCOL_MISMATCH: 'BRIDGE_PROTOCOL_MISMATCH',
+    HANDSHAKE_FAILED: 'BRIDGE_HANDSHAKE_FAILED',
+    MALFORMED_MESSAGE: 'BRIDGE_MALFORMED_MESSAGE',
+    METHOD_NOT_FOUND: 'BRIDGE_METHOD_NOT_FOUND',
+    TOPIC_NOT_FOUND: 'BRIDGE_TOPIC_NOT_FOUND',
+    CAPABILITY_DENIED: 'BRIDGE_CAPABILITY_DENIED',
+    INTERNAL_ERROR: 'BRIDGE_INTERNAL_ERROR',
+    OUTBOX_FULL: 'BRIDGE_OUTBOX_FULL',
+    STREAM_OVERFLOW: 'BRIDGE_STREAM_OVERFLOW',
+    STREAM_CLOSED: 'BRIDGE_STREAM_CLOSED',
+};

package/dist/es2020/ui/action-sheet.js

@@ -0,0 +1,138 @@
+import { getPlatformOS } from '../runtime-env';
+const ANIMATION_MS = 300;
+const STYLE_ID = 'lx-action-sheet-style';
+let activeSheet = null;
+function isDesktopMode() {
+    return getPlatformOS() === 'macOS';
+}
+function ensureActionSheetStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+.lx-as-backdrop {
+  position: fixed; inset: 0; z-index: 99999;
+  background: rgba(0,0,0,0.4);
+  opacity: 0; transition: opacity ${ANIMATION_MS}ms ease;
+}
+.lx-as-backdrop.lx-as-visible { opacity: 1; }
+
+.lx-as-sheet {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
+  transform: translateY(100%);
+  transition: transform ${ANIMATION_MS}ms ease;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.lx-as-sheet.lx-as-visible { transform: translateY(0); }
+.lx-as-sheet.lx-as-desktop {
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  top: 50%;
+  width: min(92vw, 460px);
+  transform: translate(-50%, calc(-50% + 16px));
+}
+.lx-as-sheet.lx-as-desktop.lx-as-visible { transform: translate(-50%, -50%); }
+
+.lx-as-container {
+  background: #fff;
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+.lx-as-container.lx-as-desktop {
+  border-radius: 16px;
+}
+
+.lx-as-item {
+  display: block; width: 100%;
+  height: 56px;
+  line-height: 56px;
+  padding: 0;
+  border: none; background: none;
+  font-size: 18px; font-weight: 400;
+  text-align: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+}
+.lx-as-item:active { background: rgba(0,0,0,0.08); }
+.lx-as-item + .lx-as-item::before {
+  content: ''; position: absolute; top: 0; left: 0; right: 0;
+  height: 1px; background: #E0E0E0;
+}
+.lx-as-separator {
+  height: 8px;
+  background: #F2F2F2;
+}
+.lx-as-cancel-btn { font-weight: 500; color: #000; }
+`;
+    document.head.appendChild(style);
+}
+export function showActionSheet(params) {
+    const p = params;
+    const items = p?.itemList ?? [];
+    const cancelText = p?.cancelText ?? 'Cancel';
+    const itemColor = p?.itemColor ?? '#007AFF';
+    const task = (activeSheet ?? Promise.resolve()).then(() => renderSheet(items, cancelText, itemColor), () => renderSheet(items, cancelText, itemColor));
+    activeSheet = task;
+    return task;
+}
+function renderSheet(items, cancelText, itemColor) {
+    return new Promise((resolve) => {
+        let dismissed = false;
+        const desktopMode = isDesktopMode();
+        ensureActionSheetStyle();
+        // --- DOM ---
+        const backdrop = document.createElement('div');
+        backdrop.className = 'lx-as-backdrop';
+        const sheet = document.createElement('div');
+        sheet.className = 'lx-as-sheet';
+        if (desktopMode) {
+            sheet.classList.add('lx-as-desktop');
+        }
+        const container = document.createElement('div');
+        container.className = 'lx-as-container';
+        if (desktopMode) {
+            container.classList.add('lx-as-desktop');
+        }
+        items.forEach((text, index) => {
+            const btn = document.createElement('button');
+            btn.className = 'lx-as-item';
+            btn.textContent = text;
+            btn.style.color = itemColor;
+            btn.addEventListener('click', () => dismiss(index));
+            container.appendChild(btn);
+        });
+        const separator = document.createElement('div');
+        separator.className = 'lx-as-separator';
+        container.appendChild(separator);
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'lx-as-item lx-as-cancel-btn';
+        cancelBtn.textContent = cancelText;
+        cancelBtn.addEventListener('click', () => dismiss(-1));
+        container.appendChild(cancelBtn);
+        sheet.appendChild(container);
+        document.body.appendChild(backdrop);
+        document.body.appendChild(sheet);
+        // Trigger enter animation on next frame
+        requestAnimationFrame(() => {
+            backdrop.classList.add('lx-as-visible');
+            sheet.classList.add('lx-as-visible');
+        });
+        backdrop.addEventListener('click', () => dismiss(-1));
+        function dismiss(tapIndex) {
+            if (dismissed)
+                return;
+            dismissed = true;
+            backdrop.classList.remove('lx-as-visible');
+            sheet.classList.remove('lx-as-visible');
+            setTimeout(() => {
+                backdrop.remove();
+                sheet.remove();
+                resolve({ tapIndex });
+            }, ANIMATION_MS);
+        }
+    });
+}

package/dist/es2020/ui/index.js

@@ -0,0 +1,10 @@
+import { registerViewMethodHandler } from '../bridge';
+import { showActionSheet } from './action-sheet';
+import { showModal } from './modal';
+import { showToast, hideToast } from './toast';
+export function registerUIHandlers() {
+    registerViewMethodHandler('ui.showActionSheet', showActionSheet);
+    registerViewMethodHandler('ui.showModal', showModal);
+    registerViewMethodHandler('ui.showToast', showToast);
+    registerViewMethodHandler('ui.hideToast', hideToast);
+}