@quicktvui/web-cli 1.0.8 → 2.1.0

package/lib/DevServer.js

@@ -0,0 +1,586 @@
+/**
+ * DevServer - 轻量静态开发服务器
+ *
+ * 职责：
+ *   1. 托管项目的 dist/dev/ 目录（bundle 文件 + assets）
+ *   2. 托管 web-runtime 的编译产物（JS 运行时）
+ *   3. 提供 dev-renderer HTML 页面（注入 bundle 路径 + 引入 web-runtime JS）
+ *   4. SSE 热更新端点
+ *   5. 保留 /proxy/ 代理功能
+ *   6. CORS 支持
+ */
+
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+const url = require('url')
+const { execSync } = require('child_process')
+const signale = require('signale')
+
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.mjs': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.mp3': 'audio/mpeg',
+  '.mp4': 'video/mp4',
+  '.wav': 'audio/wav',
+  '.map': 'application/json',
+  '.bundle': 'application/javascript; charset=utf-8',
+  '.txt': 'text/plain; charset=utf-8',
+}
+
+class DevServer {
+  constructor(projectRoot, options = {}) {
+    this.projectRoot = projectRoot
+    this.port = options.port || 39001
+    this.distDir = path.join(projectRoot, 'dist', 'dev')
+    this.hotReloader = options.hotReloader || null
+    this.bundleUrlPath = options.bundleUrlPath || '/dist/dev/index.bundle'
+    this.server = null
+    this.templateHtml = null
+    this.corsOrigin = options.corsOrigin || '*'
+
+    // web-runtime 的 dist 目录
+    this.webRuntimeDistDir = this._findWebRuntimeDist()
+    this.webRuntimeScripts = [] // 扫描到的 JS 文件名列表
+
+    // 加载 HTML 模板
+    this._loadTemplate()
+
+    // 扫描 web-runtime 的 JS 文件
+    this._scanWebRuntimeScripts()
+  }
+
+  /**
+   * 查找 web-runtime 的 dist 目录
+   */
+  _findWebRuntimeDist() {
+    const candidates = [
+      // 同级 packages 目录
+      path.resolve(__dirname, '../../web-runtime/dist'),
+      // node_modules 中的包
+      path.join(this.projectRoot, 'node_modules/@quicktvui/web-runtime/dist'),
+    ]
+    for (const dir of candidates) {
+      if (fs.existsSync(dir)) {
+        signale.info(`找到 web-runtime: ${dir}`)
+        return dir
+      }
+    }
+    signale.warn('未找到 web-runtime dist 目录，bundle 加载功能将不可用')
+    return null
+  }
+
+  /**
+   * 扫描 web-runtime/dist 下的 JS 文件
+   * 只引入主入口 JS（以 web-runtime. 开头），异步 chunk 由 webpack 自动加载
+   */
+  _scanWebRuntimeScripts() {
+    if (!this.webRuntimeDistDir) return
+
+    try {
+      const files = fs.readdirSync(this.webRuntimeDistDir)
+      const jsFiles = files.filter((f) => f.endsWith('.js') && !f.endsWith('.LICENSE.txt'))
+      // 找到主入口：文件名以 web-runtime. 开头且文件最大（主 bundle）
+      // 异步 chunk 文件较小，由 webpack runtime 自动按需加载
+      const mainEntry = jsFiles
+        .filter((f) => f.startsWith('web-runtime.'))
+        .sort((a, b) => {
+          // 按文件大小降序，最大的就是主入口
+          const sizeA = fs.statSync(path.join(this.webRuntimeDistDir, a)).size
+          const sizeB = fs.statSync(path.join(this.webRuntimeDistDir, b)).size
+          return sizeB - sizeA
+        })
+
+      // 取最大的一个作为主入口
+      if (mainEntry.length > 0) {
+        this.webRuntimeScripts = [mainEntry[0]]
+      } else {
+        // 回退：全部引入
+        this.webRuntimeScripts = jsFiles
+      }
+      signale.info(`web-runtime 主入口: ${this.webRuntimeScripts.join(', ')}`)
+    } catch (e) {
+      signale.warn('扫描 web-runtime 脚本失败:', e.message)
+    }
+  }
+
+  /**
+   * 加载 HTML 模板
+   */
+  _loadTemplate() {
+    const templatePath = path.resolve(__dirname, '../templates/dev-renderer.html')
+    if (fs.existsSync(templatePath)) {
+      this.templateHtml = fs.readFileSync(templatePath, 'utf-8')
+    } else {
+      this.templateHtml = this._getInlineTemplate()
+    }
+  }
+
+  /**
+   * 更新 bundle URL 路径
+   */
+  setBundleUrlPath(bundleUrlPath) {
+    this.bundleUrlPath = bundleUrlPath
+  }
+
+  /**
+   * 启动服务器
+   */
+  async start() {
+    // 先用端口绑定检测端口是否被占用（最可靠的方式）
+    const portAvailable = await this._isPortAvailable(this.port)
+    if (!portAvailable) {
+      // 端口被占用，尝试获取占用进程信息
+      const processInfo = this._getPortProcessInfo(this.port)
+      signale.warn(`端口 ${this.port} 已被占用`)
+      const killed = await this._promptKillPort(this.port, processInfo)
+      if (!killed) {
+        throw new Error(`端口 ${this.port} 已被占用，请使用 --port 指定其他端口`)
+      }
+    }
+
+    return new Promise((resolve, reject) => {
+      this.server = http.createServer((req, res) => this._handleRequest(req, res))
+
+      this.server.on('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+          signale.error(`端口 ${this.port} 已被占用，请使用 --port 指定其他端口`)
+          reject(err)
+        } else {
+          signale.error('服务器错误:', err.message)
+          reject(err)
+        }
+      })
+
+      this.server.listen(this.port, () => {
+        resolve()
+      })
+    })
+  }
+
+  /**
+   * 通过尝试绑定端口来检测是否可用（最可靠的方式）
+   */
+  _isPortAvailable(port) {
+    return new Promise((resolve) => {
+      const tester = require('net').createServer()
+      tester.once('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+          resolve(false)
+        } else {
+          resolve(false)
+        }
+      })
+      tester.once('listening', () => {
+        tester.close()
+        resolve(true)
+      })
+      tester.listen(port)
+    })
+  }
+
+  /**
+   * 获取占用端口的进程信息（用于提示用户）
+   * 返回 { pid, name } 或 null
+   */
+  _getPortProcessInfo(port) {
+    try {
+      const isWindows = process.platform === 'win32'
+      let cmd
+      if (isWindows) {
+        cmd = `netstat -ano | findstr :${port} | findstr LISTENING`
+      } else {
+        // macOS/Linux: lsof 不加 -sTCP:LISTEN 以提高兼容性
+        cmd = `lsof -i :${port} -P -n -t 2>/dev/null`
+      }
+      const result = execSync(cmd, { encoding: 'utf-8', timeout: 5000 }).trim()
+      if (!result) return null
+
+      if (isWindows) {
+        const match = result.match(/LISTENING\s+(\d+)/)
+        return match ? { pid: match[1], name: '' } : null
+      } else {
+        // lsof -t 只输出 PID
+        const pid = result.split('\n')[0].trim()
+        if (!pid) return null
+        // 再用 ps 获取进程名
+        let name = ''
+        try {
+          name = execSync(`ps -p ${pid} -o comm= 2>/dev/null`, { encoding: 'utf-8' }).trim()
+        } catch (e) {
+          /* ignore */
+        }
+        return { pid, name: name || 'unknown' }
+      }
+    } catch (e) {
+      return null
+    }
+  }
+
+  /**
+   * 提示用户是否杀掉占用端口的进程
+   * 使用 readline 模块读取用户输入
+   * 返回 true 表示已杀掉，false 表示用户拒绝
+   */
+  _promptKillPort(port, processInfo) {
+    return new Promise((resolve) => {
+      let pidInfo
+      if (processInfo && processInfo.pid) {
+        pidInfo = processInfo.name
+          ? `PID: ${processInfo.pid} (${processInfo.name})`
+          : `PID: ${processInfo.pid}`
+      } else {
+        pidInfo = '无法获取进程信息'
+      }
+
+      console.log('')
+      signale.warn(`端口 ${port} 被以下进程占用: ${pidInfo}`)
+      process.stdout.write(`  是否杀掉该进程并继续? [y/N] `)
+
+      // 使用 readline 从 stdin 读取一行输入
+      const readline = require('readline')
+      const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+      })
+
+      // 设置超时 30 秒
+      const timeout = setTimeout(() => {
+        rl.close()
+        signale.error('等待用户输入超时，请手动关闭占用端口的进程')
+        resolve(false)
+      }, 30000)
+
+      rl.question('', (answer) => {
+        clearTimeout(timeout)
+        rl.close()
+        const confirmed = (answer || '').trim().toLowerCase() === 'y'
+        console.log('') // 换行
+
+        if (confirmed) {
+          if (!processInfo || !processInfo.pid) {
+            signale.error('无法获取占用端口的进程 PID，请手动查找并关闭')
+            resolve(false)
+            return
+          }
+          try {
+            const isWindows = process.platform === 'win32'
+            if (isWindows) {
+              execSync(`taskkill /PID ${processInfo.pid} /F`, { encoding: 'utf-8' })
+            } else {
+              execSync(`kill -9 ${processInfo.pid}`, { encoding: 'utf-8' })
+            }
+            signale.success(`已杀掉进程 ${processInfo.pid}`)
+            // 等待端口释放
+            setTimeout(() => resolve(true), 500)
+          } catch (e) {
+            signale.error(`杀掉进程失败: ${e.message}`)
+            resolve(false)
+          }
+        } else {
+          signale.info('已取消')
+          resolve(false)
+        }
+      })
+    })
+  }
+
+  /**
+   * 停止服务器
+   */
+  stop() {
+    if (this.server) {
+      this.server.close()
+      this.server = null
+    }
+    if (this.hotReloader) {
+      this.hotReloader.close()
+    }
+  }
+
+  /**
+   * 处理 HTTP 请求
+   */
+  _handleRequest(req, res) {
+    const parsedUrl = url.parse(req.url, true)
+    const pathname = decodeURIComponent(parsedUrl.pathname)
+
+    // CORS 预检
+    if (req.method === 'OPTIONS') {
+      this._setCORSHeaders(res)
+      res.writeHead(204)
+      res.end()
+      return
+    }
+
+    // SSE 端点
+    if (pathname === '/sse' && this.hotReloader) {
+      this.hotReloader.handleSSE(req, res)
+      return
+    }
+
+    // 根路径 - 返回 HTML 页面
+    if (pathname === '/' || pathname === '/index.html') {
+      this._serveHtml(req, res, parsedUrl)
+      return
+    }
+
+    // web-runtime 的 JS 文件 - 映射到 web-runtime/dist/
+    if (pathname.startsWith('/web-runtime/')) {
+      const relativePath = pathname.replace('/web-runtime/', '')
+      if (this.webRuntimeDistDir) {
+        const filePath = path.join(this.webRuntimeDistDir, relativePath)
+        this._serveStaticFile(res, filePath, this.webRuntimeDistDir)
+      } else {
+        res.writeHead(404, { 'Content-Type': 'text/plain' })
+        res.end('web-runtime not found')
+      }
+      return
+    }
+
+    // dist/dev/ 下的文件 - 映射到项目的 dist/dev 目录
+    if (pathname.startsWith('/dist/dev/')) {
+      const relativePath = pathname.replace('/dist/dev/', '')
+      const filePath = path.join(this.distDir, relativePath)
+      this._serveStaticFile(res, filePath, this.distDir)
+      return
+    }
+
+    // assets/ 下的文件 - 映射到 dist/dev/assets/
+    if (pathname.startsWith('/assets/')) {
+      const relativePath = pathname.replace('/assets/', '')
+      const filePath = path.join(this.distDir, 'assets', relativePath)
+      this._serveStaticFile(res, filePath, this.distDir)
+      return
+    }
+
+    // bundles-dev/ 下的文件 - 映射到 dist/dev/ (兼容 web-runtime 的路径约定)
+    if (pathname.startsWith('/bundles-dev/')) {
+      const relativePath = pathname.replace('/bundles-dev/', '')
+      const filePath = path.join(this.distDir, relativePath)
+      this._serveStaticFile(res, filePath, this.distDir)
+      return
+    }
+
+    // proxy 代理
+    if (pathname.startsWith('/proxy/')) {
+      this._handleProxy(req, res, pathname)
+      return
+    }
+
+    // web-runtime 的异步 chunk 文件（webpack 会从 publicPath='/' 加载）
+    // 匹配 /web-runtime.xxx.js 模式
+    if (pathname.match(/^\/web-runtime\.[\w.]+\.js$/)) {
+      const filename = pathname.substring(1) // 去掉前导 /
+      if (this.webRuntimeDistDir) {
+        const filePath = path.join(this.webRuntimeDistDir, filename)
+        this._serveStaticFile(res, filePath, this.webRuntimeDistDir)
+      } else {
+        res.writeHead(404, { 'Content-Type': 'text/plain' })
+        res.end('web-runtime not found')
+      }
+      return
+    }
+
+    // 404
+    res.writeHead(404, { 'Content-Type': 'text/plain' })
+    res.end('Not Found')
+  }
+
+  /**
+   * 提供 HTML 页面
+   * 渲染 dev-renderer.html 模板，注入 web-runtime script 标签和 bundle 路径
+   */
+  _serveHtml(req, res, parsedUrl) {
+    // 从 URL 参数获取 bundle 路径，或使用默认值
+    const bundleParam = parsedUrl.query.bundle
+    const bundlePath = bundleParam || this.bundleUrlPath
+    const watch = parsedUrl.query.watch !== 'false' ? 'true' : 'false'
+
+    let html = this.templateHtml
+
+    // 替换模板变量
+    html = html.replace(/\{\{BUNDLE_PATH\}\}/g, bundlePath)
+    html = html.replace(/\{\{WATCH_ENABLED\}\}/g, watch)
+    html = html.replace(/\{\{SSE_ENDPOINT\}\}/g, '/sse')
+
+    // 注入 web-runtime 的 script 标签
+    // 替换 {{WEB_RUNTIME_SCRIPTS}} 占位符
+    let scriptTags = ''
+    if (this.webRuntimeScripts.length > 0) {
+      scriptTags = this.webRuntimeScripts
+        .map((s) => `<script src="/web-runtime/${s}"></script>`)
+        .join('\n')
+    }
+    html = html.replace(/\{\{WEB_RUNTIME_SCRIPTS\}\}/g, scriptTags)
+
+    res.writeHead(200, {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store, no-cache, must-revalidate',
+    })
+    res.end(html)
+  }
+
+  /**
+   * 提供静态文件
+   * @param {http.ServerResponse} res
+   * @param {string} filePath - 文件绝对路径
+   * @param {string} allowedDir - 允许的根目录（安全检查）
+   */
+  _serveStaticFile(res, filePath, allowedDir) {
+    // 安全检查：防止路径遍历
+    const resolvedPath = path.resolve(filePath)
+    const allowedRoot = path.resolve(allowedDir || this.distDir)
+    if (!resolvedPath.startsWith(allowedRoot)) {
+      res.writeHead(403, { 'Content-Type': 'text/plain' })
+      res.end('Forbidden')
+      return
+    }
+
+    if (!fs.existsSync(resolvedPath)) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' })
+      res.end('Not Found')
+      return
+    }
+
+    const stat = fs.statSync(resolvedPath)
+    if (stat.isDirectory()) {
+      res.writeHead(403, { 'Content-Type': 'text/plain' })
+      res.end('Directory listing not allowed')
+      return
+    }
+
+    const ext = path.extname(resolvedPath).toLowerCase()
+    const contentType = MIME_TYPES[ext] || 'application/octet-stream'
+
+    res.writeHead(200, {
+      'Content-Type': contentType,
+      'Cache-Control': 'no-store, no-cache, must-revalidate',
+      'Access-Control-Allow-Origin': this.corsOrigin,
+    })
+
+    const readStream = fs.createReadStream(resolvedPath)
+    readStream.pipe(res)
+  }
+
+  /**
+   * 处理代理请求
+   */
+  _handleProxy(req, res, pathname) {
+    // /proxy/https/example.com/path → https://example.com/path
+    const match = pathname.match(/^\/proxy\/(https?)\/([^/]+)(\/.*)?$/)
+    if (!match) {
+      res.writeHead(400, { 'Content-Type': 'text/plain' })
+      res.end('Invalid proxy URL format. Use: /proxy/{http|https}/{host}/{path}')
+      return
+    }
+
+    const protocol = match[1]
+    const host = match[2]
+    const proxyPath = match[3] || '/'
+
+    const options = {
+      hostname: host,
+      port: protocol === 'https' ? 443 : 80,
+      path: proxyPath,
+      method: req.method,
+      headers: {
+        ...req.headers,
+        host: host,
+      },
+    }
+
+    const httpModule = protocol === 'https' ? require('https') : require('http')
+    const proxyReq = httpModule.request(options, (proxyRes) => {
+      res.writeHead(proxyRes.statusCode, proxyRes.headers)
+      proxyRes.pipe(res)
+    })
+
+    proxyReq.on('error', (err) => {
+      res.writeHead(502, { 'Content-Type': 'text/plain' })
+      res.end(`Proxy error: ${err.message}`)
+    })
+
+    req.pipe(proxyReq)
+  }
+
+  /**
+   * 设置 CORS 头
+   */
+  _setCORSHeaders(res) {
+    res.setHeader('Access-Control-Allow-Origin', this.corsOrigin)
+    res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS')
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
+  }
+
+  /**
+   * 内联 HTML 模板（备用）
+   */
+  _getInlineTemplate() {
+    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>QuickTVUI Web Dev</title>
+  <script>
+    var TV_WIDTH = 1920;
+    var TV_HEIGHT = 1080;
+    var _originalInnerWidth = window.innerWidth;
+    var _originalInnerHeight = window.innerHeight;
+    Object.defineProperty(window, 'innerWidth', { get: function() { return TV_WIDTH; }, configurable: true });
+    Object.defineProperty(window, 'innerHeight', { get: function() { return TV_HEIGHT; }, configurable: true });
+    Object.defineProperty(window, 'devicePixelRatio', { get: function() { return 1; }, configurable: true });
+    window.__BUNDLE_CONFIG__ = {
+      entry: '{{BUNDLE_PATH}}',
+      watch: {{WATCH_ENABLED}},
+      sseEndpoint: '{{SSE_ENDPOINT}}'
+    };
+  </script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background-color: #1a1a1a; }
+    #main-container { width: 1920px; height: 1080px; position: absolute; top: 0; left: 0; background-color: #26292F; visibility: hidden; }
+    #app { width: 1920px !important; height: 1080px !important; background-color: #26292F; }
+    #app > * { width: 1920px !important; height: 1080px !important; position: relative !important; overflow: hidden !important; }
+  </style>
+</head>
+<body>
+  <div id="main-container"><div id="app"></div></div>
+  {{WEB_RUNTIME_SCRIPTS}}
+  <script>
+    function scaleApp() {
+      var c = document.getElementById('main-container');
+      if (c) {
+        var sx = _originalInnerWidth / TV_WIDTH;
+        var sy = _originalInnerHeight / TV_HEIGHT;
+        var s = Math.min(sx, sy);
+        c.style.transformOrigin = 'top left';
+        c.style.transform = 'scale(' + s + ')';
+        c.style.marginLeft = ((_originalInnerWidth - TV_WIDTH * s) / 2) + 'px';
+        c.style.marginTop = ((_originalInnerHeight - TV_HEIGHT * s) / 2) + 'px';
+        c.style.visibility = 'visible';
+      }
+    }
+    scaleApp();
+    window.addEventListener('resize', scaleApp);
+  </script>
+</body>
+</html>`
+  }
+}
+
+module.exports = DevServer