@keak/sdk 1.0.1

package/src/cli/framework-config.js

@@ -0,0 +1,477 @@
+#!/usr/bin/env node
+
+/**
+ * Framework Configuration Manager
+ *
+ * This module handles framework-specific configurations needed for Keak to work properly.
+ * Specifically, it sets up Babel transforms to preserve React source information in Fiber nodes.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+// ANSI color codes
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  red: '\x1b[31m',
+};
+
+export class FrameworkConfigManager {
+  constructor(projectRoot) {
+    this.projectRoot = projectRoot;
+    this.packageJsonPath = path.join(projectRoot, 'package.json');
+    this.framework = null;
+  }
+
+  /**
+   * Detect the framework being used
+   */
+  detectFramework() {
+    if (!fs.existsSync(this.packageJsonPath)) {
+      return null;
+    }
+
+    const packageJson = JSON.parse(fs.readFileSync(this.packageJsonPath, 'utf-8'));
+    const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+
+    if (deps['next']) {
+      this.framework = 'nextjs';
+      return 'nextjs';
+    } else if (deps['vite'] && deps['react']) {
+      this.framework = 'vite';
+      return 'vite';
+    } else if (deps['react-scripts']) {
+      this.framework = 'cra';
+      return 'cra';
+    } else if (deps['gatsby']) {
+      this.framework = 'gatsby';
+      return 'gatsby';
+    }
+
+    return null;
+  }
+
+  /**
+   * Setup Babel configuration for the detected framework
+   */
+  async setupBabelConfig() {
+    const framework = this.detectFramework();
+
+    if (!framework) {
+      console.log(`${colors.yellow}⚠️  Could not detect framework, skipping Babel setup${colors.reset}`);
+      return false;
+    }
+
+    console.log(`${colors.blue}🔧 Setting up Babel configuration for ${framework}...${colors.reset}`);
+
+    try {
+      switch (framework) {
+        case 'nextjs':
+          return await this.setupNextJsConfig();
+        case 'vite':
+          return await this.setupViteConfig();
+        case 'cra':
+          return await this.setupCRAConfig();
+        case 'gatsby':
+          return await this.setupGatsbyConfig();
+        default:
+          return false;
+      }
+    } catch (error) {
+      console.error(`${colors.red}❌ Failed to setup Babel config: ${error.message}${colors.reset}`);
+      return false;
+    }
+  }
+
+  /**
+   * Check if project is using Turbopack
+   */
+  isTurbopackEnabled() {
+    const packageJson = JSON.parse(fs.readFileSync(this.packageJsonPath, 'utf-8'));
+    const devScript = packageJson.scripts?.dev || '';
+    return devScript.includes('--turbopack') || devScript.includes('turbo');
+  }
+
+  /**
+   * Setup Next.js configuration
+   */
+  async setupNextJsConfig() {
+    const nextConfigPath = path.join(this.projectRoot, 'next.config.js');
+    const babelrcPath = path.join(this.projectRoot, '.babelrc');
+    const packageJsonPath = this.packageJsonPath;
+
+    // Check if using Turbopack
+    if (this.isTurbopackEnabled()) {
+      console.log(`${colors.yellow}⚠️  Turbopack detected - disabling for Keak compatibility${colors.reset}`);
+
+      // Update package.json to remove --turbopack flag
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+      if (packageJson.scripts?.dev) {
+        // Create backup dev:turbo script
+        packageJson.scripts['dev:turbo'] = packageJson.scripts.dev;
+        // Remove --turbopack flag from dev script
+        packageJson.scripts.dev = packageJson.scripts.dev.replace(/--turbopack\s*/g, '').replace(/\s+/g, ' ').trim();
+
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+        console.log(`${colors.green}✅ Updated package.json (saved turbo script as 'dev:turbo')${colors.reset}`);
+      }
+    }
+
+    // Check if babel dependencies are installed
+    const hasRequiredDeps = await this.ensureBabelDependencies([
+      '@babel/plugin-transform-react-jsx-source',
+      'babel-loader',
+      '@babel/runtime'
+    ]);
+
+    if (!hasRequiredDeps) {
+      console.log(`${colors.yellow}⚠️  Installing required Babel dependencies...${colors.reset}`);
+      await this.installBabelDependencies([
+        '@babel/plugin-transform-react-jsx-source',
+        'babel-loader',
+        '@babel/runtime'
+      ]);
+    }
+
+    // Create or update .babelrc
+    const babelConfig = {
+      presets: ['next/babel'],
+      env: {
+        development: {
+          plugins: ['@babel/plugin-transform-react-jsx-source']
+        }
+      }
+    };
+
+    fs.writeFileSync(babelrcPath, JSON.stringify(babelConfig, null, 2));
+    console.log(`${colors.green}✅ Created .babelrc${colors.reset}`);
+
+    // Update next.config.js
+    if (fs.existsSync(nextConfigPath)) {
+      const content = fs.readFileSync(nextConfigPath, 'utf-8');
+
+      // Check if already configured
+      if (content.includes('babel-loader') && content.includes('react-jsx-source')) {
+        console.log(`${colors.green}✅ Next.js already configured${colors.reset}`);
+        return true;
+      }
+
+      // Backup original config
+      fs.writeFileSync(`${nextConfigPath}.backup`, content);
+      console.log(`${colors.cyan}📋 Backed up next.config.js${colors.reset}`);
+
+      // Add webpack configuration
+      const updatedConfig = this.injectNextJsWebpackConfig(content);
+      fs.writeFileSync(nextConfigPath, updatedConfig);
+      console.log(`${colors.green}✅ Updated next.config.js${colors.reset}`);
+    } else {
+      // Create new next.config.js
+      const newConfig = this.generateNextJsConfig();
+      fs.writeFileSync(nextConfigPath, newConfig);
+      console.log(`${colors.green}✅ Created next.config.js${colors.reset}`);
+    }
+
+    return true;
+  }
+
+  /**
+   * Inject webpack configuration into existing Next.js config
+   */
+  injectNextJsWebpackConfig(content) {
+    // Check if webpack config already exists
+    if (content.includes('webpack:')) {
+      console.log(`${colors.yellow}⚠️  Webpack config already exists, please manually add Babel loader${colors.reset}`);
+      return content;
+    }
+
+    // Find the nextConfig object
+    const configMatch = content.match(/(const\s+nextConfig\s*=\s*{)([\s\S]*?)(}\s*;?\s*(?:module\.exports|export default))/);
+
+    if (!configMatch) {
+      console.log(`${colors.yellow}⚠️  Could not parse next.config.js, please configure manually${colors.reset}`);
+      return content;
+    }
+
+    const webpackConfig = `
+  // Configure webpack to preserve React debug information (added by Keak)
+  webpack: (config, { dev }) => {
+    if (dev) {
+      // Disable minification in development
+      config.optimization = {
+        ...config.optimization,
+        minimize: false,
+      };
+
+      // Enable source maps
+      config.devtool = 'cheap-module-source-map';
+
+      // Add babel-loader for JSX files to inject __source
+      config.module.rules.push({
+        test: /\\.(jsx|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['next/babel'],
+            plugins: ['@babel/plugin-transform-react-jsx-source'],
+          },
+        },
+      });
+    }
+    return config;
+  },`;
+
+    // Insert webpack config before the closing brace
+    return content.replace(
+      configMatch[0],
+      `${configMatch[1]}${configMatch[2]}${webpackConfig}\n${configMatch[3]}`
+    );
+  }
+
+  /**
+   * Generate a new Next.js config file
+   */
+  generateNextJsConfig() {
+    return `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+
+  // Configure webpack to preserve React debug information (added by Keak)
+  webpack: (config, { dev }) => {
+    if (dev) {
+      // Disable minification in development
+      config.optimization = {
+        ...config.optimization,
+        minimize: false,
+      };
+
+      // Enable source maps
+      config.devtool = 'cheap-module-source-map';
+
+      // Add babel-loader for JSX files to inject __source
+      config.module.rules.push({
+        test: /\\.(jsx|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['next/babel'],
+            plugins: ['@babel/plugin-transform-react-jsx-source'],
+          },
+        },
+      });
+    }
+    return config;
+  },
+};
+
+module.exports = nextConfig;
+`;
+  }
+
+  /**
+   * Setup Vite configuration
+   */
+  async setupViteConfig() {
+    const viteConfigPaths = [
+      path.join(this.projectRoot, 'vite.config.ts'),
+      path.join(this.projectRoot, 'vite.config.js'),
+    ];
+
+    const existingConfig = viteConfigPaths.find(p => fs.existsSync(p));
+
+    // Install required dependencies
+    await this.installBabelDependencies(['@vitejs/plugin-react']);
+
+    if (existingConfig) {
+      const content = fs.readFileSync(existingConfig, 'utf-8');
+
+      // Check if already configured
+      if (content.includes('jsxDev: true') || content.includes('@vitejs/plugin-react')) {
+        console.log(`${colors.green}✅ Vite already configured${colors.reset}`);
+        return true;
+      }
+
+      // Backup and update
+      fs.writeFileSync(`${existingConfig}.backup`, content);
+      const updated = this.updateViteConfig(content);
+      fs.writeFileSync(existingConfig, updated);
+      console.log(`${colors.green}✅ Updated ${path.basename(existingConfig)}${colors.reset}`);
+    } else {
+      // Create new config
+      const newConfig = this.generateViteConfig();
+      fs.writeFileSync(viteConfigPaths[0], newConfig);
+      console.log(`${colors.green}✅ Created vite.config.ts${colors.reset}`);
+    }
+
+    return true;
+  }
+
+  /**
+   * Update existing Vite config
+   */
+  updateViteConfig(content) {
+    // Add React plugin with development mode options
+    if (!content.includes('@vitejs/plugin-react')) {
+      // Add import
+      const importLine = "import react from '@vitejs/plugin-react';\n";
+      const importIndex = content.indexOf('import');
+      content = importIndex >= 0
+        ? content.slice(0, importIndex) + importLine + content.slice(importIndex)
+        : importLine + content;
+    }
+
+    // Update plugins array
+    if (content.includes('plugins:')) {
+      content = content.replace(
+        /plugins:\s*\[([\s\S]*?)\]/,
+        `plugins: [react({ jsxDev: true })$1]`
+      );
+    }
+
+    return content;
+  }
+
+  /**
+   * Generate new Vite config
+   */
+  generateViteConfig() {
+    return `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react({
+      // Enable development mode JSX transform (preserves __source)
+      jsxDev: true,
+    }),
+  ],
+});
+`;
+  }
+
+  /**
+   * Setup Create React App configuration
+   */
+  async setupCRAConfig() {
+    console.log(`${colors.yellow}⚠️  Create React App uses CRACO or react-app-rewired for config overrides${colors.reset}`);
+    console.log(`${colors.cyan}ℹ️  React source information is enabled by default in CRA dev mode${colors.reset}`);
+    return true;
+  }
+
+  /**
+   * Setup Gatsby configuration
+   */
+  async setupGatsbyConfig() {
+    const gatsbyConfigPath = path.join(this.projectRoot, 'gatsby-config.js');
+
+    console.log(`${colors.cyan}ℹ️  Gatsby enables React source information by default in development${colors.reset}`);
+
+    if (fs.existsSync(gatsbyConfigPath)) {
+      console.log(`${colors.green}✅ Gatsby config found${colors.reset}`);
+    }
+
+    return true;
+  }
+
+  /**
+   * Check if Babel dependencies are installed
+   */
+  async ensureBabelDependencies(deps) {
+    if (!fs.existsSync(this.packageJsonPath)) {
+      return false;
+    }
+
+    const packageJson = JSON.parse(fs.readFileSync(this.packageJsonPath, 'utf-8'));
+    const allDeps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies,
+    };
+
+    return deps.every(dep => dep in allDeps);
+  }
+
+  /**
+   * Install Babel dependencies
+   */
+  async installBabelDependencies(deps) {
+    const { execSync } = await import('child_process');
+
+    console.log(`${colors.blue}📦 Installing: ${deps.join(', ')}...${colors.reset}`);
+
+    try {
+      // Detect package manager
+      const hasYarn = fs.existsSync(path.join(this.projectRoot, 'yarn.lock'));
+      const hasPnpm = fs.existsSync(path.join(this.projectRoot, 'pnpm-lock.yaml'));
+
+      let installCmd;
+      if (hasPnpm) {
+        installCmd = `pnpm add -D ${deps.join(' ')}`;
+      } else if (hasYarn) {
+        installCmd = `yarn add -D ${deps.join(' ')}`;
+      } else {
+        installCmd = `npm install --save-dev ${deps.join(' ')}`;
+      }
+
+      execSync(installCmd, {
+        cwd: this.projectRoot,
+        stdio: 'inherit'
+      });
+
+      console.log(`${colors.green}✅ Dependencies installed${colors.reset}`);
+      return true;
+    } catch (error) {
+      console.error(`${colors.red}❌ Failed to install dependencies: ${error.message}${colors.reset}`);
+      return false;
+    }
+  }
+
+  /**
+   * Show manual configuration instructions
+   */
+  showManualInstructions() {
+    const instructions = {
+      nextjs: `
+${colors.cyan}Next.js Manual Configuration:${colors.reset}
+
+1. Install dependencies:
+   npm install --save-dev @babel/plugin-transform-react-jsx-source babel-loader
+
+2. Create .babelrc:
+   {
+     "presets": ["next/babel"],
+     "env": {
+       "development": {
+         "plugins": ["@babel/plugin-transform-react-jsx-source"]
+       }
+     }
+   }
+
+3. Update next.config.js - add webpack config to preserve React source info
+   See: https://docs.keak.dev/setup/nextjs
+`,
+      vite: `
+${colors.cyan}Vite Manual Configuration:${colors.reset}
+
+1. Install plugin:
+   npm install --save-dev @vitejs/plugin-react
+
+2. Update vite.config.ts:
+   import react from '@vitejs/plugin-react';
+
+   export default defineConfig({
+     plugins: [react({ jsxDev: true })]
+   });
+`,
+    };
+
+    console.log(instructions[this.framework] || '');
+  }
+}
+
+export default FrameworkConfigManager;