Merge pull request #23 from Gelio/allow-detecting-hooks-from-all-namespaces

Allow detecting hooks from all namespaces

Author: Gelio

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v2.2.0 (2019-07-14)
+
+- Add support for optionally detecting hook calls from sources other than the `React` namespace
+ (e.g. `MyHooks.useHook`).
+
+ Usage is described in the README.
+
 ## v2.1.1 (2019-06-09)
 
 - Update dependencies due to security vulnerabilities

README.md

@@ -22,6 +22,7 @@ The rule is based on an [ESLint plugin for react hooks](https://github.com/faceb
  - loops (`while`, `for`, `do ... while`)
  - functions that themselves are not custom hooks or components
 - detects using React hooks in spite of an early return
+- support for detecting hooks from namespaces other than `React` (e.g. `MyHooks.useHook`) (**optional**)
 
 ## Installation
 
@@ -48,6 +49,37 @@ Then, enable the rule by modifying `tslint.json`:
 
 To use report rule violations as warnings intead of errors, set it to `"warning"`.
 
+## Options
+
+While the rule works fine out-of-the-box, it can be customized. To specify options, use the
+following syntax when modifying `tslint.json`:
+
+```js
+{
+ "extends": [
+ // your other plugins...
+ "tslint-react-hooks"
+ ],
+ "rules": {
+ // your other rules...
+ "react-hooks-nesting": ["error", {
+ // options go here
+ }]
+ }
+}
+```
+
+### Available options
+
+- `"detect-hooks-from-non-react-namespace"` - when set to `true`, violations will be also reported
+ hooks accessed from sources other than the `React` namespace (e.g. `MyHooks.useHook` will be
+ treated as a hook).
+
+ By default, only direct calls (e.g. `useHook`) or calls from `React` namespace (e.g.
+ `React.useState`) are treated as hooks.
+
+Have an idea for an option? [Create a new issue](https://github.com/Gelio/tslint-react-hooks/issues/new).
+
 ## Workarounds
 
 For some arrow functions/function expressions, the rule has no way to determine whether those are a

src/react-hooks-nesting-walker/is-hook-call.ts

@@ -1,17 +1,46 @@
-import { CallExpression } from 'typescript';
+import {
+ CallExpression,
+ isIdentifier,
+ isPropertyAccessExpression,
+ Expression,
+} from 'typescript';
 
 import { isHookIdentifier } from './is-hook-identifier';
-import { isReactApiExpression } from './is-react-api-expression';
+import {
+ RuleOptions,
+ detectHooksFromNonReactNamespaceOptionName,
+} from './options';
 
 /**
  * Tests if a `CallExpression` calls a React Hook
  * @see https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L26
  */
-export function isHookCall({ expression }: CallExpression) {
- return isHookAccessExpression(expression);
+export function isHookCall(
+ { expression }: CallExpression,
+ ruleOptions: RuleOptions,
+) {
+ if (isIdentifier(expression) && isHookIdentifier(expression)) {
+ return true;
+ } else if (
+ isPropertyAccessExpression(expression) &&
+ isHookIdentifier(expression.name)
+ ) {
+ if (ruleOptions[detectHooksFromNonReactNamespaceOptionName]) {
+ return true;
+ }
+
+ /**
+ * The expression from which the property is accessed.
+ *
+ * @example for `React.useState`, this would be the `React` identifier
+ */
+ const sourceExpression = expression.expression;
+
+ return isReactIdentifier(sourceExpression);
+ }
+
+ return false;
 }
 
-/**
- * Tests for `useHook` or `React.useHook` calls
- */
-const isHookAccessExpression = isReactApiExpression(isHookIdentifier);
+const isReactIdentifier = (expression: Expression) =>
+ isIdentifier(expression) && expression.text === 'React';

src/react-hooks-nesting-walker/options.ts

@@ -0,0 +1,35 @@
+export const detectHooksFromNonReactNamespaceOptionName =
+ 'detect-hooks-from-non-react-namespace';
+
+export interface RuleOptions {
+ /**
+ * When set to `true`, violations will be reported for hooks from namespaces other than `React
+ * (e.g. `MyHooks.useHook` will be treated as a hook).
+ */
+ [detectHooksFromNonReactNamespaceOptionName]?: boolean;
+}
+
+const defaultRuleOptions: RuleOptions = {};
+
+export function parseRuleOptions(rawOptionsArray: unknown): RuleOptions {
+ if (!Array.isArray(rawOptionsArray)) {
+ return defaultRuleOptions;
+ }
+
+ const rawOptions: Record<string, unknown> | undefined = rawOptionsArray[0];
+ if (!rawOptions) {
+ return defaultRuleOptions;
+ }
+
+ let parsedOptions: RuleOptions = { ...defaultRuleOptions };
+
+ const detectHooksFromNonReactNamespaceOption =
+ rawOptions[detectHooksFromNonReactNamespaceOptionName];
+ if (typeof detectHooksFromNonReactNamespaceOption === 'boolean') {
+ parsedOptions[
+ detectHooksFromNonReactNamespaceOptionName
+ ] = detectHooksFromNonReactNamespaceOption;
+ }
+
+ return parsedOptions;
+}

src/react-hooks-nesting-walker/react-hooks-nesting-walker.ts

@@ -26,12 +26,15 @@ import { isReactComponentDecorator } from './is-react-component-decorator';
 import { findAncestorFunction } from './find-ancestor-function';
 import { FunctionNode, isFunctionNode } from './function-node';
 import { findClosestAncestorNode } from './find-closest-ancestor-node';
+import { parseRuleOptions } from './options';
 
 export class ReactHooksNestingWalker extends RuleWalker {
  private functionsWithReturnStatements = new Set<FunctionNode>();
 
+ private readonly ruleOptions = parseRuleOptions(this.getOptions());
+
  public visitCallExpression(node: CallExpression) {
- if (isHookCall(node)) {
+ if (isHookCall(node, this.ruleOptions)) {
  this.visitHookAncestor(node, node.parent);
  }
 

src/reactHooksNestingRule.ts

@@ -1,17 +1,32 @@
 import { SourceFile } from 'typescript';
-import { Rules, IRuleMetadata } from 'tslint';
+import { Rules, IRuleMetadata, Utils } from 'tslint';
 
 import { ReactHooksNestingWalker } from './react-hooks-nesting-walker/react-hooks-nesting-walker';
+import { detectHooksFromNonReactNamespaceOptionName } from './react-hooks-nesting-walker/options';
 
 export class Rule extends Rules.AbstractRule {
  public static metadata: IRuleMetadata = {
  ruleName: 'react-hooks-nesting',
  description: 'Enforces Rules of Hooks',
  descriptionDetails: 'See https://reactjs.org/docs/hooks-rules.html',
 
- optionsDescription: 'There are no available options.',
- options: null,
- optionExamples: [true],
+ optionsDescription: Utils.dedent`
+ An optional object with the property ${detectHooksFromNonReactNamespaceOptionName}.
+ When set to true, violations will be reported for hooks from namespaces other
+ than the React namespace (e.g. \`MyHooks.useHook\` will be treated as a hook).
+ `,
+ options: {
+ type: 'object',
+ properties: {
+ [detectHooksFromNonReactNamespaceOptionName]: {
+ type: 'boolean',
+ },
+ },
+ },
+ optionExamples: [
+ true,
+ [true, { [detectHooksFromNonReactNamespaceOptionName]: true }],
+ ],
 
  hasFix: false,
  type: 'functionality',

test/hooks-from-non-react-namespaces/non-react-namespaces.ts.lint

@@ -0,0 +1,16 @@
+import * as MyHooks from './my-hooks';
+import MyHooks2 from './my-hooks-2';
+import { MyHooks3 } from './my-hooks-3';
+
+function MyComponent() {
+ if (true) {
+ MyHooks.useHook();
+ ~~~~~~~~~~~~~~~~~ [A hook cannot appear inside an if statement]
+
+ MyHooks2.useHook();
+ ~~~~~~~~~~~~~~~~~~ [A hook cannot appear inside an if statement]
+
+ MyHooks3.useHook();
+ ~~~~~~~~~~~~~~~~~~ [A hook cannot appear inside an if statement]
+ }
+}

test/hooks-from-non-react-namespaces/react-namespace.ts.lint

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function MyComponent() {
+ if (true) {
+ React.useState();
+ ~~~~~~~~~~~~~~~~ [A hook cannot appear inside an if statement]
+ }
+}

test/hooks-from-non-react-namespaces/tslint.json

@@ -0,0 +1,11 @@
+{
+ "rulesDirectory": "../../dist",
+ "rules": {
+ "react-hooks-nesting": [
+ true,
+ {
+ "detect-hooks-from-non-react-namespace": true
+ }
+ ]
+ }
+}