feat(eslint-plugin-react-components): add dynamic imports support to prefer-fluentui-v9 rule #34711
Conversation
…prefer-fluentui-v9 rule
…amic-imports-support
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
dmytrokirpa
changed the title
…amic-imports-support
| specifier.type === AST_NODE_TYPES.ImportSpecifier && | ||
| specifier.imported.type === AST_NODE_TYPES.Identifier | ||
| ) { | ||
| const name = specifier.imported.name; |
There was a problem hiding this comment.
moved to the reusable function reportIfMigration
Hotell
left a comment
Hotell
left a comment
There was a problem hiding this comment.
left some comments, looking forward to get this in
| */ | ||
| function reportIfMigration(componentName: string, node: TSESTree.Node) { | ||
| if (!componentName) return; | ||
| if (componentName === 'Icon') { |
There was a problem hiding this comment.
can we refactor this to have exit early logic, which will simplify the implementation and reduce cognitive load ?
| */ | ||
| CallExpression(node) { | ||
| if ( | ||
| node.callee.type === AST_NODE_TYPES.MemberExpression && |
There was a problem hiding this comment.
couldn't this be simplified to chunked nodes in visitor pattern ? this seems very complex ?
have we tried the opposite approach ? focusing solely on finding import('url') and traversing the AST up to obtain the results ?
| ], | ||
| }, | ||
| { | ||
| code: `const Calendar = React.lazy(() => import('@fluentui/react').then(m => ({ default: m.Calendar })));`, |
There was a problem hiding this comment.
will this catch also standard dynamic imports outside React.lazy() ?
contrived example:
function hello(){
import('@fluentui/react').then(m => (
window.v8 = m
console.log('react loaded') )
}
There was a problem hiding this comment.
…amic-imports-support
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
change/@fluentui-eslint-plugin-react-components-e047da88-e2eb-4e37-bdfe-aa555f9988b6.json
Show resolved
Hide resolved
2 participants
Previous Behavior
The
prefer-fluentui-v9ESLint rule did not detect or report dynamic imports (using.thenorasync/awaitpatterns) of Fluent UI v8 components from@fluentui/react. As a result, v8/compat components could be dynamically imported without triggering migration warnings.New Behavior
The rule now detects and reports dynamic imports of Fluent UI v8 components from
@fluentui/reactusing both.thenandasync/awaitpatterns. It flags these usages and suggests the appropriate v9 alternatives, ensuring consistent enforcement of migration guidance for both static and dynamic imports.Related Issue(s)