Advanced Configuration (WIP)

import eslintReact from "@eslint-react/eslint-plugin";
 
export default [
  // ...
  {
    files: ["**/*.{ts,tsx}"],
    ...eslintReact.configs["recommended-typescript"],
    settings: {
      "react-x": {
        version: "19.0.0",
        importSource: "react",
        additionalHooks: {
          useEffect: ["useIsomorphicLayoutEffect"],
          useLayoutEffect: ["useIsomorphicLayoutEffect"],
        },
        additionalComponents: [
          {
            // Match all components with `html` attribute and alias it to `dangerouslySetInnerHTML`
            name: "*",
            attributes: [
              { name: "html", as: "dangerouslySetInnerHTML" },
            ],
          },
          {
            // Match all components with `component="button"` attribute and alias it to `button` component with `type="button"` attribute
            name: "*",
            selector: ":has(JSXAttribute[name.name='component'][value.value='button'])",
            as: "button",
            attributes: [
              { name: "type", defaultValue: "button" },
            ],
          },
          {
            // Match Button component with `component="a"` attribute and alias it to `a` component with `rel="noopener noreferrer"` attribute
            name: "Button",
            selector: ":has(JSXAttribute[name.name='component'][value.value='a'])",
            as: "a",
            attributes: [
              { name: "rel", defaultValue: "noopener noreferrer" },
            ],
          },
          {
            // Match MUIButton component with a `href` or `to` attribute and alias it to `a` component with `rel="noopener noreferrer"` attribute
            name: "MUIButton",
            selector: ":matches(:has(JSXAttribute[name.name='href']), :has(JSXAttribute[name.name='to']))",
            as: "a",
            attributes: [
              { name: "rel", defaultValue: "noopener noreferrer" },
            ],
          },
          {
            // Match TextInput component with `mode="uncontrolled"` attribute and alias it to an uncontrolled input component with `content` and `onContentUpdate` pair
            name: "TextInput",
            selector: ":has(JSXAttribute[name.name='mode'][value.value='uncontrolled'])",
            as: "input",
            attributes: [
              { name: "content", as: "value", controlled: false },
              { name: "onContentUpdate", as: "onChange" },
            ],
          },
        ],
      },
    },
  },
];