@quicktvui/web-renderer 1.0.0

package/src/core/asyncLocalStorage.js

@@ -0,0 +1,175 @@
+/**
+ * 异步 localStorage 适配层
+ *
+ * 将浏览器同步的 localStorage API 包装为异步 API
+ * 以保持与 Android 平台的一致性
+ *
+ * 用法:
+ *   localStorage.getItem(key).then(value => { ... })
+ *   localStorage.setItem(key, value).then(() => { ... })
+ */
+
+const rawLocalStorage = window.localStorage
+
+// 存储变更监听器
+const changeListeners = new Map()
+
+/**
+ * 异步 localStorage 适配器
+ * 包装浏览器原生 localStorage，提供异步 API
+ */
+export const asyncLocalStorage = {
+  /**
+   * 异步获取存储项
+   * @param {string} key - 键名
+   * @returns {Promise<string|null>} - 返回 Promise
+   */
+  getItem(key) {
+    return new Promise((resolve) => {
+      // 使用 setTimeout 模拟异步行为
+      setTimeout(() => {
+        try {
+          const value = rawLocalStorage.getItem(key)
+          resolve(value)
+        } catch (e) {
+          console.warn('[AsyncLocalStorage] getItem error:', e)
+          resolve(null)
+        }
+      }, 0)
+    })
+  },
+
+  /**
+   * 异步设置存储项
+   * @param {string} key - 键名
+   * @param {string} value - 值
+   * @returns {Promise<void>}
+   */
+  setItem(key, value) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        try {
+          const oldValue = rawLocalStorage.getItem(key)
+          rawLocalStorage.setItem(key, value)
+          // 触发变更事件
+          _notifyChange(key, oldValue, value)
+          resolve()
+        } catch (e) {
+          console.warn('[AsyncLocalStorage] setItem error:', e)
+          reject(e)
+        }
+      }, 0)
+    })
+  },
+
+  /**
+   * 异步删除存储项
+   * @param {string} key - 键名
+   * @returns {Promise<void>}
+   */
+  removeItem(key) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        try {
+          const oldValue = rawLocalStorage.getItem(key)
+          rawLocalStorage.removeItem(key)
+          _notifyChange(key, oldValue, null)
+          resolve()
+        } catch (e) {
+          console.warn('[AsyncLocalStorage] removeItem error:', e)
+          resolve()
+        }
+      }, 0)
+    })
+  },
+
+  /**
+   * 异步清空存储
+   * @returns {Promise<void>}
+   */
+  clear() {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        try {
+          rawLocalStorage.clear()
+          resolve()
+        } catch (e) {
+          console.warn('[AsyncLocalStorage] clear error:', e)
+          resolve()
+        }
+      }, 0)
+    })
+  },
+
+  /**
+   * 获取所有键名
+   * @param {number} index - 索引
+   * @returns {Promise<string|null>}
+   */
+  key(index) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        try {
+          resolve(rawLocalStorage.key(index))
+        } catch (e) {
+          console.warn('[AsyncLocalStorage] key error:', e)
+          resolve(null)
+        }
+      }, 0)
+    })
+  },
+
+  /**
+   * 同步获取存储长度（保持同步，因为通常不需要异步）
+   */
+  get length() {
+    return rawLocalStorage.length
+  },
+
+  /**
+   * 监听存储变更
+   * @param {function} callback - 回调函数 (key, newValue, oldValue) => void
+   * @returns {function} 取消监听函数
+   */
+  addChangeListener(callback) {
+    const id = Date.now() + Math.random()
+    changeListeners.set(id, callback)
+    return () => changeListeners.delete(id)
+  },
+}
+
+/**
+ * 通知存储变更
+ */
+function _notifyChange(key, oldValue, newValue) {
+  changeListeners.forEach((callback) => {
+    try {
+      callback(key, newValue, oldValue)
+    } catch (e) {
+      console.warn('[AsyncLocalStorage] listener error:', e)
+    }
+  })
+}
+
+/**
+ * 初始化异步 localStorage
+ * 替换全局 localStorage 为异步版本
+ */
+export function initAsyncLocalStorage() {
+  // 保存原生 localStorage 引用
+  globalThis.__nativeLocalStorage = rawLocalStorage
+
+  // 替换为异步版本
+  globalThis.__localStorage = asyncLocalStorage
+
+  // 同时替换 window.localStorage（某些代码可能直接使用 window.localStorage）
+  Object.defineProperty(window, 'localStorage', {
+    value: asyncLocalStorage,
+    writable: false,
+    configurable: true,
+  })
+
+  console.log('[AsyncLocalStorage] Initialized - localStorage methods now return Promises')
+}
+
+export default asyncLocalStorage

package/src/core/autoProxy.js

@@ -0,0 +1,165 @@
+/**
+ * 自动代理模块 - 开发环境下自动拦截 fetch/XMLHttpRequest 请求并代理
+ *
+ * 原理：
+ * 1. 拦截所有 fetch/XHR 请求
+ * 2. 如果是外部 URL，转换为本地代理路径
+ * 3. 由 webpack-dev-server 代理到目标服务器
+ */
+
+// 是否启用自动代理（仅开发环境）
+const ENABLE_AUTO_PROXY = process.env.NODE_ENV === 'development'
+
+// 需要代理的域名列表（可通过环境变量配置）
+const PROXY_DOMAINS = (process.env.VUE_APP_PROXY_DOMAINS || '')
+  .split(',')
+  .map((d) => d.trim())
+  .filter(Boolean)
+
+// 默认代理的常见域名模式
+const DEFAULT_PROXY_PATTERNS = [
+  // 常见 API 域名
+  /api\./i,
+  /-api\./i,
+  /\.api\./i,
+  // CDN 和图片服务
+  /qcloudimg\./i,
+  /cdnott\./i,
+  /baidu\./i,
+  // 自定义域名（从环境变量读取）
+  ...PROXY_DOMAINS.map((d) => new RegExp(d.replace(/\./g, '\\.'), 'i')),
+]
+
+/**
+ * 判断 URL 是否需要代理
+ */
+function shouldProxy(url) {
+  if (!url) return false
+
+  try {
+    const urlObj = new URL(url, window.location.origin)
+
+    // 同源请求不需要代理
+    if (urlObj.origin === window.location.origin) {
+      return false
+    }
+
+    // 检查是否匹配代理模式
+    return DEFAULT_PROXY_PATTERNS.some((pattern) => pattern.test(urlObj.hostname))
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * 将外部 URL 转换为代理路径
+ */
+function toProxyUrl(url) {
+  if (!url) return url
+
+  try {
+    const urlObj = new URL(url, window.location.origin)
+
+    // 构建代理路径: /proxy/{protocol}/{host}{pathname}{search}
+    const proxyPath = `/proxy/${urlObj.protocol.replace(':', '')}/${urlObj.host}${urlObj.pathname}${urlObj.search}`
+
+    console.log(`[AutoProxy] ${url} -> ${proxyPath}`)
+    return proxyPath
+  } catch (e) {
+    return url
+  }
+}
+
+/**
+ * 处理 URL（如果是外部 URL 则转换为代理路径）
+ */
+export function proxyUrl(url) {
+  if (!ENABLE_AUTO_PROXY) return url
+  if (!shouldProxy(url)) return url
+  return toProxyUrl(url)
+}
+
+/**
+ * 初始化自动代理
+ */
+export function initAutoProxy() {
+  if (!ENABLE_AUTO_PROXY) {
+    console.log('[AutoProxy] Disabled (not development mode)')
+    return
+  }
+
+  console.log('[AutoProxy] Initializing...')
+  console.log(
+    '[AutoProxy] Proxy patterns:',
+    DEFAULT_PROXY_PATTERNS.map((p) => p.toString())
+  )
+
+  // ===== 拦截 fetch =====
+  const originalFetch = window.fetch
+  window.fetch = function (input, init = {}) {
+    let url = typeof input === 'string' ? input : input.url
+
+    if (shouldProxy(url)) {
+      const proxyUrlStr = toProxyUrl(url)
+
+      // 更新 input
+      if (typeof input === 'string') {
+        input = proxyUrlStr
+      } else if (input instanceof Request) {
+        // 创建新的 Request 对象
+        input = new Request(proxyUrlStr, {
+          method: input.method,
+          headers: input.headers,
+          body: input.body,
+          mode: 'cors', // 使用代理时改为同源
+          credentials: input.credentials,
+          cache: input.cache,
+          redirect: input.redirect,
+          referrer: input.referrer,
+          integrity: input.integrity,
+        })
+      }
+    }
+
+    return originalFetch.call(this, input, init)
+  }
+
+  // ===== 拦截 XMLHttpRequest =====
+  const originalXHROpen = XMLHttpRequest.prototype.open
+  XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
+    if (shouldProxy(url)) {
+      url = toProxyUrl(url)
+    }
+    return originalXHROpen.call(this, method, url, async !== false, user, password)
+  }
+
+  // ===== 拦截 Image =====
+  const originalImageSrcDescriptor = Object.getOwnPropertyDescriptor(
+    HTMLImageElement.prototype,
+    'src'
+  )
+  if (originalImageSrcDescriptor && originalImageSrcDescriptor.set) {
+    Object.defineProperty(HTMLImageElement.prototype, 'src', {
+      ...originalImageSrcDescriptor,
+      set(value) {
+        if (value.startsWith('http://127.0.0.1:38989')) {
+          return originalImageSrcDescriptor.set.call(
+            this,
+            value.replace('http://127.0.0.1:38989/', './')
+          )
+        }
+        const proxyValue = shouldProxy(value) ? toProxyUrl(value) : value
+        return originalImageSrcDescriptor.set.call(this, proxyValue)
+      },
+    })
+  }
+
+  console.log('[AutoProxy] Initialized successfully')
+}
+
+export default {
+  init: initAutoProxy,
+  proxyUrl,
+  shouldProxy,
+  toProxyUrl,
+}

package/src/core/componentRegistry.js

@@ -0,0 +1,84 @@
+// Component Registry for callUIFunction support
+// Local component registry for components that need callUIFunction support
+
+let webEngine = null
+
+const componentRegistry = new Map()
+
+// SID (string id) to component mapping for ExtendModule.callUIFunction support
+const sidRegistry = new Map()
+
+// Set the web engine reference
+export function setWebEngine(engine) {
+  webEngine = engine
+}
+
+export function getWebEngine() {
+  return webEngine
+}
+
+// Register a component by nodeId
+export function registerComponent(nodeId, component) {
+  componentRegistry.set(nodeId, component)
+  console.log('[Web Renderer] Registered component:', nodeId, component.constructor.name)
+}
+
+// Register a component by sid (string id)
+export function registerComponentBySid(sid, component) {
+  if (!sid || typeof sid !== 'string') {
+    return
+  }
+  sidRegistry.set(sid, component)
+  console.log(
+    '[Web Renderer] Registered component by sid:',
+    sid,
+    component.constructor?.name || component.tagName
+  )
+}
+
+// Unregister a component by sid
+export function unregisterComponentBySid(sid) {
+  if (sidRegistry.has(sid)) {
+    sidRegistry.delete(sid)
+    console.log('[Web Renderer] Unregistered component by sid:', sid)
+  }
+}
+
+// Find component by sid (string id)
+export function findComponentBySid(sid) {
+  if (sidRegistry.has(sid)) {
+    return sidRegistry.get(sid)
+  }
+  return null
+}
+
+// Find component by nodeId - check local registry first, then UIManagerModule
+export function findComponentById(nodeId) {
+  // If nodeId is a string, it's likely a sid
+  if (typeof nodeId === 'string') {
+    return findComponentBySid(nodeId)
+  }
+
+  // Check local registry first
+  if (componentRegistry.has(nodeId)) {
+    return componentRegistry.get(nodeId)
+  }
+
+  if (!webEngine) {
+    return null
+  }
+
+  try {
+    // getModuleByName is on context, not engine
+    const uiManager = webEngine.context?.getModuleByName?.('UIManagerModule')
+    if (uiManager && uiManager.findViewById) {
+      const component = uiManager.findViewById(nodeId)
+      if (component) {
+        return component
+      }
+    }
+  } catch (e) {
+    console.error('[Web Renderer] Error finding component:', e)
+  }
+  return null
+}

package/src/core/constants.js

@@ -0,0 +1,6 @@
+// TV app dimensions
+export const TV_WIDTH = 1920
+export const TV_HEIGHT = 1080
+
+// App name for web renderer
+export const APP_NAME = 'EsApp'

package/src/core/index.js

@@ -0,0 +1,8 @@
+// Core module exports
+export * from './constants'
+export * from './componentRegistry'
+export * from './SceneBuilder'
+export * from './patches'
+export * from './TVFocusManager'
+export * from './autoProxy'
+export * from './asyncLocalStorage'

package/src/core/moduleUtils.js

@@ -0,0 +1,36 @@
+// Module utility functions for web renderer
+
+/**
+ * Resolve addon callback pattern used by HippyWebEngine
+ * Many native module methods receive an addon object as the last argument
+ * with a resolve function that should be called with the result.
+ *
+ * @param {Array} args - The arguments array passed to the module method
+ * @param {*} value - The value to resolve/return
+ * @returns {*} The value (also calls resolve if addon exists)
+ *
+ * @example
+ * async getDeviceInfo(...args) {
+ *   return resolveAddon(args, { model: 'Web', ... })
+ * }
+ */
+export function resolveAddon(args, value) {
+  const last = args && args.length ? args[args.length - 1] : null
+  if (last && typeof last.resolve === 'function') {
+    last.resolve(value)
+  }
+  return value
+}
+
+/**
+ * Create a standard module init method
+ * @param {Array} args - Arguments passed to init
+ * @returns {Promise<boolean>}
+ */
+export function createModuleInit(args) {
+  const addon = args && args.length ? args[args.length - 1] : null
+  if (addon && typeof addon.resolve === 'function') {
+    addon.resolve(true)
+  }
+  return Promise.resolve(true)
+}