@keak/sdk 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keak/sdk",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Production-ready A/B testing and experimentation SDK for React applications with visual editing, source mapping, and real-time variant testing",
   "author": "Keak Team",
   "homepage": "https://www.keak.com/",
@@ -75,7 +75,10 @@
     }
   },
   "dependencies": {
+    "@babel/core": "^7.26.0",
     "@babel/parser": "^7.26.3",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@babel/traverse": "^7.26.5",
     "@babel/types": "^7.26.5",
     "clsx": "^2.1.1",
@@ -91,6 +94,7 @@
     "@types/node": "^24.3.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^5.1.2",
     "autoprefixer": "^10.4.0",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",

package/src/plugins/next.cjs

@@ -1,35 +1,93 @@
 /**
  * Keak Next.js Plugin
- * Simplified version - injects source location attributes in development only
- *
+ * Injects source location attributes into JSX elements in development mode
+ * 
+ * This enables Keak's element selection feature to map DOM elements back to source code.
+ * 
  * Usage in next.config.js:
- * const { withKeak } = require('@keak/sdk/next');
+ * const { withKeak } = require('@keak/sdk/plugins/next');
  * module.exports = withKeak({ ... });
+ * 
+ * IMPORTANT: This plugin only works with webpack, not Turbopack.
+ * Make sure your dev script does NOT include --turbopack flag.
  */
 
 const path = require('path');
 const fs = require('fs');
 
+/**
+ * Check if Babel dependencies are available
+ * The loader needs @babel/core to transform JSX
+ */
+function checkBabelAvailable(projectRoot) {
+  const babelCorePath = path.join(projectRoot, 'node_modules', '@babel', 'core');
+  const babelReactPath = path.join(projectRoot, 'node_modules', '@babel', 'preset-react');
+  
+  const hasBabelCore = fs.existsSync(babelCorePath);
+  const hasBabelReact = fs.existsSync(babelReactPath);
+  
+  return {
+    available: hasBabelCore && hasBabelReact,
+    hasBabelCore,
+    hasBabelReact
+  };
+}
+
 function withKeak(nextConfig = {}) {
   return {
     ...nextConfig,
     webpack(config, options) {
-      const { dev } = options;
+      const { dev, isServer } = options;
+      const projectRoot = process.cwd();
+
+      console.log('[Keak Plugin] webpack called - dev:', dev, 'isServer:', isServer);
 
       // Only inject loader in development mode
       if (!dev) {
-        // Call original webpack config if it exists
+        console.log('[Keak Plugin] Skipping - not in development mode');
         if (typeof nextConfig.webpack === 'function') {
           return nextConfig.webpack(config, options);
         }
         return config;
       }
 
-      // 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');
+      // Check if Babel is available (required for AST transformation)
+      const babelCheck = checkBabelAvailable(projectRoot);
+      if (!babelCheck.available) {
+        console.warn('[Keak Plugin] ⚠️ Babel not fully available for source mapping');
+        if (!babelCheck.hasBabelCore) {
+          console.warn('[Keak Plugin]   Missing: @babel/core');
+        }
+        if (!babelCheck.hasBabelReact) {
+          console.warn('[Keak Plugin]   Missing: @babel/preset-react');
+        }
+        console.warn('[Keak Plugin]   Source mapping may not work. Run: npm install @babel/core @babel/preset-react');
+        // Continue anyway - the loader will gracefully handle missing deps
+      }
+
+      // Resolve loader path from project .keak directory or fallback to SDK
+      const projectKeakLoader = path.resolve(projectRoot, '.keak/webpack-loader-babel/index.js');
+      const sdkLoaderPath = path.resolve(__dirname, 'webpack-loader-babel/index.js');
+      
+      let keakLoaderPath = null;
+      
+      // Prefer project-local loader (copied during setup)
+      if (fs.existsSync(projectKeakLoader)) {
+        keakLoaderPath = projectKeakLoader;
+        console.log('[Keak Plugin] Using project loader:', projectKeakLoader);
+      } else if (fs.existsSync(sdkLoaderPath)) {
+        keakLoaderPath = sdkLoaderPath;
+        console.log('[Keak Plugin] Using SDK loader:', sdkLoaderPath);
+      } else {
+        console.warn('[Keak Plugin] ⚠️ No loader found! Source mapping will not work.');
+        console.warn('[Keak Plugin]   Expected at:', projectKeakLoader);
+        console.warn('[Keak Plugin]   Or at:', sdkLoaderPath);
+        // Continue without loader - don't break the build
+        if (typeof nextConfig.webpack === 'function') {
+          return nextConfig.webpack(config, options);
+        }
+        return config;
+      }
 
       // Ensure config.module.rules exists
       if (!config.module || !config.module.rules) {
@@ -38,20 +96,23 @@ function withKeak(nextConfig = {}) {
       }
 
       // Create the loader rule
+      // IMPORTANT: Only match .jsx and .tsx files to avoid processing non-JSX code
+      // This prevents issues with TypeScript generics being misinterpreted as JSX
       const keakRule = {
-        test: /\.[jt]sx?$/,
+        test: /\.(jsx|tsx)$/, // Only JSX/TSX files (not .js/.ts)
         exclude: [
           /node_modules/,
           /\.next\//,
           /webpack/,
-          /next\/dist/
+          /next\/dist/,
+          /\.keak\//, // Don't process our own loader files
         ],
         enforce: 'pre', // Run BEFORE SWC compilation
         use: [
           {
             loader: keakLoaderPath,
             options: {
-              projectRoot: process.cwd()
+              projectRoot: projectRoot
             }
           }
         ]
@@ -62,9 +123,11 @@ function withKeak(nextConfig = {}) {
       if (oneOfRule && oneOfRule.oneOf) {
         // Add to beginning so it runs before SWC
         oneOfRule.oneOf.unshift(keakRule);
+        console.log('[Keak Plugin] ✅ Injected loader into webpack oneOf rules');
       } else {
         // Fallback: Add as top-level rule with enforce: 'pre'
         config.module.rules.unshift(keakRule);
+        console.log('[Keak Plugin] ✅ Injected loader as top-level webpack rule');
       }
 
       // Call original webpack config if it exists

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

@@ -1,124 +1,187 @@
 /**
- * Webpack loader that uses Babel to inject Keak source attributes into JSX
- * Simplified version - runs BEFORE SWC compilation
+ * Webpack loader that injects Keak source attributes into JSX
+ * 
+ * Uses Babel AST transformation to safely inject data-keak-src attributes
+ * into JSX elements without corrupting TypeScript generics or other syntax.
+ * 
  * Only runs in development mode
  */
 
 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');
 
-module.exports = function keakLoaderBabel(source) {
-  this.cacheable(true);
+/**
+ * Create the Babel plugin for injecting source attributes
+ */
+function createKeakSourcePlugin(sourceFile) {
+  return function keakSourcePlugin({ types: t }) {
+    return {
+      name: 'keak-source-injector',
+      visitor: {
+        JSXOpeningElement(path) {
+          // Skip if already has data-keak-src attribute
+          const hasKeakAttr = path.node.attributes.some(
+            attr => attr.type === 'JSXAttribute' && 
+                   attr.name && 
+                   attr.name.name && 
+                   attr.name.name.toString().startsWith('data-keak-')
+          );
+          
+          if (hasKeakAttr) {
+            return;
+          }
+          
+          // Get source location from Babel's AST
+          const loc = path.node.loc;
+          if (!loc || !loc.start) {
+            return;
+          }
+          
+          const lineNumber = loc.start.line;
+          const columnNumber = loc.start.column + 1; // Babel columns are 0-indexed
+          
+          // Create the data-keak-src attribute value
+          const srcValue = `${sourceFile}:${lineNumber}:${columnNumber}`;
+          
+          // Add the attribute to the JSX element
+          path.node.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier('data-keak-src'),
+              t.stringLiteral(srcValue)
+            )
+          );
+        }
+      }
+    };
+  };
+}
 
+/**
+ * Extract a relative source file path from an absolute path
+ */
+function getRelativeSourcePath(absolutePath, projectRoot) {
+  // Try to extract from common directory structures
+  const srcParts = absolutePath.split('/src/');
+  if (srcParts.length > 1) {
+    return 'src/' + srcParts[srcParts.length - 1];
+  }
+  
+  const appParts = absolutePath.split('/app/');
+  if (appParts.length > 1) {
+    return 'app/' + appParts[appParts.length - 1];
+  }
+  
+  const compParts = absolutePath.split('/components/');
+  if (compParts.length > 1) {
+    return 'components/' + compParts[compParts.length - 1];
+  }
+  
+  const pagesParts = absolutePath.split('/pages/');
+  if (pagesParts.length > 1) {
+    return 'pages/' + pagesParts[pagesParts.length - 1];
+  }
+  
+  // Fallback: use path relative to project root or cwd
+  const root = projectRoot || process.cwd();
+  return path.relative(root, absolutePath);
+}
+
+module.exports = function keakSourceLoader(source) {
+  // Mark as cacheable
+  this.cacheable(true);
+  
   const resourcePath = this.resourcePath;
   const options = this.getOptions() || {};
-
+  
   // Skip in production
   if (process.env.NODE_ENV === 'production' && !options.forceProduction) {
     return source;
   }
-
-  // Skip if not a JSX/TSX file
-  if (!/\.(jsx|tsx|js|ts)$/.test(resourcePath)) {
+  
+  // Only process JSX/TSX files
+  if (!/\.(jsx|tsx)$/.test(resourcePath)) {
     return source;
   }
-
+  
+  // Skip node_modules
+  if (resourcePath.includes('node_modules')) {
+    return source;
+  }
+  
+  // Skip files that use next/font (known to conflict with Babel processing)
+  if (source.includes('next/font') || source.includes('@next/font')) {
+    return source;
+  }
+  
+  // Skip if already processed
+  if (source.includes('data-keak-src=')) {
+    return source;
+  }
+  
+  // Skip files with no JSX (quick check to avoid unnecessary Babel parsing)
+  if (!source.includes('<') || !source.includes('>')) {
+    return source;
+  }
+  
   try {
-    // Parse the source code
-    const ast = babelParser.parse(source, {
-      sourceType: 'module',
-      plugins: [
-        'jsx',
-        'typescript',
-        'decorators-legacy',
-        'classProperties',
-        'objectRestSpread',
-        'dynamicImport',
-        'nullishCoalescingOperator',
-        'optionalChaining'
-      ]
-    });
-
-    let skipFile = false;
-
-    // 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) {
+    // Try to require @babel/core - it should be available via @keak/sdk dependencies
+    let babel;
+    try {
+      babel = require('@babel/core');
+    } catch (e) {
+      // Babel not available, return original source
+      console.warn('[keak-loader] @babel/core not found, skipping transformation');
       return source;
     }
-
-    // Transform JSX elements
-    babelTraverse(ast, {
-      JSXOpeningElement(nodePath) {
-        const node = nodePath.node;
-
-        // Skip if already has keak attributes
-        const hasKeakAttr = node.attributes.some(attr =>
-          t.isJSXAttribute(attr) &&
-          t.isJSXIdentifier(attr.name) &&
-          (attr.name.name === 'data-keak-file' || attr.name.name === 'data-keak-src')
-        );
-
-        if (hasKeakAttr || !node.loc) {
-          return;
-        }
-
-        // Smart relative path detection
-        let sourceFile;
-        const srcParts = resourcePath.split('/src/');
-        if (srcParts.length > 1) {
-          sourceFile = 'src/' + srcParts[srcParts.length - 1];
-        } else {
-          const appParts = resourcePath.split('/app/');
-          if (appParts.length > 1) {
-            sourceFile = 'app/' + appParts[appParts.length - 1];
-          } else {
-            const compParts = resourcePath.split('/components/');
-            if (compParts.length > 1) {
-              sourceFile = 'components/' + compParts[compParts.length - 1];
-            } else {
-              sourceFile = path.relative(process.cwd(), resourcePath);
-            }
-          }
-        }
-
-        const { line } = node.loc.start;
-
-        // Add data-keak-file and data-keak-line attributes
-        node.attributes.push(
-          t.jsxAttribute(
-            t.jsxIdentifier('data-keak-file'),
-            t.stringLiteral(sourceFile)
-          ),
-          t.jsxAttribute(
-            t.jsxIdentifier('data-keak-line'),
-            t.stringLiteral(String(line))
-          )
-        );
+    
+    // Get relative source path for the attribute
+    const sourceFile = getRelativeSourcePath(resourcePath, options.projectRoot);
+    
+    // Determine if this is TypeScript
+    const isTypeScript = /\.tsx?$/.test(resourcePath);
+    
+    // Configure Babel presets based on file type
+    const presets = [];
+    if (isTypeScript) {
+      try {
+        require.resolve('@babel/preset-typescript');
+        presets.push(['@babel/preset-typescript', { isTSX: true, allExtensions: true }]);
+      } catch (e) {
+        // TypeScript preset not available, try parsing as JavaScript
       }
+    }
+    
+    // Always include React preset for JSX
+    try {
+      require.resolve('@babel/preset-react');
+      presets.push(['@babel/preset-react', { runtime: 'automatic' }]);
+    } catch (e) {
+      // React preset not available
+    }
+    
+    // Transform the source using Babel
+    const result = babel.transformSync(source, {
+      filename: resourcePath,
+      presets: presets,
+      plugins: [createKeakSourcePlugin(sourceFile)],
+      // Important: preserve the original code structure
+      retainLines: true,
+      // Don't generate source maps (webpack handles this)
+      sourceMaps: false,
+      // Parse as module
+      sourceType: 'module',
+      // Don't run other config files
+      configFile: false,
+      babelrc: false,
     });
-
-    // Generate transformed code
-    const output = babelGenerator(ast, {
-      retainLines: false,
-      compact: false
-    }, source);
-
-    return output.code;
+    
+    if (result && result.code) {
+      return result.code;
+    }
+    
+    // If transformation failed, return original
+    return source;
   } catch (error) {
-    // Return original source on error
+    // Log error but don't fail the build - return original source
     console.error(`[keak-loader] Error processing ${resourcePath}:`, error.message);
     return source;
   }