vite-plugin-lint-overlay 0.1.0

package/README.md

@@ -0,0 +1,55 @@
+# vite-plugin-lint-overlay
+
+A Vite dev-server overlay that shows **TypeScript** + **ESLint** problems in a single UI. 😊
+
+- ✅ TypeScript diagnostics (optional, watch mode)
+- ✅ ESLint diagnostics (incremental, cached)
+- ✅ Runs on **dev start**, **file events**, and **browser reload**
+
+---
+
+## Install
+
+```bash
+npm install -D vite-plugin-lint-overlay
+```
+
+**Peer dependencies:** `vite`, `eslint`, `typescript`.
+
+---
+
+## Usage
+
+`vite.config.js` / `vite.config.ts`
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import lintOverlay from 'vite-plugin-lint-overlay';
+
+export default defineConfig({
+	plugins: [
+		react(),
+		lintOverlay({
+			rootDir: 'src',
+			ts: true // Enable TypeScript checks
+		})
+	]
+});
+```
+
+---
+
+## Options
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| **rootDir** | `string` | `'src'` | Root directory to watch and lint for ESLint issues. |
+| **ts** | `boolean` | `false` | Set to `true` to enable the TypeScript compiler check. |
+| **tsconfigPath** | `string` | `''` | Path to `tsconfig`. Defaults to `tsconfig.app.json` or `tsconfig.json`. |
+
+---
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "vite-plugin-lint-overlay",
+	"version": "0.1.0",
+	"description": "Smart dev-server overlay for ESLint and TypeScript errors.",
+	"license": "MIT",
+	"author": "Max Matinpalo",
+	"homepage": "https://github.com/max-matinpalo/vite-lint-overlay#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/max-matinpalo/vite-lint-overlay.git"
+	},
+	"bugs": {
+		"url": "https://github.com/max-matinpalo/vite-lint-overlay/issues"
+	},
+	"type": "module",
+	"main": "./src/lint-overlay.js",
+	"module": "./src/lint-overlay.js",
+	"exports": {
+		".": "./src/lint-overlay.js"
+	},
+	"files": [
+		"src",
+		"README.md"
+	],
+	"peerDependencies": {
+		"eslint": "^8.0.0 || ^9.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
+	}
+}

package/src/client-overlay.js

@@ -0,0 +1,137 @@
+const STYLES = `
+	:host {
+		position: fixed; top: 0; left: 0; z-index: 99999;
+		width: 100%; height: 100%;
+		pointer-events: none; display: none;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
+	}
+	:host([visible]) {
+		display: flex; pointer-events: auto;
+		background: #00000099; backdrop-filter: blur(4px);
+		justify-content: center; align-items: center; padding: 20px;
+	}
+	.container {
+		background: #1e1e1e; color: #d4d4d4;
+		width: 100%; max-width: 900px; max-height: 800px;
+		border-radius: 8px; border: 1px solid #333333;
+		display: flex; flex-direction: column;
+		box-shadow: 0 20px 50px #00000080; overflow: hidden;
+	}
+	.header {
+		background: #252526; padding: 12px 16px;
+		border-bottom: 1px solid #333333;
+		display: flex; justify-content: space-between; align-items: center;
+		flex-shrink: 0;
+	}
+	.title { font-weight: bold; font-size: 14px; color: #ffffff; }
+	.close {
+		cursor: pointer; background: transparent; border: none; color: #999999;
+		font-size: 20px; line-height: 1; padding: 0;
+	}
+	.close:hover { color: #ffffff; }
+	.body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
+	h2 {
+		margin: 0; padding: 10px 16px; font-size: 13px; font-weight: bold;
+		background: #252526; border-bottom: 1px solid #333333;
+		position: sticky; top: 0; z-index: 10;
+		text-transform: uppercase; letter-spacing: 0.5px;
+	}
+	h2.red { color: #f44336; }
+	h2.orange { color: #ff9800; border-top: 1px solid #333333; }
+	.list { list-style: none; margin: 0; padding: 0; }
+	.item {
+		padding: 12px 16px; border-bottom: 1px solid #2d2d2d;
+		border-left: 3px solid transparent;
+		display: flex; flex-direction: column; gap: 6px;
+	}
+	.item.error { border-left-color: #f44336; background: #f443360d; }
+	.item.warning { border-left-color: #ff9800; background: #ff98000d; }
+	.meta {
+		font-size: 12px; font-weight: bold; color: #888888; display: flex; align-items: center; 
+		gap: 8px; font-family: Menlo, monospace;
+	}
+	.file { color: #aaaaaa; word-break: break-all; }
+	.badge {
+		padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
+		text-transform: uppercase; letter-spacing: 0.5px; color: #ffffff; background: #444444; 
+	}
+	.badge.ts { background: #3178c6; color: #ffffff; }
+	.badge.eslint { background: #f7b93e; color: #000000; }
+	.msg {
+		white-space: pre-wrap; word-break: break-word; font-size: 13px; 
+		line-height: 1.5; color: #cccccc; font-family: Menlo, monospace;
+	}
+`;
+
+
+class SmartErrorOverlay extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this.root = this.shadowRoot;
+	}
+
+	connectedCallback() {
+		this.root.innerHTML = `<style>${STYLES}</style><div id="mount"></div>`;
+	}
+
+	setErrors(errors) {
+		if (!this.root.getElementById('mount')) this.connectedCallback();
+		if (!errors || !errors.length) return this.removeAttribute('visible');
+		this.setAttribute('visible', '');
+		const errs = errors.filter(e => e.severity === 'error');
+		const warns = errors.filter(e => e.severity === 'warning');
+		const renderList = (list) => list.map(e => {
+			const type = (e.source || 'unk').toLowerCase();
+			const cleanFile = (e.file || 'Global').split(/\/|\\/).slice(-3).join('/');
+			const hasPath = /[\\/]/.test(e.file || '');
+			const fileDisplay = hasPath && cleanFile !== e.file
+				? `.../${cleanFile}` : (e.file || 'Global');
+			return `
+				<li class="item ${e.severity || 'error'}">
+					<div class="meta">
+						<span class="badge ${type}">${e.source || 'UNK'}</span>
+						<span class="file" title="${this.escape(e.file)}">
+							${this.escape(fileDisplay)}${e.line ? ':' + e.line : ''}
+						</span>
+					</div>
+					<div class="msg">${this.escape(e.message)}</div>
+				</li>`;
+		}).join('');
+		this.root.getElementById('mount').innerHTML = `
+			<div class="container">
+				<div class="header"><span class="title">Dev Server Issues</span>
+					<button id="close" class="close">×</button></div>
+				<div class="body">
+					${errs.length ? `<h2 class="red">Errors (${errs.length})</h2>
+						<ul class="list">${renderList(errs)}</ul>` : ''}
+					${warns.length ? `<h2 class="orange">Warnings (${warns.length})</h2>
+						<ul class="list">${renderList(warns)}</ul>` : ''}
+				</div>
+			</div>`;
+		this.root.getElementById('close').onclick = () => this.removeAttribute('visible');
+	}
+
+	escape(str) {
+		return String(str || '').replace(/[&<>"']/g, (m) => ({
+			'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
+		})[m]);
+	}
+}
+
+
+if (!customElements.get('smart-error-overlay')) {
+	customElements.define('smart-error-overlay', SmartErrorOverlay);
+}
+
+
+if (import.meta.hot) {
+	let overlay = document.querySelector('smart-error-overlay');
+	if (!overlay) {
+		overlay = document.createElement('smart-error-overlay');
+		document.body.appendChild(overlay);
+	}
+	import.meta.hot.on('smart-overlay:update', (data) => {
+		if (overlay) overlay.setErrors(data?.errors || []);
+	});
+}

package/src/lint-overlay.js

@@ -0,0 +1,116 @@
+import { Worker } from 'node:worker_threads';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+
+export default function lintOverlay(props = {}) {
+	const { rootDir: rawRoot = 'src' } = props;
+	const { tsconfigPath = '' } = props;
+	const { ts = false } = props;
+	const rootDir = String(rawRoot).trim().replace(/\/+$/, '') || 'src';
+	const virtualId = 'virtual:lint-overlay-client.js';
+	const resolvedVirtualId = '\0' + virtualId;
+	const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+	let tsErrors = [];
+	let lintErrors = [];
+	let serverWs = null;
+
+	const updateOverlay = () => {
+		if (!serverWs) return;
+		serverWs.send({
+			type: 'custom',
+			event: 'smart-overlay:update',
+			data: { errors: [...tsErrors, ...lintErrors] }
+		});
+	};
+
+	return {
+		name: 'vite-plugin-lint-overlay',
+		apply: 'serve',
+
+		resolveId(id) {
+			if (id === virtualId || id === '/' + virtualId) return resolvedVirtualId;
+		},
+
+		load(id) {
+			if (id === resolvedVirtualId) {
+				return fs.readFileSync(path.join(__dirname, 'client-overlay.js'), 'utf-8');
+			}
+		},
+
+		configureServer(server) {
+			serverWs = server.ws;
+			const lintWorker = new Worker(
+				new URL('./lint-worker.js', import.meta.url),
+				{ type: 'module', workerData: { rootDir } }
+			);
+			const handleCrash = (source, msg) => {
+				const err = { file: 'Global', message: msg, source, severity: 'error' };
+				if (source === 'TS') tsErrors = [err];
+				if (source === 'ESLint') lintErrors = [err];
+				updateOverlay();
+			};
+
+			if (ts) {
+				const tsWorker = new Worker(
+					new URL('./ts-worker.js', import.meta.url),
+					{ type: 'module', workerData: { tsconfigPath } }
+				);
+				tsWorker.on('error', (e) => handleCrash('TS', `TS Worker error: ${e.message}`));
+				tsWorker.on('exit', (c) => c !== 0 && handleCrash('TS', `TS Worker died (code ${c})`));
+				tsWorker.on('message', (msg) => {
+					if (msg.type !== 'SNAPSHOT') return;
+					tsErrors = msg.errors;
+					updateOverlay();
+				});
+				server.httpServer?.on('close', () => tsWorker.terminate());
+			}
+
+			lintWorker.on('error', (e) => handleCrash('ESLint', `Lint Worker error: ${e.message}`));
+			lintWorker.on('exit', (c) => c !== 0 && handleCrash('ESLint', `Lint Worker died (code ${c})`));
+			lintWorker.on('message', (msg) => {
+				if (msg.type !== 'SNAPSHOT') return;
+				lintErrors = msg.errors;
+				updateOverlay();
+			});
+
+			server.httpServer?.on('close', () => lintWorker.terminate());
+			const isTarget = (f) => /\.(js|jsx|ts|tsx)$/.test(f);
+			const isInRoot = (f) => {
+				const rel = path
+					.relative(server.config.root || process.cwd(), f)
+					.replace(/\\/g, '/');
+				return rel === rootDir || rel.startsWith(rootDir + '/');
+			};
+
+			const lintFile = (f) => {
+				if (!isTarget(f)) return;
+				if (!isInRoot(f)) return;
+				lintWorker.postMessage({ type: 'LINT', files: [f] });
+			};
+
+			lintWorker.postMessage({ type: 'LINT_ALL' });
+			server.ws.on('connection', () => {
+				updateOverlay();
+				lintWorker.postMessage({ type: 'LINT_ALL' });
+			});
+			server.watcher.on('add', lintFile);
+			server.watcher.on('change', lintFile);
+			server.watcher.on('unlink', (f) => {
+				if (!isTarget(f)) return;
+				if (!isInRoot(f)) return;
+				lintWorker.postMessage({ type: 'UNLINK', f });
+			});
+		},
+
+		transformIndexHtml() {
+			return [{
+				tag: 'script',
+				attrs: { type: 'module', src: `/${virtualId}` },
+				injectTo: 'body-prepend'
+			}];
+		}
+	};
+}

package/src/lint-worker.js

@@ -0,0 +1,108 @@
+import { parentPort, workerData } from 'node:worker_threads';
+import { ESLint } from 'eslint';
+import path from 'node:path';
+
+if (!parentPort) throw new Error('No parentPort');
+
+let rootDir = workerData?.rootDir || 'src';
+rootDir = String(rootDir).trim().replace(/\/+$/, '');
+if (!rootDir) rootDir = 'src';
+
+const ALL = [`${rootDir}/**/*.{js,jsx,ts,tsx}`];
+const cache = new Map();
+const CWD = process.cwd();
+const rel = (p) => path.relative(CWD, p).replace(/\\/g, '/');
+
+let eslint = null;
+let running = false;
+let pending = null;
+
+const snap = (errors) => parentPort.postMessage({ type: 'SNAPSHOT', errors });
+
+function errText(e) {
+	if (!e) return 'Unknown error';
+	if (typeof e === 'string') return e;
+	const msg = e.message ? String(e.message) : String(e);
+	const stack = e.stack
+		? String(e.stack).split('\n').slice(0, 2).join('\n')
+		: '';
+	return stack ? `${msg}\n${stack}` : msg;
+}
+
+function globalError(message) {
+	return [{
+		file: 'Global',
+		line: 0,
+		source: 'ESLint',
+		severity: 'error',
+		message
+	}];
+}
+
+function unlinkFile(f) {
+	if (!f) return;
+	cache.delete(rel(f));
+	snap([...cache.values()].flat());
+}
+
+async function run() {
+	while (pending) {
+		const job = pending;
+		pending = null;
+
+		if (!eslint) {
+			try {
+				eslint = new ESLint();
+			} catch (e) {
+				snap(globalError(`Init failed: ${errText(e)}`));
+				continue;
+			}
+		}
+
+		try {
+			if (job.reset) cache.clear();
+
+			const res = await eslint.lintFiles(job.files);
+
+			res.forEach((r) => {
+				const msgs = r.messages.filter((m) => m.severity > 0);
+				const key = rel(r.filePath);
+				if (!msgs.length) return cache.delete(key);
+
+				cache.set(key, msgs.map((m) => ({
+					file: key,
+					line: m.line || 0,
+					message: m.message,
+					source: 'ESLint',
+					severity: m.severity === 2 ? 'error' : 'warning'
+				})));
+			});
+
+			snap([...cache.values()].flat());
+		} catch (e) {
+			snap(globalError(`Lint crashed: ${errText(e)}`));
+		}
+	}
+
+	running = false;
+}
+
+parentPort.on('message', (msg) => {
+	if (msg?.type === 'UNLINK') {
+		unlinkFile(msg.f);
+		return;
+	}
+
+	const global = msg?.type === 'LINT_ALL';
+	if (pending?.reset && !global) return;
+
+	pending = {
+		files: global ? ALL : (Array.isArray(msg.files) ? msg.files : []),
+		reset: global
+	};
+
+	if (!running) {
+		running = true;
+		run();
+	}
+});

package/src/ts-worker.js

@@ -0,0 +1,100 @@
+import { parentPort, workerData } from 'node:worker_threads';
+import ts from 'typescript';
+import fs from 'node:fs';
+import path from 'node:path';
+
+if (!parentPort) throw new Error('No parentPort');
+
+const ROOT = process.cwd();
+
+let tsconfigPath = workerData?.tsconfigPath || '';
+tsconfigPath = String(tsconfigPath).trim();
+
+function postGlobalError(message) {
+	parentPort.postMessage({
+		type: 'SNAPSHOT',
+		errors: [{
+			file: 'Global',
+			line: 0,
+			source: 'TS',
+			severity: 'error',
+			message
+		}]
+	});
+}
+
+function resolveConfigPath() {
+	if (tsconfigPath) {
+		const abs = path.isAbsolute(tsconfigPath)
+			? tsconfigPath
+			: path.join(ROOT, tsconfigPath);
+
+		if (fs.existsSync(abs)) return abs;
+
+		const found = ts.findConfigFile(ROOT, ts.sys.fileExists, tsconfigPath);
+		if (found) return found;
+
+		return '';
+	}
+
+	const fallback = fs.existsSync(path.join(ROOT, 'tsconfig.app.json'))
+		? 'tsconfig.app.json'
+		: 'tsconfig.json';
+
+	return ts.findConfigFile(ROOT, ts.sys.fileExists, fallback) || '';
+}
+
+const configPath = resolveConfigPath();
+
+if (!configPath) {
+	postGlobalError(
+		tsconfigPath
+			? `tsconfig not found: ${tsconfigPath}`
+			: 'tsconfig not found: tsconfig.app.json or tsconfig.json'
+	);
+	parentPort.close();
+	process.exit(0);
+}
+
+const host = ts.createWatchCompilerHost(
+	configPath,
+	{ noEmit: true },
+	ts.sys,
+	ts.createSemanticDiagnosticsBuilderProgram,
+	() => { },
+	() => { }
+);
+
+host.afterProgramCreate = (builder) => {
+	const prog = builder.getProgram();
+
+	const errors = ts.getPreEmitDiagnostics(prog)
+		.filter((d) =>
+			d.category === ts.DiagnosticCategory.Error ||
+			d.category === ts.DiagnosticCategory.Warning
+		)
+		.map((d) => {
+			const message = ts.flattenDiagnosticMessageText(d.messageText, '\n');
+			const severity = d.category === ts.DiagnosticCategory.Error
+				? 'error'
+				: 'warning';
+
+			if (!d.file) {
+				return { file: 'Global', line: 0, message, source: 'TS', severity };
+			}
+
+			const { line } = d.file.getLineAndCharacterOfPosition(d.start ?? 0);
+
+			return {
+				file: path.relative(ROOT, d.file.fileName).replace(/\\/g, '/'),
+				line: line + 1,
+				message,
+				source: 'TS',
+				severity
+			};
+		});
+
+	parentPort.postMessage({ type: 'SNAPSHOT', errors });
+};
+
+ts.createWatchProgram(host);