@hapico/cli 0.0.14 → 0.0.16

package/bin/index.js

@@ -38,6 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileES5 = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const lodash_1 = require("lodash");
 const commander_1 = require("commander");
 const axios_1 = __importDefault(require("axios"));
 const fs = __importStar(require("fs"));
@@ -226,7 +228,7 @@ class FileManager {
     }
 }
 class RoomState {
-    constructor(roomId) {
+    constructor(roomId, onChangeListeners) {
         this.files = [];
         this.roomId = roomId;
         this.state = {};
@@ -234,6 +236,7 @@ class RoomState {
         this.ws = null;
         this.reconnectTimeout = null;
         this.reconnectAttempts = 0;
+        this.onChangeListeners = onChangeListeners;
     }
     connect(onConnected) {
         if (this.ws && this.ws.readyState === ws_1.WebSocket.OPEN)
@@ -242,25 +245,58 @@ class RoomState {
             clearTimeout(this.reconnectTimeout);
         }
         this.ws = new ws_1.WebSocket(`https://base.myworkbeast.com/ws?room=${this.roomId}`);
-        this.ws.on("open", () => {
+        this.ws.onopen = () => {
+            console.log(`Connected to room: ${this.roomId}`);
             this.isConnected = true;
             this.reconnectAttempts = 0;
-            onConnected === null || onConnected === void 0 ? void 0 : onConnected();
-            connected.succeed(`Connected to WebSocket server`);
-        });
-        this.ws.on("close", () => {
+            onConnected === null || onConnected === void 0 ? void 0 : onConnected(); // Call the onConnected callback if provided
+        };
+        this.ws.onclose = () => {
+            console.log(`Disconnected from room: ${this.roomId}`);
             this.isConnected = false;
             this.reconnectAttempts++;
-            connected.start(`Retry connection...`);
-            this.connect();
-        });
+            const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+            console.log(`Attempting to reconnect in ${delay / 1000}s...`);
+            this.reconnectTimeout = setTimeout(() => this.connect(onConnected), delay);
+        };
         this.ws.on("message", (data) => {
             try {
-                const message = JSON.parse(data.toString());
-                if (message.type === "state" && message.state) {
-                    this.state = message.state;
-                    const view = this.state.view;
-                    this.files = view;
+                const jsonStr = typeof data === "string" ? data : data.toString();
+                const parsedData = JSON.parse(jsonStr);
+                const includes = [
+                    "view",
+                    "coding",
+                    "refresh_key",
+                    "useActiveIdFocus",
+                    "activeId",
+                    "active_file",
+                    "figma",
+                ];
+                let newState;
+                let changedKeys;
+                if (parsedData.type === "state") {
+                    // Full state (e.g., on initial connect)
+                    newState = parsedData.state;
+                    changedKeys = Object.keys(newState).filter((key) => !(0, lodash_1.isEqual)(newState[key], this.state[key]));
+                }
+                else if (parsedData.type === "update") {
+                    // Delta update
+                    const delta = parsedData.state;
+                    newState = { ...this.state, ...delta };
+                    changedKeys = Object.keys(delta).filter((key) => !(0, lodash_1.isEqual)(delta[key], this.state[key]));
+                }
+                else {
+                    return;
+                }
+                const filteredChangedKeys = changedKeys.filter((key) => includes.includes(key));
+                if (filteredChangedKeys.length > 0) {
+                    filteredChangedKeys.forEach((key) => {
+                        const listener = (0, lodash_1.find)(this.onChangeListeners, (l) => l.key === key);
+                        if (listener) {
+                            listener.callback(newState[key]);
+                        }
+                    });
+                    this.state = newState;
                 }
             }
             catch (e) {
@@ -280,16 +316,13 @@ class RoomState {
                 state: { [key]: value },
             }));
         }
-        else {
-            console.log("Cannot update state: Not connected");
-        }
     }
     disconnect() {
         if (this.reconnectTimeout) {
             clearTimeout(this.reconnectTimeout);
         }
         if (this.ws) {
-            this.ws.removeAllListeners("close");
+            this.ws.onclose = null; // Prevent reconnect on intentional close
             this.ws.close();
         }
     }
@@ -300,7 +333,7 @@ class RoomState {
         return this.isConnected;
     }
 }
-commander_1.program.version("0.0.14").description("Hapico CLI for project management");
+commander_1.program.version("0.0.16").description("Hapico CLI for project management");
 commander_1.program
     .command("clone <id>")
     .description("Clone a project by ID")
@@ -411,22 +444,25 @@ commander_1.program
         return;
     }
     console.log(`Connecting to WebSocket server`);
-    const room = new RoomState(`view_${projectId}`);
+    const room = new RoomState(`view_${projectId}`, []);
+    const fileManager = new FileManager(srcDir);
+    const initialFiles = fileManager.listFiles();
+    room.files = initialFiles;
     room.connect(async () => {
         devSpinner.succeed("Project started in development mode!");
-        const fileManager = new FileManager(srcDir);
-        const initialFiles = fileManager.listFiles();
         room.updateState("view", initialFiles);
         fileManager.setOnFileChange((filePath, content) => {
-            const es5 = (0, exports.compileES5)(content, filePath);
+            var _a;
+            const es5 = (_a = (0, exports.compileES5)(content, filePath)) !== null && _a !== void 0 ? _a : "";
             console.log(`File changed: ${filePath === null || filePath === void 0 ? void 0 : filePath.replace(srcDir, ".")}`);
-            const updatedView = room.files.map((file) => {
+            const updatedFiles = room.files.map((file) => {
                 if (path.join(srcDir, file.path) === filePath) {
                     return { ...file, content, es5 };
                 }
                 return file;
             });
-            room.updateState("view", updatedView);
+            room.files = updatedFiles;
+            room.updateState("view", updatedFiles);
         });
         // Fetch project info
         const projectInfo = getStoredProjectId(pwd);
@@ -445,7 +481,6 @@ commander_1.program
             return;
         }
         const projectType = project.data.type || "view";
-        console.log("Project type:", projectType);
         if (projectType === "zalominiapp") {
             qrcode_terminal_1.default.generate(`https://zalo.me/s/3218692650896662017/player/${projectId}`, { small: true }, (qrcode) => {
                 console.log("Scan this QR code to connect to the project:");

package/bun.lock

@@ -7,6 +7,7 @@
         "@babel/standalone": "^7.28.2",
         "axios": "^1.11.0",
         "commander": "^14.0.0",
+        "lodash": "^4.17.21",
         "open": "^10.2.0",
         "ora": "^8.2.0",
         "qrcode-terminal": "^0.12.0",
@@ -16,6 +17,7 @@
       "devDependencies": {
         "@types/babel__standalone": "^7.1.9",
         "@types/commander": "^2.12.5",
+        "@types/lodash": "^4.17.20",
         "@types/node": "^24.1.0",
         "@types/qrcode-terminal": "^0.12.2",
         "@types/unzipper": "^0.10.11",
@@ -47,6 +49,8 @@
 
     "@types/commander": ["@types/commander@2.12.5", "", { "dependencies": { "commander": "*" } }, "sha512-YXGZ/rz+s57VbzcvEV9fUoXeJlBt5HaKu5iUheiIWNsJs23bz6AnRuRiZBRVBLYyPnixNvVnuzM5pSaxr8Yp/g=="],
 
+    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
+
     "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="],
 
     "@types/qrcode-terminal": ["@types/qrcode-terminal@0.12.2", "", {}, "sha512-v+RcIEJ+Uhd6ygSQ0u5YYY7ZM+la7GgPbs0V/7l/kFs2uO4S8BcIUEMoP7za4DNIqNnUD5npf0A/7kBhrCKG5Q=="],
@@ -141,6 +145,8 @@
 
     "jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
 
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
     "log-symbols": ["log-symbols@6.0.0", "", { "dependencies": { "chalk": "^5.3.0", "is-unicode-supported": "^1.3.0" } }, "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],

package/dist/index.js

@@ -38,6 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileES5 = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const lodash_1 = require("lodash");
 const commander_1 = require("commander");
 const axios_1 = __importDefault(require("axios"));
 const fs = __importStar(require("fs"));
@@ -226,7 +228,7 @@ class FileManager {
     }
 }
 class RoomState {
-    constructor(roomId) {
+    constructor(roomId, onChangeListeners) {
         this.files = [];
         this.roomId = roomId;
         this.state = {};
@@ -234,6 +236,7 @@ class RoomState {
         this.ws = null;
         this.reconnectTimeout = null;
         this.reconnectAttempts = 0;
+        this.onChangeListeners = onChangeListeners;
     }
     connect(onConnected) {
         if (this.ws && this.ws.readyState === ws_1.WebSocket.OPEN)
@@ -242,25 +245,58 @@ class RoomState {
             clearTimeout(this.reconnectTimeout);
         }
         this.ws = new ws_1.WebSocket(`https://base.myworkbeast.com/ws?room=${this.roomId}`);
-        this.ws.on("open", () => {
+        this.ws.onopen = () => {
+            console.log(`Connected to room: ${this.roomId}`);
             this.isConnected = true;
             this.reconnectAttempts = 0;
-            onConnected === null || onConnected === void 0 ? void 0 : onConnected();
-            connected.succeed(`Connected to WebSocket server`);
-        });
-        this.ws.on("close", () => {
+            onConnected === null || onConnected === void 0 ? void 0 : onConnected(); // Call the onConnected callback if provided
+        };
+        this.ws.onclose = () => {
+            console.log(`Disconnected from room: ${this.roomId}`);
             this.isConnected = false;
             this.reconnectAttempts++;
-            connected.start(`Retry connection...`);
-            this.connect();
-        });
+            const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+            console.log(`Attempting to reconnect in ${delay / 1000}s...`);
+            this.reconnectTimeout = setTimeout(() => this.connect(onConnected), delay);
+        };
         this.ws.on("message", (data) => {
             try {
-                const message = JSON.parse(data.toString());
-                if (message.type === "state" && message.state) {
-                    this.state = message.state;
-                    const view = this.state.view;
-                    this.files = view;
+                const jsonStr = typeof data === "string" ? data : data.toString();
+                const parsedData = JSON.parse(jsonStr);
+                const includes = [
+                    "view",
+                    "coding",
+                    "refresh_key",
+                    "useActiveIdFocus",
+                    "activeId",
+                    "active_file",
+                    "figma",
+                ];
+                let newState;
+                let changedKeys;
+                if (parsedData.type === "state") {
+                    // Full state (e.g., on initial connect)
+                    newState = parsedData.state;
+                    changedKeys = Object.keys(newState).filter((key) => !(0, lodash_1.isEqual)(newState[key], this.state[key]));
+                }
+                else if (parsedData.type === "update") {
+                    // Delta update
+                    const delta = parsedData.state;
+                    newState = { ...this.state, ...delta };
+                    changedKeys = Object.keys(delta).filter((key) => !(0, lodash_1.isEqual)(delta[key], this.state[key]));
+                }
+                else {
+                    return;
+                }
+                const filteredChangedKeys = changedKeys.filter((key) => includes.includes(key));
+                if (filteredChangedKeys.length > 0) {
+                    filteredChangedKeys.forEach((key) => {
+                        const listener = (0, lodash_1.find)(this.onChangeListeners, (l) => l.key === key);
+                        if (listener) {
+                            listener.callback(newState[key]);
+                        }
+                    });
+                    this.state = newState;
                 }
             }
             catch (e) {
@@ -280,16 +316,13 @@ class RoomState {
                 state: { [key]: value },
             }));
         }
-        else {
-            console.log("Cannot update state: Not connected");
-        }
     }
     disconnect() {
         if (this.reconnectTimeout) {
             clearTimeout(this.reconnectTimeout);
         }
         if (this.ws) {
-            this.ws.removeAllListeners("close");
+            this.ws.onclose = null; // Prevent reconnect on intentional close
             this.ws.close();
         }
     }
@@ -300,7 +333,7 @@ class RoomState {
         return this.isConnected;
     }
 }
-commander_1.program.version("0.0.14").description("Hapico CLI for project management");
+commander_1.program.version("0.0.16").description("Hapico CLI for project management");
 commander_1.program
     .command("clone <id>")
     .description("Clone a project by ID")
@@ -411,22 +444,25 @@ commander_1.program
         return;
     }
     console.log(`Connecting to WebSocket server`);
-    const room = new RoomState(`view_${projectId}`);
+    const room = new RoomState(`view_${projectId}`, []);
+    const fileManager = new FileManager(srcDir);
+    const initialFiles = fileManager.listFiles();
+    room.files = initialFiles;
     room.connect(async () => {
         devSpinner.succeed("Project started in development mode!");
-        const fileManager = new FileManager(srcDir);
-        const initialFiles = fileManager.listFiles();
         room.updateState("view", initialFiles);
         fileManager.setOnFileChange((filePath, content) => {
-            const es5 = (0, exports.compileES5)(content, filePath);
+            var _a;
+            const es5 = (_a = (0, exports.compileES5)(content, filePath)) !== null && _a !== void 0 ? _a : "";
             console.log(`File changed: ${filePath === null || filePath === void 0 ? void 0 : filePath.replace(srcDir, ".")}`);
-            const updatedView = room.files.map((file) => {
+            const updatedFiles = room.files.map((file) => {
                 if (path.join(srcDir, file.path) === filePath) {
                     return { ...file, content, es5 };
                 }
                 return file;
             });
-            room.updateState("view", updatedView);
+            room.files = updatedFiles;
+            room.updateState("view", updatedFiles);
         });
         // Fetch project info
         const projectInfo = getStoredProjectId(pwd);
@@ -445,7 +481,6 @@ commander_1.program
             return;
         }
         const projectType = project.data.type || "view";
-        console.log("Project type:", projectType);
         if (projectType === "zalominiapp") {
             qrcode_terminal_1.default.generate(`https://zalo.me/s/3218692650896662017/player/${projectId}`, { small: true }, (qrcode) => {
                 console.log("Scan this QR code to connect to the project:");

package/index.ts

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { isEqual, find } from "lodash";
 import { program } from "commander";
 import axios from "axios";
 import * as fs from "fs";
@@ -249,6 +250,10 @@ class FileManager {
   }
 }
 
+interface FileContent {
+  // Define the structure of FileContent if needed
+}
+
 class RoomState {
   private roomId: string;
   private state: RoomStateData;
@@ -256,16 +261,24 @@ class RoomState {
   private ws: WebSocket | null;
   private reconnectTimeout: NodeJS.Timeout | null;
   private reconnectAttempts: number;
+  private onChangeListeners: Array<{
+    key: string;
+    callback: (value: any) => void;
+  }>;
 
   public files: FileContent[] = [];
 
-  constructor(roomId: string) {
+  constructor(
+    roomId: string,
+    onChangeListeners: Array<{ key: string; callback: (value: any) => void }>
+  ) {
     this.roomId = roomId;
     this.state = {};
     this.isConnected = false;
     this.ws = null;
     this.reconnectTimeout = null;
     this.reconnectAttempts = 0;
+    this.onChangeListeners = onChangeListeners;
   }
 
   connect(onConnected?: () => void): void {
@@ -279,36 +292,79 @@ class RoomState {
       `https://base.myworkbeast.com/ws?room=${this.roomId}`
     );
 
-    this.ws.on("open", () => {
+    this.ws.onopen = () => {
+      console.log(`Connected to room: ${this.roomId}`);
       this.isConnected = true;
       this.reconnectAttempts = 0;
-      onConnected?.();
-      connected.succeed(`Connected to WebSocket server`);
-    });
+      onConnected?.(); // Call the onConnected callback if provided
+    };
 
-    this.ws.on("close", () => {
+    this.ws.onclose = () => {
+      console.log(`Disconnected from room: ${this.roomId}`);
       this.isConnected = false;
 
       this.reconnectAttempts++;
-      connected.start(`Retry connection...`);
+      const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+      console.log(`Attempting to reconnect in ${delay / 1000}s...`);
 
-      this.connect();
-    });
+      this.reconnectTimeout = setTimeout(
+        () => this.connect(onConnected),
+        delay
+      );
+    };
 
-    this.ws.on("message", (data: Buffer) => {
+    this.ws.on("message", (data: Buffer | string) => {
       try {
-        const message: WebSocketMessage = JSON.parse(data.toString());
-        if (message.type === "state" && message.state) {
-          this.state = message.state;
-          const view = this.state.view as Array<FileContent>;
-          this.files = view;
+        const jsonStr = typeof data === "string" ? data : data.toString();
+        const parsedData = JSON.parse(jsonStr);
+        const includes = [
+          "view",
+          "coding",
+          "refresh_key",
+          "useActiveIdFocus",
+          "activeId",
+          "active_file",
+          "figma",
+        ];
+
+        let newState: RoomStateData;
+        let changedKeys;
+
+        if (parsedData.type === "state") {
+          // Full state (e.g., on initial connect)
+          newState = parsedData.state;
+          changedKeys = Object.keys(newState).filter(
+            (key) => !isEqual(newState[key], this.state[key])
+          );
+        } else if (parsedData.type === "update") {
+          // Delta update
+          const delta = parsedData.state;
+          newState = { ...this.state, ...delta };
+          changedKeys = Object.keys(delta).filter(
+            (key) => !isEqual(delta[key], this.state[key])
+          );
+        } else {
+          return;
+        }
+
+        const filteredChangedKeys = changedKeys.filter((key) =>
+          includes.includes(key)
+        );
+        if (filteredChangedKeys.length > 0) {
+          filteredChangedKeys.forEach((key) => {
+            const listener = find(this.onChangeListeners, (l) => l.key === key);
+            if (listener) {
+              listener.callback(newState[key]);
+            }
+          });
+          this.state = newState;
         }
       } catch (e) {
         console.error("Error processing message:", e);
       }
     });
 
-    this.ws.on("error", (err: Error) => {
+    this.ws.on("error", (err) => {
       console.error("WebSocket error:", err);
       this.ws?.close();
     });
@@ -322,8 +378,6 @@ class RoomState {
           state: { [key]: value },
         })
       );
-    } else {
-      console.log("Cannot update state: Not connected");
     }
   }
 
@@ -332,7 +386,7 @@ class RoomState {
       clearTimeout(this.reconnectTimeout);
     }
     if (this.ws) {
-      this.ws.removeAllListeners("close");
+      this.ws.onclose = null; // Prevent reconnect on intentional close
       this.ws.close();
     }
   }
@@ -346,7 +400,7 @@ class RoomState {
   }
 }
 
-program.version("0.0.14").description("Hapico CLI for project management");
+program.version("0.0.16").description("Hapico CLI for project management");
 
 program
   .command("clone <id>")
@@ -431,7 +485,9 @@ program
       console.error("You need to login first. Use 'hapico login' command.");
       return;
     }
-    const devSpinner = ora("Starting the project in development mode...").start();
+    const devSpinner = ora(
+      "Starting the project in development mode..."
+    ).start();
     const pwd = process.cwd();
     const srcDir = path.join(pwd, "src");
     if (!fs.existsSync(srcDir)) {
@@ -492,26 +548,27 @@ program
     }
 
     console.log(`Connecting to WebSocket server`);
-    const room = new RoomState(`view_${projectId}`);
+    const room = new RoomState(`view_${projectId}`, []);
+    const fileManager = new FileManager(srcDir);
+    const initialFiles = fileManager.listFiles();
+    room.files = initialFiles;
 
     room.connect(async () => {
       devSpinner.succeed("Project started in development mode!");
 
-      const fileManager = new FileManager(srcDir);
-
-      const initialFiles = fileManager.listFiles();
       room.updateState("view", initialFiles);
 
       fileManager.setOnFileChange((filePath, content) => {
-        const es5 = compileES5(content, filePath);
+        const es5 = compileES5(content, filePath) ?? "";
         console.log(`File changed: ${filePath?.replace(srcDir, ".")}`);
-        const updatedView = room.files.map((file) => {
+        const updatedFiles = room.files.map((file) => {
           if (path.join(srcDir, file.path) === filePath) {
             return { ...file, content, es5 };
           }
           return file;
         });
-        room.updateState("view", updatedView);
+        room.files = updatedFiles;
+        room.updateState("view", updatedFiles);
       });
 
       // Fetch project info
@@ -539,8 +596,6 @@ program
 
       const projectType = project.data.type || "view";
 
-      console.log("Project type:", projectType);
-
       if (projectType === "zalominiapp") {
         QRCode.generate(
           `https://zalo.me/s/3218692650896662017/player/${projectId}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hapico/cli",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "A simple CLI tool for project management",
   "main": "index.js",
   "bin": {
@@ -23,6 +23,7 @@
     "@babel/standalone": "^7.28.2",
     "axios": "^1.11.0",
     "commander": "^14.0.0",
+    "lodash": "^4.17.21",
     "open": "^10.2.0",
     "ora": "^8.2.0",
     "qrcode-terminal": "^0.12.0",
@@ -32,6 +33,7 @@
   "devDependencies": {
     "@types/babel__standalone": "^7.1.9",
     "@types/commander": "^2.12.5",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^24.1.0",
     "@types/qrcode-terminal": "^0.12.2",
     "@types/unzipper": "^0.10.11",