@eyeglass/cli 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,41 @@
+# @eyeglass/cli
+
+CLI for initializing [Eyeglass](https://github.com/donutboyband/eyeglass) in your project.
+
+## Usage
+
+```bash
+npx @eyeglass/cli init
+```
+
+This single command will:
+
+1. **Install** `@eyeglass/inspector` as a dev dependency
+2. **Create** `.claude/settings.json` with MCP server configuration
+3. **Configure** your bundler (Vite, Next.js, CRA, or Remix)
+
+## Options
+
+```bash
+npx @eyeglass/cli init --dry-run      # Preview changes without making them
+npx @eyeglass/cli init --skip-install # Skip installing @eyeglass/inspector
+npx @eyeglass/cli help                # Show help
+```
+
+## Supported Frameworks
+
+| Framework | Auto-Detection | Component Names | File Paths |
+|-----------|:--------------:|:---------------:|:----------:|
+| Vite      | ✓              | ✓               | ✓          |
+| Next.js   | ✓              | ✓               | ✓          |
+| CRA       | ✓              | ✓               | ✓          |
+| Remix     | ✓              | ✓               | ✓          |
+
+## After Setup
+
+1. Start your dev server (`npm run dev`)
+2. Run `claude` in your project directory
+3. Tell Claude: `watch eyeglass` or `eg`
+4. Select elements in your browser and submit requests!
+
+See the [main repo](https://github.com/donutboyband/eyeglass) for full documentation.

package/dist/index.js

@@ -5,20 +5,6 @@ import { execFileSync } from 'child_process';
 // ============================================================================
 // Templates
 // ============================================================================
-const VITE_PLUGIN = `// Eyeglass Vite Plugin - Auto-generated by eyeglass init
-export function eyeglassPlugin() {
-  return {
-    name: 'eyeglass',
-    transformIndexHtml(html) {
-      if (process.env.NODE_ENV === 'production') return html;
-      return html.replace(
-        '</body>',
-        '<script type="module">import "@eyeglass/inspector";</script></body>'
-      );
-    },
-  };
-}
-`;
 const NEXT_CONFIG_ADDITION = `
 // Eyeglass configuration - Auto-generated by eyeglass init
 const withEyeglass = (nextConfig) => {
@@ -199,55 +185,44 @@ function setupClaudeConfig(dryRun) {
 }
 function setupVite(configFile, dryRun) {
     const cwd = process.cwd();
-    const isTs = configFile.endsWith('.ts');
-    const pluginFile = path.join(cwd, isTs ? 'eyeglass.plugin.ts' : 'eyeglass.plugin.js');
-    // Create plugin file
-    if (!fileExists(pluginFile)) {
-        if (dryRun) {
-            log(`Would create ${path.basename(pluginFile)}`);
-        }
-        else {
-            writeFile(pluginFile, VITE_PLUGIN);
-            log(`Created ${path.basename(pluginFile)}`, 'success');
+    // Find entry file (main.tsx, main.ts, main.jsx, main.js, src/main.*, etc.)
+    const entryFiles = [
+        'src/main.tsx',
+        'src/main.ts',
+        'src/main.jsx',
+        'src/main.js',
+        'main.tsx',
+        'main.ts',
+        'main.jsx',
+        'main.js',
+    ];
+    let entryFile = null;
+    for (const entry of entryFiles) {
+        const fullPath = path.join(cwd, entry);
+        if (fileExists(fullPath)) {
+            entryFile = fullPath;
+            break;
         }
     }
-    // Modify vite.config
-    const config = readFile(configFile);
-    // Check if already configured
-    if (config.includes('eyeglassPlugin')) {
-        log('Vite config already has eyeglass plugin', 'success');
-        return true;
-    }
-    // Add import
-    const importStatement = `import { eyeglassPlugin } from './eyeglass.plugin';\n`;
-    let newConfig = config;
-    // Find a good place to add the import (after other imports or at the top)
-    const lastImportMatch = config.match(/^import .+$/gm);
-    if (lastImportMatch) {
-        const lastImport = lastImportMatch[lastImportMatch.length - 1];
-        const lastImportIndex = config.lastIndexOf(lastImport) + lastImport.length;
-        newConfig = config.slice(0, lastImportIndex) + '\n' + importStatement + config.slice(lastImportIndex);
-    }
-    else {
-        newConfig = importStatement + config;
-    }
-    // Add to plugins array
-    // This handles: plugins: [...] or plugins: [react(), ...]
-    const pluginsMatch = newConfig.match(/plugins\s*:\s*\[/);
-    if (pluginsMatch) {
-        const insertPos = newConfig.indexOf(pluginsMatch[0]) + pluginsMatch[0].length;
-        newConfig = newConfig.slice(0, insertPos) + 'eyeglassPlugin(), ' + newConfig.slice(insertPos);
-    }
-    else {
-        log('Could not find plugins array in vite config - please add eyeglassPlugin() manually', 'warn');
+    if (!entryFile) {
+        log('Could not find entry file - please import @eyeglass/inspector manually in your main file', 'warn');
         return false;
     }
+    const content = readFile(entryFile);
+    // Check if already imported
+    if (content.includes('@eyeglass/inspector')) {
+        log('Inspector already imported', 'success');
+        return true;
+    }
+    // Add import at the top
+    const importStatement = `import '@eyeglass/inspector';\n`;
+    const newContent = importStatement + content;
     if (dryRun) {
-        log(`Would modify ${path.basename(configFile)} to add eyeglassPlugin()`);
+        log(`Would add inspector import to ${path.relative(cwd, entryFile)}`);
     }
     else {
-        writeFile(configFile, newConfig);
-        log(`Updated ${path.basename(configFile)} with eyeglass plugin`, 'success');
+        writeFile(entryFile, newContent);
+        log(`Added inspector import to ${path.relative(cwd, entryFile)}`, 'success');
     }
     return true;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eyeglass/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Visual debugging for AI coding agents - CLI",
   "type": "module",
   "bin": {