nextjs-ide-helper 1.1.3 → 1.3.1

package/src/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/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