Added ESLint for linting service as a Toolcall for linting the output

apps/studio/electron/main/create/index.ts

@@ -16,6 +16,7 @@ import { mainWindow } from '..';
 import Chat from '../chat';
 import { getCreateProjectPath } from './helpers';
 import { createProject } from './install';
+import { LintingService } from '@onlook/foundation/src/linting';
 
 export class ProjectCreator {
     private static instance: ProjectCreator;
@@ -65,7 +66,20 @@ export class ProjectCreator {
                 throw new Error('AbortError');
             }
 
+            // Apply the generated page with linting
             await this.applyGeneratedPage(projectPath, generatedPage);
+
+            // Run a full project lint
+            const lintingService = LintingService.getInstance();
+            const lintSummary = await lintingService.lintProject(projectPath);
+
+            this.emitPromptProgress(
+                `Project linting completed: ${lintSummary.totalErrors} errors, ${
+                    lintSummary.totalWarnings
+                } warnings, ${lintSummary.fixedFiles} files auto-fixed`,
+                95,
+            );
+
             return { projectPath, content: generatedPage.content };
         });
     }
@@ -202,10 +216,30 @@ ${PAGE_SYSTEM_PROMPT.defaultContent}`;
         projectPath: string,
         generatedPage: { path: string; content: string },
     ): Promise<void> {
-        const pagePath = path.join(projectPath, generatedPage.path);
-        // Create recursive directories if they don't exist
-        await fs.promises.mkdir(path.dirname(pagePath), { recursive: true });
-        await fs.promises.writeFile(pagePath, generatedPage.content);
+        const fullPath = path.join(projectPath, generatedPage.path);
+        await fs.promises.mkdir(path.dirname(fullPath), { recursive: true });
+
+        // Lint and fix the generated content
+        const lintingService = LintingService.getInstance();
+        const lintResult = await lintingService.lintAndFix(fullPath, generatedPage.content);
+
+        // Write the linted content
+        await fs.promises.writeFile(fullPath, lintResult.output || generatedPage.content);
+
+        // Report linting results
+        if (lintResult.messages.length > 0) {
+            const errors = lintResult.messages.filter((m) => m.severity === 2);
+            const warnings = lintResult.messages.filter((m) => m.severity === 1);
+
+            this.emitPromptProgress(
+                `Linting completed: ${errors.length} errors, ${warnings.length} warnings${
+                    lintResult.fixed ? ' (auto-fixed)' : ''
+                }`,
+                90,
+            );
+        } else {
+            this.emitPromptProgress('Linting completed: No issues found', 90);
+        }
     }
 
     private getStreamErrorMessage(

packages/foundation/package.json

@@ -44,6 +44,11 @@
         "@babel/generator": "^7.14.5",
         "@babel/parser": "^7.14.3",
         "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.24.7"
+        "@babel/types": "^7.24.7",
+        "eslint": "^8.56.0",
+        "@typescript-eslint/parser": "^6.19.0",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0"
     }
 }

packages/foundation/src/linting/index.ts

@@ -0,0 +1,167 @@
+import { ESLint } from 'eslint';
+import type { Linter } from 'eslint';
+import path from 'path';
+import fs from 'fs/promises';
+
+type ESLintMessage = {
+    ruleId: string | null;
+    severity: number;
+    message: string;
+    line: number;
+    column: number;
+    nodeType?: string;
+    messageId?: string;
+    endLine?: number;
+    endColumn?: number;
+    fix?: {
+        range: [number, number];
+        text: string;
+    };
+};
+
+type ESLintResult = {
+    filePath: string;
+    messages: ESLintMessage[];
+    fixed: boolean;
+    output?: string;
+};
+
+export interface LintResult {
+    filePath: string;
+    messages: ESLintMessage[];
+    fixed: boolean;
+    output?: string;
+}
+
+export interface LintSummary {
+    totalFiles: number;
+    totalErrors: number;
+    totalWarnings: number;
+    fixedFiles: number;
+    results: LintResult[];
+}
+
+export class LintingService {
+    private static instance: LintingService;
+    private eslint: ESLint;
+
+    private constructor() {
+        this.eslint = new ESLint({
+            fix: true,
+            baseConfig: {
+                extends: [
+                    'eslint:recommended',
+                    'plugin:@typescript-eslint/recommended',
+                    'plugin:react/recommended',
+                    'plugin:react-hooks/recommended',
+                ],
+                parser: '@typescript-eslint/parser',
+                parserOptions: {
+                    ecmaFeatures: {
+                        jsx: true,
+                    },
+                    ecmaVersion: 12,
+                    sourceType: 'module',
+                },
+                plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+                rules: {
+                    'react/react-in-jsx-scope': 'off',
+                    'react/prop-types': 'off',
+                    '@typescript-eslint/no-unused-vars': ['warn'],
+                    '@typescript-eslint/no-explicit-any': 'off',
+                    'no-console': 'warn',
+                },
+                settings: {
+                    react: {
+                        version: 'detect',
+                    },
+                },
+            } as unknown as Linter.Config,
+        });
+    }
+
+    public static getInstance(): LintingService {
+        if (!LintingService.instance) {
+            LintingService.instance = new LintingService();
+        }
+        return LintingService.instance;
+    }
+
+    public async lintAndFix(filePath: string, content: string): Promise<LintResult> {
+        const tempPath = path.join(
+            path.dirname(filePath),
+            `.temp.${Date.now()}.${path.basename(filePath)}`,
+        );
+        try {
+            await fs.writeFile(tempPath, content);
+
+            const results = await this.eslint.lintFiles([tempPath]);
+            if (!results.length) {
+                throw new Error('No lint result returned');
+            }
+
+            const result = results[0] as unknown as ESLintResult;
+
+            let fixedContent = content;
+            if (result.output) {
+                fixedContent = result.output;
+                await fs.writeFile(tempPath, fixedContent);
+            }
+
+            return {
+                filePath,
+                messages: result.messages,
+                fixed: result.fixed,
+                output: fixedContent,
+            };
+        } catch (error) {
+            console.error('Linting error:', error);
+            return {
+                filePath,
+                messages: [],
+                fixed: false,
+                output: content,
+            };
+        } finally {
+            await fs.unlink(tempPath).catch(() => {});
+        }
+    }
+
+    public async lintProject(projectPath: string): Promise<LintSummary> {
+        const results: LintResult[] = [];
+        let totalErrors = 0;
+        let totalWarnings = 0;
+        let fixedFiles = 0;
+
+        const files = await this.eslint.lintFiles([
+            `${projectPath}/**/*.{ts,tsx,js,jsx}`,
+            `!${projectPath}/node_modules/**`,
+        ]);
+        const typedFiles = files as unknown as ESLintResult[];
+
+        for (const result of typedFiles) {
+            const messages = result.messages;
+            const hasErrors = messages.some((m) => m.severity === 2);
+            const hasWarnings = messages.some((m) => m.severity === 1);
+
+            if (hasErrors) totalErrors += messages.filter((m) => m.severity === 2).length;
+            if (hasWarnings) totalWarnings += messages.filter((m) => m.severity === 1).length;
+            if (result.fixed) fixedFiles++;
+
+            results.push({
+                filePath: result.filePath,
+                messages,
+                fixed: result.fixed,
+                output: result.output,
+            });
+        }
+
+        return {
+            totalFiles: files.length,
+            totalErrors,
+            totalWarnings,
+            fixedFiles,
+            results,
+        };
+    }
+}