@keak/sdk 1.0.1

package/src/cli/safe-transformer.js

@@ -0,0 +1,456 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+
+class SafeTransformer {
+  constructor() {
+    this.stats = {
+      filesProcessed: 0,
+      elementsWrapped: 0,
+      filesModified: 0
+    };
+  }
+
+  // Safe approach: Only transform simple, well-formed JSX elements
+  transformReactFile(content, filePath) {
+    // Skip if file already has Conversion imports
+    if (content.includes('import') && content.includes('Conversion') && content.includes('keak-sdk')) {
+      return content;
+    }
+
+    let modified = content;
+    let elementsFound = 0;
+
+    // Handle common React patterns for buttons and links
+    const safePatterns = [
+      // HTML button elements
+      {
+        regex: /(<button\s[^>]*>)([\s\S]*?)(<\/button>)/g,
+        type: 'button',
+        replacement: (match, open, content, close) => {
+          if (this.isWellFormedJSX(match)) {
+            const category = this.detectCategory(content + open);
+            const label = this.extractText(content).substring(0, 30);
+            return `<Conversion type="button" category="${category}" label="${this.escapeAttr(label)}">${open}${content}${close}</Conversion>`;
+          }
+          return match;
+        }
+      },
+      // React Button components (capitalized)
+      {
+        regex: /(<Button\s[^>]*>)([\s\S]*?)(<\/Button>)/g,
+        type: 'button',
+        replacement: (match, open, content, close) => {
+          if (this.isWellFormedJSX(match)) {
+            const category = this.detectCategory(content + open);
+            const label = this.extractText(content).substring(0, 30);
+            return `<Conversion type="button" category="${category}" label="${this.escapeAttr(label)}">${open}${content}${close}</Conversion>`;
+          }
+          return match;
+        }
+      },
+      // Self-closing Button components
+      {
+        regex: /(<Button\s[^>]*\/>)/g,
+        type: 'button',
+        replacement: (match, open) => {
+          if (this.isWellFormedJSX(match)) {
+            const category = this.detectCategory(open);
+            const label = this.extractTextFromProps(open);
+            return `<Conversion type="button" category="${category}" label="${this.escapeAttr(label)}">${open}</Conversion>`;
+          }
+          return match;
+        }
+      },
+      // HTML links with href
+      {
+        regex: /(<a\s+[^>]*href=["'][^"']*["'][^>]*>)([\s\S]*?)(<\/a>)/g,
+        type: 'link',
+        replacement: (match, open, content, close) => {
+          if (this.isWellFormedJSX(match)) {
+            const category = this.detectCategory(content + open);
+            const label = this.extractText(content).substring(0, 30);
+            return `<Conversion type="link" category="${category}" label="${this.escapeAttr(label)}">${open}${content}${close}</Conversion>`;
+          }
+          return match;
+        }
+      },
+      // Link components
+      {
+        regex: /(<Link\s[^>]*>)([\s\S]*?)(<\/Link>)/g,
+        type: 'link',
+        replacement: (match, open, content, close) => {
+          if (this.isWellFormedJSX(match)) {
+            const category = this.detectCategory(content + open);
+            const label = this.extractText(content).substring(0, 30);
+            return `<Conversion type="link" category="${category}" label="${this.escapeAttr(label)}">${open}${content}${close}</Conversion>`;
+          }
+          return match;
+        }
+      }
+    ];
+
+    // Only apply transformations if we can safely parse the file
+    if (this.isSafeToTransform(content)) {
+      for (const pattern of safePatterns) {
+        modified = modified.replace(pattern.regex, (...args) => {
+          const match = args[0];
+          
+          // Additional safety checks
+          if (this.isAlreadyWrapped(match, modified) || 
+              this.hasComplexJSX(match) ||
+              this.isInJSXExpression(match, modified, args.index)) {
+            return match;
+          }
+          
+          elementsFound++;
+          return pattern.replacement(...args);
+        });
+      }
+    }
+
+    if (elementsFound > 0) {
+      // Add import
+      modified = this.addImport(modified);
+      this.stats.elementsWrapped += elementsFound;
+      this.stats.filesModified++;
+    }
+
+    return modified;
+  }
+
+  // Check if content is safe to transform
+  isSafeToTransform(content) {
+    // Only reject files with patterns that would definitely break our transformation
+    const dangerousPatterns = [
+      /dangerouslySetInnerHTML/, // Dangerous HTML
+      /jsx`/, // Template literals with JSX
+      /React\.createElement\s*\(/, // React.createElement calls
+      /<script\s*>/i, // Script tags
+      /eval\s*\(/, // eval calls
+    ];
+    
+    return !dangerousPatterns.some(pattern => pattern.test(content));
+  }
+
+  // Check if JSX is well-formed
+  isWellFormedJSX(jsx) {
+    // For conversion wrapping, we just need basic safety checks
+    // The regex patterns already ensure we have complete elements
+    
+    // Check for unmatched curly braces (which could break JSX)
+    const openBraces = (jsx.match(/\{/g) || []).length;
+    const closeBraces = (jsx.match(/\}/g) || []).length;
+    if (openBraces !== closeBraces) return false;
+    
+    // Check for unmatched quotes that could break attributes
+    const singleQuotes = (jsx.match(/'/g) || []).length;
+    const doubleQuotes = (jsx.match(/"/g) || []).length;
+    if (singleQuotes % 2 !== 0 || doubleQuotes % 2 !== 0) return false;
+    
+    // Don't wrap elements that already have conversion tracking
+    if (jsx.includes('data-keak-conversion') || jsx.includes('Conversion')) return false;
+    
+    return true;
+  }
+
+  // Check if element has complex JSX that might break
+  hasComplexJSX(jsx) {
+    return (
+      jsx.includes('...') || // Spread
+      jsx.includes('&&') || // Logical AND
+      jsx.includes('?') || // Ternary
+      jsx.includes('as ') || // TypeScript casting
+      jsx.includes('dangerouslySetInnerHTML') ||
+      jsx.match(/\{\s*\w+\.\w+/) // Complex property access
+    );
+  }
+
+  // Check if we're inside a JSX expression
+  isInJSXExpression(match, content, index) {
+    if (!index) return false;
+    
+    const before = content.substring(Math.max(0, index - 100), index);
+    const after = content.substring(index + match.length, index + match.length + 100);
+    
+    // Check if we're inside curly braces
+    const openBraces = (before.match(/\{/g) || []).length;
+    const closeBraces = (before.match(/\}/g) || []).length;
+    
+    return openBraces > closeBraces;
+  }
+
+  // Check if already wrapped
+  isAlreadyWrapped(match, content) {
+    return content.includes('<Conversion') || match.includes('data-keak-conversion');
+  }
+
+  // Add import statement safely
+  addImport(content) {
+    if (content.includes("import { Conversion } from 'keak-sdk'")) {
+      return content;
+    }
+
+    const lines = content.split('\n');
+    let insertIndex = 0;
+    let lastImportIndex = -1;
+
+    // Find the best place to insert import
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      
+      // Skip initial comments and directives
+      if (line.startsWith('//') || line.startsWith('/*') || line === '' || 
+          line.includes("'use client'") || line.includes('"use client"') ||
+          line.includes("'use server'") || line.includes('"use server"')) {
+        insertIndex = i + 1;
+        continue;
+      }
+      
+      // Track imports
+      if (line.startsWith('import ')) {
+        lastImportIndex = i;
+        continue;
+      }
+      
+      // If we found imports, insert after them
+      if (lastImportIndex >= 0 && !line.startsWith('import ')) {
+        insertIndex = lastImportIndex + 1;
+        break;
+      }
+      
+      // If we find other code, insert before it
+      if (line !== '' && !line.startsWith('import ')) {
+        insertIndex = i;
+        break;
+      }
+    }
+
+    lines.splice(insertIndex, 0, "import { Conversion } from 'keak-sdk';");
+    return lines.join('\n');
+  }
+
+  // Detect category from content
+  detectCategory(text) {
+    const t = text.toLowerCase();
+    
+    if (/buy|purchase|checkout|order|cart|pay/.test(t)) return 'purchase';
+    if (/sign.?up|register|join|create.?account/.test(t)) return 'signup';
+    if (/download|install|get.?app/.test(t)) return 'download';
+    if (/demo|trial|preview|try/.test(t)) return 'demo';
+    if (/contact|call|phone|support/.test(t)) return 'contact';
+    if (/learn.?more|read.?more|details/.test(t)) return 'engagement';
+    if (/subscribe|newsletter/.test(t)) return 'subscription';
+    
+    return 'interaction';
+  }
+
+  // Extract text content safely
+  extractText(html) {
+    return html
+      .replace(/<[^]*/g, ' ')
+      .replace(/\{[^}]*\}/g, ' ') // Remove JSX expressions
+      .replace(/\s+/g, ' ')
+      .trim();
+  }
+
+  // Extract text from props (for self-closing elements)
+  extractTextFromProps(jsx) {
+    // Try to extract text from common props like children, title, aria-label
+    const propsText = [];
+    
+    // Look for title prop
+    const titleMatch = jsx.match(/title=["']([^"']*)["']/);
+    if (titleMatch) propsText.push(titleMatch[1]);
+    
+    // Look for aria-label prop
+    const ariaLabelMatch = jsx.match(/aria-label=["']([^"']*)["']/);
+    if (ariaLabelMatch) propsText.push(ariaLabelMatch[1]);
+    
+    // Look for alt prop
+    const altMatch = jsx.match(/alt=["']([^"']*)["']/);
+    if (altMatch) propsText.push(altMatch[1]);
+    
+    // Look for children prop
+    const childrenMatch = jsx.match(/children=["']([^"']*)["']/);
+    if (childrenMatch) propsText.push(childrenMatch[1]);
+    
+    return propsText.join(' ').substring(0, 30) || 'button';
+  }
+
+  // Escape attribute values safely
+  escapeAttr(str) {
+    return str
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\{/g, '&#123;')
+      .replace(/\}/g, '&#125;');
+  }
+
+  // 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 React files
+  findReactFiles(dir) {
+    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 directories we don't want to process
+      if (['node_modules', '.git', 'dist', 'build', '.next', 'coverage'].includes(item)) {
+        continue;
+      }
+      
+      const stat = fs.statSync(fullPath);
+      
+      if (stat.isDirectory()) {
+        files.push(...this.findReactFiles(fullPath));
+      } else if (this.isReactFile(item, fullPath)) {
+        files.push(fullPath);
+      }
+    }
+    
+    return files;
+  }
+
+  // Check if file is a React file
+  isReactFile(filename, fullPath) {
+    // Check extension
+    if (!/\.(jsx|tsx|js|ts)$/.test(filename)) return false;
+    
+    // Skip test files and config files
+    if (/\.(test|spec|config|stories)\.(jsx?|tsx?)$/.test(filename)) return false;
+    
+    try {
+      const content = fs.readFileSync(fullPath, 'utf-8');
+      
+      // Must contain JSX or React imports and be safe to transform
+      return (
+        content.includes('import') && (
+          content.includes('react') || 
+          content.includes('React') ||
+          /\s*<\w+/.test(content) // JSX elements
+        ) && this.isSafeToTransform(content)
+      );
+    } catch (error) {
+      return false;
+    }
+  }
+
+  // Process directory
+  processDirectory(rootDir) {
+    console.log(`🔍 Scanning for React files in ${rootDir}...`);
+    
+    const reactFiles = this.findReactFiles(rootDir);
+    console.log(`📁 Found ${reactFiles.length} React files (safe to transform)`);
+    
+    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 report
+  generateReport() {
+    return {
+      summary: `
+🎯 Safe Conversion Tracking Integration Complete!
+
+📊 Summary:
+• Files processed: ${this.stats.filesProcessed}
+• Files modified: ${this.stats.filesModified}
+• Elements wrapped: ${this.stats.elementsWrapped}
+
+✅ Safe conversion tracking applied to compatible elements.
+🔄 Backup files created for all modified files (*.keak-backup)
+📡 Conversion telemetry is now active for tracked interactions.
+
+⚠️  Note: Only simple, well-formed JSX elements were wrapped to avoid breaking your code.
+      `,
+      stats: this.stats
+    };
+  }
+}
+
+export default SafeTransformer;
+
+// CLI execution
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const transformer = new SafeTransformer();
+  const targetDir = process.argv[2] || process.cwd();
+  
+  console.log('🎯 Setting up safe 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. Test your application to ensure everything works
+2. The components will automatically track interactions
+3. Check your Keak dashboard for conversion analytics
+4. If issues occur, run: npx keak-setup revert-conversions
+
+💡 This safe mode only wraps simple elements to avoid breaking complex JSX
+    `);
+  } else {
+    console.log('\n✨ No compatible elements found for safe wrapping.');
+    console.log('💡 Complex JSX patterns were skipped to prevent breaking your code.');
+  }
+}