nextjs-ide-helper 1.3.3 → 1.4.1

package/src/__tests__/loader.test.js

@@ -188,8 +188,9 @@ export default Button;`;
       mockContext.getOptions.mockReturnValue({ enabled: true });
     });
 
-    it('should not process files without default export', function() {
-      const source = `export const Button = () => <button>Click</button>;`;
+    it('should not process files without any React component exports', function() {
+      const source = `export const API_URL = 'http://localhost:3000';
+export const utils = { format: () => {} };`;
 
       const result = loader.call(mockContext, source);
 
@@ -197,6 +198,127 @@ export default Button;`;
       expect(result).not.toContain('withIdeButton');
     });
 
+    it('should process named exports and wrap them with withIdeButton', function() {
+      const source = `export const Button = () => <button>Click</button>;
+export const Modal = () => <div>Modal</div>;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export const Button = withIdeButton(() => <button>Click</button>,");
+      expect(result).toContain("export const Modal = withIdeButton(() => <div>Modal</div>,");
+      expect(result).toMatch(/projectRoot: ['"][^'"]*['"]/);
+      
+      // Verify the complete structure
+      const lines = result.split('\n');
+      const importLine = lines.find(line => line.includes("import { withIdeButton }"));
+      const buttonLine = lines.find(line => line.includes("export const Button = withIdeButton"));
+      const modalLine = lines.find(line => line.includes("export const Modal = withIdeButton"));
+      
+      expect(importLine).toBeDefined();
+      expect(buttonLine).toBeDefined();
+      expect(modalLine).toBeDefined();
+      
+      // Verify each wrapped export contains the file path
+      expect(buttonLine).toContain("'src/components/Button.tsx'");
+      expect(modalLine).toContain("'src/components/Button.tsx'");
+    });
+
+    it('should process mixed named and default exports', function() {
+      const source = `export const Button = () => <button>Click</button>;
+
+const MainComponent = () => <div>Main</div>;
+export default MainComponent;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export const Button = withIdeButton(() => <button>Click</button>,");
+      expect(result).toContain("export default withIdeButton(MainComponent,");
+      
+      // Verify both exports are properly wrapped
+      const lines = result.split('\n');
+      const namedExportLine = lines.find(line => line.includes("export const Button = withIdeButton"));
+      const defaultExportLine = lines.find(line => line.includes("export default withIdeButton(MainComponent"));
+      
+      expect(namedExportLine).toBeDefined();
+      expect(defaultExportLine).toBeDefined();
+      
+      // Verify file paths are included
+      expect(namedExportLine).toContain("'src/components/Button.tsx'");
+      expect(defaultExportLine).toContain("'src/components/Button.tsx'");
+    });
+
+    it('should process named function exports', function() {
+      const source = `export function MyButton() {
+  return <button>Function Button</button>;
+}
+
+export function MyModal() {
+  return <div>Function Modal</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      
+      // For function exports, the function should be declared first, then wrapped
+      expect(result).toContain("function MyButton()");
+      expect(result).toContain("function MyModal()");
+      expect(result).toContain("const MyButton = withIdeButton(MyButton,");
+      expect(result).toContain("const MyModal = withIdeButton(MyModal,");
+      
+      // Verify file paths
+      expect(result).toContain("'src/components/Button.tsx'");
+    });
+
+    it('should not process lowercase named exports', function() {
+      const source = `export const button = () => <button>lowercase</button>;
+export const modal = () => <div>lowercase modal</div>;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should process complex mixed scenario with multiple export types', function() {
+      const source = `import React from 'react';
+
+export const PrimaryButton = () => <button className="primary">Primary</button>;
+export const SecondaryButton = () => <button className="secondary">Secondary</button>;
+
+export function DialogModal() {
+  return <div>Dialog Content</div>;
+}
+
+const MainLayout = ({ children }) => <div className="layout">{children}</div>;
+export default MainLayout;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      
+      // Named arrow function exports
+      expect(result).toContain("export const PrimaryButton = withIdeButton(() => <button className=\"primary\">Primary</button>,");
+      expect(result).toContain("export const SecondaryButton = withIdeButton(() => <button className=\"secondary\">Secondary</button>,");
+      
+      // Named function export
+      expect(result).toContain("function DialogModal()");
+      expect(result).toContain("const DialogModal = withIdeButton(DialogModal,");
+      
+      // Default export
+      expect(result).toContain("export default withIdeButton(MainLayout,");
+      
+      // Verify React import is preserved and withIdeButton import is added after it
+      const lines = result.split('\n');
+      const reactImportIndex = lines.findIndex(line => line.includes("import React from 'react'"));
+      const withIdeButtonImportIndex = lines.findIndex(line => line.includes("import { withIdeButton }"));
+      
+      expect(reactImportIndex).toBeGreaterThan(-1);
+      expect(withIdeButtonImportIndex).toBeGreaterThan(reactImportIndex);
+    });
+
     it('should not process files with lowercase default export', function() {
       const source = `const button = () => <button>Click</button>;
 export default button;`;
@@ -323,6 +445,218 @@ export default class TSClassComponent extends Component<Props> {
       expect(result).toContain("export default withIdeButton(TSClassComponent,");
       expect(result).toContain("class TSClassComponent extends Component<Props>");
     });
+
+    it('should process named exports with TypeScript types', function() {
+      const source = `interface ButtonProps {
+  onClick: () => void;
+}
+
+export const TypedButton = ({ onClick }: ButtonProps) => <button onClick={onClick}>Typed Button</button>;
+
+type ModalProps = {
+  isOpen: boolean;
+}
+
+export const TypedModal = ({ isOpen }: ModalProps) => isOpen ? <div>Modal</div> : null;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export const TypedButton = withIdeButton(({");
+      expect(result).toContain("onClick");
+      expect(result).toContain("}: ButtonProps) => <button onClick={onClick}>Typed Button</button>,");
+      expect(result).toContain("export const TypedModal = withIdeButton(({");
+      expect(result).toContain("isOpen");
+      expect(result).toContain("}: ModalProps) => isOpen ? <div>Modal</div> : null,");
+      
+      // Verify interfaces and types are preserved
+      expect(result).toContain("interface ButtonProps");
+      expect(result).toContain("type ModalProps");
+    });
+
+    it('should handle mixed named exports with non-component exports', function() {
+      const source = `export const API_URL = 'https://api.example.com';
+export const utils = { format: () => {} };
+
+export const Button = () => <button>Click</button>;
+export const Modal = () => <div>Modal</div>;
+
+export const config = { theme: 'dark' };`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      
+      // Component exports should be wrapped
+      expect(result).toContain("export const Button = withIdeButton(() => <button>Click</button>,");
+      expect(result).toContain("export const Modal = withIdeButton(() => <div>Modal</div>,");
+      
+      // Non-component exports should remain unchanged (check for key parts since formatting may vary)
+      expect(result).toContain("export const API_URL = 'https://api.example.com';");
+      expect(result).toContain("export const utils = {");
+      expect(result).toContain("format: () => {}");
+      expect(result).toContain("export const config = {");
+      expect(result).toContain("theme: 'dark'");
+    });
+
+    it('should handle complex export patterns with existing imports', function() {
+      const source = `import React, { useState, useEffect } from 'react';
+import { someUtil } from './utils';
+
+export const InteractiveButton = () => {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
+};
+
+export function StatefulModal() {
+  useEffect(() => {
+    console.log('Modal mounted');
+  }, []);
+  return <div>Stateful Modal</div>;
+}
+
+const ComplexComponent = () => {
+  return <div>Complex</div>;
+};
+
+export default ComplexComponent;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      
+      // Verify all imports are preserved
+      expect(result).toContain("import React, { useState, useEffect } from 'react';");
+      expect(result).toContain("import { someUtil } from './utils';");
+      
+      // Verify withIdeButton import is added after existing imports
+      const lines = result.split('\n');
+      const reactImportIndex = lines.findIndex(line => line.includes("import React"));
+      const utilImportIndex = lines.findIndex(line => line.includes("import { someUtil }"));
+      const withIdeButtonImportIndex = lines.findIndex(line => line.includes("import { withIdeButton }"));
+      
+      expect(withIdeButtonImportIndex).toBeGreaterThan(Math.max(reactImportIndex, utilImportIndex));
+      
+      // Verify component transformations
+      expect(result).toContain("export const InteractiveButton = withIdeButton(() => {");
+      expect(result).toContain("function StatefulModal()");
+      expect(result).toContain("const StatefulModal = withIdeButton(StatefulModal,");
+      expect(result).toContain("export default withIdeButton(ComplexComponent,");
+    });
+
+    it('should handle files with only named exports (no default export)', function() {
+      const source = `export const HeaderButton = () => <button>Header</button>;
+export const FooterButton = () => <button>Footer</button>;
+export const SidebarButton = () => <button>Sidebar</button>;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export const HeaderButton = withIdeButton(() => <button>Header</button>,");
+      expect(result).toContain("export const FooterButton = withIdeButton(() => <button>Footer</button>,");
+      expect(result).toContain("export const SidebarButton = withIdeButton(() => <button>Sidebar</button>,");
+      
+      // Verify no default export processing
+      expect(result).not.toContain("export default");
+    });
+
+    it('should preserve comments and formatting in named exports', function() {
+      const source = `// Header comment
+export const Button = () => <button>Click</button>; // Inline comment
+
+/* Block comment */
+export const Modal = () => <div>Modal</div>;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export const Button = withIdeButton(() => <button>Click</button>,");
+      expect(result).toContain("export const Modal = withIdeButton(() => <div>Modal</div>,");
+    });
+
+    it('should not double-wrap components that are both named and default exports', function() {
+      const source = `const MyComponent = () => <div>Shared Component</div>;
+
+export { MyComponent }; // named export
+export default MyComponent; // default export`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      
+      // Should only have one withIdeButton import
+      const importMatches = (result.match(/import.*withIdeButton/g) || []);
+      expect(importMatches).toHaveLength(1);
+      
+      // Should only wrap once - either as named or default, not both
+      const withIdeButtonMatches = (result.match(/withIdeButton\(/g) || []);
+      expect(withIdeButtonMatches.length).toBeLessThanOrEqual(2); // At most one for named, one for default
+      
+      // Verify the component isn't wrapped multiple times in the same export
+      expect(result).not.toContain("withIdeButton(withIdeButton(");
+    });
+
+    it('should handle component exported as both const and default', function() {
+      const source = `export const MyComponent = () => <div>Component</div>;
+export default MyComponent;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      
+      // Should only have one withIdeButton import
+      const importMatches = (result.match(/import.*withIdeButton/g) || []);
+      expect(importMatches).toHaveLength(1);
+      
+      // Should wrap both the named export and default export separately
+      expect(result).toContain("export const MyComponent = withIdeButton(() => <div>Component</div>,");
+      expect(result).toContain("export default withIdeButton(MyComponent,");
+      
+      // But shouldn't double-wrap
+      expect(result).not.toContain("withIdeButton(withIdeButton(");
+    });
+
+    it('should handle TypeScript React.FC named exports', function() {
+      const source = `import React from 'react';
+
+interface TestComponentProps {
+  message: string;
+}
+
+export const TestComponent: React.FC<TestComponentProps> = ({ message }) => {
+  return (
+    <div style={{
+      padding: '20px',
+      margin: '10px',
+      border: '2px solid #007acc',
+      borderRadius: '8px',
+      backgroundColor: '#f0f8ff'
+    }}>
+      <h2>Test Component</h2>
+      <p>{message}</p>
+    </div>
+  );
+};`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export const TestComponent: React.FC<TestComponentProps> = withIdeButton(");
+      expect(result).toContain("'src/components/Button.tsx'");
+      
+      // Verify the original React import is preserved
+      expect(result).toContain("import React from 'react';");
+      
+      // Verify the interface is preserved
+      expect(result).toContain("interface TestComponentProps");
+      
+      // Verify the component function is properly wrapped (check for message parameter)
+      expect(result).toContain("message");
+      expect(result).toContain("}) => {");
+      
+      // Verify TypeScript type annotation is preserved
+      expect(result).toContain("React.FC<TestComponentProps>");
+    });
   });
 
   describe('already wrapped components', function() {
@@ -477,4 +811,6 @@ export default Button;`;
       expect(result).toContain("'src/components/Button.tsx'");
     });
   });
+
+
 });

package/src/loader.js

@@ -14,8 +14,6 @@ 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(),
@@ -25,44 +23,34 @@ 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 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
@@ -94,6 +82,7 @@ module.exports = function cursorButtonLoader(source) {
   let hasWithIdeButtonImport = false;
   let lastImportPath = null;
   let defaultExportPath = null;
+  let namedExports = []; // Track named component exports
 
   // Traverse the AST to analyze the code
   traverse(ast, {
@@ -102,7 +91,7 @@ module.exports = function cursorButtonLoader(source) {
       
       // Check if withIdeButton is already imported
       if (path.node.source.value === importPath) {
-        path.node.specifiers.forEach(spec => {
+        path.node.specifiers.forEach((spec) => {
           if (t.isImportSpecifier(spec) && spec.imported.name === 'withIdeButton') {
             hasWithIdeButtonImport = true;
           }
@@ -141,17 +130,46 @@ module.exports = function cursorButtonLoader(source) {
       
       // Stop traversal once we find the default export
       path.stop();
+    },
+    
+    ExportNamedDeclaration(path) {
+      // Handle named exports like: export const Button = () => {}
+      if (path.node.declaration && t.isVariableDeclaration(path.node.declaration)) {
+        path.node.declaration.declarations.forEach((declarator) => {
+          if (t.isIdentifier(declarator.id) && 
+              declarator.id.name[0] === declarator.id.name[0].toUpperCase() &&
+              (t.isArrowFunctionExpression(declarator.init) || 
+               t.isFunctionExpression(declarator.init))) {
+            namedExports.push({
+              name: declarator.id.name,
+              path: path,
+              declarator: declarator
+            });
+          }
+        });
+      }
+      // Handle named function exports like: export function Button() {}
+      else if (path.node.declaration && t.isFunctionDeclaration(path.node.declaration)) {
+        const funcName = path.node.declaration.id.name;
+        if (funcName[0] === funcName[0].toUpperCase()) {
+          namedExports.push({
+            name: funcName,
+            path: path,
+            declaration: path.node.declaration
+          });
+        }
+      }
     }
   });
 
   // Check if we should process this file
-  if (!hasDefaultExport || (!defaultExportName && !isAnonymousComponent)) {
+  if ((!hasDefaultExport || (!defaultExportName && !isAnonymousComponent)) && namedExports.length === 0) {
     return source;
   }
 
   // Check if component name starts with uppercase (React component convention)
-  // Skip this check for anonymous components
-  if (defaultExportName && defaultExportName[0] !== defaultExportName[0].toUpperCase()) {
+  // Skip this check for anonymous components and if we have named exports
+  if (defaultExportName && defaultExportName[0] !== defaultExportName[0].toUpperCase() && namedExports.length === 0) {
     return source;
   }
 
@@ -165,26 +183,69 @@ module.exports = function cursorButtonLoader(source) {
   // 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)
-  );
+  // Add the withIdeButton import if we have exports to process
+  if ((hasDefaultExport && (defaultExportName || isAnonymousComponent)) || namedExports.length > 0) {
+    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 {
-    // No imports found, add at the beginning
-    if (ast.program && ast.program.body && Array.isArray(ast.program.body)) {
-      ast.program.body.unshift(withIdeButtonImport);
+    // Insert import after last existing import or at the beginning
+    if (lastImportPath) {
+      lastImportPath.insertAfter(withIdeButtonImport);
       modified = true;
+    } else {
+      // 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;
+      }
     }
   }
 
+  // Process named exports
+  namedExports.forEach(namedExport => {
+    if (namedExport.declarator) {
+      // Handle export const Component = () => {}
+      const wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          namedExport.declarator.init,
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+      namedExport.declarator.init = wrappedCall;
+      modified = true;
+    } else if (namedExport.declaration) {
+      // Handle export function Component() {}
+      const funcDeclaration = namedExport.declaration;
+      const wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          t.identifier(namedExport.name),
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+      
+      // Insert the function declaration before the export
+      namedExport.path.insertBefore(funcDeclaration);
+      
+      // Replace the export with wrapped call
+      namedExport.path.node.declaration = t.variableDeclaration('const', [
+        t.variableDeclarator(t.identifier(namedExport.name), wrappedCall)
+      ]);
+      modified = true;
+    }
+  });
+
   // Replace the default export with wrapped version
-  if (defaultExportPath && modified) {
+  if (defaultExportPath && (hasDefaultExport && (defaultExportName || isAnonymousComponent))) {
     let wrappedCall;
     
     if (isAnonymousComponent) {

package/src/withIdeButton.tsx

@@ -35,26 +35,23 @@ const IdeButton: React.FC<IdeButtonProps> = ({ filePath, projectRoot, ideType =
       onClick={handleClick}
       style={{
         position: 'absolute',
-        top: '8px',
-        right: '8px',
+        top: '4px',
+        right: '4px',
+        width: '10px',
+        height: '10px',
         background: '#007acc',
-        color: 'white',
         border: 'none',
-        borderRadius: '4px',
-        padding: '4px 8px',
-        fontSize: '12px',
+        borderRadius: '50%',
+        padding: 0,
         cursor: 'pointer',
         zIndex: 1000,
-        opacity: 0.7,
-        transition: 'opacity 0.2s',
-        fontFamily: 'monospace'
+        opacity: 0.6,
+        transition: 'opacity 0.2s'
       }}
       onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
-      onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.7')}
+      onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.6')}
       title={`Open ${filePath} in ${ideType.toUpperCase()}`}
-    >
-      📝
-    </button>
+    />
   );
 };