Create eslint rule suggesting useLayoutEffect from @react-aria (#2668)

Author: frdclav

.eslintrc.js

@@ -169,6 +169,7 @@ module.exports = {
     // custom rules
     'rulesdir/sort-imports': [ERROR],
     'rulesdir/imports': [ERROR],
+    'rulesdir/useLayoutEffectRule': [ERROR],
 
     // jsx-a11y rules
     'jsx-a11y/accessible-emoji': ERROR,

bin/useLayoutEffectRule.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+module.exports = function (context) {
+  return {
+    ImportDeclaration(node) {
+      const source = node.source.value;
+      if (source === '@react-aria/utils' || source === './useLayoutEffect' || source === './') {
+        return;
+      }
+      const importSpecifiers = node.specifiers.filter(specifier => specifier.type === 'ImportSpecifier');
+      const getName = specifier => specifier.local.name;
+      importSpecifiers.map(
+        (item) => {
+          let itemName = getName(item);
+          if (itemName === 'useLayoutEffect') {
+            context.report(node, 'Please use useLayoutEffect from @react-aria/utils instead.');
+          }
+        }
+      );
+    }
+  };
+};

packages/@react-aria/dnd/src/useDrop.ts

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {DragEvent, HTMLAttributes, RefObject, useLayoutEffect, useRef, useState} from 'react';
+import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, readFromDataTransfer} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
 import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes} from '@react-types/shared';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 interface DropOptions {

packages/@react-aria/dnd/src/useDroppableCollection.ts

@@ -14,8 +14,8 @@ import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosi
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
-import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useLayoutEffect, useRef} from 'react';
-import {mergeProps} from '@react-aria/utils';
+import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';

packages/@react-aria/ssr/package.json

@@ -17,7 +17,8 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2"
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/utils": "^3.10.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1"

packages/@react-aria/ssr/src/SSRProvider.tsx

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {ReactNode, useContext, useLayoutEffect, useMemo, useState} from 'react';
+import React, {ReactNode, useContext, useMemo, useState} from 'react';
+import {useLayoutEffect} from '@react-aria/utils';
 
 // To support SSR, the auto incrementing id counter is stored in a context. This allows
 // it to be reset on every request to ensure the client and server are consistent.

packages/@react-aria/tabs/src/useTabPanel.ts

@@ -13,8 +13,8 @@
 import {AriaTabPanelProps} from '@react-types/tabs';
 import {generateId} from './utils';
 import {getFocusableTreeWalker} from '@react-aria/focus';
-import {HTMLAttributes, RefObject, useLayoutEffect, useState} from 'react';
-import {mergeProps, useLabels} from '@react-aria/utils';
+import {HTMLAttributes, RefObject, useState} from 'react';
+import {mergeProps, useLabels, useLayoutEffect} from '@react-aria/utils';
 import {TabListState} from '@react-stately/tabs';
 
 interface TabPanelAria {

packages/@react-aria/utils/test/useObjectRef.test.js

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {useEffect, useLayoutEffect} from 'react';
+import React, {useEffect} from 'react';
 import {render, screen} from '@testing-library/react';
 import {renderHook} from '@testing-library/react-hooks';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useObjectRef} from '../';
 
 describe('useObjectRef', () => {

packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx

@@ -24,7 +24,7 @@ import {MobileSearchAutocomplete} from './MobileSearchAutocomplete';
 import {Placement} from '@react-types/overlays';
 import {Popover} from '@react-spectrum/overlays';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {forwardRef, InputHTMLAttributes, RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import React, {forwardRef, InputHTMLAttributes, RefObject, useCallback, useEffect, useRef, useState} from 'react';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';
 import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
@@ -33,6 +33,7 @@ import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.
 import {useComboBoxState} from '@react-stately/combobox';
 import {useFilter, useMessageFormatter} from '@react-aria/i18n';
 import {useHover} from '@react-aria/interactions';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSearchAutocomplete} from '@react-aria/autocomplete';
 

packages/@react-spectrum/searchwithin/src/SearchWithin.tsx

@@ -13,10 +13,11 @@
 import {classNames, SlotProvider, useFocusableRef, useResizeObserver, useStyleProps} from '@react-spectrum/utils';
 import {Field} from '@react-spectrum/label';
 import {FocusableRef} from '@react-types/shared';
-import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 import {SpectrumSearchWithinProps} from '@react-types/searchwithin';
 import styles from '@adobe/spectrum-css-temp/components/searchwithin/vars.css';
 import {useLabel} from '@react-aria/label';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLElement>) {