From d1158e2d027f31bbbf08dc7e8b3cc697f994ca60 Mon Sep 17 00:00:00 2001 From: Andrey Goncharov Date: Mon, 26 Sep 2022 09:42:33 -0700 Subject: [PATCH] Configure eslint to prevent imports from nested paths of externally provided modules Summary: We have a list of modules that we do not bundle with the plugins, but provide externally to them from Flipper. For the mechanism to work correctly, we have to stop importing from nested paths of these modules. Reviewed By: mweststrate Differential Revision: D39776237 fbshipit-source-id: 06eae9bf9d5b11b48d2720bf592bfea749773847 --- desktop/.eslintrc.js | 20 +++++++++++++++++++ desktop/flipper-plugin/src/ui/CodeBlock.tsx | 4 +++- desktop/flipper-plugin/src/ui/NUX.tsx | 2 ++ .../src/ui/data-inspector/DataDescription.tsx | 2 ++ .../src/sandy-chrome/LeftRail.tsx | 9 ++++----- .../src/ui/components/Button.tsx | 3 +-- .../plugins/public/fresco/MultipleSelect.tsx | 2 ++ .../public/ui-debugger/components/Tree.tsx | 10 ++++++---- 8 files changed, 40 insertions(+), 12 deletions(-) diff --git a/desktop/.eslintrc.js b/desktop/.eslintrc.js index a07ca7547..5750af45e 100644 --- a/desktop/.eslintrc.js +++ b/desktop/.eslintrc.js @@ -66,6 +66,26 @@ const restrictedImportsUniversalErrorConfig = { message: "Imports from nested flipper-ui-core directories are not allowed. Import from 'flipper-ui-core' module directly. If it is missing an export, add it there.", }, + { + group: ['antd/*'], + message: + "Imports from nested antd directories are not allowed. Import from 'antd' module directly. If you want to import only a type, use `import type` syntax and silence this warning.", + }, + { + group: ['immer/*'], + message: + "Imports from nested antd directories are not allowed. Import from 'antd' module directly. If you want to import only a type, use `import type` syntax and silence this warning.", + }, + { + group: ['@emotion/styled/*'], + message: + "Imports from nested @emotion/styled directories are not allowed. Import from '@emotion/styled' module directly. If you want to import only a type, use `import type` syntax and silence this warning.", + }, + { + group: ['@ant-design/icons/*'], + message: + "Imports from nested @ant-design/icons directories are not allowed. Import from '@ant-design/icons' module directly. If you want to import only a type, use `import type` syntax and silence this warning.", + }, ], }; diff --git a/desktop/flipper-plugin/src/ui/CodeBlock.tsx b/desktop/flipper-plugin/src/ui/CodeBlock.tsx index 4d78650da..ba4815fa4 100644 --- a/desktop/flipper-plugin/src/ui/CodeBlock.tsx +++ b/desktop/flipper-plugin/src/ui/CodeBlock.tsx @@ -10,7 +10,9 @@ import React from 'react'; import {Typography} from 'antd'; import styled from '@emotion/styled'; -import {ParagraphProps} from 'antd/lib/typography/Paragraph'; +// This import is OK since it is a type-only import +// eslint-disable-next-line no-restricted-imports +import type {ParagraphProps} from 'antd/lib/typography/Paragraph'; export function CodeBlock({children, ...props}: ParagraphProps) { return ( diff --git a/desktop/flipper-plugin/src/ui/NUX.tsx b/desktop/flipper-plugin/src/ui/NUX.tsx index eedac6269..b01b62f7b 100644 --- a/desktop/flipper-plugin/src/ui/NUX.tsx +++ b/desktop/flipper-plugin/src/ui/NUX.tsx @@ -24,6 +24,8 @@ import {useValue} from '../state/atom'; import {_SandyDevicePluginInstance} from 'flipper-plugin-core'; import {Layout} from './Layout'; import {BulbTwoTone} from '@ant-design/icons'; +// This import is OK since it is a type-only import +// eslint-disable-next-line no-restricted-imports import type {TooltipPlacement} from 'antd/lib/tooltip'; import {_SandyPluginInstance} from 'flipper-plugin-core'; import {theme} from './theme'; diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx index e6374f0e3..f72d3cb12 100644 --- a/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx +++ b/desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx @@ -18,6 +18,8 @@ import {parseColor} from '../../utils/parseColor'; import {TimelineDataDescription} from './TimelineDataDescription'; import {theme} from '../theme'; import {EditOutlined} from '@ant-design/icons'; +// This import is OK since it is a type-only import +// eslint-disable-next-line no-restricted-imports import type {CheckboxChangeEvent} from 'antd/lib/checkbox'; const {Link} = Typography; diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx index b2227209c..75f1de626 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx @@ -54,7 +54,6 @@ import FpsGraph from '../chrome/FpsGraph'; import UpdateIndicator from '../chrome/UpdateIndicator'; import PluginManager from '../chrome/plugin-manager/PluginManager'; import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet'; -import SubMenu from 'antd/lib/menu/SubMenu'; import constants from '../fb-stubs/constants'; import { canFileExport, @@ -260,7 +259,7 @@ function ExtrasMenu() { className={menu} selectable={false} style={{backgroundColor: theme.backgroundDefault}}> - } small />} @@ -288,7 +287,7 @@ function ExtrasMenu() { ) : null} - + { @@ -301,7 +300,7 @@ function ExtrasMenu() { onClick={() => openDeeplinkDialog(store)}> Trigger deeplink - + {config.isFBBuild ? ( <> @@ -324,7 +323,7 @@ function ExtrasMenu() { setWelcomeVisible(true)}> Help - + {showSettings && ( diff --git a/desktop/flipper-ui-core/src/ui/components/Button.tsx b/desktop/flipper-ui-core/src/ui/components/Button.tsx index 0dd8dd982..804634885 100644 --- a/desktop/flipper-ui-core/src/ui/components/Button.tsx +++ b/desktop/flipper-ui-core/src/ui/components/Button.tsx @@ -9,10 +9,9 @@ import React, {useCallback} from 'react'; import styled from '@emotion/styled'; -import {Button as AntdButton} from 'antd'; +import {Button as AntdButton, ButtonProps} from 'antd'; import Glyph, {IconSize} from './Glyph'; -import type {ButtonProps} from 'antd/lib/button'; import {theme, getFlipperLib} from 'flipper-plugin'; type ButtonType = 'primary' | 'success' | 'warning' | 'danger'; diff --git a/desktop/plugins/public/fresco/MultipleSelect.tsx b/desktop/plugins/public/fresco/MultipleSelect.tsx index e0a5fcd1c..404ae7184 100644 --- a/desktop/plugins/public/fresco/MultipleSelect.tsx +++ b/desktop/plugins/public/fresco/MultipleSelect.tsx @@ -11,6 +11,8 @@ import React, {Component} from 'react'; import {Layout} from 'flipper-plugin'; import {Button, Menu, Checkbox, Dropdown} from 'antd'; import {DownOutlined} from '@ant-design/icons'; +// This import is OK since it is a type-only import +// eslint-disable-next-line no-restricted-imports import type {CheckboxChangeEvent} from 'antd/lib/checkbox'; export default class MultipleSelect extends Component<{ diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx index 1a6c0a76b..02461c43b 100644 --- a/desktop/plugins/public/ui-debugger/components/Tree.tsx +++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx @@ -8,8 +8,7 @@ */ import {Id, UINode} from '../types'; -import {DataNode} from 'antd/es/tree'; -import {Tree as AntTree} from 'antd'; +import {Tree as AntTree, TreeDataNode} from 'antd'; import {DownOutlined} from '@ant-design/icons'; import React from 'react'; @@ -56,10 +55,13 @@ export function Tree(props: { ); } -function nodesToAntTree(root: Id, nodes: Map): [DataNode, Id[]] { +function nodesToAntTree( + root: Id, + nodes: Map, +): [TreeDataNode, Id[]] { const inactive: Id[] = []; - function uiNodeToAntNode(id: Id): DataNode { + function uiNodeToAntNode(id: Id): TreeDataNode { const node = nodes.get(id); if (node?.activeChild) {