BREAKING CHANGE: refactor -> import rules show an error and made a custom rule for rn svg to show a warning

Author: fannytavart

packages/eslint-plugin/README.md

@@ -103,13 +103,14 @@ This plugin exports some custom rules that you can optionally use in your projec
 <!-- begin auto-generated rules list -->
 
 💼 Configurations enabled in.\
-✅ Set in the `recommended` configuration.\
+⚠️ Configurations set to warn in.\
 🧪 Set in the `tests` configuration.\
 🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
 
 | Name                                                                                                                                                                        | Description                                                                  | 💼                     | 🔧  |
 | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--------------------- | :-- |
 | [avoid-intl-number-format](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/avoid-intl-number-format.md)                   | Disallow the use of `Intl.NumberFormat` due to potential performance issues. | ![badge-performance][] |     |
+| [avoid-react-native-svg](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/avoid-react-native-svg.md)                       | Disallow importing the `react-native-svg` package.                           |                        | ![badge-performance][] |     |
 | [await-user-event](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/await-user-event.md)                                   | Enforces awaiting userEvent calls                                            | 🧪                     | 🔧  |
 | [no-different-displayname](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-different-displayname.md)                   | Enforce component displayName to match with component name                   | ✅                     | 🔧  |
 | [no-animated-without-native-driver](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/no-animated-without-native-driver.md) | Disallow the use of `Animated` with `useNativeDriver: false`                 | ![badge-performance][] |     |

packages/eslint-plugin/docs/rules/avoid-react-native-svg.md

@@ -0,0 +1,19 @@
+# Disallow importing the `react-native-svg` package (`@bam.tech/avoid-react-native-svg`)
+
+⚠️ This rule _warns_ in the `performance` config.
+
+<!-- end auto-generated rule header -->
+
+Prevents from using "react-native-svg" import to avoid performance issues.
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+import Svg from "react-native-svg";
+```
+
+```jsx
+const Svg = require("react-native-svg");
+```

packages/eslint-plugin/lib/configs/performance.ts

@@ -3,7 +3,7 @@ import { defineConfig } from "eslint-define-config";
 export const performanceConfig = defineConfig({
   rules: {
     "no-restricted-imports": [
-      "warn",
+      "error",
       {
         paths: [
           {
@@ -23,16 +23,12 @@ export const performanceConfig = defineConfig({
             message:
               "Please use useFocusEffect instead of useIsFocused to avoid excessive rerenders.",
           },
-          {
-            name: "react-native-svg",
-            message:
-              "Usage of react-native-svg is discouraged. Consider alternatives if applicable.",
-          },
         ],
       },
     ],
     "@bam.tech/no-animated-without-native-driver": "error",
     "@bam.tech/avoid-intl-number-format": "error",
+    "@bam.tech/avoid-react-native-svg": "warn",
   },
   overrides: [
     {

packages/eslint-plugin/lib/rules/avoid-react-native-svg.ts

@@ -0,0 +1,46 @@
+import type { Rule } from "eslint";
+
+// Custom Rule: No react-native-svg Import
+export const avoidReactNativeSvgImportRule: Rule.RuleModule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow importing the `react-native-svg` package.",
+      category: "Possible Errors",
+      recommended: true,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/no-react-native-svg-import.md",
+    },
+    messages: {
+      noReactNativeSvgImport:
+        "Do not import `react-native-svg`. Consider using an alternative method for SVG handling or ensure it's necessary for your use case.",
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === "react-native-svg") {
+          context.report({
+            node,
+            messageId: "noReactNativeSvgImport",
+          });
+        }
+      },
+      CallExpression(node) {
+        if (
+          node.callee.type === "Identifier" &&
+          node.callee.name === "require" &&
+          node.arguments.length > 0 &&
+          node.arguments[0].type === "Literal" &&
+          node.arguments[0].value === "react-native-svg"
+        ) {
+          context.report({
+            node,
+            messageId: "noReactNativeSvgImport",
+          });
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/lib/rules/index.ts

@@ -1,4 +1,5 @@
 import { avoidIntlNumberFormatRule } from "./avoid-intl-number-format";
+import { avoidReactNativeSvgImportRule } from "./avoid-react-native-svg";
 import { awaitUserEventRule } from "./await-user-event";
 import { noDifferentDisplaynameRule } from "./no-different-displayname";
 import { noAnimatedWithoutNativeDriverRule } from "./no-animated-without-native-driver";
@@ -12,4 +13,5 @@ export default {
   "no-different-displayname": noDifferentDisplaynameRule,
   "no-animated-without-native-driver": noAnimatedWithoutNativeDriverRule,
   "avoid-intl-number-format": avoidIntlNumberFormatRule,
+  "avoid-react-native-svg": avoidReactNativeSvgImportRule,
 };

packages/eslint-plugin/tests/lib/rules/avoid-react-native-svg.test.ts

@@ -0,0 +1,28 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/avoid-react-native-svg
+
+import { avoidReactNativeSvgImportRule } from "../../../lib/rules/avoid-react-native-svg";
+import { RuleTester } from "eslint";
+
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser"),
+});
+
+const valid = [``];
+
+const invalid = [
+  `import Svg from 'react-native-svg';`,
+  `const Svg = require('react-native-svg');`,
+];
+
+ruleTester.run("avoid-react-native-svg", avoidReactNativeSvgImportRule, {
+  valid,
+  invalid: invalid.map((code) => ({
+    code,
+    errors: [
+      "Do not import `react-native-svg`. Consider using an alternative method for SVG handling or ensure it's necessary for your use case.",
+    ],
+  })),
+});