@keak/sdk 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keak/sdk",
-  "version": "2.0.3",
+  "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,41 +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, isServer } = options;
+      const projectRoot = process.cwd();
 
       console.log('[Keak Plugin] webpack called - dev:', dev, 'isServer:', isServer);
 
       // Only inject loader in development mode
       if (!dev) {
         console.log('[Keak Plugin] Skipping - not in development mode');
-        // Call original webpack config if it exists
         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;
       
-      console.log('[Keak Plugin] Using loader path:', keakLoaderPath);
-      console.log('[Keak Plugin] Loader exists:', fs.existsSync(keakLoaderPath));
+      // 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) {
@@ -44,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
             }
           }
         ]
@@ -68,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,109 +1,187 @@
 /**
  * Webpack loader that injects Keak source attributes into JSX
  * 
- * Uses regex-based injection instead of full Babel AST transformation
- * to avoid interfering with React's module resolution in Next.js 15
+ * 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');
 
+/**
+ * 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
+  
+  // 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 {
-    // 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);
-        }
+    // 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;
+    }
+    
+    // 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
       }
     }
-
-    // Track the current line number
-    const lines = source.split('\n');
-    const processedLines = [];
     
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const lineNumber = i + 1;
-      
-      // Match JSX opening tags: <ComponentName or <div, etc.
-      // But not self-closing tags that are already complete, or fragments
-      const processedLine = line.replace(
-        // Match: <TagName followed by space, newline, or >
-        // But NOT: </tag, <>, <Fragment
-        /<([A-Z][a-zA-Z0-9]*|[a-z][a-zA-Z0-9-]*)(\s|>)/g,
-        (match, tagName, after) => {
-          // Skip fragments and closing tags
-          if (tagName === 'Fragment' || tagName === '') {
-            return match;
-          }
-          
-          // Skip if this looks like it already has data-keak attributes
-          if (line.includes('data-keak-')) {
-            return match;
-          }
-          
-          // Inject the attribute
-          const attr = ` data-keak-src="${sourceFile}:${lineNumber}:1"`;
-          
-          if (after === '>') {
-            // <tag> -> <tag data-keak-src="...">
-            return `<${tagName}${attr}>`;
-          } else {
-            // <tag  -> <tag data-keak-src="..." 
-            return `<${tagName}${attr}${after}`;
-          }
-        }
-      );
-      
-      processedLines.push(processedLine);
+    // 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
     }
-
-    return processedLines.join('\n');
+    
+    // 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,
+    });
+    
+    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;
   }