eslint-plugin-what 0.5.3

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "eslint-plugin-what",
+  "version": "0.5.3",
+  "description": "ESLint rules for What Framework — catch signal bugs, enforce patterns",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "what",
+    "framework",
+    "signals",
+    "reactive"
+  ],
+  "peerDependencies": {
+    "eslint": ">=9.0.0"
+  },
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zvndev/what-fw"
+  },
+  "bugs": {
+    "url": "https://github.com/zvndev/what-fw/issues"
+  },
+  "homepage": "https://whatframework.dev"
+}

package/src/index.js

@@ -0,0 +1,72 @@
+/**
+ * eslint-plugin-what
+ *
+ * ESLint rules for What Framework — catch signal bugs, enforce patterns.
+ * Designed for ESLint 9+ flat config.
+ *
+ * Usage:
+ *   import what from 'eslint-plugin-what';
+ *   export default [what.configs.recommended];
+ */
+
+import noSignalInEffectDeps from './rules/no-signal-in-effect-deps.js';
+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';
+
+const plugin = {
+  meta: {
+    name: 'eslint-plugin-what',
+    version: '0.5.2',
+  },
+
+  rules: {
+    'no-signal-in-effect-deps': noSignalInEffectDeps,
+    'reactive-jsx-children': reactiveJsxChildren,
+    'no-signal-write-in-render': noSignalWriteInRender,
+    'no-camelcase-events': noCamelcaseEvents,
+    'prefer-set': preferSet,
+  },
+
+  configs: {},
+};
+
+// Flat config presets (ESLint 9+)
+
+plugin.configs.recommended = {
+  plugins: { what: plugin },
+  rules: {
+    'what/no-signal-in-effect-deps': 'warn',
+    'what/reactive-jsx-children': 'warn',
+    'what/no-signal-write-in-render': 'warn',
+    'what/no-camelcase-events': 'warn',
+    'what/prefer-set': 'off',
+  },
+};
+
+// Stricter config — all rules as errors + prefer-set
+plugin.configs.strict = {
+  plugins: { what: plugin },
+  rules: {
+    'what/no-signal-in-effect-deps': 'error',
+    'what/reactive-jsx-children': 'error',
+    'what/no-signal-write-in-render': 'error',
+    'what/no-camelcase-events': 'error',
+    'what/prefer-set': 'warn',
+  },
+};
+
+// Config for projects using the What compiler (disables rules the compiler handles)
+plugin.configs.compiler = {
+  plugins: { what: plugin },
+  rules: {
+    'what/no-signal-in-effect-deps': 'warn',
+    '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/prefer-set': 'off',
+  },
+};
+
+export default plugin;

package/src/rules/no-camelcase-events.js

@@ -0,0 +1,104 @@
+/**
+ * Rule: what/no-camelcase-events
+ *
+ * Warn on camelCase event handlers (onClick, onChange, etc.) in JSX when not
+ * using the What compiler. Without the compiler, esbuild passes props through
+ * directly to the DOM, and DOM event handlers must be lowercase (onclick, onchange).
+ *
+ * The compiler normalizes these automatically, so this rule only applies to
+ * projects using esbuild's built-in JSX transform instead of what-compiler.
+ *
+ * Bad (without compiler):  <button onClick={fn} />
+ * Good (without compiler): <button onclick={fn} />
+ * Good (with compiler):    <button onClick={fn} />  — compiler handles it
+ */
+
+// Common DOM events that have camelCase variants
+const CAMEL_EVENTS = new Map([
+  ['onClick', 'onclick'],
+  ['onChange', 'onchange'],
+  ['onInput', 'oninput'],
+  ['onSubmit', 'onsubmit'],
+  ['onFocus', 'onfocus'],
+  ['onBlur', 'onblur'],
+  ['onKeyDown', 'onkeydown'],
+  ['onKeyUp', 'onkeyup'],
+  ['onKeyPress', 'onkeypress'],
+  ['onMouseDown', 'onmousedown'],
+  ['onMouseUp', 'onmouseup'],
+  ['onMouseMove', 'onmousemove'],
+  ['onMouseEnter', 'onmouseenter'],
+  ['onMouseLeave', 'onmouseleave'],
+  ['onMouseOver', 'onmouseover'],
+  ['onMouseOut', 'onmouseout'],
+  ['onTouchStart', 'ontouchstart'],
+  ['onTouchEnd', 'ontouchend'],
+  ['onTouchMove', 'ontouchmove'],
+  ['onScroll', 'onscroll'],
+  ['onWheel', 'onwheel'],
+  ['onDragStart', 'ondragstart'],
+  ['onDragEnd', 'ondragend'],
+  ['onDragOver', 'ondragover'],
+  ['onDrop', 'ondrop'],
+  ['onContextMenu', 'oncontextmenu'],
+  ['onDoubleClick', 'ondblclick'],
+  ['onPointerDown', 'onpointerdown'],
+  ['onPointerUp', 'onpointerup'],
+  ['onPointerMove', 'onpointermove'],
+  ['onAnimationEnd', 'onanimationend'],
+  ['onTransitionEnd', 'ontransitionend'],
+  ['onLoad', 'onload'],
+  ['onError', 'onerror'],
+]);
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow camelCase event handlers in JSX without the compiler',
+      recommended: true,
+    },
+    fixable: 'code',
+    messages: {
+      camelCaseEvent:
+        '"{{name}}" won\'t work without the What compiler. Use "{{fix}}" instead.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          hasCompiler: {
+            type: 'boolean',
+            description: 'Set to true if the project uses what-compiler (skips this rule)',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    if (options.hasCompiler === true) return {};
+
+    return {
+      JSXAttribute(node) {
+        if (node.name.type !== 'JSXIdentifier') return;
+
+        const name = node.name.name;
+        const fix = CAMEL_EVENTS.get(name);
+
+        if (fix) {
+          context.report({
+            node: node.name,
+            messageId: 'camelCaseEvent',
+            data: { name, fix },
+            fix(fixer) {
+              return fixer.replaceText(node.name, fix);
+            },
+          });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,75 @@
+/**
+ * Rule: what/no-signal-in-effect-deps
+ *
+ * Warn when passing signal getter functions to useEffect dependency arrays.
+ * Signal getters create new function references, so deps always appear "changed",
+ * causing the effect to re-run on every render cycle.
+ *
+ * Bad:  useEffect(() => { ... }, [count])     // count is a signal getter fn
+ * Good: useEffect(() => { ... }, [count()])   // use the value instead
+ * Good: useEffect(() => { count(); }, [])     // or rely on auto-tracking
+ */
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow signal getters in useEffect dependency arrays',
+      recommended: true,
+    },
+    messages: {
+      signalInDeps:
+        'Signal getter "{{name}}" in useEffect deps will cause infinite re-runs. ' +
+        'Use {{name}}() for the value, or remove deps to rely on auto-tracking.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    // Track variables initialized from signal/useSignal/computed calls
+    const signalVars = new Set();
+
+    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);
+        }
+      },
+
+      CallExpression(node) {
+        // Match useEffect(fn, [deps])
+        if (
+          node.callee.type !== 'Identifier' ||
+          node.callee.name !== 'useEffect'
+        ) return;
+
+        const depsArg = node.arguments[1];
+        if (!depsArg || depsArg.type !== 'ArrayExpression') return;
+
+        for (const element of depsArg.elements) {
+          if (!element) continue;
+
+          // Direct signal reference: useEffect(fn, [count])
+          if (
+            element.type === 'Identifier' &&
+            signalVars.has(element.name)
+          ) {
+            context.report({
+              node: element,
+              messageId: 'signalInDeps',
+              data: { name: element.name },
+            });
+          }
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,126 @@
+/**
+ * Rule: what/no-signal-write-in-render
+ *
+ * Warn when writing to a signal outside of event handlers, effects, or callbacks.
+ * Signal writes during render (the component function body) can cause infinite
+ * re-render loops because the write triggers effects that re-run the component.
+ *
+ * Bad:  function App() { count(count() + 1); return ... }
+ * Good: function App() { return <button onclick={() => count(c => c + 1)} /> }
+ * Good: useEffect(() => { count(0); })
+ */
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow signal writes in the render phase (component function body)',
+      recommended: true,
+    },
+    messages: {
+      signalWriteInRender:
+        'Signal write to "{{name}}" during render may cause infinite loops. ' +
+        'Move signal writes into event handlers, effects, or callbacks.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    const signalVars = new Set();
+
+    // Track whether we're inside a "safe" write context
+    function isInsideSafeContext(node) {
+      let current = node.parent;
+      while (current) {
+        // Inside event handler (arrow fn or function expression assigned to on* prop or as callback arg)
+        if (
+          current.type === 'ArrowFunctionExpression' ||
+          current.type === 'FunctionExpression'
+        ) {
+          // Check if it's an event handler prop: onclick={() => ...}
+          if (
+            current.parent?.type === 'JSXExpressionContainer' &&
+            current.parent?.parent?.type === 'JSXAttribute'
+          ) {
+            return true;
+          }
+          // Check if it's an event handler prop (object property): { onclick: () => ... }
+          if (
+            current.parent?.type === 'Property' &&
+            current.parent?.key?.type === 'Identifier' &&
+            /^on[a-z]/.test(current.parent.key.name)
+          ) {
+            return true;
+          }
+          // Callback passed to useEffect, effect, setTimeout, etc.
+          if (current.parent?.type === 'CallExpression') {
+            const callee = current.parent.callee;
+            if (
+              callee.type === 'Identifier' &&
+              ['useEffect', 'effect', 'setTimeout', 'setInterval', 'requestAnimationFrame',
+               'queueMicrotask', 'batch', 'onMount', 'onCleanup', 'addEventListener'].includes(callee.name)
+            ) {
+              return true;
+            }
+          }
+          // Generic arrow/function inside another arrow/function — assume nested callback is safe
+          if (
+            current.parent?.type === 'ArrowFunctionExpression' ||
+            current.parent?.type === 'FunctionExpression'
+          ) {
+            return true;
+          }
+        }
+        current = current.parent;
+      }
+      return false;
+    }
+
+    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);
+        }
+      },
+
+      CallExpression(node) {
+        // Check for signal writes: count(value), count.set(value)
+        let signalName = null;
+
+        // Direct call: count(value) — with at least one argument (0-arg is a read)
+        if (
+          node.callee.type === 'Identifier' &&
+          signalVars.has(node.callee.name) &&
+          node.arguments.length > 0
+        ) {
+          signalName = node.callee.name;
+        }
+
+        // Method call: count.set(value)
+        if (
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object.type === 'Identifier' &&
+          signalVars.has(node.callee.object.name) &&
+          node.callee.property.type === 'Identifier' &&
+          node.callee.property.name === 'set'
+        ) {
+          signalName = node.callee.object.name;
+        }
+
+        if (signalName && !isInsideSafeContext(node)) {
+          context.report({
+            node,
+            messageId: 'signalWriteInRender',
+            data: { name: signalName },
+          });
+        }
+      },
+    };
+  },
+};

package/src/rules/prefer-set.js

@@ -0,0 +1,73 @@
+/**
+ * Rule: what/prefer-set
+ *
+ * Suggest using sig.set(value) instead of sig(value) for signal writes.
+ * The unified getter/setter pattern sig(value) is valid but ambiguous —
+ * sig.set(value) makes the write intent explicit and easier to grep/review.
+ *
+ * Bad:  count(5)           // is this a read or write?
+ * Bad:  count(c => c + 1)  // updater pattern
+ * Good: count.set(5)
+ * Good: count.set(c => c + 1)
+ *
+ * This rule is off by default (style preference, not a bug).
+ */
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer sig.set(value) over sig(value) for signal writes',
+      recommended: false,
+    },
+    fixable: 'code',
+    messages: {
+      preferSet:
+        'Prefer "{{name}}.set({{arg}})" over "{{name}}({{arg}})" for explicit signal writes.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    const signalVars = new Set();
+
+    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);
+        }
+      },
+
+      CallExpression(node) {
+        // Only match: signalVar(value) with exactly 1 argument
+        if (
+          node.callee.type !== 'Identifier' ||
+          !signalVars.has(node.callee.name) ||
+          node.arguments.length !== 1
+        ) return;
+
+        // Already using .set() — skip
+        if (node.callee.type === 'MemberExpression') return;
+
+        const name = node.callee.name;
+        const sourceCode = context.sourceCode || context.getSourceCode();
+        const argText = sourceCode.getText(node.arguments[0]);
+
+        context.report({
+          node,
+          messageId: 'preferSet',
+          data: { name, arg: argText },
+          fix(fixer) {
+            return fixer.replaceText(node, `${name}.set(${argText})`);
+          },
+        });
+      },
+    };
+  },
+};

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

@@ -0,0 +1,91 @@
+/**
+ * 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
+ * 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
+ * vite.config presence). If no compiler is detected, it warns on bare signal
+ * reads in JSX expression containers.
+ *
+ * Bad (without compiler):  <p>{count()}</p>
+ * Good (without compiler): <p>{() => count()}</p>
+ */
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Require reactive function wrappers for signal reads in JSX when not using the compiler',
+      recommended: true,
+    },
+    messages: {
+      bareSignalRead:
+        'Signal read "{{name}}()" in JSX won\'t be reactive without the What compiler. ' +
+        'Wrap in a function: {() => {{name}}()}',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          hasCompiler: {
+            type: 'boolean',
+            description: 'Set to true if the project uses what-compiler (auto-detected if not set)',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+
+    // If the user explicitly says they have the compiler, skip all checks
+    if (options.hasCompiler === true) return {};
+
+    // Track signal variables
+    const signalVars = new Set();
+
+    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);
+        }
+      },
+
+      // JSX expression: {count()}
+      JSXExpressionContainer(node) {
+        const expr = node.expression;
+        if (!expr || expr.type === 'JSXEmptyExpression') return;
+
+        // Skip if parent is an attribute (e.g., className={count()}) — only check children
+        if (node.parent.type !== 'JSXElement' && node.parent.type !== 'JSXFragment') return;
+
+        // Already wrapped in arrow: {() => count()} — OK
+        if (expr.type === 'ArrowFunctionExpression' || expr.type === 'FunctionExpression') return;
+
+        // Direct signal call: {count()}
+        if (
+          expr.type === 'CallExpression' &&
+          expr.callee.type === 'Identifier' &&
+          signalVars.has(expr.callee.name) &&
+          expr.arguments.length === 0
+        ) {
+          context.report({
+            node: expr,
+            messageId: 'bareSignalRead',
+            data: { name: expr.callee.name },
+          });
+        }
+      },
+    };
+  },
+};