Advanced Configuration (WIP)

import 
const react: {
    readonly meta: {
        readonly name: string;
        readonly version: string;
    };
    readonly configs: {
        readonly core: {
            readonly plugins: {
                readonly "@eslint-react": {
                    meta: {
                        name: string;
                        version: string;
                    };
                    rules: {
                        "avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                        "avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                        "ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                        "no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-prop": _typescript_eslint_utils_ts_eslint ...
react from "@eslint-react/eslint-plugin";
 
export default [
  // ...
  {
    files: string[]files: ["**/*.{ts,tsx}"],
    ...
const react: {
    readonly meta: {
        readonly name: string;
        readonly version: string;
    };
    readonly configs: {
        readonly core: {
            readonly plugins: {
                readonly "@eslint-react": {
                    meta: {
                        name: string;
                        version: string;
                    };
                    rules: {
                        "avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                        "avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                        "ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                        "no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                        "no-children-prop": _typescript_eslint_utils_ts_eslint ...
react.
configs: {
    readonly core: {
        readonly plugins: {
            readonly "@eslint-react": {
                meta: {
                    name: string;
                    version: string;
                };
                rules: {
                    "avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                    "avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                    "ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                    "no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<"noAccessStateInSetstate", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                    "no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<"noArrayIndexKey", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                    "no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<"noChildrenCount", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                    "no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                    "no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                    "no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                    "no-children-prop" ...
configs.
recommended: {
    readonly plugins: {
        readonly "@eslint-react": {
            meta: {
                name: string;
                version: string;
            };
            rules: {
                "avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                "avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                "ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                "no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<"noAccessStateInSetstate", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                "no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<"noArrayIndexKey", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
                "no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                "no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                "no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                "no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                "no-children-prop": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
                "no-children-to-array": _typescript_eslint_utils_ts_eslint.RuleModule< ...
recommended,
    
settings: {
    "react-x": {
        importSource: string;
        jsxPragma: string;
        jsxPragmaFrag: string;
        additionalHooks: {
            useLayoutEffect: string[];
        };
        additionalComponents: ({
            name: string;
            attributes: {
                name: string;
                as: string;
            }[];
        } | {
            ...;
        } | {
            ...;
        })[];
        version: string;
    };
}
settings: {
      "react-x": {
        importSource: stringimportSource: "react",
        jsxPragma: stringjsxPragma: "createElement",
        jsxPragmaFrag: stringjsxPragmaFrag: "Fragment",
        
additionalHooks: {
    useLayoutEffect: string[];
}
additionalHooks: {
          useLayoutEffect: string[]useLayoutEffect: ["useIsomorphicLayoutEffect"],
        },
        
additionalComponents: ({
    name: string;
    attributes: {
        name: string;
        as: string;
    }[];
} | {
    name: string;
    selector: string;
    as: string;
    attributes: {
        name: string;
        defaultValue: string;
    }[];
} | {
    name: string;
    selector: string;
    as: string;
    attributes: ({
        ...;
    } | {
        ...;
    })[];
})[]
additionalComponents: [
          {
            // Match all components with `html` attribute and alias it to `dangerouslySetInnerHTML`
            name: stringname: "*",
            
attributes: {
    name: string;
    as: string;
}[]
attributes: [
              { name: stringname: "html", as: stringas: "dangerouslySetInnerHTML" },
            ],
          },
          {
            // Match all components with `component="button"` attribute and alias it to `button` component with `type="button"` attribute
            name: stringname: "*",
            selector: stringselector: ":has(JSXAttribute[name.name='component'][value.value='button'])",
            as: stringas: "button",
            
attributes: {
    name: string;
    defaultValue: string;
}[]
attributes: [
              { name: stringname: "type", defaultValue: stringdefaultValue: "button" },
            ],
          },
          {
            // Match Button component with `component="a"` attribute and alias it to `a` component with `rel="noopener noreferrer"` attribute
            name: stringname: "Button",
            selector: stringselector: ":has(JSXAttribute[name.name='component'][value.value='a'])",
            as: stringas: "a",
            
attributes: {
    name: string;
    defaultValue: string;
}[]
attributes: [
              { name: stringname: "rel", defaultValue: stringdefaultValue: "noopener noreferrer" },
            ],
          },
          {
            // Match MUIButton component with a `href` or `to` attribute and alias it to `a` component with `rel="noopener noreferrer"` attribute
            name: stringname: "MUIButton",
            selector: stringselector: ":matches(:has(JSXAttribute[name.name='href']), :has(JSXAttribute[name.name='to']))",
            as: stringas: "a",
            
attributes: {
    name: string;
    defaultValue: string;
}[]
attributes: [
              { name: stringname: "rel", defaultValue: stringdefaultValue: "noopener noreferrer" },
            ],
          },
          {
            // Match TextInput component with `mode="uncontrolled"` attribute and alias it to an uncontrolled input component with `content` and `onContentUpdate` pair
            name: stringname: "TextInput",
            selector: stringselector: ":has(JSXAttribute[name.name='mode'][value.value='uncontrolled'])",
            as: stringas: "input",
            
attributes: ({
    name: string;
    as: string;
    controlled: boolean;
} | {
    name: string;
    as: string;
})[]
attributes: [
              { name: stringname: "content", as: stringas: "value", controlled: booleancontrolled: false },
              { name: stringname: "onContentUpdate", as: stringas: "onChange" },
            ],
          },
        ],
        version: stringversion: "detect",
      },
    },
  },
];

module.exports = {
  // ...
  settings: {
    "react-x": {
      importSource: "react",
      jsxPragma: "createElement",
      jsxPragmaFrag: "Fragment",
      additionalHooks: {
        useLayoutEffect: ["useIsomorphicLayoutEffect"],
      },
      additionalComponents: [
        {
          // Match all components with `html` attribute and alias it to `dangerouslySetInnerHTML`
          name: "*",
          attributes: [
            { name: "html", as: "dangerouslySetInnerHTML" },
          ],
        },
        {
          // Match Button component with `component="a"` attribute and alias it to `a` component with `rel="noopener noreferrer"` 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" },
          ],
        },
      ],
      version: "detect",
    },
  },
};