@locofy/mcp 0.1.0 → 1.0.2

package/build/tools/pullComponents.js

@@ -7,14 +7,17 @@ import axios from 'axios';
  *   - Returns a hardcoded representation of a directory structure
  *   - Contains nested folders, files, and file contents
  */
-export const pullComponentsToolName = 'locofy';
-export const pullComponentsToolDescription = 'Provides a directory structure with nested folders, files, and their contents, allowing the MCP client to retrieve the code.';
+export const pullComponentsToolName = 'getLatestComponentAndDependencyCode';
+export const pullComponentsToolDescription = `Cursor IDE leverages this MCP tool to scan directory structures with nested folders, files, and their contents. It then compares this information with the current code in the IDE to intelligently update components and their dependencies. If codeChanged is true, the tool will prompt the user to accept the changes before updating the component and its dependencies. If codeChanged is false, the tool will not update the component and its dependencies. The tool ensures that users are informed of the components retrieved and their relationships, providing a clear understanding of the updates being made
+  `;
 export const PullComponentsToolSchema = z.object({
     componentNames: z.array(z.string()).describe('The list of component or screen names to be retrieved.').max(10).min(1),
     workspacePath: z.string().describe('The full path to the workspace.'),
 });
 export async function runPullComponentsTool(args) {
-    const componentNames = args.componentNames;
+    let componentNames = args.componentNames;
+    // clean the component names, remove extensions
+    componentNames = componentNames.map(name => name.replace(/\.[^/.]+$/, ''));
     const workspacePath = decodeURIComponent(args.workspacePath);
     const projectID = process.env.PROJECT_ID;
     const personalAccessToken = process.env.PERSONAL_ACCESS_TOKEN;
@@ -24,13 +27,24 @@ export async function runPullComponentsTool(args) {
     try {
         const result = await fetchDirectoryStructure(componentNames, projectID, personalAccessToken);
         if (result.success) {
+            // Prepend workspacePath to all filePath attributes
+            prepareFilePaths(result.data, workspacePath);
             // Download and save any files referenced in the response
-            await downloadAndSaveAssets(result.data, workspacePath);
+            await downloadAndSaveAssets(result.data);
+            // Check for code changes and mark changed files
+            await checkForCodeChanges(result.data);
+            // clean the directory structure
+            const cleanedResult = cleanDirectoryStructure(result.data);
+            const resultJSON = cleanedResult;
+            // write resultJSON to a file
+            if (process.env.DEBUG_MODE === 'true') {
+                fs.writeFileSync('result.json', JSON.stringify(resultJSON.children[0], null, 2));
+            }
             return {
                 content: [
                     {
                         type: 'text',
-                        text: JSON.stringify(result.data, null, 2)
+                        text: JSON.stringify(resultJSON.children[0], null, 2)
                     }
                 ]
             };
@@ -56,7 +70,7 @@ export async function runPullComponentsTool(args) {
             content: [
                 {
                     type: 'text',
-                    text: JSON.stringify({ error: 'Failed to fetch directory structure' }, null, 2)
+                    text: JSON.stringify({ error: 'Failed to fetch directory structure ' + error }, null, 2)
                 }
             ]
         };
@@ -64,7 +78,8 @@ export async function runPullComponentsTool(args) {
 }
 async function fetchDirectoryStructure(componentNames, projectID, personalAccessToken) {
     // TODO: change to PROD url
-    const url = 'https://codegen-api.locofy.dev/mcp/generators/' + projectID + '?name=' + componentNames.join(',');
+    const encodedNames = componentNames.map(name => encodeURIComponent(name)).join(',');
+    const url = 'https://codegen-api.locofy.dev/mcp/generators/' + projectID + '?name=' + encodedNames;
     const headers = {
         'Accept': '*/*',
         'Content-Type': 'application/json',
@@ -129,13 +144,79 @@ async function fetchDirectoryStructure(componentNames, projectID, personalAccess
         };
     }
 }
+/**
+ * Traverses the directory structure and prepends workspacePath to all filePath attributes
+ * @param directoryStructure The directory structure from the API response
+ * @param workspacePath The workspace path to prepend to file paths
+ */
+function prepareFilePaths(directoryStructure, workspacePath) {
+    const processNode = (node) => {
+        if (node.filePath) {
+            if (!path.isAbsolute(node.filePath)) {
+                node.filePath = path.join(workspacePath, node.filePath);
+            }
+        }
+        // Process all file paths in exportData
+        if (node.exportData) {
+            // Handle exportData.filePath
+            if (node.exportData.filePath) {
+                if (!path.isAbsolute(node.exportData.filePath)) {
+                    node.exportData.filePath = path.join(workspacePath, node.exportData.filePath);
+                }
+            }
+            // Handle exportData.files array
+            if (node.exportData.files && Array.isArray(node.exportData.files)) {
+                for (const file of node.exportData.files) {
+                    if (file.filePath && !path.isAbsolute(file.filePath)) {
+                        file.filePath = path.join(workspacePath, file.filePath);
+                    }
+                }
+            }
+            // Handle dependencies array
+            if (node.exportData.dependencies && Array.isArray(node.exportData.dependencies)) {
+                for (const dependency of node.exportData.dependencies) {
+                    // Process dependency filePath
+                    if (dependency.filePath && !path.isAbsolute(dependency.filePath)) {
+                        dependency.filePath = path.join(workspacePath, dependency.filePath);
+                    }
+                    // Process dependency files array
+                    if (dependency.files && Array.isArray(dependency.files)) {
+                        for (const file of dependency.files) {
+                            if (file.filePath && !path.isAbsolute(file.filePath)) {
+                                file.filePath = path.join(workspacePath, file.filePath);
+                            }
+                        }
+                    }
+                    // Recursively process any nested dependencies if they exist
+                    if (dependency.dependencies && Array.isArray(dependency.dependencies)) {
+                        for (const nestedDep of dependency.dependencies) {
+                            processNode(nestedDep); // Recursively process nested dependencies
+                        }
+                    }
+                }
+            }
+        }
+        // Process content.filePath if it exists
+        if (node.content && node.content.filePath) {
+            if (!path.isAbsolute(node.content.filePath)) {
+                node.content.filePath = path.join(workspacePath, node.content.filePath);
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            for (const child of node.children) {
+                processNode(child);
+            }
+        }
+    };
+    // Start processing from the root
+    processNode(directoryStructure);
+}
 /**
  * Downloads and saves asset files from the directory structure
  * @param directoryStructure The directory structure from the API response
- * @param workspacePath The workspace path to save files to
  */
-/* eslint-disable */
-async function downloadAndSaveAssets(directoryStructure, workspacePath) {
+async function downloadAndSaveAssets(directoryStructure) {
     // Process each file in the directory structure
     const processNode = async (node) => {
         /* eslint-enable */
@@ -143,7 +224,7 @@ async function downloadAndSaveAssets(directoryStructure, workspacePath) {
             // For each file in the files array
             for (const file of node.exportData.files) {
                 if (file.url && file.fileName) {
-                    const filePath = path.join(workspacePath, file.filePath);
+                    const filePath = file.filePath;
                     // Create the directory structure if it doesn't exist
                     const dirPath = path.dirname(filePath);
                     if (!fs.existsSync(dirPath)) {
@@ -178,3 +259,197 @@ async function downloadAndSaveAssets(directoryStructure, workspacePath) {
     // Start processing from the root
     await processNode(directoryStructure);
 }
+/**
+ * Checks if the current code on disk differs from the code received from the API
+ * @param directoryStructure The directory structure from the API response
+ */
+async function checkForCodeChanges(directoryStructure) {
+    // Process a single file and check if its content has changed
+    function checkFile(filePath, content) {
+        if (!fs.existsSync(filePath)) {
+            console.log(`New file: ${filePath}`);
+            return true;
+        }
+        try {
+            const fileContent = fs.readFileSync(filePath, 'utf8');
+            const codeChanged = hasCodeChanged(fileContent, content);
+            if (codeChanged) {
+                console.log(`File changed: ${filePath}`);
+            }
+            return codeChanged;
+        }
+        catch (error) {
+            console.error(`Error reading file ${filePath}:`, error);
+            return true; // Consider file as changed if we can't read it
+        }
+    }
+    // Check CSS module file if it exists
+    function checkCssFile(basePath, cssFileName, cssContent) {
+        if (!cssFileName || !cssContent)
+            return false;
+        const cssFilePath = path.join(path.dirname(basePath), cssFileName);
+        if (fs.existsSync(cssFilePath)) {
+            const cssFileContent = fs.readFileSync(cssFilePath, 'utf8');
+            const cssChanged = hasCodeChanged(cssFileContent, cssContent);
+            if (cssChanged) {
+                console.log(`CSS module changed: ${cssFilePath}`);
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        return true; // CSS file doesn't exist, consider as new/changed
+    }
+    // Update node with change status and instructions
+    function updateNodeStatus(node, fileName, hasChanged, isCss = false) {
+        if (!hasChanged) {
+            const message = `This file ${fileName} has no changes, no need to update`;
+            if (isCss) {
+                node.cssContent = message;
+                node.instructionCSSForIDE = message;
+            }
+            else {
+                node.instructionForIDE = message;
+                node.content = message;
+            }
+        }
+        else if (!fs.existsSync(node.filePath)) {
+            node.instructionForIDE = 'This file does not exist, please create it';
+        }
+        return hasChanged;
+    }
+    // The main recursive function to process nodes
+    function processNode(node) {
+        let hasChanges = false;
+        // Remove experimental fields first
+        if (node.exportData) {
+            // Process main component file
+            if (node.filePath) {
+                const nodeContent = node.name.includes('.css') ?
+                    node.exportData.cssContent :
+                    node.exportData.content;
+                const fileChanged = checkFile(node.filePath, nodeContent);
+                node.codeChanged = fileChanged;
+                hasChanges = hasChanges || fileChanged;
+                updateNodeStatus(node, node.name, fileChanged);
+                // Check associated CSS module
+                if (node.exportData.cssFileName && node.exportData.cssContent) {
+                    const cssChanged = checkCssFile(node.filePath, node.exportData.cssFileName, node.exportData.cssContent);
+                    hasChanges = hasChanges || cssChanged;
+                    updateNodeStatus(node.exportData, node.exportData.cssFileName, cssChanged, true);
+                }
+            }
+            // Process dependencies
+            if (node.exportData.dependencies && Array.isArray(node.exportData.dependencies)) {
+                for (const dependency of node.exportData.dependencies) {
+                    // Process dependency file
+                    if (dependency.filePath) {
+                        const isCSS = dependency.name && dependency.name.includes('.css');
+                        const depContent = isCSS ? dependency.cssContent : dependency.content;
+                        const fileChanged = checkFile(dependency.filePath, depContent);
+                        dependency.codeChanged = fileChanged;
+                        hasChanges = hasChanges || fileChanged;
+                        updateNodeStatus(dependency, dependency.compName, fileChanged);
+                        // Check associated CSS module
+                        if (dependency.cssFileName && dependency.cssContent) {
+                            const cssChanged = checkCssFile(dependency.filePath, dependency.cssFileName, dependency.cssContent);
+                            hasChanges = hasChanges || cssChanged;
+                            updateNodeStatus(dependency, dependency.cssFileName, cssChanged, true);
+                        }
+                    }
+                    // Process nested dependencies recursively
+                    if (dependency.dependencies && Array.isArray(dependency.dependencies)) {
+                        for (const nestedDep of dependency.dependencies) {
+                            const nestedChanged = processNode(nestedDep);
+                            hasChanges = hasChanges || nestedChanged;
+                        }
+                    }
+                }
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            for (const child of node.children) {
+                const childChanged = processNode(child);
+                hasChanges = hasChanges || childChanged;
+            }
+        }
+        return hasChanges;
+    }
+    // Start processing from the root
+    return processNode(directoryStructure);
+}
+/**
+ * Compares two code snippets to determine if they are functionally different
+ * @param fileContent The code currently in the file
+ * @param apiCode The code provided by the API
+ * @returns True if the code has changed, false otherwise
+ */
+function hasCodeChanged(fileContent, apiCode) {
+    if (!fileContent || !apiCode) {
+        return true;
+    }
+    // Normalize both code snippets
+    const normalizedFile = normalizeForComparison(fileContent);
+    const normalizedApi = normalizeForComparison(apiCode);
+    // Simple equality check on normalized versions
+    return normalizedFile !== normalizedApi;
+}
+/**
+ * Normalizes code for comparison by removing irrelevant differences
+ * @param code The code to normalize
+ * @returns Normalized code string
+ */
+function normalizeForComparison(code) {
+    return code
+        .replace(/\s+/g, '') // Remove all whitespace (spaces, tabs, newlines)
+        .replace(/[;,'"]/g, '') // Remove semicolons, commas, and quotes
+        .replace(/\/\/.*$/gm, '') // Remove single-line comments
+        .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments
+        .toLowerCase(); // Convert to lowercase for case-insensitive comparison
+}
+/**
+ * Cleans the directory structure by removing unwanted properties from all nodes
+ * @param directoryStructure The directory structure to clean
+ * @returns The cleaned directory structure
+ */
+function cleanDirectoryStructure(directoryStructure) {
+    const propertiesToRemove = [
+        'files',
+        'component',
+        'jsLC',
+        'assetCount',
+        'cssLC',
+        'componentCount',
+        'pageMetaData',
+        'isHomePage',
+        'storybookFileName',
+        'isAutoSyncNode'
+    ];
+    function cleanNode(node) {
+        // Remove unwanted properties from the current node
+        propertiesToRemove.forEach(prop => {
+            if (node[prop] !== undefined)
+                delete node[prop];
+        });
+        // Clean exportData if it exists
+        if (node.exportData) {
+            propertiesToRemove.forEach(prop => {
+                if (node.exportData[prop] !== undefined)
+                    delete node.exportData[prop];
+            });
+            // Process dependencies in exportData
+            if (node.exportData.dependencies && Array.isArray(node.exportData.dependencies)) {
+                node.exportData.dependencies.forEach((dep) => cleanNode(dep));
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            node.children.forEach((child) => cleanNode(child));
+        }
+    }
+    // Start cleaning from the root
+    cleanNode(directoryStructure);
+    return directoryStructure;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locofy/mcp",
-  "version": "0.1.0",
+  "version": "1.0.2",
   "description": "Locofy MCP Server with Cursor",
   "keywords": [
     "figma",