eslint-plugin-what 0.5.5 → 0.5.6

package/README.md

@@ -31,30 +31,50 @@ export default [
 
 ## Rules
 
+### `what/no-uncalled-signals`
+
+Catches the #1 mistake for new developers: using a signal reference instead of calling it. Signals are functions -- you must call them to read the value.
+
+```jsx
+// Bad -- renders "[Function]", conditionals always truthy
+<span>{count}</span>
+{isLoading && <Spinner />}
+<span>{swr.data}</span>
+
+// Good
+<span>{count()}</span>
+{isLoading() && <Spinner />}
+<span>{swr.data()}</span>
+```
+
+Tracks signals from `useSignal`, `signal`, `useComputed`, `computed`, and getter fields from `useSWR`, `useFetch`, `useQuery`, `useInfiniteQuery`.
+
 ### `what/no-signal-in-effect-deps`
 
 Prevents passing signal getters as effect dependencies. Signals are already reactive -- including them in deps arrays causes effects to re-run on every render.
 
 ```js
-// Bad
-useEffect(() => { ... }, [count()]);
+// Bad -- signal reference in deps causes infinite re-runs
+useEffect(() => { ... }, [count]);
 
-// Good
+// Good -- rely on auto-tracking
 useEffect(() => { ... }, []);
 ```
 
 ### `what/reactive-jsx-children`
 
-Ensures dynamic values in JSX are wrapped in reactive functions so they update when signals change.
+Without the What compiler, bare signal reads in JSX capture the value once and won't update. This rule ensures dynamic values are wrapped in reactive functions.
 
 ```jsx
-// Bad - won't update
+// Bad (without compiler) -- won't update
 <p>{count()}</p>
 
 // Good
 <p>{() => count()}</p>
 ```
 
+Disabled automatically in the `compiler` config preset.
+
 ### `what/no-signal-write-in-render`
 
 Prevents writing to signals during component render, which can cause infinite re-render loops.
@@ -75,7 +95,7 @@ function App() {
 
 ### `what/no-camelcase-events`
 
-Enforces lowercase event handler names (`onclick` instead of `onClick`). What Framework uses lowercase events natively.
+Enforces lowercase event handler names (`onclick` instead of `onClick`). What Framework uses lowercase events natively. Disabled in the `compiler` config (the compiler normalizes events).
 
 ```jsx
 // Bad
@@ -87,7 +107,15 @@ Enforces lowercase event handler names (`onclick` instead of `onClick`). What Fr
 
 ### `what/prefer-set`
 
-Suggests using `signal.set()` instead of reassignment for signal updates. Off by default.
+Suggests using `signal.set()` instead of `signal(value)` for signal writes. Off by default (style preference).
+
+```js
+// Flagged
+count(5);
+
+// Preferred
+count.set(5);
+```
 
 ## Config Details
 
@@ -99,6 +127,7 @@ Suggests using `signal.set()` instead of reassignment for signal updates. Off by
   'what/reactive-jsx-children': 'warn',
   'what/no-signal-write-in-render': 'warn',
   'what/no-camelcase-events': 'warn',
+  'what/no-uncalled-signals': 'warn',
   'what/prefer-set': 'off',
 }
 ```
@@ -111,6 +140,7 @@ Suggests using `signal.set()` instead of reassignment for signal updates. Off by
   'what/reactive-jsx-children': 'error',
   'what/no-signal-write-in-render': 'error',
   'what/no-camelcase-events': 'error',
+  'what/no-uncalled-signals': 'error',
   'what/prefer-set': 'warn',
 }
 ```
@@ -123,6 +153,7 @@ Suggests using `signal.set()` instead of reassignment for signal updates. Off by
   'what/reactive-jsx-children': 'off',       // compiler handles reactive wrapping
   'what/no-signal-write-in-render': 'warn',
   'what/no-camelcase-events': 'off',          // compiler normalizes events
+  'what/no-uncalled-signals': 'warn',
   'what/prefer-set': 'off',
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-what",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "ESLint rules for What Framework — catch signal bugs, enforce patterns",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -14,11 +14,12 @@ import reactiveJsxChildren from './rules/reactive-jsx-children.js';
 import noSignalWriteInRender from './rules/no-signal-write-in-render.js';
 import noCamelcaseEvents from './rules/no-camelcase-events.js';
 import preferSet from './rules/prefer-set.js';
+import noUncalledSignals from './rules/no-uncalled-signals.js';
 
 const plugin = {
   meta: {
     name: 'eslint-plugin-what',
-    version: '0.5.2',
+    version: '0.5.6',
   },
 
   rules: {
@@ -27,6 +28,7 @@ const plugin = {
     'no-signal-write-in-render': noSignalWriteInRender,
     'no-camelcase-events': noCamelcaseEvents,
     'prefer-set': preferSet,
+    'no-uncalled-signals': noUncalledSignals,
   },
 
   configs: {},
@@ -41,6 +43,7 @@ plugin.configs.recommended = {
     'what/reactive-jsx-children': 'warn',
     'what/no-signal-write-in-render': 'warn',
     'what/no-camelcase-events': 'warn',
+    'what/no-uncalled-signals': 'warn',
     'what/prefer-set': 'off',
   },
 };
@@ -53,6 +56,7 @@ plugin.configs.strict = {
     'what/reactive-jsx-children': 'error',
     'what/no-signal-write-in-render': 'error',
     'what/no-camelcase-events': 'error',
+    'what/no-uncalled-signals': 'error',
     'what/prefer-set': 'warn',
   },
 };
@@ -65,6 +69,7 @@ plugin.configs.compiler = {
     'what/reactive-jsx-children': 'off',       // compiler handles reactive wrapping
     'what/no-signal-write-in-render': 'warn',
     'what/no-camelcase-events': 'off',          // compiler normalizes events
+    'what/no-uncalled-signals': 'warn',
     'what/prefer-set': 'off',
   },
 };

package/src/rules/no-signal-in-effect-deps.js

@@ -10,6 +10,8 @@
  * Good: useEffect(() => { count(); }, [])     // or rely on auto-tracking
  */
 
+import { createSignalTracker } from '../utils/signal-tracking.js';
+
 export default {
   meta: {
     type: 'problem',
@@ -26,22 +28,11 @@ export default {
   },
 
   create(context) {
-    // Track variables initialized from signal/useSignal/computed calls
-    const signalVars = new Set();
+    const tracker = createSignalTracker();
 
     return {
       VariableDeclarator(node) {
-        if (!node.init) return;
-
-        // Detect: const x = signal(...), useSignal(...), computed(...)
-        if (
-          node.init.type === 'CallExpression' &&
-          node.init.callee.type === 'Identifier' &&
-          ['signal', 'useSignal', 'computed', 'useComputed'].includes(node.init.callee.name) &&
-          node.id.type === 'Identifier'
-        ) {
-          signalVars.add(node.id.name);
-        }
+        tracker.visitors.VariableDeclarator(node);
       },
 
       CallExpression(node) {
@@ -60,7 +51,7 @@ export default {
           // Direct signal reference: useEffect(fn, [count])
           if (
             element.type === 'Identifier' &&
-            signalVars.has(element.name)
+            tracker.isSignalLike(element.name)
           ) {
             context.report({
               node: element,

package/src/rules/no-signal-write-in-render.js

@@ -10,6 +10,8 @@
  * Good: useEffect(() => { count(0); })
  */
 
+import { createSignalTracker } from '../utils/signal-tracking.js';
+
 export default {
   meta: {
     type: 'problem',
@@ -26,7 +28,7 @@ export default {
   },
 
   create(context) {
-    const signalVars = new Set();
+    const tracker = createSignalTracker();
 
     // Track whether we're inside a "safe" write context
     function isInsideSafeContext(node) {
@@ -78,15 +80,7 @@ export default {
 
     return {
       VariableDeclarator(node) {
-        if (!node.init) return;
-        if (
-          node.init.type === 'CallExpression' &&
-          node.init.callee.type === 'Identifier' &&
-          ['signal', 'useSignal', 'computed', 'useComputed'].includes(node.init.callee.name) &&
-          node.id.type === 'Identifier'
-        ) {
-          signalVars.add(node.id.name);
-        }
+        tracker.visitors.VariableDeclarator(node);
       },
 
       CallExpression(node) {
@@ -96,7 +90,7 @@ export default {
         // Direct call: count(value) — with at least one argument (0-arg is a read)
         if (
           node.callee.type === 'Identifier' &&
-          signalVars.has(node.callee.name) &&
+          tracker.isSignal(node.callee.name) &&
           node.arguments.length > 0
         ) {
           signalName = node.callee.name;
@@ -106,7 +100,7 @@ export default {
         if (
           node.callee.type === 'MemberExpression' &&
           node.callee.object.type === 'Identifier' &&
-          signalVars.has(node.callee.object.name) &&
+          tracker.isSignal(node.callee.object.name) &&
           node.callee.property.type === 'Identifier' &&
           node.callee.property.name === 'set'
         ) {

package/src/rules/no-uncalled-signals.js

@@ -0,0 +1,221 @@
+/**
+ * Rule: what/no-uncalled-signals
+ *
+ * Catch the #1 mistake for new What Framework developers: using a signal
+ * reference as a value instead of calling it.
+ *
+ * Signals are functions — you must call them to read the value.
+ * Using a signal without () gives you the function reference, which:
+ * - Renders as "[Function]" in JSX
+ * - Is always truthy in conditionals
+ * - Produces wrong comparisons
+ *
+ * Bad:  <span>{count}</span>        → renders "[Function]"
+ * Bad:  {isLoading && <Spinner />}  → always truthy
+ * Bad:  {swr.data}                  → renders "[Function]"
+ * Bad:  `Total: ${count}`           → "[Function]"
+ *
+ * Good: <span>{count()}</span>
+ * Good: {isLoading() && <Spinner />}
+ * Good: {swr.data()}
+ * Good: `Total: ${count()}`
+ *
+ * Does NOT warn when:
+ * - Signal is passed as a callback argument: fn(count)
+ * - Signal method is accessed: count.set(5), count.peek()
+ * - Signal is on left side of assignment or in typeof
+ * - Signal is used in an event handler attribute value: onClick={handler}
+ */
+
+import { createSignalTracker, SIGNAL_METHODS } from '../utils/signal-tracking.js';
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Require calling signals to read their value — catch missing ()',
+      recommended: true,
+    },
+    messages: {
+      uncalledSignal:
+        '"{{name}}" is a signal — call it to read the value: {{name}}()',
+      uncalledSWRField:
+        '"{{obj}}.{{prop}}" is a signal getter — call it to read the value: {{obj}}.{{prop}}()',
+      uncalledDestructuredGetter:
+        '"{{name}}" is a signal getter from a data hook — call it to read the value: {{name}}()',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    const tracker = createSignalTracker();
+
+    /**
+     * Check if a node is in a "pass-through" position where the signal
+     * reference itself is intentionally used (not read for its value).
+     */
+    function isPassThrough(node) {
+      const parent = node.parent;
+      if (!parent) return false;
+
+      // Argument to a function call: someFunc(count) — passing the signal
+      // EXCEPT: we still warn in JSX expression containers and template literals
+      if (parent.type === 'CallExpression' && parent.arguments.includes(node)) {
+        // Check if the call is a known signal method on this very signal
+        // e.g., count.set(otherSignal) — otherSignal is an arg, that's fine
+        return true;
+      }
+
+      // Property value in object: { handler: count } — passing reference
+      if (parent.type === 'Property' && parent.value === node) {
+        // Unless it's a JSX spread or data object where value is expected
+        return true;
+      }
+
+      // Array element: [count, other] — building a collection of signals
+      if (parent.type === 'ArrayExpression') return true;
+
+      // Assignment: someVar = count — storing the signal
+      if (parent.type === 'AssignmentExpression' && parent.right === node) return true;
+
+      // Variable init: const x = count — aliasing the signal
+      if (parent.type === 'VariableDeclarator' && parent.init === node) return true;
+
+      // Return statement: return count — returning signal from function
+      if (parent.type === 'ReturnStatement') return true;
+
+      // typeof check
+      if (parent.type === 'UnaryExpression' && parent.operator === 'typeof') return true;
+
+      // Conditional (ternary) test position is NOT pass-through — we want to warn
+      // Logical expression operand is NOT pass-through — we want to warn
+
+      return false;
+    }
+
+    /**
+     * Check if a node is a member expression accessing a safe signal method.
+     * e.g., count.set, count.peek, count.subscribe
+     */
+    function isMethodAccess(node) {
+      const parent = node.parent;
+      return (
+        parent?.type === 'MemberExpression' &&
+        parent.object === node &&
+        parent.property?.type === 'Identifier' &&
+        SIGNAL_METHODS.has(parent.property.name)
+      );
+    }
+
+    /**
+     * Check if node is the callee of a call expression (i.e., it IS being called).
+     */
+    function isBeingCalled(node) {
+      return node.parent?.type === 'CallExpression' && node.parent.callee === node;
+    }
+
+    /**
+     * Check if a MemberExpression is the callee of a call (being called).
+     */
+    function isMemberBeingCalled(node) {
+      return node.parent?.type === 'CallExpression' && node.parent.callee === node;
+    }
+
+    /**
+     * Check if node is a JSX attribute value (event handler).
+     * e.g., onClick={handler} — not a value context.
+     */
+    function isJSXAttributeValue(node) {
+      // Walk up: Identifier -> JSXExpressionContainer -> JSXAttribute
+      const exprContainer = node.parent;
+      if (exprContainer?.type === 'JSXExpressionContainer') {
+        return exprContainer.parent?.type === 'JSXAttribute';
+      }
+      return false;
+    }
+
+    function checkIdentifier(node) {
+      const name = node.name;
+
+      // Skip if being called: count() — correct usage
+      if (isBeingCalled(node)) return;
+
+      // Skip method access: count.set(...), count.peek()
+      if (isMethodAccess(node)) return;
+
+      // Skip pass-through positions
+      if (isPassThrough(node)) return;
+
+      // Skip JSX attribute values (event handlers): onClick={handler}
+      if (isJSXAttributeValue(node)) return;
+
+      // Check: is this a direct signal variable?
+      if (tracker.isSignalLike(name)) {
+        context.report({
+          node,
+          messageId: tracker.isSignal(name) ? 'uncalledSignal' : 'uncalledDestructuredGetter',
+          data: { name },
+        });
+      }
+    }
+
+    function checkMemberExpression(node) {
+      // Only check: swr.data, swr.error, swr.isLoading, etc.
+      if (
+        node.object.type === 'Identifier' &&
+        tracker.isSWRObject(node.object.name) &&
+        node.property.type === 'Identifier' &&
+        tracker.isSWRGetterField(node.property.name)
+      ) {
+        // Skip if being called: swr.data() — correct usage
+        if (isMemberBeingCalled(node)) return;
+
+        // Skip if further member access: swr.data.something (unusual but possible)
+        if (node.parent?.type === 'MemberExpression' && node.parent.object === node) return;
+
+        // Skip pass-through positions on the parent
+        if (isPassThrough(node)) return;
+
+        context.report({
+          node,
+          messageId: 'uncalledSWRField',
+          data: {
+            obj: node.object.name,
+            prop: node.property.name,
+          },
+        });
+      }
+    }
+
+    return {
+      // Merge the signal tracker's visitors
+      VariableDeclarator(node) {
+        tracker.visitors.VariableDeclarator(node);
+      },
+
+      // Check bare identifiers
+      Identifier(node) {
+        // Skip declaration positions (variable names, function params, etc.)
+        const parent = node.parent;
+        if (!parent) return;
+
+        // Skip: const count = ..., function count() {}, { count: ... } key
+        if (parent.type === 'VariableDeclarator' && parent.id === node) return;
+        if (parent.type === 'FunctionDeclaration' && parent.id === node) return;
+        if (parent.type === 'Property' && parent.key === node && !parent.computed) return;
+        if (parent.type === 'ImportSpecifier') return;
+        if (parent.type === 'ImportDefaultSpecifier') return;
+
+        // Skip: member expression property (count.set — we handle this separately)
+        if (parent.type === 'MemberExpression' && parent.property === node && !parent.computed) return;
+
+        checkIdentifier(node);
+      },
+
+      // Check member expressions like swr.data
+      MemberExpression(node) {
+        checkMemberExpression(node);
+      },
+    };
+  },
+};

package/src/rules/prefer-set.js

@@ -13,6 +13,8 @@
  * This rule is off by default (style preference, not a bug).
  */
 
+import { createSignalTracker } from '../utils/signal-tracking.js';
+
 export default {
   meta: {
     type: 'suggestion',
@@ -29,26 +31,18 @@ export default {
   },
 
   create(context) {
-    const signalVars = new Set();
+    const tracker = createSignalTracker();
 
     return {
       VariableDeclarator(node) {
-        if (!node.init) return;
-        if (
-          node.init.type === 'CallExpression' &&
-          node.init.callee.type === 'Identifier' &&
-          ['signal', 'useSignal', 'computed', 'useComputed'].includes(node.init.callee.name) &&
-          node.id.type === 'Identifier'
-        ) {
-          signalVars.add(node.id.name);
-        }
+        tracker.visitors.VariableDeclarator(node);
       },
 
       CallExpression(node) {
         // Only match: signalVar(value) with exactly 1 argument
         if (
           node.callee.type !== 'Identifier' ||
-          !signalVars.has(node.callee.name) ||
+          !tracker.isSignal(node.callee.name) ||
           node.arguments.length !== 1
         ) return;
 

package/src/rules/reactive-jsx-children.js

@@ -2,7 +2,7 @@
  * Rule: what/reactive-jsx-children
  *
  * Warn when using bare signal calls as JSX children without the compiler.
- * Without the What compiler, esbuild/TS handles JSX → h() calls, and a bare
+ * Without the What compiler, esbuild/TS handles JSX -> h() calls, and a bare
  * signal read like {count()} won't be reactive — it captures the value once.
  *
  * The rule checks if the project uses what-compiler (via config option or
@@ -13,6 +13,8 @@
  * Good (without compiler): <p>{() => count()}</p>
  */
 
+import { createSignalTracker } from '../utils/signal-tracking.js';
+
 export default {
   meta: {
     type: 'problem',
@@ -45,20 +47,11 @@ export default {
     // If the user explicitly says they have the compiler, skip all checks
     if (options.hasCompiler === true) return {};
 
-    // Track signal variables
-    const signalVars = new Set();
+    const tracker = createSignalTracker();
 
     return {
       VariableDeclarator(node) {
-        if (!node.init) return;
-        if (
-          node.init.type === 'CallExpression' &&
-          node.init.callee.type === 'Identifier' &&
-          ['signal', 'useSignal', 'computed', 'useComputed'].includes(node.init.callee.name) &&
-          node.id.type === 'Identifier'
-        ) {
-          signalVars.add(node.id.name);
-        }
+        tracker.visitors.VariableDeclarator(node);
       },
 
       // JSX expression: {count()}
@@ -76,7 +69,7 @@ export default {
         if (
           expr.type === 'CallExpression' &&
           expr.callee.type === 'Identifier' &&
-          signalVars.has(expr.callee.name) &&
+          tracker.isSignalLike(expr.callee.name) &&
           expr.arguments.length === 0
         ) {
           context.report({

package/src/utils/signal-tracking.js

@@ -0,0 +1,114 @@
+/**
+ * Shared signal-tracking utility for eslint-plugin-what rules.
+ *
+ * Single source of truth for identifying signal variables across all rules.
+ * Tracks variables from useSignal, signal, useComputed, computed,
+ * useSWR destructured fields, useFetch, useQuery, useInfiniteQuery, and createResource.
+ */
+
+// Functions that return a signal or computed directly
+export const SIGNAL_CREATORS = [
+  'signal', 'useSignal', 'computed', 'useComputed', 'memo',
+];
+
+// Functions whose return value has signal-like getter properties
+export const SWR_LIKE_HOOKS = [
+  'useSWR', 'useFetch', 'useQuery', 'useInfiniteQuery',
+];
+
+// Properties on SWR-like return objects that are getter functions (must be called)
+export const SWR_GETTER_FIELDS = new Set([
+  'data', 'error', 'isLoading', 'isValidating',
+  'isFetching', 'isError', 'isSuccess',
+  'status', 'fetchStatus',
+  'hasNextPage', 'hasPreviousPage',
+  'isFetchingNextPage', 'isFetchingPreviousPage',
+]);
+
+// Properties on signals/computeds that are safe to access without calling
+export const SIGNAL_METHODS = new Set([
+  'set', 'peek', 'subscribe', '_signal', '_subs', '_debugName',
+]);
+
+/**
+ * Creates a signal tracker for use in ESLint rule visitors.
+ *
+ * Returns an object with:
+ * - visitors: AST visitors to merge into the rule's return
+ * - isSignal(name): check if a variable is a known signal
+ * - isSWRGetter(objectName, propName): check if obj.prop is a SWR getter field
+ * - swrObjects: Set of variable names that hold SWR-like return objects
+ */
+export function createSignalTracker() {
+  const signalVars = new Set();
+  const swrObjects = new Set();
+  // Track SWR destructured fields: { data, error, isLoading } = useSWR(...)
+  const swrGetterVars = new Set();
+
+  const visitors = {
+    VariableDeclarator(node) {
+      if (!node.init) return;
+
+      // Direct signal creation: const x = useSignal(0)
+      if (
+        node.init.type === 'CallExpression' &&
+        node.init.callee.type === 'Identifier' &&
+        SIGNAL_CREATORS.includes(node.init.callee.name) &&
+        node.id.type === 'Identifier'
+      ) {
+        signalVars.add(node.id.name);
+      }
+
+      // SWR-like hook call
+      if (
+        node.init.type === 'CallExpression' &&
+        node.init.callee.type === 'Identifier' &&
+        SWR_LIKE_HOOKS.includes(node.init.callee.name)
+      ) {
+        // const swr = useSWR(...) — track the whole object
+        if (node.id.type === 'Identifier') {
+          swrObjects.add(node.id.name);
+        }
+
+        // const { data, error, isLoading } = useSWR(...)
+        if (node.id.type === 'ObjectPattern') {
+          for (const prop of node.id.properties) {
+            if (
+              prop.type === 'Property' &&
+              prop.key.type === 'Identifier' &&
+              SWR_GETTER_FIELDS.has(prop.key.name) &&
+              prop.value.type === 'Identifier'
+            ) {
+              swrGetterVars.add(prop.value.name);
+            }
+          }
+        }
+      }
+
+      // createResource returns [dataSignal, { loading, error, ... }]
+      if (
+        node.init.type === 'CallExpression' &&
+        node.init.callee.type === 'Identifier' &&
+        node.init.callee.name === 'createResource' &&
+        node.id.type === 'ArrayPattern'
+      ) {
+        const elements = node.id.elements;
+        // First element is a signal
+        if (elements[0]?.type === 'Identifier') {
+          signalVars.add(elements[0].name);
+        }
+      }
+    },
+  };
+
+  return {
+    visitors,
+    isSignal: (name) => signalVars.has(name),
+    isSignalLike: (name) => signalVars.has(name) || swrGetterVars.has(name),
+    isSWRObject: (name) => swrObjects.has(name),
+    isSWRGetterField: (propName) => SWR_GETTER_FIELDS.has(propName),
+    signalVars,
+    swrObjects,
+    swrGetterVars,
+  };
+}