The eslint-plugin-svg-jsx from fostimus

Add a case for attributes like `xlink:href`

React also does not like xlink:href, instead it should be xlinkHref. Changing props that use colons to camel case should work, but there might be caveats or special exceptions to the rule.

Support components with `.` in the identifier

Something like Menu.Item as the component name isn't properly parsed.

TypeError: Cannot read properties of undefined (reading 'range')

Hi, I got the following exception when linting my react/typescript project:

pnpm eslint --ext .ts,.tsx .

Oops! Something went wrong! :(

ESLint: 8.56.0

TypeError: Cannot read properties of undefined (reading 'range')
Occurred while linting /Users/chenyuwang/pawpawmall/packages/store/src/routes/_root.my-page.mail-settings.tsx:167
Rule: "svg-jsx/camel-case-dash"
    at Object.replaceText (/Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/rule-fixer.js:95:50)
    at Object.fix (/Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint-plugin-svg-jsx@1.2.2/node_modules/eslint-plugin-svg-jsx/rules/camel-case-dash.js:61:29)
    at normalizeFixes (/Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/report-translator.js:194:28)
    at /Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/report-translator.js:365:49
    at Object.report (/Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint@8.56.0/node_modules/eslint/lib/linter/linter.js:1047:41)
    at validateAndFixProp (/Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint-plugin-svg-jsx@1.2.2/node_modules/eslint-plugin-svg-jsx/rules/camel-case-dash.js:51:23)
    at /Users/chenyuwang/pawpawmall/node_modules/.pnpm/eslint-plugin-svg-jsx@1.2.2/node_modules/eslint-plugin-svg-jsx/rules/camel-case-dash.js:79:13
    at Array.forEach (<anonymous>)
    at handleSpreadOperator (/Users/chenyuwang/pawpawmall/node_modules/.pnpm/[email protected]/node_modules/eslint-plugin-svg-jsx/rules/camel-case-dash.js:74:17)
    at /Users/chenyuwang/pawpawmall/node_modules/.pnpm/[email protected]/node_modules/eslint-plugin-svg-jsx/rules/camel-case-dash.js:94:15

The code to lint is:

<MyPageForm
  {...emailForm.bindForm({
    async onSubmit(body) {},
  })}
>
  {...}
</MyPageForm>

Although I'm not quite understanding this library, the problem seems to be that nodeToFix is possibly undefined.

        function handleSpreadOperator(attr, charDelimtiter) {
          const props = getPropsFromObjectString(getPropIdentifier(attr, context))
          props.forEach((prop) => {
            const nodeToFix = attr?.argument?.properties?.find((node) => {
              return node?.key?.value === prop
            })?.key

            validateAndFixProp(prop, nodeToFix, charDelimtiter)
          })
        }

Allow custom HTML components without relying on '-' to not error

Right now, a custom HTML element is determined only if there's a '-' in the element name.

A better solution would be to check the element name against a list of all valid HTML element names, as a custom HTML element could be something like <heynow />.

Add tests

Unit tests would be nice to have, especially as we add more special cases to this rule

fostimus / eslint-plugin-svg-jsx Goto Github PK

eslint-plugin-svg-jsx's People

Contributors

Stargazers

Watchers

Forkers

eslint-plugin-svg-jsx's Issues

Add a case for attributes like `xlink:href`

Support components with `.` in the identifier

TypeError: Cannot read properties of undefined (reading 'range')

Allow custom HTML components without relying on '-' to not error

Add tests

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent