@keak/sdk 1.0.9 → 2.0.1

package/src/plugins/babel-source-inject.cjs

@@ -1,170 +1,94 @@
 /**
- * Babel plugin to inject source location metadata into JSX elements
- * This enables precise DOM element to source code mapping
+ * Keak Babel Plugin - Source Location Injector
+ * Simplified version inspired by react-source-lens
+ * Injects data-keak-file and data-keak-line attributes into JSX elements
  */
 
-console.log('[Keak Babel Plugin] MODULE LOADED - This means Babel is requiring this file');
-
 const path = require('path');
 
-let processedCount = 0;
-
 function keakSourceInjectorPlugin({ types: t }) {
-  console.log('[Keak Babel Plugin] Plugin function called - Plugin loaded and initialized');
   return {
     name: 'keak-source-injector',
     visitor: {
       Program: {
-        enter(path, state) {
-          // Check if this file imports from next/font
-          // If so, skip the entire file to avoid Babel/SWC conflict
-          state.skipFile = false;
+        enter(programPath, state) {
+          // Skip in production builds
+          if (process.env.NODE_ENV === 'production' && !state.opts.forceProduction) {
+            state.skipFile = true;
+            return;
+          }
 
-          path.traverse({
+          // Skip next/font files (Babel/SWC conflict)
+          state.skipFile = false;
+          programPath.traverse({
             ImportDeclaration(importPath) {
               const source = importPath.node.source.value;
               if (source.includes('next/font') || source.includes('@next/font')) {
                 state.skipFile = true;
-                importPath.stop(); // Stop traversing
+                importPath.stop();
               }
             }
           });
-        },
-        exit() {
-          if (processedCount > 0) {
-            console.log(`[Keak Babel Plugin] Processed ${processedCount} JSX elements`);
-            processedCount = 0;
-          }
         }
       },
-      JSXOpeningElement(nodePath, state) {
-        // Skip entire file if it uses next/font (Babel/SWC conflict)
-        if (state.skipFile) {
-          return;
-        }
 
-        // Skip if we're not in development or if disabled
-        if (process.env.NODE_ENV === 'production' && !state.opts.forceProduction) {
+      JSXOpeningElement(nodePath, state) {
+        // Skip if file should be skipped or no location info
+        if (state.skipFile || !nodePath.node.loc) {
           return;
         }
 
-        // Skip if element already has keak source attribute
-        const existingAttr = nodePath.node.attributes.find((attr) =>
+        // Skip if already has keak attributes
+        const hasKeakAttr = nodePath.node.attributes.some((attr) =>
           t.isJSXAttribute(attr) &&
           t.isJSXIdentifier(attr.name) &&
-          attr.name.name === 'data-keak-src'
+          (attr.name.name === 'data-keak-file' || attr.name.name === 'data-keak-src')
         );
-
-        if (existingAttr) {
-          return;
-        }
-
-        // Get source location info
-        const loc = nodePath.node.loc;
-        if (!loc) return;
+        if (hasKeakAttr) return;
 
         const filename = state.file.opts.filename;
-        // Skip if filename is not available or not a valid string
-        if (!filename || typeof filename !== 'string') {
-          return;
-        }
-
-        // Skip next/font loader files to avoid Babel/SWC conflict
-        // next/font requires SWC and cannot be processed by Babel
-        if (filename.includes('next/font') || filename.includes('@next/font')) {
-          return;
-        }
-
-        // Create relative path from project root
-        const relativePath = path.relative(process.cwd(), filename);
-        
-        // Create source location string: "file:line:column"
-        const sourceLocation = `${relativePath}:${loc.start.line}:${loc.start.column}`;
-        
-        // Get element name for filtering
-        const elementName = nodePath.node.name;
-        let tagName = '';
-        
-        if (t.isJSXIdentifier(elementName)) {
-          tagName = elementName.name;
-        } else if (t.isJSXMemberExpression(elementName)) {
-          // Handle cases like <motion.div>
-          tagName = elementName.property.name;
-        }
-
-        // Only instrument elements we care about
-        const targetElements = new Set([
-          'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-          'button', 'a', 'input', 'textarea', 'select', 'form',
-          'img', 'svg', 'canvas', 'video', 'audio',
-          'section', 'article', 'header', 'footer', 'nav', 'main',
-          'ul', 'ol', 'li', 'table', 'tr', 'td', 'th'
-        ]);
-
-        // Also instrument custom components (capitalized names)
-        const isCustomComponent = tagName && tagName[0] === tagName[0].toUpperCase();
-        const isTargetElement = targetElements.has(tagName.toLowerCase());
-        
-        if (!isTargetElement && !isCustomComponent) {
-          return;
-        }
-
-        // Create the data attribute
-        const sourceAttr = t.jsxAttribute(
-          t.jsxIdentifier('data-keak-src'),
-          t.stringLiteral(sourceLocation)
-        );
-
-        // Add component context if available
-        let componentName = '';
-        let currentPath = nodePath;
-        
-        // Walk up to find the containing component
-        while (currentPath) {
-          if (currentPath.isFunctionDeclaration() && currentPath.node.id) {
-            componentName = currentPath.node.id.name;
-            break;
-          }
-          
-          if (currentPath.isVariableDeclarator() && t.isIdentifier(currentPath.node.id)) {
-            const init = currentPath.node.init;
-            if (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init)) {
-              componentName = currentPath.node.id.name;
-              break;
+        if (!filename || typeof filename !== 'string') return;
+
+        // Smart relative path detection (like react-source-lens)
+        let sourceFile;
+
+        // Try src/ directory first
+        const srcParts = filename.split('/src/');
+        if (srcParts.length > 1) {
+          sourceFile = 'src/' + srcParts[srcParts.length - 1];
+        } else {
+          // Try app/ directory (Next.js App Router)
+          const appParts = filename.split('/app/');
+          if (appParts.length > 1) {
+            sourceFile = 'app/' + appParts[appParts.length - 1];
+          } else {
+            // Try components/ directory
+            const compParts = filename.split('/components/');
+            if (compParts.length > 1) {
+              sourceFile = 'components/' + compParts[compParts.length - 1];
+            } else {
+              // Fallback: relative from cwd
+              sourceFile = path.relative(process.cwd(), filename);
             }
           }
-          
-          currentPath = currentPath.parentPath;
-        }
-
-        // Add component context attribute if found
-        if (componentName) {
-          const componentAttr = t.jsxAttribute(
-            t.jsxIdentifier('data-keak-component'),
-            t.stringLiteral(componentName)
-          );
-          nodePath.node.attributes.push(componentAttr);
         }
 
-        // Add the source location attribute
-        nodePath.node.attributes.push(sourceAttr);
-        processedCount++;
-
-        // Optional: Add element index within component for disambiguation
-        if (state.opts.includeElementIndex) {
-          const elementIndex = state.elementIndex || 0;
-          state.elementIndex = elementIndex + 1;
-          
-          const indexAttr = t.jsxAttribute(
-            t.jsxIdentifier('data-keak-idx'),
-            t.stringLiteral(String(elementIndex))
-          );
-          nodePath.node.attributes.push(indexAttr);
-        }
+        const { line } = nodePath.node.loc.start;
+
+        // Add data-keak-file and data-keak-line attributes
+        nodePath.node.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier('data-keak-file'),
+            t.stringLiteral(sourceFile)
+          ),
+          t.jsxAttribute(
+            t.jsxIdentifier('data-keak-line'),
+            t.stringLiteral(String(line))
+          )
+        );
       }
     }
   };
 }
 
 module.exports = keakSourceInjectorPlugin;
-

package/src/plugins/next.cjs

@@ -1,245 +1,73 @@
 /**
  * Keak Next.js Plugin
- * 
- * Automatically injects source location attributes into JSX elements
- * for use with Keak IDE element selection.
- * 
+ * Simplified version - injects source location attributes in development only
+ *
  * Usage in next.config.js:
- * 
- * const { withKeak } = require('@keak/sdk/plugins/next');
- * 
- * module.exports = withKeak({
- *   // your existing Next.js config
- * });
- * 
- * Or for ESM (next.config.mjs):
- * 
- * import { withKeak } from '@keak/sdk/plugins/next';
- * export default withKeak({ ... });
+ * const { withKeak } = require('@keak/sdk/next');
+ * module.exports = withKeak({ ... });
  */
 
 const path = require('path');
+const fs = require('fs');
 
 function withKeak(nextConfig = {}) {
-  console.log('[Keak] withKeak() called - plugin loaded successfully');
   return {
     ...nextConfig,
     webpack(config, options) {
-      console.log('[Keak] webpack() called with options:', { dev: options.dev, isServer: options.isServer });
-      const { dev, isServer } = options;
+      const { dev } = options;
 
-      // Only inject in development mode (both client and server)
-      // Server components also need attributes for source mapping
-      if (dev) {
-        console.log('[Keak] Configuring Keak webpack loader for source injection...');
-        console.log('[Keak] DEBUG: dev=', dev, 'isServer=', isServer, 'processing:', isServer ? 'server build' : 'client build');
+      // Only inject loader in development mode
+      if (!dev) {
+        // Call original webpack config if it exists
+        if (typeof nextConfig.webpack === 'function') {
+          return nextConfig.webpack(config, options);
+        }
+        return config;
+      }
 
-        // Helper function to resolve modules from the project's node_modules
-        const resolveFromProject = (moduleName) => {
-          try {
-            // Try to resolve from the project's context (where next.config.js is)
-            return require.resolve(moduleName, {
-              paths: [process.cwd()]
-            });
-          } catch (e) {
-            // Fallback to resolving from @keak/sdk's context
-            console.warn(`[Keak] Could not resolve ${moduleName} from project, falling back to @keak/sdk`);
-            return require.resolve(moduleName);
-          }
-        };
+      // Resolve loader path from project .keak directory or fallback
+      const projectKeakLoader = path.resolve(process.cwd(), '.keak/webpack-loader-babel/index.js');
+      const keakLoaderPath = fs.existsSync(projectKeakLoader)
+        ? projectKeakLoader
+        : path.resolve(__dirname, 'webpack-loader-babel/index.js');
 
-        // Ensure module.rules exists
+      // Ensure config.module.rules exists
+      if (!config.module || !config.module.rules) {
         config.module = config.module || {};
         config.module.rules = config.module.rules || [];
+      }
 
-        // Add Keak loader to run pre-SWC for client code
-        // The loader resolves from .keak/webpack-loader-babel which is copied by keak-code during project setup.
-        const fs = require('fs');
-        const pathModule = require('path');
-        
-        console.log('[Keak] About to resolve loader path...');
-        console.log('[Keak] Current working directory:', process.cwd());
-        
-        // Try to find the loader in the project's .keak directory (copied by keak-code setup)
-        // Using the Babel-based loader that runs BEFORE SWC (pre-compilation)
-        const projectKeakLoader = pathModule.resolve(process.cwd(), '.keak/webpack-loader-babel/index.js');
-        
-        let keakLoaderPath;
-        let loaderSource = 'unknown';
-        
-        // Check if loader exists in project .keak directory
-        try {
-          if (fs.existsSync(projectKeakLoader)) {
-            console.log('[Keak] Found loader in project .keak directory');
-            keakLoaderPath = projectKeakLoader;
-            loaderSource = 'project';
-          } else {
-            // Fallback to project loader path even if it doesn't exist yet
-            console.warn('[Keak] Loader not found, using fallback path:', projectKeakLoader);
-            keakLoaderPath = projectKeakLoader;
-            loaderSource = 'fallback';
-          }
-        } catch (pathError) {
-          console.error('[Keak] Error resolving loader path:', pathError.message);
-          keakLoaderPath = projectKeakLoader;
-          loaderSource = 'error';
-        }
-
-        console.log('[Keak] ✅ Loader path resolved:', keakLoaderPath, '(source:', loaderSource, ')');
-        console.log('[Keak] About to inspect webpack rules...');
-        console.log('[Keak] DEBUG: config exists?', !!config);
-        console.log('[Keak] DEBUG: config.module exists?', !!config.module);
-        console.log('[Keak] DEBUG: config.module.rules exists?', !!(config.module && config.module.rules));
-        console.log('[Keak] DEBUG: config.module.rules is array?', Array.isArray(config.module && config.module.rules));
-        
-        // Wrap everything in try-catch to catch any errors
-        try {
-          console.log('[Keak] DEBUG: Entering try block');
-          console.log('[Keak] DEBUG: config.module exists?', !!config.module);
-          console.log('[Keak] DEBUG: config.module.rules exists?', !!(config.module && config.module.rules));
-          console.log('[Keak] Total webpack rules:', config.module && config.module.rules ? config.module.rules.length : 'undefined');
-          
-          if (!config.module || !config.module.rules) {
-            console.error('[Keak] ❌ ERROR: config.module.rules is undefined!');
-            return config;
-          }
-          
-          // Log first few rules to understand structure
-          try {
-            console.log('[Keak] First few rules structure:');
-            config.module.rules.slice(0, 5).forEach((r, i) => {
-              console.log(`[Keak]   Rule ${i}:`, {
-                hasOneOf: Array.isArray(r.oneOf),
-                oneOfLength: Array.isArray(r.oneOf) ? r.oneOf.length : 'N/A',
-                test: r.test ? r.test.toString().substring(0, 50) : 'no test',
-                hasUse: !!r.use,
-                useType: r.use ? (Array.isArray(r.use) ? 'array' : typeof r.use) : 'none'
-              });
-            });
-          } catch (e) {
-            console.log('[Keak] Error logging rules:', e.message);
-          }
-
-          // Based on Next.js webpack structure: Find the oneOf array and add our loader
-          // Next.js uses oneOf arrays to process files - we need to add our loader there
-          let loaderAdded = false;
-          
-          console.log('[Keak] Attempting Strategy 1: Finding oneOf rule...');
-          // Strategy 1: Find the oneOf rule (recommended approach from web search)
-          const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
-          console.log('[Keak] Strategy 1 result:', oneOfRule ? 'Found oneOf rule' : 'No oneOf rule found');
-          
-          if (oneOfRule && oneOfRule.oneOf) {
-            console.log(`[Keak] ✅ Found oneOf array with ${oneOfRule.oneOf.length} entries`);
-            
-            // Add our loader to the BEGINNING of oneOf array so it runs BEFORE SWC
-            // This transforms raw JSX to inject attributes before compilation
-            const preRule = {
-              test: /\.[jt]sx?$/,
-              exclude: [
-                /node_modules/,
-                /\.next\//,
-                /webpack/,
-                /next\/dist/
-                // NOTE: Removed /\.server\.[jt]sx?$/ exclusion to process server components
-              ],
-              enforce: 'pre', // Run BEFORE SWC (pre-compilation)
-              use: [
-                {
-                  loader: keakLoaderPath,
-                  options: {
-                    projectRoot: process.cwd(),
-                    includeElementIndex: true,
-                    devWarnings: dev,
-                    skipPatterns: [
-                      // NOTE: Removed /(\.server\.[jt]sx?$)/ to process server components
-                      /webpack/,
-                      /\.next\//,
-                      /next\/dist/
-                    ]
-                  }
-                }
-              ]
-            };
-            
-            // Add to the BEGINNING of oneOf array (runs before SWC processes files)
-            oneOfRule.oneOf.unshift(preRule);
-            
-            console.log(`[Keak] ✅ Added pre-compilation loader to oneOf array (now ${oneOfRule.oneOf.length} entries, runs before SWC)`);
-            loaderAdded = true;
-          } else {
-            console.log('[Keak] No oneOf array found, trying alternative approaches...');
-            
-            // Strategy 2: Look for rules with oneOf property (nested)
-            for (let i = 0; i < config.module.rules.length; i++) {
-              const rule = config.module.rules[i];
-              if (rule.oneOf && Array.isArray(rule.oneOf)) {
-                console.log(`[Keak] Found oneOf in rule ${i} with ${rule.oneOf.length} entries`);
-                
-                // Add pre-compilation loader to the BEGINNING of this oneOf array
-                rule.oneOf.unshift({
-                  test: /\.[jt]sx?$/,
-                  exclude: [/node_modules/, /\.next\//, /webpack/, /next\/dist/],
-                  enforce: 'pre', // Run BEFORE SWC
-                  use: [
-                    {
-                      loader: keakLoaderPath,
-                      options: {
-                        projectRoot: process.cwd(),
-                        includeElementIndex: true,
-                        devWarnings: dev,
-                        skipPatterns: [] // Process all files including server components
-                      }
-                    }
-                  ]
-                });
-                console.log(`[Keak] ✅ Added pre-compilation loader to oneOf array (now ${rule.oneOf.length} entries)`);
-                loaderAdded = true;
-                break;
-              }
+      // Create the loader rule
+      const keakRule = {
+        test: /\.[jt]sx?$/,
+        exclude: [
+          /node_modules/,
+          /\.next\//,
+          /webpack/,
+          /next\/dist/
+        ],
+        enforce: 'pre', // Run BEFORE SWC compilation
+        use: [
+          {
+            loader: keakLoaderPath,
+            options: {
+              projectRoot: process.cwd()
             }
           }
-          
-          // Strategy 3: Fallback - Add as new rule with enforce: 'pre' at top level
-          // This is less ideal but should still work
-          if (!loaderAdded) {
-            console.log('[Keak] Fallback: Adding pre-compilation loader rule to top-level rules');
-            config.module.rules.unshift({
-              test: /\.[jt]sx?$/,
-              exclude: [/node_modules/, /\.next\//, /webpack/, /next\/dist/],
-              enforce: 'pre', // Run BEFORE SWC
-              use: [
-                {
-                  loader: keakLoaderPath,
-                  options: {
-                    projectRoot: process.cwd(),
-                    includeElementIndex: true,
-                    devWarnings: dev,
-                    skipPatterns: [] // Process all files including server components
-                  }
-                }
-              ]
-            });
-            console.log('[Keak] ✅ Added pre-compilation loader rule with enforce:pre (fallback)');
-            loaderAdded = true;
-          }
-          
-          if (!loaderAdded) {
-            console.error('[Keak] ❌ ERROR: Failed to add loader using any strategy!');
-          } else {
-            console.log('[Keak] ✅ Loader successfully added to webpack config');
-          }
-        } catch (error) {
-          console.error('[Keak] ❌ ERROR in loader injection block:', error);
-          console.error('[Keak] Error message:', error.message);
-          console.error('[Keak] Error stack:', error.stack);
-          // Don't throw - let webpack continue even if loader injection fails
-        }
+        ]
+      };
+
+      // Try to inject into oneOf array (Next.js standard structure)
+      const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
+      if (oneOfRule && oneOfRule.oneOf) {
+        // Add to beginning so it runs before SWC
+        oneOfRule.oneOf.unshift(keakRule);
       } else {
-        console.log('[Keak] Skipping loader injection - dev:', dev, 'isServer:', isServer);
+        // Fallback: Add as top-level rule with enforce: 'pre'
+        config.module.rules.unshift(keakRule);
       }
 
-      // Call the original webpack config function if it exists
+      // Call original webpack config if it exists
       if (typeof nextConfig.webpack === 'function') {
         return nextConfig.webpack(config, options);
       }
@@ -250,4 +78,3 @@ function withKeak(nextConfig = {}) {
 }
 
 module.exports = { withKeak };
-