component-tagger/scripts/setup.js

A Vite plugin that automatically adds comprehensive component tagging attributes to JSX/TSX elements for debugging and testing

#!/usr/bin/env node

import { readFileSync, writeFileSync, existsSync } from 'fs';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
import { spawn } from 'child_process';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// Check if this is being run during postinstall (automatic) or manually
const isPostInstall = process.env.npm_lifecycle_event === 'postinstall';

if (isPostInstall) {
  console.log('🎉 Component Tagger installed! Setting up automatically...');
} else {
  console.log('🔧 Component Tagger: Setting up configuration...');
}

// Find the project root
function findProjectRoot() {
  let currentDir = process.cwd();
  
  // If we're in node_modules, go up to find the project root
  if (currentDir.includes('node_modules')) {
    const parts = currentDir.split('/');
    const nodeModulesIndex = parts.lastIndexOf('node_modules');
    if (nodeModulesIndex !== -1) {
      currentDir = parts.slice(0, nodeModulesIndex).join('/');
    }
  }
  
  return currentDir;
}

const projectRoot = findProjectRoot();
const viteConfigPath = join(projectRoot, 'vite.config.ts');
const viteConfigJsPath = join(projectRoot, 'vite.config.js');

console.log(`📁 Looking for Vite config in: ${projectRoot}`);

// Check which config file exists
let configPath = null;

if (existsSync(viteConfigPath)) {
  configPath = viteConfigPath;
  console.log('✅ Found vite.config.ts');
} else if (existsSync(viteConfigJsPath)) {
  configPath = viteConfigJsPath;
  console.log('✅ Found vite.config.js');
} else {
  console.log('⚠️  No vite.config.ts or vite.config.js found.');
  if (isPostInstall) {
    console.log('📝 Please create a vite.config.ts file first, then run:');
    console.log('   npx component-tagger-setup');
  } else {
    console.log('📝 Please create a vite.config.ts file first, then run this command again.');
  }
  process.exit(0);
}

try {
  // Read the current config
  let configContent = readFileSync(configPath, 'utf8');

  // Check if componentTagger is already configured
  if (configContent.includes('componentTagger') || configContent.includes('component-tagger')) {
    console.log('✅ Component Tagger is already configured in your Vite config!');
    process.exit(0);
  }

  // Add import statement
  const importStatement = "import { componentTagger } from 'component-tagger'";
  
  if (!configContent.includes("from 'component-tagger'")) {
    const lines = configContent.split('\n');
    let importIndex = -1;
    
    // Find where to insert the import (after other imports)
    for (let i = 0; i < lines.length; i++) {
      if (lines[i].includes('import') && lines[i].includes('from')) {
        importIndex = i;
      }
    }
    
    if (importIndex !== -1) {
      lines.splice(importIndex + 1, 0, importStatement);
      configContent = lines.join('\n');
      console.log('✅ Added import statement');
    } else {
      // If no imports found, add at the beginning
      configContent = importStatement + '\n' + configContent;
      console.log('✅ Added import statement at the top');
    }
  }

  // Add plugin to plugins array
  const pluginConfig = `    componentTagger()`;
  
  if (configContent.includes('plugins: [')) {
    // Find the plugins array and add our plugin
    const pluginsMatch = configContent.match(/plugins:\s*\[([\s\S]*?)\]/);
    if (pluginsMatch) {
      const pluginsContent = pluginsMatch[1];
      const newPluginsContent = pluginsContent.trim() + 
        (pluginsContent.trim() ? ',\n' : '') + 
        pluginConfig;
      
      configContent = configContent.replace(
        /plugins:\s*\[([\s\S]*?)\]/,
        `plugins: [\n${newPluginsContent}\n  ]`
      );
      console.log('✅ Added componentTagger to plugins array');
    }
  } else {
    console.log('⚠️  Could not find plugins array in vite.config');
    console.log('📝 Please manually add componentTagger() to your plugins array');
    process.exit(0);
  }

  // Write the updated config
  writeFileSync(configPath, configContent);
  
  if (isPostInstall) {
    console.log('✅ Component Tagger automatically configured in your Vite config!');
    console.log('🎯 Default settings: path, line, and file (development only)');
    console.log('🚀 Run your dev server to see component tags in browser dev tools.');
  } else {
    console.log('✅ Component Tagger has been added to your Vite config!');
    console.log('🎯 Default settings: path, line, and file (development only)');
    console.log('🚀 You can now run your dev server to see component tags in action.');
  }
  console.log('📖 For custom configuration, see: https://github.com/MeepCastana/component-tagger#readme');
  
} catch (error) {
  if (isPostInstall) {
    console.log('⚠️  Could not automatically configure Component Tagger.');
    console.log('📝 Please run the setup command manually:');
    console.log('   npx component-tagger-setup');
  } else {
    console.log('⚠️  Could not automatically configure Component Tagger.');
    console.log('📝 Please manually add the following to your vite.config.ts:');
    console.log('');
    console.log('1. Add import:');
    console.log("   import { componentTagger } from 'component-tagger'");
    console.log('');
    console.log('2. Add to plugins array:');
    console.log('   componentTagger()');
    console.log('');
    console.log('📖 Full example: https://github.com/MeepCastana/component-tagger#readme');
  }
}