@eyeglass/cli 0.1.5 → 0.1.6

package/dist/index.js

@@ -267,6 +267,46 @@ function detectProject() {
     return { type: 'unknown', typescript: hasTs };
 }
 // ============================================================================
+// HTML Entry Point Detection
+// ============================================================================
+/**
+ * Parses index.html to find the entry script path.
+ * Looks for <script type="module" src="..."> tags and returns the first match.
+ * Works for vanilla Vite, React, Vue, and other projects that use index.html.
+ */
+function findEntryFromHtml(cwd) {
+    // Common locations for index.html
+    const htmlFiles = [
+        'index.html',
+        'public/index.html',
+        'src/index.html',
+    ];
+    for (const htmlFile of htmlFiles) {
+        const htmlPath = path.join(cwd, htmlFile);
+        if (!fileExists(htmlPath))
+            continue;
+        const content = readFile(htmlPath);
+        // Match <script type="module" src="..."> - handles various quote styles and spacing
+        // This regex captures the src attribute value from module scripts
+        const moduleScriptRegex = /<script[^>]*type\s*=\s*["']module["'][^>]*src\s*=\s*["']([^"']+)["'][^>]*>/gi;
+        const altModuleScriptRegex = /<script[^>]*src\s*=\s*["']([^"']+)["'][^>]*type\s*=\s*["']module["'][^>]*>/gi;
+        let match = moduleScriptRegex.exec(content) || altModuleScriptRegex.exec(content);
+        if (match && match[1]) {
+            let scriptSrc = match[1];
+            // Remove leading slash if present (Vite uses /src/main.js format)
+            if (scriptSrc.startsWith('/')) {
+                scriptSrc = scriptSrc.slice(1);
+            }
+            // Resolve the path relative to the project root
+            const scriptPath = path.join(cwd, scriptSrc);
+            if (fileExists(scriptPath)) {
+                return scriptPath;
+            }
+        }
+    }
+    return null;
+}
+// ============================================================================
 // Config Modifiers
 // ============================================================================
 function setupEyeglassSkill(dryRun) {
@@ -482,8 +522,16 @@ function setupVite(configFile, dryRun) {
             break;
         }
     }
+    // Fallback: parse index.html to find the actual entry script
+    if (!entryFile) {
+        entryFile = findEntryFromHtml(cwd);
+        if (entryFile) {
+            log(`Found entry file from index.html: ${path.relative(cwd, entryFile)}`, 'info');
+        }
+    }
     if (!entryFile) {
         log('Could not find entry file - please import @eyeglass/inspector manually in your main file', 'warn');
+        log('Tip: Check your index.html for the entry script path', 'info');
         return false;
     }
     const content = readFile(entryFile);
@@ -573,8 +621,16 @@ function setupCRA(entryFile, dryRun) {
             }
         }
     }
+    // Fallback: parse index.html to find the actual entry script
+    if (!entryFile) {
+        entryFile = findEntryFromHtml(cwd) ?? undefined;
+        if (entryFile) {
+            log(`Found entry file from index.html: ${path.relative(cwd, entryFile)}`, 'info');
+        }
+    }
     if (!entryFile || !fileExists(entryFile)) {
         log('Could not find entry file - please import @eyeglass/inspector manually', 'warn');
+        log('Tip: Check your index.html for the entry script path', 'info');
         return false;
     }
     const content = readFile(entryFile);
@@ -665,10 +721,34 @@ async function init(options) {
         case 'remix':
             setupCRA(project.entryFile, dryRun);
             break;
-        default:
-            log('Unknown project type - please configure manually:', 'warn');
-            console.log('  1. Import @eyeglass/inspector in your entry file');
-            console.log('  2. Or add <script type="module">import "@eyeglass/inspector";</script> to your HTML\n');
+        default: {
+            // Try to find entry file from index.html for unknown project types
+            const entryFromHtml = findEntryFromHtml(process.cwd());
+            if (entryFromHtml) {
+                log(`Found entry file from index.html: ${path.relative(process.cwd(), entryFromHtml)}`, 'info');
+                const content = readFile(entryFromHtml);
+                if (content.includes('@eyeglass/inspector')) {
+                    log('Inspector already imported', 'success');
+                }
+                else {
+                    const importStatement = `import '@eyeglass/inspector';\n`;
+                    const newContent = importStatement + content;
+                    if (dryRun) {
+                        log(`Would add inspector import to ${path.relative(process.cwd(), entryFromHtml)}`);
+                    }
+                    else {
+                        writeFile(entryFromHtml, newContent);
+                        log(`Added inspector import to ${path.relative(process.cwd(), entryFromHtml)}`, 'success');
+                    }
+                }
+            }
+            else {
+                log('Unknown project type - please configure manually:', 'warn');
+                console.log('  1. Import @eyeglass/inspector in your entry file');
+                console.log('  2. Or add <script type="module">import "@eyeglass/inspector";</script> to your HTML\n');
+            }
+            break;
+        }
     }
     // Done!
     console.log('\n\x1b[1mSetup complete!\x1b[0m\n');

package/dist/index.test.js

@@ -58,6 +58,34 @@ function detectPackageManager(cwd, mockFs) {
         return 'yarn';
     return 'npm';
 }
+// Helper to recreate findEntryFromHtml logic
+function findEntryFromHtml(cwd, mockFs) {
+    const htmlFiles = [
+        'index.html',
+        'public/index.html',
+        'src/index.html',
+    ];
+    for (const htmlFile of htmlFiles) {
+        const htmlPath = path.join(cwd, htmlFile);
+        if (!mockFs.existsSync(htmlPath))
+            continue;
+        const content = mockFs.readFileSync(htmlPath);
+        const moduleScriptRegex = /<script[^>]*type\s*=\s*["']module["'][^>]*src\s*=\s*["']([^"']+)["'][^>]*>/gi;
+        const altModuleScriptRegex = /<script[^>]*src\s*=\s*["']([^"']+)["'][^>]*type\s*=\s*["']module["'][^>]*>/gi;
+        let match = moduleScriptRegex.exec(content) || altModuleScriptRegex.exec(content);
+        if (match && match[1]) {
+            let scriptSrc = match[1];
+            if (scriptSrc.startsWith('/')) {
+                scriptSrc = scriptSrc.slice(1);
+            }
+            const scriptPath = path.join(cwd, scriptSrc);
+            if (mockFs.existsSync(scriptPath)) {
+                return scriptPath;
+            }
+        }
+    }
+    return null;
+}
 describe('eyeglass CLI', () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -234,6 +262,89 @@ export default defineConfig({
             expect(layoutFiles.length).toBe(8);
         });
     });
+    describe('findEntryFromHtml', () => {
+        it('should find entry script from index.html with leading slash', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('index.html') || p.endsWith('src/main.js'),
+                readFileSync: () => `<!DOCTYPE html>
+<html>
+  <body>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>`,
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toContain('src/main.js');
+        });
+        it('should find entry script from index.html without leading slash', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('index.html') || p.endsWith('src/app.js'),
+                readFileSync: () => `<!DOCTYPE html>
+<html>
+  <body>
+    <script type="module" src="src/app.js"></script>
+  </body>
+</html>`,
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toContain('src/app.js');
+        });
+        it('should find entry script with src before type attribute', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('index.html') || p.endsWith('src/counter.ts'),
+                readFileSync: () => `<!DOCTYPE html>
+<html>
+  <body>
+    <script src="/src/counter.ts" type="module"></script>
+  </body>
+</html>`,
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toContain('src/counter.ts');
+        });
+        it('should find entry script from public/index.html', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('public/index.html') || p.endsWith('src/index.js'),
+                readFileSync: () => `<!DOCTYPE html>
+<html>
+  <body>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>`,
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toContain('src/index.js');
+        });
+        it('should return null when index.html does not exist', () => {
+            const mockFs = {
+                existsSync: () => false,
+                readFileSync: () => '',
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toBeNull();
+        });
+        it('should return null when script file does not exist', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('index.html'),
+                readFileSync: () => `<script type="module" src="/src/main.js"></script>`,
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toBeNull();
+        });
+        it('should return null when no module script is found', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('index.html'),
+                readFileSync: () => `<!DOCTYPE html>
+<html>
+  <body>
+    <script src="/src/main.js"></script>
+  </body>
+</html>`,
+            };
+            const result = findEntryFromHtml('/my/project', mockFs);
+            expect(result).toBeNull();
+        });
+    });
     describe('use client directive handling', () => {
         it('should preserve use client directive at top', () => {
             const fileContent = `'use client';

package/package.json

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