nextjs-ide-helper 1.3.4 → 1.4.1

package/README.md

@@ -119,7 +119,40 @@ export default withIdeButton(MyComponent, 'src/components/MyComponent.tsx', {
 
 The plugin automatically detects and wraps all types of React component export patterns:
 
-### Named Components
+### Named Export Components
+```tsx
+// Named arrow function exports
+export const Button = () => <button>Click me</button>;
+export const Modal = () => <div>Modal content</div>;
+
+// Named function exports
+export function MyButton() {
+  return <button>Function Button</button>;
+}
+
+export function MyModal() {
+  return <div>Function Modal</div>;
+}
+
+// Mixed named and default exports
+export const HeaderButton = () => <button>Header</button>;
+
+const MainComponent = () => <div>Main</div>;
+export default MainComponent;
+
+// TypeScript named exports
+interface ButtonProps {
+  onClick: () => void;
+}
+
+export const TypedButton = ({ onClick }: ButtonProps) => (
+  <button onClick={onClick}>Typed Button</button>
+);
+```
+
+### Default Export Components
+
+#### Named Components
 ```tsx
 // Standard pattern
 const MyComponent = () => <div>Hello</div>;
@@ -132,7 +165,7 @@ const MyComponent = function() {
 export default MyComponent;
 ```
 
-### Direct Export Function Components
+#### Direct Export Function Components
 ```tsx
 // Named function
 export default function MyComponent() {
@@ -145,7 +178,7 @@ export default function() {
 }
 ```
 
-### Arrow Function Components
+#### Arrow Function Components
 ```tsx
 // Anonymous arrow function
 export default () => {
@@ -158,7 +191,7 @@ export default (props) => {
 };
 ```
 
-### Class Components
+#### Class Components
 ```tsx
 // Named class
 export default class MyComponent extends React.Component {
@@ -175,7 +208,7 @@ export default class MyComponent extends Component<Props> {
 }
 ```
 
-### TypeScript Components
+#### TypeScript Components
 ```tsx
 // Function with TypeScript
 interface Props {
@@ -240,6 +273,102 @@ export default withIdeButton(Button, 'src/components/Button.tsx', {
 });
 ```
 
+### Named Export Pattern
+Before (your original named exports):
+```tsx
+// src/components/Buttons.tsx
+export const PrimaryButton = ({ children, onClick }) => {
+  return (
+    <button className="primary" onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export const SecondaryButton = ({ children, onClick }) => {
+  return (
+    <button className="secondary" onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+```
+
+After (automatically transformed):
+```tsx
+// src/components/Buttons.tsx (transformed by the plugin)
+import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+
+export const PrimaryButton = withIdeButton(({ children, onClick }) => {
+  return (
+    <button className="primary" onClick={onClick}>
+      {children}
+    </button>
+  );
+}, 'src/components/Buttons.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
+});
+
+export const SecondaryButton = withIdeButton(({ children, onClick }) => {
+  return (
+    <button className="secondary" onClick={onClick}>
+      {children}
+    </button>
+  );
+}, 'src/components/Buttons.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
+});
+```
+
+### Mixed Named and Default Exports
+Before (mixed exports):
+```tsx
+// src/components/Layout.tsx
+export const Header = () => <header>My App Header</header>;
+export const Footer = () => <footer>© 2025 My App</footer>;
+
+const Layout = ({ children }) => (
+  <div>
+    <Header />
+    <main>{children}</main>
+    <Footer />
+  </div>
+);
+
+export default Layout;
+```
+
+After (automatically transformed):
+```tsx
+// src/components/Layout.tsx (transformed by the plugin)
+import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+
+export const Header = withIdeButton(() => <header>My App Header</header>, 'src/components/Layout.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
+});
+
+export const Footer = withIdeButton(() => <footer>© 2025 My App</footer>, 'src/components/Layout.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
+});
+
+const Layout = ({ children }) => (
+  <div>
+    <Header />
+    <main>{children}</main>
+    <Footer />
+  </div>
+);
+
+export default withIdeButton(Layout, 'src/components/Layout.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
+});
+```
+
 ### Direct Export Function Component
 Before:
 ```tsx
@@ -327,6 +456,13 @@ See [CHANGELOG.md](./CHANGELOG.md) for detailed release notes.
 
 ### Recent Releases
 
+### 1.4.0 - Named Export Support
+- Added comprehensive support for ES6 named exports in React components
+- Support for `export const Component = () => {}` and `export function Component() {}` patterns
+- Mixed export support - files with both named and default exports
+- Enhanced component detection to distinguish React components from utility exports
+- Expanded test suite with 8 new comprehensive test cases
+
 ### 1.3.0 - Glob Pattern Support
 - Added support for glob patterns in `componentPaths` configuration
 - Support for nested directory matching with `**` patterns

package/lib/loader.js

@@ -5,11 +5,6 @@ const generate = require('@babel/generator').default;
 const t = require('@babel/types');
 const { minimatch } = require('minimatch');
 
-console.log('.................................')
-console.log('🔧 minimatch version:', require('minimatch/package.json').version);
-console.log('minimatch is', require('minimatch'));
-console.log('.................................')
-
 /**
  * Webpack loader that automatically wraps React components with cursor buttons
  * @param {string} source - The source code of the file
@@ -19,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(),
@@ -30,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
@@ -99,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, {
@@ -107,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;
           }
@@ -146,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;
   }
 
@@ -170,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/lib/plugin.js

@@ -42,8 +42,6 @@ function withCursorHelper(options = {}) {
       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
@@ -51,7 +49,6 @@ function withCursorHelper(options = {}) {
             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?$/,

package/lib/withIdeButton.js

@@ -26,20 +26,19 @@ const IdeButton = ({ filePath, projectRoot, ideType = 'cursor' }) => {
     };
     return ((0, jsx_runtime_1.jsx)("button", { 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'
-        }, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.7'), title: `Open ${filePath} in ${ideType.toUpperCase()}`, children: "\uD83D\uDCDD" }));
+            opacity: 0.6,
+            transition: 'opacity 0.2s'
+        }, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.6'), title: `Open ${filePath} in ${ideType.toUpperCase()}` }));
 };
 function withIdeButton(WrappedComponent, filePath, options = {}) {
     const { projectRoot, enabled = process.env.NODE_ENV === 'development', ideType = 'cursor' } = options;

package/lib/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>
+    />
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-ide-helper",
-  "version": "1.3.4",
+  "version": "1.4.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",
@@ -9,7 +9,7 @@
     "src"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cp src/loader.js lib/loader.js",
     "prepare": "npm run build",
     "test": "jest"
   },