@hypersolid-dev/eslint-config 0.1.2 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.0.0](https://dev.azure.com/wearetriple/Triple%20-%20Webteam/_git/eslint-config-hypersolid/branchCompare?baseVersion=GTv0.1.2&targetVersion=GTv1.0.0) (2026-11-06)
+
+### ⚠ BREAKING CHANGES
+
+* **react:** components that take `props` whole without a union props type
+are now reported.
+
+### Features
+
+* **react:** require props destructuring in component signatures ([36ad7fe](https://dev.azure.com/wearetriple/Triple%20-%20Webteam/_git/eslint-config-hypersolid/commit/36ad7fed0376a2e1842d9be4383a9d06fb930746)), closes [AB#5175](https://dev.azure.com/wearetriple/Triple%20-%20Webteam/_workitems/edit/5175)
+
 ## [0.1.2](https://dev.azure.com/wearetriple/Triple%20-%20Webteam/_git/eslint-config-hypersolid/branchCompare?baseVersion=GTv0.1.1&targetVersion=GTv0.1.2) (2026-11-06)
 
 ### Bug Fixes

package/README.md

@@ -79,6 +79,14 @@ import react from '@hypersolid-dev/eslint-config/react';
 export default [...base({ tsconfigRootDir: import.meta.dirname }), ...react(), ...next()];
 ```
 
+## Custom rules
+
+This package ships its own plugin, namespaced `@hypersolid-dev`, enabled in `react` and `react-native`.
+
+| Rule | Enforces |
+| --- | --- |
+| `@hypersolid-dev/props-destructuring` | A component destructures its props in the signature, so its props are readable there. Replaces `react/destructuring-assignment` (`always`, `destructureInSignature: always`), as `eslint-plugin-react` doesn't support ESLint 10. Checks PascalCase functions that return JSX, including those wrapped in `memo` and `forwardRef`. Bad: `const Card = (props: Props) => <h1>{props.title}</h1>`, or `const { title } = props` in the body. Good: `const Card = ({ title }: Props) => …`. When the props type is a union, such as a discriminated union, `props` may stay whole, because destructuring breaks narrowing (`if (props.kind === 'a') props.a`). |
+
 ## Overriding rules
 
 Add your own config objects after the presets. A later object wins for the files it matches.

package/dist/plugins/props-destructuring.d.ts

@@ -0,0 +1,3 @@
+import type { ESLint } from 'eslint';
+declare const plugin: ESLint.Plugin;
+export default plugin;

package/dist/plugins/props-destructuring.js

@@ -0,0 +1,86 @@
+const FUNCTION_TYPES = new Set(['ArrowFunctionExpression', 'FunctionExpression', 'FunctionDeclaration']);
+const WRAPPERS = new Set(['memo', 'forwardRef']);
+const isFunction = (node) => typeof node === 'object' && node !== null && FUNCTION_TYPES.has(node.type);
+const isPascalCase = (name) => typeof name === 'string' && /^[A-Z]/.test(name);
+function isJsx(node) {
+    if (typeof node !== 'object' || node === null) {
+        return false;
+    }
+    const { type, consequent, alternate, left, right } = node;
+    if (type === 'JSXElement' || type === 'JSXFragment') {
+        return true;
+    }
+    if (type === 'ConditionalExpression') {
+        return isJsx(consequent) || isJsx(alternate);
+    }
+    return type === 'LogicalExpression' && (isJsx(left) || isJsx(right));
+}
+// Searches the function's own return statements; nested functions return for themselves.
+function returnsJsx(node) {
+    if (typeof node !== 'object' || node === null) {
+        return false;
+    }
+    if (Array.isArray(node)) {
+        return node.some(returnsJsx);
+    }
+    const current = node;
+    return current.type === 'ReturnStatement'
+        ? isJsx(current.argument)
+        : Object.entries(current).some(([key, value]) => key !== 'parent' && !isFunction(value) && typeof value === 'object' && returnsJsx(value));
+}
+// `memo(fn)`, `React.forwardRef(fn)` and `memo(forwardRef(fn))`.
+function unwrap(node) {
+    if (isFunction(node)) {
+        return node;
+    }
+    const { type, callee, arguments: args } = (node ?? {});
+    if (type !== 'CallExpression') {
+        return undefined;
+    }
+    const { type: calleeType, name, property } = callee;
+    const calleeName = calleeType === 'MemberExpression' ? property.name : name;
+    return typeof calleeName === 'string' && WRAPPERS.has(calleeName) ? unwrap(args[0]) : undefined;
+}
+const propsDestructuring = {
+    meta: {
+        type: 'suggestion',
+        docs: { description: 'Require React components to destructure their props in the signature.' },
+        schema: [],
+        messages: {
+            destructure: 'Destructure the props in the signature: `({ title }: Props)`. A discriminated-union props type may keep `props`.',
+        },
+    },
+    create(context) {
+        const services = context.sourceCode.parserServices;
+        const checker = services.program?.getTypeChecker();
+        // Destructuring a union in the signature breaks narrowing (`if (props.kind === 'a') props.aOnly`).
+        const isUnion = (parameter) => {
+            const tsNode = services.esTreeNodeToTSNodeMap?.get(parameter);
+            return checker !== undefined && tsNode !== undefined && checker.getNonNullableType(checker.getTypeAtLocation(tsNode)).isUnion();
+        };
+        const check = (fn) => {
+            const props = fn?.params[0];
+            if (!fn || props?.type !== 'Identifier' || !returnsJsx(fn.body) && !isJsx(fn.body) || isUnion(props)) {
+                return;
+            }
+            context.report({ node: props, messageId: 'destructure' });
+        };
+        return {
+            FunctionDeclaration(node) {
+                if (isPascalCase(node.id.name)) {
+                    check(node);
+                }
+            },
+            VariableDeclarator(node) {
+                if (node.id.type === 'Identifier' && isPascalCase(node.id.name)) {
+                    check(unwrap(node.init));
+                }
+            },
+        };
+    },
+};
+const plugin = {
+    meta: { name: '@hypersolid-dev/eslint-config' },
+    rules: { 'props-destructuring': propsDestructuring },
+};
+export default plugin;

package/dist/shared.js

@@ -1,5 +1,6 @@
 import eslintReact from '@eslint-react/eslint-plugin';
 import reactHooks from 'eslint-plugin-react-hooks';
+import hypersolid from './plugins/props-destructuring.js';
 export const CODE_FILES = ['**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx}'];
 // Shared by every preset that sets `no-restricted-globals`: a later config replaces the rule's options, not merges them.
 export const NUMBER_GLOBAL_RESTRICTIONS = ['isFinite', 'isNaN'].map((name) => ({
@@ -38,6 +39,7 @@ export function reactConfigs() {
         {
             name: '@hypersolid-dev/react',
             files: CODE_FILES,
+            plugins: { '@hypersolid-dev': hypersolid },
             languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
             rules: {
                 // Off: react-hooks/exhaustive-deps reports it. Bad: `useEffect(() => log(id), [])` reported twice.
@@ -68,6 +70,8 @@ export function reactConfigs() {
                 '@eslint-react/no-array-index-key': 'error',
                 // A new context value each render re-renders every consumer. Bad: `<Context value={{ user }}>`.
                 '@eslint-react/no-unstable-context-value': 'error',
+                // Props are readable from the component's signature; a union props type may keep `props`. Bad: `const Card = (props: Props) => <h1>{props.title}</h1>`.
+                '@hypersolid-dev/props-destructuring': 'error',
             },
         },
     ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypersolid-dev/eslint-config",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "Shared ESLint flat config for Hypersolid TypeScript projects",
   "license": "MIT",
   "keywords": [