From e775870cc2375a4417139fa246dcf9c1278161ee Mon Sep 17 00:00:00 2001 From: Paul Schultz Date: Tue, 15 Apr 2025 07:38:45 -0500 Subject: [PATCH] apply requested changes Signed-off-by: Paul Schultz --- docs/tutorials/jsx-transform-migration.md | 50 ----------------------- 1 file changed, 50 deletions(-) diff --git a/docs/tutorials/jsx-transform-migration.md b/docs/tutorials/jsx-transform-migration.md index c49d80f637..d82ba5e8aa 100644 --- a/docs/tutorials/jsx-transform-migration.md +++ b/docs/tutorials/jsx-transform-migration.md @@ -68,56 +68,6 @@ In the future, this setting will change to `preserve` once React 17 is fully dep - The `preserve` mode: This option leaves the JSX code untouched, embedding it directly into the output files. This is useful when you're planning to process the JSX with another tool like Babel later. The resulting files will use the `.jsx` extension to indicate the presence of JSX. -#### ESLint Configuration - -:::note - -Only update `eslintrc.js` if the package or plugin contains React code, such as `app` or a frontend plugin. - -::: - -Modify `eslintrc.json` in frontend workspaces, e.g., `./packages/app/eslintrc.js`. - -##### Required Rule - -This disables the requirement for a global React import: - -```js filename="eslintrc.js" -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { - rules: { - 'react/react-in-jsx-scope': 'off', - }, -}); -``` - -##### Recommended Rule - -This prevents default imports of React, encouraging cleaner code: - -```js filename="eslintrc.js" -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { - rules: { - 'react/react-in-jsx-scope': 'off', - // highlight-add-start - 'no-restricted-syntax': [ - 'error', - { - message: 'Default React import not allowed.', - selector: - "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']", - }, - { - message: - 'Default React import not allowed. If you need a global type that conflicts with a React named export (e.g., `MouseEvent`), use `globalThis.MouseHandler`.', - selector: - "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)", - }, - ], - // highlight-add-end - }, -}); -``` - ## Additional Resources - [Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)