Create initial linting plugin for oxlint/eslint

Author: JoviDeCroock

.changeset/khaki-bears-divide.md

@@ -0,0 +1,5 @@
+---
+"@preact/eslint-plugin-signals": minor
+---
+
+Initial release

docs/.oxlintrc.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": null,
+  "jsPlugins": ["eslint-plugin-signals"],
+  "categories": {},
+  "rules": {
+    "eslint-plugin-signals/no-signal-write-in-computed": "error",
+    "eslint-plugin-signals/no-value-after-await": "error",
+    "eslint-plugin-signals/no-signal-truthiness": "error",
+    "eslint-plugin-signals/no-signal-in-component-body": "error",
+    "eslint-plugin-signals/no-conditional-value-read": "warn",
+    "eslint/no-unused-vars": "off",
+    "eslint/no-useless-escape": "off",
+    "eslint-plugin-unicorn/no-empty-file": "off"
+  },
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "next": {
+      "rootDir": []
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null,
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

docs/demos/bench.tsx

@@ -232,8 +232,9 @@ function createRunner() {
 			results[i].value = result;
 			await sleep(100);
 		}
+
 		running.value = false;
-		console.log(`Finished in ${total.value.toFixed(2)}ms`);
+		console.log(`Finished in ${total.peek().toFixed(2)}ms`);
 	}
 	return { run, running, results, total };
 }

docs/demos/linting/index.tsx

@@ -0,0 +1,71 @@
+import {
+	useModel,
+	useSignal,
+	useComputed,
+	useSignalEffect,
+} from "@preact/signals";
+import { signal, computed, effect, untracked } from "@preact/signals-core";
+import { Model } from "./model";
+
+export const Linting = () => {
+	const sig = useSignal(0);
+	const model = useModel(Model);
+
+	signal(0);
+	effect(() => {});
+	computed(() => {});
+
+	// @ts-ignore - we are not using bar, just want to test the linting
+	const bar = useComputed(() => {
+		// Both should complain about these
+		model.count.value = 5;
+		sig.value = 6;
+		return "foo";
+	});
+
+	useSignalEffect(() => {
+		const perform = async () => {
+			await new Promise(resolve => setTimeout(resolve, 100));
+			// Both should complain about these
+			// @ts-ignore - we are not using count, just want to test the linting
+			const count = model.count.value;
+			// @ts-ignore - we are not using sigValue, just want to test the linting
+			const sigValue = sig.value;
+
+			// Should not complain about this
+			sig.value++;
+			// Should not complain about this
+			sig.value = 10;
+		};
+
+		perform();
+	});
+
+	// Issue #621: .value after a non-reactive guard (.peek / plain variable)
+	// should warn because the signal won't be tracked as a dependency.
+	useSignalEffect(() => {
+		const id = model.count.peek();
+		if (!id) return;
+		// Both should complain about this — .value after non-reactive guard
+		console.log(sig.value);
+	});
+
+	// .value after a .value guard is OK — the guard signal IS tracked
+	useSignalEffect(() => {
+		if (!model.count.value) return;
+		// Should NOT complain — model.count is tracked by the guard above
+		console.log(sig.value);
+	});
+
+	// untracked() guard — .value inside untracked is non-reactive, like .peek()
+	useSignalEffect(() => {
+		if (!untracked(() => model.count.value)) return;
+		// Should complain — untracked guard is non-reactive
+		console.log(sig.value);
+	});
+
+	// ESLint should complain about this, oxlint not
+	if (model.count) return <p>Lint error</p>;
+	// Both should complain about this
+	if (sig) return <p>Lint error</p>;
+};

docs/demos/linting/model.ts

@@ -0,0 +1,7 @@
+import { createModel, signal } from "@preact/signals-core";
+
+export const Model = createModel(() => {
+	const count = signal(0);
+
+	return { count };
+});

docs/demos/render-flasher.tsx

@@ -68,7 +68,6 @@ options.diffed = (vnode: VNode) => {
 	);
 };
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 function getName(type: string | (Function & { displayName?: string })) {
 	if (typeof type === "string") return type;
 	return (type && (type.name || type.displayName)) || String(type);

docs/eslint.config.mjs

@@ -0,0 +1,25 @@
+import tsParser from "@typescript-eslint/parser";
+import signals from "eslint-plugin-signals";
+
+export default [
+	{
+		files: ["**/*.{ts,tsx}"],
+		languageOptions: {
+			ecmaVersion: 2022,
+			sourceType: "module",
+			parser: tsParser,
+			parserOptions: {
+				ecmaFeatures: { jsx: true },
+				project: true,
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+		plugins: { signals },
+		rules: {
+			"signals/no-signal-write-in-computed": "error",
+			"signals/no-value-after-await": "error",
+			"signals/no-signal-truthiness": "error",
+			"signals/no-conditional-value-read": "warn",
+		},
+	},
+];

docs/package.json

@@ -4,7 +4,9 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "oxlint": "oxlint",
+    "eslint": "eslint"
   },
   "postcss": {
     "plugins": {
@@ -26,9 +28,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",
+    "@typescript-eslint/parser": "^8.0.0",
     "@preact/preset-vite": "^2.3.0",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "eslint": "^9.0.0",
+    "eslint-plugin-signals": "workspace:../packages/eslint-plugin-signals",
+    "oxlint": "^1.47.0",
     "postcss": "^8.4.31",
     "postcss-nesting": "^10.1.10",
     "tiny-glob": "^0.2.9",