eslint-plugin-what 0.13.9 → 0.13.11

package/README.md

@@ -31,6 +31,25 @@ export default [
 
 ## Rules
 
+### `what/no-destructured-props`
+
+Warns when native What components destructure their props during run-once
+setup. Keep the props object and read properties inside reactive bindings:
+
+```jsx
+// Bad: the label is sampled once during component setup.
+function Button({ label }) { return <button>{label}</button>; }
+
+// Good: the binding reads the current property when it updates.
+function Button(props) { return <button>{() => props.label}</button>; }
+```
+
+The rule is enabled in recommended/compiler presets and is an error in strict.
+It does not apply this native contract to React compatibility components or
+unrelated domain/event destructuring. It does not promise the compiler will
+automatically wrap arbitrary property reads; explicit accessors work in both
+compiled and automatic-runtime authoring.
+
 ### `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.
@@ -129,6 +148,10 @@ count.set(5);
   'what/no-camelcase-events': 'warn',
   'what/no-uncalled-signals': 'warn',
   'what/prefer-set': 'off',
+  'what/no-h-in-user-code': 'warn',
+  'what/signal-call-in-jsx': 'warn',
+  'what/no-set-in-computed': 'error',
+  'what/no-destructured-props': 'warn',
 }
 ```
 
@@ -142,6 +165,10 @@ count.set(5);
   'what/no-camelcase-events': 'error',
   'what/no-uncalled-signals': 'error',
   'what/prefer-set': 'warn',
+  'what/no-h-in-user-code': 'error',
+  'what/signal-call-in-jsx': 'error',
+  'what/no-set-in-computed': 'error',
+  'what/no-destructured-props': 'error',
 }
 ```
 
@@ -155,6 +182,10 @@ count.set(5);
   'what/no-camelcase-events': 'off',          // compiler normalizes events
   'what/no-uncalled-signals': 'warn',
   'what/prefer-set': 'off',
+  'what/no-h-in-user-code': 'warn',
+  'what/signal-call-in-jsx': 'off',
+  'what/no-set-in-computed': 'error',
+  'what/no-destructured-props': ['warn', { assumeNative: true }],
 }
 ```
 

package/package.json

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

package/src/index.js

@@ -20,6 +20,7 @@ import noUncalledSignals from './rules/no-uncalled-signals.js';
 import noHInUserCode from './rules/no-h-in-user-code.js';
 import signalCallInJsx from './rules/signal-call-in-jsx.js';
 import noSetInComputed from './rules/no-set-in-computed.js';
+import noDestructuredProps from './rules/no-destructured-props.js';
 
 // Read the real version from package.json so plugin meta never goes stale.
 const require = createRequire(import.meta.url);
@@ -41,6 +42,7 @@ const plugin = {
     'no-h-in-user-code': noHInUserCode,
     'signal-call-in-jsx': signalCallInJsx,
     'no-set-in-computed': noSetInComputed,
+    'no-destructured-props': noDestructuredProps,
   },
 
   configs: {},
@@ -94,6 +96,7 @@ plugin.configs.recommended = {
     'what/no-h-in-user-code': 'warn',
     'what/signal-call-in-jsx': 'warn',
     'what/no-set-in-computed': 'error',
+    'what/no-destructured-props': 'warn',
   },
 };
 
@@ -113,6 +116,7 @@ plugin.configs.strict = {
     'what/no-h-in-user-code': 'error',
     'what/signal-call-in-jsx': 'error',
     'what/no-set-in-computed': 'error',
+    'what/no-destructured-props': 'error',
   },
 };
 
@@ -132,6 +136,7 @@ plugin.configs.compiler = {
     'what/no-h-in-user-code': 'warn',
     'what/signal-call-in-jsx': 'off',          // compiler handles signal wrapping in JSX
     'what/no-set-in-computed': 'error',
+    'what/no-destructured-props': ['warn', { assumeNative: true }],
   },
 };
 

package/src/rules/no-destructured-props.js

@@ -0,0 +1,100 @@
+/**
+ * Native What components run once. Destructuring their props during setup
+ * snapshots values before the compiler's JSX effects can track property reads.
+ * React compatibility components rerender and must not inherit this restriction.
+ */
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Keep native component props reactive instead of destructuring at setup', recommended: true },
+    schema: [{ type: 'object', properties: { assumeNative: { type: 'boolean' } }, additionalProperties: false }],
+    messages: {
+      snapshot: 'Destructuring native component props captures their initial values. Read props.property inside a reactive callback instead.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+    let native = context.options[0]?.assumeNative === true;
+    let react = /(?:^|[/\\])react-compat(?:[/\\]|$)/.test(context.filename);
+    const hNames = new Set();
+    const functions = [];
+
+    function enter(node) {
+      const name = node.id?.name || (node.parent?.type === 'VariableDeclarator' ? node.parent.id.name : '');
+      const parameter = node.params[0]?.type === 'AssignmentPattern' ? node.params[0].left : node.params[0];
+      const component = /^[A-Z]/.test(name || '') || !name && node.parent?.type === 'ExportDefaultDeclaration';
+      functions.push({ node, parameter, component, returnedTree: false, snapshots: [] });
+    }
+
+    function exit() {
+      const fn = functions.pop();
+      if (!native || react || !fn.component || !fn.returnedTree) return;
+      if (fn.parameter?.type === 'ObjectPattern' && fn.parameter.properties.length > 0) {
+        context.report({ node: fn.parameter, messageId: 'snapshot' });
+      }
+      for (const node of fn.snapshots) context.report({ node, messageId: 'snapshot' });
+    }
+
+    // Resolve the binding, not just its spelling: a block-scoped domain object
+    // or a callback parameter named `props` is not the component's parameter.
+    function isPropsRead(node, parameter) {
+      if (node.type !== 'Identifier' || parameter?.type !== 'Identifier' || node.name !== parameter.name) return false;
+      let scope = sourceCode.getScope(node);
+      while (scope) {
+        const variable = scope.set.get(node.name);
+        if (variable) return variable.defs.some(def => def.type === 'Parameter' && def.name === parameter);
+        scope = scope.upper;
+      }
+      return false;
+    }
+
+    function returnedTree(node) {
+      const fn = functions[functions.length - 1];
+      if (!fn?.component) return;
+      let parent = node;
+      while (parent && parent !== fn.node) {
+        if (parent.type === 'ReturnStatement' || parent === fn.node.body && fn.node.type === 'ArrowFunctionExpression') {
+          fn.returnedTree = true;
+          return;
+        }
+        parent = parent.parent;
+      }
+    }
+
+    return {
+      Program(node) {
+        // Imports may legally follow declarations. Determine the runtime
+        // before visiting any component, including React compatibility files.
+        for (const entry of node.body) {
+          if (entry.type !== 'ImportDeclaration') continue;
+          const from = entry.source.value;
+          if (/^(?:react|what-react)(?:\/|$)/.test(from)) react = true;
+          if (/^(?:what-framework|what-core)(?:\/|$)/.test(from)) {
+            native = true;
+            for (const spec of entry.specifiers) {
+              if (spec.type === 'ImportSpecifier' && spec.imported.name === 'h') hNames.add(spec.local.name);
+            }
+          }
+        }
+      },
+      FunctionDeclaration: enter,
+      FunctionExpression: enter,
+      ArrowFunctionExpression: enter,
+      'FunctionDeclaration:exit': exit,
+      'FunctionExpression:exit': exit,
+      'ArrowFunctionExpression:exit': exit,
+      JSXElement: returnedTree,
+      JSXFragment: returnedTree,
+      CallExpression(node) {
+        if (node.callee.type === 'Identifier' && hNames.has(node.callee.name)) returnedTree(node);
+      },
+      VariableDeclarator(node) {
+        const fn = functions[functions.length - 1];
+        if (fn?.component && node.id.type === 'ObjectPattern' && node.id.properties.length > 0 && node.init && isPropsRead(node.init, fn.parameter)) {
+          fn.snapshots.push(node.id);
+        }
+      },
+    };
+  },
+};