@keak/sdk 1.0.1

package/src/cli/code-transformer.js

@@ -0,0 +1,354 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+
+class CodeTransformer {
+  constructor() {
+    this.importAdded = false;
+    this.stats = {
+      filesProcessed: 0,
+      elementsWrapped: 0,
+      filesModified: 0
+    };
+  }
+
+  // Transform React/JSX files to wrap clickable elements with Conversion component
+  transformReactFile(content, filePath) {
+    let modified = content;
+    this.importAdded = false;
+
+    // Skip if file already has Conversion imports
+    if (content.includes('import') && content.includes('Conversion') && content.includes('keak-sdk')) {
+      return content;
+    }
+
+    // Patterns for clickable elements that should be wrapped
+    const clickablePatterns = [
+      // Button elements
+      {
+        pattern: /<button([^]*?)([\s\S]*?)<\/button/g,
+        type: 'button',
+        category: this.detectCategoryFromContent
+      },
+      // Link elements  
+      {
+        pattern: /<a([^]*?)([\s\S]*?)<\/a/g,
+        type: 'link',
+        category: this.detectCategoryFromContent
+      },
+      // Input buttons (self-closing)
+      {
+        pattern: /<input([^]*?type=["'](?:button|submit)["'][^]*?)(\s*\/)/g,
+        type: 'button',
+        category: this.detectCategoryFromContent,
+        selfClosing: true
+      },
+      // Clickable divs/spans (with onClick)
+      {
+        pattern: /<(div|span)([^]*?onClick[^]*?)([\s\S]*?)<\/\1/g,
+        type: 'custom',
+        category: this.detectCategoryFromContent
+      }
+    ];
+
+    let elementsFound = 0;
+
+    // Transform each pattern
+    clickablePatterns.forEach(({ pattern, type, category, selfClosing }) => {
+      modified = modified.replace(pattern, (match, ...args) => {
+        // Skip if already wrapped with Conversion
+        if (match.includes('data-keak-conversion') || 
+            (match.toLowerCase().includes('<conversion') && match.toLowerCase().includes('</conversion'))) {
+          return match;
+        }
+
+        let attributes, content, elementType, selfClosingPart;
+        
+        if (selfClosing) {
+          // For input elements: match, attributes, selfClosingPart
+          [, attributes, selfClosingPart] = args;
+          content = '';
+          elementType = 'input';
+        } else if (type === 'custom') {
+          // For div/span with onClick: match, elementType, attributes, content
+          [, elementType, attributes, content] = args;
+        } else {
+          // For button/a elements: match, attributes, content
+          [, attributes, content] = args;
+          elementType = type === 'button' ? 'button' : 'a';
+        }
+
+        // Skip form elements that might break functionality
+        if (attributes && (attributes.includes('type="hidden"') || attributes.includes('type="password"'))) {
+          return match;
+        }
+
+        elementsFound++;
+        
+        // Mark that we found elements (import will be added later)
+        this.importAdded = true;
+
+        // Detect category from content and attributes
+        const detectedCategory = category(content || '', attributes || '');
+        
+        // Build Conversion wrapper
+        const conversionProps = [
+          `type="${type}"`,
+          detectedCategory ? `category="${detectedCategory}"` : '',
+          // Add label from content for better tracking
+          content && content.trim() ? `label="${this.escapeJSX(this.extractTextContent(content))}"` : ''
+        ].filter(Boolean).join(' ');
+
+        if (selfClosing) {
+          // For self-closing elements like input
+          return `<input${attributes}${selfClosingPart}
+`;
+        } else {
+          // For regular elements
+          return `<${elementType}${attributes}${content}</${elementType}`;
+        }
+      });
+    });
+
+    if (elementsFound 0) {
+      // Add the import at the top
+      modified = this.addImportToContent(modified);
+      this.stats.elementsWrapped += elementsFound;
+      this.stats.filesModified++;
+    }
+
+    return modified;
+  }
+
+  // Add import statement to the file content
+  addImportToContent(content) {
+    if (this.importAdded) return content;
+
+    const importStatement = "\n";
+    
+    // Find the best place to add the import
+    const lines = content.split('\n');
+    let insertIndex = 0;
+
+    // Look for existing imports
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      
+      // Skip comments and empty lines at the top
+      if (line.startsWith('//') || line.startsWith('/*') || line === '' || line.startsWith("'use client'") || line.startsWith('"use client"')) {
+        insertIndex = i + 1;
+        continue;
+      }
+      
+      // If we find an import, set insert point after imports
+      if (line.startsWith('import ')) {
+        // Find the end of import block
+        while (i < lines.length && (lines[i].trim().startsWith('import ') || lines[i].trim() === '')) {
+          i++;
+        }
+        insertIndex = i;
+        break;
+      }
+      
+      // If we find any other code, insert before it
+      if (line !== '') {
+        insertIndex = i;
+        break;
+      }
+    }
+
+    lines.splice(insertIndex, 0, importStatement);
+    this.importAdded = true;
+    return lines.join('\n');
+  }
+
+  // Detect conversion category from element content and attributes
+  detectCategoryFromContent(content, attributes) {
+    const text = (content + ' ' + attributes).toLowerCase();
+    
+    if (/buy|purchase|checkout|order|cart|pay|billing/.test(text)) return 'purchase';
+    if (/sign.?up|register|join|create.?account/.test(text)) return 'signup';
+    if (/download|install|get.?app/.test(text)) return 'download';
+    if (/demo|trial|preview|try/.test(text)) return 'demo';
+    if (/contact|call|phone|support|help/.test(text)) return 'contact';
+    if (/learn.?more|read.?more|details|info/.test(text)) return 'engagement';
+    if (/subscribe|newsletter|updates/.test(text)) return 'subscription';
+    
+    return 'interaction';
+  }
+
+  // Extract text content from JSX, removing tags
+  extractTextContent(jsx) {
+    return jsx
+      .replace(/<[^]*/g, ' ') // Remove HTML/JSX tags
+      .replace(/\s+/g, ' ') // Normalize whitespace
+      .trim()
+      .substring(0, 50); // Limit length
+  }
+
+  // Escape JSX string content
+  escapeJSX(str) {
+    return str
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/</g, '&lt;')
+      .replace(//g, '&gt;');
+  }
+
+  // Process a single file
+  processFile(filePath) {
+    try {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      const transformed = this.transformReactFile(content, filePath);
+      
+      if (transformed !== content) {
+        // Create backup
+        const backupPath = `${filePath}.keak-backup`;
+        fs.writeFileSync(backupPath, content);
+        
+        // Write transformed content
+        fs.writeFileSync(filePath, transformed);
+        
+        return { success: true, modified: true, backup: backupPath };
+      }
+      
+      return { success: true, modified: false };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  }
+
+  // Find all React/JSX files in a directory
+  findReactFiles(dir, extensions = ['.jsx', '.tsx', '.js', '.ts']) {
+    const files = [];
+    
+    if (!fs.existsSync(dir)) return files;
+    
+    const items = fs.readdirSync(dir);
+    
+    for (const item of items) {
+      const fullPath = path.join(dir, item);
+      
+      // Skip common directories
+      if (['node_modules', '.git', 'dist', 'build', '.next', 'coverage'].includes(item)) {
+        continue;
+      }
+      
+      const stat = fs.statSync(fullPath);
+      
+      if (stat.isDirectory()) {
+        files.push(...this.findReactFiles(fullPath, extensions));
+      } else if (extensions.some(ext =item.endsWith(ext))) {
+        // Check if file contains JSX/React content
+        try {
+          const content = fs.readFileSync(fullPath, 'utf-8');
+          if (this.isReactFile(content)) {
+            files.push(fullPath);
+          }
+        } catch (error) {
+          // Skip files that can't be read
+        }
+      }
+    }
+    
+    return files;
+  }
+
+  // Check if file contains React/JSX content
+  isReactFile(content) {
+    return (
+      content.includes('import') && (
+        content.includes('react') || 
+        content.includes('React') ||
+        content.includes('<') && content.includes('') // JSX-like syntax
+      )
+    ) || content.includes('jsx') || content.includes('tsx');
+  }
+
+  // Process all React files in a directory
+  processDirectory(rootDir) {
+    console.log(`🔍 Scanning for React files in ${rootDir}...`);
+    
+    const reactFiles = this.findReactFiles(rootDir);
+    console.log(`📁 Found ${reactFiles.length} React files`);
+    
+    const results = [];
+    
+    for (const filePath of reactFiles) {
+      console.log(`⚙️  Processing ${path.relative(rootDir, filePath)}...`);
+      
+      const result = this.processFile(filePath);
+      result.filePath = filePath;
+      results.push(result);
+      
+      this.stats.filesProcessed++;
+      
+      if (result.success && result.modified) {
+        console.log(`✅ Modified ${path.relative(rootDir, filePath)}`);
+        if (result.backup) {
+          console.log(`📋 Backup created: ${path.basename(result.backup)}`);
+        }
+      }
+    }
+    
+    return results;
+  }
+
+  // Generate a summary report
+  generateReport() {
+    return {
+      summary: `
+🎯 Conversion Tracking Integration Complete!
+
+📊 Summary:
+• Files processed: ${this.stats.filesProcessed}
+• Files modified: ${this.stats.filesModified}
+• Elements wrapped: ${this.stats.elementsWrapped}
+
+✅ All clickable elements have been automatically wrapped with components.
+🔄 Backup files created for all modified files (*.keak-backup)
+📡 Conversion telemetry is now active for all interactions.
+      `,
+      stats: this.stats
+    };
+  }
+}
+
+export default CodeTransformer;
+
+// CLI execution
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const transformer = new CodeTransformer();
+  const targetDir = process.argv[2] || process.cwd();
+  
+  console.log('🎯 Setting up automatic conversion tracking...\n');
+  
+  const results = transformer.processDirectory(targetDir);
+  const report = transformer.generateReport();
+  
+  console.log(report.summary);
+  
+  // Show any errors
+  const errors = results.filter(r =!r.success);
+  if (errors.length 0) {
+    console.log('\n⚠️  Some files had issues:');
+    errors.forEach(error ={
+      console.log(`❌ ${path.relative(targetDir, error.filePath)}: ${error.error}`);
+    });
+  }
+  
+  if (report.stats.filesModified 0) {
+    console.log(`
+🔧 Next steps:
+1. Review the modified files
+2. Test your application to ensure everything works
+3. The components will automatically track all interactions
+4. Check your Keak dashboard for conversion analytics
+
+💡 To undo changes, restore from the .keak-backup files
+    `);
+  } else {
+    console.log('\n✨ No files needed modification. Your code is already optimized!');
+  }
+}