working v1

Author: Austin1serb

packages/eslint-plugin-react-zero-ui/__tests__/fixtures/next/app/LintFailures.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { useScopedUI } from '@react-zero-ui/core';
+
+/**
+ * This component is intentionally WRONG.
+ * – Missing data-attr on <section>
+ * – Missing ref attachment on <aside>
+ *
+ * The Zero-UI ESLint rule should flag both.
+ */
+export default function LintFailures() {
+	// #1  Setter attached but no data-scope attr  →  missingAttr error
+	const [scope, setScope] = useScopedUI<'off' | 'on'>('scope', 'off');
+
+	// #2  No ref at all  →  missingRef error
+	const [, setDialog] = useScopedUI<'open' | 'closed'>('dialog', 'closed');
+
+	return (
+		<main className="space-y-6 p-6">
+			{/* ❌ lint error expected here */}
+			<section
+				ref={setScope.ref}
+				className="scope-off:bg-red-100 scope-on:bg-red-600 scope-on:text-white p-4 rounded">
+				<button
+					className="border px-3 py-1"
+					onClick={() => setScope((prev) => (prev === 'on' ? 'off' : 'on'))}>
+					Toggle scope
+				</button>
+			</section>
+
+			{/* ❌ second lint error (missing .ref) */}
+			<aside className="dialog-open:block dialog-closed:hidden">
+				This dialog was never linked via <code>ref</code>
+			</aside>
+		</main>
+	);
+}
+
+/* ------------------------------------------------------------------ *
+ |  Correct version (for reference)                                   |
+ * ------------------------------------------------------------------ *
+  const [scope, setScope] = useScopedUI<'off' | 'on'>('scope', 'off');
+  <section
+    data-scope={scope}
+    ref={setScope.ref}
+  >
+    …
+  </section>
+
+  const [, setDialog] = useScopedUI<'open'|'closed'>('dialog','closed');
+  <aside ref={setDialog.ref} data-dialog="closed">…</aside>
+*/

packages/eslint-plugin-react-zero-ui/package.json

@@ -12,7 +12,8 @@
 	],
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
-		"prepack": "pnpm build"
+		"prepack": "pnpm build",
+		"prepare": "pnpm run build"
 	},
 	"peerDependencies": {
 		"eslint": "^9 || ^8",

packages/eslint-plugin-react-zero-ui/src/rules/require-data-attr.ts

@@ -2,6 +2,9 @@ import { ESLintUtils, TSESTree as T } from '@typescript-eslint/utils';
 
 const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/serbyte/eslint-plugin-react-zero-ui/blob/main/docs/${name}.md`);
 
+// At top of create()
+const hookLoc = new Map<string /*setter*/, T.SourceLocation>();
+
 export default createRule({
 	name: 'require-data-attr',
 	meta: {
@@ -46,6 +49,7 @@ export default createRule({
 				if (!keyArg || keyArg.type !== 'Literal' || typeof keyArg.value !== 'string') return;
 
 				scopedSetters.set(setter.name, keyArg.value);
+				hookLoc.set(setter.name, node.loc!);
 			},
 
 			//----------------------------------------------------------------
@@ -81,11 +85,7 @@ export default createRule({
 			'Program:exit'() {
 				for (const [setter, key] of scopedSetters) {
 					if (!seenRef.has(setter)) {
-						ctx.report({
-							messageId: 'missingRef',
-							loc: ctx.getScope().block.loc!, // entire file
-							data: { setter, key },
-						});
+						ctx.report({ messageId: 'missingRef', loc: hookLoc.get(setter)!, data: { setter, key } });
 					}
 				}
 			},