nextjs-ide-helper 1.3.4 → 1.5.2

package/README.md

@@ -8,7 +8,8 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 - 🎯 **Smart Detection**: Only processes components in specified directories
 - 🔧 **Zero Configuration**: Works out of the box with sensible defaults (Cursor as default IDE)
 - 🏎️ **Development Only**: Only active in development mode, no production overhead
-- 🎨 **Non-intrusive**: Uses absolute positioning to avoid layout disruption
+- 🎨 **Non-intrusive**: Minimal blue dot indicators that don't disrupt your layout
+- 👁️ **Toggle Visibility**: Floating button to show/hide all IDE dots instantly
 - ⚡ **Hydration Safe**: No SSR/client hydration mismatches
 - 📱 **TypeScript Support**: Full TypeScript definitions included
 - 🔌 **Multi-IDE Support**: Supports Cursor, VS Code, WebStorm, and Atom
@@ -18,8 +19,7 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 ## Installation
 
 ```bash
-# or
-# or
+npm install nextjs-ide-helper
 ```
 
 ## Quick Start
@@ -29,7 +29,7 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 Add the plugin to your `next.config.js`:
 
 ```javascript
-const withIdeHelper = require('nextjs-ide-plugin');
+const withIdeHelper = require('nextjs-ide-helper');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -43,12 +43,30 @@ module.exports = withIdeHelper()(nextConfig);
 
 All React components in your `src/components` directory will automatically get IDE buttons in development mode (defaults to Cursor IDE).
 
+## User Interface
+
+### IDE Indicator Dots
+
+Each wrapped component displays a small **blue dot** (10x10px) in the top-right corner:
+- **Click** the dot to open the component's source file in your IDE
+- **Hover** to see the file path tooltip
+- The dots are subtle (60% opacity) and brighten on hover
+
+### Toggle Button
+
+A **floating toggle button** appears in the bottom-right corner of your page:
+- **Blue** = IDE dots are visible
+- **Gray** = IDE dots are hidden
+- **Click** to toggle all dots on/off instantly
+
+This lets you quickly hide the dots when you want an unobstructed view of your app, then bring them back when needed.
+
 ## Configuration
 
 You can customize the plugin behavior:
 
 ```javascript
-const withIdeHelper = require('nextjs-ide-plugin');
+const withIdeHelper = require('nextjs-ide-helper');
 
 const nextConfig = {
   // your existing config
@@ -57,7 +75,7 @@ const nextConfig = {
 module.exports = withIdeHelper({
   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
+  importPath: 'nextjs-ide-helper/withIdeButton', // import path for the HOC
   enabled: process.env.NODE_ENV === 'development', // enable/disable
   ideType: 'cursor' // IDE to use: 'cursor', 'vscode', 'webstorm', 'atom'
 })(nextConfig);
@@ -69,7 +87,7 @@ module.exports = withIdeHelper({
 |--------|------|---------|-------------|
 | `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 |
+| `importPath` | `string` | `'nextjs-ide-helper/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 |
 
@@ -100,7 +118,7 @@ module.exports = withIdeHelper({
 You can also manually wrap components:
 
 ```tsx
-import { withIdeButton } from 'nextjs-ide-plugin';
+import { withIdeButton } from 'nextjs-ide-helper';
 
 const MyComponent = () => {
   return <div>Hello World</div>;
@@ -119,7 +137,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 +183,7 @@ const MyComponent = function() {
 export default MyComponent;
 ```
 
-### Direct Export Function Components
+#### Direct Export Function Components
 ```tsx
 // Named function
 export default function MyComponent() {
@@ -145,7 +196,7 @@ export default function() {
 }
 ```
 
-### Arrow Function Components
+#### Arrow Function Components
 ```tsx
 // Anonymous arrow function
 export default () => {
@@ -158,7 +209,7 @@ export default (props) => {
 };
 ```
 
-### Class Components
+#### Class Components
 ```tsx
 // Named class
 export default class MyComponent extends React.Component {
@@ -175,7 +226,7 @@ export default class MyComponent extends Component<Props> {
 }
 ```
 
-### TypeScript Components
+#### TypeScript Components
 ```tsx
 // Function with TypeScript
 interface Props {
@@ -224,7 +275,7 @@ After (automatically transformed):
 ```tsx
 // src/components/Button.tsx (transformed by the plugin)
 import React from 'react';
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 const Button = ({ children, onClick }) => {
   return (
@@ -240,6 +291,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-helper/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-helper/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
@@ -252,7 +399,7 @@ export default function Header() {
 After (automatically transformed):
 ```tsx
 // src/components/Header.tsx (transformed by the plugin)
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 function Header() {
   return <header>My App Header</header>;
@@ -276,7 +423,7 @@ export default () => {
 After (automatically transformed):
 ```tsx
 // src/components/Footer.tsx (transformed by the plugin)
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 export default withIdeButton(() => {
   return <footer>© 2025 My App</footer>;
@@ -327,6 +474,24 @@ See [CHANGELOG.md](./CHANGELOG.md) for detailed release notes.
 
 ### Recent Releases
 
+### 1.5.0 - Toggle Visibility
+- Added floating toggle button to show/hide all IDE dots
+- Toggle button appears in bottom-right corner
+- Blue when dots visible, gray when hidden
+- State synchronized across all components via custom events
+
+### 1.4.1 - Minimal UI
+- Changed IDE buttons from text+emoji to minimal 10x10px blue dots
+- Reduced visual footprint for less intrusive development experience
+- Removed console.log statements from plugin
+
+### 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,75 @@ 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() {}
+      // Convert FunctionDeclaration to FunctionExpression (preserves name for stack traces)
+      const funcDecl = namedExport.declaration;
+      const funcExpr = t.functionExpression(
+        funcDecl.id,        // Keep the name for debugging
+        funcDecl.params,
+        funcDecl.body,
+        funcDecl.generator,
+        funcDecl.async
+      );
+
+      const wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          funcExpr,
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+
+      // Replace: export function X() {} -> export const X = withIdeButton(function X() {}, ...)
+      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) {
@@ -234,15 +296,33 @@ module.exports = function cursorButtonLoader(source) {
       );
     }
 
-    // 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
+    // If the export is a named function declaration, convert to function expression inline
+    if (!isAnonymousComponent && t.isFunctionDeclaration(defaultExportPath.node.declaration)) {
+      const funcDecl = defaultExportPath.node.declaration;
+      const funcExpr = t.functionExpression(
+        funcDecl.id,        // Keep the name for debugging
+        funcDecl.params,
+        funcDecl.body,
+        funcDecl.generator,
+        funcDecl.async
+      );
+
+      // Wrap the function expression directly
+      wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          funcExpr,
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+      defaultExportPath.node.declaration = wrappedCall;
+    } else if (!isAnonymousComponent && t.isClassDeclaration(defaultExportPath.node.declaration)) {
+      // For classes, we still need to separate declaration (can't inline class expressions easily)
       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

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?$/,