nextjs-ide-helper 1.3.4 → 1.5.2

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,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) {
@@ -229,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/src/withIdeButton.tsx

@@ -1,6 +1,61 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 
+// Inject global styles once
+let stylesInjected = false;
+
+function injectStyles() {
+  if (stylesInjected || typeof document === 'undefined') return;
+  stylesInjected = true;
+
+  const style = document.createElement('style');
+  style.id = 'ide-helper-styles';
+  style.textContent = `
+    .ide-helper-dot { display: block; }
+    .ide-helper-hidden .ide-helper-dot { display: none; }
+    .ide-helper-toggle {
+      background: transparent;
+      border: 2px solid #007acc !important;
+      box-sizing: border-box;
+    }
+    .ide-helper-hidden .ide-helper-toggle {
+      background: #666;
+      border-color: #666 !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// Toggle button - renders once via singleton pattern
+let toggleInjected = false;
+
+function injectToggle() {
+  if (toggleInjected || typeof document === 'undefined') return;
+  toggleInjected = true;
+
+  const btn = document.createElement('button');
+  btn.className = 'ide-helper-toggle';
+  btn.title = 'Toggle IDE dots (click to show/hide)';
+  Object.assign(btn.style, {
+    position: 'fixed',
+    bottom: '16px',
+    right: '16px',
+    width: '18px',
+    height: '18px',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '0',
+    cursor: 'pointer',
+    zIndex: '9999',
+    opacity: '0.7',
+    transition: 'opacity 0.2s'
+  });
+  btn.onmouseenter = () => btn.style.opacity = '1';
+  btn.onmouseleave = () => btn.style.opacity = '0.7';
+  btn.onclick = () => document.body.classList.toggle('ide-helper-hidden');
+  document.body.appendChild(btn);
+}
+
 interface IdeButtonProps {
   filePath: string;
   projectRoot?: string;
@@ -8,53 +63,49 @@ interface IdeButtonProps {
 }
 
 const IdeButton: React.FC<IdeButtonProps> = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+  useEffect(() => {
+    injectStyles();
+    injectToggle();
+  }, []);
+
   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}`;
+      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');
+    window.open(getIdeUrl(ideType, filePath), '_blank');
   };
 
   return (
     <button
+      className="ide-helper-dot"
       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>
+    />
   );
 };
 
@@ -78,7 +129,6 @@ export function withIdeButton<T extends object>(
       setIsClient(true);
     }, []);
 
-    // In production or when disabled, just return the component without wrapper
     if (!enabled || !isClient) {
       return <WrappedComponent {...props} />;
     }
@@ -94,4 +144,4 @@ export function withIdeButton<T extends object>(
   WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
 
   return WithIdeButtonComponent;
-}
+}