@hapico/cli 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hapico/cli",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "A simple CLI tool for project management",
   "main": "index.js",
   "bin": {
@@ -27,11 +27,15 @@
     "express": "^5.2.1",
     "inquirer": "^12.9.6",
     "lodash": "^4.17.21",
+    "nativewind": "^4.2.2",
     "open": "^10.2.0",
     "ora": "^8.2.0",
     "pako": "^2.1.0",
+    "postcss": "^8.5.8",
     "prettier": "^3.6.2",
     "qrcode-terminal": "^0.12.0",
+    "react-native-css-interop": "^0.2.2",
+    "tailwindcss": "3.4.17",
     "unzipper": "^0.12.3",
     "uuid": "^13.0.0",
     "ws": "^8.18.3"

package/tools/nativewind/index.ts

@@ -0,0 +1,87 @@
+import postcss from "postcss";
+import tailwindcss, { type Config } from "tailwindcss";
+import fs from "fs";
+import path from "path";
+// @ts-ignore
+import nativewindPreset from "nativewind/preset";
+
+// ==========================================
+// FIX LỖI IMPORT REACT-NATIVE-CSS-INTEROP
+// ==========================================
+let compileToNative: (css: string, options?: any) => any;
+try {
+  const compiler = require("react-native-css-interop/dist/compiler");
+  compileToNative = compiler.compile || compiler.default;
+} catch (e) {
+  try {
+    const cssToRn = require("react-native-css-interop/dist/css-to-rn");
+    compileToNative = cssToRn.cssToReactNativeRuntime || cssToRn.default;
+  } catch (err) {
+    throw new Error("Không thể tìm thấy hàm compile. Kiểm tra lại node_modules.");
+  }
+}
+
+/**
+ * Hàm biên dịch Tailwind Class sang Compiled Object
+ */
+export async function generateNativeWindStyleMap(
+  contentPaths: string[],
+  rawCss: string = "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
+) {
+  try {
+    const tailwindConfig: Config = {
+      content: contentPaths,
+      presets: [nativewindPreset],
+      theme: { extend: {} },
+    };
+
+    const processor = postcss([tailwindcss(tailwindConfig)]);
+    const result = await processor.process(rawCss, {
+      from: "tailwind.css",
+      to: "output.css",
+    });
+
+    return compileToNative(result.css, { native: true });
+  } catch (error) {
+    console.error("❌ Compile Style Map Error:", error);
+    throw error;
+  }
+}
+
+/**
+ * Hàm hỗ trợ: Quét 1 thư mục và Lưu kết quả vào 1 thư mục khác
+ */
+export async function compileAndSaveToFolder(
+  folderToScan: string,   // Thư mục chứa code cần quét (VD: "./src/components")
+  outputFilePath: string  // Nơi lưu kết quả (VD: "./dist/styles.json")
+) {
+  try {
+    // 1. Tạo đường dẫn quét toàn bộ file js, jsx, ts, tsx trong thư mục
+    // path.resolve(process.cwd(), ...) giúp lấy đúng đường dẫn gốc của project
+    const scanPattern = path.resolve(process.cwd(), folderToScan, "**/*.{js,jsx,ts,tsx}");
+    
+    // console.log(`🔍 Scanning files in ${scanPattern}`);
+
+    // 2. Chạy hàm biên dịch
+    const compiledObject = await generateNativeWindStyleMap([scanPattern]);
+
+    // 3. Xử lý thư mục lưu file
+    const absoluteOutputPath = path.resolve(process.cwd(), outputFilePath);
+    const outputDir = path.dirname(absoluteOutputPath); // Lấy tên thư mục chứa file đầu ra
+
+    // Nếu thư mục đầu ra chưa tồn tại, Node.js sẽ tự động tạo thư mục đó (recursive: true)
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+
+    // 4. Ghi Object ra file JSON
+    fs.writeFileSync(absoluteOutputPath, JSON.stringify(compiledObject, null, 2), "utf-8");
+    
+    // console.log(`✅ Sync CSS ${absoluteOutputPath}`);
+    
+  } catch (error) {
+    console.error("❌ Lỗi khi xuất file:", error);
+  }
+}
+
+

package/tools/vibe/index.ts

@@ -16,7 +16,8 @@ const scanRecursively = async (
 
     for (const entry of list) {
       const fullPath = path.join(dir, entry.name);
-      const relativePath = path.relative(baseDir, fullPath);
+      // Chuẩn hóa đường dẫn về forward slash để nhất quán giữa các hệ điều hành
+      const relativePath = path.relative(baseDir, fullPath).split(path.sep).join('/');
 
       if (shouldIgnorePath(relativePath)) continue;
 
@@ -252,6 +253,11 @@ const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
   let searchLines: string[] = [];
   let replaceLines: string[] = [];
 
+  // State for full file replacement detection
+  let inCodeBlock = false;
+  let codeBlockLines: string[] = [];
+  let hasSeenMarkersInBlock = false;
+
   const isFileMarker = (line: string) => {
     const match = line.match(/^### File:\s*[`']?([^`'\s]+)[`']?/i);
     return match ? match[1] : null;
@@ -264,21 +270,28 @@ const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
     const fileName = isFileMarker(line);
     if (fileName) {
       currentFile = fileName;
+      // Reset tracking when switching files
+      inCodeBlock = false;
+      codeBlockLines = [];
+      hasSeenMarkersInBlock = false;
       continue;
     }
 
     if (isSearchMarker(line)) {
       inSearch = true;
       inReplace = false;
+      hasSeenMarkersInBlock = true;
       searchLines = [];
       replaceLines = [];
       continue;
     }
     if (isDividerMarker(line)) {
       if (inSearch) { inSearch = false; inReplace = true; }
+      hasSeenMarkersInBlock = true;
       continue;
     }
     if (isEndMarker(line)) {
+      hasSeenMarkersInBlock = true;
       if (inReplace || inSearch) {
         if (searchLines.length > 0 || replaceLines.length > 0) {
           if (!filePatches[currentFile]) filePatches[currentFile] = [];
@@ -291,8 +304,30 @@ const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
       inSearch = false; inReplace = false; searchLines = []; replaceLines = [];
       continue;
     }
+
+    // Detect triple backticks to identify potential full-file replacements
+    if (line.trim().startsWith("```")) {
+      if (!inCodeBlock) {
+        inCodeBlock = true;
+        codeBlockLines = [];
+        hasSeenMarkersInBlock = false;
+      } else {
+        inCodeBlock = false;
+        // If the code block ended without any SEARCH/REPLACE markers, treat it as full-file code
+        if (!hasSeenMarkersInBlock && codeBlockLines.length > 0 && currentFile !== "unknown") {
+          if (!filePatches[currentFile]) filePatches[currentFile] = [];
+          filePatches[currentFile].push({ 
+            search: "__FULL_FILE_REPLACEMENT__", 
+            replace: codeBlockLines.join("\n") 
+          });
+        }
+      }
+      continue;
+    }
+
     if (inSearch) searchLines.push(line);
     else if (inReplace) replaceLines.push(line);
+    else if (inCodeBlock) codeBlockLines.push(line);
   }
   return filePatches;
 };
@@ -313,6 +348,13 @@ export const applyPatch = (
   for (const patch of patches) {
     const { search, replace } = patch;
 
+    // Strategy 0: Full File Replacement (Overwrite)
+    if (search === "__FULL_FILE_REPLACEMENT__") {
+      console.log(`[ApplyPatch] Overwriting file with full content.`);
+      result = replace;
+      continue;
+    }
+
     // NẾU SEARCH RỖNG (INSERT/APPEND)
     if (search.trim() === "") {
       console.log(`[ApplyPatch] Inserting/appending block.`);
@@ -418,26 +460,54 @@ const startServer = async (rootDir: string) => {
     // 2. Scan project files
     const allFiles = await scanRecursively(rootDir, rootDir);
     const modifiedFiles: string[] = [];
+    const appliedNormalizedPaths = new Set<string>();
 
-    // 3. Match patches to files and apply
+    // 3. Match patches to existing files and apply
     for (const file of allFiles) {
-      // Find patches meant for this specific file path
-      // Note: LLM might use different path separators, so we normalize
       const normalizedPath = file.path.replace(/\\/g, '/');
-      const patchesForFile = Object.entries(filePatches).find(([path]) => {
+      const patchesEntry = Object.entries(filePatches).find(([path]) => {
           const normalizedKey = path.replace(/\\/g, '/');
           return normalizedKey === normalizedPath || normalizedPath.endsWith('/' + normalizedKey);
-      })?.[1];
+      });
 
-      // Only apply if the file was selected in UI AND has patches in the response
-      if (selectedPaths.includes(file.path) && patchesForFile) {
-        console.log(`[Apply] Processing ${patchesForFile.length} blocks for: ${file.path}`);
-        const newContent = applyPatch(file.content, patchesForFile);
-        
-        if (newContent !== file.content) {
-          await fs.writeFile(file.fullPath, newContent, "utf-8");
-          modifiedFiles.push(file.path);
+      if (patchesEntry) {
+        const [rawKey, patchesForFile] = patchesEntry;
+        // Only apply if the file was selected in UI
+        if (selectedPaths.includes(file.path)) {
+          console.log(`[Apply] Processing ${patchesForFile.length} blocks for: ${file.path}`);
+          const newContent = applyPatch(file.content, patchesForFile);
+          
+          if (newContent !== file.content) {
+            await fs.writeFile(file.fullPath, newContent, "utf-8");
+            modifiedFiles.push(file.path);
+          }
         }
+        appliedNormalizedPaths.add(rawKey.replace(/\\/g, '/'));
+      }
+    }
+
+    // 4. Handle New Files (patches for paths that don't exist yet)
+    for (const [rawPath, patches] of Object.entries(filePatches)) {
+      const normalizedKey = rawPath.replace(/\\/g, '/');
+      if (normalizedKey === "unknown" || appliedNormalizedPaths.has(normalizedKey)) continue;
+
+      // Double check it doesn't exist (safety)
+      const alreadyExists = allFiles.some(f => {
+        const np = f.path.replace(/\\/g, '/');
+        return np === normalizedKey || np.endsWith('/' + normalizedKey);
+      });
+      if (alreadyExists) continue;
+
+      console.log(`[Apply] Creating new file: ${rawPath}`);
+      const newContent = applyPatch("", patches);
+      const fullPath = path.resolve(rootDir, rawPath);
+      
+      try {
+        await fs.mkdir(path.dirname(fullPath), { recursive: true });
+        await fs.writeFile(fullPath, newContent, "utf-8");
+        modifiedFiles.push(rawPath);
+      } catch (err) {
+        console.error(`[Apply] Failed to create file ${rawPath}:`, err);
       }
     }
     
@@ -662,7 +732,8 @@ const startServer = async (rootDir: string) => {
 
               async init() {
                 try {
-                  const res = await fetch('http://localhost:${PORT}/api/files');
+                  // Sử dụng relative URL để tránh lỗi phân giải localhost/127.0.0.1 trên Windows
+                  const res = await fetch('/api/files');
                   const data = await res.json();
                   this.rawFiles = data;
                   this.buildTree();
@@ -672,98 +743,10 @@ const startServer = async (rootDir: string) => {
                   this.loading = false;
                 }
 
-                // Search watcher
                 this.$watch('search', () => this.buildTree());
-                
-                // Auto-generate prompt
                 this.$watch('instruction', () => this.debouncedFetchPrompt());
                 this.$watch('selectedFiles', () => this.debouncedFetchPrompt());
               },
-
-              // ===========================
-              // Tree Logic
-              // ===========================
-              
-              buildTree() {
-                // 1. Convert paths to object structure
-                const root = {};
-                const searchLower = this.search.toLowerCase();
-                
-                this.rawFiles.forEach(file => {
-                  if (this.search && !file.path.toLowerCase().includes(searchLower)) return;
-                  
-                  const parts = file.path.split(/[\\\\/]/);
-                  let current = root;
-                  
-                  parts.forEach((part, index) => {
-                    if (!current[part]) {
-                      current[part] = {
-                        name: part,
-                        path: parts.slice(0, index + 1).join('/'),
-                        children: {},
-                        type: index === parts.length - 1 ? 'file' : 'folder',
-                        fullPath: file.path // Only meaningful for file
-                      };
-                    }
-                    current = current[part].children;
-                  });
-                });
-
-                // 2. Flatten object structure into renderable list with depth
-                this.treeNodes = [];
-                const traverse = (nodeMap, depth) => {
-                  // Sort: Folders first, then Files. Alphabetical.
-                  const keys = Object.keys(nodeMap).sort((a, b) => {
-                    const nodeA = nodeMap[a];
-                    const nodeB = nodeMap[b];
-                    if (nodeA.type !== nodeB.type) return nodeA.type === 'folder' ? -1 : 1;
-                    return a.localeCompare(b);
-                  });
-
-                  keys.forEach(key => {
-                    const node = nodeMap[key];
-                    const flatNode = {
-                      id: node.path,
-                      name: node.name,
-                      path: node.path, // Relative path for selection
-                      type: node.type,
-                      depth: depth,
-                      children: Object.keys(node.children).length > 0, // boolean for UI
-                      expanded: this.search.length > 0 || depth < 1, // Auto expand on search or root
-                      rawChildren: node.children // Keep ref for recursion
-                    };
-                    
-                    this.treeNodes.push(flatNode);
-                    if (flatNode.children && flatNode.expanded) {
-                      traverse(node.children, depth + 1);
-                    }
-                  });
-                };
-                
-                traverse(root, 0);
-              },
-
-              // Re-calculate visible nodes (folding logic) without rebuilding everything
-              // But for simplicity in this SFC, we just rebuild the list when expanded changes.
-              toggleExpand(node) {
-                if (node.type !== 'folder') return;
-                
-                // Find node in treeNodes and toggle
-                // Since treeNodes is flat and generated, we need to persist state or smarter logic.
-                // Simpler: Just modify the expanded state in the current flat list is tricky because children are dynamic.
-                // Better approach for this lightweight UI:
-                // We actually need a persistent "expanded" Set to survive re-renders if we want to be fancy.
-                // For now, let's just cheat: Update the boolean in the flat list works for collapsing, 
-                // but expanding requires knowing the children.
-                
-                // Let's reload the tree logic but using a \`expandedPaths\` set.
-                if (this.expandedPaths.has(node.path)) {
-                   this.expandedPaths.delete(node.path);
-                } else {
-                   this.expandedPaths.add(node.path);
-                }
-                this.refreshTreeVisibility();
-              },
               
               // Alternative: Just use a computed property for \`visibleNodes\`.
               // Since Alpine isn't React, we do this manually.
@@ -791,7 +774,8 @@ const startServer = async (rootDir: string) => {
                  
                  this.rawFiles.forEach(file => {
                     if (this.search && !file.path.toLowerCase().includes(searchLower)) return;
-                    const parts = file.path.split(/[\\\\/]/);
+                    // File path đã được chuẩn hóa '/' từ backend
+                    const parts = file.path.split('/');
                     let current = this.rootObject;
                     parts.forEach((part, index) => {
                       if (!current[part]) {
@@ -892,9 +876,8 @@ const startServer = async (rootDir: string) => {
               },
               
               getAllDescendants(folderPath) {
-                 // Simple filter from rawFiles
                  return this.rawFiles
-                    .filter(f => f.path.startsWith(folderPath + '/') || f.path.startsWith(folderPath + '\\\\'))
+                    .filter(f => f.path === folderPath || f.path.startsWith(folderPath + '/'))
                     .map(f => f.path);
               },
 
@@ -927,7 +910,7 @@ const startServer = async (rootDir: string) => {
                 }
                 this.generating = true;
                 try {
-                  const res = await fetch('http://localhost:${PORT}/api/prompt', {
+                  const res = await fetch('/api/prompt', {
                     method: 'POST',
                     headers: {'Content-Type': 'application/json'},
                     body: JSON.stringify({ filePaths: Array.from(this.selectedFiles), instruction: this.instruction })
@@ -954,7 +937,7 @@ const startServer = async (rootDir: string) => {
               async applyPatch() {
                 this.applying = true;
                 try {
-                   const res = await fetch('http://localhost:${PORT}/api/apply', {
+                   const res = await fetch('/api/apply', {
                     method: 'POST',
                     headers: {'Content-Type': 'application/json'},
                     body: JSON.stringify({ filePaths: Array.from(this.selectedFiles), llmResponse: this.llmResponse })