@quicktvui/web-cli 1.0.0-beta.2 → 1.0.0-beta.21

package/bin/qt-web-cli.js

@@ -0,0 +1,253 @@
+#!/usr/bin/env node
+
+/**
+ * QuickTVUI Web Dev CLI
+ * 启动 web 开发服务器，无需手动配置入口文件
+ */
+
+const path = require('path')
+const fs = require('fs')
+const signale = require('signale')
+const minimist = require('minimist')
+const { exec } = require('shelljs')
+
+// 解析命令行参数
+const args = minimist(process.argv.slice(2), {
+  string: ['port', 'config'],
+  boolean: ['help', 'open'],
+  alias: {
+    p: 'port',
+    c: 'config',
+    h: 'help',
+    o: 'open',
+  },
+  default: {
+    port: 39001,
+    open: true,
+  },
+})
+
+// 显示帮助信息
+if (args.help) {
+  console.log(`
+QuickTVUI Web CLI
+
+Usage:
+  qt-web-cli [options]
+
+Options:
+  -p, --port <port>     开发服务器端口 (默认: 39001)
+  -c, --config <path>   自定义 webpack 配置文件路径
+  -o, --open            自动打开浏览器
+  -h, --help            显示帮助信息
+
+Examples:
+  qt-web-cli
+  qt-web-cli --port 8080
+  qt-web-cli --config ./my.webpack.js
+
+特点:
+  - 自动检测项目入口 (main-native.ts/js, main.ts/js)
+  - 零配置启动 web 开发服务器
+  `)
+  process.exit(0)
+}
+
+async function main() {
+  signale.pending('正在启动 QuickTVUI Web 开发服务器...')
+
+  // 查找项目根目录
+  const projectRoot = findProjectRoot()
+  if (!projectRoot) {
+    signale.error('无法找到项目根目录')
+    process.exit(1)
+  }
+
+  signale.info(`项目根目录: ${projectRoot}`)
+
+  // 读取 package.json
+  let pkg = {}
+  try {
+    pkg = require(path.join(projectRoot, 'package.json'))
+  } catch (e) {}
+
+  // 检测入口文件
+  let mainEntry
+  let entryType
+
+  // 入口候选列表
+  const entryCandidates = [
+    { name: 'src/main-native.ts', path: './src/main-native.ts', type: 'package' },
+    { name: 'src/main-native.js', path: './src/main-native.js', type: 'package' },
+    { name: 'src/main.ts', path: './src/main.ts', type: 'package' },
+    { name: 'src/main.js', path: './src/main.js', type: 'package' },
+    { name: 'main (package.json)', path: pkg.main, type: 'package' },
+  ]
+
+  for (const candidate of entryCandidates) {
+    if (!candidate.path) continue
+    const entryFullPath = path.resolve(projectRoot, candidate.path)
+    if (fs.existsSync(entryFullPath)) {
+      mainEntry = candidate.path
+      entryType = candidate.type
+      signale.info(`主入口: ${mainEntry}`)
+      break
+    }
+  }
+
+  if (!mainEntry) {
+    signale.error('无法找到有效的入口文件，请检查以下路径:')
+    signale.error('  - src/main-native.ts 或 src/main-native.js')
+    signale.error('  - src/main.ts 或 src/main.js')
+    signale.error('  - package.json 中的 main 字段')
+    process.exit(1)
+  }
+
+  const mainEntryPath = path.resolve(projectRoot, mainEntry)
+
+  // 获取 webpack 配置
+  let webpackConfigPath
+  if (args.config) {
+    webpackConfigPath = path.resolve(projectRoot, args.config)
+  } else {
+    webpackConfigPath = path.resolve(__dirname, '../lib/webpack.config.js')
+  }
+
+  // 设置环境变量
+  process.env.NODE_ENV = 'development'
+  process.env.QUICKTVUI_PROJECT_ROOT = projectRoot
+  process.env.QUICKTVUI_MAIN_ENTRY = mainEntryPath
+  process.env.QUICKTVUI_ENTRY_TYPE = entryType
+  process.env.QUICKTVUI_PORT = String(args.port)
+
+  // 检测 OpenSSL 版本
+  const needLegacyProvider = checkOpenSSLVersion(process.versions.openssl)
+  let nodeOptions = ''
+  if (needLegacyProvider) {
+    nodeOptions = '--openssl-legacy-provider'
+    signale.warn(`检测到 OpenSSL ${process.versions.openssl}，已添加 --openssl-legacy-provider`)
+  }
+
+  // 构建 webpack 命令
+  const webpackArgs = ['serve', `--config "${webpackConfigPath}"`, `--port ${args.port}`, '--color']
+
+  const envPrefix = nodeOptions ? `NODE_OPTIONS="${nodeOptions}" ` : ''
+  const webpackCmd = `${envPrefix}npx webpack ${webpackArgs.join(' ')}`
+
+  signale.pending(`执行: ${webpackCmd}`)
+
+  // 如果需要打开浏览器，等待服务器就绪后打开
+  if (args.open) {
+    const url = `http://localhost:${args.port}`
+    waitForServer(url, 30000)
+      .then(() => {
+        openOrRefreshBrowser(url)
+      })
+      .catch((err) => {
+        signale.warn(`自动打开浏览器失败: ${err.message}`)
+      })
+  }
+
+  const result = exec(webpackCmd, { stdio: 'inherit' })
+  if (result.code !== 0) {
+    signale.error('启动开发服务器失败')
+    process.exit(1)
+  }
+}
+
+/**
+ * 等待服务器就绪
+ */
+function waitForServer(url, timeout = 30000) {
+  const http = require('http')
+  const startTime = Date.now()
+
+  return new Promise((resolve, reject) => {
+    function check() {
+      if (Date.now() - startTime > timeout) {
+        reject(new Error('等待服务器超时'))
+        return
+      }
+
+      const req = http.get(url, (res) => {
+        if (res.statusCode === 200 || res.statusCode === 304) {
+          resolve()
+        } else {
+          setTimeout(check, 500)
+        }
+      })
+
+      req.on('error', () => {
+        setTimeout(check, 500)
+      })
+
+      req.setTimeout(1000, () => {
+        req.destroy()
+        setTimeout(check, 500)
+      })
+    }
+
+    check()
+  })
+}
+
+/**
+ * 打开或刷新浏览器（支持 macOS）
+ */
+function openOrRefreshBrowser(url) {
+  const platform = process.platform
+
+  if (platform === 'darwin') {
+    // macOS: 使用 AppleScript 检查并刷新已存在的标签页
+    const appleScript = `
+      tell application "Safari"
+        activate
+        set found to false
+        repeat with w in windows
+          repeat with t in tabs of w
+            if URL of t starts with "http://localhost:" then
+              set URL of t to "${url}"
+              set found to true
+              exit repeat
+            end if
+          end repeat
+          if found then exit repeat
+        end repeat
+        if not found then
+          open location "${url}"
+        end if
+      end tell
+    `
+
+    exec(`osascript -e '${appleScript.replace(/\n/g, ' ')}'`, { silent: true })
+    signale.success('已打开/刷新浏览器')
+  } else {
+    // 其他平台：直接打开 URL
+    const openCmd = platform === 'win32' ? 'start' : 'xdg-open'
+    exec(`${openCmd} "${url}"`, { silent: true })
+    signale.success('已打开浏览器')
+  }
+}
+
+function findProjectRoot(startDir = process.cwd()) {
+  let currentDir = startDir
+  while (currentDir !== path.dirname(currentDir)) {
+    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+      return currentDir
+    }
+    currentDir = path.dirname(currentDir)
+  }
+  return null
+}
+
+function checkOpenSSLVersion(version) {
+  if (!version) return false
+  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version)
+  if (!match) return false
+  return parseInt(match[1], 10) >= 3
+}
+
+main().catch((err) => {
+  signale.error('启动失败:', err)
+  process.exit(1)
+})

package/lib/entry-package.js

@@ -1,16 +1,65 @@
-// @quicktvui/web-cli - web entry (package)
-// 此文件由 CLI 自动加载，使用 @quicktvui/web-renderer 包
-// 主入口路径通过 __QUICKTVUI_MAIN_ENTRY__ 注入
+// @quicktvui/web-cli - web entry
+// 通过 @quicktvui/web-renderer 导入所有依赖
+// 动态加载主入口，确保初始化顺序正确
 
 console.log('[Web Renderer] === Starting initialization ===')
 
-import { initWebRenderer, startWebRenderer } from '@quicktvui/web-renderer'
+import {
+  initAsyncLocalStorage,
+  initAutoProxy,
+  setupSceneBuilder,
+  createWebEngine,
+  applyAllPatches,
+  TVFocusManager,
+  startWebEngine,
+  APP_NAME,
+  IJKPlayerComponent,
+} from '@quicktvui/web-renderer'
 
-initWebRenderer()
+// 初始化 async localStorage
+initAsyncLocalStorage()
 
+// 初始化自动代理
+initAutoProxy()
+
+// 注册 IJKPlayerComponent
+global.__WEB_COMPONENTS__ = global.__WEB_COMPONENTS__ || {}
+global.__WEB_COMPONENTS__['IJKPlayerComponent'] = IJKPlayerComponent
+
+// 设置 SceneBuilder
+setupSceneBuilder()
+
+// 创建 Web 引擎
+const engine = createWebEngine()
+
+// 应用所有补丁
+applyAllPatches(engine)
+
+// 初始化 TV 焦点管理器
+global.__TV_FOCUS_MANAGER__ = new TVFocusManager()
+console.log('[Web Renderer] TVFocusManager initialized')
+
+// 注入全局 CSS
+const styleEl = document.createElement('style')
+styleEl.id = 'web-platform-reset'
+styleEl.textContent = `
+  #app, #app * { align-items: flex-start; }
+  [style*="align-items"] { align-items: var(--align-items, center) !important; }
+`
+document.head.appendChild(styleEl)
+console.log('[Web Renderer] Global CSS reset injected')
+
+// 动态加载主入口，等待加载完成后再启动引擎
 console.log('[Web Renderer] Importing main module...')
 import(__QUICKTVUI_MAIN_ENTRY__)
-
-console.log('[Web Renderer] Starting engine...')
-startWebRenderer()
-console.log('[Web Renderer] === Initialization complete ===')
+  .then(() => {
+    console.log('[Web Renderer] Main module loaded')
+    console.log('[Web Renderer] Starting engine...')
+    startWebEngine(engine, APP_NAME)
+    setTimeout(() => {
+      console.log('[Web Renderer] === Initialization complete ===')
+    }, 1000)
+  })
+  .catch((err) => {
+    console.error('[Web Renderer] Failed to load main module:', err)
+  })

package/lib/webpack.config.js

@@ -9,7 +9,6 @@ const fs = require('fs')
 // 从环境变量获取配置
 const projectRoot = process.env.QUICKTVUI_PROJECT_ROOT || process.cwd()
 const mainEntry = process.env.QUICKTVUI_MAIN_ENTRY || path.resolve(projectRoot, 'src/main.ts')
-const entryType = process.env.QUICKTVUI_ENTRY_TYPE || 'package'
 const port = parseInt(process.env.QUICKTVUI_PORT || '39001', 10)
 
 // 尝试加载项目的 package.json
@@ -67,6 +66,20 @@ function detectModules() {
   if (fs.existsSync(cwdNodeModules) && !modules.includes(cwdNodeModules)) {
     modules.push(cwdNodeModules)
   }
+  // 添加 web-cli 自身的 node_modules 路径（支持全局安装）
+  const cliNodeModules = path.resolve(__dirname, '../node_modules')
+  if (fs.existsSync(cliNodeModules) && !modules.includes(cliNodeModules)) {
+    modules.push(cliNodeModules)
+  }
+  // 添加全局 node_modules 路径
+  try {
+    const globalNodeModules = require('child_process')
+      .execSync('npm root -g', { encoding: 'utf-8' })
+      .trim()
+    if (fs.existsSync(globalNodeModules) && !modules.includes(globalNodeModules)) {
+      modules.push(globalNodeModules)
+    }
+  } catch (e) {}
   return modules
 }
 
@@ -87,21 +100,8 @@ function detectCSSLoader() {
 
 const cssLoader = detectCSSLoader()
 
-// 根据类型选择入口文件
-let entryFiles
-
-if (entryType === 'webmain') {
-  // 直接使用 webMain 作为入口
-  entryFiles = ['regenerator-runtime/runtime', mainEntry]
-} else if (entryType === 'local') {
-  // 使用 entry-local.js + main 入口
-  const entryLocalFile = path.resolve(__dirname, 'entry-local.js')
-  entryFiles = ['regenerator-runtime/runtime', entryLocalFile, mainEntry]
-} else {
-  // 使用 entry-package.js + main 入口
-  const entryPackageFile = path.resolve(__dirname, 'entry-package.js')
-  entryFiles = ['regenerator-runtime/runtime', entryPackageFile, mainEntry]
-}
+// 入口文件
+const entryPackageFile = path.resolve(__dirname, 'entry-package.js')
 
 module.exports = {
   mode: 'development',
@@ -110,7 +110,6 @@ module.exports = {
   devServer: {
     port,
     hot: true,
-    liveReload: true,
     proxy: [
       {
         context: ['/proxy'],
@@ -138,26 +137,21 @@ module.exports = {
         },
       },
     ],
-    static: {
-      directory: path.join(projectRoot, 'public'),
-      publicPath: '/',
-    },
     client: {
       overlay: { errors: true, warnings: false },
     },
   },
 
   watchOptions: {
-    aggregateTimeout: 1500,
-    poll: 1000,
+    aggregateTimeout: 300,
     ignored: /node_modules/,
   },
 
-  devtool: 'source-map',
+  devtool: 'eval-cheap-module-source-map',
 
-  // 多入口配置：先加载初始化代码，再加载主入口
+  // 入口配置：支持 HMR
   entry: {
-    index: entryFiles,
+    index: ['regenerator-runtime/runtime', entryPackageFile],
   },
 
   output: {
@@ -175,28 +169,10 @@ module.exports = {
       template: path.resolve(__dirname, '../templates/web-renderer.html'),
       title: pkg.name || 'QuickTVUI Web',
     }),
-    // 注入主入口路径和项目根目录，以及预计算的模块路径
+    // 注入主入口路径和环境变量
     new (require('webpack').DefinePlugin)({
       __QUICKTVUI_PROJECT_ROOT__: JSON.stringify(projectRoot),
       __QUICKTVUI_MAIN_ENTRY__: JSON.stringify(mainEntry),
-      // 预计算 src/web 模块路径（浏览器环境无法使用 path 模块）
-      __QUICKTVUI_MODULE_ASYNC_LOCAL_STORAGE__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/asyncLocalStorage')
-      ),
-      __QUICKTVUI_MODULE_AUTO_PROXY__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/autoProxy')
-      ),
-      __QUICKTVUI_MODULE_SCENE_BUILDER__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/SceneBuilder')
-      ),
-      __QUICKTVUI_MODULE_WEB_ENGINE__: JSON.stringify(path.join(projectRoot, 'src/web')),
-      __QUICKTVUI_MODULE_PATCHES__: JSON.stringify(path.join(projectRoot, 'src/web/core/patches')),
-      __QUICKTVUI_MODULE_TV_FOCUS_MANAGER__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/TVFocusManager')
-      ),
-      __QUICKTVUI_MODULE_PAGE_LIFECYCLE__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/pageLifecycle')
-      ),
       process: JSON.stringify({
         env: { NODE_ENV: 'development' },
         browser: true,
@@ -216,7 +192,10 @@ module.exports = {
         use: [
           {
             loader: 'vue-loader',
-            options: { compilerOptions: { whitespace: 'condense' } },
+            options: { 
+              compilerOptions: { whitespace: 'condense' },
+              hotReload: true,
+            },
           },
           'scope-loader',
         ],
@@ -296,11 +275,6 @@ module.exports = {
 
   performance: { hints: false },
 
-  // 忽略 entry-local.js 中动态 require 的警告（这是预期行为）
+  // 忽略动态 require 的警告
   ignoreWarnings: [/Critical dependency: the request of a dependency is an expression/],
-
-  cache: {
-    type: 'filesystem',
-    buildDependencies: { config: [__filename] },
-  },
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@quicktvui/web-cli",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "description": "CLI tool for QuickTVUI web development - zero configuration",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",
   "bin": {
-    "qt-web-dev": "./bin/qt-web-dev.js"
+    "qt-web-cli": "./bin/qt-web-cli.js"
   },
   "main": "lib/index.js",
   "files": [
@@ -23,27 +23,34 @@
   "dependencies": {
     "minimist": "^1.2.8",
     "shelljs": "^0.10.0",
-    "signale": "^1.4.0"
-  },
-  "peerDependencies": {
-    "webpack": "^5.0.0",
-    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.0.0",
+    "signale": "^1.4.0",
+    "@quicktvui/web-renderer": "^1.0.6",
+    "scope-loader": "^1.0.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.0",
+    "webpack-dev-server": "^4.15.0",
     "vue-loader": "^17.0.0",
-    "html-webpack-plugin": "^5.0.0",
-    "@babel/core": "^7.0.0",
-    "babel-loader": "^9.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "@babel/core": "^7.23.0",
+    "babel-loader": "^9.1.0",
     "ts-loader": "^9.4.0",
-    "css-loader": "^6.0.0",
-    "@extscreen/es3-router": ">=3.0.1"
+    "regenerator-runtime": "^0.14.0"
   },
   "peerDependenciesMeta": {
-    "less-loader": { "optional": true },
-    "sass-loader": { "optional": true },
-    "sass": { "optional": true },
-    "less": { "optional": true }
+    "less-loader": {
+      "optional": true
+    },
+    "sass-loader": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "less": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

package/bin/qt-web-dev.js

@@ -1,160 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * QuickTVUI Web Dev CLI
- * 启动 web 开发服务器，无需手动配置入口文件
- */
-
-const path = require('path')
-const fs = require('fs')
-const signale = require('signale')
-const minimist = require('minimist')
-const { exec } = require('shelljs')
-
-// 解析命令行参数
-const args = minimist(process.argv.slice(2), {
-  string: ['port', 'config'],
-  boolean: ['help', 'open'],
-  alias: {
-    p: 'port',
-    c: 'config',
-    h: 'help',
-    o: 'open',
-  },
-  default: {
-    port: 39001,
-    open: false,
-  },
-})
-
-// 显示帮助信息
-if (args.help) {
-  console.log(`
-QuickTVUI Web Dev CLI
-
-Usage:
-  qt-web-dev [options]
-
-Options:
-  -p, --port <port>     开发服务器端口 (默认: 39001)
-  -c, --config <path>   自定义 webpack 配置文件路径
-  -o, --open            自动打开浏览器
-  -h, --help            显示帮助信息
-
-Examples:
-  qt-web-dev
-  qt-web-dev --port 8080
-  qt-web-dev --config ./my.webpack.js
-
-特点:
-  - 自动检测项目入口，优先使用 webMain
-  - 若无 webMain，自动使用 src/web 或 @quicktvui/web-renderer 包
-  - 零配置启动 web 开发服务器
-  `)
-  process.exit(0)
-}
-
-async function main() {
-  signale.pending('正在启动 QuickTVUI Web 开发服务器...')
-
-  // 查找项目根目录
-  const projectRoot = findProjectRoot()
-  if (!projectRoot) {
-    signale.error('无法找到项目根目录')
-    process.exit(1)
-  }
-
-  signale.info(`项目根目录: ${projectRoot}`)
-
-  // 读取 package.json
-  let pkg = {}
-  try {
-    pkg = require(path.join(projectRoot, 'package.json'))
-  } catch (e) {}
-
-  // 检测入口文件
-  let mainEntry
-  let entryType
-
-  if (pkg.webMain) {
-    // 项目已有 webMain，直接使用
-    mainEntry = pkg.webMain
-    entryType = 'webmain'
-    signale.info(`主入口: ${mainEntry} (webMain)`)
-  } else if (fs.existsSync(path.join(projectRoot, 'src/web/index.js'))) {
-    // 有 src/web 目录，使用 entry-local.js 包装 main
-    mainEntry = pkg.main || './src/main.ts'
-    entryType = 'local'
-    signale.info(`主入口: ${mainEntry}`)
-    signale.info(`Web 渲染器: src/web (本地)`)
-  } else {
-    // 使用 @quicktvui/web-renderer 包
-    mainEntry = pkg.main || './src/main.ts'
-    entryType = 'package'
-    signale.info(`主入口: ${mainEntry}`)
-    signale.info(`Web 渲染器: @quicktvui/web-renderer (包)`)
-  }
-
-  const mainEntryPath = path.resolve(projectRoot, mainEntry)
-
-  // 获取 webpack 配置
-  let webpackConfigPath
-  if (args.config) {
-    webpackConfigPath = path.resolve(projectRoot, args.config)
-  } else {
-    webpackConfigPath = path.resolve(__dirname, '../lib/webpack.config.js')
-  }
-
-  // 设置环境变量
-  process.env.NODE_ENV = 'development'
-  process.env.QUICKTVUI_PROJECT_ROOT = projectRoot
-  process.env.QUICKTVUI_MAIN_ENTRY = mainEntryPath
-  process.env.QUICKTVUI_ENTRY_TYPE = entryType
-  process.env.QUICKTVUI_PORT = String(args.port)
-
-  // 检测 OpenSSL 版本
-  const needLegacyProvider = checkOpenSSLVersion(process.versions.openssl)
-  let nodeOptions = ''
-  if (needLegacyProvider) {
-    nodeOptions = '--openssl-legacy-provider'
-    signale.warn(`检测到 OpenSSL ${process.versions.openssl}，已添加 --openssl-legacy-provider`)
-  }
-
-  // 构建 webpack 命令
-  const webpackArgs = ['serve', `--config "${webpackConfigPath}"`, `--port ${args.port}`, '--color']
-  if (args.open) webpackArgs.push('--open')
-
-  const envPrefix = nodeOptions ? `NODE_OPTIONS="${nodeOptions}" ` : ''
-  const webpackCmd = `${envPrefix}npx webpack ${webpackArgs.join(' ')}`
-
-  signale.pending(`执行: ${webpackCmd}`)
-
-  const result = exec(webpackCmd, { stdio: 'inherit' })
-  if (result.code !== 0) {
-    signale.error('启动开发服务器失败')
-    process.exit(1)
-  }
-}
-
-function findProjectRoot(startDir = process.cwd()) {
-  let currentDir = startDir
-  while (currentDir !== path.dirname(currentDir)) {
-    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
-      return currentDir
-    }
-    currentDir = path.dirname(currentDir)
-  }
-  return null
-}
-
-function checkOpenSSLVersion(version) {
-  if (!version) return false
-  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version)
-  if (!match) return false
-  return parseInt(match[1], 10) >= 3
-}
-
-main().catch((err) => {
-  signale.error('启动失败:', err)
-  process.exit(1)
-})