search

ryansolid / babel-plugin-jsx-dom-expressions

A JSX to DOM plugin that wraps expressions for fine grained change detection
MIT License
60 stars 10 forks source link

`width` and `height` missing in `SVGAttributes`? #36

Closed joergplewe closed 4 years ago

joergplewe commented 4 years ago

Hi!

I'm trying to use Solid.js to create an SVG application. Works fine, but VSCode and tsc complain about things like:

Type '{ width: string; height: string; x: string; fill: string; }' is not assignable to type 'SVGAttributes<SVGRectElement>'. Property 'width' does not exist on type 'SVGAttributes<SVGRectElement>'.

SVGAttributes in fact lacks width and height, so....

joergplewe commented 4 years ago

I could solve the issue by npm install @types/react-dom and renaming all class attributes to className.

By that, I could also comment then line

// "./node_modules/babel-plugin-jsx-dom-expressions",

in tsconfig.json.

ryansolid commented 4 years ago

Yeah that's a strange omission. The JSX types have been a real collaborative effort and that somehow seems to be missed since we split out SVG types. I will look at getting this fixed up.

In general you probably don't want to be using the React JSX types as you will likely hit more issues especially around the definition of JSX Elements, refs etc...

ryansolid commented 4 years ago

Fixed in v0.16.2. If you find anything else unusual like that feel free to open another issue. Admittedly I don't use TypeScript or SVG very much so there is probably still more potential for other similar omissions.

joergplewe commented 4 years ago

what about href as used in <use href="#airplane" />?

ryansolid commented 4 years ago

Yeah looking this was a casualty of https://github.com/ryansolid/babel-plugin-jsx-dom-expressions/pull/26

Inheriting from HTMLAttribute used to bring more attributes along. I'm going to diff the old list against MDN SVGAttribute and add the missing ones back.

ryansolid commented 4 years ago

I've added back those removed unintentionally by that pr in v0.16.3 (including href).