nextjs-ide-helper 1.2.0 → 1.3.2

package/README.md

@@ -55,7 +55,7 @@ const nextConfig = {
 };
 
 module.exports = withIdeHelper({
-  componentPaths: ['src/components', 'components', 'src/ui'], // directories to scan
+  componentPaths: ['src/components', 'components', 'src/ui'], // directories to scan (supports glob patterns)
   projectRoot: process.cwd(), // project root directory
   importPath: 'nextjs-ide-plugin/withIdeButton', // import path for the HOC
   enabled: process.env.NODE_ENV === 'development', // enable/disable
@@ -67,12 +67,34 @@ module.exports = withIdeHelper({
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `componentPaths` | `string[]` | `['src/components']` | Directories to scan for React components |
+| `componentPaths` | `string[]` | `['src/components']` | Directories to scan for React components (supports glob patterns) |
 | `projectRoot` | `string` | `process.cwd()` | Root directory of your project |
 | `importPath` | `string` | `'nextjs-ide-plugin/withIdeButton'` | Import path for the withIdeButton HOC |
 | `enabled` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable the plugin |
 | `ideType` | `'cursor' \| 'vscode' \| 'webstorm' \| 'atom'` | `'cursor'` | IDE to open files in |
 
+### Glob Pattern Support
+
+The `componentPaths` option supports glob patterns for matching nested directory structures:
+
+```javascript
+module.exports = withIdeHelper({
+  componentPaths: [
+    'src/components/**',           // matches all nested directories under src/components
+    '**/components/**',           // matches components directories anywhere in the project
+    'app/**/ui/**',               // matches ui directories nested anywhere under app
+    'modules/*/components/**'     // matches components in any module subdirectory
+  ]
+})(nextConfig);
+```
+
+**Glob Pattern Examples:**
+- `*` - matches any characters within a single directory level
+- `**` - matches any number of directories and subdirectories recursively
+- `src/components/*` - matches `src/components/Button.tsx` but not `src/components/ui/Button.tsx`
+- `src/components/**` - matches both `src/components/Button.tsx` and `src/components/ui/forms/Button.tsx`
+- `**/components/**` - matches `app/components/Button.tsx`, `modules/feature/components/deep/Widget.tsx`, etc.
+
 ## Manual Usage
 
 You can also manually wrap components:
@@ -305,6 +327,12 @@ See [CHANGELOG.md](./CHANGELOG.md) for detailed release notes.
 
 ### Recent Releases
 
+### 1.3.0 - Glob Pattern Support
+- Added support for glob patterns in `componentPaths` configuration
+- Support for nested directory matching with `**` patterns
+- Enhanced file path matching for complex project structures
+- Updated tests and documentation
+
 ### 1.2.0 - Enhanced Component Support
 - Added support for all React component export patterns
 - AST-based code transformation for better reliability

package/lib/__tests__/loader.test.js

@@ -0,0 +1,480 @@
+const path = require('path');
+const loader = require('../loader.js');
+
+describe('cursorButtonLoader', function() {
+  let mockContext;
+
+  beforeEach(function() {
+    mockContext = {
+      resourcePath: process.cwd() + '/src/components/Button.tsx',
+      getOptions: jest.fn(() => ({}))
+    };
+    
+    process.env.NODE_ENV = 'development';
+  });
+
+  afterEach(function() {
+    jest.clearAllMocks();
+  });
+
+  describe('when enabled', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should wrap a React component with withIdeButton', function() {
+      const source = `import React from 'react';
+
+const Button = () => {
+  return <button>Click me</button>;
+};
+
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(Button,");
+      expect(result).toMatch(/projectRoot: ['"][^'"]*['"]/); // Accept both single and double quotes and any valid path
+    });
+
+    it('should handle JSX files', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/Button.jsx';
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(Button,");
+    });
+
+    it('should handle components with existing imports', function() {
+      const source = `import React from 'react';
+import { useState } from 'react';
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+  return <div>{count}</div>;
+};
+
+export default Counter;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(Counter,");
+      
+      const lines = result.split('\n');
+      const importIndex = lines.findIndex(line => line.includes("import { withIdeButton }"));
+      const useStateIndex = lines.findIndex(line => line.includes("import { useState }"));
+      expect(importIndex).toBeGreaterThan(useStateIndex);
+    });
+
+    it('should handle components with no imports', function() {
+      const source = `const SimpleButton = () => {
+  return <button>Simple</button>;
+};
+
+export default SimpleButton;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(SimpleButton,");
+      expect(result.indexOf("import { withIdeButton }")).toBe(0);
+    });
+
+    it('should include relative path in the wrapper', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/ui/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("'src/components/ui/Button.tsx'");
+    });
+
+    it('should use custom import path when specified', function() {
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        importPath: 'custom-ide-helper'
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'custom-ide-helper';");
+    });
+  });
+
+  describe('when disabled', function() {
+    it('should return source unchanged when enabled is false', function() {
+      mockContext.getOptions.mockReturnValue({ enabled: false });
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should return source unchanged when NODE_ENV is production and enabled not explicitly set', function() {
+      process.env.NODE_ENV = 'production';
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+  });
+
+  describe('file filtering', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should not process files outside component directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/utils/helper.tsx';
+      const source = `const Helper = () => <div>Helper</div>;
+export default Helper;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should process files in custom component directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/widgets/MyWidget.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/widgets'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const MyWidget = () => <div>Widget</div>;
+export default MyWidget;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+    });
+
+    it('should not process non-JSX/TSX files', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/Button.js';
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+  });
+
+  describe('component detection', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should not process files without default export', function() {
+      const source = `export const Button = () => <button>Click</button>;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should not process files with lowercase default export', function() {
+      const source = `const button = () => <button>Click</button>;
+export default button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should process files with PascalCase default export', function() {
+      const source = `const MyButton = () => <button>Click</button>;
+export default MyButton;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+    });
+
+    it('should process direct export default function declarations', function() {
+      const source = `export default function MyCoolComponent() {
+  return <div>My Cool Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(MyCoolComponent,");
+    });
+
+    it('should process direct export default arrow function expressions', function() {
+      const source = `export default () => {
+  return <div>Anonymous Component</div>;
+};`;
+
+      const result = loader.call(mockContext, source);
+
+      // Should process anonymous components using file path
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(");
+    });
+
+    it('should process anonymous function expressions', function() {
+      const source = `export default function() {
+  return <div>Anonymous Function Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      // Should process anonymous function components
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(");
+    });
+
+    it('should process direct export default class components', function() {
+      const source = `import React from 'react';
+
+export default class MyClassComponent extends React.Component {
+  render() {
+    return <div>Class Component</div>;
+  }
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(MyClassComponent,");
+    });
+
+    it('should not process lowercase direct export default functions', function() {
+      const source = `export default function myLowercaseComponent() {
+  return <div>Lowercase Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should handle direct export default with complex function names', function() {
+      const source = `export default function MyComplexComponent123WithNumbers() {
+  return <div>Complex Named Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(MyComplexComponent123WithNumbers,");
+    });
+
+    it('should handle function components with TypeScript', function() {
+      const source = `interface Props {
+  title: string;
+}
+
+export default function TypeScriptComponent(props: Props) {
+  return <div>{props.title}</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(TypeScriptComponent,");
+      expect(result).toContain("function TypeScriptComponent(props: Props)");
+    });
+
+    it('should handle class components with TypeScript', function() {
+      const source = `import React, { Component } from 'react';
+
+interface Props {
+  name: string;
+}
+
+export default class TSClassComponent extends Component<Props> {
+  render() {
+    return <div>Hello {this.props.name}</div>;
+  }
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(TSClassComponent,");
+      expect(result).toContain("class TSClassComponent extends Component<Props>");
+    });
+  });
+
+  describe('already wrapped components', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should not wrap components that are already wrapped', function() {
+      const source = `import { withIdeButton } from 'nextjs-ide-helper';
+
+const Button = () => <button>Click</button>;
+
+export default withIdeButton(Button, 'src/components/Button.tsx');`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect((result.match(/withIdeButton/g) || []).length).toBe(2);
+    });
+  });
+
+  describe('edge cases', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should handle export default with semicolon', function() {
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("export default withIdeButton(Button,");
+      expect(result).not.toContain("export default Button;");
+    });
+
+    it('should handle export default without semicolon', function() {
+      const source = `const Button = () => <button>Click</button>
+export default Button`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("export default withIdeButton(Button,");
+      expect(result).not.toContain("export default Button");
+    });
+
+    it('should handle complex component names', function() {
+      const source = `const MyComplexComponent123 = () => <div>Complex</div>;
+export default MyComplexComponent123;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("export default withIdeButton(MyComplexComponent123,");
+    });
+
+    it('should handle files with multiple component paths', function() {
+      mockContext.resourcePath = process.cwd() + '/lib/components/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components', 'lib/components'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+    });
+
+    it('should support regex patterns in component paths for nested directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/ui/forms/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'src/components/ui/forms/Button.tsx'");
+    });
+
+    it('should support regex patterns matching any nested directory structure', function() {
+      mockContext.resourcePath = process.cwd() + '/app/components/dashboard/widgets/Chart.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['**/components/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Chart = () => <div>Chart</div>;
+export default Chart;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'app/components/dashboard/widgets/Chart.tsx'");
+    });
+
+    it('should support multiple regex patterns for different nested structures', function() {
+      mockContext.resourcePath = process.cwd() + '/modules/feature-a/components/deep/nested/Widget.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components/**', 'modules/**/components/**', 'lib/ui/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Widget = () => <div>Widget</div>;
+export default Widget;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'modules/feature-a/components/deep/nested/Widget.tsx'");
+    });
+  });
+
+  describe('options handling', function() {
+    it('should use default options when none provided', function() {
+      mockContext.getOptions.mockReturnValue(null);
+      process.env.NODE_ENV = 'development';
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'nextjs-ide-helper'");
+    });
+
+    it('should handle custom project root', function() {
+      const customRoot = '/custom/project';
+      mockContext.resourcePath = customRoot + '/src/components/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        projectRoot: customRoot
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toMatch(new RegExp("projectRoot:\\s*['\"]" + customRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "['\"]"));
+      expect(result).toContain("'src/components/Button.tsx'");
+    });
+  });
+});

package/lib/index.ts

@@ -0,0 +1,8 @@
+// Main exports
+export { withIdeButton } from './withIdeButton';
+export type { WithIdeButtonOptions } from './withIdeButton';
+
+// Next.js plugin
+const withIdeHelper = require('./plugin');
+export default withIdeHelper;
+export { withIdeHelper };

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.2.0",
+  "version": "1.3.2",
   "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",
@@ -41,6 +41,7 @@
     "@types/node": "^20.19.9",
     "@types/react": "^18.3.23",
     "jest": "^30.0.5",
+    "minimatch": "^10.0.3",
     "typescript": "^5.8.3"
   },
   "repository": {

package/src/__tests__/loader.test.js

@@ -393,6 +393,57 @@ export default Button;`;
 
       expect(result).toContain('withIdeButton');
     });
+
+    it('should support regex patterns in component paths for nested directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/ui/forms/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'src/components/ui/forms/Button.tsx'");
+    });
+
+    it('should support regex patterns matching any nested directory structure', function() {
+      mockContext.resourcePath = process.cwd() + '/app/components/dashboard/widgets/Chart.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['**/components/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Chart = () => <div>Chart</div>;
+export default Chart;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'app/components/dashboard/widgets/Chart.tsx'");
+    });
+
+    it('should support multiple regex patterns for different nested structures', function() {
+      mockContext.resourcePath = process.cwd() + '/modules/feature-a/components/deep/nested/Widget.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components/**', 'modules/**/components/**', 'lib/ui/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Widget = () => <div>Widget</div>;
+export default Widget;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'modules/feature-a/components/deep/nested/Widget.tsx'");
+    });
   });
 
   describe('options handling', function() {

package/src/loader.js

@@ -3,6 +3,7 @@ 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
@@ -13,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(),
@@ -22,23 +25,44 @@ 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 using simple string check for performance
   if (source.includes('withIdeButton')) {
+    console.log('🔧 File already contains withIdeButton, skipping');
     return source;
   }
 
+  console.log('🔧 Proceeding to transform file:', relativePath);
+
   let ast;
   try {
     // Parse the source code into an AST
@@ -136,8 +160,7 @@ module.exports = function cursorButtonLoader(source) {
     return source;
   }
 
-  // Get relative path from project root
-  const relativePath = path.relative(projectRoot, filename);
+  // relativePath already declared above for glob matching
 
   // Transform the AST
   let modified = false;

package/src/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,18 +33,29 @@ 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.js'),
@@ -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