nextjs-ide-helper 1.1.3 → 1.3.1

package/lib/loader.js

@@ -1,4 +1,9 @@
 const path = require('path');
+const { parse } = require('@babel/parser');
+const traverse = require('@babel/traverse').default;
+const generate = require('@babel/generator').default;
+const t = require('@babel/types');
+const { minimatch } = require('minimatch');
 
 /**
  * Webpack loader that automatically wraps React components with cursor buttons
@@ -9,6 +14,8 @@ module.exports = function cursorButtonLoader(source) {
   const filename = this.resourcePath;
   const options = this.getOptions() || {};
   
+  console.log('🔧 Loader called for file:', filename);
+  
   const {
     componentPaths = ['src/components'],
     projectRoot = process.cwd(),
@@ -18,62 +25,244 @@ module.exports = function cursorButtonLoader(source) {
 
   // Only process if enabled
   if (!enabled) {
+    console.log('🔧 Loader disabled, returning original source');
     return source;
   }
   
   // Only process files in specified component directories
-  const shouldProcess = componentPaths.some(componentPath => 
-    filename.includes(path.resolve(projectRoot, componentPath))
-  );
+  const relativePath = path.relative(projectRoot, filename);
+  console.log('🔧 Processing file:', relativePath, 'against paths:', componentPaths);
+  
+  const shouldProcess = componentPaths.some(componentPath => {
+    console.log('🔧 Checking path:', componentPath);
+    // Check if componentPath contains glob patterns
+    if (componentPath.includes('*')) {
+      const matches = minimatch(relativePath, componentPath);
+      console.log('🔧 Glob match result:', matches, 'for pattern:', componentPath);
+      return matches;
+    } else {
+      // Fallback to the original behavior for non-glob patterns
+      const matches = filename.includes(path.resolve(projectRoot, componentPath));
+      console.log('🔧 Direct path match result:', matches);
+      return matches;
+    }
+  });
+  
+  console.log('🔧 Should process:', shouldProcess);
   
   if (!shouldProcess || (!filename.endsWith('.tsx') && !filename.endsWith('.jsx'))) {
+    console.log('🔧 File does not match criteria, skipping');
     return source;
   }
 
-  // Check if it's already wrapped
+  // Check if it's already wrapped using simple string check for performance
   if (source.includes('withIdeButton')) {
+    console.log('🔧 File already contains withIdeButton, skipping');
     return source;
   }
 
-  // Check if it has a default export that looks like a React component
-  const defaultExportMatch = source.match(/export\s+default\s+(\w+)/);
-  if (!defaultExportMatch) {
+  console.log('🔧 Proceeding to transform file:', relativePath);
+
+  let ast;
+  try {
+    // Parse the source code into an AST
+    ast = parse(source, {
+      sourceType: 'module',
+      plugins: [
+        'jsx',
+        'typescript',
+        'decorators-legacy',
+        'classProperties',
+        'objectRestSpread',
+        'asyncGenerators',
+        'functionBind',
+        'exportDefaultFrom',
+        'exportNamespaceFrom',
+        'dynamicImport',
+        'nullishCoalescingOperator',
+        'optionalChaining'
+      ]
+    });
+  } catch (error) {
+    // If parsing fails, return original source
+    return source;
+  }
+
+  let hasDefaultExport = false;
+  let defaultExportName = null;
+  let isAnonymousComponent = false;
+  let hasWithIdeButtonImport = false;
+  let lastImportPath = null;
+  let defaultExportPath = null;
+
+  // Traverse the AST to analyze the code
+  traverse(ast, {
+    ImportDeclaration(path) {
+      lastImportPath = path;
+      
+      // Check if withIdeButton is already imported
+      if (path.node.source.value === importPath) {
+        path.node.specifiers.forEach(spec => {
+          if (t.isImportSpecifier(spec) && spec.imported.name === 'withIdeButton') {
+            hasWithIdeButtonImport = true;
+          }
+        });
+      }
+    },
+    
+    ExportDefaultDeclaration(path) {
+      hasDefaultExport = true;
+      defaultExportPath = path;
+      
+      if (t.isIdentifier(path.node.declaration)) {
+        // export default ComponentName
+        defaultExportName = path.node.declaration.name;
+      } else if (t.isFunctionDeclaration(path.node.declaration)) {
+        if (path.node.declaration.id) {
+          // export default function ComponentName() {}
+          defaultExportName = path.node.declaration.id.name;
+        } else {
+          // export default function() {} - anonymous function
+          isAnonymousComponent = true;
+        }
+      } else if (t.isClassDeclaration(path.node.declaration) && path.node.declaration.id) {
+        // export default class ComponentName extends ... {}
+        defaultExportName = path.node.declaration.id.name;
+      } else if (t.isArrowFunctionExpression(path.node.declaration)) {
+        // export default () => {} - anonymous arrow function
+        isAnonymousComponent = true;
+      } else if (t.isVariableDeclaration(path.node.declaration)) {
+        // export default const ComponentName = ...
+        const declarator = path.node.declaration.declarations[0];
+        if (t.isIdentifier(declarator.id)) {
+          defaultExportName = declarator.id.name;
+        }
+      }
+      
+      // Stop traversal once we find the default export
+      path.stop();
+    }
+  });
+
+  // Check if we should process this file
+  if (!hasDefaultExport || (!defaultExportName && !isAnonymousComponent)) {
     return source;
   }
 
-  const componentName = defaultExportMatch[1];
-  
   // Check if component name starts with uppercase (React component convention)
-  if (!componentName || componentName[0] !== componentName[0].toUpperCase()) {
+  // Skip this check for anonymous components
+  if (defaultExportName && defaultExportName[0] !== defaultExportName[0].toUpperCase()) {
     return source;
   }
 
-  // Get relative path from project root
-  const relativePath = path.relative(projectRoot, filename);
+  // If withIdeButton is already imported, don't process
+  if (hasWithIdeButtonImport) {
+    return source;
+  }
 
-  // Find the last import to insert our import after it
-  const imports = source.match(/^import.*$/gm) || [];
-  
-  let modifiedSource;
-  
-  if (imports.length === 0) {
-    // No imports found, add at top
-    const importStatement = `import { withIdeButton } from '${importPath}';\n`;
-    const wrappedExport = `export default withIdeButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
-    modifiedSource = importStatement + source.replace(/export\s+default\s+\w+;?/, wrappedExport);
+  // relativePath already declared above for glob matching
+
+  // Transform the AST
+  let modified = false;
+
+  // Add the withIdeButton import
+  const withIdeButtonImport = t.importDeclaration(
+    [t.importSpecifier(t.identifier('withIdeButton'), t.identifier('withIdeButton'))],
+    t.stringLiteral(importPath)
+  );
+
+  // Insert import after last existing import or at the beginning
+  if (lastImportPath) {
+    lastImportPath.insertAfter(withIdeButtonImport);
+    modified = true;
   } else {
-    const lastImportIndex = source.lastIndexOf(imports[imports.length - 1]) + imports[imports.length - 1].length;
-    
-    // Add import statement
-    const importStatement = `\nimport { withIdeButton } from '${importPath}';`;
-    
-    // Replace the export
-    const wrappedExport = `export default withIdeButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
+    // No imports found, add at the beginning
+    if (ast.program && ast.program.body && Array.isArray(ast.program.body)) {
+      ast.program.body.unshift(withIdeButtonImport);
+      modified = true;
+    }
+  }
+
+  // Replace the default export with wrapped version
+  if (defaultExportPath && modified) {
+    let wrappedCall;
     
-    modifiedSource = source.slice(0, lastImportIndex) + 
-                     importStatement + 
-                     source.slice(lastImportIndex).replace(/export\s+default\s+\w+;?/, wrappedExport);
+    if (isAnonymousComponent) {
+      // For anonymous components, wrap the original function/arrow function
+      let componentExpression;
+      
+      if (t.isFunctionDeclaration(defaultExportPath.node.declaration)) {
+        // Convert anonymous function declaration to function expression
+        componentExpression = t.functionExpression(
+          null, // id is null for anonymous
+          defaultExportPath.node.declaration.params,
+          defaultExportPath.node.declaration.body,
+          defaultExportPath.node.declaration.generator,
+          defaultExportPath.node.declaration.async
+        );
+      } else {
+        // For arrow functions and other expressions, use directly
+        componentExpression = defaultExportPath.node.declaration;
+      }
+      
+      wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          componentExpression,
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+    } else {
+      // For named components, wrap with the component name identifier
+      wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          t.identifier(defaultExportName),
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+    }
+
+    // If the export is a named function or class declaration, we need to handle it differently
+    if (!isAnonymousComponent && 
+        (t.isFunctionDeclaration(defaultExportPath.node.declaration) || 
+         t.isClassDeclaration(defaultExportPath.node.declaration))) {
+      // Insert the function/class declaration before the export
+      const declaration = defaultExportPath.node.declaration;
+      defaultExportPath.insertBefore(declaration);
+      
+      // Replace the export declaration with the wrapped call
+      defaultExportPath.node.declaration = wrappedCall;
+    } else {
+      // For other cases (identifier, variable declaration, anonymous functions), just replace the declaration
+      defaultExportPath.node.declaration = wrappedCall;
+    }
   }
 
-  return modifiedSource;
+  // Generate the transformed code
+  if (modified) {
+    try {
+      const result = generate(ast, {
+        retainLines: false,
+        compact: false,
+        jsescOption: {
+          quotes: 'single'
+        }
+      });
+      return result.code;
+    } catch (error) {
+      // If generation fails, return original source
+      return source;
+    }
+  }
+
+  // If we reach here, nothing was modified
+
+  return source;
 };

package/lib/plugin.js

@@ -9,6 +9,16 @@ const path = require('path');
  * @property {boolean} [enabled=process.env.NODE_ENV === 'development'] - Enable/disable the plugin
  */
 
+/**
+ * Extract base directory from a glob pattern
+ * @param {string} globPattern - The glob pattern
+ * @returns {string} - The base directory
+ */
+function extractBaseDirectory(globPattern) {
+  // Remove glob patterns (**/ */  etc.) to get the base directory
+  return globPattern.replace(/\/\*\*.*$/, '').replace(/\/\*.*$/, '');
+}
+
 /**
  * NextJS Cursor Helper plugin
  * @param {CursorHelperOptions} options - Configuration options
@@ -23,21 +33,32 @@ function withCursorHelper(options = {}) {
   };
 
   const config = { ...defaultOptions, ...options };
+  
+  console.log('🔧 Plugin initialized with config:', config);
 
   return (nextConfig = {}) => {
     return {
       ...nextConfig,
       webpack: (webpackConfig, context) => {
         const { dev, isServer } = context;
+        
+        console.log('🔧 Webpack config called:', { dev, isServer, enabled: config.enabled });
 
         // Only apply in development and for client-side
         if (config.enabled && dev && !isServer) {
+          // Extract base directories from glob patterns for webpack's include
+          const includeDirectories = [...new Set(
+            config.componentPaths.map(p => extractBaseDirectory(p))
+          )].map(p => path.resolve(config.projectRoot, p));
+          
+          console.log('🔧 Adding webpack rule with include directories:', includeDirectories);
+
           const rule = {
             test: /\.tsx?$/,
-            include: config.componentPaths.map(p => path.resolve(config.projectRoot, p)),
+            include: includeDirectories,
             use: [
               {
-                loader: require.resolve('./loader'),
+                loader: require.resolve('./loader.js'),
                 options: config
               }
             ],
@@ -45,6 +66,9 @@ function withCursorHelper(options = {}) {
           };
 
           webpackConfig.module.rules.unshift(rule);
+          console.log('🔧 Webpack rule added successfully');
+        } else {
+          console.log('🔧 Plugin conditions not met, skipping webpack rule');
         }
 
         // Call the existing webpack function if it exists

package/lib/withIdeButton.tsx

@@ -0,0 +1,97 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+
+interface IdeButtonProps {
+  filePath: string;
+  projectRoot?: string;
+  ideType?: 'cursor' | 'vscode' | 'webstorm' | 'atom';
+}
+
+const IdeButton: React.FC<IdeButtonProps> = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+  const getIdeUrl = (ide: string, path: string) => {
+    const fullPath = projectRoot ? `${projectRoot}/${path}` : path;
+    
+    switch (ide) {
+      case 'cursor':
+        return `cursor://file${fullPath}`;
+      case 'vscode':
+        return `vscode://file${fullPath}`;
+      case 'webstorm':
+        return `webstorm://open?file=${fullPath}`;
+      case 'atom':
+        return `atom://open?path=${fullPath}`;
+      default:
+        return `cursor://file${fullPath}`;
+    }
+  };
+
+  const handleClick = () => {
+    const url = getIdeUrl(ideType, filePath);
+    window.open(url, '_blank');
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      style={{
+        position: 'absolute',
+        top: '8px',
+        right: '8px',
+        background: '#007acc',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        padding: '4px 8px',
+        fontSize: '12px',
+        cursor: 'pointer',
+        zIndex: 1000,
+        opacity: 0.7,
+        transition: 'opacity 0.2s',
+        fontFamily: 'monospace'
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
+      onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.7')}
+      title={`Open ${filePath} in ${ideType.toUpperCase()}`}
+    >
+      📝
+    </button>
+  );
+};
+
+export interface WithIdeButtonOptions {
+  projectRoot?: string;
+  enabled?: boolean;
+  ideType?: 'cursor' | 'vscode' | 'webstorm' | 'atom';
+}
+
+export function withIdeButton<T extends object>(
+  WrappedComponent: React.ComponentType<T>,
+  filePath: string,
+  options: WithIdeButtonOptions = {}
+) {
+  const { projectRoot, enabled = process.env.NODE_ENV === 'development', ideType = 'cursor' } = options;
+
+  const WithIdeButtonComponent: React.FC<T> = (props) => {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    // In production or when disabled, just return the component without wrapper
+    if (!enabled || !isClient) {
+      return <WrappedComponent {...props} />;
+    }
+
+    return (
+      <div style={{ position: 'relative' }}>
+        <IdeButton filePath={filePath} projectRoot={projectRoot} ideType={ideType} />
+        <WrappedComponent {...props} />
+      </div>
+    );
+  };
+
+  WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
+
+  return WithIdeButtonComponent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-ide-helper",
-  "version": "1.1.3",
+  "version": "1.3.1",
   "description": "A Next.js plugin that automatically adds IDE buttons to React components for seamless IDE integration. Supports Cursor, VS Code, WebStorm, and Atom.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -11,7 +11,7 @@
   "scripts": {
     "build": "tsc",
     "prepare": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "keywords": [
     "nextjs",
@@ -33,8 +33,15 @@
     "react": ">=18.0.0"
   },
   "devDependencies": {
+    "@babel/generator": "^7.28.0",
+    "@babel/parser": "^7.28.0",
+    "@babel/traverse": "^7.28.0",
+    "@babel/types": "^7.28.2",
+    "@types/jest": "^30.0.0",
     "@types/node": "^20.19.9",
     "@types/react": "^18.3.23",
+    "jest": "^30.0.5",
+    "minimatch": "^10.0.3",
     "typescript": "^5.8.3"
   },
   "repository": {