@ttmg/cli 0.0.3-beta.5 → 0.0.3-beta.6

package/dist/index.js

@@ -18,7 +18,6 @@ var semver = require('semver');
 var handlebars = require('handlebars');
 var esbuild = require('esbuild');
 var archiver = require('archiver');
-var multer = require('multer');
 var WebSocket = require('ws');
 var glob = require('glob');
 var got = require('got');
@@ -204,6 +203,7 @@ async function openUrl(url) {
                 '--remote-allow-origins=*',
                 '--user-data-dir=/tmp/chrome-debug-profile',
                 '--disable-popup-blocking',
+                '--force-dark-mode=off',
             ],
         });
         await new Promise(() => { });
@@ -639,73 +639,27 @@ function getOutputDir() {
     return path.join(os.homedir(), '__TTMG__', clientKey);
 }
 
-class Store {
-    constructor(initialState) {
-        this.listeners = [];
-        this.state = initialState;
-    }
-    // 获取单例实例
-    static getInstance(initialState) {
-        if (!Store.instance) {
-            Store.instance = new Store(initialState);
-        }
-        return Store.instance;
-    }
-    // 获取状态
-    getState() {
-        return this.state;
-    }
-    // 设置状态
-    setState(newState) {
-        this.state = { ...this.state, ...newState };
-        this.listeners.forEach(listener => listener(this.state));
-    }
-    // 订阅状态变化
-    subscribe(listener) {
-        this.listeners.push(listener);
-        return () => {
-            this.listeners = this.listeners.filter(l => l !== listener);
-        };
-    }
-    // 重置状态
-    reset(newState) {
-        this.state = newState;
-        this.listeners.forEach(listener => listener(this.state));
-    }
-}
-const store = Store.getInstance({
-    clientServerPort: '',
-    clientServerHost: '',
-    clientKey: '',
-    packages: {},
-});
-
 const DEV_PORT = 9528;
 const DEV_WS_PORT = 9529;
 const OUTPUT_DIR = path.join(os.homedir(), '__TTMG__');
 
-function getSessionId({ clientWsPort }) {
-    const config = {
-        ws_port: DEV_WS_PORT,
-        nodeWsPort: DEV_WS_PORT,
-        // http_port: DEV_PORT,
-        clientWsPort,
-    };
-    return btoa(JSON.stringify(config));
-}
-
-/**
- * 把我的调试相关的数据，生成 base64 字符串
- */
 let server;
 async function createServer() {
     if (server) {
         closeServer();
     }
+    const publicPath = path.join(__dirname, 'public');
     const app = express();
-    const port = DEV_PORT; // 你可以自定义端口
-    const upload = multer({ dest: os.tmpdir() }); // 上传到 uploads 目录
-    // 解析 JSON body
+    /**
+     * 支持跨域请求
+     */
+    app.use((req, res, next) => {
+        res.header('Access-Control-Allow-Origin', '*');
+        res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+        res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+        next();
+    });
+    const port = DEV_PORT;
     app.use(express.json());
     // 解析 FormData body
     app.use(express.urlencoded({ extended: true }));
@@ -713,6 +667,10 @@ async function createServer() {
      * 支持文件访问
      */
     const outputDir = getOutputDir();
+    /**
+     *
+     */
+    app.use(express.static(publicPath));
     /**
      * 支持静态资源
      */
@@ -720,42 +678,11 @@ async function createServer() {
     app.get('/game/qrcode', async (req, res) => {
         res.sendFile(path.join(OUTPUT_DIR, `dev-qrcode.png`));
     });
-    /**
-     * 支持文件访问
-     */
-    /**
-     * TODO: 提供的接口供客户端进行调用，告诉 NodeServer 客户端的 host 和 port
-     */
-    app.post('/game/env', async (req, res) => {
-        // 获取请求体
-        const body = req.body;
-        const { host, port, wsPort } = body;
-        store.setState({
-            clientServerPort: port,
-            clientServerHost: host,
-        });
-        // 响应内容（可以根据实际业务返回需要的数据）
-        const devUrl = `http://${host}:${port}?session=${getSessionId({ clientWsPort: wsPort })}`;
-        openUrl(devUrl);
-        console.log(chalk.bold.yellow(`Game debug is ready! Visit ${devUrl} in your browser.`));
-        res.json({
-            code: 0,
-            msg: 'ok',
-            data: {
-                devUrl,
-            },
-        });
+    app.get('/game/config', async (req, res) => {
+        res.send({ nodeWsPort: DEV_WS_PORT });
     });
-    app.post('/game/upload', upload.single('file'), async (req, res) => {
-        // 文件信息在 req.file
-        res.json({
-            code: 0,
-            msg: 'ok',
-            filename: req.file.filename, // multer生成的临时文件名
-            originalname: req.file.originalname, // 上传时的原始文件名
-            size: req.file.size,
-            path: req.file.path,
-        });
+    app.get('*', (req, res) => {
+        res.sendFile(path.join(publicPath, 'index.html'));
     });
     // 启动服务
     server = app.listen(port, () => {
@@ -774,11 +701,54 @@ function closeServer() {
     });
 }
 
+class Store {
+    constructor(initialState) {
+        this.listeners = [];
+        this.state = initialState;
+    }
+    // 获取单例实例
+    static getInstance(initialState) {
+        if (!Store.instance) {
+            Store.instance = new Store(initialState);
+        }
+        return Store.instance;
+    }
+    // 获取状态
+    getState() {
+        return this.state;
+    }
+    // 设置状态
+    setState(newState) {
+        this.state = { ...this.state, ...newState };
+        this.listeners.forEach(listener => listener(this.state));
+    }
+    // 订阅状态变化
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            this.listeners = this.listeners.filter(l => l !== listener);
+        };
+    }
+    // 重置状态
+    reset(newState) {
+        this.state = newState;
+        this.listeners.forEach(listener => listener(this.state));
+    }
+}
+const store = Store.getInstance({
+    clientHost: '',
+    clientHttpPort: '',
+    clientWsPort: '',
+    clientWsHost: '',
+    clientKey: '',
+    packages: {},
+});
+
 async function uploadGame(callback) {
     const outputDir = getOutputDir();
     callback({
         status: 'start',
-        percent: '0%',
+        percent: 0,
     });
     console.log(chalk.yellow.bold('Start compress game resource'));
     const zipPath = path.join(os.homedir(), '__TTMG__', 'upload.zip');
@@ -786,31 +756,59 @@ async function uploadGame(callback) {
     console.log(chalk.green.bold('Compress game package resource success \n'));
     await uploadZip(zipPath, callback);
 }
+/**
+ * 复制源目录内容到临时目录，然后根据 glob 模式过滤并压缩文件。
+ * 原始目录保持不变。
+ *
+ * @param sourceDir - 要压缩的源文件夹路径。
+ * @param outPath - 输出的 zip 文件路径。
+ */
 async function zipDirectory(sourceDir, outPath) {
-    const output = fs.createWriteStream(outPath);
-    const archive = archiver('zip', { zlib: { level: 9 } });
-    // eslint-disable-next-line no-async-promise-executor
-    return new Promise(async (resolve, reject) => {
-        output.on('close', () => resolve());
-        output.on('error', err => reject(err));
-        archive.on('error', err => reject(err));
-        archive.pipe(output);
-        try {
-            // 注意这里用 await glob.glob
-            const files = await glob__namespace.glob('**/*', {
-                cwd: sourceDir,
-                nodir: true,
-                ignore: '**/*.js.map',
-            });
-            files.forEach(file => {
-                archive.file(path.join(sourceDir, file), { name: file });
+    // 1. 创建一个唯一的临时目录
+    // fsp 现在是 fs.promises 的别名
+    const tempDir = await fs.promises.mkdtemp(path.join(os.tmpdir(), 'zip-temp-'));
+    try {
+        // 2. 将源目录的所有内容复制到临时目录
+        await fs.promises.cp(sourceDir, tempDir, { recursive: true });
+        // 3. 对临时目录进行压缩
+        const output = fs.createWriteStream(outPath);
+        const archive = archiver('zip', { zlib: { level: 9 } });
+        // 使用 Promise 包装流操作
+        const archivePromise = new Promise((resolve, reject) => {
+            output.on('close', () => {
+                console.log(`压缩完成，总大小: ${archive.pointer()} bytes`);
+                resolve();
             });
-            archive.finalize();
-        }
-        catch (err) {
-            reject(err);
+            archive.on('warning', err => console.warn('Archiver warning:', err));
+            output.on('error', err => reject(err));
+            archive.on('error', err => reject(err));
+        });
+        archive.pipe(output);
+        // 4. 使用 glob 在临时目录中查找文件，并应用过滤规则
+        const files = await glob__namespace.glob('**/*', {
+            cwd: tempDir,
+            nodir: true,
+            ignore: '**/*.js.map', // 过滤规则
+        });
+        // 5. 将过滤后的文件逐个添加到压缩包
+        for (const file of files) {
+            const filePath = path.join(tempDir, file);
+            archive.file(filePath, { name: file });
         }
-    });
+        // 6. 完成压缩
+        await archive.finalize();
+        // 等待文件流关闭
+        await archivePromise;
+    }
+    catch (err) {
+        console.error('压缩过程中发生错误:', err);
+        throw err;
+    }
+    finally {
+        // 7. 无论成功还是失败，都清理临时目录
+        await fs.promises.rm(tempDir, { recursive: true, force: true });
+        console.log(`临时目录 ${tempDir} 已清理。`);
+    }
 }
 async function uploadZip(zipPath, callback) {
     const form = new FormData();
@@ -821,8 +819,8 @@ async function uploadZip(zipPath, callback) {
     // 帮我计算下文件大小，变成 MB 为单位
     const fileSize = fs.statSync(zipPath).size / 1024 / 1024;
     console.log(chalk.yellow.bold(`Start upload resource to client, size: ${fileSize.toFixed(2)} MB`));
-    const { clientServerHost, clientServerPort } = store.getState();
-    const url = `http://${clientServerHost}:${clientServerPort}/game/upload`;
+    const { clientHttpPort, clientHost } = store.getState();
+    const url = `http://${clientHost}:${clientHttpPort}/game/upload`;
     try {
         // 1. 创建请求流
         const stream = got.stream.post(url, {
@@ -830,13 +828,13 @@ async function uploadZip(zipPath, callback) {
         });
         // 2. 监听上传进度 (这个回调是并行的，不影响封装)
         stream.on('uploadProgress', progress => {
-            const percent = (progress.percent * 100).toFixed(1);
+            const percent = progress.percent;
             // const transferred = progress.transferred;
             // const total = progress.total;
             process.stdout.write(`\r${chalk.cyan('Uploading progress:  ')}${chalk.green(percent + '%')}`);
             callback({
                 status: 'process',
-                percent: `${percent}%`,
+                percent,
             });
         });
         // 3. 【核心封装】将流的处理过程包装在 Promise 中
@@ -855,7 +853,7 @@ async function uploadZip(zipPath, callback) {
                 // 将完整的响应对象 resolve 出去
                 callback({
                     status: 'success',
-                    percent: '100%',
+                    percent: 1,
                 });
                 resolve({
                     statusCode: 200,
@@ -867,7 +865,7 @@ async function uploadZip(zipPath, callback) {
                 reject(err);
                 callback({
                     status: 'error',
-                    percent: '',
+                    percent: 0,
                     msg: err.message,
                 });
             });
@@ -875,13 +873,12 @@ async function uploadZip(zipPath, callback) {
         // 4. 当 await 完成后，说明流已成功结束，可以安全地执行后续操作
         process.stdout.write('\n'); // 换行，保持终端整洁
         console.log(chalk.green.bold('✔ Upload completed successfully!'));
-        fs.unlinkSync(zipPath);
         return response;
     }
     catch (err) {
         callback({
             status: 'error',
-            percent: '',
+            percent: 0,
             msg: err?.message,
         });
         process.stdout.write('\n');
@@ -901,16 +898,26 @@ class WsServer {
     constructor() {
         this.ws = new WebSocket.Server({ port: DEV_WS_PORT });
         this.ws.on('connection', ws => {
+            const { clientHttpPort, clientHost, clientWsPort } = store.getState();
+            if (clientHost) {
+                this.send({
+                    method: 'clientDebugInfo',
+                    payload: {
+                        clientHttpPort,
+                        clientHost,
+                        clientWsPort,
+                    },
+                });
+            }
             ws.on('message', message => {
                 /** 客户端发送的消息 */
                 const clientMessage = JSON.parse(message.toString());
-                console.log('Client Message', clientMessage);
                 const from = clientMessage.from;
                 if (from === 'browser') {
+                    console.log(chalk.yellow.bold('Browser message'), clientMessage);
                     const method = clientMessage.method;
                     switch (method) {
                         case 'startUpload':
-                            console.log('startUpload');
                             this.sendUploadStatus('start');
                             uploadGame(({ status, percent, msg }) => {
                                 if (status === 'process') {
@@ -949,26 +956,67 @@ class WsServer {
                     }
                 }
                 else {
+                    console.log(chalk.green.bold('Client message'), clientMessage);
                     const method = clientMessage.method;
                     switch (method) {
+                        /**
+                         * 客户端完成扫码成功，返回客户端的 host 和 port
+                         */
+                        case 'startScanQRcode': {
+                            const payload = clientMessage.payload;
+                            console.log('startQRcode', payload);
+                            this.send({
+                                method: 'startScanQRcode',
+                            });
+                            break;
+                        }
+                        case 'scanQRCodeResult': {
+                            const payload = clientMessage.payload || {};
+                            const { host, port, wsPort, errMsg, isSuccess } = payload;
+                            if (isSuccess) {
+                                store.setState({
+                                    clientHttpPort: port,
+                                    clientHost: host,
+                                    clientWsPort: wsPort,
+                                });
+                                this.send({
+                                    method: 'scanQRCodeSuccess',
+                                    payload: {
+                                        clientHttpPort: port,
+                                        clientHost: host,
+                                        clientWsPort: wsPort,
+                                    },
+                                });
+                                console.log('scanQRcodeSuccess');
+                            }
+                            else {
+                                this.send({
+                                    method: 'scanQRCodeFailed',
+                                    payload: {
+                                        errMsg,
+                                    },
+                                });
+                            }
+                            break;
+                        }
+                        // 待废弃
                         case 'shareDevParams':
-                            console.log('shareDevParams', clientMessage);
                             const payload = clientMessage.payload;
-                            console.log('shareDevParams', payload);
                             const { host, port, wsPort } = payload;
                             store.setState({
-                                clientServerPort: port,
-                                clientServerHost: host,
+                                clientHttpPort: port,
+                                clientHost: host,
+                                clientWsPort: wsPort,
+                                clientWsHost: host,
+                            });
+                            this.send({
+                                method: 'scanQRCodeSuccess',
+                                payload: {
+                                    clientHttpPort: port,
+                                    clientHost: host,
+                                    clientWsPort: wsPort,
+                                },
                             });
-                            // 响应内容（可以根据实际业务返回需要的数据）
-                            const devUrl = `http://${host}:${port}?session=${getSessionId({ clientWsPort: wsPort })}`;
-                            openUrl(devUrl);
-                            console.log(chalk.bold.yellow(`Game debug is ready! Visit ${devUrl} in your browser.`));
-                            break;
-                        // 鉴权失败
-                        case 'checkPermissionFailed':
-                            // 提醒使用客户端先完成测试用户授权，再重新扫描二维码开启调试服务
-                            console.log(chalk.red.bold('Check permission failed! Please authorize in client first.'));
                             break;
                     }
                 }
@@ -986,6 +1034,11 @@ class WsServer {
             }
         });
     }
+    sendResourceChange() {
+        this.send({
+            method: 'resourceChange',
+        });
+    }
     close() {
         this.ws.close();
     }
@@ -1026,6 +1079,7 @@ async function prepareResource(context) {
             enableLog: false,
         },
         build: {
+            enableOdr: false,
             pkgSizeLimit: 30 * 1024 * 1024,
             mainPkgSizeLimit: 4 * 1024 * 1024,
         },
@@ -1040,6 +1094,11 @@ async function prepareResource(context) {
             packages,
         });
         console.log(chalk.green.bold('Compile game package success \n'));
+        return {
+            isSuccess,
+            errorMsg,
+            packages,
+        };
     }
 }
 
@@ -1055,9 +1114,7 @@ async function watchChange() {
             await prepareResource({
                 mode: 'watch',
             });
-            wsServer.send({
-                method: 'resourceChange',
-            });
+            wsServer.sendResourceChange();
             // TODO：只做文件预准备，但不主动上传
             // uploadGame()
             //   .then((res) => {
@@ -1097,7 +1154,7 @@ async function showSchema() {
             margin: 1,
         });
         // 4. 构建可通过静态服务器访问的 URL
-        const qrCodeUrl = `http://localhost:${DEV_PORT}/game/qrcode`;
+        const qrCodeUrl = `http://localhost:${DEV_PORT}?enableLog=1`;
         // 5. 打印更新后的提示信息
         console.log(chalk.green.bold('Tips:'));
         console.log(`  1. ${chalk.yellow.bold('Open the link below in your browser to see the QR code, then scan it.')}`);
@@ -1133,7 +1190,7 @@ async function dev() {
     await watchChange();
 }
 
-var version = "0.0.3-beta.5";
+var version = "0.0.3-beta.6";
 var pkg = {
 	version: version};