@keak/sdk 1.0.5 → 1.0.7

package/src/plugins/next.cjs

@@ -28,9 +28,11 @@ function withKeak(nextConfig = {}) {
       console.log('[Keak] webpack() called with options:', { dev: options.dev, isServer: options.isServer });
       const { dev, isServer } = options;
 
-      // Only inject in development mode and client-side
-      if (dev && !isServer) {
-        console.log('[Keak] Configuring Babel loader for source injection...');
+      // 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');
 
         // Helper function to resolve modules from the project's node_modules
         const resolveFromProject = (moduleName) => {
@@ -46,89 +48,195 @@ function withKeak(nextConfig = {}) {
           }
         };
 
-        // Try to find and modify existing babel-loader configurations
-        let modifiedExistingLoader = false;
-
-        config.module.rules.forEach(rule => {
-          // Handle rules with use array
-          if (rule.use && Array.isArray(rule.use)) {
-            rule.use.forEach(loader => {
-              if (typeof loader === 'object' && loader.loader && loader.loader.includes('babel-loader')) {
-                // Found babel-loader, add our plugin if it's not already there
-                if (!loader.options) loader.options = {};
-                if (!loader.options.plugins) loader.options.plugins = [];
-
-                // Check if our plugin is already in the list
-                const hasKeakPlugin = loader.options.plugins.some(plugin =>
-                  (Array.isArray(plugin) && plugin[0] && plugin[0].includes('babel-source-inject')) ||
-                  (typeof plugin === 'string' && plugin.includes('babel-source-inject'))
-                );
-
-                if (!hasKeakPlugin) {
-                  loader.options.plugins.push([
-                    require.resolve('./babel-source-inject.cjs'),
-                    { includeElementIndex: true }
-                  ]);
-                  console.log('[Keak] Added source injection plugin to existing babel-loader');
-                  modifiedExistingLoader = true;
-                }
-              }
-            });
+        // Ensure module.rules exists
+        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';
+        }
 
-          // Handle rules with use object
-          if (rule.use && typeof rule.use === 'object' && !Array.isArray(rule.use)) {
-            const loader = rule.use;
-            if (loader.loader && loader.loader.includes('babel-loader')) {
-              if (!loader.options) loader.options = {};
-              if (!loader.options.plugins) loader.options.plugins = [];
-
-              const hasKeakPlugin = loader.options.plugins.some(plugin =>
-                (Array.isArray(plugin) && plugin[0] && plugin[0].includes('babel-source-inject')) ||
-                (typeof plugin === 'string' && plugin.includes('babel-source-inject'))
-              );
-
-              if (!hasKeakPlugin) {
-                loader.options.plugins.push([
-                  require.resolve('./babel-source-inject.cjs'),
-                  { includeElementIndex: true }
-                ]);
-                console.log('[Keak] Added source injection plugin to existing babel-loader (object form)');
-                modifiedExistingLoader = true;
-              }
-            }
+        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);
           }
-        });
 
-        // If no existing babel-loader was modified, add a new rule
-        if (!modifiedExistingLoader) {
-          console.log('[Keak] No existing babel-loader found, adding new Babel loader with source injection plugin');
-          // PREPEND the rule so it matches before Next.js's built-in rules
-          config.module.rules.unshift({
-            test: /\.(jsx|tsx)$/,
-            exclude: /node_modules/,
-            use: {
-              loader: resolveFromProject('babel-loader'),
-              options: {
-                presets: [
-                  [resolveFromProject('@babel/preset-react'), {
-                    runtime: 'automatic'
-                  }],
-                  resolveFromProject('@babel/preset-typescript')
-                ],
-                plugins: [
-                  [
-                    require.resolve('./babel-source-inject.cjs'),
+          // 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: [
                     {
-                      includeElementIndex: true
+                      loader: keakLoaderPath,
+                      options: {
+                        projectRoot: process.cwd(),
+                        includeElementIndex: true,
+                        devWarnings: dev,
+                        skipPatterns: [] // Process all files including server components
+                      }
                     }
                   ]
-                ],
-                cacheDirectory: true
+                });
+                console.log(`[Keak] ✅ Added pre-compilation loader to oneOf array (now ${rule.oneOf.length} entries)`);
+                loaderAdded = true;
+                break;
               }
             }
-          });
+          }
+          
+          // 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
         }
+      } else {
+        console.log('[Keak] Skipping loader injection - dev:', dev, 'isServer:', isServer);
       }
 
       // Call the original webpack config function if it exists

package/src/plugins/webpack-loader-babel/index.js

@@ -0,0 +1,199 @@
+/**
+ * Webpack loader that uses Babel to inject Keak source attributes into JSX
+ * This runs BEFORE SWC compilation to add data-keak-src, data-keak-component, and data-keak-idx attributes
+ */
+
+const path = require('path');
+const babelParser = require('@babel/parser');
+const babelTraverse = require('@babel/traverse').default;
+const babelGenerator = require('@babel/generator').default;
+const t = require('@babel/types');
+
+let elementIndexMap = new Map(); // Track element index per file
+
+module.exports = function keakLoaderBabel(source) {
+  // Make loader cacheable for better performance
+  this.cacheable(true);
+
+  const resourcePath = this.resourcePath;
+  const options = this.getOptions() || {};
+  const { projectRoot = process.cwd(), includeElementIndex = true, devWarnings = false } = options;
+
+  // Skip if not a JSX/TSX file
+  if (!/\.(jsx|tsx|js|ts)$/.test(resourcePath)) {
+    return source;
+  }
+
+  // Skip files based on skip patterns
+  const skipPatterns = options.skipPatterns || [];
+  if (skipPatterns.some(pattern => {
+    const regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
+    return regex.test(resourcePath);
+  })) {
+    return source;
+  }
+
+  try {
+    console.log(`[keak-loader-pre] Processing ${path.relative(projectRoot || process.cwd(), resourcePath)} with Babel AST`);
+
+    // Reset element index for this file
+    if (includeElementIndex) {
+      elementIndexMap.set(resourcePath, 0);
+    }
+
+    // Parse the source code
+    const ast = babelParser.parse(source, {
+      sourceType: 'module',
+      plugins: [
+        'jsx',
+        'typescript',
+        'decorators-legacy',
+        'classProperties',
+        'objectRestSpread',
+        'functionBind',
+        'exportDefaultFrom',
+        'exportNamespaceFrom',
+        'dynamicImport',
+        'nullishCoalescingOperator',
+        'optionalChaining',
+        'topLevelAwait'
+      ]
+    });
+
+    let elementCount = 0;
+    let skipFile = false;
+
+    // First pass: Check for next/font imports (Babel/SWC conflict)
+    babelTraverse(ast, {
+      ImportDeclaration(importPath) {
+        const source = importPath.node.source.value;
+        if (source.includes('next/font') || source.includes('@next/font')) {
+          skipFile = true;
+          importPath.stop();
+        }
+      }
+    });
+
+    if (skipFile) {
+      if (devWarnings) {
+        console.log(`[keak-loader-pre] ⚠️ Skipping ${path.relative(projectRoot || process.cwd(), resourcePath)} (contains next/font)`);
+      }
+      return source;
+    }
+
+    // Second pass: Transform JSX elements
+    babelTraverse(ast, {
+      JSXOpeningElement(nodePath) {
+        const node = nodePath.node;
+
+        // Skip if element already has keak source attribute
+        const hasKeakSrc = node.attributes.some(attr =>
+          t.isJSXAttribute(attr) &&
+          t.isJSXIdentifier(attr.name) &&
+          attr.name.name === 'data-keak-src'
+        );
+
+        if (hasKeakSrc) {
+          return;
+        }
+
+        // Get source location
+        const loc = node.loc;
+        if (!loc) return;
+
+        // Create relative path from project root
+        const relativePath = path.relative(projectRoot || process.cwd(), resourcePath).replace(/\\/g, '/');
+        
+        // Create source location string: "file:line:column"
+        const sourceLocation = `${relativePath}:${loc.start.line}:${loc.start.column}`;
+        
+        // Get element name
+        let tagName = '';
+        let componentName = '';
+
+        if (t.isJSXIdentifier(node.name)) {
+          tagName = node.name.name;
+          // Try to find component name from parent scope
+          const parentFunction = nodePath.getFunctionParent();
+          if (parentFunction && parentFunction.isFunctionDeclaration()) {
+            componentName = parentFunction.node.id?.name || '';
+          } else if (parentFunction && parentFunction.isArrowFunctionExpression()) {
+            const parentVar = parentFunction.getFunctionParent();
+            if (parentVar && parentVar.isVariableDeclarator() && t.isIdentifier(parentVar.node.id)) {
+              componentName = parentVar.node.id.name;
+            }
+          }
+        } else if (t.isJSXMemberExpression(node.name)) {
+          tagName = node.name.property.name;
+        }
+
+        // Only instrument DOM elements (lowercase) or all elements if configured
+        const isDOMElement = /^[a-z]/.test(tagName);
+        
+        if (!isDOMElement && !options.instrumentComponents) {
+          return;
+        }
+
+        // Get element index if enabled
+        let elementIdx = null;
+        if (includeElementIndex) {
+          const currentIndex = elementIndexMap.get(resourcePath) || 0;
+          elementIdx = currentIndex;
+          elementIndexMap.set(resourcePath, currentIndex + 1);
+        }
+
+        // Create attributes to inject
+        const attributesToAdd = [
+          t.jsxAttribute(
+            t.jsxIdentifier('data-keak-src'),
+            t.stringLiteral(sourceLocation)
+          )
+        ];
+
+        // Add component name if available
+        if (componentName) {
+          attributesToAdd.push(
+            t.jsxAttribute(
+              t.jsxIdentifier('data-keak-component'),
+              t.stringLiteral(componentName)
+            )
+          );
+        }
+
+        // Add element index if enabled
+        if (elementIdx !== null) {
+          attributesToAdd.push(
+            t.jsxAttribute(
+              t.jsxIdentifier('data-keak-idx'),
+              t.stringLiteral(String(elementIdx))
+            )
+          );
+        }
+
+        // Add attributes to the node
+        node.attributes.push(...attributesToAdd);
+        elementCount++;
+      }
+    });
+
+    // Generate the transformed code
+    const output = babelGenerator(ast, {
+      retainLines: false,
+      compact: false,
+      sourceMaps: false
+    }, source);
+
+    if (elementCount > 0) {
+      console.log(`[keak-loader-pre] ✓ Injected attributes into ${elementCount} elements in ${path.relative(projectRoot || process.cwd(), resourcePath)}`);
+    }
+
+    return output.code;
+  } catch (error) {
+    // If transformation fails, return original source
+    console.error(`[keak-loader-pre] ❌ Error processing ${resourcePath}:`, error.message);
+    if (devWarnings) {
+      console.error('[keak-loader-pre] Stack:', error.stack);
+    }
+    return source;
+  }
+};