@ayden-fc2/riffle-bridge-web 1.0.0

package/src/core.ts

@@ -0,0 +1,236 @@
+/**
+ * Riffle Bridge 核心通信模块
+ * 
+ * 处理 WebView 与 Native 之间的消息收发
+ */
+
+import type { BridgeResponse } from './types';
+
+// 超时配置
+const TIMEOUT_CONFIG: Record<string, Record<string, number>> = {
+  fileStorage: {
+    downloadAndSave: 30000,
+    downloadWithCache: 30000,
+    takePhoto: 15000,
+    pickFromGallery: 15000,
+    default: 10000,
+  },
+  device: {
+    default: 8000,
+  },
+  default: {
+    default: 5000,
+  },
+};
+
+/**
+ * 获取请求超时时间
+ */
+function getTimeout(module: string, method: string): number {
+  const moduleConfig = TIMEOUT_CONFIG[module] || TIMEOUT_CONFIG.default;
+  return moduleConfig[method] || moduleConfig.default || 5000;
+}
+
+/**
+ * Bridge 核心类 - 处理消息收发
+ */
+export class BridgeCore {
+  private messageId = 0;
+  private initialized = false;
+  private sensorHandlers: Map<string, Set<(data: unknown[]) => void>> = new Map();
+
+  constructor() {
+    this.init();
+  }
+
+  /**
+   * 初始化 Bridge
+   */
+  private init(): void {
+    if (this.initialized) return;
+
+    // 初始化回调存储
+    if (!window.__RIFFLE_CALLBACKS__) {
+      window.__RIFFLE_CALLBACKS__ = new Map();
+    }
+
+    // 设置响应处理函数
+    window.handleNativeResponse = this.handleResponse.bind(this);
+    
+    // 设置传感器数据处理函数
+    window.handleSensorData = this.handleSensorData.bind(this);
+
+    // 保存传感器处理器引用
+    window.__RIFFLE_SENSOR_HANDLERS__ = this.sensorHandlers;
+
+    this.initialized = true;
+    console.log('[RiffleBridge] Core initialized');
+  }
+
+  /**
+   * 检查是否在 React Native WebView 环境中
+   */
+  isAvailable(): boolean {
+    return typeof window !== 'undefined' && 
+           typeof window.ReactNativeWebView !== 'undefined';
+  }
+
+  /**
+   * 等待 Bridge 就绪
+   */
+  async waitForReady(timeout = 3000): Promise<boolean> {
+    if (this.isAvailable()) return true;
+
+    return new Promise((resolve) => {
+      const startTime = Date.now();
+      
+      const check = () => {
+        if (this.isAvailable()) {
+          resolve(true);
+          return;
+        }
+        
+        if (Date.now() - startTime > timeout) {
+          resolve(false);
+          return;
+        }
+        
+        setTimeout(check, 50);
+      };
+      
+      check();
+    });
+  }
+
+  /**
+   * 确保在 React Native WebView 环境中运行
+   * @throws Error 如果不在 RN WebView 环境中
+   */
+  private ensureAvailable(): void {
+    if (!this.isAvailable()) {
+      throw new Error(
+        '[RiffleBridge] Not available. This SDK requires React Native WebView environment.\n' +
+        'Please ensure:\n' +
+        '1. Your app is running inside a React Native WebView\n' +
+        '2. Native side has injected the minimal bridge script\n' +
+        '3. window.ReactNativeWebView is available'
+      );
+    }
+  }
+
+  /**
+   * 发送消息到 Native
+   * @throws Error 如果不在 RN WebView 环境中
+   */
+  async send<T = unknown>(
+    module: string, 
+    method: string, 
+    params: Record<string, unknown> = {}
+  ): Promise<T> {
+    this.ensureAvailable();
+
+    const id = `msg_${++this.messageId}_${Date.now()}`;
+    const timeout = getTimeout(module, method);
+
+    return new Promise((resolve, reject) => {
+      // 设置回调
+      window.__RIFFLE_CALLBACKS__!.set(id, (response: BridgeResponse) => {
+        if (response.success) {
+          resolve(response.data as T);
+        } else {
+          reject(new Error(response.error || 'Unknown error'));
+        }
+      });
+
+      // 发送消息
+      const message = {
+        id,
+        module,
+        method,
+        params,
+        timestamp: Date.now(),
+      };
+
+      window.ReactNativeWebView!.postMessage(JSON.stringify(message));
+
+      // 设置超时
+      setTimeout(() => {
+        if (window.__RIFFLE_CALLBACKS__!.has(id)) {
+          window.__RIFFLE_CALLBACKS__!.delete(id);
+          reject(new Error(`Request timeout (${timeout / 1000}s) for ${module}.${method}`));
+        }
+      }, timeout);
+    });
+  }
+
+  /**
+   * 处理 Native 响应
+   */
+  private handleResponse(responseStr: string): void {
+    try {
+      const response: BridgeResponse = JSON.parse(responseStr);
+      const callback = window.__RIFFLE_CALLBACKS__?.get(response.id);
+      
+      if (callback) {
+        window.__RIFFLE_CALLBACKS__!.delete(response.id);
+        callback(response);
+      }
+    } catch (error) {
+      console.error('[RiffleBridge] Failed to handle response:', error);
+    }
+  }
+
+  /**
+   * 处理传感器数据
+   */
+  private handleSensorData(data: { sensor: string; values: unknown[] }): void {
+    const { sensor, values } = data;
+    const handlers = this.sensorHandlers.get(sensor);
+    
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(values);
+        } catch (error) {
+          console.error(`[RiffleBridge] Sensor callback error (${sensor}):`, error);
+        }
+      });
+    }
+  }
+
+  /**
+   * 订阅传感器数据
+   */
+  onSensorData(sensor: string, callback: (data: unknown[]) => void): () => void {
+    if (!this.sensorHandlers.has(sensor)) {
+      this.sensorHandlers.set(sensor, new Set());
+    }
+    
+    this.sensorHandlers.get(sensor)!.add(callback);
+    
+    // 返回取消订阅函数
+    return () => {
+      this.sensorHandlers.get(sensor)?.delete(callback);
+    };
+  }
+
+  /**
+   * 清除所有传感器订阅
+   */
+  clearSensorSubscriptions(): void {
+    this.sensorHandlers.clear();
+  }
+}
+
+// 单例实例
+let bridgeCoreInstance: BridgeCore | null = null;
+
+/**
+ * 获取 BridgeCore 单例
+ */
+export function getBridgeCore(): BridgeCore {
+  if (!bridgeCoreInstance) {
+    bridgeCoreInstance = new BridgeCore();
+  }
+  return bridgeCoreInstance;
+}

package/src/index.ts

@@ -0,0 +1,94 @@
+/**
+ * @ayden-fc2/riffle-bridge-web
+ * 
+ * Riffle Bridge Web SDK - WebView 与 Native 通信桥接库
+ * 
+ * @example
+ * ```typescript
+ * import { RiffleBridge, createTweaks } from '@ayden-fc2/riffle-bridge-web';
+ * 
+ * // 基础使用
+ * const bridge = new RiffleBridge();
+ * await bridge.vibrate('success');
+ * 
+ * // Tweaks 配置
+ * const tweaks = createTweaks({
+ *   color: { name: '颜色', type: 'color', value: '#667eea' },
+ * }, { React });
+ * 
+ * const color = tweaks.color.useState();
+ * ```
+ */
+
+// 核心类
+export { BridgeCore, getBridgeCore } from './core';
+export { RiffleBridge, getRiffleBridge, Utils } from './bridge';
+
+// 控制器
+export {
+  HapticController,
+  SensorController,
+  DeviceController,
+  FileStorageController,
+  AudioController,
+  CameraController,
+  MicrophoneController,
+  ConfigController,
+} from './controllers';
+
+// Tweaks 配置系统
+export {
+  TweakValue,
+  RiffleBridgeTweaks,
+  createTweaks,
+  riffleBridgeTweaks,
+} from './tweaks';
+
+// 类型导出
+export type {
+  // 基础类型
+  HapticFeedbackType,
+  SensorType,
+  CameraFacing,
+  CameraFilter,
+  TiltDirection,
+  ShakeIntensity,
+  
+  // 数据接口
+  SensorData,
+  BarometerData,
+  VolumeData,
+  AudioStatus,
+  DeviceInfo,
+  BatteryInfo,
+  NetworkInfo,
+  SystemInfo,
+  AppInfo,
+  ScreenInfo,
+  StorageStats,
+  FileInfo,
+  CachedFileInfo,
+  DownloadResult,
+  Base64Result,
+  PhotoResult,
+  RecordingResult,
+  PermissionResult,
+  
+  // Tweaks 类型
+  TweakType,
+  TweakConfig,
+  TweaksConfig,
+  SelectOption,
+  ColorTweakConfig,
+  NumberTweakConfig,
+  BooleanTweakConfig,
+  StringTweakConfig,
+  SelectTweakConfig,
+  
+  // Bridge 消息类型
+  BridgeMessage,
+  BridgeResponse,
+} from './types';
+
+// 控制器选项类型
+export type { SensorStartOptions, PlayOptions } from './controllers';

package/src/tweaks.ts

@@ -0,0 +1,383 @@
+/**
+ * Riffle Bridge Tweaks 配置系统
+ * 
+ * 提供响应式配置管理，支持与 Native 端双向同步
+ */
+
+import type { TweakConfig, TweaksConfig } from './types';
+import { getRiffleBridge } from './bridge';
+
+type ReactType = typeof import('react');
+
+/**
+ * 单个配置项的值包装器
+ */
+export class TweakValue<T> {
+  private _value: T;
+  private _listeners: Set<() => void> = new Set();
+  private _syncCallback: (() => void) | null;
+
+  constructor(
+    private _key: string,
+    private _config: TweakConfig,
+    syncCallback: (() => void) | null = null
+  ) {
+    this._value = _config.value as T;
+    this._syncCallback = syncCallback;
+  }
+
+  /** 获取当前值 */
+  get value(): T {
+    return this._value;
+  }
+
+  /** 获取配置 */
+  get config(): TweakConfig {
+    return this._config;
+  }
+
+  /** 获取键名 */
+  get key(): string {
+    return this._key;
+  }
+
+  /**
+   * 设置值
+   * @param newValue 新值
+   * @param skipSync 是否跳过同步到 Native
+   */
+  set(newValue: T, skipSync = false): void {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this._notifyListeners();
+      if (!skipSync && this._syncCallback) {
+        this._syncCallback();
+      }
+    }
+  }
+
+  /**
+   * 内部设置（不触发同步，用于接收 Native 更新）
+   */
+  _setInternal(newValue: T): void {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this._notifyListeners();
+    }
+  }
+
+  /**
+   * 订阅值变化
+   */
+  subscribe(listener: () => void): () => void {
+    this._listeners.add(listener);
+    return () => this._listeners.delete(listener);
+  }
+
+  /**
+   * 监听值变化
+   */
+  onChange(callback: (value: T) => void): () => void {
+    return this.subscribe(() => callback(this._value));
+  }
+
+  /**
+   * React Hook: 获取响应式值
+   * 需要传入 React 实例或使用 createTweaks 时传入
+   */
+  useState(react?: ReactType): T {
+    const ReactRef = react || _globalReact;
+    
+    if (!ReactRef?.useSyncExternalStore) {
+      console.warn('[RiffleBridgeTweaks] React.useSyncExternalStore not available, returning static value');
+      return this._value;
+    }
+
+    return ReactRef.useSyncExternalStore(
+      (callback) => this.subscribe(callback),
+      () => this._value,
+      () => this._value
+    );
+  }
+
+  private _notifyListeners(): void {
+    this._listeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (e) {
+        console.error('[RiffleBridgeTweaks] Listener error:', e);
+      }
+    });
+  }
+}
+
+// 全局 React 引用
+let _globalReact: ReactType | null = null;
+
+/**
+ * Tweaks 配置管理器
+ */
+export class RiffleBridgeTweaks<T extends TweaksConfig> {
+  private _config: T;
+  private _tweaks: Map<string, TweakValue<unknown>> = new Map();
+  private _syncDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(config: T) {
+    this._config = config;
+
+    // 创建防抖同步函数
+    const debouncedSync = () => {
+      if (this._syncDebounceTimer) {
+        clearTimeout(this._syncDebounceTimer);
+      }
+      this._syncDebounceTimer = setTimeout(() => {
+        this._syncToNative();
+      }, 50);
+    };
+
+    // 初始化各配置项
+    for (const [key, cfg] of Object.entries(config)) {
+      this._tweaks.set(key, new TweakValue(key, cfg, debouncedSync));
+    }
+
+    // 设置消息监听和全局回调
+    this._setupMessageListener();
+    this._setupGlobalCallbacks();
+
+    // 初始同步到 Native
+    this._syncToNative();
+
+    console.log('[RiffleBridgeTweaks] Initialized');
+  }
+
+  /**
+   * 获取指定键的配置项
+   */
+  get<K extends keyof T>(key: K): TweakValue<T[K]['value']> {
+    return this._tweaks.get(key as string) as TweakValue<T[K]['value']>;
+  }
+
+  /**
+   * 获取所有值
+   */
+  getData(): Record<string, unknown> {
+    const data: Record<string, unknown> = {};
+    for (const [key, tweak] of this._tweaks) {
+      data[key] = tweak.value;
+    }
+    return data;
+  }
+
+  /**
+   * 获取完整配置（含元数据）
+   */
+  toJSON(): Record<string, { name: string; type: string; value: unknown; [k: string]: unknown }> {
+    const result: Record<string, { name: string; type: string; value: unknown; [k: string]: unknown }> = {};
+    for (const [key, tweak] of this._tweaks) {
+      result[key] = { ...tweak.config, value: tweak.value };
+    }
+    return result;
+  }
+
+  /**
+   * 批量更新值
+   */
+  update(updates: Partial<Record<keyof T, unknown>>): void {
+    for (const [key, value] of Object.entries(updates)) {
+      const tweak = this._tweaks.get(key);
+      if (tweak) {
+        tweak.set(value);
+      }
+    }
+    this._syncToNative();
+  }
+
+  /**
+   * 重置为默认值
+   */
+  reset(): void {
+    for (const [key, tweak] of this._tweaks) {
+      tweak.set(this._config[key].value);
+    }
+    this._syncToNative();
+  }
+
+  /**
+   * 获取所有配置键名
+   */
+  keys(): string[] {
+    return Array.from(this._tweaks.keys());
+  }
+
+  /**
+   * 监听任意参数变化
+   */
+  onAnyChange(callback: (key: string, value: unknown) => void): () => void {
+    const unsubscribes: Array<() => void> = [];
+    for (const [key, tweak] of this._tweaks) {
+      unsubscribes.push(tweak.onChange((value) => callback(key, value)));
+    }
+    return () => unsubscribes.forEach((unsub) => unsub());
+  }
+
+  /**
+   * 设置消息监听
+   */
+  private _setupMessageListener(): void {
+    if (typeof window === 'undefined') return;
+
+    window.addEventListener('message', (event) => {
+      const data = event.data;
+      if (!data || typeof data !== 'object') return;
+
+      const { type, payload } = data as { type?: string; payload?: Record<string, unknown> };
+
+      // 单个值更新
+      if (type === 'tweak-update' && payload) {
+        const { key, value } = payload as { key: string; value: unknown };
+        const tweak = this._tweaks.get(key);
+        if (tweak) {
+          tweak._setInternal(value);
+        }
+      }
+
+      // 批量更新
+      if (type === 'tweaks-update' && payload) {
+        for (const [key, value] of Object.entries(payload)) {
+          const tweak = this._tweaks.get(key);
+          if (tweak) {
+            tweak._setInternal(value);
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * 设置全局回调函数（兼容旧版 Native 调用方式）
+   */
+  private _setupGlobalCallbacks(): void {
+    if (typeof window === 'undefined') return;
+
+    const self = this;
+
+    // 单个值更新回调
+    (window as unknown as Record<string, unknown>).updateConfigFromNative = function (
+      key: string,
+      value: unknown
+    ) {
+      const tweak = self._tweaks.get(key);
+      if (tweak) {
+        tweak._setInternal(value);
+      }
+    };
+
+    // 批量更新回调
+    (window as unknown as Record<string, unknown>).applyConfigFromNative = function (
+      allData: Record<string, unknown>
+    ) {
+      for (const [key, value] of Object.entries(allData)) {
+        const tweak = self._tweaks.get(key);
+        if (tweak) {
+          tweak._setInternal(value);
+        }
+      }
+    };
+
+    // 重置回调
+    (window as unknown as Record<string, unknown>).resetConfigToDefaults = function () {
+      for (const [key, tweak] of self._tweaks) {
+        tweak._setInternal(self._config[key].value);
+      }
+    };
+  }
+
+  /**
+   * 同步配置到 Native
+   */
+  private _syncToNative(): void {
+    try {
+      const bridge = getRiffleBridge();
+      if (!bridge.isAvailable()) {
+        return;
+      }
+
+      bridge.config.updateParams({
+        tweaks: this.toJSON(),
+        data: this.getData(),
+        timestamp: Date.now(),
+      });
+    } catch (e) {
+      console.error('[RiffleBridgeTweaks] Sync failed:', e);
+    }
+  }
+}
+
+// Tweaks 实例的代理类型
+type TweaksProxy<T extends TweaksConfig> = RiffleBridgeTweaks<T> & {
+  [K in keyof T]: TweakValue<T[K]['value']>;
+};
+
+/**
+ * 创建 Tweaks 配置实例
+ * 
+ * @example
+ * ```typescript
+ * import React from 'react';
+ * import { createTweaks } from '@riffle/bridge-web';
+ * 
+ * const tweaks = createTweaks({
+ *   color: { name: '颜色', type: 'color', value: '#667eea' },
+ *   size: { name: '大小', type: 'number', value: 150, min: 50, max: 300 },
+ *   enabled: { name: '启用', type: 'boolean', value: true },
+ * }, { React });
+ * 
+ * function Demo() {
+ *   const color = tweaks.color.useState();
+ *   const size = tweaks.size.useState();
+ *   
+ *   return <div style={{ backgroundColor: color, width: size, height: size }} />;
+ * }
+ * ```
+ */
+export function createTweaks<T extends TweaksConfig>(
+  config: T,
+  options: { React?: ReactType } = {}
+): TweaksProxy<T> {
+  // 保存 React 引用
+  if (options.React) {
+    _globalReact = options.React;
+  }
+
+  const instance = new RiffleBridgeTweaks(config);
+
+  // 创建代理，支持直接访问配置项
+  return new Proxy(instance, {
+    get(target, prop) {
+      // 优先返回实例方法
+      if (prop in target) {
+        const value = target[prop as keyof typeof target];
+        return typeof value === 'function' ? value.bind(target) : value;
+      }
+      // 否则返回配置项
+      return target.get(prop as keyof T);
+    },
+    ownKeys(target) {
+      return target.keys();
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      if (target.keys().includes(prop as string)) {
+        return { enumerable: true, configurable: true };
+      }
+      return undefined;
+    },
+  }) as TweaksProxy<T>;
+}
+
+// 兼容全局函数调用方式
+export function riffleBridgeTweaks<T extends TweaksConfig>(
+  config: T,
+  options: { React?: ReactType } = {}
+): TweaksProxy<T> {
+  return createTweaks(config, options);
+}